index.tsx (1464B)
1 import { Box, Button, Paper, Stack, TextField } from '@mui/material'; 2 3 import CopyToClipboardButton from 'client/components/CopyToClipboardButton'; 4 5 import useDayPeriodDataInput from './hooks/useDayPeriodDataInput'; 6 import useDayPeriodDataOutput from './hooks/useDayPeriodDataOutput'; 7 8 export default function DayPeriodExcelToCodeForm() { 9 const { input, setInput, parseResult } = useDayPeriodDataInput(); 10 const { output, transformIntoObject } = useDayPeriodDataOutput(); 11 12 return ( 13 <Stack spacing={4} my={4}> 14 <TextField 15 label='曜日時限時間割データ' 16 placeholder='曜日時限時間割表のExcelシートをここにペースト' 17 variant='filled' 18 multiline 19 rows={8} 20 value={input} 21 onChange={(event: React.ChangeEvent<HTMLInputElement>) => { 22 setInput(event.target.value); 23 }} 24 error={input !== '' && !parseResult.success} 25 helperText={input !== '' && parseResult.issues?.[0].message} 26 /> 27 28 <Box> 29 <Button 30 variant='contained' 31 disabled={input === '' || !parseResult.success} 32 onClick={() => 33 parseResult.success && transformIntoObject(parseResult.output) 34 } 35 > 36 変換する 37 </Button> 38 </Box> 39 40 <Paper component={Box} p={2} height={400} overflow='auto'> 41 <pre>{output}</pre> 42 </Paper> 43 44 <Box> 45 <CopyToClipboardButton 46 valueToCopy={output} 47 variant='contained' 48 disabled={input === '' || !parseResult.success} 49 /> 50 </Box> 51 </Stack> 52 ); 53 }