impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Table/tableMoreOptions.js

@@ -1,293 +0,0 @@
-import React, { useState, useEffect } from "react";
-import tableSettingsIcon from "../../assets/tableSettingIcon.svg";
-import tableDensityIcon from "../../assets/compress.svg";
-import tableSortIcon from "../../assets/tableSortIcon.svg";
-import TableSettings from "./tableSettings";
-import CommentPanel from "./commentPanel";
-// import UnfoldLessDoubleIcon from "@mui/icons-material/UnfoldLessDouble";
-// import UnfoldMoreDoubleIcon from "@mui/icons-material/UnfoldMoreDouble";
-
-import { Button } from "../Button";
-export default function TableMoreOptions({
-  showMenu,
-  extraButtons,
-  hideRowHeightOptionMenu,
-  onRowHeightChange,
-  rowHeight,
-  isGroupRows,
-  actualRef,
-  Columns,
-  handleMenuClick,
-  tableFontSize,
-  setTableFontSize,
-  onNumberFormatChange,
-  colDefs,
-  setShowMenu,
-  showTableSetting,
-  setShowTableSetting,
-  setTableSettingOpen,
-  showHideEditableCells,
-  handleShowHideEditableCells,
-  tableActions,
-  onTableActionsTabClick,
-  showFilterStrip,
-  hideTableFormat,
-  hideTableActions,
-  explicitlyCloseTableSetting,
-  savedViewsOptions,
-  handleSaveAndApply,
-  maxSavedViews,
-  handleSavedViewClick,
-  handleEditSaveView,
-  isSaveViewEnabled,
-  isSavingViewLoading,
-  handleDeleteViewClick,
-  isDeleteViewLoading,
-  handleSetDefaultView,
-  hideFontSize,
-  hideNumericFormat,
-  onContentDensityChange,
-  customTabInTableSettings,
-  saveViewCustomFilter,
-  customRenderSaveViewContent,
-  onTableSettingClick,
-  deleteViewPromptText,
-  tableSettingsTitle,
-  registerTableSettingToggle,
-  numericFormatDefault,
-  onAdvanceSortClick,
-  advanceSortEnabled = true,
-}) {
-  const [showDensityMenu, setShowDensityMenu] = useState(false);
-  const [isExpand, setIsExpand] = useState(false);
-  const [showEditableCells, setShowEditableCells] = useState(false);
-
-  const handleDensityMenuOpen = (e) => {
-    e.stopPropagation();
-    setShowDensityMenu(!showDensityMenu);
-  };
-
-  const handleDensityMenuClose = () => {
-    setShowDensityMenu(false);
-  };
-
-  const handleTableSettingClick = () => {
-    setShowTableSetting(true);
-    setTableSettingOpen(true);
-    onTableSettingClick(true);
-  };
-
-  const handleClickOutside = (e) => {
-    if (showDensityMenu && !e.target.closest(".density-menu-container")) {
-      setShowDensityMenu(false);
-      setTableSettingOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [showDensityMenu]);
-
-  const handleChange = () => {
-    if (isExpand) {
-      actualRef.current.api.collapseAll();
-      setIsExpand(false);
-      actualRef.current.api.getModel().isExpand = false;
-    } else {
-      actualRef.current.api.expandAll();
-      setIsExpand(true);
-      actualRef.current.api.getModel().isExpand = true;
-    }
-  };
-
-  useEffect(() => {
-    setShowDensityMenu(false);
-    setShowMenu(false);
-  }, [explicitlyCloseTableSetting]);
-
-  useEffect(() => {
-    if (actualRef?.current?.api?.getModel()) {
-      actualRef.current.api.getModel().isTableSettingOpen = showTableSetting;
-    }
-  }, [showTableSetting]);
-
-  useEffect(() => {
-    setIsExpand(actualRef?.current?.api?.getModel()?.isExpand);
-  }, [actualRef?.current?.api?.getModel()?.isExpand]);
-
-  return (
-    <>
-      {!showTableSetting && (
-        <div
-          className={`table-more-options-container ${
-            showMenu ? "display-table-more-options" : ""
-          }`}
-        >
-          {extraButtons}
-          {extraButtons ? <div className="horizontal-line" /> : null}
-          <div className="table-option-footer-wrapper">
-            <div
-              className={`table-settings-container ${
-                !extraButtons
-                  ? "table-settings-container-without-extra-buttons"
-                  : ""
-              }`}
-              onClick={handleTableSettingClick}
-            >
-              <img src={tableSettingsIcon} alt="tableOptionButtonIcon" />
-              <span className="table-settings-text">Table Settings</span>
-            </div>
-            {!hideRowHeightOptionMenu && (
-              <div className="density-menu-wrapper">
-                <div
-                  className={`table-settings-container table-density-container ${
-                    showDensityMenu ? "density-menu-open" : ""
-                  }`}
-                  onClick={handleDensityMenuOpen}
-                >
-                  <span className="table-settings-text">Content density</span>
-                </div>
-                {showDensityMenu && (
-                  <div className="density-menu-container">
-                    <div
-                      className={`density-menu-item default_menu ${
-                        rowHeight === 46 ? "selected" : ""
-                      }`}
-                      onClick={() => {
-                        onRowHeightChange(46);
-                        handleDensityMenuClose();
-                        onContentDensityChange?.("default");
-                      }}
-                    >
-                      <span className="density-menu-item-text">Default</span>
-                    </div>
-                    <div
-                      className={`density-menu-item compact_menu ${
-                        rowHeight === 30 ? "selected" : ""
-                      }`}
-                      onClick={() => {
-                        onRowHeightChange(30);
-                        handleDensityMenuClose();
-                        onContentDensityChange?.("compact");
-                      }}
-                    >
-                      <span className="density-menu-item-text">Compact</span>
-                    </div>
-                    <div
-                      className={`density-menu-item comfort_menu ${
-                        rowHeight === 52 ? "selected" : ""
-                      }`}
-                      onClick={() => {
-                        onRowHeightChange(52);
-                        handleDensityMenuClose();
-                        onContentDensityChange?.("comfort");
-                      }}
-                    >
-                      <span className="density-menu-item-text">Comfort</span>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-            {advanceSortEnabled && onAdvanceSortClick && (
-              <div
-                className="table-settings-container"
-                onClick={() => {
-                  onAdvanceSortClick();
-                  setShowMenu(false);
-                }}
-              >
-                <img src={tableSortIcon} alt="advance sort" />
-                <span className="table-settings-text">Advance Sort</span>
-              </div>
-            )}
-            {showHideEditableCells ? (
-              <div className="show-hide-editable-cells-container">
-                <Button
-                  data-icon="show-hide-editable-cells"
-                  data-type="table-icon"
-                  variant="secondary"
-                  onClick={() => {
-                    setShowEditableCells(!showEditableCells);
-                    handleShowHideEditableCells();
-                  }}
-                  className={
-                    showEditableCells
-                      ? "show-editable-cells-icon"
-                      : "hide-editable-cells-icon"
-                  }
-                >
-                  {!showEditableCells
-                    ? "Hide editable cells"
-                    : "Show editable cells"}
-                </Button>
-              </div>
-            ) : null}
-            {isGroupRows ? (
-              <div className="group-row-container">
-                <Button
-                  data-icon="unfold-row-group"
-                  data-type="table-icon"
-                  variant="secondary"
-                  // icon={!isExpand ? <CollapseIcon /> : <ExpandIcon />}
-                  onClick={handleChange}
-                  className={isExpand ? "expand-icon" : "collapse-icon"}
-                >
-                  {!isExpand ? "Expand all rows" : "Collapse all rows"}
-                </Button>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      )}
-      <div
-        className={`${
-          showTableSetting ? "show-table-settings" : ""
-        } table-settings-wrapper`}
-      >
-        <TableSettings
-          showTableSetting={showTableSetting}
-          Columns={Columns}
-          actualRef={actualRef}
-          handleMenuClick={handleMenuClick}
-          tableFontSize={tableFontSize}
-          setTableFontSize={setTableFontSize}
-          onNumberFormatChange={onNumberFormatChange}
-          colDefs={colDefs}
-          setShowMenu={setShowMenu}
-          setShowTableSetting={setShowTableSetting}
-          showMenu={showMenu}
-          setTableSettingOpen={setTableSettingOpen}
-          tableActions={tableActions}
-          onTableActionsTabClick={onTableActionsTabClick}
-          showFilterStrip={showFilterStrip}
-          hideTableFormat={hideTableFormat}
-          hideTableActions={hideTableActions}
-          savedViewsOptions={savedViewsOptions}
-          handleSaveAndApply={handleSaveAndApply}
-          maxSavedViews={maxSavedViews}
-          handleSavedViewClick={handleSavedViewClick}
-          handleEditSaveView={handleEditSaveView}
-          isSaveViewEnabled={isSaveViewEnabled}
-          isSavingViewLoading={isSavingViewLoading}
-          handleDeleteViewClick={handleDeleteViewClick}
-          isDeleteViewLoading={isDeleteViewLoading}
-          handleSetDefaultView={handleSetDefaultView}
-          hideFontSize={hideFontSize}
-          hideNumericFormat={hideNumericFormat}
-          customTabInTableSettings={customTabInTableSettings}
-          saveViewCustomFilter={saveViewCustomFilter}
-          customRenderSaveViewContent={customRenderSaveViewContent}
-          onTableSettingClick={onTableSettingClick}
-          deleteViewPromptText={deleteViewPromptText}
-          tableSettingsTitle={tableSettingsTitle}
-          registerTableSettingToggle={registerTableSettingToggle}
-          numericFormatDefault={numericFormatDefault}
-        />
-      </div>
-    </>
-  );
-}

package/src/components/Table/tablePagination.js

@@ -1,63 +0,0 @@
-import React, { useState } from "react";
-import { Button } from "../Button";
-import { Menu } from "../Menu";
-import ExpandLess from "@mui/icons-material/ExpandLess";
-
-export default function TablePagination({
-  actualRef,
-  localPageSize,
-  setLocalPageSize,
-  paginationPageSizeSelector,
-}) {
-  const [paginationOptionsAnchorEl, setPaginationOptionsAnchorEl] =
-    useState(null);
-  const paginationOptionsOpen = Boolean(paginationOptionsAnchorEl);
-
-  const handlePageSizeClick = (e) => {
-    setPaginationOptionsAnchorEl(e.currentTarget);
-  };
-  const onPageSizeChange = (val) => {
-    setLocalPageSize(val);
-    actualRef?.current?.api?.paginationSetPageSize(val);
-    setPaginationOptionsAnchorEl(null);
-  };
-
-  return (
-    <div className="pagination-container">
-      <div className="select-button-container">
-        <Button
-          variant="secondary"
-          label={`${localPageSize} per page`}
-          onClick={handlePageSizeClick}
-          data-type="pagination-btn"
-          data-collapsed={!Boolean(paginationOptionsOpen)}
-          icon={<ExpandLess />}
-          iconPlacement="right"
-        >
-          <span className="ia-pageSize">{`${localPageSize} per page`}</span>
-        </Button>
-      </div>
-      <Menu
-        anchorEl={paginationOptionsAnchorEl}
-        open={paginationOptionsOpen}
-        onClose={() => {
-          setPaginationOptionsAnchorEl(null);
-        }}
-        selected={localPageSize}
-        options={paginationPageSizeSelector.map((opt) => ({
-          label: `${opt} per page`,
-          onClick: () => onPageSizeChange(opt),
-          value: opt,
-        }))}
-        anchorOrigin={{
-          vertical: "top",
-          horizontal: "center",
-        }}
-        transformOrigin={{
-          vertical: "bottom",
-          horizontal: "center",
-        }}
-      />
-    </div>
-  );
-}

package/src/components/Table/tableSettings.js

@@ -1,287 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Tabs } from "../Tabs";
-import { Button } from "../Button";
-import { RadioButtonGroup } from "../RadioButtonGroup";
-import { TableColsIcon, TableFormatIcon } from "./tableIcons";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import ViewColumnOutlinedIcon from "@mui/icons-material/ViewColumnOutlined";
-import FormatColorTextOutlinedIcon from "@mui/icons-material/FormatColorTextOutlined";
-
-export default function TableSettings({
-  showMenu,
-  Columns,
-  actualRef,
-  tableFontSize,
-  setTableFontSize,
-  handleMenuClick,
-  onNumberFormatChange,
-  colDefs,
-  setShowMenu,
-  showTableSetting,
-  setShowTableSetting,
-  setTableSettingOpen,
-  tableActions,
-  onTableActionsTabClick,
-  showFilterStrip,
-  hideTableFormat,
-  hideTableActions,
-  savedViewsOptions,
-  handleSaveAndApply,
-  maxSavedViews,
-  handleSavedViewClick,
-  handleEditSaveView,
-  isSaveViewEnabled,
-  isSavingViewLoading,
-  handleDeleteViewClick,
-  isDeleteViewLoading,
-  handleSetDefaultView,
-  hideNumericFormat,
-  hideFontSize,
-  customTabInTableSettings,
-  saveViewCustomFilter,
-  customRenderSaveViewContent,
-  onTableSettingClick,
-  deleteViewPromptText,
-  tableSettingsTitle = "Table Settings",
-  registerTableSettingToggle,
-  numericFormatDefault,
-}) {
-  const [selectedMenuTab, setSelectedMenuTab] = useState("Columns");
-
-  const [numericFormat, setNumericFormat] = useState(
-    numericFormatDefault || "full_no"
-  );
-  const onFontSizeChange = (val) => {
-    setTableFontSize(val);
-  };
-
-  const onNumericFormatChange = (val) => {
-    setNumericFormat(val);
-    onNumberFormatChange(val);
-  };
-
-  useEffect(() => {
-    setNumericFormat(numericFormatDefault);
-  }, [numericFormatDefault]);
-  //style={{ display: showMenu ? "block" : "none" }}
-
-  const tabPanels = [
-    <Columns
-      ref={actualRef}
-      column={colDefs}
-      showMenu={showMenu}
-      savedViewsOptions={savedViewsOptions}
-      handleSaveAndApply={handleSaveAndApply}
-      maxSavedViews={maxSavedViews}
-      handleSavedViewClick={handleSavedViewClick}
-      handleEditSaveView={handleEditSaveView}
-      isSaveViewEnabled={isSaveViewEnabled}
-      isSavingViewLoading={isSavingViewLoading}
-      handleDeleteViewClick={handleDeleteViewClick}
-      isDeleteViewLoading={isDeleteViewLoading}
-      handleSetDefaultView={handleSetDefaultView}
-      saveViewCustomFilter={saveViewCustomFilter}
-      customRenderSaveViewContent={customRenderSaveViewContent}
-      deleteViewPromptText={deleteViewPromptText}
-    />,
-    !hideTableFormat && (
-      <TableFormat
-        tableFontSize={tableFontSize}
-        onFontSizeChange={onFontSizeChange}
-        numericFormat={numericFormat}
-        onNumericFormatChange={onNumericFormatChange}
-        hideNumericFormat={hideNumericFormat}
-        hideFontSize={hideFontSize}
-      />
-    ),
-    !hideTableActions && <TableActions tableActions={tableActions} />,
-    ...(Array.isArray(customTabInTableSettings)
-      ? customTabInTableSettings.map((tab) => tab?.tabPanels)
-      : []),
-  ].filter(Boolean);
-
-  const tabNames = [
-    {
-      label: selectedMenuTab === "Columns" ? "Columns" : "",
-      value: "Columns",
-      icon: <ViewColumnOutlinedIcon fontSize="small" />,
-    },
-    !hideTableFormat && {
-      label: selectedMenuTab === "Format" ? "Format" : "",
-      value: "Format",
-      icon: <FormatColorTextOutlinedIcon fontSize="small" />,
-    },
-    !hideTableActions && {
-      label: selectedMenuTab === "Actions" ? "Actions" : "",
-      value: "Actions",
-      icon: <AutoFixHighIcon />,
-    },
-    ...(Array.isArray(customTabInTableSettings)
-      ? customTabInTableSettings.map((tab) => ({
-          ...tab.tabNames,
-          label:
-            selectedMenuTab === tab?.tabNames?.value
-              ? tab?.tabNames?.label
-              : "",
-        }))
-      : []),
-  ].filter(Boolean);
-
-  const onCloseTableSetting = (e) => {
-    setSelectedMenuTab("Columns");
-    setShowMenu(false);
-    setShowTableSetting(false);
-    setTableSettingOpen(false);
-    onTableSettingClick(false);
-  };
-
-  // Expose a toggle function to the parent through a registration prop.
-  // Parent can call the registered function as:
-  //   toggle(open?: boolean, tabName?: "Columns" | "Format" | "Actions" | string, options?: { menuOnly?: boolean })
-  // - If 'open' is undefined, it toggles based on current visibility.
-  // - If 'tabName' is provided while opening, the specified tab will be selected.
-  useEffect(() => {
-    if (typeof registerTableSettingToggle === "function") {
-      const toggle = (open, tabName, options = {}) => {
-        const shouldOpen =
-          typeof open === "undefined" ? !showTableSetting : Boolean(open);
-        if (shouldOpen) {
-          if (options?.menuOnly) {
-            setShowMenu(true);
-            // Do not open the full table settings panel in menuOnly mode
-          } else {
-            setShowMenu(true);
-            setShowTableSetting(true);
-            setTableSettingOpen(true);
-            if (tabName) {
-              setSelectedMenuTab(tabName);
-            }
-            onTableSettingClick(true);
-          }
-        } else {
-          if (options?.menuOnly) {
-            // Close only the menu, keep the table settings panel state unchanged
-            setShowMenu(false);
-          } else {
-            onCloseTableSetting();
-          }
-        }
-      };
-      registerTableSettingToggle(toggle);
-    }
-  }, [
-    registerTableSettingToggle,
-    showTableSetting,
-    setShowMenu,
-    setShowTableSetting,
-    setTableSettingOpen,
-    onTableSettingClick,
-  ]);
-
-  return (
-    <div
-      className={`table-setting-main-container ${
-        showTableSetting ? "display-table-setting" : ""
-      } ${showFilterStrip ? "filters-strip-visible" : ""}`}
-    >
-      <div className="table-setting-header">
-        <h2>{tableSettingsTitle}</h2>
-        <span
-          role="button"
-          className="close_icon"
-          onClick={onCloseTableSetting}
-        />
-      </div>
-      <Tabs
-        value={selectedMenuTab}
-        onChange={(_event, val) => {
-          setSelectedMenuTab(val);
-          if (val === "Actions") {
-            onTableActionsTabClick();
-          }
-        }}
-        tabPanels={tabPanels}
-        tabNames={tabNames}
-        remountOnTabChange={false}
-      />
-    </div>
-  );
-}
-
-const TableFormat = ({
-  tableFontSize,
-  onFontSizeChange,
-  numericFormat,
-  onNumericFormatChange,
-  hideNumericFormat,
-  hideFontSize,
-}) => {
-  return (
-    <div className="table-setting-format-settings">
-      {!hideFontSize && (
-        <div className="table-setting-font-size-setting-container">
-          <h3 className="custom-menu-sub-header">Font size</h3>
-          <RadioButtonGroup
-            value={tableFontSize}
-            onChange={(_e, val) => {
-              onFontSizeChange(val);
-            }}
-            options={[
-              {
-                label: "Small",
-                value: "small",
-              },
-              {
-                label: "Medium (default)",
-                value: "medium",
-              },
-              {
-                label: "Large",
-                value: "large",
-              },
-            ]}
-            selectedOption="medium"
-          />
-        </div>
-      )}
-      {!hideNumericFormat && (
-        <div className="table-setting-number-format-setting-container">
-          <h3 className="custom-menu-sub-header">Numeric Values</h3>
-          <RadioButtonGroup
-            value={numericFormat}
-            onChange={(_e, val) => {
-              onNumericFormatChange(val);
-            }}
-            options={[
-              {
-                label: "Full Number",
-                value: "full_no",
-              },
-              {
-                label: "In K (Thousands)",
-                value: "thou",
-              },
-              {
-                label: "In M (Millions)",
-                value: "mil",
-              },
-              {
-                label: "In B (Billions)",
-                value: "bil",
-              },
-            ]}
-            selectedOption="full_no"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-const TableActions = ({ tableActions }) => {
-  return (
-    <div className="table-setting-action-settings">
-      <div className="table-setting-action-container">{tableActions}</div>
-    </div>
-  );
-};