impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/FiltersStrip/appliedFilter.js

@@ -1,180 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Badge } from "../Badge";
-import { Button } from "../Button";
-import { Input } from "../Input";
-import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
-
-export default function AppliedFilters(props) {
-  const {
-    selectedFilter,
-    setSelectedFilter,
-    recentFilters,
-    savedFiltersBadge,
-    savedFilterLists,
-    handleApplyFilter,
-    handleCancelFilter,
-    handleBadgeChange,
-    setShowDropDown,
-    selectedBadge,
-    setSelectedBadge,
-    tempSelectedFilter,
-    setTempSelectedFilter,
-    selectedFilterOnApply,
-    setSelectedFilterOnApply,
-  } = props;
-  const [savedLists, setSavedLists] = useState(savedFilterLists);
-  const [searchInput, setSearchInput] = useState("");
-
-  useEffect(() => {
-    setSavedLists(savedFilterLists);
-  }, [savedFilterLists]);
-
-  const handleSearch = (event) => {
-    setSearchInput(event.target.value);
-    const searchTerm = event.target.value.trim().toUpperCase();
-    // Split the search term by spaces and create a regex for each word
-    const searchTerms = searchTerm.split(/\s+/).filter(Boolean); // Split by space and remove empty entries
-
-    if (searchTerms.length > 0) {
-      const searchResults = savedFilterLists.filter((option) => {
-        // Check if all words in searchTerms are present in option.label
-        return searchTerms.every((term) =>
-          new RegExp(term, "i").test(option.label)
-        );
-      });
-      setSavedLists([...searchResults]);
-    } else {
-      setSavedLists(savedFilterLists);
-    }
-  };
-
-  return (
-    <div className="impact-filter-dropdown-wrapper">
-      {recentFilters.length > 0 && (
-        <div className="impact-filter-dropdown-recent-container">
-          <div className="impact-filter-dropdown-label">Recent</div>
-          <div className="impact-filter-dropdown-recent-filters-wrapper">
-            {recentFilters.map((filter, index) => {
-              return (
-                <div
-                  key={index}
-                  className="impact-filter-dropdown-recent-filters"
-                  onClick={() => {
-                    filter.handleRecentFilter(filter);
-                    setShowDropDown(false);
-                  }}
-                >
-                  {filter.filterSet.slice(0, 2).map((fil, index) => (
-                    <span key={index}>
-                      {fil.label}
-                      {index === 0 && filter.filterSet.length > 1 && ", "}
-                    </span>
-                  ))}
-                  {filter.filterSet.length > 2 && ",..."}
-                </div>
-              );
-            })}
-          </div>
-          <div className="impact-notification-horizontal-separator" />
-        </div>
-      )}
-      <div className="impact-filter-dropdown-saved-container">
-        <div className="impact-filter-dropdown-label">Saved Filters</div>
-        <div className="impact-filter-dropdown-saved-filters-badge-wrapper">
-          {savedFiltersBadge.map((badge, index) => {
-            return (
-              <Badge
-                key={index}
-                color={selectedBadge === badge.label ? "info" : "default"}
-                label={badge.label}
-                onClick={() => {
-                  handleBadgeChange(badge);
-                  setSelectedBadge(badge.label);
-                }}
-                variant="stroke"
-              />
-            );
-          })}
-        </div>
-        {savedFilterLists.length > 0 ? (
-          <>
-            <div className="impact-filter-dropdown-saved-filters-search-wrapper">
-              <Input
-                value={searchInput}
-                placeholder="Search filters..."
-                onChange={handleSearch}
-                leftIcon={<SearchOutlinedIcon />}
-              />
-            </div>
-            <div className="impact-filter-dropdown-saved-filters-lists-wrapper">
-              {savedLists.length > 0 ? (
-                savedLists.map((list) => {
-                  return (
-                    <div
-                      key={list.value}
-                      className={`impact-filter-dropdown-saved-filters-list ${
-                        selectedFilterOnApply === list.label
-                          ? "filter-dropdown-selected-list"
-                          : ""
-                      }`}
-                      onClick={() => {
-                        setSelectedFilter(list.label);
-                        setSelectedFilterOnApply(list.label);
-                      }}
-                    >
-                      {list.label}
-                    </div>
-                  );
-                })
-              ) : (
-                <div className="impact-filter-dropdown-saved-filters-no-data">
-                  <span className="impact-filter-dropdown-saved-filters-no-data-text">
-                    {"No saved filters found"}
-                  </span>
-                </div>
-              )}
-            </div>
-          </>
-        ) : (
-          <div className="impact-filter-dropdown-saved-filters-no-data">
-            <span className="impact-filter-dropdown-saved-filters-no-data-text">
-              {"No saved filters found"}
-            </span>
-          </div>
-        )}
-      </div>
-      <div className="impact-filter-dropdown-action-wrapper">
-        <div className="impact-notification-horizontal-separator" />
-        <div className="impact-filter-dropdown-action-btns">
-          <Button
-            className=""
-            iconPlacement="left"
-            onClick={() => {
-              setSelectedFilterOnApply(tempSelectedFilter);
-              handleCancelFilter();
-              setShowDropDown(false);
-            }}
-            size="large"
-            variant="text"
-          >
-            Cancel
-          </Button>
-          <Button
-            className=""
-            iconPlacement="left"
-            onClick={() => {
-              setTempSelectedFilter(selectedFilterOnApply);
-              handleApplyFilter(selectedFilter);
-              setShowDropDown(false);
-            }}
-            size="large"
-            variant="primary"
-            disabled={savedLists.length === 0}
-          >
-            Apply Filter
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/FiltersStrip/filterDropDown.js

@@ -1,96 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Badge } from "../Badge";
-import AppliedFilters from "./appliedFilter";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-
-export default function FilterDropDown(props) {
-  const {
-    selectedFilter,
-    setSelectedFilter,
-    recentFilters,
-    savedFiltersBadge,
-    savedFilterLists,
-    handleApplyFilter,
-    handleCancelFilter,
-    handleBadgeChange,
-    hideSelectedFilterBadge,
-    savedFilterSelectedBadge,
-    handleSavedRecentFilterDropdown,
-    filterDropDownLabel = "Filters Applied",
-  } = props;
-  const [showDropDown, setShowDropDown] = useState(false);
-  const [selectedBadge, setSelectedBadge] = useState(savedFilterSelectedBadge);
-  const [tempSelectedFilter, setTempSelectedFilter] = useState(selectedFilter);
-  const [selectedFilterOnApply, setSelectedFilterOnApply] =
-    useState(selectedFilter);
-
-  const handleClickOutside = (event) => {
-    if (
-      showDropDown &&
-      !event?.target?.closest(".impact-filter-dropdown-container") &&
-      !event?.target?.closest(".impact-filter-dropdown-action-btns")
-    ) {
-      setShowDropDown(false);
-      setSelectedFilterOnApply(tempSelectedFilter);
-    }
-  };
-
-  useEffect(() => {
-    setTempSelectedFilter(selectedFilter);
-  }, [selectedFilter]);
-
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [showDropDown]);
-
-  return (
-    <div className="impact-filter-dropdown-container">
-      <div className="impact-filter-dropdown-label">{filterDropDownLabel}</div>
-      {!hideSelectedFilterBadge && (
-        <Badge
-          color="info"
-          label={tempSelectedFilter}
-          onClick={() => {}}
-          variant="stroke"
-        />
-      )}
-      {!hideSelectedFilterBadge && (
-        <div
-          className="impact-filter-dropdown-button"
-          style={{
-            transform: showDropDown ? "rotate(180deg)" : "rotate(0deg)",
-          }}
-          role="button"
-          onClick={() => {
-            setShowDropDown((prev) => !prev);
-            handleSavedRecentFilterDropdown();
-          }}
-        >
-          <KeyboardArrowDownIcon />
-        </div>
-      )}
-      {showDropDown && (
-        <AppliedFilters
-          selectedFilter={selectedFilter}
-          setSelectedFilter={setSelectedFilter}
-          recentFilters={recentFilters}
-          savedFilterLists={savedFilterLists}
-          savedFiltersBadge={savedFiltersBadge}
-          handleApplyFilter={handleApplyFilter}
-          handleCancelFilter={handleCancelFilter}
-          handleBadgeChange={handleBadgeChange}
-          setShowDropDown={setShowDropDown}
-          selectedBadge={selectedBadge}
-          setSelectedBadge={setSelectedBadge}
-          setTempSelectedFilter={setTempSelectedFilter}
-          tempSelectedFilter={tempSelectedFilter}
-          selectedFilterOnApply={selectedFilterOnApply}
-          setSelectedFilterOnApply={setSelectedFilterOnApply}
-        />
-      )}
-    </div>
-  );
-}

package/src/components/FiltersStrip/index.js

@@ -1,127 +0,0 @@
-import React, { useState, Fragment, useCallback } from "react";
-import FilterDropDown from "./filterDropDown";
-import { Button } from "../Button";
-import FilterListIcon from "@mui/icons-material/FilterList";
-import "./FiltersStrip.styles.scss";
-import FilterSlider from "./Slider";
-import { Tag } from "../Tag";
-
-export const FiltersStrip = (props) => {
-  const {
-    selectedFilter,
-    setSelectedFilter = () => {},
-    recentFilters = [],
-    savedFiltersBadge = [],
-    savedFilterLists = [],
-    filterTags = [],
-    handleBadgeChange = () => {},
-    handleApplyFilter,
-    handleCancelFilter,
-    filterButtonLabel = "All Filters",
-    filterButtonClick,
-    filterButtonProps,
-    hideSelectedFilterBadge = false,
-    savedFilterSelectedBadge = null,
-    handleSavedRecentFilterDropdown = () => {},
-    filterDropDownLabel,
-  } = props;
-  const [showSeparator, setShowSeparator] = useState(false);
-  const [currDropShow, setCurrDropShow] = useState(null);
-  const handleCurrDropSet = useCallback((val) => {
-    setCurrDropShow(val);
-  }, []);
-
-  const handleClick = (event) => {
-    // this is to not close the dropdown when clicking on the dropdown itself
-    if (!event?.target?.closest(".impact-selected-filter-tags-dropdown"))
-      setCurrDropShow(null);
-  };
-  return (
-    <div className="impact-info-panel-container">
-      <div className="impact-info-panel-left-container">
-        {(savedFilterLists || recentFilters) && (
-          <React.Fragment>
-            <FilterDropDown
-              selectedFilter={selectedFilter}
-              setSelectedFilter={setSelectedFilter}
-              recentFilters={recentFilters}
-              savedFilterLists={savedFilterLists}
-              savedFiltersBadge={savedFiltersBadge}
-              handleApplyFilter={handleApplyFilter}
-              handleCancelFilter={handleCancelFilter}
-              handleBadgeChange={handleBadgeChange}
-              hideSelectedFilterBadge={hideSelectedFilterBadge}
-              savedFilterSelectedBadge={savedFilterSelectedBadge}
-              handleSavedRecentFilterDropdown={handleSavedRecentFilterDropdown}
-              filterDropDownLabel={filterDropDownLabel}
-            />
-            {/* {!hideSelectedFilterBadge && ( */}
-            <span className="impact-filter-strip-separator" />
-            {/* )} */}
-          </React.Fragment>
-        )}
-        {filterTags.length > 0 && (
-          <FilterSlider
-            list={filterTags}
-            containerChildren={(item, index) => (
-              <>
-                {index != 0 && (
-                  <span className="impact-filter-strip-separator" />
-                )}
-                <div className="impact-selected-filter-label">
-                  {item.label}{" "}
-                  {item.required && <span style={{ color: "red" }}>*</span>}
-                </div>
-              </>
-            )}
-            tagsChildren={(item, index) => (
-              <Fragment>
-                {item.values.slice(0, 2).map((value, idx) => (
-                  <Tag
-                    key={idx}
-                    label={value.label}
-                    onDelete={() => {}}
-                    size="medium"
-                    variant="solid"
-                  />
-                ))}
-                {item.values.length > 2 && (
-                  <Tag
-                    label={`+${item.values.length - 2}`}
-                    onClick={() => {
-                      handleCurrDropSet(currDropShow === index ? null : index);
-                    }}
-                    size="medium"
-                    variant="solid"
-                  />
-                )}
-              </Fragment>
-            )}
-            setShowSeparator={setShowSeparator}
-            onNextClick={handleClick}
-            onPrevClick={handleClick}
-            currDropShow={currDropShow}
-            handleClickOutside={handleClick}
-          />
-        )}
-      </div>
-
-      {filterButtonLabel && (
-        <div className="impact-info-panel-right-container">
-          {showSeparator && <span className="impact-filter-strip-separator" />}
-          <Button
-            className=""
-            icon={<FilterListIcon fontSize="small" />}
-            iconPlacement="left"
-            onClick={filterButtonClick}
-            size="large"
-            variant="tertiary"
-            {...filterButtonProps}
-          >
-            {filterButtonLabel}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/FiltersStrip/mockData.js

@@ -1,227 +0,0 @@
-export const filterTags = [
-  {
-    id: 1,
-    label: "TimeLine",
-    required: true,
-    handleViewAll: (tag) => console.log("Selected Tag:", tag),
-    values: [
-      {
-        id: 1,
-        label: "LW",
-        //onClick
-      },
-      {
-        id: 1,
-        label: "Department 2",
-      },
-      {
-        id: 1,
-        label: "Department 3",
-      },
-      {
-        id: 1,
-        label: "Department 4",
-      },
-      {
-        id: 1,
-        label: "Department 5",
-      },
-      {
-        id: 1,
-        label: "Department 6",
-      },
-      {
-        id: 1,
-        label: "Department 7",
-      },
-    ],
-  },
-  {
-    id: 2,
-    label: "Compared to",
-    required: true,
-    handleViewAll: () => {},
-    values: [
-      {
-        id: 1,
-        label: "Plan",
-      },
-    ],
-  },
-  {
-    id: 3,
-    label: "Channel",
-    required: false,
-    handleViewAll: () => {},
-    values: [
-      {
-        id: 1,
-        label: "E-comm",
-      },
-    ],
-  },
-  {
-    id: 4,
-    label: "Department",
-    required: false,
-    handleViewAll: () => {},
-    values: [
-      {
-        id: 1,
-        label: "Department 1",
-      },
-      {
-        id: 1,
-        label: "Department 2",
-      },
-    ],
-  },
-  {
-    id: 5,
-    label: "Division",
-    required: false,
-    handleViewAll: () => {},
-    values: [
-      {
-        id: 1,
-        label: "Division 1",
-      },
-      {
-        id: 1,
-        label: "Division 2",
-      },
-    ],
-  },
-  {
-    id: 6,
-    label: "Department",
-    required: false,
-    handleViewAll: () => {},
-    values: [
-      {
-        id: 1,
-        label: "Department 1",
-      },
-      {
-        id: 1,
-        label: "Department 2",
-      },
-    ],
-  },
-  {
-    id: 7,
-    label: "Division",
-    required: false,
-    handleViewAll: () => {},
-    values: [
-      {
-        id: 1,
-        label: "Division 1",
-      },
-      {
-        id: 1,
-        label: "Division 2",
-      },
-    ],
-  },
-];
-
-export const recentFilters = [
-  {
-    id: 1,
-    handleRecentFilter: (filter) => console.log("Recent filter set:", filter),
-    filterSet: [
-      {
-        id: 1,
-        label: "Filter label_01",
-      },
-      {
-        id: 2,
-        label: "Filter label_02",
-      },
-      {
-        id: 3,
-        label: "Filter label_03",
-      },
-    ],
-  },
-  {
-    id: 2,
-    handleRecentFilter: (filter) => console.log("Recent filter set:", filter),
-    filterSet: [
-      {
-        id: 1,
-        label: "Filter label_01",
-      },
-      {
-        id: 2,
-        label: "Filter label_02",
-      },
-      {
-        id: 3,
-        label: "Filter label_03",
-      },
-    ],
-  },
-];
-
-export const savedFiltersBadge = [
-  {
-    id: 1,
-    label: "All",
-    handleClick: () => {},
-  },
-  {
-    id: 2,
-    label: "Global",
-    handleClick: () => {},
-  },
-  {
-    id: 1,
-    label: "Personal",
-    handleClick: () => {},
-  },
-];
-
-export const savedFilterLists = [
-  {
-    id: 1,
-    label: "Saved Filter_01",
-    value: "filter_01",
-  },
-  {
-    id: 2,
-    label: "Saved Filter_02",
-    value: "filter_02",
-  },
-  {
-    id: 3,
-    label: "Saved Filter_03",
-    value: "filter_03",
-  },
-  {
-    id: 4,
-    label: "Saved Filter_04",
-    value: "filter_04",
-  },
-  {
-    id: 5,
-    label: "Saved Filter_05",
-    value: "filter_05",
-  },
-  {
-    id: 6,
-    label: "Saved Filter_06",
-    value: "filter_06",
-  },
-  {
-    id: 7,
-    label: "Saved Filter_07",
-    value: "filter_07",
-  },
-  {
-    id: 8,
-    label: "Saved Filter_08",
-    value: "filter_08",
-  },
-];