@carbon/ibm-products 2.0.0-rc.8 → 2.0.0

package/lib/components/AddSelect/AddSelectColumn.js

@@ -1,279 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AddSelectColumn = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react2 = require("@carbon/react");
-
-var _icons = require("@carbon/react/icons");
-
-var _settings = require("../../settings");
-
-var _AddSelectList = require("./AddSelectList");
-
-var _AddSelectSort = require("./AddSelectSort");
-
-var _addSelectUtils = require("./add-select-utils");
-
-var _useItemSort2 = require("./hooks/useItemSort");
-
-var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-
-var _useParentSelect2 = _interopRequireDefault(require("./hooks/useParentSelect"));
-
-var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
-var colClass = "".concat(blockClass, "__column");
-var componentName = 'AddSelectColumn';
-
-var AddSelectColumn = function AddSelectColumn(_ref) {
-  var columnInputPlaceholder = _ref.columnInputPlaceholder,
-      filterByLabel = _ref.filterByLabel,
-      header = _ref.header,
-      items = _ref.items,
-      multiSelection = _ref.multiSelection,
-      parentId = _ref.parentId,
-      path = _ref.path,
-      setMultiSelection = _ref.setMultiSelection,
-      setPath = _ref.setPath,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var carbonPrefix = (0, _react2.usePrefix)();
-
-  var _useParentSelect = (0, _useParentSelect2.default)(),
-      parentSelected = _useParentSelect.parentSelected,
-      setParentSelected = _useParentSelect.setParentSelected;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      searchTerm = _useState2[0],
-      setSearchTerm = _useState2[1];
-
-  var _useItemSort = (0, _useItemSort2.useItemSort)(),
-      sortDirection = _useItemSort.sortDirection,
-      setSortDirection = _useItemSort.setSortDirection,
-      sortAttribute = _useItemSort.sortAttribute,
-      setSortAttribute = _useItemSort.setSortAttribute;
-
-  var _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      filters = _useState4[0],
-      setFilters = _useState4[1];
-
-  var entries = items.entries,
-      filterBy = items.filterBy,
-      sortBy = items.sortBy;
-
-  var getSelectedItem = function getSelectedItem() {
-    var _entries$find;
-
-    var parentInPath = path.find(function (entry) {
-      return entry.parentId === parentId;
-    });
-    /**
-     * this check helps ensure that when the state of the open columns is cleared by global search
-     * that the columns are rebuilt from the data in the path array
-     */
-
-    if (parentInPath && !parentSelected) {
-      return entries.find(function (item) {
-        return item.id === parentInPath.id;
-      });
-    }
-
-    return (_entries$find = entries.find(function (item) {
-      return item.id === parentSelected;
-    })) !== null && _entries$find !== void 0 ? _entries$find : null;
-  };
-
-  var selectedItem = getSelectedItem();
-  /**
-   * this check helps prevent children from already being open when you switch from parents
-   * on the same level. for example- using the storybook example, if you click on folder 1,
-   * file 1, folder 2, and then folder 1 again file 1 children shouldn't be expanded. this
-   * check ensures that when a user navigates to parents on the same level that the open state
-   * of their children is cleared by referencing the path array.
-   */
-
-  var itemInPath = selectedItem && path.find(function (entry) {
-    return entry.id === selectedItem.id;
-  });
-  var allSelected = entries.every(function (item) {
-    return multiSelection.includes(item.id);
-  }); // filtering
-
-  var filterByOpts = filterBy ? entries.map(function (item) {
-    return item[filterBy];
-  }) : [];
-
-  var selectAllHandler = function selectAllHandler(event, _ref2) {
-    var checked = _ref2.checked;
-    var itemIds = entries.map(function (item) {
-      return item.id;
-    });
-
-    if (checked) {
-      var newSelections = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(multiSelection), (0, _toConsumableArray2.default)(itemIds))));
-      setMultiSelection(newSelections);
-    } else {
-      var newItems = multiSelection.filter(function (i) {
-        return !itemIds.includes(i);
-      });
-      setMultiSelection(newItems);
-    }
-  };
-
-  var filterHandler = function filterHandler(checked, opt) {
-    if (checked) {
-      var newFilters = [].concat((0, _toConsumableArray2.default)(filters), [opt]);
-      setFilters(newFilters);
-    } else {
-      var _newFilters = filters.filter(function (o) {
-        return o !== opt;
-      });
-
-      setFilters(_newFilters);
-    }
-  }; // filter and sort array functions
-
-
-  var filterBySearch = function filterBySearch(item) {
-    return item.title.toLowerCase().includes(searchTerm);
-  };
-
-  var filterByAttribute = function filterByAttribute(item) {
-    if (filters.length === 0) {
-      return true;
-    }
-
-    var filterBy = item.filterBy;
-    var filterByValue = item[filterBy];
-    return filters.some(function (filter) {
-      return filter === filterByValue;
-    });
-  };
-
-  var sortFn = (0, _addSelectUtils.sortItems)(sortAttribute, sortDirection);
-  var colItems = entries.filter(filterBySearch) // first check if the item meets the search
-  .filter(filterByAttribute) // then check if the item is included in the filter
-  .sort(sortFn); // then sort the items by whatever criteria
-
-  var parentSelectionHandler = function parentSelectionHandler(id, title) {
-    setParentSelected(id);
-    setPath(id, title, parentId);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: colClass
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(colClass, "-search-bar")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Search, {
-    value: searchTerm,
-    onChange: function onChange(e) {
-      return setSearchTerm(e.target.value);
-    },
-    placeholder: columnInputPlaceholder,
-    className: "".concat(colClass, "-input"),
-    id: (0, _uuidv.default)(),
-    labelText: columnInputPlaceholder,
-    size: "md"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(colClass, "-sort-filter")
-  }, /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {
-    items: entries,
-    setSortAttribute: setSortAttribute,
-    setSortDirection: setSortDirection,
-    sortAttribute: sortAttribute,
-    sortDirection: sortDirection,
-    sortBy: sortBy
-  }), filterByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
-        size: 32
-      }, props));
-    },
-    className: "".concat(colClass, "-overflow"),
-    flipped: true,
-    ariaLabel: filterByLabel
-  }, filterByOpts.map(function (opt) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: opt,
-      className: "".concat(carbonPrefix, "--overflow-menu-options__option")
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(carbonPrefix, "--overflow-menu-options__btn")
-    }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-      id: opt,
-      labelText: opt,
-      onChange: function onChange(event, _ref3) {
-        var checked = _ref3.checked;
-        return filterHandler(checked, opt);
-      },
-      checked: filters.find(function (o) {
-        return o === opt;
-      }) ? true : false
-    })));
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__tag-container")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
-    id: "".concat((0, _uuidv.default)(), "-select-all"),
-    className: "".concat(colClass, "__select-all"),
-    checked: allSelected,
-    onChange: selectAllHandler,
-    labelText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(blockClass, "__tag-container-label")
-    }, header), /*#__PURE__*/_react.default.createElement(_react2.Tag, {
-      type: "gray",
-      size: "sm"
-    }, colItems.length))
-  })), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
-    filteredItems: colItems,
-    setMultiSelection: setMultiSelection,
-    multiSelection: multiSelection,
-    setParentSelected: parentSelectionHandler
-  }))), selectedItem && itemInPath && /*#__PURE__*/_react.default.createElement(AddSelectColumn, (0, _extends2.default)({
-    columnInputPlaceholder: columnInputPlaceholder,
-    header: selectedItem.title,
-    items: selectedItem.children,
-    multiSelection: multiSelection,
-    setMultiSelection: setMultiSelection,
-    parentId: selectedItem.id,
-    setPath: setPath,
-    path: path
-  }, props)));
-};
-
-exports.AddSelectColumn = AddSelectColumn;
-AddSelectColumn.propTypes = {
-  columnInputPlaceholder: _propTypes.default.string,
-  filterByLabel: _propTypes.default.string,
-  header: _propTypes.default.string,
-  items: _propTypes.default.object,
-  multiSelection: _propTypes.default.array,
-  parentId: _propTypes.default.string,
-  path: _propTypes.default.array,
-  setMultiSelection: _propTypes.default.func,
-  setPath: _propTypes.default.func
-};
-AddSelectColumn.displayName = componentName;

package/lib/components/AddSelect/AddSelectFilter.js

@@ -1,203 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AddSelectFilter = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@carbon/react");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _icons = require("@carbon/react/icons");
-
-var _settings = require("../../settings");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var blockClass = "".concat(_settings.pkg.prefix, "--add-select__global-filter");
-var componentName = 'AddSelectFilter';
-
-var AddSelectFilter = function AddSelectFilter(_ref) {
-  var appliedFilters = _ref.appliedFilters,
-      clearFiltersText = _ref.clearFiltersText,
-      filterOpts = _ref.filterOpts,
-      handleFilter = _ref.handleFilter,
-      handleSearch = _ref.handleSearch,
-      hasFiltersApplied = _ref.hasFiltersApplied,
-      iconDescription = _ref.iconDescription,
-      inputLabel = _ref.inputLabel,
-      inputPlaceholder = _ref.inputPlaceholder,
-      multi = _ref.multi,
-      placeholder = _ref.placeholder,
-      primaryButtonText = _ref.primaryButtonText,
-      searchTerm = _ref.searchTerm,
-      secondaryButtonText = _ref.secondaryButtonText;
-
-  var _useState = (0, _react.useState)({}),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      filters = _useState2[0],
-      setFilters = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      open = _useState4[0],
-      setOpen = _useState4[1];
-
-  var searchHandler = function searchHandler(e) {
-    handleSearch(e.target.value);
-  };
-
-  var onchangeHandler = function onchangeHandler(_ref2, id) {
-    var selectedItem = _ref2.selectedItem;
-    setFilters(_objectSpread(_objectSpread({}, filters), {}, (0, _defineProperty2.default)({}, id, selectedItem)));
-  };
-  /**
-   * this component needs to manage it's own internal state of filters before they're applied
-   * setFilters manages the local filter state
-   * applyFilters adds the filter state to the parent
-   * resetFilters resets the local state
-   * clearFilters resets both
-   */
-
-
-  var applyFilters = function applyFilters() {
-    setOpen(false);
-    handleFilter(filters);
-  };
-
-  var resetFilters = function resetFilters() {
-    setFilters({});
-  };
-
-  var clearFilters = function clearFilters() {
-    resetFilters();
-    handleFilter({});
-  };
-
-  var removeTag = function removeTag(key) {
-    var newFilters = _objectSpread({}, filters);
-
-    delete newFilters[key];
-    setFilters(newFilters);
-    handleFilter(newFilters);
-  };
-
-  var getSelectedItem = function getSelectedItem(id) {
-    return filters[id] || '';
-  };
-
-  var showFilter = multi && (filterOpts === null || filterOpts === void 0 ? void 0 : filterOpts.length) > 0;
-  var filterBtnClassnames = (0, _classnames.default)("".concat(blockClass, "-toggle"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-toggle--open"), open));
-  var dirtyInput = Object.keys(filters).length > 0;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "-search")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Search, {
-    id: "temp-id",
-    labelText: inputLabel,
-    placeholder: inputPlaceholder,
-    value: searchTerm,
-    onChange: searchHandler
-  }), showFilter && /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
-        size: 16
-      }, props));
-    },
-    hasIconOnly: true,
-    kind: "ghost",
-    onClick: function onClick() {
-      return setOpen(!open);
-    },
-    iconDescription: iconDescription,
-    className: filterBtnClassnames,
-    size: "lg",
-    tooltipPosition: "left"
-  }), open && /*#__PURE__*/_react.default.createElement("div", {
-    className: blockClass
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "-content")
-  }, /*#__PURE__*/_react.default.createElement("p", null, "Filters"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "-opts")
-  }, filterOpts.map(function (filterOpts) {
-    return /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
-      id: filterOpts.id,
-      key: filterOpts.id,
-      titleText: filterOpts.label,
-      items: filterOpts.opts,
-      light: true,
-      onChange: function onChange(value) {
-        return onchangeHandler(value, filterOpts.id);
-      },
-      selectedItem: getSelectedItem(filterOpts.id),
-      label: placeholder
-    });
-  }))), /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, {
-    className: "".concat(blockClass, "-button-set")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    kind: "secondary",
-    onClick: resetFilters,
-    className: "".concat(blockClass, "-button"),
-    disabled: !dirtyInput
-  }, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    kind: "primary",
-    onClick: applyFilters,
-    className: "".concat(blockClass, "-button"),
-    disabled: !dirtyInput && !hasFiltersApplied
-  }, primaryButtonText)))), hasFiltersApplied && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "-applied")
-  }, Object.keys(appliedFilters).map(function (filterType) {
-    return /*#__PURE__*/_react.default.createElement(_react2.Tag, {
-      key: filterType,
-      type: "gray",
-      size: "sm",
-      onClose: function onClose() {
-        return removeTag(filterType);
-      },
-      filter: true
-    }, "".concat(filterType, ": ").concat(appliedFilters[filterType]));
-  }), /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    kind: "ghost",
-    size: "sm",
-    onClick: clearFilters
-  }, clearFiltersText)));
-};
-
-exports.AddSelectFilter = AddSelectFilter;
-AddSelectFilter.propTypes = {
-  appliedFilters: _propTypes.default.object,
-  clearFiltersText: _propTypes.default.string,
-  filterOpts: _propTypes.default.array,
-  handleFilter: _propTypes.default.func,
-  handleSearch: _propTypes.default.func,
-  hasFiltersApplied: _propTypes.default.bool,
-  iconDescription: _propTypes.default.string,
-  inputLabel: _propTypes.default.string.isRequired,
-  inputPlaceholder: _propTypes.default.string,
-  multi: _propTypes.default.bool,
-  placeholder: _propTypes.default.string,
-  primaryButtonText: _propTypes.default.string,
-  searchTerm: _propTypes.default.string,
-  secondaryButtonText: _propTypes.default.string
-};
-AddSelectFilter.displayName = componentName;