Merge 745cf58 into 4ae5ace

README.md

@@ -29,5 +29,17 @@ http://uxcore.coding.me/
 | renderView | func | N | undefined | 自定义 VIEW 模式下的 value 渲染，回调时会回传当前已选中的项目，值全部是 [{ value, text }] 格式 |
 | loadingView | string/jsx | N | undefined | 自定义异步加载的 loading 视图，默认为 kuma-loading-s 样式，不建议自定义 |
 | valueStrictMode | bool | N | false | value 的数据类型是否严格匹配，在 0.4.16 版本之前 Option 的 value 始终会转成字符串，会导致表单值传入 Number 时无法匹配到 Option，打开这个属性之后不会做格式转换 |
+| searchKey | string | N | q | 接口搜索接收的参数 key，如果仅仅改 key 不需要实现 beforeFetch 了 |
+| fetchSizeOptions | object | N | - | 如果是通过搜索返回备选项，可以通过设置 fetchSizeOptions 在备选项最后加上一个提示选项，让用户输入关键词查询 |
 
 备注：valueStrictMode 是为了保证业务向下兼容的无奈之举，实际上 value 类型本来就应该是匹配的，但是之前 rc-select 层是通过 key 这个特殊的 prop 来传递 Option 的 value 的，key 始终会被 React 转为字符串，导致 Number 类型的 value 匹配出问题。rc-select 在后续版本增加了 value 属性的传递解决了这个问题，但是为了避免业务中已经使用了 `Form.field.value === '2'` 且 `Option.value === 2` 的时候匹配出现兼容问题，因此加了这样一个开关，因此建议新业务这个开关始终打开。
+
+#### fetchSizeOptions 格式
+
+```javascript
+{
+  size: 10, // 如果需要开启提示特性，size 为必选。当接口返回的数据条数少于 size 时不会显示提示
+  text: '默认仅展示 {count} 条数据，更多请输入关键字查询...', // 非必选，有默认文案
+  style: {} // 需要覆盖提示 Option 样式时可传入
+}
+```

demo/SelectFormFieldDemo.jsx

@@ -31,7 +31,6 @@ class Demo extends React.Component {
         { value: 'bj', text: '蚂蚁金服-支付宝事业群-支付宝技术部-商家及开放技术部-商家开放质量技术部-开放与平台质量技术部-开放与平台基础质量组-开放与平台基础质量组' },
         { value: 'nj2', text: '蚂蚁金服-支付宝事业群-支付宝技术部-商家及开放技术部-商家开放质量技术部-开放与平台质量技术部-开放与平台基础质量组-尖刀质量技术组' },
         { value: 'nj3', text: '蚂蚁金服-支付宝事业群-支付宝技术部-商家及开放技术部-商家开放质量技术部-开放与平台质量技术部-开放与平台基础质量组-开放渠道与运营中台质量组' },
-        { value: 'long', text: '蚂蚁金服-支付宝事业群-支付宝技术部-商家及开放技术部-商家开放质量技术部-开放与平台质量技术部-开放与平台基础质量组-产品平台与开发者中心质量组' },
       ],
       mode: Constants.MODE.EDIT,
       value: 'aaa',
@@ -142,6 +141,34 @@ class Demo extends React.Component {
               onBlur={() => { console.log('blur'); }}
             />
           </FormRow>
+          <FormRow>
+            <SelectFormField
+              jsxlabel="搜索提示"
+              jsxname="select6"
+              ref={(r) => { this.selectRefs.select6 = r; }}
+              jsxstyle={{ width: '300px' }}
+              jsxtips={<a href="https://www.foo.bar" target="_blank" rel="noopener noreferrer">如果为找到需要的数据，请点击这里反馈</a>}
+              fetchSizeOptions={{
+                size: 10,
+              }}
+              jsxfetchUrl="http://suggest.taobao.com/sug" // 这个 mock 不支持 size
+              dataType="jsonp"
+              beforeFetch={(data) => {
+                const newData = { ...data };
+                if (newData.q === undefined) {
+                  newData.q = 'a';
+                }
+                return newData;
+              }}
+              afterFetch={(obj) => {
+                const data = {};
+                obj.result.forEach((item) => {
+                  data[item[1]] = item[0];
+                });
+                return data;
+              }}
+            />
+          </FormRow>
           <FormRow>
             <SelectFormField
               ref={(r) => { this.selectRefs.select2 = r; }}
@@ -225,7 +252,7 @@ class Demo extends React.Component {
             closeOnSelect
             onSelect={(...args) => { console.log(...args); }}
             jsxname="select5"
-            jsxtips="使用 renderView 渲染 VIEW 模式"
+            jsxtips="填写提示信息"
             multiple
             jsxfetchUrl="http://suggest.taobao.com/sug"
             dataType="jsonp"
@@ -239,6 +266,7 @@ class Demo extends React.Component {
             afterFetch={(obj) => {
               const data = {};
               obj.result.forEach((item) => {
+                console.log(item[0]);
                 data[item[1]] = item[0];
               });
               return data;