indicator-ui 0.0.122 → 0.0.124

package/dist/index.js

@@ -6948,7 +6948,7 @@ function saveFormatDate(date, { from, to, errorNull = false, locale, toTimeZone,
         if (toTimeZone) {
             parsedDate = (0,date_fns_tz__WEBPACK_IMPORTED_MODULE_0__.toZonedTime)(parsedDate, toTimeZone);
         }
-        return (0,date_fns_tz__WEBPACK_IMPORTED_MODULE_0__.format)(parsedDate, to, { locale: locale, timeZone: toTimeZone });
+        return (0,date_fns_tz__WEBPACK_IMPORTED_MODULE_0__.format)(parsedDate, to, { locale: locale });
     }
     catch (e) {
         console.warn(e);
@@ -9145,7 +9145,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function DateField({ value, disabled, required, isError, onChange, onFocus, dateFormat = 'dd.MM.yyyy', onBlur, minYear = 1000, maxYear = 9999, additionStyles, }) {
+function DateField({ value, disabled, required, isError, onChange, onFocus, dateFormat = 'dd.MM.yyyy', onBlur, minYear = 1000, maxYear = 9999, additionStyles, timeZone, placeholder, }) {
     const [dateValue, setDateValue] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value);
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
         if (value !== dateValue)
@@ -9153,12 +9153,21 @@ function DateField({ value, disabled, required, isError, onChange, onFocus, date
     }, [value]);
     const handleChange = (newDate) => {
         setDateValue(newDate);
-        const formatDate = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(newDate, { from: dateFormat, to: dateFormat, errorNull: true });
+        const formatDate = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(newDate, {
+            from: dateFormat,
+            to: dateFormat,
+            errorNull: true,
+            fromTimeZone: timeZone,
+            toTimeZone: timeZone,
+        });
         if (newDate.length === dateFormat.length && formatDate !== null && onChange) {
             onChange(formatDate);
         }
+        else if (newDate.length === 0) {
+            onChange('');
+        }
     };
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FlexField__WEBPACK_IMPORTED_MODULE_4__.FlexField, { value: dateValue, onChange: handleChange, disabled: disabled, isError: isError, onFocus: onFocus, onBlur: onBlur, mask: dateFormat, blocks: {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FlexField__WEBPACK_IMPORTED_MODULE_4__.FlexField, { value: dateValue, placeholder: placeholder, onChange: handleChange, disabled: disabled, isError: isError, onFocus: onFocus, onBlur: onBlur, mask: dateFormat, blocks: {
             YYYY: {
                 mask: react_imask__WEBPACK_IMPORTED_MODULE_2__.IMask.MaskedRange,
                 from: minYear, // минимальный год
@@ -9200,7 +9209,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
-/* harmony import */ var date_fns_locale__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! date-fns/locale */ "./node_modules/date-fns/locale/ru.js");
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeField/styles/index.ts");
 /* harmony import */ var _TimeField__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./TimeField */ "./src/ui/InputFields/DateTimeField/ui/TimeField.tsx");
@@ -9212,83 +9220,101 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
-function DateTimeField({ value, fieldConfig = 'datetime', onChange, dateFormat = 'dd.MM.yyyy', timeFormat = 'HH:mm', outFormat = 'iso-8601', additionStyle, ...props }) {
-    const isInputDate = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(value != undefined);
-    const isInputTime = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(value != undefined);
+function DateTimeField({ value, fieldConfig = 'datetime', onChange, dateFormat = 'dd.MM.yyyy', timeFormat = 'HH:mm', outFormat = 'iso-8601', additionStyle, datePlaceholder, timePlaceholder, timeZone = 'Z', ...props }) {
     const getDateValue = () => {
         if (value === undefined)
             return undefined;
         if (outFormat === 'iso-8601') {
             return new Date(value);
         }
-        return (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveParseDate)(value, { from: outFormat });
+        return (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveParseDate)(value, { from: outFormat, fromTimeZone: timeZone });
+    };
+    const initDate = () => {
+        if (fieldConfig === 'time' || value === undefined)
+            return undefined;
+        const curDate = getDateValue();
+        return (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(curDate, { to: dateFormat, errorNull: true, toTimeZone: timeZone }) ?? undefined;
+    };
+    const initTime = () => {
+        if (fieldConfig === 'date' || value === undefined)
+            return undefined;
+        const curDate = getDateValue();
+        return (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(curDate, { to: timeFormat, errorNull: true, toTimeZone: timeZone }) ?? undefined;
+    };
+    const setTimeInDate = (res, newTime) => {
+        const dateTime = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveParseDate)(newTime, { from: timeFormat, fromTimeZone: timeZone });
+        if (dateTime != null) {
+            res.setHours(dateTime.getHours());
+            res.setMinutes(dateTime.getMinutes());
+            res.setSeconds(dateTime.getSeconds());
+            res.setMilliseconds(dateTime.getMilliseconds());
+        }
+    };
+    const setDateInDate = (res, newDate) => {
+        const dateTime = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveParseDate)(newDate, { from: dateFormat, fromTimeZone: timeZone });
+        if (dateTime != null) {
+            res.setFullYear(dateTime.getFullYear());
+            res.setMonth(dateTime.getMonth());
+            res.setDate(dateTime.getDate());
+        }
     };
     const setDateValue = (newValue) => {
-        if (onChange) {
+        if (onChange && newValue) {
+            let dateFormat = '';
             if (outFormat === 'iso-8601') {
-                onChange(newValue.toISOString());
+                dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSXXX";
             }
             else {
-                const res = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(newValue, { to: outFormat });
-                if (res != null && typeof res === 'string') {
-                    onChange(res);
-                }
+                dateFormat = outFormat;
+            }
+            const res = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(newValue, {
+                to: dateFormat,
+                toTimeZone: timeZone,
+                fromTimeZone: timeZone
+            });
+            if (res != null && typeof res === 'string') {
+                onChange(res);
             }
         }
     };
+    const [time, setTime] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(initTime());
+    const [date, setDate] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(initDate());
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
+        if (time === '' && date === '') {
+            onChange('');
+        }
+        else if (time || date) {
+            const resDate = new Date();
+            switch (fieldConfig) {
+                case 'datetime':
+                    if (time && date) {
+                        setDateInDate(resDate, date);
+                        setTimeInDate(resDate, time);
+                    }
+                    break;
+                case 'date':
+                    if (date) {
+                        setDateInDate(resDate, date);
+                    }
+                    break;
+                case 'time':
+                    if (time) {
+                        setTimeInDate(resDate, time);
+                    }
+                    break;
+            }
+            setDateValue(resDate);
+        }
+    }, [time, date]);
     const getTimeContent = () => {
         if (fieldConfig == 'date')
             return undefined;
-        const handleChange = (newTime) => {
-            const dateValue = getDateValue();
-            let res = new Date();
-            const dateTime = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveParseDate)(newTime, { from: timeFormat });
-            if (dateValue != null) {
-                res = dateValue;
-            }
-            if (dateTime != null) {
-                res.setHours(dateTime.getHours());
-                res.setMinutes(dateTime.getMinutes());
-                res.setSeconds(dateTime.getSeconds());
-                res.setMilliseconds(dateTime.getMilliseconds());
-                setDateValue(res);
-            }
-        };
-        const getTime = () => {
-            if (value === undefined)
-                return undefined;
-            const dateValue = getDateValue();
-            const res = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(dateValue, { to: timeFormat, locale: date_fns_locale__WEBPACK_IMPORTED_MODULE_7__.ru });
-            return typeof res === 'string' ? res : undefined;
-        };
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DateTimeFieldStyle.item, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeField__WEBPACK_IMPORTED_MODULE_5__.TimeField, { ...props, onChange: handleChange, value: getTime(), timeFormat: timeFormat }) }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DateTimeFieldStyle.item, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_TimeField__WEBPACK_IMPORTED_MODULE_5__.TimeField, { ...props, placeholder: timePlaceholder, onChange: setTime, timeZone: timeZone, value: time, timeFormat: timeFormat }) }));
     };
     const getDateContent = () => {
         if (fieldConfig == 'time')
             return undefined;
-        const handleChange = (newDate) => {
-            const dateValue = getDateValue();
-            let res = new Date();
-            const dateTime = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveParseDate)(newDate, { from: dateFormat });
-            if (dateValue != null) {
-                res = dateValue;
-            }
-            if (dateTime != null) {
-                res.setFullYear(dateTime.getFullYear());
-                res.setMonth(dateTime.getMonth());
-                res.setDate(dateTime.getDate());
-                setDateValue(res);
-            }
-        };
-        const getDate = () => {
-            if (value === undefined)
-                return undefined;
-            const dateValue = getDateValue();
-            const res = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(dateValue, { to: dateFormat, locale: date_fns_locale__WEBPACK_IMPORTED_MODULE_7__.ru });
-            return typeof res === 'string' ? res : undefined;
-        };
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DateTimeFieldStyle.item, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateField__WEBPACK_IMPORTED_MODULE_6__.DateField, { ...props, value: getDate(), onChange: handleChange, dateFormat: dateFormat }) }));
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: _styles__WEBPACK_IMPORTED_MODULE_4__.DateTimeFieldStyle.item, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DateField__WEBPACK_IMPORTED_MODULE_6__.DateField, { ...props, placeholder: datePlaceholder, value: date, timeZone: timeZone, onChange: setDate, dateFormat: dateFormat }) }));
     };
     return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.DateTimeFieldStyle.DateTimeField, additionStyle), children: [getDateContent(), getTimeContent()] }));
 }
@@ -9318,7 +9344,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function TimeField({ value, disabled, required, isError, onChange, onFocus, timeFormat = 'HH:mm', onBlur, additionStyles, }) {
+function TimeField({ value, disabled, required, isError, onChange, onFocus, timeFormat = 'HH:mm', onBlur, placeholder, additionStyles, timeZone, }) {
     const [timeValue, setTimeValue] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(value);
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
         if (value !== timeValue)
@@ -9326,12 +9352,21 @@ function TimeField({ value, disabled, required, isError, onChange, onFocus, time
     }, [value]);
     const handleChange = (newTime) => {
         setTimeValue(newTime);
-        const formatTime = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(newTime, { from: timeFormat, to: timeFormat, errorNull: true });
+        const formatTime = (0,_lib__WEBPACK_IMPORTED_MODULE_3__.saveFormatDate)(newTime, {
+            from: timeFormat,
+            to: timeFormat,
+            errorNull: true,
+            fromTimeZone: timeZone,
+            toTimeZone: timeZone,
+        });
         if (newTime.length === timeFormat.length && formatTime !== null && onChange) {
             onChange(formatTime);
         }
+        else if (newTime.length === 0) {
+            onChange('');
+        }
     };
-    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FlexField__WEBPACK_IMPORTED_MODULE_4__.FlexField, { value: timeValue, onChange: handleChange, disabled: disabled, isError: isError, onFocus: onFocus, onBlur: onBlur, mask: timeFormat, blocks: {
+    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FlexField__WEBPACK_IMPORTED_MODULE_4__.FlexField, { value: timeValue, placeholder: placeholder, onChange: handleChange, disabled: disabled, isError: isError, onFocus: onFocus, onBlur: onBlur, mask: timeFormat, blocks: {
             HH: {
                 mask: react_imask__WEBPACK_IMPORTED_MODULE_2__.IMask.MaskedRange,
                 from: 0,