| 1 | import { |
| 2 | ForwardedRef, |
| 3 | forwardRef, |
| 4 | memo, |
| 5 | useEffect, |
| 6 | useImperativeHandle, |
| 7 | useRef, |
| 8 | useState, |
| 9 | } from 'react'; |
| 10 | import { Modal, Tabs } from 'antd'; |
| 11 | import { AccountInfo } from '@/views/account/comment'; |
| 12 | import PlatChoose, { |
| 13 | IPlatChooseProps, |
| 14 | IPlatChooseRef, |
| 15 | } from '@/views/publish/components/ChooseAccountModule/components/PlatChoose'; |
| 16 | |
| 17 | export interface IChooseAccountModuleRef { |
| 18 | getPlatChooseRef: () => IPlatChooseRef | null; |
| 19 | } |
| 20 | |
| 21 | export interface IChooseAccountModuleProps { |
| 22 | open: boolean; |
| 23 | onClose: (open: boolean) => void; |
| 24 | // 按平台props |
| 25 | platChooseProps?: IPlatChooseProps; |
| 26 | // 按平台选择确认 |
| 27 | onPlatConfirm?: (accounts: AccountInfo[]) => void; |
| 28 | // 按平台选择change |
| 29 | onPlatChange?: (accounts: AccountInfo[], account: AccountInfo) => void; |
| 30 | } |
| 31 | |
| 32 | const ChooseAccountModule = memo( |
| 33 | forwardRef( |
| 34 | ( |
| 35 | { |
| 36 | open, |
| 37 | onClose, |
| 38 | onPlatConfirm, |
| 39 | onPlatChange, |
| 40 | platChooseProps, |
| 41 | }: IChooseAccountModuleProps, |
| 42 | ref: ForwardedRef<IChooseAccountModuleRef>, |
| 43 | ) => { |
| 44 | const [newChoosedAccounts, setNewChoosedAccounts] = useState< |
| 45 | AccountInfo[] |
| 46 | >([]); |
| 47 | const platChooseRef = useRef<IPlatChooseRef>(null); |
| 48 | |
| 49 | const handleOk = () => { |
| 50 | if (onPlatConfirm) onPlatConfirm(newChoosedAccounts); |
| 51 | close(); |
| 52 | }; |
| 53 | |
| 54 | const handleCancel = () => { |
| 55 | setNewChoosedAccounts(platChooseProps?.choosedAccounts || []); |
| 56 | close(); |
| 57 | }; |
| 58 | |
| 59 | const close = () => { |
| 60 | onClose(false); |
| 61 | }; |
| 62 | |
| 63 | useEffect(() => { |
| 64 | setTimeout(() => platChooseRef.current?.recover(), 1); |
| 65 | }, [platChooseProps?.choosedAccounts]); |
| 66 | |
| 67 | useEffect(() => { |
| 68 | platChooseRef.current?.init(); |
| 69 | }, [open]); |
| 70 | |
| 71 | const ImperativeHandle: IChooseAccountModuleRef = { |
| 72 | getPlatChooseRef() { |
| 73 | return platChooseRef.current; |
| 74 | }, |
| 75 | }; |
| 76 | useImperativeHandle(ref, () => ImperativeHandle); |
| 77 | |
| 78 | return ( |
| 79 | <Modal |
| 80 | width={800} |
| 81 | title="账户选择" |
| 82 | open={open} |
| 83 | onOk={handleOk} |
| 84 | onCancel={handleCancel} |
| 85 | > |
| 86 | <Tabs |
| 87 | defaultActiveKey="1" |
| 88 | items={[ |
| 89 | { |
| 90 | key: '1', |
| 91 | label: '按平台选择', |
| 92 | children: ( |
| 93 | <> |
| 94 | {platChooseProps && ( |
| 95 | <PlatChoose |
| 96 | {...platChooseProps} |
| 97 | disableAllSelect={ |
| 98 | platChooseProps.disableAllSelect || false |
| 99 | } |
| 100 | ref={platChooseRef} |
| 101 | onChange={(aList, account) => { |
| 102 | setNewChoosedAccounts(aList); |
| 103 | if (onPlatChange) onPlatChange(aList, account); |
| 104 | }} |
| 105 | /> |
| 106 | )} |
| 107 | </> |
| 108 | ), |
| 109 | }, |
| 110 | ]} |
| 111 | /> |
| 112 | </Modal> |
| 113 | ); |
| 114 | }, |
| 115 | ), |
| 116 | ); |
| 117 | ChooseAccountModule.displayName = 'ChooseAccountModule'; |
| 118 | |
| 119 | export default ChooseAccountModule; |
| 120 |