glide-design-system/dist/components/table/Table.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

"use strict";

require("core-js/modules/es.symbol.description.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Table = void 0;
require("core-js/modules/es.string.trim.js");
require("core-js/modules/es.regexp.exec.js");
require("core-js/modules/es.string.replace.js");
require("core-js/modules/es.array.sort.js");
var _react = _interopRequireDefault(require("react"));
require("./table.css");
var _Chip = require("../chip/Chip");
var _ProgressCircle = require("../loader/ProgressCircle");
const _excluded = ["value"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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; }
const Table = _ref => {
  let {
    columns,
    data,
    sortHandler,
    sortItem,
    sortOrder,
    tableRowStyles,
    tableHeaderStyle,
    linkHandler,
    actionHandler,
    style,
    loading,
    chipStyle,
    progressCircleStyle,
    progressCircleClass,
    progressCircleContainerClass,
    message,
    tableContainerStyle,
    containerClass,
    id,
    name,
    key,
    noDataStyle
  } = _ref;
  const columnWidth = "".concat(100 / columns.length, "%");
  const camelCaseToWords = word => {
    return word.replace(/([A-Z])/g, " $1") // Insert a space before each capital letter
    .trim() // Remove any leading/trailing spaces
    .toUpperCase(); // Convert the whole string to uppercase
  };

  const formatTimestampToDateString = timestamp => {
    const dateObj = new Date(timestamp);
    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    const month = monthNames[dateObj.getMonth()];
    const day = dateObj.getDate();
    const year = dateObj.getFullYear();
    return "".concat(month, " ").concat(day, " ").concat(year);
  };
  const renderChip = (data, column) => {
    if ((column === null || column === void 0 ? void 0 : column.type) === "chip") {
      var _column$chipOptions;
      const statusValue = data === null || data === void 0 ? void 0 : data[column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label];
      const chipProperties = column === null || column === void 0 || (_column$chipOptions = column.chipOptions) === null || _column$chipOptions === void 0 ? void 0 : _column$chipOptions.filter(chipvalue => {
        return (chipvalue === null || chipvalue === void 0 ? void 0 : chipvalue.value) === statusValue;
      });
      const _chipProperties$ = chipProperties === null || chipProperties === void 0 ? void 0 : chipProperties[0],
        {
          value
        } = _chipProperties$,
        chipStyles = _objectWithoutProperties(_chipProperties$, _excluded);
      return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
        style: _objectSpread(_objectSpread({}, chipStyle), chipStyles)
      }, statusValue);
    }
  };
  const combinedStyle = _objectSpread({}, style);
  return /*#__PURE__*/_react.default.createElement("div", {
    style: _objectSpread({
      overflowX: "auto",
      overflowY: "hidden"
    }, tableContainerStyle),
    className: containerClass ? containerClass : ""
  }, /*#__PURE__*/_react.default.createElement("table", {
    style: combinedStyle,
    className: "table",
    "data-testid": id,
    id: id,
    name: name
  }, /*#__PURE__*/_react.default.createElement("thead", {
    style: {
      borderBottom: "1px solid #d7d7d7"
    }
  }, /*#__PURE__*/_react.default.createElement("tr", {
    className: "tr",
    style: _objectSpread({
      height: 40,
      backgroundColor: "#f9f9f9",
      borderBottom: "1px solid #d7d7d7"
    }, tableHeaderStyle)
  }, columns.map((column, index) => {
    var _column$style;
    return /*#__PURE__*/_react.default.createElement("th", {
      key: column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label,
      id: column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label,
      style: _objectSpread({
        width: (column === null || column === void 0 || (_column$style = column.style) === null || _column$style === void 0 ? void 0 : _column$style.width) || columnWidth,
        textAlign: "left",
        borderRight: index !== columns.length - 1 ? "1px solid #d7d7d7" : "none",
        color: "#7f7f7f",
        fontSize: "12px",
        fontWeight: "700",
        fontFamily: "Roboto, sans-serif",
        paddingLeft: "12.5px"
      }, column === null || column === void 0 ? void 0 : column.style)
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        display: "flex",
        alignItems: "center"
      }
    }, /*#__PURE__*/_react.default.createElement("p", {
      fontWeight: "bold",
      fontSize: 12
      //style={styles.tableHeader}
    }, camelCaseToWords(column === null || column === void 0 ? void 0 : column.label)), (column === null || column === void 0 ? void 0 : column.sort) && /*#__PURE__*/_react.default.createElement("div", {
      "data-testid": "".concat(column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label, "SortIcon"),
      id: "".concat(column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label, "SortIcon"),
      className: "sortIcon",
      style: {
        paddingLeft: "5px"
      },
      onClick: () => {
        sortHandler && sortHandler(sortOrder === "asc" ? "desc" : "asc", column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label);
      }
    }, sortItem === (column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label) ? sortOrder === "desc" ? /*#__PURE__*/_react.default.createElement("span", {
      style: {
        color: "#7f7f7f"
      },
      className: "material-symbols-outlined"
    }, "expand_more") : /*#__PURE__*/_react.default.createElement("span", {
      style: {
        color: "#7f7f7f"
      },
      className: "material-symbols-outlined"
    }, "expand_less") : /*#__PURE__*/_react.default.createElement("span", {
      style: {
        color: "#7f7f7f",
        writingMode: "vertical-lr",
        direction: "rtl",
        fontSize: "18px"
      },
      className: "material-symbols-outlined"
    }, "code"))));
  }))), /*#__PURE__*/_react.default.createElement("tbody", null, loading ? /*#__PURE__*/_react.default.createElement("tr", {
    style: _objectSpread({
      height: 40,
      fontFamily: "Roboto, sans-serif",
      fontSize: "14px"
    }, tableRowStyles)
  }, columns.map((column, index) => {
    return /*#__PURE__*/_react.default.createElement("td", {
      key: "loader-".concat(index + 1, "-").concat(key ? key : ""),
      style: _objectSpread({
        justifyContent: "center",
        alignItems: "center",
        width: columnWidth,
        paddingInline: "6px"
      }, column === null || column === void 0 ? void 0 : column.style)
    }, index === Math.floor(columns.length / 2) ? /*#__PURE__*/_react.default.createElement(_ProgressCircle.ProgressCircle, {
      size: "medium",
      style: _objectSpread({}, progressCircleStyle),
      className: progressCircleClass,
      containerClass: progressCircleContainerClass
    }) : "");
  })) : message ? /*#__PURE__*/_react.default.createElement("tr", {
    style: _objectSpread({
      height: 40,
      fontFamily: "Roboto, sans-serif",
      fontSize: "16px"
    }, tableRowStyles)
  }, columns.map((column, index) => {
    return /*#__PURE__*/_react.default.createElement("td", {
      key: "message-".concat(index, "-").concat(key ? key : ""),
      style: _objectSpread({
        justifyContent: "center",
        alignItems: "center",
        width: columnWidth,
        paddingInline: "6px"
      }, column === null || column === void 0 ? void 0 : column.style)
    }, index === Math.floor(columns.length / 2) ? /*#__PURE__*/_react.default.createElement("div", {
      style: _objectSpread({
        fontSize: "14px"
      }, noDataStyle)
    }, message ? message : "") : "");
  })) : data === null || data === void 0 ? void 0 : data.map((value, rowIndex) => {
    return /*#__PURE__*/_react.default.createElement("tr", {
      key: "tableRow-".concat(rowIndex, "-").concat(key ? key : ""),
      id: value === null || value === void 0 ? void 0 : value.id,
      style: _objectSpread({
        borderBottom: rowIndex !== (data === null || data === void 0 ? void 0 : data.length) - 1 ? "1px solid #d7d7d7" : "",
        height: 40,
        fontFamily: "Roboto, sans-serif",
        fontSize: "16px"
      }, tableRowStyles)
    }, columns === null || columns === void 0 ? void 0 : columns.map((column, index) => {
      return /*#__PURE__*/_react.default.createElement("td", {
        key: "tableColumn-".concat(index, "-").concat(key ? key : ""),
        id: value !== null && value !== void 0 && value.hasOwnProperty(column === null || column === void 0 ? void 0 : column.fieldName) ? value[column === null || column === void 0 ? void 0 : column.fieldName] : value !== null && value !== void 0 && value.hasOwnProperty(column === null || column === void 0 ? void 0 : column.label) ? value[column === null || column === void 0 ? void 0 : column.label] : "action-".concat(value === null || value === void 0 ? void 0 : value.id),
        style: _objectSpread({
          width: columnWidth,
          paddingInline: "12.5px"
        }, column === null || column === void 0 ? void 0 : column.style)
      }, column !== null && column !== void 0 && column.customBodyRenderer ? column.customBodyRenderer(value, rowIndex) : (column === null || column === void 0 ? void 0 : column.type) === "date" ? formatTimestampToDateString(value === null || value === void 0 ? void 0 : value[column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label]) : (column === null || column === void 0 ? void 0 : column.type) === "chip" ? renderChip(value, column) : column !== null && column !== void 0 && column.element ? /*#__PURE__*/_react.default.createElement("div", {
        onClick: e => actionHandler && actionHandler(e.currentTarget, value),
        className: "sortIcon"
      }, column === null || column === void 0 ? void 0 : column.element) : (column === null || column === void 0 ? void 0 : column.type) === "link" ? /*#__PURE__*/_react.default.createElement("span", {
        onClick: e => linkHandler && linkHandler(e, value),
        className: "sortIcon",
        style: {
          color: "rgb(2, 167, 240)"
        }
      }, value === null || value === void 0 ? void 0 : value[column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label]) : value === null || value === void 0 ? void 0 : value[column !== null && column !== void 0 && column.fieldName ? column === null || column === void 0 ? void 0 : column.fieldName : column === null || column === void 0 ? void 0 : column.label]);
    }));
  }))));
};
exports.Table = Table;
const styles = {
  tableHeader: {
    color: "#7f7f7f",
    fontSize: "12px",
    fontWeight: "700",
    fontFamily: "Roboto, sans-serif",
    paddingLeft: "12.5px"
  }
};