@homefile/components-v2 2.8.17 → 2.8.18

package/dist/components/forms/dynamicForm/fields/DateField.js

@@ -4,7 +4,7 @@ import { Flex, Text } from '@chakra-ui/react';
 import { DatePicker, FormIcon } from '../../..';
 export const DateField = ({ id, icon, name, placeholder, showCalendarIcon = true, value, width, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [name && (_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(FormIcon, { icon: icon }), _jsx(Text, { fontFamily: "secondary", noOfLines: 1, overflow: "hidden", children: name })] })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+    return (_jsxs(Flex, { align: "center", gap: "base", w: "full", children: [name && (_jsxs(Flex, { align: "center", gap: "base", flexShrink: 0, children: [_jsx(FormIcon, { icon: icon }), _jsx(Text, { fontFamily: "secondary", noOfLines: 1, overflow: "hidden", children: name })] })), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                     return (_jsx(DatePicker, { onChange: onChange, showCalendarIcon: showCalendarIcon, placeholder: placeholder, value: value, width: width }));
                 } })] }));
 };

package/dist/components/inputs/DatePicker.d.ts

@@ -1,3 +1,4 @@
+import 'react-datepicker/dist/react-datepicker.css';
 import '../../styles/calendar.css';
 import { DatePickerI } from '../../interfaces';
 export declare const DatePicker: ({ onChange, placeholder, showCalendarIcon, value, width, }: DatePickerI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DatePicker.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import Calendar from '@hassanmojab/react-modern-calendar-datepicker';
+import DatePickerComponent from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 import '../../styles/calendar.css';
 import { Flex, IconButton, Input, Tooltip } from '@chakra-ui/react';
 import { Calendar as CalendarIcon } from '..';
@@ -8,18 +9,36 @@ import { colors } from '../../theme/colors';
 import { extractDayMonthYear, joinDayMonthYear } from '../../utils';
 export const DatePicker = ({ onChange, placeholder, showCalendarIcon, value, width = '290px', }) => {
     const formatedValue = extractDayMonthYear(value);
-    const [day, setDay] = useState(formatedValue);
-    const handleOnChange = (selectedDay) => {
-        setDay(selectedDay);
-        const newDay = joinDayMonthYear(selectedDay) || '';
-        onChange(newDay);
+    const [day, setDay] = useState(formatedValue
+        ? new Date(formatedValue.year, formatedValue.month - 1, formatedValue.day)
+        : null);
+    const handleOnChange = (date) => {
+        setDay(date);
+        const newDay = date
+            ? joinDayMonthYear({
+                day: date.getDate(),
+                month: date.getMonth() + 1,
+                year: date.getFullYear(),
+            })
+            : '';
+        onChange(String(newDay));
+    };
+    const handleInputChange = (e) => {
+        const inputValue = e.target.value;
+        const [day, month, year] = inputValue.split('/').map(Number);
+        const date = new Date(year, month - 1, day);
+        onChange(inputValue);
+        if (!isNaN(date.getTime())) {
+            setDay(date);
+        }
     };
-    const joinedValue = joinDayMonthYear(day);
     useEffect(() => {
-        setDay(formatedValue);
+        if (formatedValue) {
+            setDay(new Date(formatedValue.year, formatedValue.month - 1, formatedValue.day));
+        }
     }, [value]);
-    const renderCustomInput = ({ ref }) => {
-        return (_jsxs(Flex, { gap: "base", minW: width, children: [_jsx(Tooltip, { label: placeholder, children: _jsx(Input, { placeholder: placeholder, value: joinedValue, readOnly: true, ref: ref, _placeholder: { color: 'gray.2' } }) }), showCalendarIcon && (_jsx(IconButton, { "aria-label": "Calendar icon", variant: "iconOutlined", icon: _jsx(CalendarIcon, { size: 28, stroke: colors.blue[3] }), maxH: "input.md", flexShrink: 0 }))] }));
+    const renderCustomInput = () => {
+        return (_jsxs(Flex, { gap: "base", w: width, children: [_jsx(Tooltip, { label: placeholder, children: _jsx(Input, { placeholder: placeholder, onChange: handleInputChange, _placeholder: { color: 'gray.2' }, value: value }) }), showCalendarIcon && (_jsx(IconButton, { "aria-label": "Calendar icon", variant: "iconOutlined", icon: _jsx(CalendarIcon, { size: 28, stroke: colors.blue[3] }), maxH: "input.md", flexShrink: 0 }))] }));
     };
-    return (_jsx(Calendar, { value: day, onChange: handleOnChange, renderInput: renderCustomInput, colorPrimary: colors.blue['3'] }));
+    return (_jsx(DatePickerComponent, { selected: day, onChange: handleOnChange, customInput: renderCustomInput(), calendarClassName: "custom-calendar" }));
 };

package/dist/components/inputs/DateRangePicker.d.ts

@@ -1,3 +1,5 @@
+import 'react-datepicker/dist/react-datepicker.css';
+import '../../styles/calendar.css';
 export declare const DateRangePicker: ({ handleClick, }: {
     handleClick: (date: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DateRangePicker.js

@@ -1,11 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import '../../styles/calendar.css';
 import { Flex, Input } from '@chakra-ui/react';
-import Calendar from '@hassanmojab/react-modern-calendar-datepicker';
 import { Calendar as CalendarIcon } from '..';
-import { useDateRangePicker } from '../../hooks';
-import { colors } from '../../theme/colors';
 export const DateRangePicker = ({ handleClick, }) => {
-    const { formatInputValue, selectedDayRange, setSelectedDayRange } = useDateRangePicker({ handleClick });
-    const renderCustomInput = ({ ref }) => (_jsxs(Flex, { align: "center", justify: "end", gap: "base", children: [_jsx(CalendarIcon, {}), _jsx(Input, { value: selectedDayRange.from && selectedDayRange.to ? formatInputValue() : '', readOnly: true, ref: ref, placeholder: "Select date range", variant: "date", size: "sm", maxW: "9rem" })] }));
-    return (_jsx(Calendar, { value: selectedDayRange, onChange: setSelectedDayRange, renderInput: renderCustomInput, calendarClassName: "custom-calendar", colorPrimary: colors.blue['3'], colorPrimaryLight: colors.lightBlue['3'] }));
+    const [startDate, setStartDate] = useState(null);
+    const [endDate, setEndDate] = useState(null);
+    const handleDateChange = (dates) => {
+        const [start, end] = dates;
+        setStartDate(start);
+        setEndDate(end);
+        if (start && end) {
+            const formattedStart = `${start.getDate()}/${start.getMonth() + 1}/${start.getFullYear()}`;
+            const formattedEnd = `${end.getDate()}/${end.getMonth() + 1}/${end.getFullYear()}`;
+            handleClick(`${formattedStart} - ${formattedEnd}`);
+        }
+    };
+    const renderCustomInput = ({ value = '' }) => (_jsxs(Flex, { align: "center", justify: "end", gap: "base", children: [_jsx(CalendarIcon, {}), _jsx(Input, { value: value, readOnly: true, placeholder: "Select date range", variant: "date", size: "sm" })] }));
+    return (_jsx(DatePicker, { selected: startDate, onChange: handleDateChange, startDate: startDate, endDate: endDate, selectsRange: true, customInput: renderCustomInput({
+            value: startDate && endDate
+                ? `${startDate.getDate()}/${startDate.getMonth() + 1}/${startDate.getFullYear()} - ${endDate.getDate()}/${endDate.getMonth() + 1}/${endDate.getFullYear()}`
+                : '',
+        }), calendarClassName: "custom-calendar" }));
 };