index.tsx // ViewWorker
unknown
plain_text
3 years ago
3.9 kB
4
Indexable
/* eslint-disable @typescript-eslint/no-unused-vars */ import { Dialog as MuiDialog, DialogContent as MuiDialogContent, DialogProps, DialogTitle as MuiDialogTitle, IconButton, styled, } from '@mui/material'; import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import CleanDateSvgIcon from '../../../../assets/SvgIcon/CleanDateSvgIcon'; import EditSvgIcon from '../../../../assets/SvgIcon/EditSvgIcon'; import CheckListItem from '../../../../components/CheckListItem'; import WorkerGroupContent from './WorkerGroupContent'; const Dialog = styled(MuiDialog)` color: white; & .MuiDialog-paper { width: 676px; height: 686px; max-width: unset; background: ${({ theme }) => theme.color.secondary.$80}; } `; const Header = styled('div')` display: flex; align-items: center; color: white; padding: 8px 8px 8px 16px; height: 48px; `; const DialogTitle = styled(MuiDialogTitle)` ${({ theme }) => ({ ...theme.typography.h3 })} flex: 1; color: white; padding: 0; `; const ContentWrapper = styled('div')` height: calc(100% - 48px); width: 100%; display: flex; `; const DialogContent = styled(MuiDialogContent)` padding: 10px 20px; `; const ContainerSelected = styled('div')` width: 380px; border-radius: 4px; padding: 10px 20px; `; const CheckList = styled('div')` display: flex; flex-direction: column; width: 280px; margin-top: 20px; `; type NavigatorWorkerManagement = [ { id: string; name: 'worker-group'; required: boolean }, { id: string; name: 'basic-information'; required: boolean }, { id: string; name: 'emergency-contact'; required: boolean }, { id: string; name: 'certificate'; required: boolean }, { id: string; name: 'connected-device'; required: boolean }, ]; const navigator: NavigatorWorkerManagement = [ { id: '1', name: 'worker-group', required: true }, { id: '2', name: 'basic-information', required: true }, { id: '3', name: 'emergency-contact', required: false }, { id: '4', name: 'certificate', required: false }, { id: '5', name: 'connected-device', required: false }, ]; interface ViewWorkerProps extends DialogProps { title: string; onCloseDialog: () => void; } const ViewWorker: React.VFC<ViewWorkerProps> = ({ open, title, onCloseDialog, }) => { const [indexNavigator, setIndexNavigator] = useState<number>(0); const [checkedValue, setCheckedValue] = useState( new Array(navigator.length).fill(true), ); const [checkedState, setCheckedState] = useState( new Array(navigator.length).fill(true), ); const { t } = useTranslation(); console.log(indexNavigator); return ( <Dialog open={open}> <Header> <DialogTitle>{title}</DialogTitle> <IconButton sx={{ color: 'white' }}> <EditSvgIcon sx={{ width: '32px', height: '32px', cursor: 'pointer' }} /> </IconButton> <CleanDateSvgIcon sx={{ width: '32px', height: '32px', cursor: 'pointer' }} onClick={onCloseDialog} /> </Header> <ContentWrapper> <DialogContent> <CheckList> {navigator.map((item, index) => ( <CheckListItem key={item.id} name={t( `project-setting:page.worker-management.dialog.create-worker.${item.name}.title`, )} required={item.required} checked={checkedState[index]} onClick={() => setIndexNavigator(index)} selected={checkedValue[index]} /> ))} </CheckList> </DialogContent> <ContainerSelected> {navigator[indexNavigator].name === 'worker-group' && ( <WorkerGroupContent /> )} </ContainerSelected> </ContentWrapper> </Dialog> ); }; export default ViewWorker;
Editor is loading...