@geneui/components 2.11.1

package/ValidatableDatePicker.js

@@ -0,0 +1,312 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useCallback, useState, useEffect } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { n as noop } from './index-ac59cb10.js';
+import { u as useMount } from './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import { D as DatePickerInput } from './index-5e722d91.js';
+import { d as dayjsWithPlugins, v as validateDatePickerField } from './dateValidation-67caec66.js';
+import { c as checkTimeValidation } from './checkTimeValidation-e56771be.js';
+import { g as getBrowserDateFormat } from './localization-4ba17032.js';
+import 'react-dom';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './useKeyDown-38102ae7.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './index-6ff23041.js';
+import './index-702bf24a.js';
+import './_commonjsHelpers-24198af3.js';
+import './index-122432cd.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './GeneUIProvider.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './guid-8ddf77b3.js';
+import './Button.js';
+import './Icon.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+
+const nonLettersRegex = /[\W_]+/g;
+const hourFormats = ['H', 'HH', 'h', 'hh'];
+const minuteFormats = ['m', 'mm'];
+const secondFormats = ['s', 'ss'];
+const getFormatSeparator = format => format[format.search(nonLettersRegex)];
+
+/*
+ * Splitting time to { format, value } object
+ * For checking is value fit format
+ * Formats are taken from day.js date formats list
+ * */
+function splitTimeToObjects(dateParts, formatParts) {
+  const hour = {};
+  const minute = {};
+  const second = {};
+  formatParts.forEach((item, index) => {
+    if (hourFormats.includes(item)) {
+      hour.value = dateParts[index];
+      hour.format = item;
+    } else if (minuteFormats.includes(item)) {
+      minute.value = dateParts[index];
+      minute.format = item;
+    } else if (secondFormats.includes(item)) {
+      second.value = dateParts[index];
+      second.format = item;
+    }
+  });
+  return {
+    hour,
+    minute,
+    second
+  };
+}
+const isHourInRightFormat = _ref => {
+  let {
+    value,
+    format
+  } = _ref;
+  return value && ((format === 'H' || format === 'h') && value.length <= 2 && Number(value[0]) !== 0 || (format === 'HH' || format === 'hh') && value.length === 2);
+};
+const isMinuteInRightFormat = _ref2 => {
+  let {
+    value,
+    format
+  } = _ref2;
+  return value && (format === 'm' && value.length <= 2 && (value.length !== 2 || Number(value[0]) !== 0) || format === 'mm' && value.length === 2);
+};
+const isSecondInRightFormat = _ref3 => {
+  let {
+    value,
+    format
+  } = _ref3;
+  return !format || value && (format === 's' && value.length <= 2 && (value.length !== 2 || Number(value[0]) !== 0) || format === 'ss' && value.length === 2);
+};
+const checkTimeFormat = _ref4 => {
+  let {
+    hour,
+    minute,
+    second
+  } = _ref4;
+  return isHourInRightFormat(hour) && isMinuteInRightFormat(minute) && isSecondInRightFormat(second);
+};
+function validateTimeField(value, required, isValid, min, max, format) {
+  const time = value ? dayjsWithPlugins(value).format(format).split(' ')[1] : '';
+  const timeFormat = format ? format.split(' ')[1] : '';
+  const date = dayjsWithPlugins(value);
+  const separator = getFormatSeparator(timeFormat);
+  const dateParts = time.split(separator);
+  const formatParts = timeFormat.split(separator);
+  const timeObject = splitTimeToObjects(dateParts, formatParts);
+  const isValidFormat = checkTimeFormat(timeObject);
+  const isValidDate = checkTimeValidation(timeObject);
+  const isBefore = !max || date.isBefore(dayjsWithPlugins(max, format));
+  const isAfter = !min || date.isAfter(dayjsWithPlugins(min, format));
+  if (!time.length) {
+    return required ? {
+      key: 'required',
+      isValid: false
+    } : {
+      key: null,
+      isValid: true
+    };
+  }
+  if (!isValidFormat) return {
+    key: 'isValidFormat',
+    isValid: false
+  };
+  if (!isValidDate) return {
+    key: 'isValidDate',
+    isValid: false
+  };
+  if (!isBefore) return {
+    key: 'isBefore',
+    isValid: false
+  };
+  if (!isAfter) return {
+    key: 'isAfter',
+    isValid: false
+  };
+  if (!isValid) return {
+    key: 'customValidation',
+    isValid: false
+  };
+  return {
+    key: null,
+    isValid: true
+  };
+}
+function validateTimePickerField(required, isValid, min, max, format) {
+  let value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
+  if (typeof value === 'string') {
+    return validateTimeField(value, required, isValid, min, max, format);
+  }
+  const [start, end] = value;
+  const startDateValidation = validateTimeField(start || '', required, isValid, min, max, format);
+  const endDateValidation = validateTimeField(end || '', required, isValid, min, max, format);
+  const isRangeInvalid = dayjsWithPlugins(start, format).isAfter(dayjsWithPlugins(end, format));
+  if (!startDateValidation.isValid) return startDateValidation;
+  if (!endDateValidation.isValid) return endDateValidation;
+  if (isRangeInvalid) return {
+    key: 'isValidRange',
+    isValid: false
+  };
+  return {
+    key: null,
+    isValid: true
+  };
+}
+
+const EMPTY_OBJECT = {};
+const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onChange,
+    value,
+    isValid,
+    required,
+    isFieldValid,
+    withRange,
+    min,
+    max,
+    format,
+    withTime,
+    onBlur,
+    forceAllowValidation,
+    ...restProps
+  } = _ref;
+  const localValue = value || (withRange ? [null, null] : null);
+  const checkValidation = useCallback(value => {
+    const validFormat = format || getBrowserDateFormat(!!withTime);
+    // We need null, because other values `dayjs` turns to valid date
+    const formatted = withRange ? [value[0] || null, value[1] || null] : value;
+    const {
+      isValid: isValidDate,
+      key: dateKey
+    } = validateDatePickerField(formatted, required, isValid, min, max, validFormat);
+    const {
+      isValid: isValidTime = true,
+      key: timeKey = null
+    } = !withTime || !validFormat.split(' ')[1] ? EMPTY_OBJECT : validateTimePickerField(required, isValid, min, max, validFormat, formatted);
+    return {
+      isValid: isValidDate && isValidTime,
+      key: dateKey || timeKey || null
+    };
+  }, [required, isValid, min, max, format, withTime, withRange]);
+  const [validationState, setValidationState] = useState(true);
+  const [allowValidation, setAllowValidation] = useState(false);
+  const handleChange = useCallback(value => {
+    const validation = checkValidation(value);
+    setValidationState(validation.isValid);
+    onChange && onChange(value, validation.isValid, validation.key);
+  }, [checkValidation, onChange]);
+
+  // we use this because need to show field validation after onBlur
+  const onClickOutside = useCallback(() => setAllowValidation(true), []);
+  const handleBlur = useCallback(e => {
+    setAllowValidation(true);
+    onBlur(e);
+  }, [onBlur]);
+  useEffect(() => {
+    setValidationState(checkValidation(localValue).isValid);
+  }, [localValue, required, min, max]);
+
+  // need this for handling user's `isValid` prop
+  useEffect(() => {
+    setValidationState(isValid);
+  }, [isValid]);
+
+  // call function when validation state changes
+  useEffect(() => {
+    isFieldValid(validationState);
+  }, [validationState]);
+
+  // set Allow validation true if submit button clicked
+  useEffect(() => {
+    forceAllowValidation && setAllowValidation(true);
+  }, [forceAllowValidation]);
+  useMount(() => setValidationState(checkValidation(localValue).isValid));
+  return withRange ? /*#__PURE__*/React__default.createElement(DatePickerInput.WithRange, _extends({
+    ref: ref,
+    min: min,
+    max: max,
+    value: value,
+    isValid: !allowValidation || validationState,
+    onChange: handleChange,
+    format: format,
+    onClickOutside: onClickOutside,
+    withTime: withTime,
+    required: required,
+    onBlur: handleBlur
+  }, restProps)) : /*#__PURE__*/React__default.createElement(DatePickerInput, _extends({
+    ref: ref,
+    min: min,
+    max: max,
+    value: value,
+    isValid: !allowValidation || validationState,
+    onChange: handleChange,
+    format: format,
+    onClickOutside: onClickOutside,
+    required: required,
+    onBlur: handleBlur
+  }, restProps));
+});
+DatePicker.propTypes = {
+  /**
+   * Value for date picker
+   */
+  value: propTypesExports.oneOfType([propTypesExports.object, propTypesExports.arrayOf(propTypesExports.object)]),
+  /**
+   * Callback fires when date changes
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Callback fires when input blur
+   */
+  onBlur: propTypesExports.func,
+  /**
+   * Define is field required or no.
+   */
+  required: propTypesExports.bool,
+  /**
+   * Define is range picker with time or no
+   */
+  withTime: propTypesExports.bool,
+  /**
+   * Define is single date picker or with range
+   */
+  withRange: propTypesExports.bool,
+  /**
+   * Callback fires when field validation state changes
+   */
+  isFieldValid: propTypesExports.func,
+  /**
+   * Additional validation state
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Minimum date value
+   */
+  min: propTypesExports.string,
+  /**
+   * Maximum date value
+   */
+  max: propTypesExports.string,
+  /**
+   * Date format
+   */
+  format: propTypesExports.string,
+  /**
+   * Allow validation without onBlur, validate field when mount
+   */
+  forceAllowValidation: propTypesExports.bool
+};
+DatePicker.defaultProps = {
+  isValid: true,
+  onBlur: noop,
+  isFieldValid: noop
+};
+
+export { DatePicker as default };

package/ValidatableDropdown.js

@@ -0,0 +1,99 @@
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-e0af0caf.js';
+import './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import './index-ac59cb10.js';
+export { D as default } from './index-0cf65939.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './Editor.js';
+import './index-6ff23041.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './Button.js';
+import './Icon.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './useKeyDown-38102ae7.js';
+import './BusyLoader.js';
+import './Image.js';
+import './Empty.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tabs.js';
+import './Steps.js';
+import './index-a4635754.js';
+import './Portal.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './Menu.js';
+import './Option.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Paper.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';

package/ValidatableElements.js

@@ -0,0 +1,99 @@
+export { b as MultiSelectDropdownField, D as ValidatableDropdown } from './index-0cf65939.js';
+export { default as ValidatableEditor } from './Editor.js';
+export { default as ValidatableUploader } from './ValidatableUploader.js';
+export { default as ValidatableRadio } from './ValidatableRadio.js';
+export { default as ValidatableCheckbox } from './ValidatableCheckbox.js';
+export { default as ValidatableSwitcher } from './ValidatableSwitcher.js';
+export { default as ValidatableNumberInput } from './ValidatableNumberInput.js';
+export { default as ValidatableTextInput } from './ValidatableTextInput.js';
+export { default as ValidatableDatePicker } from './ValidatableDatePicker.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-e0af0caf.js';
+import './index-ac59cb10.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './configs-91c86664.js';
+import './index-d9e8a888.js';
+import './index-6ff23041.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './useWindowSize-80369d76.js';
+import './Button.js';
+import './Icon.js';
+import './useKeyDown-38102ae7.js';
+import './BusyLoader.js';
+import './Image.js';
+import './Empty.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './useDeviceType-dd51db38.js';
+import './GeneUIProvider.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './useEllipsisDetection-ef536015.js';
+import './Switcher.js';
+import './Tabs.js';
+import './Steps.js';
+import './debounce-4419bc2f.js';
+import './index-a4635754.js';
+import './index-122432cd.js';
+import './Portal.js';
+import './Timeline.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './Card.js';
+import './MobilePopup.js';
+import './Menu.js';
+import './Option.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './useMount-6fef51a5.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Paper.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';
+import './checkTimeValidation-e56771be.js';

package/ValidatableMultiSelectDropdown.js

@@ -0,0 +1,99 @@
+import './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import 'react';
+import './index-e0af0caf.js';
+import './useMount-6fef51a5.js';
+import './configs-91c86664.js';
+import './index-ac59cb10.js';
+export { b as default } from './index-0cf65939.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './Editor.js';
+import './index-6ff23041.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './Button.js';
+import './Icon.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './ValidatableUploader.js';
+import './index-d9e8a888.js';
+import './Grid.js';
+import './useWidth-9f4647f8.js';
+import './useKeyDown-38102ae7.js';
+import './BusyLoader.js';
+import './Image.js';
+import './Empty.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+import './Checkbox.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './ExtendedInput.js';
+import './index-5cea9a7d.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './ValidatableRadio.js';
+import './RadioGroup.js';
+import './Radio.js';
+import './ValidatableCheckbox.js';
+import './ValidatableSwitcher.js';
+import './Switcher.js';
+import './ValidatableNumberInput.js';
+import './ValidatableTextInput.js';
+import './ValidatableDatePicker.js';
+import './index-5e722d91.js';
+import './index-702bf24a.js';
+import './index-122432cd.js';
+import './debounce-4419bc2f.js';
+import './DatePicker.js';
+import './localization-4ba17032.js';
+import './checkTimeValidation-e56771be.js';
+import './useEllipsisDetection-ef536015.js';
+import './Tabs.js';
+import './Steps.js';
+import './index-a4635754.js';
+import './Portal.js';
+import './Timeline.js';
+import './Card.js';
+import './MobilePopup.js';
+import './Menu.js';
+import './Option.js';
+import './SkeletonLoader.js';
+import './KeyValue.js';
+import './configs.js';
+import './Tag.js';
+import './Alert.js';
+import './index-00fe8887.js';
+import './rangeAndSlider-20599da4.js';
+import './Slider.js';
+import './Pagination.js';
+import './Divider.js';
+import './objectWithoutPropertiesLoose-299691d8.js';
+import './clsx.m-2bb6df4b.js';
+import './index-a59530cd.js';
+import './Notification.js';
+import './Modal.js';
+import './Collapse.js';
+import './Status.js';
+import './Avatar.js';
+import './Search.js';
+import './TextLink.js';
+import './Label.js';
+import './Paper.js';
+import './Badge.js';
+import './Time.js';
+import './Title.js';
+import './index-b7a33c58.js';
+import './QRCode.js';
+import './Progress.js';
+import './MobileNavigation.js';
+import './Products.js';
+import './Breadcrumb.js';
+import './Section.js';
+import './ColorPicker.js';
+import './NavigationMenu.js';
+import './Textarea.js';
+import './AdvancedSearch.js';
+import './LinkButton.js';