-
-
Notifications
You must be signed in to change notification settings - Fork 175
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into chore/release-to-dingtalk
- Loading branch information
Showing
11 changed files
with
365 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
| import { render } from '../../../tests/utils'; | ||
| import useProxyImperativeHandle from '../hooks/use-proxy-imperative-handle'; | ||
|
|
||
| const TestComponent = React.forwardRef((_, ref) => { | ||
| const divRef = React.useRef(null); | ||
| useProxyImperativeHandle(ref, () => ({ | ||
| nativeElement: divRef.current!, | ||
| testMethod: () => 'testMethod called', | ||
| testProperty: 'testProperty', | ||
| })); | ||
| return <div ref={divRef}>Hello World!</div>; | ||
| }); | ||
|
|
||
| describe('useProxyImperativeHandle', () => { | ||
| it('should correctly proxy the nativeElement and init methods', () => { | ||
| const ref = React.createRef<any>(); | ||
| render(<TestComponent ref={ref} />); | ||
| expect(ref.current).toBeDefined(); | ||
| expect(ref.current?.testMethod()).toBe('testMethod called'); | ||
| expect(ref.current?.testProperty).toBe('testProperty'); | ||
| expect(ref.current?.nativeElement).toBeDefined(); | ||
| expect(ref.current?.focus === ref.current?.nativeElement.focus).toBeTruthy(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| // Proxy the dom ref with `{ nativeElement, otherFn }` type | ||
| // ref: https://github.com/ant-design/ant-design/discussions/45242 | ||
|
|
||
| import { useImperativeHandle } from 'react'; | ||
| import type { Ref } from 'react'; | ||
|
|
||
| export default function useProxyImperativeHandle< | ||
| NativeELementType extends HTMLElement, | ||
| ReturnRefType extends { nativeElement: NativeELementType }, | ||
| >(ref: Ref<any> | undefined, init: () => ReturnRefType) { | ||
| return useImperativeHandle(ref, () => { | ||
| const refObj = init(); | ||
| const { nativeElement } = refObj; | ||
|
|
||
| return new Proxy(nativeElement, { | ||
| get(obj: any, prop: any) { | ||
| if ((refObj as any)[prop]) { | ||
| return (refObj as any)[prop]; | ||
| } | ||
|
|
||
| return Reflect.get(obj, prop); | ||
| }, | ||
| }); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| ## zh-CN | ||
|
|
||
| 使用 `ref` 选项控制聚焦。 | ||
|
|
||
| ## en-US | ||
|
|
||
| Focus with `ref` option. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { Sender } from '@ant-design/x'; | ||
| import { Button, Flex, type GetRef } from 'antd'; | ||
| import React, { useRef } from 'react'; | ||
|
|
||
| const App: React.FC = () => { | ||
| const senderRef = useRef<GetRef<typeof Sender>>(null); | ||
|
|
||
| const senderProps = { | ||
| defaultValue: 'Hello, welcome to use Ant Design X!', | ||
| ref: senderRef, | ||
| }; | ||
|
|
||
| return ( | ||
| <Flex wrap gap={12}> | ||
| <Button | ||
| onClick={() => { | ||
| senderRef.current!.focus({ | ||
| cursor: 'start', | ||
| }); | ||
| }} | ||
| > | ||
| Focus at first | ||
| </Button> | ||
| <Button | ||
| onClick={() => { | ||
| senderRef.current!.focus({ | ||
| cursor: 'end', | ||
| }); | ||
| }} | ||
| > | ||
| Focus at last | ||
| </Button> | ||
| <Button | ||
| onClick={() => { | ||
| senderRef.current!.focus({ | ||
| cursor: 'all', | ||
| }); | ||
| }} | ||
| > | ||
| Focus to select all | ||
| </Button> | ||
| <Button | ||
| onClick={() => { | ||
| senderRef.current!.focus({ | ||
| preventScroll: true, | ||
| }); | ||
| }} | ||
| > | ||
| Focus prevent scroll | ||
| </Button> | ||
| <Button | ||
| onClick={() => { | ||
| senderRef.current!.blur(); | ||
| }} | ||
| > | ||
| Blur | ||
| </Button> | ||
| <Sender {...senderProps} /> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.