Replace CustomDateTimePicker & remove CustomDatePicker using react-da…

…tepicker.
tabi-memo · Feb 24, 2024 · 696293f · 696293f
1 parent 943ca77
commit 696293f
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 143 deletions.
diff --git a/app/activity/components/activity-form.tsx b/app/activity/components/activity-form.tsx
@@ -14,7 +14,7 @@ import {
   Input
 } from '@chakra-ui/react'
 import { PrimaryButton } from '@/components/button'
-import { CustomDateTimePicker } from '@/components/customDateTimePicker'
+import { CustomDateTimePicker } from '@/components/date'
 import { InputForm, TextareaForm } from '@/components/input'
 import { getDateObj } from '@/libs/utils'
 import { useActivityCreate, useActivityUpdate } from '../hooks'
@@ -114,23 +114,39 @@ export const ActivityForm = ({
           name="timeFrom"
           control={control}
           render={({ field: { onChange, value } }) => (
-            <CustomDateTimePicker onChange={onChange} value={value} />
+            <CustomDateTimePicker
+              onChange={onChange}
+              selectedDate={value}
+              placeholderText="2024-01-01 10:00"
+              dateFormat="yyyy-MM-dd HH:mm"
+            />
           )}
         />
         {errors.timeFrom && (
           <FormErrorMessage>{errors.timeFrom.message}</FormErrorMessage>
         )}
       </FormControl>
 
-      <FormControl mt={{ base: '30px', md: '40px' }}>
+      <FormControl
+        isInvalid={!!errors.timeTo}
+        mt={{ base: '30px', md: '40px' }}
+      >
         <FormLabel>Time To</FormLabel>
         <Controller
           name="timeTo"
           control={control}
           render={({ field: { onChange, value } }) => (
-            <CustomDateTimePicker onChange={onChange} value={value} />
+            <CustomDateTimePicker
+              onChange={onChange}
+              selectedDate={value}
+              placeholderText="2024-01-01 12:00"
+              dateFormat="yyyy-MM-dd HH:mm"
+            />
           )}
         />
+        {errors.timeTo && (
+          <FormErrorMessage>{errors.timeTo.message}</FormErrorMessage>
+        )}
       </FormControl>
 
       <FormControl

diff --git a/app/components/customDateTimePicker/dateTimePickerWrapper.tsx b/app/components/customDateTimePicker/dateTimePickerWrapper.tsx
diff --git a/app/components/customDateTimePicker/index.ts b/app/components/customDateTimePicker/index.ts
diff --git a/app/components/customDateTimePicker/stories/dateTimePicker.stories.tsx b/app/components/customDateTimePicker/stories/dateTimePicker.stories.tsx
diff --git a/app/components/date/custom-date-picker.tsx b/app/components/date/custom-date-picker.tsx
@@ -104,3 +104,113 @@ export const CustomDatePicker = ({
     </Box>
   )
 }
+
+export const CustomDateTimePicker = ({
+  selectedDate,
+  onChange,
+  placeholderText,
+  dateFormat
+}: DatePickerProps) => {
+  const { colorMode } = useColorMode()
+
+  const dateTimePickerStyles = {
+    '.react-datepicker-wrapper': {
+      width: '100%'
+    },
+    '.react-datepicker-popper': {
+      right: { base: 0, md: 'unset' }
+    },
+    '.react-datepicker ': {
+      width: '100%',
+      border: 'none',
+      boxShadow: '0px 2px 16px 0px rgba(0,0,0,.25);',
+      fontSize: 'sm'
+    },
+    '.react-datepicker__month-container': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      width: { base: '100%', md: '400px' }
+    },
+    '.react-datepicker__triangle': {
+      display: 'none'
+    },
+    '.react-datepicker__header': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      borderBottomColor: colorMode === 'dark' ? 'gray.500' : 'gray.300'
+    },
+    '.react-datepicker__current-month': {
+      color: colorMode === 'dark' ? 'primary.700' : 'primary.800',
+      paddingY: '8px',
+      fontSize: 'lg'
+    },
+    '.react-datepicker__navigation': {
+      top: '11px'
+    },
+    '.react-datepicker__navigation--previous': {
+      left: '32px'
+    },
+    '.react-datepicker__navigation--next': {
+      right: '32px'
+    },
+    '.react-datepicker__navigation-icon': {
+      '&::before': {
+        borderColor: colorMode === 'dark' ? 'gray.500' : 'gray.400'
+      }
+    },
+    '.react-datepicker__month': {
+      margin: '1rem'
+    },
+    '.react-datepicker__day-names': {
+      paddingY: '4px'
+    },
+    '.react-datepicker__day-name': {
+      width: { base: '2.4rem', md: '2.8rem' },
+      lineHeight: { base: '2.4rem', md: '2.8rem' },
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__day': {
+      width: { base: '2.4rem', md: '2.8rem' },
+      lineHeight: { base: '2.2rem', md: '2.4rem' },
+      ':hover': {
+        backgroundColor: colorMode === 'dark' ? 'gray.600' : 'gray.100'
+      },
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__day--selected': {
+      fontWeight: 'bold',
+      color: 'white',
+      backgroundColor: colorMode === 'dark' ? 'primary.700' : 'primary.500'
+    },
+    '.react-datepicker__day--keyboard-selected': {
+      background: 'none'
+    },
+    '.react-datepicker__time-container': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white'
+    },
+    '.react-datepicker-time__header': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      borderBottomColor: colorMode === 'dark' ? 'gray.500' : 'gray.300',
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    },
+    '.react-datepicker__time-box': {
+      backgroundColor: colorMode === 'dark' ? 'gray.700' : 'white',
+      color: colorMode === 'dark' ? 'gray.300' : 'black'
+    }
+  }
+
+  return (
+    <Box sx={dateTimePickerStyles}>
+      <DatePicker
+        selected={selectedDate}
+        placeholderText={placeholderText}
+        onChange={onChange}
+        dateFormat={dateFormat}
+        showTimeSelect
+        timeFormat="HH:mm"
+        timeIntervals={15}
+        timeCaption="time"
+        popperPlacement="bottom-start"
+        customInput={<InputForm rightIcon={FiCalendar} />}
+      />
+    </Box>
+  )
+}
diff --git a/app/components/date/index.ts b/app/components/date/index.ts
@@ -1 +1 @@
-export { CustomDatePicker } from './custom-date-picker'
+export { CustomDatePicker, CustomDateTimePicker } from './custom-date-picker'
diff --git a/app/components/date/stories/custom-date-picker.stories.tsx b/app/components/date/stories/custom-date-picker.stories.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Meta } from '@storybook/react'
-import { CustomDatePicker } from '@/components/date'
+import { Meta, StoryFn } from '@storybook/react'
+import { CustomDatePicker, CustomDateTimePicker } from '@/components/date'
 
 const meta: Meta<typeof CustomDatePicker> = {
   title: 'CustomDatePicker',
@@ -18,3 +18,15 @@ export const Default = () => {
     />
   )
 }
+
+export const DateTimePicker: StoryFn = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date())
+  return (
+    <CustomDateTimePicker
+      selectedDate={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+      placeholderText="Select Date"
+      dateFormat="yyyy/MM/dd HH:mm"
+    />
+  )
+}