|
@ -1,4 +1,4 @@ |
|
|
import { Button, Input, Modal, ModalProps, Select, SelectProps, Spin } from 'antd' |
|
|
|
|
|
|
|
|
import { Button, Input, Modal, ModalProps, Select, SelectProps, Spin, Tag } from 'antd' |
|
|
import { memo, ReactNode, useEffect, useRef, useState } from 'react' |
|
|
import { memo, ReactNode, useEffect, useRef, useState } from 'react' |
|
|
import { Flexbox } from 'react-layout-kit' |
|
|
import { Flexbox } from 'react-layout-kit' |
|
|
import { useStyle } from './style.ts' |
|
|
import { useStyle } from './style.ts' |
|
@ -15,7 +15,9 @@ export interface UserSelectProps extends SelectProps { |
|
|
value?: any[] |
|
|
value?: any[] |
|
|
onChange?: (value: any[]) => void |
|
|
onChange?: (value: any[]) => void |
|
|
//多选
|
|
|
//多选
|
|
|
multiple?: boolean |
|
|
|
|
|
|
|
|
multiple?: boolean, |
|
|
|
|
|
renderValue?: (value: any[], def: ReactNode) => ReactNode |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export interface UserModelProps extends Pick<ModalProps, 'open'> { |
|
|
export interface UserModelProps extends Pick<ModalProps, 'open'> { |
|
@ -25,6 +27,8 @@ export interface UserModelProps extends Pick<ModalProps, 'open'> { |
|
|
//多选
|
|
|
//多选
|
|
|
multiple?: boolean |
|
|
multiple?: boolean |
|
|
|
|
|
|
|
|
|
|
|
renderValue?: (value: any[], def: ReactNode) => ReactNode |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export type UserPickerProps = |
|
|
export type UserPickerProps = |
|
@ -59,7 +63,7 @@ const UserModel = memo(({ multiple, children, value, onChange, ...props }: UserM |
|
|
const { data: users, isPending } = useAtomValue(userListAtom) |
|
|
const { data: users, isPending } = useAtomValue(userListAtom) |
|
|
const [ open, setOpen ] = useState(false) |
|
|
const [ open, setOpen ] = useState(false) |
|
|
const selectUserRef = useRef<IUser[]>([]) |
|
|
const selectUserRef = useRef<IUser[]>([]) |
|
|
const [, update ] = useState({}) |
|
|
|
|
|
|
|
|
const [ , update ] = useState({}) |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if (value === undefined) return |
|
|
if (value === undefined) return |
|
@ -89,13 +93,33 @@ const UserModel = memo(({ multiple, children, value, onChange, ...props }: UserM |
|
|
|
|
|
|
|
|
const renderTarget = () => { |
|
|
const renderTarget = () => { |
|
|
return <span onClick={() => setOpen(true)}> |
|
|
return <span onClick={() => setOpen(true)}> |
|
|
{children ?? <Button type={'primary'}>{t('component.UserPicker.targetText', '选择成员')}</Button>} |
|
|
|
|
|
|
|
|
{children ?? <Button type={'primary'} >{t('component.UserPicker.targetText', '选择成员')}</Button>} |
|
|
</span> |
|
|
</span> |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const renderValue = () => { |
|
|
|
|
|
const dom = selectUserRef.current?.map(user => { |
|
|
|
|
|
return <Tag key={user.id} color={'blue'} closable onClose={() => { |
|
|
|
|
|
const newVal = innerValue?.filter(val => val !== user.id) |
|
|
|
|
|
setValue(newVal) |
|
|
|
|
|
onChange?.(newVal) |
|
|
|
|
|
}}>{user.name}</Tag> |
|
|
|
|
|
}) |
|
|
|
|
|
if (props.renderValue) { |
|
|
|
|
|
return props.renderValue(selectUserRef.current, dom) |
|
|
|
|
|
} |
|
|
|
|
|
return dom |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
|
|
|
<div> |
|
|
{renderTarget()} |
|
|
{renderTarget()} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div className={styles.values}> |
|
|
|
|
|
{renderValue()} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<Modal |
|
|
<Modal |
|
|
className={styles.modal} |
|
|
className={styles.modal} |
|
|
title={t('component.UserPicker.title', '成员选择')} |
|
|
title={t('component.UserPicker.title', '成员选择')} |
|
|