@geneui/components 2.11.1

package/ValidatableNumberInput.js

@@ -0,0 +1,194 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useState, useCallback, 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 ExtendedInput from './ExtendedInput.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './index-6ff23041.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './index-5cea9a7d.js';
+import './useKeyDown-38102ae7.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './Icon.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+
+const validateMin = (value, min) => value >= min;
+const validateMax = (value, max) => value <= max;
+const validateFloat = (value, precisionMin, precisionMax) => {
+  const decimalPlaces = (value.split('.')[1] || []).length;
+  if (precisionMax && decimalPlaces > precisionMax) return false;
+  return true;
+};
+function checkValidation(required, isValid, min, max, numberType, precisionMin, precisionMax) {
+  let value = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : '';
+  const numberedValue = Number(value);
+  if (isValid === false) return {
+    key: 'customValidation',
+    isValid: false
+  };
+  if (numberType === 'integer' && !Number.isInteger(numberedValue)) return {
+    key: 'isInteger',
+    isValid: false
+  };
+  if (numberType === 'float' && !validateFloat(value, precisionMin, precisionMax)) return {
+    key: 'isFloat',
+    isValid: false
+  };
+  if (min != null && value && !validateMin(numberedValue, min)) return {
+    key: 'min',
+    isValid: false
+  };
+  if (max != null && value && !validateMax(numberedValue, max)) return {
+    key: 'max',
+    isValid: false
+  };
+  if (required && !value.length) return {
+    key: 'required',
+    isValid: false
+  };
+  return {
+    key: null,
+    isValid: true
+  };
+}
+const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onBlur,
+    required,
+    isValid,
+    numberType,
+    precisionMin,
+    precisionMax,
+    min,
+    max,
+    onChange,
+    value,
+    isFieldValid,
+    forceAllowValidation,
+    forceValidateDuringChange,
+    ...restProps
+  } = props;
+  const isControlled = 'value' in props && typeof value !== 'undefined';
+  const [validationState, setValidationState] = useState(true);
+  const [allowValidation, setAllowValidation] = useState(false);
+  const validate = useCallback(() => checkValidation(required, isValid, min, max, numberType, precisionMin, precisionMax, value || '').isValid, [required, isValid, min, max, value, numberType, precisionMin, precisionMax]);
+  const handleChange = useCallback(e => {
+    const {
+      value
+    } = e.target;
+    const validation = checkValidation(required, isValid, min, max, numberType, precisionMin, precisionMax, value);
+    setValidationState(validation.isValid);
+    onChange(e, validation.isValid, validation.key);
+    forceValidateDuringChange && setAllowValidation(true);
+  }, [onChange, min, max, required, isValid, numberType, precisionMin, precisionMax, forceValidateDuringChange]);
+
+  // we use this because need to show field validation after onBlur
+  const handleBlur = useCallback(e => {
+    onBlur(e);
+    setAllowValidation(true);
+  }, [onBlur]);
+  useEffect(() => {
+    isControlled && setValidationState(validate());
+  }, [isControlled, validate]);
+
+  // this for handling required prop changes
+  useEffect(() => {
+    setValidationState(validate());
+  }, [required]);
+
+  // 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(ExtendedInput, _extends({
+    min: min,
+    max: max,
+    ref: ref,
+    value: value,
+    isValid: !allowValidation || validationState,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    required: required,
+    type: "number"
+  }, restProps));
+});
+NumberInput.propTypes = {
+  /**
+   * Maximum value
+   */
+  min: propTypesExports.number,
+  /**
+   * Minimum value
+   */
+  max: propTypesExports.number,
+  /**
+   * Value for number field
+   */
+  value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number]),
+  /**
+   * Callback fires when field changes
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Callback fires when input loose focus
+   */
+  onBlur: propTypesExports.func,
+  /**
+   * Callback fires when field validation state changes
+   */
+  isFieldValid: propTypesExports.func,
+  /**
+   * Additional validation state
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Allow validation without onBlur, validate field when mount
+   */
+  forceAllowValidation: propTypesExports.bool,
+  /**
+   * Define number type
+   */
+  numberType: propTypesExports.oneOf(['integer', 'float']),
+  /**
+   * Precision minimum count
+   */
+  precisionMin: propTypesExports.number,
+  /**
+   * Precision maximum count
+   */
+  precisionMax: propTypesExports.number,
+  /**
+   * We use this props if we need to show validation of a field during onChange
+   */
+  forceValidateDuringChange: propTypesExports.bool
+};
+NumberInput.defaultProps = {
+  isValid: true,
+  precisionMin: 0,
+  isFieldValid: noop,
+  onChange: noop,
+  onBlur: noop
+};
+
+export { NumberInput as default };

package/ValidatableRadio.js

@@ -0,0 +1,117 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useState, useCallback, 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 RadioGroup from './RadioGroup.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './index-6ff23041.js';
+import './Radio.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+
+function checkValidation(required, isValid) {
+  let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  if (isValid === false) return {
+    key: 'customValidation',
+    isValid: false
+  };
+  if (required && (!value || value.length === 0)) return {
+    key: 'required',
+    isValid: false
+  };
+  return {
+    key: null,
+    isValid: true
+  };
+}
+const Radio = /*#__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 [allowValidation, setAllowValidation] = useState(false);
+  const validate = useCallback(() => checkValidation(required, isValid, value).isValid, [value, required, isValid]);
+  const handleChange = useCallback(e => {
+    const {
+      value
+    } = e.target;
+    const validation = checkValidation(required, isValid, value);
+    setValidationState(validation.isValid);
+    onChange(e, validation.isValid, validation.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(RadioGroup, _extends({
+    ref: ref,
+    value: value,
+    isValid: !allowValidation || validationState,
+    onChange: handleChange,
+    onBlur: onBlur
+  }, restProps));
+});
+Radio.propTypes = {
+  /**
+   * Value for radio field
+   */
+  value: propTypesExports.string,
+  /**
+   * Callback fires when radio field changes
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Define is field required or no.
+   */
+  required: propTypesExports.bool,
+  /**
+   * Callback fires when field validation state changes
+   */
+  isFieldValid: propTypesExports.func,
+  /**
+   * Additional validation state
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Allow validation without onBlur, validate field when mount
+   */
+  forceAllowValidation: propTypesExports.bool
+};
+Radio.defaultProps = {
+  isValid: true,
+  isFieldValid: noop,
+  onChange: noop
+};
+
+export { Radio as default };

package/ValidatableSwitcher.js

@@ -0,0 +1,94 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useState, useCallback, 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 Switcher from './Switcher.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './index-6ff23041.js';
+import './useKeyDown-38102ae7.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+
+function checkValidation(value, required, isValid) {
+  if (required && !value) return {
+    key: 'required',
+    isValid: false
+  };
+  if (isValid === false) return {
+    key: 'customValidation',
+    isValid: false
+  };
+  return {
+    key: null,
+    isValid: true
+  };
+}
+const SwitcherElement = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onChange,
+    isValid,
+    required,
+    isFieldValid,
+    forceAllowValidation,
+    ...restProps
+  } = props;
+  const isControlled = ('checked' in props);
+  const [validationState, setValidationState] = useState(true);
+  const [allowValidation, setAllowValidation] = useState(false);
+  const [value, setValue] = useState(false);
+  const localValue = isControlled ? props.checked : value;
+  const validate = useCallback(() => checkValidation(localValue, required, isValid).isValid, [localValue, required, isValid]);
+  const handleChange = useCallback(e => {
+    const validation = checkValidation(e.target.checked, required, isValid);
+    setAllowValidation(true);
+    !isControlled && setValidationState(validation.isValid);
+    setValue(e.target.checked);
+    onChange(e, validation.isValid, validation.key);
+  }, [required, isValid, isControlled, onChange]);
+  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(Switcher, _extends({
+    ref: ref,
+    isValid: !allowValidation || validationState,
+    onChange: handleChange,
+    required: required
+  }, restProps));
+});
+SwitcherElement.propTypes = {
+  onChange: propTypesExports.func,
+  required: propTypesExports.bool,
+  checked: propTypesExports.bool,
+  isFieldValid: propTypesExports.func,
+  isValid: propTypesExports.bool,
+  forceAllowValidation: propTypesExports.bool
+};
+SwitcherElement.defaultProps = {
+  isValid: true,
+  isFieldValid: noop,
+  onChange: noop
+};
+
+export { SwitcherElement as default };

package/ValidatableTextInput.js

@@ -0,0 +1,164 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useState, useCallback, 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 ExtendedInput from './ExtendedInput.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './index-6ff23041.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './index-5cea9a7d.js';
+import './useKeyDown-38102ae7.js';
+import './useClickOutside-5183e396.js';
+import './Scrollbar.js';
+import './globalStyling-9c60a159.js';
+import './style-inject.es-746bb8ed.js';
+import './Icon.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './GeneUIProvider.js';
+
+const emailRegExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+function checkValidation(required, isValid, maxLength, minLength, isEmail) {
+  let value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
+  const valueWithoutSpaces = value ? value.toString().trim() : value;
+  if (isValid === false) return {
+    key: 'customValidation',
+    isValid: false
+  };
+  if (minLength && valueWithoutSpaces.length <= minLength) return {
+    key: 'minLength',
+    isValid: false
+  };
+  if (maxLength && valueWithoutSpaces.length >= maxLength) return {
+    key: 'maxLength',
+    isValid: false
+  };
+  if (valueWithoutSpaces.length > 0 && isEmail && !emailRegExp.test(valueWithoutSpaces)) return {
+    key: 'isEmail',
+    isValid: false
+  };
+  if (required && valueWithoutSpaces.length === 0) return {
+    key: 'required',
+    isValid: false
+  };
+  return {
+    key: null,
+    isValid: true
+  };
+}
+const TextInput = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onChange,
+    value,
+    isValid,
+    onBlur,
+    required,
+    maxLength,
+    minLength,
+    isEmail,
+    isFieldValid,
+    forceAllowValidation,
+    defaultValue,
+    ...restProps
+  } = props;
+  const isControlled = 'value' in props && typeof value !== 'undefined';
+  const [validationState, setValidationState] = useState(true);
+  const [allowValidation, setAllowValidation] = useState(false);
+  const validate = useCallback(defaultValue => checkValidation(required, isValid, maxLength, minLength, isEmail, value || defaultValue).isValid, [value, required, isValid, maxLength, minLength, isEmail]);
+  const handleChange = useCallback(e => {
+    const {
+      value
+    } = e.target;
+    const validation = checkValidation(required, isValid, maxLength, minLength, isEmail, value);
+    setValidationState(validation.isValid);
+    onChange && onChange(e, validation.isValid, validation.key);
+  }, [onChange, required, isValid, maxLength, minLength, isEmail]);
+
+  // we use this because need to show field validation after onBlur
+  const handleBlur = useCallback(e => {
+    setAllowValidation(true);
+    onBlur(e);
+  }, [onBlur]);
+  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(defaultValue)));
+  return /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({}, restProps, {
+    ref: ref,
+    value: value,
+    isValid: !allowValidation || validationState,
+    onChange: handleChange,
+    required: required,
+    defaultValue: defaultValue,
+    onBlur: handleBlur
+  }));
+});
+TextInput.propTypes = {
+  /**
+   * Value for text input
+   */
+  value: propTypesExports.string,
+  /**
+   * Callback fires when field changes
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Callback fires when field blured
+   */
+  onBlur: propTypesExports.func,
+  /**
+   *  Define is field required or no.
+   */
+  required: propTypesExports.bool,
+  /**
+   * Is field accept only email or no
+   */
+  isEmail: propTypesExports.bool,
+  /**
+   * Maximum length of value
+   */
+  maxLength: propTypesExports.number,
+  /**
+   * Minimum length of value
+   */
+  minLength: propTypesExports.number,
+  /**
+   * Callback fires when field validation state changes
+   */
+  isFieldValid: propTypesExports.func,
+  /**
+   * Additional validation state
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Allow validation without onBlur, validate field when mount
+   */
+  forceAllowValidation: propTypesExports.bool
+};
+TextInput.defaultProps = {
+  isValid: true,
+  isFieldValid: noop,
+  onBlur: noop
+};
+
+export { TextInput as default };