@geneui/components/ValidatableMultiSelectDropdown/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 useMount from '../hooks/useMount.js';
import '../configs-00612ce0.js';
import { n as noop } from '../index-a0e4e333.js';
import { D as Dropdown } from '../index-9d8d0112.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../objectWithoutPropertiesLoose-d8a4a68c.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-4d997d5d.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-08898b29.js';
import '../index-122432cd.js';
import '../Scrollbar/index.js';
import '../GeneUIProvider/index.js';
import '../debounce-4419bc2f.js';
import '../index-6d7e99cd.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-0cbb1102.js';
import '../Tag/index.js';

function checkValidation(required, isValid, value, min, max) {
  const length = value === null || value === void 0 ? void 0 : value.length;
  if (isValid === false) return {
    key: 'customValidation',
    isValid: false
  };
  if (!length && required) return {
    key: 'required',
    isValid: false
  };
  if (min && length < min) return {
    key: 'min',
    isValid: false
  };
  if (max && length > max) return {
    key: 'max',
    isValid: false
  };
  return {
    key: null,
    isValid: true
  };
}
const MultiSelectDropdownField = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    onChange,
    value,
    isValid,
    required,
    min,
    max,
    isFieldValid,
    valueKey,
    forceAllowValidation,
    ...restProps
  } = props;
  const isControlled = 'value' in props && typeof value !== 'undefined';
  const [val, setVal] = useState(value || []);
  const [validationState, setValidationState] = useState(true);
  const [allowValidation, setAllowValidation] = useState(false);
  const validate = useCallback(() => checkValidation(required, isValid, val, min, max).isValid, [required, isValid, val, min, max]);
  const handleChange = useCallback(e => {
    const validation = checkValidation(required, isValid, e, min, max);
    setValidationState(validation.isValid);
    setVal(e.map(item => item[valueKey]));
    onChange && onChange(e, validation.isValid, validation.key);
  }, [required, isValid, min, max, onChange, 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, []).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,
    isMultiSelect: true,
    isValid: !allowValidation || validationState,
    onChange: handleChange,
    onBlur: onBlur,
    valueKey: valueKey,
    onClear: onClear
  }, restProps));
});
MultiSelectDropdownField.propTypes = {
  min: PropTypes.number,
  max: PropTypes.number,
  valueKey: PropTypes.string,
  value: PropTypes.any,
  onChange: PropTypes.func,
  required: PropTypes.bool,
  readOnly: PropTypes.bool,
  isValid: PropTypes.bool,
  forceAllowValidation: PropTypes.bool,
  isFieldValid: PropTypes.func
};
MultiSelectDropdownField.defaultProps = {
  required: false,
  readOnly: false,
  isFieldValid: noop,
  valueKey: 'value'
};

export { MultiSelectDropdownField as default };