From 1358ef5a796f4896d7e2af915d387d831805c126 Mon Sep 17 00:00:00 2001
From: WmW <48251883+nullptr-z@users.noreply.github.com>
Date: Wed, 6 Apr 2022 17:18:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(Cascader):=E5=A2=9E=E5=8A=A0API:=20expandT?=
=?UTF-8?q?rigger=E5=AD=90=E8=8F=9C=E5=8D=95=E5=B1=95=E5=BC=80=E6=96=B9?=
=?UTF-8?q?=E5=BC=8F=20(#745)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-cascader/README.md | 61 +++++++++++++++++++++++++++
packages/react-cascader/src/index.tsx | 31 ++++++++++----
2 files changed, 83 insertions(+), 9 deletions(-)
diff --git a/packages/react-cascader/README.md b/packages/react-cascader/README.md
index 11cf538db7..d20dcfd4ab 100644
--- a/packages/react-cascader/README.md
+++ b/packages/react-cascader/README.md
@@ -192,6 +192,66 @@ const Demo = () => {
ReactDOM.render(, _mount_);
```
+## 移入展开菜单
+
+
+```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 (
+
+ console.log(value, seleteds)}
+ onSearch={true}
+ />
+
+ )
+};
+ReactDOM.render(, _mount_);
+```
+
### 在表单中使用
在 [`
`](#/components/form) 表单中应用 `` 组件。
@@ -316,3 +376,4 @@ ReactDOM.render(, _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
index c331fddfae..e21c13b96e 100644
--- a/packages/react-cascader/src/index.tsx
+++ b/packages/react-cascader/src/index.tsx
@@ -20,6 +20,7 @@ export interface CascaderProps extends IProps, DropdownProps {
placeholder?: string;
disabled?: boolean;
inputProps?: HTMLInputProps;
+ expandTrigger: 'click' | 'hover';
}
function Cascader(props: CascaderProps) {
@@ -27,7 +28,7 @@ function Cascader(props: CascaderProps) {
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, level: number = 0) => {
if (!option) return;
@@ -164,7 +181,9 @@ function Cascader(props: CascaderProps) {
key={index}
text={opt.label}
addonAfter={opt.children ? : 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 (
- searchItemClick(opt.options)} //
- />
- );
+ return searchItemClick(opt.options)} />;
})
)}