feat(shortpassword): support ref for form (jdf2e#1930)

* feat(shortpassword): support ref for form * feat(shortpassword): support ref for form
Alex-huxiyang · Feb 5, 2024 · b2e9944 · b2e9944
1 parent 407f302
commit b2e9944
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 20 deletions.
diff --git a/src/packages/shortpassword/_test_/index.spec.tsx b/src/packages/shortpassword/_test_/index.spec.tsx
@@ -1,9 +1,12 @@
 import * as React from 'react'
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
-
 import { ShortPassword } from '../shortpassword'
 
+beforeAll(() => {
+  // @ts-ignore
+  global.IS_REACT_ACT_ENVIRONMENT = false
+})
 test('should render shortpassword when visible is true', async () => {
   const { container } = render(<ShortPassword visible value="123" />)
   const li = container.querySelectorAll('.nut-shortpassword-input-fake-li')
@@ -68,3 +71,18 @@ test('should limit input value when input', async () => {
   fireEvent.click(sure as HTMLElement)
   expect(inputValue).toBe('123456')
 })
+
+test('should ref open or close', async () => {
+  const ref = React.createRef<any>()
+  const { container } = render(<ShortPassword ref={ref} value="123456789" />)
+  ref.current?.open()
+  waitFor(() => {
+    const element = container.querySelector('.nut-shortpassword-title')
+    expect(element).toBeTruthy()
+  })
+  ref.current?.close()
+  waitFor(() => {
+    const element = container.querySelector('.nut-shortpassword-title')
+    expect(element).toBeFalsy()
+  })
+})
diff --git a/src/packages/shortpassword/shortpassword.taro.tsx b/src/packages/shortpassword/shortpassword.taro.tsx
@@ -1,11 +1,18 @@
-import React, { FunctionComponent, ReactNode, useEffect, useMemo } from 'react'
+import React, {
+  ForwardRefRenderFunction,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
 import { Tips } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
 import Popup from '@/packages/popup/index.taro'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { PopupProps } from '@/packages/popup/popup.taro'
 import { usePropsValue } from '@/utils/use-props-value'
+import { ShortPasswordActions } from '@/packages/shortpassword/types'
 
 export interface ShortPasswordProps extends PopupProps {
   value: string
@@ -36,15 +43,16 @@ const defaultProps = {
   length: 6, // 1~6
   autoFocus: false,
 } as ShortPasswordProps
-export const ShortPassword: FunctionComponent<Partial<ShortPasswordProps>> = (
-  props
-) => {
+export const InternalShortPassword: ForwardRefRenderFunction<
+  unknown,
+  Partial<ShortPasswordProps>
+> = (props, ref) => {
   const { locale } = useConfig()
   const {
     title,
     description,
     tips,
-    visible,
+    visible: deleteVisible,
     value,
     error,
     hideFooter,
@@ -75,6 +83,26 @@ export const ShortPassword: FunctionComponent<Partial<ShortPasswordProps>> = (
   const format = (val: string) => {
     return val.slice(0, comLen)
   }
+
+  const [visible, setVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false,
+  })
+  const handleClose = () => {
+    onClose?.()
+    setVisible(false)
+  }
+  const actions: ShortPasswordActions = {
+    open: () => {
+      setVisible(true)
+    },
+    close: () => {
+      setVisible(false)
+    },
+  }
+  useImperativeHandle(ref, () => actions)
+
   const [inputValue, setInputValue] = usePropsValue<string>({ value, onChange })
   useEffect(() => {
     if (visible && autoFocus) {
@@ -157,6 +185,7 @@ export const ShortPassword: FunctionComponent<Partial<ShortPasswordProps>> = (
     </Popup>
   )
 }
-
-ShortPassword.defaultProps = defaultProps
-ShortPassword.displayName = 'NutShortPassword'
+export const ShortPassword = React.forwardRef<
+  unknown,
+  Partial<ShortPasswordProps>
+>(InternalShortPassword)
diff --git a/src/packages/shortpassword/shortpassword.tsx b/src/packages/shortpassword/shortpassword.tsx
@@ -1,11 +1,18 @@
-import React, { FunctionComponent, ReactNode, useEffect, useMemo } from 'react'
+import React, {
+  ForwardRefRenderFunction,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+} from 'react'
 import { Tips } from '@nutui/icons-react'
 import classNames from 'classnames'
 import Popup from '@/packages/popup'
 import { useConfig } from '@/packages/configprovider'
 import { ComponentDefaults } from '@/utils/typings'
 import { PopupProps } from '@/packages/popup/index'
 import { usePropsValue } from '@/utils/use-props-value'
+import { ShortPasswordActions } from '@/packages/shortpassword/types'
 
 export interface ShortPasswordProps extends PopupProps {
   value: string
@@ -36,15 +43,16 @@ const defaultProps = {
   length: 6, // 1~6
   autoFocus: false,
 } as ShortPasswordProps
-export const ShortPassword: FunctionComponent<Partial<ShortPasswordProps>> = (
-  props
-) => {
+export const InternalShortPassword: ForwardRefRenderFunction<
+  unknown,
+  Partial<ShortPasswordProps>
+> = (props, ref) => {
   const { locale } = useConfig()
   const {
     title,
     description,
     tips,
-    visible,
+    visible: deleteVisible,
     value,
     error,
     hideFooter,
@@ -75,6 +83,26 @@ export const ShortPassword: FunctionComponent<Partial<ShortPasswordProps>> = (
   const format = (val: string) => {
     return val.slice(0, comLen)
   }
+
+  const [visible, setVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    finalValue: false,
+  })
+  const handleClose = () => {
+    onClose?.()
+    setVisible(false)
+  }
+  const actions: ShortPasswordActions = {
+    open: () => {
+      setVisible(true)
+    },
+    close: () => {
+      setVisible(false)
+    },
+  }
+  useImperativeHandle(ref, () => actions)
+
   const [inputValue, setInputValue] = usePropsValue<string>({ value, onChange })
   useEffect(() => {
     if (visible && autoFocus) {
@@ -101,8 +129,8 @@ export const ShortPassword: FunctionComponent<Partial<ShortPasswordProps>> = (
       }}
       visible={visible}
       closeable
-      onOverlayClick={onClose}
-      onCloseIconClick={onClose}
+      onOverlayClick={handleClose}
+      onCloseIconClick={handleClose}
       {...rest}
     >
       <div className={classNames(classPrefix, className)} style={style}>
@@ -157,6 +185,7 @@ export const ShortPassword: FunctionComponent<Partial<ShortPasswordProps>> = (
     </Popup>
   )
 }
-
-ShortPassword.defaultProps = defaultProps
-ShortPassword.displayName = 'NutShortPassword'
+export const ShortPassword = React.forwardRef<
+  unknown,
+  Partial<ShortPasswordProps>
+>(InternalShortPassword)
diff --git a/src/packages/shortpassword/types.ts b/src/packages/shortpassword/types.ts
@@ -0,0 +1,4 @@
+export type ShortPasswordActions = {
+  open: () => void
+  close: () => void
+}