@vtex/styleguide/lib/EXPERIMENTAL_useCheckboxTree/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.checkboxesPropTypes = undefined;
exports.default = useCheckboxTree;

var _react = require("react");

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _isEmpty = require("lodash/isEmpty");

var _isEmpty2 = _interopRequireDefault(_isEmpty);

var _util = require("./util");

var _constants = require("./constants");

var _reducer = require("./reducer");

var _reducer2 = _interopRequireDefault(_reducer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function useCheckboxTree(_ref) {
  var items = _ref.items,
      onToggle = _ref.onToggle,
      _ref$nodesKey = _ref.nodesKey,
      nodesKey = _ref$nodesKey === void 0 ? 'children' : _ref$nodesKey,
      _ref$checked = _ref.checked,
      checked = _ref$checked === void 0 ? [] : _ref$checked,
      _ref$comparator = _ref.comparator,
      comparator = _ref$comparator === void 0 ? _constants.defaultComparatorCurry : _ref$comparator,
      _ref$isDisabled = _ref.isDisabled,
      isDisabled = _ref$isDisabled === void 0 ? function (_) {
    return false;
  } : _ref$isDisabled;

  var _useReducer = (0, _react.useReducer)(_reducer2.default, checked),
      checkedItems = _useReducer[0],
      dispatch = _useReducer[1];

  var _useState = (0, _react.useState)(null),
      lastToggledItem = _useState[0],
      setLastToggledItem = _useState[1];

  var itemTree = (0, _react.useMemo)(function () {
    var _ref2;

    return _ref2 = {}, _ref2[_constants.ROOT_KEY] = _constants.ROOT_VALUE, _ref2[nodesKey] = items, _ref2;
  }, [items, nodesKey]);
  var disabledItems = (0, _react.useMemo)(function () {
    return (0, _util.getFlat)(itemTree).filter(isDisabled);
  }, [isDisabled, itemTree]);
  var toggle = (0, _react.useCallback)(function (item) {
    if (!isDisabled(item)) {
      dispatch({
        type: _reducer.ActionType.Toggle,
        itemToToggle: {
          item: item,
          nodesKey: nodesKey,
          comparator: comparator
        },
        isDisabled: isDisabled
      });
      setLastToggledItem(item);
    }
  }, [comparator, isDisabled, nodesKey]);
  (0, _react.useEffect)(function () {
    onToggle && onToggle({
      checkedItems: checkedItems,
      disabledItems: disabledItems,
      item: lastToggledItem
    });
  }, [checkedItems, disabledItems, lastToggledItem, onToggle, toggle]);
  var toggleAll = (0, _react.useCallback)(function () {
    toggle(itemTree);
  }, [itemTree, toggle]);
  (0, _react.useEffect)(function () {
    var shake = function shake(tree) {
      var childNodes = tree[nodesKey];
      if (!childNodes || (0, _isEmpty2.default)(childNodes)) return;
      var rootChecked = checkedItems.some(comparator(tree));
      var enabledChildNodes = childNodes.filter(function (childNode) {
        return !isDisabled(childNode);
      });

      if (enabledChildNodes.length === 0) {
        if (rootChecked) {
          dispatch({
            type: _reducer.ActionType.Uncheck,
            itemToToggle: {
              item: tree,
              comparator: comparator
            }
          });
        }

        return;
      }

      var childrenChecked = enabledChildNodes.every(function (childNode) {
        return checkedItems.some(comparator(childNode));
      });
      if (childrenChecked && !rootChecked && !isDisabled(tree)) dispatch({
        type: _reducer.ActionType.Check,
        item: tree
      });
      if (!childrenChecked && rootChecked) dispatch({
        type: _reducer.ActionType.Uncheck,
        itemToToggle: {
          item: tree,
          comparator: comparator
        }
      });
      childNodes.forEach(shake);
    };

    shake(itemTree);
  }, [checkedItems, toggle, itemTree, nodesKey, comparator, isDisabled]);
  var isChecked = (0, _react.useCallback)(function (item) {
    var children = item[nodesKey];

    var onCheckedList = function onCheckedList(item) {
      return checkedItems.some(comparator(item));
    };

    var notDisabled = function notDisabled(item) {
      return !isDisabled(item);
    };

    var notDisabledChildren = children && children.filter(notDisabled);
    var notEmpty = !!notDisabledChildren && !(0, _isEmpty2.default)(notDisabledChildren);
    return notEmpty ? notDisabledChildren.every(onCheckedList) : checkedItems.some(comparator(item));
  }, [checkedItems, comparator, isDisabled, nodesKey]);
  var isPartiallyChecked = (0, _react.useCallback)(function (item) {
    return !isDisabled(item) && item[nodesKey] && (0, _util.getFlat)(item, [], nodesKey).slice(1).some(function (child) {
      return checkedItems.some(comparator(child));
    });
  }, [checkedItems, comparator, isDisabled, nodesKey]);
  var allChecked = (0, _react.useMemo)(function () {
    return isChecked(itemTree);
  }, [isChecked, itemTree]);
  var someChecked = (0, _react.useMemo)(function () {
    return checkedItems.length > 0;
  }, [checkedItems]);
  var allDisabled = (0, _react.useMemo)(function () {
    return isDisabled(itemTree);
  }, [isDisabled, itemTree]);

  var check = function check(item) {
    if (!isDisabled(item)) dispatch({
      type: _reducer.ActionType.BulkCheck,
      itemToToggle: {
        item: item,
        comparator: comparator,
        nodesKey: nodesKey
      },
      isDisabled: isDisabled
    });
  };

  var checkAll = function checkAll() {
    return check(itemTree);
  };

  var uncheck = (0, _react.useCallback)(function (item) {
    if (!isDisabled(item)) dispatch({
      type: _reducer.ActionType.BulkUncheck,
      itemToToggle: {
        item: item,
        comparator: comparator,
        nodesKey: nodesKey
      }
    });
  }, [comparator, isDisabled, nodesKey]);
  var uncheckAll = (0, _react.useCallback)(function () {
    uncheck(itemTree);
  }, [itemTree, uncheck]);

  var setChecked = function setChecked(checked) {
    dispatch({
      type: _reducer.ActionType.SetChecked,
      checked: checked
    });
  };

  return {
    checkedItems: checkedItems,
    isChecked: isChecked,
    allChecked: allChecked,
    allDisabled: allDisabled,
    someChecked: someChecked,
    isPartiallyChecked: isPartiallyChecked,
    itemTree: itemTree,
    toggle: toggle,
    toggleAll: toggleAll,
    check: check,
    checkAll: checkAll,
    uncheck: uncheck,
    uncheckAll: uncheckAll,
    isDisabled: isDisabled,
    disabledItems: disabledItems,
    setChecked: setChecked,
    lastToggledItem: lastToggledItem
  };
}

var checkboxesPropTypes = exports.checkboxesPropTypes = {
  checkboxes: _propTypes2.default.shape({
    checkedItems: _propTypes2.default.arrayOf(_propTypes2.default.shape({
      id: _propTypes2.default.string
    })),
    itemTree: _propTypes2.default.shape({
      id: _propTypes2.default.string
    }),
    toggle: _propTypes2.default.func,
    isChecked: _propTypes2.default.func,
    isPartiallyChecked: _propTypes2.default.func
  })
};