@tipp/ui 1.0.15 → 1.0.17

package/src/atoms/date-picker/index.tsx

@@ -1,5 +1,5 @@
-import type { ElementRef } from 'react';
-import React, { forwardRef } from 'react';
+// import type { ElementRef } from 'react';
+import React from 'react';
 import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
 import ReactDatePicker from 'react-datepicker';
 import { IconButton } from '../icon-button';
@@ -7,31 +7,49 @@ import { Flex } from '../flex';
 import { ChevronLeftIcon, ChevronRightIcon } from '../../icon';
 import { Heading } from '../heading';
 
-type DatePickerProps = ReactDatePickerProps & {
+export type DatePickerProps = ReactDatePickerProps & {
   size?: 'small' | 'medium' | 'large';
 };
-type DatePickerRef = ElementRef<typeof ReactDatePicker>;
+// type DatePickerRef = ElementRef<typeof ReactDatePicker>;
 
-const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
-  (props: DatePickerProps, ref): React.ReactNode => {
-    const { size = 'medium', ...rest } = props;
+export function DatePicker(props: DatePickerProps): React.ReactNode {
+  const { size = 'medium', ...rest } = props;
 
-    return (
-      <ReactDatePicker
-        placeholderText="yyyy/mm/dd"
-        ref={ref}
-        showPopperArrow={false}
-        {...rest}
-        calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}
-        dateFormat="yyyy/MM/dd"
-        nextMonthButtonLabel="다음 달"
-        previousMonthButtonLabel="이전 달"
-        renderCustomHeader={renderCustomHeader}
-        wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}
-      />
-    );
-  }
-);
+  return (
+    <ReactDatePicker
+      placeholderText="yyyy/mm/dd"
+      showPopperArrow={false}
+      {...rest}
+      calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}
+      dateFormat="yyyy/MM/dd"
+      nextMonthButtonLabel="다음 달"
+      previousMonthButtonLabel="이전 달"
+      renderCustomHeader={renderCustomHeader}
+      wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}
+    />
+  );
+}
+
+// export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
+//   (props, ref): React.ReactNode => {
+//     const { size = 'medium', ...rest } = props;
+
+//     return (
+//       <ReactDatePicker
+//         placeholderText="yyyy/mm/dd"
+//         ref={ref}
+//         showPopperArrow={false}
+//         {...rest}
+//         calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}
+//         dateFormat="yyyy/MM/dd"
+//         nextMonthButtonLabel="다음 달"
+//         previousMonthButtonLabel="이전 달"
+//         renderCustomHeader={renderCustomHeader}
+//         wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}
+//       />
+//     );
+//   }
+// );
 const renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (
   props
 ) => {
@@ -75,103 +93,4 @@ const renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (
   );
 };
 
-// const renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (
-//   props
-// ) => {
-//   const {
-//     date,
-//     decreaseMonth,
-//     increaseMonth,
-//     changeMonth,
-//     changeYear,
-//     prevMonthButtonDisabled,
-//     nextMonthButtonDisabled,
-//   } = props;
-
-//   const SelectTriggerProps: Select.TriggerProps = {
-//     variant: 'ghost',
-//   };
-//   const year = date.getFullYear();
-//   const month = date.getMonth();
-
-//   return (
-//     <Flex align="center" justify="between" pb="2" pl="2" pr="2">
-//       <IconButton
-//         disabled={prevMonthButtonDisabled}
-//         onClick={decreaseMonth}
-//         variant="ghost"
-//       >
-//         <ChevronLeftIcon />
-//       </IconButton>
-//       <Flex gap="3">
-//         <Select.Root
-//           onValueChange={(value) => {
-//             console.log({ value });
-//             changeYear(Number(value));
-//           }}
-//           value={year.toString()}
-//         >
-//           <Select.Trigger {...SelectTriggerProps}>
-//             <Heading variant="subtitle1" weight="regular">
-//               {year}년
-//             </Heading>
-//           </Select.Trigger>
-//           <Select.Content>
-//             {Array.from({ length: 5 })
-//               .map((_, i) => {
-//                 const toYear = new Date().getFullYear();
-//                 const v = toYear + i + 1;
-//                 return (
-//                   <Select.Item key={v} value={v.toString()}>
-//                     {v}년
-//                   </Select.Item>
-//                 );
-//               })
-//               .reverse()}
-
-//             {Array.from({ length: 60 }).map((_, i) => {
-//               const toYear = new Date().getFullYear();
-//               const v = toYear - i;
-//               return (
-//                 <Select.Item key={v} value={v.toString()}>
-//                   {v}년
-//                 </Select.Item>
-//               );
-//             })}
-//           </Select.Content>
-//         </Select.Root>
-//         <Select.Root
-//           onValueChange={(value) => {
-//             changeMonth(Number(value));
-//           }}
-//           value={month.toString()}
-//         >
-//           <Select.Trigger {...SelectTriggerProps}>
-//             <Heading variant="subtitle1" weight="regular">
-//               {month + 1}월
-//             </Heading>
-//           </Select.Trigger>
-//           <Select.Content>
-//             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((m) => (
-//               <Select.Item key={m} value={m.toString()}>
-//                 {m + 1}월
-//               </Select.Item>
-//             ))}
-//           </Select.Content>
-//         </Select.Root>
-//       </Flex>
-
-//       <IconButton
-//         disabled={nextMonthButtonDisabled}
-//         onClick={increaseMonth}
-//         variant="ghost"
-//       >
-//         <ChevronRightIcon />
-//       </IconButton>
-//     </Flex>
-//   );
-// };
-
 DatePicker.displayName = 'DatePicker';
-
-export { DatePicker, type DatePickerProps };