@activecollab/components/dist/esm/components/Filter/Filter.js

ActiveCollab Components

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["id", "title", "submenu", "searchPlaceholder", "disableInternalSort", "isSingleSelect", "defaultValue", "type", "inputPlaceholder", "saveLabel", "clearLabel"];
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { MoveFocusInside } from "react-focus-lock";
import { InputSubmenu } from "./InputSubmenu";
import { StartMenu } from "./StartMenu";
import { StyledMenu, StyledMenuFooter } from "./Styles";
import { Submenu } from "./Submenu";
import { Button } from "../Button";
import { CounterButton } from "../CounterButton";
import { FilterIcon } from "../Icons";
import { Select } from "../Select";
import { ResizeTransition, SlideLeftRightTransition } from "../Transitions";
export const Filter = _ref => {
  let data = _ref.data,
    _ref$selected = _ref.selected,
    selected = _ref$selected === void 0 ? {} : _ref$selected,
    label = _ref.label,
    clearAllText = _ref.clearAllText,
    _ref$resetLabel = _ref.resetLabel,
    resetLabel = _ref$resetLabel === void 0 ? "Reset" : _ref$resetLabel,
    onChange = _ref.onChange,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? 260 : _ref$width,
    noResultText = _ref.noResultText,
    emptyFilterText = _ref.emptyFilterText,
    children = _ref.children,
    _ref$icon = _ref.icon,
    icon = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(FilterIcon, null) : _ref$icon,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? "bottom-end" : _ref$position,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    className = _ref.className;
  const _useState = useState(false),
    open = _useState[0],
    setOpen = _useState[1];
  const _useState2 = useState("index"),
    menu = _useState2[0],
    setMenu = _useState2[1];
  const _useState3 = useState(true),
    isLeft = _useState3[0],
    setIsLeft = _useState3[1];
  const _useState4 = useState(0),
    height = _useState4[0],
    setHeight = _useState4[1];
  const _useState5 = useState("index"),
    enteredMenu = _useState5[0],
    setEnteredMenu = _useState5[1];
  const _useState6 = useState(() => selected),
    filter = _useState6[0],
    setFilter = _useState6[1];
  useEffect(() => {
    if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {
      setFilter(selected);
    }
  }, [selected, filter]);
  const handleOpen = useCallback(() => {
    setOpen(true);
  }, []);
  const handleClose = useCallback(() => {
    setOpen(false);
    setMenu("index");
    setHeight(0);
  }, []);
  const handleHeight = useCallback(element => {
    var _element$offsetHeight;
    setHeight((_element$offsetHeight = element == null ? void 0 : element.offsetHeight) != null ? _element$offsetHeight : 0);
  }, []);
  const handleItemClick = useCallback(value => {
    setMenu(value);
    setIsLeft(true);
  }, []);
  const setIndex = useCallback(() => {
    setMenu("index");
    setIsLeft(false);
  }, []);
  const handleChange = useCallback(selectedArray => {
    let newFilters = {};
    if (selectedArray.length) {
      newFilters = _extends({}, filter, {
        [menu]: selectedArray
      });
    } else {
      newFilters = _extends({}, filter);
      delete newFilters[menu];
    }
    setFilter(newFilters);
    onChange(newFilters);
  }, [filter, menu, onChange]);
  const handleClearAll = useCallback(event => {
    event.stopPropagation();
    setFilter({});
    onChange({});
  }, [onChange]);
  const handleReset = useCallback(() => {
    const newFilters = _extends({}, filter);
    delete newFilters[menu];
    setFilter(newFilters);
    onChange(newFilters);
  }, [filter, menu, onChange]);
  const handleInputSave = useCallback((id, value) => {
    let newFilters = {};
    if (value.trim()) {
      newFilters = _extends({}, filter, {
        [id]: [value]
      });
    } else {
      newFilters = _extends({}, filter);
      delete newFilters[id];
    }
    setFilter(newFilters);
    onChange(newFilters);
    setIndex();
  }, [filter, onChange, setIndex]);
  const handleInputClear = useCallback(id => {
    const newFilters = _extends({}, filter);
    delete newFilters[id];
    setFilter(newFilters);
    onChange(newFilters);
    setIndex();
  }, [filter, onChange, setIndex]);
  const count = useMemo(() => {
    let c = 0;
    Object.values(filter).forEach(entry => {
      if (typeof entry === "string") {
        return c += 1;
      }
      return c += entry.length;
    });
    return c;
  }, [filter]);
  const shouldRenderSubmenus = useMemo(() => {
    if (data.length === 0) {
      return false;
    }
    for (const entry of data) {
      var _entry$submenu;
      if (entry.type === "input" || ((_entry$submenu = entry.submenu) == null ? void 0 : _entry$submenu.length) > 1) {
        return true;
      }
    }
    return false;
  }, [data]);
  return /*#__PURE__*/React.createElement(StyledMenu, {
    open: open,
    onOpen: handleOpen,
    onClose: handleClose,
    position: position,
    target: /*#__PURE__*/React.createElement(CounterButton, {
      active: open,
      label: label,
      icon: icon,
      counter: count,
      tooltipText: clearAllText,
      onClearAll: handleClearAll,
      disabled: disabled,
      labelClassName: className
    })
  }, /*#__PURE__*/React.createElement(ResizeTransition, {
    in: true
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height,
      width
    }
  }, /*#__PURE__*/React.createElement(SlideLeftRightTransition, {
    in: menu === "index",
    direction: isLeft ? "left" : "right",
    onEnter: handleHeight,
    onEntered: () => setEnteredMenu("index")
  }, /*#__PURE__*/React.createElement(MoveFocusInside, null, /*#__PURE__*/React.createElement(StartMenu, {
    data: data,
    selected: filter,
    style: {
      width
    },
    onHeightChange: setHeight,
    onItemClick: handleItemClick,
    shouldRenderSubmenus: shouldRenderSubmenus,
    emptyFilterText: emptyFilterText
  }, children))), shouldRenderSubmenus && data.map((_ref2, index) => {
    var _filter$id$, _filter$id, _filter$id2;
    let id = _ref2.id,
      title = _ref2.title,
      submenu = _ref2.submenu,
      searchPlaceholder = _ref2.searchPlaceholder,
      disableInternalSort = _ref2.disableInternalSort,
      isSingleSelect = _ref2.isSingleSelect,
      defaultValue = _ref2.defaultValue,
      _ref2$type = _ref2.type,
      submenuType = _ref2$type === void 0 ? "select" : _ref2$type,
      inputPlaceholder = _ref2.inputPlaceholder,
      _ref2$saveLabel = _ref2.saveLabel,
      saveLabel = _ref2$saveLabel === void 0 ? "Save" : _ref2$saveLabel,
      clearLabel = _ref2.clearLabel,
      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
    return /*#__PURE__*/React.createElement(SlideLeftRightTransition, {
      key: "filter-submenu-" + index,
      in: menu === id,
      direction: isLeft ? "left" : "right",
      onEnter: handleHeight,
      onEntered: () => setEnteredMenu(id)
    }, /*#__PURE__*/React.createElement(Submenu, {
      title: title,
      onBack: setIndex,
      onHeightChange: setHeight,
      style: {
        width
      },
      indexPage: menu === "index"
    }, /*#__PURE__*/React.createElement(MoveFocusInside, {
      disabled: enteredMenu !== id
    }, submenuType === "input" ? /*#__PURE__*/React.createElement(InputSubmenu, {
      value: (_filter$id$ = (_filter$id = filter[id]) == null ? void 0 : _filter$id[0]) != null ? _filter$id$ : "",
      placeholder: inputPlaceholder,
      saveLabel: saveLabel,
      clearLabel: clearLabel,
      onSave: value => handleInputSave(id, value),
      onClear: () => handleInputClear(id)
    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({
      options: submenu,
      selected: filter[id],
      onChange: handleChange,
      type: isSingleSelect ? "single" : "multiple",
      autoHeightMax: 255,
      placeholder: searchPlaceholder,
      noResultText: noResultText,
      keepSameOptionsOrder: Boolean(submenu.length <= 7),
      disableSearch: Boolean(submenu.length <= 7),
      disabledInternalSort: disableInternalSort,
      defaultValue: defaultValue
    }, rest)), (_filter$id2 = filter[id]) != null && _filter$id2.length ? /*#__PURE__*/React.createElement(StyledMenuFooter, null, /*#__PURE__*/React.createElement(Button, {
      variant: "text colored",
      size: "small",
      onClick: handleReset
    }, resetLabel)) : null))));
  }))));
};
//# sourceMappingURL=Filter.js.map