sag_components 2.0.0-beta28 → 2.0.0-beta280

package/dist/stories/components/ReportTable.js

@@ -1,420 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ReportTable = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
-var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
-var _SortIcon = require("./icons/SortIcon");
-var _LinkButton = _interopRequireDefault(require("./LinkButton"));
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
-var _ReportTable = require("./ReportTable.style");
-var _InfoIcon = require("./icons/InfoIcon");
-var _ChevronLeftIcon = require("./icons/ChevronLeftIcon");
-var _ChevronRightIcon = require("./icons/ChevronRightIcon");
-const ReportTable = props => {
-  const {
-    tableData,
-    maxColumnsNumber,
-    useColorLinearGradient,
-    useSelectButtons,
-    disableSelectButtons,
-    disableInfo,
-    selectTextColor,
-    onSelectRowClick,
-    onAllRowsCheckBoxClick,
-    onCheckRowClick,
-    buttonText,
-    enableHover,
-    enablePagination,
-    selectHoverColor,
-    buttonIconName,
-    useCheckBoxes,
-    width,
-    height,
-    className,
-    limit,
-    currentPage,
-    totalPages,
-    totalTableResults,
-    onPageChange,
-    isLoading,
-    onSortChangeCallback,
-    onSortReset
-  } = props;
-  const [FormattedTableData, setFormattedTableData] = (0, _react.useState)(tableData);
-  const [AllRowsChecked, setAllRowsChecked] = (0, _react.useState)(false);
-  const getPaginatedRows = () => {
-    return FormattedTableData.rowsValues;
-  };
-  const handlePageChange = newPage => {
-    onPageChange(newPage);
-  };
-  const getRecordRangeDisplay = () => {
-    const startRecord = (currentPage - 1) * limit + 1;
-    const endRecord = currentPage * limit;
-    const totalRecords = totalTableResults;
-    return `Showing ${startRecord}-${endRecord} of ${totalRecords}`;
-  };
-  (0, _react.useEffect)(() => {
-    var _newTableData$columns, _tableData$columnsHea, _newTableData$columns2, _tableData$rowsValues;
-    if (!tableData || !tableData.columnsHeadings || !tableData.rowsValues) {
-      return;
-    }
-    const newTableData = {
-      columnsHeadings: [],
-      rowsValues: []
-    };
-    if (useCheckBoxes && !((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === "checkbox" && item.key === "checkbox"))) {
-      newTableData.columnsHeadings.push({
-        label: "checkbox",
-        key: "checkbox"
-      });
-    }
-    tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea = tableData.columnsHeadings) === null || _tableData$columnsHea === void 0 ? void 0 : _tableData$columnsHea.forEach(item => {
-      newTableData.columnsHeadings.push(item);
-    });
-    if (useSelectButtons && !((_newTableData$columns2 = newTableData.columnsHeadings) !== null && _newTableData$columns2 !== void 0 && _newTableData$columns2.some(item => item.label === "button" && item.key === "button"))) {
-      newTableData.columnsHeadings.push({
-        label: "button",
-        key: "button"
-      });
-    }
-    const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map(item => useCheckBoxes ? {
-      checkbox: "checkbox",
-      ...item
-    } : item);
-    const newRowValuesStep2 = newRowValues === null || newRowValues === void 0 ? void 0 : newRowValues.map(item => useSelectButtons ? {
-      ...item,
-      button: "button"
-    } : item);
-    const newRowValuesStep3 = newRowValuesStep2 === null || newRowValuesStep2 === void 0 ? void 0 : newRowValuesStep2.map(item => useCheckBoxes ? {
-      ...item,
-      checkboxState: false
-    } : item);
-    const newRowValuesStep4 = newRowValuesStep3 === null || newRowValuesStep3 === void 0 ? void 0 : newRowValuesStep3.map((item, index) => ({
-      ...item
-    }));
-    newTableData.rowsValues = newRowValuesStep4;
-    setFormattedTableData(newTableData);
-  }, [tableData, useSelectButtons, useCheckBoxes]);
-  const columnsNumber = tableData.columnsHeadings.length;
-  const tableWidthSize = 100 / (useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber) * (useSelectButtons ? columnsNumber + 1 : columnsNumber);
-  const handleSelectButtonRowClick = row => {
-    const {
-      checkbox: propToRemove,
-      ...rest
-    } = row;
-    const {
-      button: propToRemove2,
-      ...rest2
-    } = rest;
-    const {
-      checkboxState: propToRemove3,
-      ...rest3
-    } = rest2;
-    onSelectRowClick(rest3);
-  };
-  const handleHeaderCheckBoxClick = () => {
-    var _FormattedTableData$r;
-    setAllRowsChecked(!AllRowsChecked);
-    const updatedTableHeaderRowsData = FormattedTableData === null || FormattedTableData === void 0 ? void 0 : (_FormattedTableData$r = FormattedTableData.rowsValues) === null || _FormattedTableData$r === void 0 ? void 0 : _FormattedTableData$r.map(item => ({
-      ...item,
-      checkboxState: !AllRowsChecked
-    }));
-    setFormattedTableData({
-      ...FormattedTableData,
-      rowsValues: updatedTableHeaderRowsData
-    });
-    onAllRowsCheckBoxClick({
-      AllRowsChecked: !AllRowsChecked
-    });
-  };
-  const handleRowCheckBoxClick = row => {
-    var _FormattedTableData$r2;
-    if (!row) return;
-    const updatedRow = {
-      ...row,
-      checkboxState: !(row !== null && row !== void 0 && row.checkboxState)
-    };
-    const updatedTableRowsData = FormattedTableData === null || FormattedTableData === void 0 ? void 0 : (_FormattedTableData$r2 = FormattedTableData.rowsValues) === null || _FormattedTableData$r2 === void 0 ? void 0 : _FormattedTableData$r2.map(item => item.index === row.index ? updatedRow : item);
-    setFormattedTableData({
-      ...FormattedTableData,
-      rowsValues: updatedTableRowsData
-    });
-    const {
-      checkbox: propToRemove,
-      ...rest
-    } = updatedRow;
-    const {
-      button: propToRemove2,
-      ...rest2
-    } = rest;
-    onCheckRowClick(rest2);
-  };
-  const displaySelectButton = rowData => /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
-    disabled: disableSelectButtons,
-    onClick: e => handleSelectButtonRowClick(rowData),
-    rightIcon: buttonIconName,
-    size: "medium",
-    text: buttonText || "Select",
-    textColor: selectTextColor
-  });
-  const displayCheckBox = (rowData, isHeader) => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxContainer, {
-    className: "SelectCheckboxContainer"
-  }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxSubContainer, {
-    className: "SelectCheckboxSubContainer",
-    selectTextColor: selectTextColor,
-    onClick: () => isHeader ? handleHeaderCheckBoxClick() : handleRowCheckBoxClick(rowData)
-  }, !isHeader && rowData !== null && rowData !== void 0 && rowData.checkboxState || isHeader && AllRowsChecked ? /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
-    className: "CheckBoxCheckedIcon",
-    width: "14px",
-    height: "14px",
-    color: selectTextColor
-  }) : /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
-    className: "CheckBoxNotCheckedIcon",
-    width: "14px",
-    height: "14px",
-    color: "#212121"
-  })));
-  const getMaxColnumber = () => {
-    let colNumber = maxColumnsNumber;
-    if (useSelectButtons) {
-      colNumber = +1;
-    }
-    if (useCheckBoxes) {
-      colNumber = +1;
-    }
-    return colNumber;
-  };
-  const getTooltipText = value => /*#__PURE__*/_react.default.createElement(_ReportTable.TooltipWrapper, null, value);
-  const truncateString = (str, maxLength) => {
-    let val = str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
-    return val;
-  };
-  const getTopFactor = ows => {
-    let topFactor;
-    switch (ows) {
-      case 1:
-        topFactor = 0.8;
-        break;
-      case 2:
-        topFactor = 1.3;
-        break;
-      case 3:
-        topFactor = 1.7;
-        break;
-      case 4:
-        topFactor = 2;
-        break;
-      case 5:
-        topFactor = 2.2;
-        break;
-      default:
-        topFactor = 0;
-    }
-    return topFactor;
-  };
-  const [activeSortState, setActiveSortState] = (0, _react.useState)({});
-  (0, _react.useEffect)(() => {
-    if (activeSortState) {
-      Object.entries(activeSortState).forEach(_ref => {
-        let [key, value] = _ref;
-        if (value === "asc" || value === "desc") {
-          onSortChangeCallback(key, value);
-        } else {
-          onSortReset();
-        }
-      });
-    }
-  }, [activeSortState]);
-  const handleButtonClick = columnKey => {
-    setActiveSortState(prevState => {
-      const currentSortState = prevState[columnKey] || "none";
-      const nextSortState = currentSortState === "none" ? "asc" : currentSortState === "asc" ? "desc" : "none";
-      const newState = {
-        [columnKey]: nextSortState
-      };
-      return newState;
-    });
-  };
-  return /*#__PURE__*/_react.default.createElement(_ReportTable.ReportTableWrapper, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
-    width: width,
-    height: height,
-    className: className,
-    maxColumnsNumber: getMaxColnumber(),
-    columnsNumber: columnsNumber
-  }, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
-    tableWidthSize: tableWidthSize
-  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, null, tableData.columnsHeadings.map((headline, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
-    key: index
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, headline.label), headline.sortable && /*#__PURE__*/_react.default.createElement("button", {
-    style: {
-      border: "none",
-      background: "none",
-      boxShadow: "none",
-      padding: "0"
-    },
-    onClick: () => handleButtonClick(headline.key)
-  }, /*#__PURE__*/_react.default.createElement(_SortIcon.SortIcon, {
-    width: "16px",
-    height: "16px",
-    fillUpperArrow: activeSortState[headline.key] === "asc" ? "#229E38" : "#D0D0D0",
-    fillLowerArrow: activeSortState[headline.key] === "desc" ? "#229E38" : "#D0D0D0"
-  }))))))), /*#__PURE__*/_react.default.createElement("tbody", null, getPaginatedRows().map((rowData, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
-    className: "row",
-    key: index,
-    enableHover: enableHover,
-    selectHoverColor: selectHoverColor,
-    useColorLinearGradient: useColorLinearGradient
-  }, Object.values(rowData).map((value, dataIndex) => value === "checkbox" ? /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
-    className: "checkbox",
-    key: index
-  }, displayCheckBox(rowData, false)) : value === "button" ? /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
-    className: "button",
-    key: index
-  }, displaySelectButton(rowData)) : /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
-    className: "cell",
-    key: dataIndex
-  }, value && value.length > 30 ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-    content: getTooltipText(value),
-    direction: "top",
-    topFactor: value !== null ? -getTopFactor(Math.ceil(value.length / 50)) : -getTopFactor(1)
-  }, truncateString(value, 30)) : value ? truncateString(value, 30) : "N/A", " "))))))), /*#__PURE__*/_react.default.createElement(_ReportTable.PaginationWrapper, null, enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.RecordDisplay, null, getRecordRangeDisplay()), enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.PaginationContainer, null, totalPages > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: `arrow ${currentPage === 1 ? "disabled" : ""}`,
-    onClick: () => currentPage > 1 && handlePageChange(currentPage - 1)
-  }, /*#__PURE__*/_react.default.createElement(_ChevronLeftIcon.ChevronLeftIcon, {
-    disabled: currentPage === 1
-  })), (() => {
-    const pages = [];
-    const range = 2;
-    pages.push(/*#__PURE__*/_react.default.createElement("span", {
-      key: 1,
-      className: `page-number ${currentPage === 1 ? "active" : ""}`,
-      onClick: () => handlePageChange(1)
-    }, "1"));
-    if (totalPages === 1) {
-      return pages;
-    }
-    if (totalPages <= 10) {
-      for (let i = 2; i <= totalPages; i++) {
-        pages.push(/*#__PURE__*/_react.default.createElement("span", {
-          key: i,
-          className: `page-number ${currentPage === i ? "active" : ""}`,
-          onClick: () => handlePageChange(i)
-        }, i));
-      }
-      return pages;
-    }
-    let start = Math.max(2, currentPage - range);
-    let end = Math.min(totalPages - 1, currentPage + range);
-    if (currentPage <= 3) {
-      start = 2;
-      end = 5;
-    }
-    if (currentPage >= totalPages - 2) {
-      start = totalPages - 4;
-      end = totalPages - 1;
-    }
-    if (start > 2) {
-      pages.push(/*#__PURE__*/_react.default.createElement("span", {
-        key: "ellipsis-start"
-      }, "..."));
-    }
-    for (let i = start; i <= end; i++) {
-      pages.push(/*#__PURE__*/_react.default.createElement("span", {
-        key: i,
-        className: `page-number ${currentPage === i ? "active" : ""}`,
-        onClick: () => handlePageChange(i)
-      }, i));
-    }
-    if (end < totalPages - 1) {
-      pages.push(/*#__PURE__*/_react.default.createElement("span", {
-        key: "ellipsis-end"
-      }, "..."));
-    }
-    pages.push(/*#__PURE__*/_react.default.createElement("span", {
-      key: totalPages,
-      className: `page-number ${currentPage === totalPages ? "active" : ""}`,
-      onClick: () => handlePageChange(totalPages)
-    }, totalPages));
-    return pages;
-  })(), /*#__PURE__*/_react.default.createElement("span", {
-    className: `arrow ${currentPage === totalPages ? "disabled" : ""}`,
-    onClick: () => currentPage < totalPages && handlePageChange(currentPage + 1)
-  }, /*#__PURE__*/_react.default.createElement(_ChevronRightIcon.ChevronRightIcon, {
-    disabled: currentPage === totalPages
-  }))))), isLoading && enablePagination && /*#__PURE__*/_react.default.createElement(_ReportTable.LoaderWrapper, {
-    id: "LoaderWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_ReportTable.Loader, {
-    loaderColor: "#1B30AA"
-  })), !disableInfo ? /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
-    color: "#1B30AA"
-  }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")) : "");
-};
-exports.ReportTable = ReportTable;
-var _default = exports.default = ReportTable;
-ReportTable.defaultProps = {
-  buttonText: "Select",
-  buttonIconName: "select",
-  tableData: {
-    columnsHeadings: [{
-      label: "Event Name",
-      key: "eventName"
-    }, {
-      label: "Retailer",
-      key: "retailer"
-    }, {
-      label: "Total Cost",
-      key: "totalCost"
-    }, {
-      label: "Inc. Baseline Sales",
-      key: "incBaselineSales"
-    }],
-    rowsValues: [{
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "Food Lion",
-      incBaselineSales: "50K"
-    }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
-    }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
-    }, {
-      retailer: "Large Selling Event P2 2023",
-      eventDescription: "Food",
-      totalCost: "$500K",
-      incBaselineSales: "50K"
-    }]
-  },
-  maxColumnsNumber: 4,
-  useColorLinearGradient: true,
-  enableHover: false,
-  enablePagination: true,
-  selectHoverColor: "#EDF6FF",
-  useSelectButtons: false,
-  disableSelectButtons: false,
-  disableInfo: false,
-  selectTextColor: "#229E38",
-  onSelectRowClick: () => {},
-  onCheckRowClick: () => {},
-  onAllRowsCheckBoxClick: () => {},
-  useCheckBoxes: false,
-  limit: 10,
-  currentPage: 1,
-  totalPages: 25,
-  totalTableResults: 250,
-  isLoading: false,
-  onSortChangeCallback: () => {},
-  onSortReset: () => {}
-};