feat: dropdown-render prop (#88)

* feat: dropdown-render prop

* chore: lint warnings

Author: 07akioni

examples/dropdown-render.js

@@ -0,0 +1,91 @@
+/* eslint-disable no-console */
+import React from 'react';
+import '../assets/index.less';
+import Cascader from '../src';
+
+const addressOptions = [
+  {
+    label: '福建',
+    value: 'fj',
+    children: [
+      {
+        label: '福州',
+        value: 'fuzhou',
+        children: [
+          {
+            label: '马尾',
+            value: 'mawei',
+          },
+        ],
+      },
+      {
+        label: '泉州',
+        value: 'quanzhou',
+      },
+    ],
+  },
+  {
+    label: '浙江',
+    value: 'zj',
+    children: [
+      {
+        label: '杭州',
+        value: 'hangzhou',
+        children: [
+          {
+            label: '余杭',
+            value: 'yuhang',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '北京',
+    value: 'bj',
+    children: [
+      {
+        label: '朝阳区',
+        value: 'chaoyang',
+      },
+      {
+        label: '海淀区',
+        value: 'haidian',
+        disabled: true,
+      },
+    ],
+  },
+];
+
+class Demo extends React.Component {
+  state = {
+    inputValue: '',
+  };
+
+  onChange = (value, selectedOptions) => {
+    console.log(value, selectedOptions);
+    this.setState({
+      inputValue: selectedOptions.map(o => o.label).join(', '),
+    });
+  };
+
+  render() {
+    return (
+      <Cascader
+        options={addressOptions}
+        onChange={this.onChange}
+        dropdownRender={menus => (
+          <div>
+            {menus}
+            <hr />
+            Hey, DropdownRender, Long DropdownRender, Long DropdownRender
+          </div>
+        )}
+      >
+        <input placeholder="please select address" value={this.state.inputValue} />
+      </Cascader>
+    );
+  }
+}
+
+export default Demo;

src/Cascader.tsx

@@ -38,6 +38,7 @@ export interface CascaderProps extends Pick<TriggerProps, 'getPopupContainer'> {
   popupPlacement?: string;
   prefixCls?: string;
   dropdownMenuColumnStyle?: React.CSSProperties;
+  dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
   builtinPlacements?: BuildInPlacements;
   loadData?: (selectOptions: CascaderOption[]) => void;
   changeOnSelect?: boolean;
@@ -351,6 +352,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
       builtinPlacements,
       popupPlacement,
       children,
+      dropdownRender,
       ...restProps
     } = this.props;
     // Did not show popup when there is no options
@@ -371,6 +373,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     } else {
       emptyMenuClassName = ` ${prefixCls}-menus-empty`;
     }
+    let popupNode = menus;
+    if (dropdownRender) {
+      popupNode = dropdownRender(menus);
+    }
     return (
       <Trigger
         ref={this.saveTrigger}
@@ -383,7 +389,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         onPopupVisibleChange={this.handlePopupVisibleChange}
         prefixCls={`${prefixCls}-menus`}
         popupClassName={popupClassName + emptyMenuClassName}
-        popup={menus}
+        popup={popupNode}
       >
         {React.cloneElement(children, {
           onKeyDown: this.handleKeyDown,