@prefect9/ui/components/Checkbox/Group.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.promise.js");
require("core-js/modules/es.string.includes.js");
require("core-js/modules/es.string.trim.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("@prefect9/is-type");
var _jsxRuntime = require("react/jsx-runtime");
const CheckboxesGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
  let {
    children,
    label,
    onChange,
    className: userClassName,
    multi
  } = _ref;
  const [value, setValue] = (0, _react.useState)(multi === true ? [] : null);
  const initedChildren = (0, _react.useRef)(null);
  const childrenArray = (0, _react.useMemo)(() => _react.Children.toArray(children), [children]);
  const checkboxes = (0, _react.useMemo)(() => {
    if (!initedChildren || initedChildren.current === undefined) return;
    const result = [];
    const values = [];
    for (let child of childrenArray) {
      const childValue = child.props.value;
      if (!(0, _isType.isStr)(childValue)) throw new Error('Checkbox in group must have value');
      if (values.includes(childValue)) throw new Error('Checkbox value is duplicate');
      result.push({
        value: childValue,
        element: child,
        checked: child.props.checked
      });
    }
    initedChildren.current = true;
    return result;
  }, [initedChildren, childrenArray]);
  const changeMultiHandler = (0, _react.useCallback)((newValues, byUser) => {
    if (!(0, _isType.isArr)(newValues)) throw new Error('For multi values must be array');
    const validValues = [];
    for (let newValue of newValues) {
      const found = checkboxes.find(checkbox => checkbox.value === newValue);
      if (!found) continue;
      validValues.push(newValue);
    }
    setValue(validValues);
    if ((0, _isType.isFunc)(onChange) && byUser) onChange(validValues);
  }, [checkboxes, onChange]);
  const changeHandler = (0, _react.useCallback)(function (newValue) {
    let byUser = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    if (multi) return changeMultiHandler(newValue, byUser);
    const found = checkboxes.find(checkbox => checkbox.value === newValue);
    if (!found) newValue = null;
    setValue(newValue);
    if ((0, _isType.isFunc)(onChange) && byUser) onChange(newValue);
  }, [checkboxes, onChange, changeMultiHandler]);
  const checkboxClickHandler = (0, _react.useCallback)(clickedValue => {
    if (multi === true) {
      const newValue = [];
      let found = false;
      for (let valueItem of value) {
        if (valueItem === clickedValue) found = true;else newValue.push(valueItem);
      }
      if (!found) newValue.push(clickedValue);
      changeHandler(newValue, true);
    } else changeHandler(clickedValue, true);
  }, [value, changeHandler]);
  (0, _react.useLayoutEffect)(() => {
    if (!ref || ref.current === undefined) return;
    ref.current = {
      setValue: changeHandler
    };
  }, [ref, changeHandler]);
  const checkboxesContent = (0, _react.useMemo)(() => {
    const result = [];
    for (let index in checkboxes) {
      const checkbox = checkboxes[index];
      const isChecked = multi === true ? value.includes(checkbox.value) : value === checkbox.value;
      result.push( /*#__PURE__*/(0, _react.cloneElement)(checkbox.element, {
        key: index,
        checked: isChecked,
        onChange: () => checkboxClickHandler(checkbox.value)
      }));
    }
    return result;
  }, [checkboxes, value, checkboxClickHandler]);
  const initedDefaultValue = (0, _react.useRef)(null);
  (0, _react.useLayoutEffect)(() => {
    if (!initedChildren || initedChildren.current !== true) return;
    if (!initedDefaultValue || initedDefaultValue.current === undefined || initedDefaultValue.current === true) return;
    let defaultValue = multi === true ? [] : null;
    for (let checkbox of checkboxes) {
      if (checkbox.checked === true) {
        if (multi === true) defaultValue.push(checkbox.value);else {
          defaultValue = checkbox.value;
          break;
        }
      }
    }
    initedDefaultValue.current = true;
    changeHandler(defaultValue, true);
  }, [initedChildren, initedDefaultValue, checkboxes, changeHandler]);
  const className = (0, _react.useMemo)(() => {
    const result = ['prefect9-checkboxes'];
    if ((0, _isType.isStr)(userClassName) && userClassName.length) result.push(userClassName.trim());
    return result.join(' ');
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: className,
    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "prefect9-field__label",
      children: label
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "prefect9-checkboxes__container",
      children: checkboxesContent
    })]
  });
});
var _default = exports.default = CheckboxesGroup;