@pantheon-systems/design-toolkit-react/dist/Forms/SelectAllGroup.js

Pantheon's React Design Toolkit

import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import hashSum from 'hash-sum';
import { useFormState, useFormApi } from 'informed';
import PropTypes from 'prop-types';
import { useState, useCallback, useEffect } from 'react';
import SelectAllCheckbox from './SelectAllCheckbox.js';
import { jsx } from 'react/jsx-runtime';

var setSelectAllField = function setSelectAllField(fieldId) {
  return hashSum("".concat(fieldId, "-select-all-field"));
};
var SelectAllGroup = function SelectAllGroup(_ref) {
  var fieldId = _ref.fieldId,
    selectAllLabel = _ref.selectAllLabel;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    checkState = _useState2[0],
    setCheckState = _useState2[1];
  var formState = useFormState();
  var formApi = useFormApi();
  var SELECT_ALL_FIELD = setSelectAllField(fieldId);

  /*
    Return true if the field isn't the select all field
  */
  var isFieldInGroup = useCallback(function (field) {
    return field !== SELECT_ALL_FIELD && field !== fieldId;
  }, [fieldId, SELECT_ALL_FIELD]);

  // formApi.emitter.fields is a Map & the only place to get fields not in state
  var allGroupFields = _toConsumableArray(formApi.emitter.fieldsById).reduce(function (arr, value) {
    if (isFieldInGroup(value[1].field)) {
      arr.push(value[1].field);
    }
    return arr;
  }, []);
  useEffect(function () {
    if (formState.values) {
      var selectedFields = Object.entries(formState.values).filter(function (_ref2) {
        var _ref3 = _slicedToArray(_ref2, 2),
          key = _ref3[0],
          isChecked = _ref3[1];
        return isFieldInGroup(key) && isChecked;
      });
      if (selectedFields.length === allGroupFields.length) {
        setCheckState(true);
      } else if (selectedFields.length) {
        setCheckState('mixed');
      } else {
        setCheckState(false);
      }
    }
  }, [allGroupFields.length, isFieldInGroup, formState]);
  var handleSelectAllChange = function handleSelectAllChange(e) {
    allGroupFields.forEach(function (field) {
      formApi.setValue(field, e.target.checked);
    });
  };
  return /*#__PURE__*/jsx(SelectAllCheckbox, {
    checkState: checkState,
    formApi: formApi,
    label: selectAllLabel,
    onChange: handleSelectAllChange,
    selectAllField: SELECT_ALL_FIELD
  });
};
SelectAllGroup.defaultProps = {
  selectAllLabel: 'Select All'
};
SelectAllGroup.propTypes = {
  fieldId: PropTypes.string.isRequired,
  selectAllLabel: PropTypes.string
};
var SelectAllGroup$1 = SelectAllGroup;

export { SelectAllGroup$1 as default, setSelectAllField };
//# sourceMappingURL=SelectAllGroup.js.map