Merge a71aa43 into 28f155b

uxcore · Dec 20, 2018 · f9b54c5 · f9b54c5
2 parents 28f155b + a71aa43
commit f9b54c5
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 29 deletions.
diff --git a/demo/SelectFormFieldDemo.jsx b/demo/SelectFormFieldDemo.jsx
@@ -107,10 +107,12 @@ class Demo extends React.Component {
               jsxlabel="长选项截断"
               jsxname="select1"
               allowClear
-              dropdownClassName="select-dropdown-max-width"
+              multiple
+              dropdownStyle={{ maxWidth: 500 }}
               dropdownMatchSelectWidth={false}
               jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}
               disabled={false}
+              showSearch={false}
               jsxdata={me.state.jsxdata2}
               optionTextRender={(text) => {
                 let shortText = text;
@@ -207,6 +209,7 @@ class Demo extends React.Component {
             closeOnSelect
             onSelect={(...args) => { console.log(...args); }}
             jsxname="select5"
+            jsxtips="使用 renderView 渲染 VIEW 模式"
             multiple
             jsxfetchUrl="http://suggest.taobao.com/sug"
             dataType="jsonp"
@@ -224,16 +227,20 @@ class Demo extends React.Component {
               });
               return data;
             }}
+            renderView={(values) => {
+              return values.map(v => (<a
+                key={v.value}
+                href={`https://s.taobao.com/search?q=${v.text}`}
+                target="_blank"
+                style={{ margin: 5 }}
+              >
+                {v.text}
+              </a>));
+            }}
           />
         </Form>
         <Button onClick={me.handleModeChange.bind(me)}>
           切换模式
-        </Button>&nbsp;
-        <Button onClick={me.handleOptionChange.bind(me)}>
-          更改选项
-        </Button>&nbsp;
-        <Button onClick={() => { me.handleClear(); }}>
-          清空值
         </Button>
       </div>
     );

diff --git a/src/SelectFormField.jsx b/src/SelectFormField.jsx
@@ -17,11 +17,48 @@ import util from './util';
 const { processData, transferDataToObj, getValuePropValue } = util;
 
 const { Option } = Select;
-const selectOptions = ['onDeselect', 'getPopupContainer',
-  'multiple', 'filterOption', 'allowClear', 'combobox', 'searchPlaceholder',
-  'tags', 'disabled', 'showSearch', 'placeholder', 'optionLabelProp', 'optionFilterProp',
-  'maxTagTextLength', 'dropdownMatchSelectWidth', 'dropdownClassName', 'dropdownAlign',
-  'notFoundContent', 'labelInValue', 'defaultActiveFirstOption', 'onFocus', 'onBlur'];
+const selectOptions = [
+  'allowClear',
+  'autoClearSearchValue',
+  'autoFocus',
+  'backfill',
+  'combobox',
+  'defaultActiveFirstOption',
+  'defaultOpen',
+  'disabled',
+  'dropdownAlign',
+  'dropdownClassName',
+  'dropdownMatchSelectWidth',
+  'dropdownMenuStyle',
+  'dropdownRender',
+  'dropdownStyle',
+  'filterOption',
+  'firstActiveValue',
+  'getInputElement',
+  'getPopupContainer',
+  'labelInValue',
+  'loading',
+  'maxTagCount',
+  'maxTagPlaceholder',
+  'maxTagTextLength',
+  'menuItemSelectedIcon',
+  'multiple',
+  'notFoundContent',
+  'onBlur',
+  'onDeselect',
+  'onFocus',
+  'onInputKeyDown',
+  'onPopupScroll',
+  'open',
+  'optionFilterProp',
+  'optionLabelProp',
+  'placeholder',
+  'searchPlaceholder',
+  'showAction',
+  'showArrow',
+  'showSearch',
+  'tags',
+];
 
 class SelectFormField extends FormField {
   static getDerivedStateFromProps = (props, state) => {
@@ -64,20 +101,18 @@ class SelectFormField extends FormField {
 
   /**
    * select inner method is used, not very reliable
+   * 
+   * @deprecated
    */
   resetSelect() {
     const me = this;
     const { multiple, closeOnSelect } = me.props;
     if (multiple && closeOnSelect) {
       if (typeof me.select.setInputValue === 'function') {
         me.select.setInputValue('');
-      } else {
-        console.warn('select.setInputValue is invalid');
       }
       if (typeof me.select.setOpenState === 'function') {
         me.select.setOpenState(false, false);
-      } else {
-        console.warn('select.setOpenState is invalid');
       }
     }
   }
@@ -290,34 +325,60 @@ class SelectFormField extends FormField {
       /* eslint-enable no-underscore-dangle */
     } else if (mode === Constants.MODE.VIEW) {
       let str = '';
+      const renderValues = [];
       const splitter = ', \u00a0';
       if (me.state.value) {
         const value = me.processValue();
         const values = !Array.isArray(value) ? [value] : value;
-        // labelInValue mode
         if (me.props.jsxfetchUrl || me.props.onSearch || me.props.labelInValue) {
-          str = values.map(item => (item.label || item.key)).join(splitter);
+          // labelInValue mode
+          str = values.map((item) => {
+            const label = item.label || item.key;
+
+            renderValues.push({
+              value: item.key,
+              text: label,
+            });
+
+            return label;
+          }).join(splitter);
         } else if (me.props.children) {
           // <Option> mode
-          if (me.props.children) {
-            me.props.children.forEach((child) => {
-              const valuePropValue = getValuePropValue(child);
-              if (values.indexOf(valuePropValue) !== -1) {
-                str += `${child.props[me.props.optionLabelProp]} `;
-              }
-            });
-            if (str === '') {
-              str = values.join(splitter);
+          const optionsLabel = [];
+          me.props.children.forEach((child) => {
+            const valuePropValue = getValuePropValue(child);
+            if (values.indexOf(valuePropValue) !== -1) {
+              const label = `${child.props[me.props.optionLabelProp]}`;
+
+              optionsLabel.push(label);
+
+              renderValues.push({
+                value: valuePropValue,
+                text: label,
+              });
             }
-          }
+          });
+
+          str = optionsLabel.length ? optionsLabel.join(splitter) : values.join(splitter);
         } else {
           // only jsxdata
           str = values.map((item) => {
             const label = transferDataToObj(me.state.data)[item === '' ? '__all__' : item];
+
+            renderValues.push({
+              value: item,
+              text: label || item,
+            });
+
             return label || item;
           }).join(splitter);
         }
       }
+
+      if (me.props.renderView) {
+        str = me.props.renderView(renderValues);
+      }
+
       arr.push(
         <span key="select">
           {str}
@@ -353,6 +414,7 @@ SelectFormField.propTypes = assign({}, FormField.propTypes, {
   method: PropTypes.string,
   dropdownAlign: PropTypes.object,
   optionTextRender: PropTypes.func,
+  renderView: PropTypes.func,
 });
 
 SelectFormField.defaultProps = assign({}, FormField.defaultProps, {
@@ -386,6 +448,7 @@ SelectFormField.defaultProps = assign({}, FormField.defaultProps, {
     },
   },
   optionTextRender: text => text,
+  renderView: undefined,
 });
 
 export default SelectFormField;
diff --git a/tests/SelectFormField.spec.jsx b/tests/SelectFormField.spec.jsx
@@ -233,7 +233,7 @@ describe('SelectFormField', () => {
       </Form>,
     );
     expect(wrapper.find('SelectFormField').find('.view-mode').find('.kuma-uxform-field-core').find('span')
-      .text()).to.be.equal('北京 ');
+      .text()).to.be.equal('北京');
     done();
   });
 
@@ -349,4 +349,25 @@ describe('SelectFormField', () => {
     expect(fundata.length).to.be.equal(2);
     done();
   });
+
+  it('should support renderView', (done) => {
+    const data = {
+      bj: '北京',
+      sh: '上海',
+    };
+
+    const wrapper = mount(
+      <Form jsxvalues={{ test: 'bj' }} jsxmode={Constants.MODE.VIEW}>
+        <SelectFormField
+          jsxshowSearch
+          jsxname="test"
+          jsxlabel="test"
+          jsxdata={data}
+          renderView={values => values.map(v => v.text).join(', ')}
+        />
+      </Form>,
+    );
+    expect(wrapper.find('.view-mode').find('.kuma-uxform-field-core').find('span').text()).to.be.equal('北京');
+    done();
+  });
 });