feat(Cascader):增加API: expandTrigger子菜单展开方式 (#745)

uiwjs · Apr 6, 2022 · 1358ef5 · 1358ef5
1 parent f988af3
commit 1358ef5
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 9 deletions.
diff --git a/packages/react-cascader/README.md b/packages/react-cascader/README.md
@@ -192,6 +192,66 @@ const Demo = () => {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+## 移入展开菜单
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { Cascader } from 'uiw';
+
+const Demo = () => {
+
+  const options = [
+    {
+      label: '上海市',
+      value: 1,
+      children: [
+        {
+          label: '徐汇区',
+          value: 4,
+          children: [
+            { label: '半淞园路街道', value: 6 },
+            { label: '南京东路街道', value: 7 },
+            { label: '外滩街道', value: 8 },
+          ]
+        },
+      ]
+    },
+    {
+      label: '北京市',
+      value: 9,
+      children: [
+        {
+          label: '崇文区',
+          value: 12,
+          children: [
+            { label: '东花市街道', value: 13 },
+            { label: '体育馆路街道', value: 14 },
+            { label: '前门街道', value: 15 },
+          ]
+        },
+      ]
+    },
+  ];
+
+  return (
+    <Row style={{ flexDirection: 'column' }}>
+        <Cascader
+          style={{ width:200 }}
+          expandTrigger="hover"
+          allowClear={true}
+          placeholder="请选择"
+          value={[1, 4, 7]}
+          option={options}
+          onChange={(value, seleteds) => console.log(value, seleteds)}
+          onSearch={true}
+        />
+    </Row>
+  )
+};
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ### 在表单中使用
 
 在 [`<Form />`](#/components/form) 表单中应用 `<Cascader />` 组件。
@@ -316,3 +376,4 @@ ReactDOM.render(<Demo />, _mount_);
 | onSearch | 开启搜索选项 | functionon(searchText) \| Boolean | - | v4.16.1 |
 | size | 选择框尺寸 | Enum{large, default, small } | `default` | v17.0.1 |
 | inputProps | 传给[Input](http://localhost:3000/#/components/input)组件的参数 | Object | - | v17.0.1 |
+| expandTrigger |	子集菜单的展开方式，'click' 和 'hover' |	String | `click` | v4.18.2 |
diff --git a/packages/react-cascader/src/index.tsx b/packages/react-cascader/src/index.tsx
@@ -20,14 +20,15 @@ export interface CascaderProps extends IProps, DropdownProps {
   placeholder?: string;
   disabled?: boolean;
   inputProps?: HTMLInputProps;
+  expandTrigger: 'click' | 'hover';
 }
 
 function Cascader(props: CascaderProps) {
   const {
     value,
     onChange,
     onSearch,
-
+    expandTrigger = 'click',
     size,
     disabled,
     allowClear,
@@ -110,6 +111,7 @@ function Cascader(props: CascaderProps) {
 
   const handleItemClick = (optionsItem: OptionType, level: number) => {
     selectedValue.splice(level, selectedValue.length - level, optionsItem);
+    if (!optionsItem.children) setInnerIsOpen(false);
 
     handelChange(true, selectedValue);
   };
@@ -139,6 +141,21 @@ function Cascader(props: CascaderProps) {
 
   const widths = (style?.width as number) * 0.7 || undefined;
 
+  const trigger = useMemo(() => {
+    return (cb: Function, click?: boolean) => {
+      const triggers: Record<'onClick' | 'onMouseOver', () => void> = { onClick: () => {}, onMouseOver: () => {} };
+      const callback = () => {
+        cb();
+      };
+      if (expandTrigger === 'click' || click) {
+        triggers.onClick = callback;
+      } else if (expandTrigger === 'hover') {
+        triggers.onMouseOver = callback;
+      }
+      return triggers;
+    };
+  }, []);
+
   const OptionIter = (option: Array<OptionType>, level: number = 0) => {
     if (!option) return;
 
@@ -164,7 +181,9 @@ function Cascader(props: CascaderProps) {
                 key={index}
                 text={opt.label}
                 addonAfter={opt.children ? <Icon type="right" /> : undefined}
-                onClick={() => handleItemClick(opt, level)}
+                {...trigger(() => {
+                  handleItemClick(opt, level);
+                }, !opt.children?.length)}
               />
             );
           })
@@ -215,13 +234,7 @@ function Cascader(props: CascaderProps) {
               searchOption
                 .filter((opt) => opt.label.includes(searchText.trim()))
                 .map((opt, index) => {
-                  return (
-                    <Menu.Item
-                      key={index}
-                      text={opt.label}
-                      onClick={() => searchItemClick(opt.options)} //
-                    />
-                  );
+                  return <Menu.Item key={index} text={opt.label} onClick={() => searchItemClick(opt.options)} />;
                 })
             )}
           </Menu>