oa-componentbook 0.0.0-sit1.1

package/build/components/oa-component-table/CustomTable.js

@@ -0,0 +1,300 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
+var _KeyboardArrowUp = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUp"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+require("antd/dist/reset.css");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _utils = require("../../utils");
+var _styles = require("./styles");
+var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
+const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "noOfColumnToShow", "defaultCardShow", "onMobilePageChange", "showNumberPagination"],
+  _excluded2 = ["title"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * @description A custom implementation of the Ant Design Table component.
+ * @param {array} columns - The columns configuration for the table.
+ * @param {array} dataSource - The data for the table.
+ * @param {object} pagination - The pagination configuration for the table.
+ * @param {string} rowKey - The unique key for identifying table rows.
+ * @param {string} size - The size of the table.
+ * @param {object} style - The styles for the table.
+ * @param {boolean} tableBorder - Whether to show the table border.
+ * @param {string} emptyText - The text to display when the table is empty.
+ * @param {number} noOfColumnToShow - The number of columns to show in the table.
+ * @param {boolean} defaultCardShow - Whether to show the table in the card view by default.
+ * @param {object} antDesignProps - The props to be passed to the underlying Ant Design Table component.
+ * @returns {JSX.Element} The rendered table component.
+ */
+function CustomTable(_ref) {
+  let {
+      columns,
+      dataSource,
+      pagination,
+      rowKey,
+      size,
+      style,
+      tableBorder,
+      emptyText,
+      noOfColumnToShow,
+      defaultCardShow,
+      onMobilePageChange,
+      showNumberPagination
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const [viewMore, setViewMore] = (0, _react.useState)([]);
+  const [cardShow, setCardShow] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (window.innerWidth <= 600) {
+      if (defaultCardShow) {
+        setCardShow(defaultCardShow);
+      } else if ((columns === null || columns === void 0 ? void 0 : columns.length) <= 3) {
+        setCardShow(false);
+      } else {
+        setCardShow(true);
+      }
+    }
+  }, [defaultCardShow, columns === null || columns === void 0 ? void 0 : columns.length, dataSource === null || dataSource === void 0 ? void 0 : dataSource.length]);
+  const uppercaseColumns = columns.map(column => {
+    const {
+        title
+      } = column,
+      otherColumnProperties = _objectWithoutProperties(column, _excluded2);
+    const titleComponent = (0, _utils.isString)(title) || (0, _utils.isNumber)(title) ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-sl1-700"
+    }, title) : title;
+    return _objectSpread({
+      title: titleComponent,
+      render: text => {
+        if ((0, _utils.isString)(text) || (0, _utils.isNumber)(text)) {
+          return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+            typography: "type-b2-400"
+          }, text);
+        }
+        return text;
+      }
+    }, otherColumnProperties);
+  });
+  const tableStyle = {
+    borderTop: '1px solid var(--color-divider)',
+    overflow: 'hidden',
+    borderRight: tableBorder ? '1px solid var(--color-divider)' : '0',
+    borderBottom: tableBorder ? '1px solid var(--color-divider)' : '0',
+    borderLeft: tableBorder ? '1px solid var(--color-divider)' : '0',
+    borderRadius: tableBorder ? '4px' : '0'
+  };
+  /**
+   * Takes an array and a number, checks if the number is present in the array.
+   * If present, removes it; if not, adds it.
+   * @param {array} arr - The array to check and update.
+   * @param {number} num - The number to check for.
+   * @returns {array} The updated array.
+   */
+  function checkAndUpdateArray(arr, num) {
+    const index = arr.indexOf(num);
+    if (index !== -1) {
+      arr.splice(index, 1);
+    } else {
+      arr.push(num);
+    }
+    return arr;
+  }
+  const handleViewMore = (index, row) => {
+    const tempViewMore = JSON.parse(JSON.stringify(viewMore));
+    setViewMore(checkAndUpdateArray(tempViewMore, index));
+  };
+  const checkLastElementIsAction = colIndex => {
+    var _uppercaseColumns;
+    if ((uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns = uppercaseColumns[uppercaseColumns.length - 1]) === null || _uppercaseColumns === void 0 || (_uppercaseColumns = _uppercaseColumns.key) === null || _uppercaseColumns === void 0 ? void 0 : _uppercaseColumns.toLowerCase()) === 'action' && colIndex === uppercaseColumns.length - 1) {
+      return true;
+    }
+    return false;
+  };
+  /**
+   * Given a column's configuration and a row from the table data,
+   * returns the content to be rendered for that column in that row.
+   * If the column has a render function, calls it with the row's column data and the row itself.
+   * If the column has a dataIndex and the row has data at that index,
+   * returns the row's data at that index.
+   * If neither of the above conditions are met, returns an empty string.
+   * @param {object} columnsData - A column's configuration from the table's columns array.
+   * @param {object} row - A row from the table data.
+   * @returns {string|JSX.Element} The content to be rendered for the column in the row.
+   */
+  const getContentToBeRender = (columnsData, row) => {
+    if (columnsData.render) {
+      return columnsData.render(row[columnsData.dataIndex], row);
+    }
+    if (columnsData.dataIndex && row[columnsData.dataIndex]) {
+      return row[columnsData.dataIndex];
+    }
+    return '';
+  };
+  const CheckMoreView = (0, _react.useMemo)(colIndex => {
+    var _uppercaseColumns2;
+    let tempNoOfColumnToShow = noOfColumnToShow + 1; // bcz of heading
+    if ((uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns2 = uppercaseColumns[uppercaseColumns.length - 1]) === null || _uppercaseColumns2 === void 0 || (_uppercaseColumns2 = _uppercaseColumns2.key) === null || _uppercaseColumns2 === void 0 ? void 0 : _uppercaseColumns2.toLowerCase()) === 'action') {
+      tempNoOfColumnToShow += 1; // for action column
+    }
+    return uppercaseColumns.length > tempNoOfColumnToShow;
+  }, [uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns.length, noOfColumnToShow]);
+  return /*#__PURE__*/_react.default.createElement(_styles.MainContainer, null, !cardShow && /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          borderColor: _ColorVariablesMap.default['--color-divider'],
+          headerColor: _ColorVariablesMap.default['--color-secondary-content'],
+          headerBg: _ColorVariablesMap.default['--color-secondary-background'],
+          rowHoverBg: _ColorVariablesMap.default['--color-secondary-background'],
+          headerBorderRadius: '0',
+          headerSplitColor: _ColorVariablesMap.default['--color-secondary-background'],
+          footerColor: _ColorVariablesMap.default['--color-primary-content'],
+          cellPaddingBlock: 24,
+          cellPaddingBlockMD: 16,
+          cellPaddingBlockSM: 12,
+          cellPaddingInline: 16,
+          cellPaddingInlineMD: 16,
+          cellPaddingInlineSM: 16,
+          cellFontSize: "".concat(_TypographiesMap.default['type-b2-400']['font-size'], "px"),
+          cellFontSizeMD: "".concat(_TypographiesMap.default['type-b2-400']['font-size'], "px"),
+          cellFontSizeSM: "".concat(_TypographiesMap.default['type-b2-400']['font-size'], "px"),
+          selectionColumnWidth: '54px',
+          colorText: _ColorVariablesMap.default['--color-primary-content'],
+          rowSelectedHoverBg: _ColorVariablesMap.default['--color-secondary-background']
+        }
+      },
+      token: {
+        controlItemBgActive: _ColorVariablesMap.default['--color-secondary-background']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styles.StyledTable, _extends({
+    style: _objectSpread(_objectSpread({}, tableStyle), style),
+    columns: uppercaseColumns,
+    dataSource: dataSource,
+    pagination: pagination,
+    rowKey: rowKey,
+    locale: {
+      emptyText
+    },
+    size: size
+  }, antDesignProps, {
+    scroll: {
+      x: 'max-content'
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: cardShow && dataSource ? 'bottomPadding' : ''
+  }, cardShow && dataSource && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.map((row, rowIndex) => {
+    var _uppercaseColumns$, _uppercaseColumns3;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: (0, _utils.getUUID)(),
+      className: "cardStyles"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "srDetails"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-t2-700",
+      color: "primary-content"
+    }, /*#__PURE__*/_react.default.createElement("div", null, uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns$ = uppercaseColumns[0]) === null || _uppercaseColumns$ === void 0 ? void 0 : _uppercaseColumns$.title, ":", ' '), getContentToBeRender(uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns[0], row))), uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns.map((column, colIndex) => {
+      if (colIndex === 0 || !viewMore.includes(rowIndex) && colIndex > noOfColumnToShow || checkLastElementIsAction(colIndex, uppercaseColumns)) return null;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: (0, _utils.getUUID)(),
+        className: "keyValue"
+      }, /*#__PURE__*/_react.default.createElement("span", null, column.title), /*#__PURE__*/_react.default.createElement("strong", null, getContentToBeRender(column, row)));
+    }), CheckMoreView && /*#__PURE__*/_react.default.createElement("div", {
+      className: "showHideBtn"
+    }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      size: "medium",
+      type: "text-only",
+      label: viewMore.includes(rowIndex) ? 'View Less' : 'View More',
+      iconConfig: {
+        icon: viewMore.includes(rowIndex) ? /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          icon: _KeyboardArrowUp.default,
+          size: 16
+        }) : /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          icon: _KeyboardArrowDown.default,
+          size: 16
+        }),
+        position: 'right'
+      },
+      onClick: () => handleViewMore(rowIndex)
+    })), (uppercaseColumns === null || uppercaseColumns === void 0 || (_uppercaseColumns3 = uppercaseColumns[uppercaseColumns.length - 1]) === null || _uppercaseColumns3 === void 0 ? void 0 : _uppercaseColumns3.key) === 'action' && /*#__PURE__*/_react.default.createElement("div", {
+      className: "footerCta"
+    }, getContentToBeRender(uppercaseColumns === null || uppercaseColumns === void 0 ? void 0 : uppercaseColumns[uppercaseColumns.length - 1], row)));
+  }))), cardShow && dataSource && (pagination === null || pagination === void 0 ? void 0 : pagination.showPaginationOnMobile) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "fullWidthBtn"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    "data-test": "button",
+    label: "Load More",
+    type: "secondary",
+    size: "large",
+    onClick: () => pagination === null || pagination === void 0 ? void 0 : pagination.onChangeHandlerForMobile()
+  })), cardShow && dataSource.length > 0 && onMobilePageChange && showNumberPagination && /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobileViewPagination"
+  }, /*#__PURE__*/_react.default.createElement(_CustomPagination.default, {
+    current: pagination.current,
+    pageSize: pagination.pageSize,
+    total: pagination.total,
+    onChange: page => {
+      onMobilePageChange === null || onMobilePageChange === void 0 || onMobilePageChange({
+        current: page,
+        pageSize: pagination.pageSize
+      });
+    }
+  })));
+}
+CustomTable.propTypes = {
+  columns: _propTypes.default.array,
+  dataSource: _propTypes.default.array,
+  pagination: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  rowKey: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'middle', 'large']),
+  style: _propTypes.default.object,
+  tableBorder: _propTypes.default.bool,
+  emptyText: _propTypes.default.string,
+  noOfColumnToShow: _propTypes.default.number,
+  defaultCardShow: _propTypes.default.bool,
+  onMobilePageChange: _propTypes.default.func,
+  showNumberPagination: _propTypes.default.bool
+};
+CustomTable.defaultProps = {
+  dataSource: [],
+  columns: [],
+  pagination: false,
+  rowKey: '',
+  size: 'middle',
+  style: {},
+  tableBorder: true,
+  emptyText: 'No Data',
+  noOfColumnToShow: 5,
+  defaultCardShow: false,
+  onMobilePageChange: null,
+  showNumberPagination: false
+};
+var _default = exports.default = CustomTable;