impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Notification/NotificationBody/NotificationPanels/index.js

@@ -1,259 +0,0 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { Button } from "../../../Button";
-import { Input } from "../../../Input";
-import ChipsLists from "./chipsLists";
-import NotificationList from "./notificationList";
-import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
-import FilterListOutlinedIcon from "@mui/icons-material/FilterListOutlined";
-import { Badge } from "../../../Badge";
-
-export default function NotificationTaskList({
-  expand,
-  type,
-  listTypes,
-  notificationList,
-  handleSettingClick,
-  handleSelectAll,
-  handleMarkReadAll,
-  handleMoveAllPending,
-  moveToPendingDropdownOptions,
-  handleNotificationDeleteAll,
-  notificationPanels,
-  setNotificationPanels,
-  activeBadge,
-  filterChip,
-  handleApplyFilter,
-  isMultiSelectFilter,
-  showBadgeLoader,
-  showNotificationListLoader,
-  selectedFilterChip,
-  displayFormat,
-  onNotificationScrollToBottom,
-  scrollThreshold,
-  isWithSearch,
-  isChipsExpandable = false,
-  isHoverOnCard = false,
-  isDeleteAlwaysVisible = false,
-  isEmptyState,
-  emptyStateTitle,
-  emptyStateDescription,
-  customNotificationJsx,
-}) {
-  const [list, setList] = useState(listTypes || []);
-  const [currActiveListType, setCurrActiveListType] = useState(
-    activeBadge || listTypes.length > 0 ? listTypes[0].label : ""
-  );
-
-  // Set the list and currActiveListType when listTypes changes
-  useMemo(() => {
-    if (Array.isArray(listTypes)) {
-      setList(listTypes);
-      if (listTypes.length > 0)
-        setCurrActiveListType(activeBadge || listTypes[0].label);
-    }
-  }, [listTypes]);
-
-  const [notificationListItems, setNotificationListItems] = useState(
-    notificationList || []
-  );
-  const [expandList, setExpandList] = useState(isChipsExpandable);
-  const [searchExpand, setSearchExpand] = useState(false);
-  const [searchInput, setSearchInput] = useState("");
-  const [showFilter, setShowFilter] = useState(false);
-  const [selectedFilter, setSelectedFilter] = useState(
-    selectedFilterChip || (isMultiSelectFilter ? [] : {})
-  );
-
-  useEffect(() => {
-    setNotificationListItems(notificationList);
-  }, [notificationList]);
-  useEffect(() => {
-    setExpandList(isChipsExpandable);
-  }, [isChipsExpandable]);
-
-  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 = notificationList.filter((option) => {
-        // Check if all words in searchTerms are present in option.label
-        return searchTerms.every((term) =>
-          new RegExp(term, "i").test(option.label)
-        );
-      });
-      setNotificationListItems([...searchResults]);
-    } else {
-      setNotificationListItems(notificationList);
-    }
-  };
-
-  const handleClickOutside = (event) => {
-    if (
-      showFilter &&
-      !event.target.closest(".impact-notification-task-list-filter-container")
-    ) {
-      setShowFilter(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [showFilter]);
-
-  return (
-    <div
-      className={`impact-notification-task-list-container ${
-        isEmptyState ? "empty-state-container" : ""
-      }`}
-    >
-      <div
-        className="impact-notification-task-list-header"
-        style={{
-          justifyContent: list.length > 0 ? "space-between" : "flex-end",
-        }}
-      >
-        {list.length > 0 && (
-          <ChipsLists
-            list={list}
-            setList={setList}
-            list1={list.slice(0, 2)}
-            list2={list.slice(2)}
-            currActiveListType={currActiveListType}
-            setCurrActiveListType={setCurrActiveListType}
-            expandList={expandList}
-            setExpandList={setExpandList}
-            setSearchExpand={setSearchExpand}
-            activeBadge={activeBadge}
-            showBadgeLoader={showBadgeLoader}
-            notificationList={notificationListItems}
-          />
-        )}
-        <div className="impact-notification-task-list-actions">
-          {isWithSearch && (
-            <div
-              className={`impact-notification-task-list-search-container ${
-                searchExpand ? "search-expand" : ""
-              }`}
-            >
-              <Input
-                value={searchInput}
-                placeholder="Search notification..."
-                onChange={handleSearch}
-                autoFocus={searchExpand}
-                rightIcon={<SearchOutlinedIcon />}
-                rightIconClick={() => {
-                  if (expandList) {
-                    setExpandList(false);
-                  }
-                  setSearchExpand((prev) => !prev);
-                }}
-              />
-            </div>
-          )}
-          {handleSettingClick && (
-            <Button
-              icon={<FilterListOutlinedIcon />}
-              size="medium"
-              variant="text"
-              onClick={() => {
-                setShowFilter((prev) => !prev);
-                handleSettingClick();
-              }}
-            >
-              {filterChip?.length > 0 ? filterChip.length : null}
-            </Button>
-          )}
-          {showFilter && (
-            <div className="impact-notification-task-list-filter-container">
-              <div className="impact-notification-task-list-title">
-                <span className="impact-notification-task-list-title-text">
-                  Select Filter
-                </span>
-                <span className="impact-notification-task-list-title-text-sub">
-                  {isMultiSelectFilter ? "(Multi Select)" : "(Single Select)"}
-                </span>
-              </div>
-              <div className="impact-notification-task-list-filter-item">
-                {filterChip?.map((item) => (
-                  <div
-                    className={`impact-notification-task-list-filter-item-badge ${
-                      isMultiSelectFilter
-                        ? selectedFilter?.some(
-                            (filter) => filter.value === item.value
-                          )
-                          ? "selected"
-                          : ""
-                        : selectedFilter?.value === item?.value
-                        ? "selected"
-                        : ""
-                    }`}
-                    key={item.value}
-                  >
-                    <Badge
-                      key={item.value}
-                      label={item.label}
-                      onClick={() =>
-                        setSelectedFilter((prev) =>
-                          isMultiSelectFilter
-                            ? prev.some((el) => el.value === item.value)
-                              ? prev.filter(
-                                  (filter) => filter.value !== item.value
-                                )
-                              : [...prev, item]
-                            : prev === item
-                            ? null
-                            : item
-                        )
-                      }
-                      variant="subtle"
-                      color="default"
-                    />
-                  </div>
-                ))}
-              </div>
-              <Button
-                variant="url"
-                onClick={() => {
-                  handleApplyFilter(selectedFilter);
-                  setShowFilter(false);
-                }}
-              >
-                Apply
-              </Button>
-            </div>
-          )}
-        </div>
-      </div>
-      <NotificationList
-        expand={expand}
-        type={type}
-        title={currActiveListType}
-        notificationList={notificationListItems}
-        notificationPanels={notificationPanels}
-        setNotificationPanels={setNotificationPanels}
-        handleSelectAll={handleSelectAll}
-        handleMarkReadAll={handleMarkReadAll}
-        handleMoveAllPending={handleMoveAllPending}
-        moveToPendingDropdownOptions={moveToPendingDropdownOptions}
-        handleNotificationDeleteAll={handleNotificationDeleteAll}
-        showNotificationListLoader={showNotificationListLoader}
-        showBadgeLoader={showBadgeLoader}
-        displayFormat={displayFormat}
-        onNotificationScrollToBottom={onNotificationScrollToBottom}
-        scrollThreshold={scrollThreshold}
-        isHoverOnCard={isHoverOnCard}
-        isDeleteAlwaysVisible={isDeleteAlwaysVisible}
-        isEmptyState={isEmptyState}
-        emptyStateTitle={emptyStateTitle}
-        emptyStateDescription={emptyStateDescription}
-        customNotificationJsx={customNotificationJsx}
-      />
-    </div>
-  );
-}