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

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { MoveFocusInside } from "react-focus-lock";
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,
    selected = {},
    label,
    clearAllText,
    resetLabel = "Reset",
    onChange,
    width = 260,
    noResultText,
    emptyFilterText,
    children,
    icon = /*#__PURE__*/React.createElement(FilterIcon, null),
    position = "bottom-end",
    disabled = false,
    className
  } = _ref;
  const [open, setOpen] = useState(false);
  const [menu, setMenu] = useState("index");
  const [isLeft, setIsLeft] = useState(true);
  const [height, setHeight] = useState(0);
  const [enteredMenu, setEnteredMenu] = useState("index");
  const [filter, setFilter] = useState(() => selected);
  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 = {
        ...filter,
        [menu]: selectedArray
      };
    } else {
      newFilters = {
        ...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 = {
      ...filter
    };
    delete newFilters[menu];
    setFilter(newFilters);
    onChange(newFilters);
  }, [filter, menu, onChange]);
  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$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;
    let {
      id,
      title,
      submenu,
      searchPlaceholder,
      disableInternalSort,
      isSingleSelect,
      defaultValue,
      ...rest
    } = _ref2;
    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
    }, /*#__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$id = filter[id]) != null && _filter$id.length ? /*#__PURE__*/React.createElement(StyledMenuFooter, null, /*#__PURE__*/React.createElement(Button, {
      variant: "text colored",
      size: "small",
      onClick: handleReset
    }, resetLabel)) : null)));
  }))));
};
//# sourceMappingURL=Filter.js.map