sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/components/ReportTable.js

@@ -0,0 +1,420 @@
+"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: () => {}
+};