Merge pull request #66 from RickCole21/master

Picker添加embed配置项

src/renderers/CRUD.tsx

@@ -773,7 +773,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     }
 
     handleSelect(items: Array<any>, unSelectedItems: Array<any>) {
-        const {store, keepItemSelectionOnPageChange, primaryField, multiple, pickerMode} = this.props;
+        const {store, keepItemSelectionOnPageChange, primaryField, multiple, pickerMode, onSelect} = this.props;
 
         let newItems = items;
         let newUnSelectedItems = unSelectedItems;
@@ -796,6 +796,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
 
         store.setSelectedItems(newItems);
         store.setUnSelectedItems(newUnSelectedItems);
+        onSelect && onSelect(newItems);
     }
 
     handleChildPopOverOpen(popOver: any) {

src/renderers/Form/Picker.tsx

@@ -12,7 +12,7 @@ import {
     Action
 } from '../../types';
 import find = require('lodash/find');
-import { anyChanged } from '../../utils/helper';
+import {anyChanged, autobind} from '../../utils/helper';
 import findIndex = require('lodash/findIndex');
 
 export interface PickerProps extends OptionsControlProps {
@@ -35,9 +35,10 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
         "options",
         "value",
         "inline",
-        "multiple"
+        "multiple",
+        "embed",
     ];
-    static defaultProps:Partial<PickerProps> = {
+    static defaultProps: Partial<PickerProps> = {
         modalMode: 'dialog',
         multiple: false,
         pickerSchema: {
@@ -45,24 +46,16 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
             listItem: {
                 title: '${label}'
             }
-        }
+        },
+        embed: false
     }
 
-    state:PickerState = {
+    state: PickerState = {
         isOpened: false,
         schema: this.buildSchema(this.props)
     };
 
-    constructor(props:PickerProps) {
+    componentWillReceiveProps(nextProps: PickerProps) {
-        super(props);
-
-        this.open = this.open.bind(this);
-        this.close = this.close.bind(this);
-        this.handleModalConfirm = this.handleModalConfirm.bind(this);
-        this.renderBody = this.renderBody.bind(this);
-    }
-
-    componentWillReceiveProps(nextProps:PickerProps) {
         const props = this.props;
 
         if (anyChanged([
@@ -76,7 +69,7 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
         }
     }
 
-    buildSchema(props:PickerProps) {
+    buildSchema(props: PickerProps) {
         return {
             ...props.pickerSchema,
             type: 'crud',
@@ -93,32 +86,41 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
         }
     }
 
+    @autobind
     open() {
         this.setState({
             isOpened: true
         });
     }
 
+    @autobind
     close() {
         this.setState({
             isOpened: false
         });
     }
 
-    handleModalConfirm(values: Array<any>, action:Action, ctx:any, components:Array<any>) {
+    @autobind
+    handleModalConfirm(values: Array<any>, action: Action, ctx: any, components: Array<any>) {
+        const idx = findIndex(components, (item: any) => item.props.type === "crud");
+        this.handleChange(values[idx].items);
+        this.close();
+    }
+
+    @autobind
+    handleChange(items: Array<any>) {
         const {
             joinValues,
-            extractValue,
             valueField,
             delimiter,
-            setOptions,
+            extractValue,
+            multiple,
             options,
-            onChange,
+            setOptions,
-            multiple
+            onChange
         } = this.props;
-        const idx = findIndex(components, (item:any) => item.props.type === "crud");
+
-        const items:Array<any> = values[idx].items;
+        let value: any = items;
-        let value:any = items;
 
         if (joinValues) {
             value = items.map((item: any) => item[valueField || 'value']).join(delimiter || ',');
@@ -128,7 +130,7 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
             value = multiple ? items : items[0];
         }
 
-        let additionalOptions:Array<any> = [];
+        let additionalOptions: Array<any> = [];
         items.forEach(item => {
             if (!find(options, option => item[valueField || 'value'] == option[valueField || 'value'])) {
                 additionalOptions.push(item);
@@ -136,12 +138,10 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
         });
 
         additionalOptions.length && setOptions(options.concat(additionalOptions));
-
         onChange(value);
-        this.close();
     }
 
-    removeItem(index:number) {
+    removeItem(index: number) {
         const {
             selectedOptions,
             joinValues,
@@ -154,7 +154,7 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
         const items = selectedOptions.concat();
         items.splice(index, 1);
 
-        let value:any = items;
+        let value: any = items;
 
         if (joinValues) {
             value = items.map((item: any) => item[valueField || 'value']).join(delimiter || ',');
@@ -164,14 +164,6 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
             value = multiple ? items : items[0];
         }
 
-        // if (joinValues) {
-        //     value = items.map((item: any) => item[valueField || 'value']).join(delimiter || ',');
-        // } else if (extractValue) {
-        //     value = items.map((item: any) => item[valueField || 'value']);
-        // } else if (!multiple) {
-        //     value = value[0];
-        // }
-
         onChange(value);
     }
 
@@ -189,27 +181,30 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
                         'is-disabled': disabled
                     })}>
                         <span data-tooltip="删除" data-position="bottom" className={`${ns}Picker-valueIcon`} onClick={this.removeItem.bind(this, index)}>×</span>
-                        <span className={`${ns}Picker-valueLabel`}>{item[labelField||'label']}</span>
+                        <span className={`${ns}Picker-valueLabel`}>{item[labelField || 'label']}</span>
                     </div>
                 ))}
             </div>
         );
     }
 
+    @autobind
     renderBody() {
         const {
             render,
             selectedOptions,
             options,
             multiple,
-            valueField
+            valueField,
+            embed
         } = this.props;
 
         return render('modal-body', this.state.schema, {
             value: selectedOptions,
             valueField,
             options: options,
-            multiple
+            multiple,
+            onSelect: embed ? this.handleChange : undefined
         }) as JSX.Element;
     }
 
@@ -220,14 +215,18 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
             disabled,
             render,
             modalMode,
-            pickerSchema,
             source,
             size,
-            env
+            env,
+            embed
         } = this.props;
-
         return (
             <div className={cx(`${ns}PickerControl`, className)}>
+                {embed ? (
+                    <div className={`${ns}Picker`}>
+                        {this.renderBody()}
+                    </div>
+                ) : (
                     <div className={`${ns}Picker`}>
                         {this.renderValues()}
 
@@ -260,6 +259,7 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
                             show: this.state.isOpened
                         })}
                     </div>
+                    )}
             </div>
         );
     }

src/renderers/Table.tsx

@@ -1432,7 +1432,8 @@ class TableRow extends React.Component<TableRowProps> {
         if (
             !e.currentTarget.contains(target) ||
             ~['INPUT', 'TEXTAREA'].indexOf(target.tagName) ||
-            target.closest(`button, a, .${ns}Form-item`)
+            // target.closest(`button, a, .${ns}Form-item`)
+            target.closest(`button, a`) // 兼容Picker的embed模式，所以去掉了.${ns}Form-item
         ) {
             return;
         }

src/utils/validations.ts

@@ -148,7 +148,7 @@ export const validateMessages: {
     isEmail: 'Email 格式不正确',
     isRequired: '这是必填项',
     isUrl: 'Url 格式不正确',
-    isInt: '请输入整形数字',
+    isInt: '请输入整型数字',
     isAlpha: '请输入字母',
     isNumeric: '请输入数字',
     isAlphanumeric: '请输入字母或者数字',