fix(cascader): 增加 ref 上的 open 和 close 方法，支持 form 中使用 (jdf2e#1799)

* fix(cascader): 增加 ref 上的 open 和 close 方法，支持 form 中使用 * docs(cascader): 更新 ref 相关内容 * test: cascader --------- Co-authored-by: xiaoyatong <[email protected]>
Ryan-CW-Code · Dec 22, 2023 · aebad7a · aebad7a
1 parent ca10c48
commit aebad7a
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 4 deletions.
diff --git 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<any>()
+    const { container } = render(
+      <>
+        <Cascader
+          value={['福建', '福州', '鼓楼区']}
+          ref={ref}
+          options={mockOptions}
+          onChange={change}
+          onPathChange={pathChange}
+        />
+        <div id="t" onClick={() => ref.current?.open()}>
+          Test
+        </div>
+      </>
+    )
+    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
@@ -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<boolean>({
+    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 ? (
         <Popup
           {...popupProps}
-          visible={visible}
+          visible={innerVisible}
           position="bottom"
           style={{ overflowY: 'hidden' }}
           round

diff --git a/src/packages/cascader/cascader.tsx b/src/packages/cascader/cascader.tsx
@@ -5,6 +5,7 @@ import React, {
   useState,
   useEffect,
   ReactNode,
+  useImperativeHandle,
 } from 'react'
 import classNames from 'classnames'
 import { Loading, Checklist } from '@nutui/icons-react'
@@ -63,12 +64,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: {},
@@ -117,6 +122,20 @@ const InternalCascader: ForwardRefRenderFunction<
     defaultValue,
     finalValue: defaultValue,
   })
+  const [innerVisible, setInnerVisible] = usePropsValue<boolean>({
+    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 ? (
         <Popup
           {...popupProps}
-          visible={visible}
+          visible={innerVisible}
           position="bottom"
           round
           closeIcon={closeIcon}

diff --git a/src/packages/cascader/doc.en-US.md b/src/packages/cascader/doc.en-US.md
@@ -596,6 +596,13 @@ export default App;
 | onChange | Triggered when the selected value changes | `(value: CascaderValue, params?: any) => 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
@@ -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
@@ -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
@@ -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` |
 ## 主題定制
 
 ### 樣式變量