@mirai/ui 1.0.12 → 1.0.13

package/build/components/Table/Table.js

@@ -0,0 +1,119 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _helpers2 = require("./helpers");
+
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+
+var _Table = require("./Table.Row");
+
+var _excluded = ["dataSource", "schema", "search", "onPress", "onSelect"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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; }
+
+var Table = function Table(_ref) {
+  var _ref$dataSource = _ref.dataSource,
+      dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+      schema = _ref.schema,
+      search = _ref.search,
+      onPress = _ref.onPress,
+      onSelect = _ref.onSelect,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sort = _useState4[0],
+      setSort = _useState4[1];
+
+  var handleSelect = function handleSelect(row) {
+    setSelected(function () {
+      var exists = selected.includes(row);
+      var next = selected.filter(function (item) {
+        return item !== row;
+      });
+      if (!exists) next.push(row);
+      onSelect(next);
+      return next;
+    });
+  };
+
+  var handleSort = function handleSort(field) {
+    setSort(sort[field] === undefined ? _defineProperty({}, field, true) : sort[field] ? _defineProperty({}, field, false) : {});
+  };
+
+  var testId = others['data-testid'];
+  return /*#__PURE__*/_react.default.createElement("table", _extends({}, others, {
+    className: (0, _helpers.styles)(_TableModule.default.table, others.className)
+  }), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
+    schema: schema,
+    sort: sort,
+    onSelect: onSelect ? function () {} : undefined,
+    onSort: handleSort
+  })), /*#__PURE__*/_react.default.createElement("tbody", null, (0, _react.useMemo)(function () {
+    return (0, _helpers2.select)(dataSource, {
+      search: search,
+      sort: sort
+    });
+  }, [dataSource, search, sort]).map(function (row, index) {
+    return /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
+      "data-testid": testId ? "".concat(testId, "-").concat(index) : undefined,
+      dataSource: row,
+      key: index,
+      schema: schema,
+      selected: selected.includes(row),
+      onPress: onPress,
+      onSelect: onSelect ? handleSelect : undefined
+    });
+  })));
+};
+
+exports.Table = Table;
+Table.propTypes = {
+  dataSource: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  schema: _propTypes.default.shape({}).isRequired,
+  search: _propTypes.default.string,
+  onPress: _propTypes.default.func,
+  onSelect: _propTypes.default.func
+};
+//# sourceMappingURL=Table.js.map

package/build/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":["Table","dataSource","schema","search","onPress","onSelect","others","selected","setSelected","sort","setSort","handleSelect","row","exists","includes","next","filter","item","push","handleSort","field","undefined","testId","style","table","className","map","index","propTypes","PropTypes","arrayOf","shape","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { select } from './helpers';\nimport style from './Table.module.css';\nimport { TableRow } from './Table.Row';\n\nexport const Table = ({ dataSource = [], schema, search, onPress, onSelect, ...others }) => {\n  const [selected, setSelected] = useState([]);\n  const [sort, setSort] = useState({});\n\n  const handleSelect = (row) => {\n    setSelected(() => {\n      const exists = selected.includes(row);\n      const next = selected.filter((item) => item !== row);\n      if (!exists) next.push(row);\n\n      onSelect(next);\n\n      return next;\n    });\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return (\n    <table {...others} className={styles(style.table, others.className)}>\n      <thead>\n        <TableRow schema={schema} sort={sort} onSelect={onSelect ? () => {} : undefined} onSort={handleSort} />\n      </thead>\n      <tbody>\n        {useMemo(() => select(dataSource, { search, sort }), [dataSource, search, sort]).map((row, index) => (\n          <TableRow\n            data-testid={testId ? `${testId}-${index}` : undefined}\n            dataSource={row}\n            key={index}\n            schema={schema}\n            selected={selected.includes(row)}\n            onPress={onPress}\n            onSelect={onSelect ? handleSelect : undefined}\n          />\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAuE;EAAA,2BAApEC,UAAoE;EAAA,IAApEA,UAAoE,gCAAvD,EAAuD;EAAA,IAAnDC,MAAmD,QAAnDA,MAAmD;EAAA,IAA3CC,MAA2C,QAA3CA,MAA2C;EAAA,IAAnCC,OAAmC,QAAnCA,OAAmC;EAAA,IAA1BC,QAA0B,QAA1BA,QAA0B;EAAA,IAAbC,MAAa;;EAC1F,gBAAgC,qBAAS,EAAT,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EACA,iBAAwB,qBAAS,EAAT,CAAxB;EAAA;EAAA,IAAOC,IAAP;EAAA,IAAaC,OAAb;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,GAAD,EAAS;IAC5BJ,WAAW,CAAC,YAAM;MAChB,IAAMK,MAAM,GAAGN,QAAQ,CAACO,QAAT,CAAkBF,GAAlB,CAAf;MACA,IAAMG,IAAI,GAAGR,QAAQ,CAACS,MAAT,CAAgB,UAACC,IAAD;QAAA,OAAUA,IAAI,KAAKL,GAAnB;MAAA,CAAhB,CAAb;MACA,IAAI,CAACC,MAAL,EAAaE,IAAI,CAACG,IAAL,CAAUN,GAAV;MAEbP,QAAQ,CAACU,IAAD,CAAR;MAEA,OAAOA,IAAP;IACD,CARU,CAAX;EASD,CAVD;;EAYA,IAAMI,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAW;IAC5BV,OAAO,CAACD,IAAI,CAACW,KAAD,CAAJ,KAAgBC,SAAhB,uBAA+BD,KAA/B,EAAuC,IAAvC,IAAgDX,IAAI,CAACW,KAAD,CAAJ,uBAAiBA,KAAjB,EAAyB,KAAzB,IAAmC,EAApF,CAAP;EACD,CAFD;;EAIA,IAAyBE,MAAzB,GAAoChB,MAApC,CAAS,aAAT;EAEA,oBACE,mDAAWA,MAAX;IAAmB,SAAS,EAAE,qBAAOiB,qBAAMC,KAAb,EAAoBlB,MAAM,CAACmB,SAA3B;EAA9B,iBACE,yDACE,6BAAC,eAAD;IAAU,MAAM,EAAEvB,MAAlB;IAA0B,IAAI,EAAEO,IAAhC;IAAsC,QAAQ,EAAEJ,QAAQ,GAAG,YAAM,CAAE,CAAX,GAAcgB,SAAtE;IAAiF,MAAM,EAAEF;EAAzF,EADF,CADF,eAIE,4CACG,oBAAQ;IAAA,OAAM,sBAAOlB,UAAP,EAAmB;MAAEE,MAAM,EAANA,MAAF;MAAUM,IAAI,EAAJA;IAAV,CAAnB,CAAN;EAAA,CAAR,EAAoD,CAACR,UAAD,EAAaE,MAAb,EAAqBM,IAArB,CAApD,EAAgFiB,GAAhF,CAAoF,UAACd,GAAD,EAAMe,KAAN;IAAA,oBACnF,6BAAC,eAAD;MACE,eAAaL,MAAM,aAAMA,MAAN,cAAgBK,KAAhB,IAA0BN,SAD/C;MAEE,UAAU,EAAET,GAFd;MAGE,GAAG,EAAEe,KAHP;MAIE,MAAM,EAAEzB,MAJV;MAKE,QAAQ,EAAEK,QAAQ,CAACO,QAAT,CAAkBF,GAAlB,CALZ;MAME,OAAO,EAAER,OANX;MAOE,QAAQ,EAAEC,QAAQ,GAAGM,YAAH,GAAkBU;IAPtC,EADmF;EAAA,CAApF,CADH,CAJF,CADF;AAoBD,CA1CM;;;AA4CPrB,KAAK,CAAC4B,SAAN,GAAkB;EAChB3B,UAAU,EAAE4B,mBAAUC,OAAV,CAAkBD,mBAAUE,KAAV,CAAgB,EAAhB,CAAlB,CADI;EAEhB7B,MAAM,EAAE2B,mBAAUE,KAAV,CAAgB,EAAhB,EAAoBC,UAFZ;EAGhB7B,MAAM,EAAE0B,mBAAUI,MAHF;EAIhB7B,OAAO,EAAEyB,mBAAUK,IAJH;EAKhB7B,QAAQ,EAAEwB,mBAAUK;AALJ,CAAlB"}

package/build/components/Table/Table.module.css

@@ -0,0 +1,78 @@
+:root {
+  --mirai-ui-table-base: var(--mirai-ui-base);
+  --mirai-ui-table-border-color: var(--mirai-ui-content-300);
+  --mirai-ui-table-content: var(--mirai-ui-content);
+  --mirai-ui-table-hover-background: var(--mirai-ui-accent-300);
+  --mirai-ui-table-head-color: var(--mirai-ui-content-400);
+  --mirai-ui-table-padding-x: var(--mirai-ui-space-M);
+  --mirai-ui-table-padding-y: var(--mirai-ui-space-M);
+  --mirai-ui-table-selected-background: var(--mirai-ui-accent-200);
+  --mirai-ui-table-selected-color: var(--mirai-ui-accent);
+}
+
+.table {
+  background-color: var(--mirai-ui-table-base);
+  border-collapse: collapse;
+  font-family: var(--mirai-ui-font);
+  font-size: var(--mirai-ui-font-size-action);
+  table-layout: auto;
+  text-align: left;
+  width: 100%;
+}
+
+.table thead tr {
+  color: var(--mirai-ui-table-head-color);
+  font-family: var(--mirai-ui-font-bold);
+  font-size: var(--mirai-ui-font-size-small);
+  font-weight: var(--mirai-ui-font-bold-weight);
+}
+
+.table tbody tr.selected {
+  background-color: var(--mirai-ui-table-selected-background);
+  color: var(--mirai-ui-table-selected-color);
+}
+
+.table tr:not(:last-child) {
+  border-bottom: solid 1px var(--mirai-ui-table-border-color);
+}
+
+.table th,
+.table td {
+  padding: var(--mirai-ui-table-padding-y) 0;
+}
+
+.table th:first-child,
+.table td:first-child {
+  padding-left: var(--mirai-ui-table-padding-x);
+}
+
+.table th:last-child,
+.table td:last-child {
+  padding-right: var(--mirai-ui-table-padding-x);
+}
+
+.table th.select,
+.table td.select {
+  width: var(--mirai-ui-checkbox-size);
+  padding-right: var(--mirai-ui-table-padding-x);
+}
+
+.table th .hideIcon {
+  color: var(--mirai-ui-table-base);
+}
+
+.table .checkbox {
+  margin: 0;
+}
+
+@media only screen and (min-width: 600px) {
+  .table thead tr th:hover {
+    color: var(--mirai-ui-table-content);
+    cursor: pointer;
+  }
+
+  .table tbody tr:hover.onPress {
+    background-color: var(--mirai-ui-table-hover-background);
+    cursor: pointer;
+  }
+}