Merge pull request #819 from RickCole21/master

nested-select 和 tree-select 补充 labelField 和 valueField

examples/style.scss

@@ -450,7 +450,7 @@ a {
       }
 
       table:not(.table) {
-        word-break: normal;
+        word-break: break-word;
       }
     }
   }

src/renderers/Form/NestedSelect.tsx

@@ -203,7 +203,6 @@ export default class NestedSelectControl extends React.Component<
       onChange,
       selectedOptions,
       joinValues,
-      valueField,
       delimiter,
       extractValue,
       withChildren,
@@ -212,6 +211,8 @@ export default class NestedSelectControl extends React.Component<
     } = this.props;
     const {stack} = this.state;
 
+    let valueField = this.props.valueField || 'value';
+
     if (
       !Array.isArray(option) &&
       option.children &&
@@ -219,7 +220,7 @@ export default class NestedSelectControl extends React.Component<
       typeof index === 'number'
     ) {
       const checked = selectedOptions.some(
-        o => o.value == (option as Option).value
+        o => o[valueField] == (option as Option)[valueField]
       );
       const uncheckable = cascade
         ? false
@@ -245,60 +246,61 @@ export default class NestedSelectControl extends React.Component<
       newValue = items.length === option.length ? [] : option;
     } else if (Array.isArray(option.children)) {
       if (cascade) {
-        newValue = xorBy(items, [option], valueField || 'value');
+        newValue = xorBy(items, [option], valueField);
       } else if (withChildren) {
         option = flattenTree([option]);
         const fn = option.every(
-          (opt: Option) => !!~items.findIndex(item => item.value === opt.value)
+          (opt: Option) =>
+            !!~items.findIndex(item => item[valueField] === opt[valueField])
         )
           ? xorBy
           : unionBy;
-        newValue = fn(items, option as any, valueField || 'value');
+        newValue = fn(items, option as any, valueField);
       } else {
         newValue = items.filter(
           item =>
-            !~flattenTree([option], i => (i as Option).value).indexOf(
+            !~flattenTree([option], i => (i as Option)[valueField]).indexOf(
-              item.value
+              item[valueField]
             )
         );
-        !~items.map(item => item.value).indexOf(option.value) &&
+        !~items.map(item => item[valueField]).indexOf(option[valueField]) &&
           newValue.push(option);
       }
     } else {
-      newValue = xorBy(items, [option], valueField || 'value');
+      newValue = xorBy(items, [option], valueField);
     }
 
     if (joinValues) {
       newValue = (newValue as Options)
-        .map(item => item[valueField || 'value'])
+        .map(item => item[valueField])
         .join(delimiter || ',');
     } else if (extractValue) {
-      newValue = (newValue as Options).map(item => item[valueField || 'value']);
+      newValue = (newValue as Options).map(item => item[valueField]);
     }
 
     onChange(newValue);
   }
 
   allChecked(options: Options): boolean {
-    const {selectedOptions, withChildren} = this.props;
+    const {selectedOptions, withChildren, valueField} = this.props;
     return options.every(option => {
       if (withChildren && option.children) {
         return this.allChecked(option.children);
       }
       return selectedOptions.some(
-        selectedOption => selectedOption.value == option.value
+        item => item[valueField || 'value'] == option[valueField || 'value']
       );
     });
   }
 
   partialChecked(options: Options): boolean {
-    const {selectedOptions, withChildren} = this.props;
+    const {selectedOptions, withChildren, valueField} = this.props;
     return options.some(option => {
       if (withChildren && option.children) {
         return this.partialChecked(option.children);
       }
       return selectedOptions.some(
-        selectedOption => selectedOption.value == option.value
+        item => item[valueField || 'value'] == option[valueField || 'value']
       );
     });
   }
@@ -394,8 +396,10 @@ export default class NestedSelectControl extends React.Component<
       disabled,
       searchable,
       searchPromptText,
-      translate: __
+      translate: __,
+      labelField
     } = this.props;
+    const valueField = this.props.valueField || 'value';
 
     const stack = this.state.stack;
 
@@ -443,7 +447,7 @@ export default class NestedSelectControl extends React.Component<
 
             {options.map((option: Option, idx: number) => {
               const checked = selectedOptions.some(
-                o => o.value == option.value
+                o => o[valueField] == option[valueField]
               );
               const selfChecked = !!option.uncheckable || checked;
               let nodeDisabled = !!option.uncheckable || !!disabled;
@@ -452,7 +456,7 @@ export default class NestedSelectControl extends React.Component<
                 <div
                   key={idx}
                   className={cx('NestedSelect-option', {
-                    'is-active': value && value === option.value
+                    'is-active': value && value === option[valueField]
                   })}
                   onClick={this.handleOptionClick.bind(this, option)}
                   onMouseEnter={this.onMouseEnter.bind(this, option, index)}
@@ -461,15 +465,15 @@ export default class NestedSelectControl extends React.Component<
                     <Checkbox
                       className={cx('NestedSelect-optionLabel')}
                       onChange={this.handleCheck.bind(this, option, index)}
-                      trueValue={option.value}
+                      trueValue={option[valueField]}
                       checked={selfChecked}
                       disabled={nodeDisabled}
                     >
-                      {option.label}
+                      {option[labelField || 'label']}
                     </Checkbox>
                   ) : (
                     <div className={cx('NestedSelect-optionLabel')}>
-                      <span>{option.label}</span>
+                      <span>{option[labelField || 'label']}</span>
                     </div>
                   )}
 
@@ -496,11 +500,13 @@ export default class NestedSelectControl extends React.Component<
 
   onMouseEnter(option: Option, index: number, e: MouseEvent) {
     let {stack} = this.state;
-    let {cascade, multiple, selectedOptions} = this.props;
+    let {cascade, multiple, selectedOptions, valueField} = this.props;
     index = index + 1;
 
     if (option.children && option.children.length) {
-      const checked = selectedOptions.some(o => o.value == option.value);
+      const checked = selectedOptions.some(
+        o => o[valueField || 'value'] == option[valueField || 'value']
+      );
       const uncheckable = cascade
         ? false
         : option.uncheckable || (multiple && checked);

src/renderers/Form/Tree.tsx

@@ -70,6 +70,7 @@ export default class TreeControl extends React.Component<TreeProps> {
       onDelete,
       rootCreatable,
       rootCreateTip,
+      labelField,
       translate: __
     } = this.props;
 
@@ -79,6 +80,7 @@ export default class TreeControl extends React.Component<TreeProps> {
         {loading ? null : (
           <TreeSelector
             classPrefix={ns}
+            labelField={labelField}
             valueField={valueField}
             disabled={disabled}
             onChange={onChange}
@@ -100,7 +102,6 @@ export default class TreeControl extends React.Component<TreeProps> {
             cascade={cascade}
             foldedField="collapsed"
             value={value || ''}
-            labelField="label"
             selfDisabledAffectChildren={false}
             onAdd={onAdd}
             creatable={creatable}

src/renderers/Form/TreeSelect.tsx

@@ -382,6 +382,7 @@ export default class TreeSelectControl extends React.Component<
       autoComplete,
       maxLength,
       minLength,
+      labelField,
       translate: __
     } = this.props;
 
@@ -410,6 +411,7 @@ export default class TreeSelectControl extends React.Component<
           <TreeSelector
             classPrefix={ns}
             onlyChildren={onlyChildren}
+            labelField={labelField}
             valueField={valueField}
             disabled={disabled}
             onChange={this.handleChange}
@@ -431,7 +433,6 @@ export default class TreeSelectControl extends React.Component<
             foldedField="collapsed"
             hideRoot
             value={value || ''}
-            labelField="label"
             maxLength={maxLength}
             minLength={minLength}
           />