@salutejs/plasma-new-hope 0.322.0-canary.1939.14642328722.0 → 0.322.0-canary.1941.14638918350.0

package/emotion/es/components/DatePicker/hooks/useDatePicker.js

@@ -1,203 +1,147 @@
-import { customDayjs } from "../../../utils/datejs";
-import { QUARTER_NAMES } from "../../Calendar/utils";
 import { classes } from "../DatePicker.tokens";
-import { getFormattedDates, getMaskedDateOnInput } from "../utils";
+import { formatCalendarValue, formatInputValue, getDateFromFormat, getMaskedDateOnInput, validateDateWithFullMonth } from "../utils/dateHelper";
 export var useDatePicker = function useDatePicker(_ref) {
   var currentValue = _ref.currentValue,
+    setInputValue = _ref.setInputValue,
+    setCalendarValue = _ref.setCalendarValue,
+    dateFormatDelimiter = _ref.dateFormatDelimiter,
     format = _ref.format,
     _ref$lang = _ref.lang,
     lang = _ref$lang === void 0 ? 'ru' : _ref$lang,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
+    maskWithFormat = _ref.maskWithFormat,
     valueError = _ref.valueError,
     valueSuccess = _ref.valueSuccess,
     name = _ref.name,
-    type = _ref.type,
-    min = _ref.min,
-    max = _ref.max,
-    includeEdgeDates = _ref.includeEdgeDates,
-    maskWithFormat = _ref.maskWithFormat,
-    setCorrectDates = _ref.setCorrectDates,
-    setInputValue = _ref.setInputValue,
-    setCalendarValue = _ref.setCalendarValue,
-    dateFormatDelimiter = _ref.dateFormatDelimiter,
     onChangeValue = _ref.onChangeValue,
     onCommitDate = _ref.onCommitDate,
     onChange = _ref.onChange;
   var datePickerErrorClass = valueError ? classes.datePickerError : undefined;
   var datePickerSuccessClass = valueSuccess ? classes.datePickerSuccess : undefined;
-  var getQuarterInfo = function getQuarterInfo(originalDate) {
-    if (type !== 'Quarters') {
-      return;
-    }
-    var endQuarter = new Date(originalDate);
-    endQuarter.setMonth(originalDate.getMonth() + 3);
-    endQuarter.setDate(0);
-    customDayjs.locale(lang);
-    var quarterIndex = customDayjs(originalDate).quarter() - 1;
-    return {
-      name: QUARTER_NAMES[quarterIndex],
-      fullValue: [originalDate, endQuarter]
-    };
-  };
   var handleChangeValue = function handleChangeValue(event) {
     if (disabled || readOnly) {
       return;
     }
     var value = event.target.value;
     var newValue = maskWithFormat ? getMaskedDateOnInput(value, format, dateFormatDelimiter(), currentValue) : value;
-    var _getFormattedDates = getFormattedDates({
+    if (!format) {
+      setCalendarValue(formatCalendarValue(newValue));
+      setInputValue(formatInputValue({
         value: newValue,
-        lang: lang,
-        delimiter: dateFormatDelimiter(),
         format: format,
-        includeEdgeDates: includeEdgeDates,
-        min: min,
-        max: max
-      }),
-      formattedDate = _getFormattedDates.formattedDate,
-      isoDate = _getFormattedDates.isoDate,
-      originalDate = _getFormattedDates.originalDate;
-    if (originalDate) {
-      setCorrectDates({
-        calendar: originalDate,
-        input: formattedDate
-      });
-      var dateInfo = getQuarterInfo(originalDate);
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, originalDate, isoDate);
-      setCalendarValue(originalDate);
-      setInputValue(formattedDate);
-      onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, formattedDate, originalDate, isoDate);
+        lang: lang
+      }));
+      onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
       onChange === null || onChange === void 0 || onChange({
         target: {
-          value: formattedDate,
-          originalDate: originalDate,
-          isoDate: isoDate,
+          value: newValue,
           name: name
         }
       });
       return;
     }
-    if (formattedDate === '') {
-      setCorrectDates({
-        calendar: undefined,
-        input: ''
-      });
+    var _validateDateWithFull = validateDateWithFullMonth({
+        currentValue: newValue,
+        format: format,
+        lang: lang
+      }),
+      hasMonthFullName = _validateDateWithFull.hasMonthFullName,
+      isValidMonth = _validateDateWithFull.isValidMonth,
+      isLengthEqual = _validateDateWithFull.isLengthEqual;
+    if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
+      setCalendarValue(formatCalendarValue(newValue, format, lang));
     }
-    setCalendarValue(originalDate);
-    setInputValue(formattedDate);
-    onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, formattedDate, originalDate, isoDate);
+    setInputValue(formatInputValue({
+      value: newValue,
+      format: format,
+      lang: lang,
+      hasMonthFullName: hasMonthFullName,
+      isValidMonth: isValidMonth,
+      isLengthEqual: isLengthEqual
+    }));
+    onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
     onChange === null || onChange === void 0 || onChange({
       target: {
-        value: formattedDate,
-        originalDate: originalDate,
-        isoDate: isoDate,
+        value: newValue,
         name: name
       }
     });
   };
-  var handleSearch = function handleSearch(date) {
+  var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
     if (disabled || readOnly) {
       return;
     }
     if (!date) {
       setCalendarValue(undefined);
       setInputValue('');
-      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true, undefined, undefined, '');
+      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true);
     }
-    var _getFormattedDates2 = getFormattedDates({
+    if (isCalendarValue) {
+      var _formattedInputValue = formatInputValue({
         value: date,
-        lang: lang,
-        delimiter: dateFormatDelimiter(),
         format: format,
-        includeEdgeDates: includeEdgeDates,
-        min: min,
-        max: max
-      }),
-      formattedDate = _getFormattedDates2.formattedDate,
-      isoDate = _getFormattedDates2.isoDate,
-      originalDate = _getFormattedDates2.originalDate;
-    if (originalDate) {
-      var dateInfo = getQuarterInfo(originalDate);
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, originalDate, isoDate);
-    }
-  };
-  var handleCalendarPick = function handleCalendarPick(date, dateInfo) {
-    if (disabled || readOnly) {
-      return;
-    }
-    if (!date) {
-      setInputValue('');
-      setCalendarValue(date);
-      setCorrectDates({
-        calendar: date || undefined,
-        input: ''
+        lang: lang
       });
-      onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, '', date, '');
+      setCalendarValue(formatCalendarValue(date, format, lang));
+      setInputValue(_formattedInputValue);
+      onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
+      onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, _formattedInputValue);
       onChange === null || onChange === void 0 || onChange({
         target: {
-          value: '',
-          originalDate: date,
-          isoDate: '',
+          value: _formattedInputValue,
           name: name
         }
       });
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate('', false, true, dateInfo, date || undefined, '');
       return;
     }
-    customDayjs.locale(lang);
-    var formattedDate = customDayjs(date).format(format);
-    var isoDate = date.toISOString();
-    setCalendarValue(date);
-    setInputValue(formattedDate);
-    setCorrectDates({
-      calendar: date,
-      input: formattedDate
+    var formatString = applyFormat ? format : undefined;
+    var _getDateFromFormat = getDateFromFormat(date, formatString, lang),
+      newDate = _getDateFromFormat.value,
+      isError = _getDateFromFormat.isError,
+      isSuccess = _getDateFromFormat.isSuccess;
+    var formattedInputValue = formatInputValue({
+      value: newDate,
+      format: format,
+      lang: lang
     });
-    onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, formattedDate, date, isoDate);
+    setCalendarValue(formatCalendarValue(newDate, format, lang));
+    setInputValue(formattedInputValue);
+    onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
+    onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, formattedInputValue);
     onChange === null || onChange === void 0 || onChange({
       target: {
-        value: formattedDate,
-        originalDate: date,
-        isoDate: isoDate,
+        value: formattedInputValue,
         name: name
       }
     });
-    onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, date, isoDate);
   };
-  var updateExternalDate = function updateExternalDate(externalDate) {
-    var _getFormattedDates3 = getFormattedDates({
-        value: externalDate || null,
-        lang: lang,
-        delimiter: dateFormatDelimiter(),
-        format: format,
-        includeEdgeDates: includeEdgeDates,
-        min: min,
-        max: max
-      }),
-      formattedDate = _getFormattedDates3.formattedDate,
-      originalDate = _getFormattedDates3.originalDate;
-    setInputValue(formattedDate);
-    setCalendarValue(originalDate);
-    if (originalDate) {
-      setCorrectDates({
-        calendar: originalDate,
-        input: formattedDate
-      });
+  var updateExternalDate = function updateExternalDate(externalDate, inputSetter, calendarSetter) {
+    inputSetter(formatInputValue({
+      value: externalDate,
+      format: format,
+      lang: lang
+    }));
+    if (!format) {
+      calendarSetter(formatCalendarValue(externalDate, undefined, lang));
+      return;
     }
-    if (formattedDate === '') {
-      setCorrectDates({
-        calendar: undefined,
-        input: ''
-      });
+    if (!externalDate) {
+      calendarSetter(undefined);
+      return;
+    }
+    var _getDateFromFormat2 = getDateFromFormat(externalDate, undefined, lang),
+      newDate = _getDateFromFormat2.value,
+      isError = _getDateFromFormat2.isError;
+    if (!isError) {
+      calendarSetter(formatCalendarValue(newDate, format, lang));
     }
   };
   return {
     datePickerErrorClass: datePickerErrorClass,
     datePickerSuccessClass: datePickerSuccessClass,
     handleChangeValue: handleChangeValue,
-    handleSearch: handleSearch,
-    handleCalendarPick: handleCalendarPick,
+    handleCommitDate: handleCommitDate,
     updateExternalDate: updateExternalDate
   };
 };

package/emotion/es/components/DatePicker/hooks/useKeyboardNavigation.js

@@ -1,4 +1,3 @@
-import { needFullMonth } from "../utils/dateHelper";
 export var keys = {
   Space: 'Space',
   Escape: 'Escape'
@@ -6,15 +5,8 @@ export var keys = {
 export var useKeyNavigation = function useKeyNavigation(_ref) {
   var isCalendarOpen = _ref.isCalendarOpen,
     closeOnEsc = _ref.closeOnEsc,
-    format = _ref.format,
-    maskWithFormat = _ref.maskWithFormat,
-    delimiter = _ref.delimiter,
     onToggle = _ref.onToggle;
   var onKeyDown = function onKeyDown(event) {
-    if (event.key === delimiter && maskWithFormat && format && !needFullMonth(format)) {
-      event.preventDefault();
-      return;
-    }
     switch (event.code) {
       case keys.Space:
         {

package/emotion/es/components/DatePicker/utils/dateHelper.js

@@ -1,5 +1,57 @@
-export var needFullMonth = function needFullMonth(format) {
-  return /M{3,4}/g.test(format);
+import { customDayjs } from "../../../utils/datejs";
+export var formatInputValue = function formatInputValue(_ref) {
+  var value = _ref.value,
+    format = _ref.format,
+    lang = _ref.lang,
+    hasMonthFullName = _ref.hasMonthFullName,
+    isValidMonth = _ref.isValidMonth,
+    isLengthEqual = _ref.isLengthEqual;
+  if (!value || !lang) {
+    return '';
+  }
+  if (hasMonthFullName && (!isValidMonth || !isLengthEqual)) {
+    return String(value);
+  }
+  if (format && customDayjs(value, format, true).isValid()) {
+    return customDayjs(value, format).locale(lang).format(format);
+  }
+  if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') {
+    return customDayjs(value).locale(lang).format(format);
+  }
+  return String(value);
+};
+export var formatCalendarValue = function formatCalendarValue(value, format, lang) {
+  if (!value || !lang) {
+    return undefined;
+  }
+  if (format && customDayjs(value, format, true).isValid()) {
+    return customDayjs(value, format, true).locale(lang).toDate();
+  }
+  if (String(new Date(value)) !== 'Invalid Date') {
+    return customDayjs(value).locale(lang).toDate();
+  }
+  return undefined;
+};
+export var getDateFromFormat = function getDateFromFormat(value, format, lang) {
+  if (format && customDayjs(value, format, true).isValid() && lang) {
+    return {
+      value: customDayjs(value, format, true).locale(lang).toDate(),
+      isError: false,
+      isSuccess: true
+    };
+  }
+  if (!format && String(new Date(value)) !== 'Invalid Date' && lang) {
+    return {
+      value: customDayjs(value).locale(lang).toDate(),
+      isError: false,
+      isSuccess: true
+    };
+  }
+  return {
+    value: value,
+    isError: true,
+    isSuccess: false
+  };
 };
 export var getDateFormatDelimiter = function getDateFormatDelimiter(format) {
   var _format$match;
@@ -8,4 +60,52 @@ export var getDateFormatDelimiter = function getDateFormatDelimiter(format) {
   }
   var delimiter = (_format$match = format.match(/[^a-zA-Z0-9]/)) === null || _format$match === void 0 ? void 0 : _format$match[0];
   return delimiter !== null && delimiter !== void 0 ? delimiter : '';
+};
+export var getMaskedDateOnInput = function getMaskedDateOnInput(value, format, delimiter, prevValue) {
+  if (!value) {
+    return '';
+  }
+  if (!format || !delimiter || /M{3,4}/g.test(format)) {
+    return value;
+  }
+  if (value.length >= format.length) {
+    return value.slice(0, format.length);
+  }
+  if (prevValue && value.length < prevValue.length && (prevValue === null || prevValue === void 0 ? void 0 : prevValue[value.length]) === delimiter) {
+    return value.slice(0, -1);
+  }
+  if ((format === null || format === void 0 ? void 0 : format[value.length]) === delimiter) {
+    return value + delimiter;
+  }
+  return value;
+};
+export var validateDateWithFullMonth = function validateDateWithFullMonth(_ref2) {
+  var currentValue = _ref2.currentValue,
+    format = _ref2.format,
+    lang = _ref2.lang;
+  /**
+   * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
+   * нужно дополнительно проводить валидацию на полноту введенной даты.
+   * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
+   */
+  var hasMonthFullName = /M{3,4}/g.test(format);
+  if (!hasMonthFullName) {
+    return {
+      hasMonthFullName: hasMonthFullName,
+      isValidMonth: false,
+      isLengthEqual: false
+    };
+  }
+  customDayjs.locale(lang);
+  var firstIndexOfMonth = format.indexOf('M');
+  var lastIndexOfMonth = currentValue.indexOf(getDateFormatDelimiter(format), firstIndexOfMonth);
+  var fullMonthName = !lastIndexOfMonth ? currentValue.slice(firstIndexOfMonth) : currentValue.slice(firstIndexOfMonth, lastIndexOfMonth);
+  var monthFormatting = format.replace(/[^M]/g, '');
+  var isValidMonth = customDayjs("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
+  var isLengthEqual = format.length - monthFormatting.length === currentValue.length - fullMonthName.length;
+  return {
+    hasMonthFullName: hasMonthFullName,
+    isValidMonth: isValidMonth,
+    isLengthEqual: isLengthEqual
+  };
 };