timetable-app

commit ef2d224a55f1078b793a0e28315fd7c07249f0fe
parent 3363536883e31d5bd55b60f051e50fba267a8b23
Author: Yuukin256 <Yuukin256@gmail.com>
Date:   Mon,  7 Nov 2022 23:44:38 +0900

日付選択コンポーネントを作成

Diffstat:
A
src/components/common/DatePicker/index.tsx
 | 
45
+++++++++++++++++++++++++++++++++++++++++++++
M
src/components/daily/DateIndicator.tsx
 | 
60
+++++++++++++++++++++++-------------------------------------
M
src/lib/prisma.ts
 | 
9
++++++++-

3 files changed, 76 insertions(+), 38 deletions(-)
diff --git a/src/components/common/DatePicker/index.tsx b/src/components/common/DatePicker/index.tsx
@@ -0,0 +1,45 @@
+import EventIcon from '@mui/icons-material/Event';
+import { InputAdornment } from '@mui/material';
+import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { jaJP } from '@mui/x-date-pickers/locales';
+import ja from 'date-fns/locale/ja';
+
+import type { MobileDatePickerProps } from '@mui/x-date-pickers';
+import type { FC } from 'react';
+
+const DatePicker: FC<MobileDatePickerProps<Date, Date>> = ({ InputProps, DialogProps, ...props }) => (
+  <LocalizationProvider
+    dateAdapter={AdapterDateFns}
+    adapterLocale={ja}
+    localeText={jaJP.components.MuiLocalizationProvider.defaultProps.localeText}
+    dateFormats={{ monthAndYear: 'yyyy年M月' }}
+  >
+    <MuiMobileDatePicker
+      closeOnSelect
+      inputFormat='yyyy/MM/dd'
+      toolbarFormat='yyyy年M月d日'
+      InputProps={{
+        size: 'small',
+        startAdornment: (
+          <InputAdornment position='start'>
+            <EventIcon fontSize='small' />
+          </InputAdornment>
+        ),
+        ...InputProps,
+      }}
+      DialogProps={{
+        sx: {
+          '.MuiPickersToolbar-content .MuiTypography-root.MuiDatePickerToolbar-title': {
+            fontSize: '1.75rem',
+          },
+        },
+        ...DialogProps,
+      }}
+      {...props}
+    />
+  </LocalizationProvider>
+);
+
+export default DatePicker;
diff --git a/src/components/daily/DateIndicator.tsx b/src/components/daily/DateIndicator.tsx
@@ -1,16 +1,12 @@
 import { Temporal } from '@js-temporal/polyfill';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import EventIcon from '@mui/icons-material/Event';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
-import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { ja } from 'date-fns/locale';
 
+import DatePicker from 'components/common/DatePicker';
 import { dateToPlainDate, plainDateToDate } from 'utils';
 
 import type { FC } from 'react';
@@ -34,38 +30,28 @@ const DateIndicator: FC<Props> = ({ currentDate, dates, setDate, prev, next }) =
   const maxDate = dates.at(-1);
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ja}>
-      <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={4} width='100%' px={3}>
-        <IconButton disabled={minDate && date.equals(minDate)} onClick={prev}>
-          <ChevronLeftIcon />
-        </IconButton>
-
-        <Box sx={{ width: '12rem' }}>
-          <MobileDatePicker
-            value={plainDateToDate(date)}
-            onChange={handleChange}
-            minDate={plainDateToDate(minDate)}
-            maxDate={plainDateToDate(maxDate)}
-            shouldDisableDate={(d1) => dates.every((d2) => !dateToPlainDate(d1).equals(d2))}
-            renderInput={(params) => <TextField {...params} />}
-            InputProps={{
-              fullWidth: true,
-              size: 'small',
-              startAdornment: (
-                <InputAdornment position='start'>
-                  <EventIcon fontSize='small' />
-                </InputAdornment>
-              ),
-            }}
-            inputFormat='yyyy/MM/dd (EEEEE)'
-          />
-        </Box>
-
-        <IconButton disabled={maxDate && date.equals(maxDate)} onClick={next}>
-          <ChevronRightIcon />
-        </IconButton>
-      </Stack>
-    </LocalizationProvider>
+    <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={4} width='100%' px={3}>
+      <IconButton disabled={minDate && date.equals(minDate)} onClick={prev}>
+        <ChevronLeftIcon />
+      </IconButton>
+
+      <Box sx={{ width: '12rem' }}>
+        <DatePicker
+          value={plainDateToDate(date) ?? null}
+          onChange={handleChange}
+          minDate={plainDateToDate(minDate)}
+          maxDate={plainDateToDate(maxDate)}
+          shouldDisableDate={(d1) => dates.every((d2) => !dateToPlainDate(d1).equals(d2))}
+          inputFormat='yyyy/MM/dd (EEEEE)'
+          disableMaskedInput
+          renderInput={(params) => <TextField {...params} />}
+        />
+      </Box>
+
+      <IconButton disabled={maxDate && date.equals(maxDate)} onClick={next}>
+        <ChevronRightIcon />
+      </IconButton>
+    </Stack>
   );
 };
 
diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts
@@ -1,3 +1,10 @@
 import { PrismaClient } from '@prisma/client';
 
-export const prisma = new PrismaClient()
+declare global {
+  // eslint-disable-next-line no-var
+  var prisma: PrismaClient | undefined;
+}
+
+export const prisma = global.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV === 'development') global.prisma = prisma;