@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

package/ValidatableCheckbox/index.js

@@ -1,123 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { n as noop, i as interceptValue } from '../index-5f37f281.js';
-import useMount from '../hooks/useMount.js';
-import '../configs-00612ce0.js';
-import Checkbox from '../Checkbox/index.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../index-031ff73c.js';
-import '../index-65217440.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-import '../style-inject.es-746bb8ed.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import '../guid-8ddf77b3.js';
-
-function checkValidation(required, isValid, checked) {
-  if (isValid === false) return {
-    key: 'customValidation',
-    isValid: false
-  };
-  if (required && !checked) return {
-    key: 'required',
-    isValid: false
-  };
-  return {
-    key: null,
-    isValid: true
-  };
-}
-const CheckboxField = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onChange,
-    value,
-    isValid,
-    required,
-    isFieldValid,
-    forceAllowValidation,
-    ...restProps
-  } = props;
-  const isControlled = 'value' in props && typeof value !== 'undefined';
-  const [validationState, setValidationState] = useState(true);
-  const [checked, setChecked] = useState(false);
-  const [allowValidation, setAllowValidation] = useState(false);
-  const validate = useCallback(() => checkValidation(required, isValid, checked).isValid, [checked, required, isValid]);
-  const handleChange = useCallback(e => {
-    const {
-      checked
-    } = e.target;
-    const {
-      isValid: isCheckboxValid,
-      key
-    } = checkValidation(required, isValid, checked);
-    setValidationState(isCheckboxValid);
-    setChecked(checked);
-    onChange(interceptValue(e, value), isCheckboxValid, key);
-  }, [onChange, required, isValid]);
-
-  // we use this because need to show field validation after onBlur
-  const onBlur = useCallback(() => setAllowValidation(true), []);
-  useEffect(() => {
-    isControlled && setValidationState(validate());
-  }, [isControlled, validate]);
-
-  // 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(validate()));
-  return /*#__PURE__*/React__default.createElement(Checkbox, _extends({
-    required: required,
-    ref: ref,
-    value: value,
-    isValid: !allowValidation || validationState,
-    onChange: handleChange,
-    onBlur: onBlur
-  }, restProps));
-});
-CheckboxField.propTypes = {
-  /**
-   * Value for checkbox
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  /**
-   * Callback fires when checkbox changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * Define is field required or no.
-   */
-  required: PropTypes.bool,
-  /**
-   * Callback fires when field validation state changes
-   */
-  isFieldValid: PropTypes.func,
-  /**
-   * Additional validation state
-   */
-  isValid: PropTypes.bool,
-  /**
-   * Allow validation without onBlur, validate field when mount
-   */
-  forceAllowValidation: PropTypes.bool
-};
-CheckboxField.defaultProps = {
-  isValid: true,
-  isFieldValid: noop,
-  onChange: noop
-};
-
-export { CheckboxField as default };

package/ValidatableDatePicker/index.js

@@ -1,316 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useCallback, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { n as noop } from '../index-5f37f281.js';
-import useMount from '../hooks/useMount.js';
-import '../configs-00612ce0.js';
-import DatePickerInput from '../DatePickerInput/index.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 '../_commonjsHelpers-24198af3.js';
-import '../style-inject.es-746bb8ed.js';
-import '../index-031ff73c.js';
-import '../hooks/useClick.js';
-import '../hooks/useKeyDown.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../index-73aaa093.js';
-import '../index-122432cd.js';
-import '../hooks/useClickOutside.js';
-import '../Scrollbar/index.js';
-import '../GeneUIProvider/index.js';
-import '../debounce-4419bc2f.js';
-import '../ExtendedInput/index.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../Icon/index.js';
-import '../SuggestionList/index.js';
-import '../config-1053d64d.js';
-import '../callAfterDelay-7272faca.js';
-import '../index-65217440.js';
-import '../tslib.es6-f211516f.js';
-import '../DatePicker/index.js';
-import '../guid-8ddf77b3.js';
-import '../Button/index.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: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
-  /**
-   * Callback fires when date changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * Callback fires when input blur
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Define is field required or no.
-   */
-  required: PropTypes.bool,
-  /**
-   * Define is range picker with time or no
-   */
-  withTime: PropTypes.bool,
-  /**
-   * Define is single date picker or with range
-   */
-  withRange: PropTypes.bool,
-  /**
-   * Callback fires when field validation state changes
-   */
-  isFieldValid: PropTypes.func,
-  /**
-   * Additional validation state
-   */
-  isValid: PropTypes.bool,
-  /**
-   * Minimum date value
-   */
-  min: PropTypes.string,
-  /**
-   * Maximum date value
-   */
-  max: PropTypes.string,
-  /**
-   * Date format
-   */
-  format: PropTypes.string,
-  /**
-   * Allow validation without onBlur, validate field when mount
-   */
-  forceAllowValidation: PropTypes.bool
-};
-DatePicker.defaultProps = {
-  isValid: true,
-  onBlur: noop,
-  isFieldValid: noop
-};
-
-export { DatePicker as default };

package/ValidatableDropdown/index.js

@@ -1,141 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import useMount from '../hooks/useMount.js';
-import '../configs-00612ce0.js';
-import { n as noop } from '../index-5f37f281.js';
-import { D as Dropdown } from '../index-480fd7d9.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../objectWithoutPropertiesLoose-e1596bdb.js';
-import '../react-lifecycles-compat.es-6e1f3768.js';
-import '../clsx.m-2bb6df4b.js';
-import '../index-031ff73c.js';
-import '../hooks/useClick.js';
-import '../hooks/useKeyDown.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../hooks/useClickOutside.js';
-import '../hooks/useUpdatableRef.js';
-import '../hooks/useForceUpdate.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../BusyLoader/index.js';
-import '../Icon/index.js';
-import '../style-inject.es-746bb8ed.js';
-import '../Empty/index.js';
-import '../tslib.es6-f211516f.js';
-import '../index-73aaa093.js';
-import '../index-122432cd.js';
-import '../Scrollbar/index.js';
-import '../GeneUIProvider/index.js';
-import '../debounce-4419bc2f.js';
-import '../index-65217440.js';
-import '../ExtendedInput/index.js';
-import '../SuggestionList/index.js';
-import '../config-1053d64d.js';
-import '../callAfterDelay-7272faca.js';
-import '../Checkbox/index.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import '../guid-8ddf77b3.js';
-import '../index-370f9acd.js';
-import '../Tag/index.js';
-
-function checkValidation(required, isValid, value) {
-  if (isValid === false) return {
-    key: 'customValidation',
-    isValid: false
-  };
-  if ((value === 'undefined' || value === null) && required) return {
-    key: 'required',
-    isValid: false
-  };
-  return {
-    key: null,
-    isValid: true
-  };
-}
-const DropdownField = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onChange,
-    value,
-    isValid,
-    required,
-    isFieldValid,
-    forceAllowValidation,
-    valueKey,
-    ...restProps
-  } = props;
-  const isControlled = 'value' in props && typeof value !== 'undefined';
-  const [val, setVal] = useState(value || null);
-  const [validationState, setValidationState] = useState(true);
-  const [allowValidation, setAllowValidation] = useState(false);
-  const validate = useCallback(() => checkValidation(required, isValid, val).isValid, [val, required, isValid]);
-  const handleChange = useCallback(param => {
-    const {
-      [valueKey]: value = null
-    } = param || {};
-    const validation = checkValidation(required, isValid, value);
-    setValidationState(validation.isValid);
-    setVal(value);
-    onChange(param, validation.isValid, validation.key);
-  }, [onChange, required, isValid, valueKey]);
-
-  // we use this because need to show field validation after onClose
-  const onBlur = useCallback(() => setAllowValidation(true), []);
-  const onClear = useCallback(() => {
-    const validState = checkValidation(required, isValid, null).isValid;
-    setValidationState(validState);
-  }, [required, isValid]);
-  useEffect(() => {
-    isControlled && setValidationState(validate());
-  }, [isControlled, validate]);
-  useEffect(() => {
-    setVal(value);
-  }, [value]);
-
-  // 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(validate()));
-  return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
-    required: required,
-    ref: ref,
-    value: val,
-    isValid: !allowValidation || validationState,
-    onChange: handleChange,
-    onBlur: onBlur,
-    onClear: onClear,
-    valueKey: valueKey
-  }, restProps));
-});
-DropdownField.propTypes = {
-  value: PropTypes.any,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  isValid: PropTypes.bool,
-  forceAllowValidation: PropTypes.bool,
-  isFieldValid: PropTypes.func
-};
-DropdownField.defaultProps = {
-  required: false,
-  readOnly: false,
-  valueKey: 'value',
-  isFieldValid: noop,
-  onChange: noop
-};
-
-export { DropdownField as default };

package/ValidatableElements/index.js

@@ -1,67 +0,0 @@
-export { default as ValidatableDropdown } from '../ValidatableDropdown/index.js';
-export { default as MultiSelectDropdownField } from '../ValidatableMultiSelectDropdown/index.js';
-export { default as ValidatableEditor } from '../Editor/index.js';
-export { default as ValidatableUploader } from '../ValidatableUploader/index.js';
-export { default as ValidatableRadio } from '../ValidatableRadio/index.js';
-export { default as ValidatableCheckbox } from '../ValidatableCheckbox/index.js';
-export { default as ValidatableSwitcher } from '../ValidatableSwitcher/index.js';
-export { default as ValidatableNumberInput } from '../ValidatableNumberInput/index.js';
-export { default as ValidatableTextInput } from '../ValidatableTextInput/index.js';
-export { default as ValidatableDatePicker } from '../ValidatableDatePicker/index.js';
-import '../_rollupPluginBabelHelpers-a83240e1.js';
-import 'react';
-import 'prop-types';
-import '../hooks/useMount.js';
-import '../index-5f37f281.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../configs-00612ce0.js';
-import '../index-480fd7d9.js';
-import '../objectWithoutPropertiesLoose-e1596bdb.js';
-import '../react-lifecycles-compat.es-6e1f3768.js';
-import '../clsx.m-2bb6df4b.js';
-import '../index-031ff73c.js';
-import '../hooks/useClick.js';
-import '../hooks/useKeyDown.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../hooks/useClickOutside.js';
-import '../hooks/useUpdatableRef.js';
-import '../hooks/useForceUpdate.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../BusyLoader/index.js';
-import '../Icon/index.js';
-import '../style-inject.es-746bb8ed.js';
-import '../Empty/index.js';
-import '../tslib.es6-f211516f.js';
-import '../index-73aaa093.js';
-import '../index-122432cd.js';
-import '../Scrollbar/index.js';
-import '../GeneUIProvider/index.js';
-import '../debounce-4419bc2f.js';
-import '../index-65217440.js';
-import '../ExtendedInput/index.js';
-import '../SuggestionList/index.js';
-import '../config-1053d64d.js';
-import '../callAfterDelay-7272faca.js';
-import '../Checkbox/index.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import '../guid-8ddf77b3.js';
-import '../index-370f9acd.js';
-import '../Tag/index.js';
-import '../index-45eafea6.js';
-import '../Button/index.js';
-import '../Uploader/index.js';
-import '../Grid/index.js';
-import '../hooks/useWidth.js';
-import '../hooks/useImgDownload.js';
-import '../Image/index.js';
-import '../RadioGroup/index.js';
-import '../Radio/index.js';
-import '../Switcher/index.js';
-import '../DatePickerInput/index.js';
-import '../DatePicker/index.js';
-import '../localization-4ba17032.js';
-import '../checkTimeValidation-e56771be.js';