@herca/rn-kit 0.1.17 → 0.1.19

package/src/DatePicker/DatePicker.tsx

@@ -1,13 +1,15 @@
 import { useCallback, useState, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import BottomSheet from '../BottomSheet/BottomSheet';
-import Calendar from '../Calendar/Calendar';
+import Calendar, { formatDate } from '../Calendar/Calendar';
 import Button from '../Button/Button';
 import Alert from '../Alert/Alert';
 import {
+  type CalendarMarkDatesType,
   type CalendarModeType,
   type DateRangeProps,
 } from '../Calendar/CalendarPropsType';
+import Color from '../Color/Color';
 
 interface DatePickerProps {
   onChange: (selectedDate: DateRangeProps) => void;
@@ -31,53 +33,30 @@ export default function DatePicker({
   onHasError,
   hint,
   mode,
-  // value,
+  value,
   ...calendarProps
 }: DatePickerProps) {
   const [errorValidate, setErrorValidate] = useState<boolean>(false);
-  // const [markDates, setMarkDates] = useState();
-  const [valueOnChange, setValueOnChange] = useState<DateRangeProps>({
+  const [markDates, setMarkDates] = useState<CalendarMarkDatesType>();
+  const [valueDatepicker, setValueDatepicker] = useState<DateRangeProps>({
     startDate: null,
     endDate: null,
     date: null,
   });
-  // const [valueSelected, setValueSelected] = useState<DateRangeProps>({
-  //   startDate: null,
-  //   endDate: null,
-  //   date: null,
-  // });
 
   const handleOnChangeCalendar = useCallback((value: DateRangeProps) => {
-    // setMarkDates(null);
-    setValueOnChange(value);
+    setMarkDates({});
+    setValueDatepicker(value);
     setErrorValidate(false);
   }, []);
 
-  // const setDefaultValue = () => {
-  //   if (mode === 'single' && valueOnChange.date) {
-  //     setMarkDates({
-  //       [formatDate(valueOnChange.date)]: { selected: true },
-  //     });
-  //   } else if (
-  //     (mode === 'range' || mode === 'multiple') &&
-  //     valueOnChange.startDate &&
-  //     valueOnChange.endDate
-  //   ) {
-  //     const start = new Date(valueOnChange.startDate);
-  //     const end = new Date(valueOnChange.endDate);
-  //     const marks: Record<string, any> = {};
-  //     for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
-  //       const key = formatDate(new Date(d));
-  //       marks[key] = { selected: true };
-  //     }
-  //     setMarkDates(marks);
-  //   }
-  // };
-
   const handleOnPressSubmitButton = useCallback(() => {
-    const { startDate, endDate, date } = valueOnChange;
+    const { startDate, endDate, date } = valueDatepicker;
+
     const isEmpty = !startDate && !endDate && !date;
+
     const isRangeMode = mode === 'range';
+
     const isInvalidRange = isRangeMode && (!startDate || !endDate);
 
     if ((required && isEmpty) || isInvalidRange) {
@@ -86,11 +65,9 @@ export default function DatePicker({
       return;
     }
 
-    onChange?.(valueOnChange);
+    onChange?.(valueDatepicker);
     onClose?.();
-    // setDefaultValue();
-    // setValueSelected(valueOnChange);
-  }, [required, mode, valueOnChange, onChange, onClose, onHasError]);
+  }, [required, mode, valueDatepicker, onChange, onClose, onHasError]);
 
   const handleOnPressCancelButton = useCallback(() => {
     onClose?.();
@@ -100,9 +77,53 @@ export default function DatePicker({
     setErrorValidate(hasError);
   }, [hasError]);
 
-  // useEffect(() => {
-  //   setDefaultValue();
-  // }, [isOpen, setDefaultValue, valueSelected]);
+  useEffect(() => {
+    if (!isOpen) return;
+
+    let updatedMarkDates: CalendarMarkDatesType = {};
+
+    if (mode === 'single' && value?.date) {
+      updatedMarkDates = {
+        [formatDate(value.date) as string]: { selected: true },
+      };
+    }
+
+    if (mode === 'range' && value?.startDate && value?.endDate) {
+      const start = new Date(value.startDate);
+      const end = new Date(value.endDate);
+      const dates: CalendarMarkDatesType = {};
+
+      for (let dt = new Date(start); dt <= end; dt.setDate(dt.getDate() + 1)) {
+        const dateStr = formatDate(dt);
+        let backgroundColor = Color.primary[50];
+        let textColor = Color.gray[600];
+
+        if (dateStr === formatDate(start) || dateStr === formatDate(end)) {
+          backgroundColor = Color.primary[1000];
+          textColor = Color.base.white100;
+        }
+
+        if (dateStr) {
+          dates[dateStr] = {
+            selected: true,
+            backgroundColor: backgroundColor,
+            textColor: textColor,
+          };
+        }
+      }
+
+      updatedMarkDates = dates;
+    }
+
+    setMarkDates(updatedMarkDates);
+    setValueDatepicker(
+      value || {
+        startDate: null,
+        endDate: null,
+        date: null,
+      }
+    );
+  }, [isOpen, value, mode]);
 
   return (
     <View>
@@ -130,7 +151,7 @@ export default function DatePicker({
         }
       >
         <Calendar
-          // markedDates={markDates}
+          markedDates={markDates}
           mode={mode}
           onChange={handleOnChangeCalendar}
           {...calendarProps}

package/src/DatePicker/README_DATEPICKER.md

@@ -25,6 +25,7 @@ Komponen ini extend dari Calendar, jadi kalian bisa menggunakan semua props yang
 | `onClose`   | `() => void`                    | Callback saat BottomSheet ditutup |
 | `isOpen`    | `boolean`                       | Menentukan apakah BottomSheet sedang terbuka |
 | `hasError`  | `boolean`                       | (Opsional) Menandai jika terjadi kesalahan validasi |
+| `value`     | DateRangeProps                  | (Opsional) set default value |
 
 ---
 

package/src/Icon/Icon.tsx

@@ -38,6 +38,7 @@ import ClipBoardList from './icons/ClipBoardList';
 import Megaphone from './icons/Megaphone';
 import Bell from './icons/Bell';
 import BookmarkUser from './icons/BookmarkUser';
+import Minus from './icons/Minus';
 
 const icons: Record<
   IconNameProps,
@@ -68,6 +69,7 @@ const icons: Record<
   'ArrowDown': ArrowDown,
   'ArrowUp': ArrowUp,
   'Plus': Plus,
+  'Minus': Minus,
   'Bell': Bell,
   'file-list-check': FileListCheck,
   'file-text': FileText,

package/src/Icon/icons/Minus.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const Minus: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg
+    width={size}
+    height={size + 1}
+    viewBox="0 0 10 2"
+    fill="none"
+    style={style}
+  >
+    <Path
+      d="M9.08301 1.58341H0.916341C0.594341 1.58341 0.333008 1.32208 0.333008 1.00008C0.333008 0.678081 0.594341 0.416748 0.916341 0.416748H9.08301C9.40501 0.416748 9.66634 0.678081 9.66634 1.00008C9.66634 1.32208 9.40501 1.58341 9.08301 1.58341Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default Minus;

package/src/Icon/type.tsx

@@ -28,6 +28,7 @@ export type IconNameProps =
   | 'Image'
   | 'Times'
   | 'Plus'
+  | 'Minus'
   | 'Bell'
   | 'file-list-check'
   | 'file-text'

package/src/Select/README_Select.md

@@ -28,6 +28,8 @@ Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan du
 | `delaySearch`| `number`                                        | `300`         | Delay pencarian dalam milidetik |
 | `height`     | `BottomSheetHeighProps`                         | -             | Ukuran tinggi BottomSheet |
 | `onRefresh`  | `() => void`                                    | -             | Callback saat pull-to-refresh dilakukan |
+| `header`     | ReactElement| –              | Jika ingin chip mempunyai header.                          |
+| `footer`     | ReactElement| –              | Jika ingin chip mempunyai footer.                          |
 
 ## 📌 Contoh Penggunaan
 

package/src/Select/type.tsx

@@ -28,6 +28,6 @@ export interface SelectProps {
   onRefresh?: () => void;
   onEndReached?: () => void;
   refreshing?: boolean;
-  footer?: React.ReactNode | (() => React.ReactNode);
-  header?: React.ReactNode | (() => React.ReactNode);
+  footer?: React.ComponentType<any> | React.ReactElement | null | undefined;
+  header?: React.ComponentType<any> | React.ReactElement | null | undefined;
 }

package/src/index.tsx

@@ -42,6 +42,7 @@ export { default as InputOtp } from './Input/InputOtp';
 export { default as Switch } from './Input/Switch';
 export { default as CheckBox } from './CheckBox/CheckBox';
 export { default as CheckBoxList } from './CheckBox/CheckBoxList';
+export { default as CounterButton } from './CounterButton/CounterButton';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as Icon } from './Icon/Icon';
 export { default as Modal } from './Modal/Modal';