kui-complex 0.0.146 → 0.0.148

package/index.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { HalfArrowIcon, PrevArrowIcon, NextArrowIcon, CalendarIcon, ArrowBackIcon, ArrowNextIcon, ClosedEyeIcon, OpenEyeIcon, CheckIcon, PlusIcon, FileIcon, EditIcon, TrashIcon } from 'kui-icon';
 import _ from 'lodash';
 import DatePicker from 'react-datepicker';
-import { Controller, useController, useWatch } from 'react-hook-form';
+import { useController, Controller, useWatch } from 'react-hook-form';
 import { scroller, Events, Link as Link$1, animateScroll, Element } from 'react-scroll';
 import { DateTime } from 'luxon';
 import ru from 'date-fns/locale/ru';
@@ -441,19 +441,22 @@ var StyledHeader = styled(Grid)(templateObject_2$i || (templateObject_2$i = __ma
 var templateObject_1$u, templateObject_2$i;
 
 var DesktopInputWithMonthPicker = forwardRef(function (_a, ref) {
+    var _b;
     var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, onChange = _a.onChange, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps", "onChange"]);
-    var _b = useState(), changedValue = _b[0], setChangedValue = _b[1];
-    var handleChange = function (date, field) {
+    var _c = useState(), changedValue = _c[0], setChangedValue = _c[1];
+    var _d = useController({
+        name: name,
+        control: form.control,
+    }), field = _d.field, fieldState = _d.fieldState;
+    var handleChange = function (date) {
         field.onChange(date);
-        setChangedValue(date);
         if (onChange)
             onChange(date);
     };
-    return (jsx(Wrapper$4, __assign({ ref: ref }, { children: jsx(Controller, { name: name, control: form.control, render: function (_a) {
-                var _b;
-                var field = _a.field, fieldState = _a.fieldState;
-                return (jsx(DatePicker, __assign({ selected: field.value, onChange: function (e) { return handleChange(e, field); }, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps), changedValue), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
-            } }) })));
+    useEffect(function () {
+        setChangedValue(field.value);
+    }, [field.value]);
+    return (jsx(Wrapper$4, __assign({ ref: ref }, { children: jsx(DatePicker, __assign({ selected: field.value, onChange: handleChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps), changedValue), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)) })));
 });
 var Wrapper$4 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"], ["\n  @media (max-width: 600px) {\n    display: none;\n  }\n"])));
 var templateObject_1$t;
@@ -682,33 +685,32 @@ var InputWithDatePicker = forwardRef(function (_a, ref) {
         control: form.control,
     }), field = _c.field, fieldState = _c.fieldState;
     var error = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    var formattedValue = field.value ? field.value.toFormat("dd.MM.yyyy") : "";
-    var formattedDate = field.value ? field.value.toJSDate() : null;
+    var formValue = field.value;
+    var formattedValue = formValue ? formValue.toFormat("dd.MM.yyyy") : "";
+    var formattedDate = formValue ? formValue.toJSDate() : null;
     var _d = useToggle(), isModalOpen = _d[0], handleModalOpen = _d[1], handleModalClose = _d[2];
-    var _e = useState(formattedDate), date = _e[0], setDate = _e[1];
-    var _f = useState(formattedValue), value = _f[0], setValue = _f[1];
+    var _e = useState(formattedDate), calendarDate = _e[0], setCalendarDate = _e[1];
+    var _f = useState(formattedValue), inputValue = _f[0], setInputValue = _f[1];
     var yearList = generateYearRange(yearParams === null || yearParams === void 0 ? void 0 : yearParams.min, yearParams === null || yearParams === void 0 ? void 0 : yearParams.max);
+    var forwardedRef = useForkRef(ref, field.ref);
     useEffect(function () {
-        if (!isModalOpen) {
-            setDate(null);
-        }
-        else {
-            setDate(formattedDate);
+        if (formattedValue) {
+            setInputValue(formattedValue);
         }
-    }, [isModalOpen]);
+    }, [formattedValue]);
     var handleChange = function (e) {
         var targetValue = e.target.value;
-        setValue(targetValue);
+        setInputValue(targetValue);
         if (targetValue.length !== 0 && isValidWithMaskExp.test(targetValue)) {
             var targetDate = DateTime.fromFormat(targetValue, "dd.MM.yyyy");
-            setDate(targetDate.toJSDate());
+            setCalendarDate(targetDate.toJSDate());
             field === null || field === void 0 ? void 0 : field.onChange({ target: { value: targetDate, name: name }, type: "change" });
             if (onChange) {
                 onChange(targetDate);
             }
         }
         else {
-            setDate(null);
+            setCalendarDate(null);
             field === null || field === void 0 ? void 0 : field.onChange({ target: { value: null, name: name }, type: "change" });
             if (onChange) {
                 onChange(null);
@@ -716,9 +718,9 @@ var InputWithDatePicker = forwardRef(function (_a, ref) {
         }
     };
     var acceptWithDateSelected = function () {
-        if (date) {
-            var dateObj = DateTime.fromJSDate(date);
-            setValue(dateObj.toFormat("dd.MM.yyyy"));
+        if (calendarDate) {
+            var dateObj = DateTime.fromJSDate(calendarDate);
+            setInputValue(dateObj.toFormat("dd.MM.yyyy"));
             field === null || field === void 0 ? void 0 : field.onChange({ target: { value: dateObj, name: name }, type: "change" });
             if (onChange) {
                 onChange(dateObj);
@@ -727,16 +729,9 @@ var InputWithDatePicker = forwardRef(function (_a, ref) {
         }
     };
     var handleDateChange = function (newDate) {
-        setDate(newDate);
+        setCalendarDate(newDate);
     };
-    var forwardedRef = useForkRef(ref, field.ref);
-    useEffect(function () {
-        setValue(formattedValue);
-    }, [formattedValue]);
-    useEffect(function () {
-        setDate(formattedDate);
-    }, [formattedDate]);
-    return (jsxs$1(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxs$1(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsx$1(ContentWrapper$2, { children: jsx$1(DatePicker, __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
+    return (jsxs$1(Fragment, { children: [jsx$1(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: formattedValue || inputValue, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxs$1(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsx$1(ContentWrapper$2, { children: jsx$1(DatePicker, __assign({ inline: true, selected: calendarDate || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsx$1(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsx$1(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsx$1(ModalFooter, { fullWidth: true, disabled: !formattedDate && !calendarDate, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
 });
 InputWithDatePicker.defaultProps = {
     alignTitle: "center",