@cbinsights/fds/lib/util/storybook-docs/Table.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TableLayout = exports.TableCell = exports.Table = void 0;

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _useClipboard3 = _interopRequireDefault(require("./useClipboard"));

var _reactMarkdown = _interopRequireDefault(require("react-markdown"));

var _classcat = _interopRequireDefault(require("classcat"));

var _excluded = ["children", "isCSS", "copy"];

var Table = function Table(props) {
  return /*#__PURE__*/_react.default.createElement("table", {
    className: "doctable ".concat(props.shrinkLastColumn ? 'shrinkLastColumn' : '')
  }, props.children);
};

exports.Table = Table;

var TableCell = function TableCell(_ref) {
  var children = _ref.children,
      isCSS = _ref.isCSS,
      copy = _ref.copy,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);

  var _useClipboard = (0, _useClipboard3.default)(),
      _useClipboard2 = (0, _slicedToArray2.default)(_useClipboard, 2),
      copiedText = _useClipboard2[0],
      copyToClipboard = _useClipboard2[1];

  return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
    className: (0, _classcat.default)([{
      hasCopy: copy,
      hasCSS: isCSS
    }]),
    onClick: function onClick(e) {
      var _e$currentTarget$firs;

      if ((_e$currentTarget$firs = e.currentTarget.firstElementChild) !== null && _e$currentTarget$firs !== void 0 && _e$currentTarget$firs.textContent) {
        copyToClipboard(e.currentTarget.firstElementChild.textContent.trim());
      }
    }
  }, props), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '100%'
    }
  }, typeof children === 'string' ? /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, null, children) : children), copy && /*#__PURE__*/_react.default.createElement("span", {
    className: "cliptext"
  }, copiedText ? /*#__PURE__*/_react.default.createElement("b", null, "Copied to Clipboard") : 'Copy to Clipboard'));
};

exports.TableCell = TableCell;

var TableHeadLayout = function TableHeadLayout(_ref2) {
  var _ref2$headers = _ref2.headers,
      headers = _ref2$headers === void 0 ? [] : _ref2$headers;
  return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, headers.map(function (header) {
    return /*#__PURE__*/_react.default.createElement("th", {
      key: header
    }, header);
  })));
};

var TableLayout = function TableLayout(_ref3) {
  var headers = _ref3.headers,
      shrinkLastColumn = _ref3.shrinkLastColumn,
      _ref3$rows = _ref3.rows,
      rows = _ref3$rows === void 0 ? [] : _ref3$rows,
      isCSS = _ref3.isCSS,
      _ref3$copy = _ref3.copy,
      copy = _ref3$copy === void 0 ? true : _ref3$copy;
  return /*#__PURE__*/_react.default.createElement(Table, {
    shrinkLastColumn: shrinkLastColumn
  }, /*#__PURE__*/_react.default.createElement(TableHeadLayout, {
    headers: headers
  }), /*#__PURE__*/_react.default.createElement("tbody", null, rows.map(function (row, idx) {
    return /*#__PURE__*/_react.default.createElement("tr", {
      key: idx
    }, row.map(function (cell, idx2) {
      return (0, _typeof2.default)(cell) === 'object' ? /*#__PURE__*/_react.default.createElement(TableCell, (0, _extends2.default)({
        copy: !isCSS && copy,
        key: idx2
      }, cell)) : /*#__PURE__*/_react.default.createElement(TableCell, {
        copy: !isCSS && copy,
        key: idx2,
        isCSS: isCSS && idx2 === 0
      }, cell);
    }));
  })));
};

exports.TableLayout = TableLayout;
var _default = Table;
exports.default = _default;