From aebad7aa7dd22b3801600975ab28fcca50404701 Mon Sep 17 00:00:00 2001 From: oasis-cloud <12181600+oasis-cloud@users.noreply.github.com> Date: Fri, 22 Dec 2023 15:32:50 +0800 Subject: [PATCH] =?UTF-8?q?fix(cascader):=20=E5=A2=9E=E5=8A=A0=20ref=20?= =?UTF-8?q?=E4=B8=8A=E7=9A=84=20open=20=E5=92=8C=20close=20=E6=96=B9?= =?UTF-8?q?=E6=B3=95=EF=BC=8C=E6=94=AF=E6=8C=81=20form=20=E4=B8=AD?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=20(#1799)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(cascader): 增加 ref 上的 open 和 close 方法，支持 form 中使用 * docs(cascader): 更新 ref 相关内容 * test: cascader --------- Co-authored-by: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com> --- .../cascader/__tests__/cascader.spec.tsx | 31 +++++++++++++++++++ src/packages/cascader/cascader.taro.tsx | 24 ++++++++++++-- src/packages/cascader/cascader.tsx | 24 ++++++++++++-- src/packages/cascader/doc.en-US.md | 7 +++++ src/packages/cascader/doc.md | 7 +++++ src/packages/cascader/doc.taro.md | 5 +++ src/packages/cascader/doc.zh-TW.md | 6 ++++ 7 files changed, 100 insertions(+), 4 deletions(-) diff --git a/src/packages/cascader/__tests__/cascader.spec.tsx b/src/packages/cascader/__tests__/cascader.spec.tsx index 7d17dffdc3..05b3cc107e 100644 --- a/src/packages/cascader/__tests__/cascader.spec.tsx +++ b/src/packages/cascader/__tests__/cascader.spec.tsx @@ -385,4 +385,35 @@ describe('Cascader', () => { fireEvent.click(tabPane) expect(container).toMatchSnapshot() }) + + it('ref', async () => { + const change = jest.fn() + const pathChange = jest.fn() + const ref = React.createRef() + const { container } = render( + <> + +
ref.current?.open()}> + Test +
+ + ) + const ele = container.querySelector('#t') + if (ele) { + fireEvent.click(ele) + } + const overlay = container.querySelector('.nut-overlay') + if (overlay) { + fireEvent.click(overlay) + waitFor(() => { + expect(ref.current.close).toBeCalled() + }) + } + }) }) diff --git a/src/packages/cascader/cascader.taro.tsx b/src/packages/cascader/cascader.taro.tsx index 17f634bcaf..babba6dc85 100644 --- a/src/packages/cascader/cascader.taro.tsx +++ b/src/packages/cascader/cascader.taro.tsx @@ -5,6 +5,7 @@ import React, { useState, useEffect, ReactNode, + useImperativeHandle, } from 'react' import classNames from 'classnames' import { Loading, Checklist } from '@nutui/icons-react-taro' @@ -64,12 +65,16 @@ export interface CascaderProps onPathChange: (value: CascaderValue, params: any) => void } +export type CascaderActions = { + open: () => void + close: () => void +} + const defaultProps = { ...ComponentDefaults, activeColor: '', activeIcon: 'checklist', popup: true, - visible: false, options: [], optionKey: { textKey: 'text', valueKey: 'value', childrenKey: 'children' }, format: {}, @@ -118,6 +123,20 @@ const InternalCascader: ForwardRefRenderFunction< defaultValue, finalValue: defaultValue, }) + const [innerVisible, setInnerVisible] = usePropsValue({ + value: props.visible, + defaultValue: undefined, + finalValue: false, + }) + const actions: CascaderActions = { + open: () => { + setInnerVisible(true) + }, + close: () => { + setInnerVisible(false) + }, + } + useImperativeHandle(ref, () => actions) const [state] = useState({ optionsData: [] as any, @@ -284,6 +303,7 @@ const InternalCascader: ForwardRefRenderFunction< } const close = () => { + setInnerVisible(false) onClose && onClose() } @@ -454,7 +474,7 @@ const InternalCascader: ForwardRefRenderFunction< {popup ? ( void } +export type CascaderActions = { + open: () => void + close: () => void +} + const defaultProps = { ...ComponentDefaults, activeColor: '', activeIcon: 'checklist', popup: true, - visible: false, options: [], optionKey: { textKey: 'text', valueKey: 'value', childrenKey: 'children' }, format: {}, @@ -117,6 +122,20 @@ const InternalCascader: ForwardRefRenderFunction< defaultValue, finalValue: defaultValue, }) + const [innerVisible, setInnerVisible] = usePropsValue({ + value: props.visible, + defaultValue: undefined, + finalValue: false, + }) + const actions: CascaderActions = { + open: () => { + setInnerVisible(true) + }, + close: () => { + setInnerVisible(false) + }, + } + useImperativeHandle(ref, () => actions) const [state] = useState({ optionsData: [] as any, @@ -283,6 +302,7 @@ const InternalCascader: ForwardRefRenderFunction< } const close = () => { + setInnerVisible(false) onClose && onClose() } @@ -453,7 +473,7 @@ const InternalCascader: ForwardRefRenderFunction< {popup ? ( void` | `-` | | onPathChange | Triggered when the selected item changes | `(value: CascaderValue, params: any) => void` | `-` | +### Ref + +| Method | Description | Parameter | +|------| --- | --- | +| open | show Cascader | `() => void` | +| close | Close Cascader | `() => void` | + ## Theming ### CSS Variables diff --git a/src/packages/cascader/doc.md b/src/packages/cascader/doc.md index 5b8b275374..3a4c84fd9c 100644 --- a/src/packages/cascader/doc.md +++ b/src/packages/cascader/doc.md @@ -596,6 +596,13 @@ export default App; | onChange | 选中值改变时触发 | `(value: CascaderValue, params?: any) => void` | `-` | | onPathChange | 选中项改变时触发 | `(value: CascaderValue, params: any) => void` | `-` | +### Ref + +| 事件名 | 说明 | 回调参数 | +|------| --- | --- | +| open | 显示 Cascader | `() => void` | +| close | 关闭 Cascader | `() => void` | + ## 主题定制 ### 样式变量 diff --git a/src/packages/cascader/doc.taro.md b/src/packages/cascader/doc.taro.md index 31a3a9136d..caea39f444 100644 --- a/src/packages/cascader/doc.taro.md +++ b/src/packages/cascader/doc.taro.md @@ -595,7 +595,12 @@ export default App; | onLoad | 动态加载回调，开启动态加载时生效 | `(node: any, resolve: any) => void` | `-` | | onChange | 选中值改变时触发 | `(value: CascaderValue, params?: any) => void` | `-` | | onPathChange | 选中项改变时触发 | `(value: CascaderValue, params: any) => void` | `-` | +### Ref +| 事件名 | 说明 | 回调参数 | +|------| --- | --- | +| open | 显示 Cascader | `() => void` | +| close | 关闭 Cascader | `() => void` | ## 主题定制 ### 样式变量 diff --git a/src/packages/cascader/doc.zh-TW.md b/src/packages/cascader/doc.zh-TW.md index 1afbc21b9f..18553a60d8 100644 --- a/src/packages/cascader/doc.zh-TW.md +++ b/src/packages/cascader/doc.zh-TW.md @@ -596,6 +596,12 @@ export default App; | onChange | 選中值改變時觸發 | `(value: CascaderValue, params?: any) => void` | `-` | | onPathChange | 選中項改變時觸發 | `(value: CascaderValue, params: any) => void` | `-` | +### Ref + +|事件名 |說明 |回調參數 | +|------| --- | --- | +| open | 顯示 Cascader | `() => void` | +| close | 關閉 Cascader | `() => void` | ## 主題定制 ### 樣式變量