select 支持配置 menuTpl 自定义菜单样式 (#1545)

docs/zh-CN/components/form/select.md

@@ -12,6 +12,36 @@ order: 48
 
 参考 [Options](options)
 
+## 自定义菜单
+
+```schema: scope="body"
+{
+    "type": "form",
+    "controls": [
+        {
+            "label": "选项",
+            "type": "select",
+            "name": "select",
+            "menuTpl": "<div>${label} 值：${value}, 当前是否选中: ${checked}</div>",
+            "options": [
+                {
+                    "label":"A",
+                    "value":"a"
+                },
+                {
+                    "label":"B",
+                    "value":"b"
+                },
+                {
+                    "label":"C",
+                    "value":"c"
+                }
+            ]
+        }
+    ]
+}
+```
+
 ## 属性表
 
 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
@@ -41,3 +71,4 @@ order: 48
 | removable       | `boolean`                                                                         | `false`      | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9)                                                          |
 | deleteApi       | [API](../../docs/types/api)                                                       |              | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi)                      |
 | autoFill        | `object`                                                                          |              | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill)                                                 |
+| menuTpl         | `string`                                                                          |              | 支持配置自定义菜单                                                                                                  |

src/components/Select.tsx

@@ -313,6 +313,18 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
   multiple: boolean;
   valueField: string;
   labelField: string;
+  renderMenu?: (
+    item: Option,
+    states: {
+      index: number;
+      multiple?: boolean;
+      checkAll?: boolean;
+      checked: boolean;
+      onChange: () => void;
+      inputValue?: string;
+      searchable?: boolean;
+    }
+  ) => JSX.Element;
   searchable?: boolean;
   options: Array<Option>;
   value: any;
@@ -763,7 +775,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       editable,
       removable,
       overlayPlacement,
-      translate: __
+      translate: __,
+      renderMenu
     } = this.props;
     const {selection} = this.state;
 
@@ -832,7 +845,17 @@ export class Select extends React.Component<SelectProps, SelectState> {
             </a>
           ) : null}
 
-          {checkAll || multiple ? (
+          {renderMenu ? (
+            renderMenu(item, {
+              multiple,
+              checkAll,
+              checked,
+              onChange: () => this.handleChange(item),
+              inputValue: inputValue || '',
+              searchable,
+              index
+            })
+          ) : checkAll || multiple ? (
             <Checkbox
               checked={checked}
               trueValue={item.value}

src/renderers/Form/Select.tsx

@@ -11,7 +11,7 @@ import find from 'lodash/find';
 import debouce from 'lodash/debounce';
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
-import {isEmpty, createObject} from '../../utils/helper';
+import {isEmpty, createObject, autobind} from '../../utils/helper';
 import {dataMapping} from '../../utils/tpl-builtin';
 import {SchemaApi} from '../../Schema';
 
@@ -32,6 +32,11 @@ export interface SelectControlSchema extends FormOptionsControl {
    * 是否可以搜索值
    */
   searchable?: boolean;
+
+  /**
+   * 可以自定义菜单展示。
+   */
+  menuTpl?: string;
 }
 
 export interface SelectProps extends OptionsControlProps {
@@ -195,6 +200,15 @@ export default class SelectControl extends React.Component<SelectProps, any> {
     return combinedOptions;
   }
 
+  @autobind
+  renderMenu(option: Option, state: any) {
+    const {menuTpl, render, data} = this.props;
+
+    return render(`menu/${state.index}`, menuTpl, {
+      data: createObject(createObject(data, state), option)
+    });
+  }
+
   reload() {
     const reload = this.props.reloadOptions;
     reload && reload();
@@ -219,6 +233,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       inline,
       noResultsText,
       render,
+      menuTpl,
       ...rest
     } = this.props;
 
@@ -243,6 +258,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
           onChange={this.changeValue}
           loading={loading}
           noResultsText={noResultsText}
+          renderMenu={menuTpl ? this.renderMenu : undefined}
         />
       </div>
     );