@geneui/components/ValidatableSwitcher/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { n as noop } from '../index-a0e4e333.js';
import useMount from '../hooks/useMount.js';
import '../configs-00612ce0.js';
import Switcher from '../Switcher/index.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../index-031ff73c.js';
import '../hooks/useKeyDown.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import '../style-inject.es-746bb8ed.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: PropTypes.func,
  required: PropTypes.bool,
  checked: PropTypes.bool,
  isFieldValid: PropTypes.func,
  isValid: PropTypes.bool,
  forceAllowValidation: PropTypes.bool
};
SwitcherElement.defaultProps = {
  isValid: true,
  isFieldValid: noop,
  onChange: noop
};

export { SwitcherElement as default };