@mirai/ui 1.0.4 → 1.0.7

package/build/components/Table/Table.js

@@ -0,0 +1,92 @@
+"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.Table = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+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"];
+
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = (0, _slicedToArray2.default)(_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 ? (0, _defineProperty2.default)({}, field, true) : sort[field] ? (0, _defineProperty2.default)({}, field, false) : {});
+  };
+
+  var testId = others['data-testid'];
+  return /*#__PURE__*/_react.default.createElement("table", Object.assign({}, 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;
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Table/Table.jsx"],"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"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAuE;AAAA,6BAApEC,UAAoE;AAAA,MAApEA,UAAoE,gCAAvD,EAAuD;AAAA,MAAnDC,MAAmD,QAAnDA,MAAmD;AAAA,MAA3CC,MAA2C,QAA3CA,MAA2C;AAAA,MAAnCC,OAAmC,QAAnCA,OAAmC;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAbC,MAAa;;AAC1F,kBAAgC,qBAAS,EAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AACA,mBAAwB,qBAAS,EAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,GAAD,EAAS;AAC5BJ,IAAAA,WAAW,CAAC,YAAM;AAChB,UAAMK,MAAM,GAAGN,QAAQ,CAACO,QAAT,CAAkBF,GAAlB,CAAf;AACA,UAAMG,IAAI,GAAGR,QAAQ,CAACS,MAAT,CAAgB,UAACC,IAAD;AAAA,eAAUA,IAAI,KAAKL,GAAnB;AAAA,OAAhB,CAAb;AACA,UAAI,CAACC,MAAL,EAAaE,IAAI,CAACG,IAAL,CAAUN,GAAV;AAEbP,MAAAA,QAAQ,CAACU,IAAD,CAAR;AAEA,aAAOA,IAAP;AACD,KARU,CAAX;AASD,GAVD;;AAYA,MAAMI,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAW;AAC5BV,IAAAA,OAAO,CAACD,IAAI,CAACW,KAAD,CAAJ,KAAgBC,SAAhB,qCAA+BD,KAA/B,EAAuC,IAAvC,IAAgDX,IAAI,CAACW,KAAD,CAAJ,qCAAiBA,KAAjB,EAAyB,KAAzB,IAAmC,EAApF,CAAP;AACD,GAFD;;AAIA,MAAyBE,MAAzB,GAAoChB,MAApC,CAAS,aAAT;AAEA,sBACE,wDAAWA,MAAX;AAAmB,IAAA,SAAS,EAAE,qBAAOiB,qBAAMC,KAAb,EAAoBlB,MAAM,CAACmB,SAA3B;AAA9B,mBACE,yDACE,6BAAC,eAAD;AAAU,IAAA,MAAM,EAAEvB,MAAlB;AAA0B,IAAA,IAAI,EAAEO,IAAhC;AAAsC,IAAA,QAAQ,EAAEJ,QAAQ,GAAG,YAAM,CAAE,CAAX,GAAcgB,SAAtE;AAAiF,IAAA,MAAM,EAAEF;AAAzF,IADF,CADF,eAIE,4CACG,oBAAQ;AAAA,WAAM,sBAAOlB,UAAP,EAAmB;AAAEE,MAAAA,MAAM,EAANA,MAAF;AAAUM,MAAAA,IAAI,EAAJA;AAAV,KAAnB,CAAN;AAAA,GAAR,EAAoD,CAACR,UAAD,EAAaE,MAAb,EAAqBM,IAArB,CAApD,EAAgFiB,GAAhF,CAAoF,UAACd,GAAD,EAAMe,KAAN;AAAA,wBACnF,6BAAC,eAAD;AACE,qBAAaL,MAAM,aAAMA,MAAN,cAAgBK,KAAhB,IAA0BN,SAD/C;AAEE,MAAA,UAAU,EAAET,GAFd;AAGE,MAAA,GAAG,EAAEe,KAHP;AAIE,MAAA,MAAM,EAAEzB,MAJV;AAKE,MAAA,QAAQ,EAAEK,QAAQ,CAACO,QAAT,CAAkBF,GAAlB,CALZ;AAME,MAAA,OAAO,EAAER,OANX;AAOE,MAAA,QAAQ,EAAEC,QAAQ,GAAGM,YAAH,GAAkBU;AAPtC,MADmF;AAAA,GAApF,CADH,CAJF,CADF;AAoBD,CA1CM","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"],"file":"Table.js"}

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

@@ -0,0 +1,76 @@
+:root {
+  --mirai-ui-table-base: var(--mirai-ui-base);
+  --mirai-ui-table-border-color: var(--mirai-ui-disabled);
+  --mirai-ui-table-content: var(--mirai-ui-content);
+  --mirai-ui-table-lighten: var(--mirai-ui-lighten);
+  --mirai-ui-table-color-selected: var(--mirai-ui-accent);
+  --mirai-ui-table-color-selected-lighten: var(--mirai-ui-accent-lighten);
+}
+
+.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-lighten);
+  font-family: var(--mirai-ui-font-bold);
+  font-size: var(--mirai-ui-font-size-small);
+  font-weight: var(--mirai-ui-font-bold-weight);
+}
+
+.table thead tr th {
+  height: var(--mirai-ui-space-M);
+}
+
+.table thead tr th:hover {
+  color: var(--mirai-ui-table-content);
+  cursor: pointer;
+}
+
+.table tbody tr.selected {
+  background-color: var(--mirai-ui-table-color-selected-lighten);
+  color: var(--mirai-ui-table-color-selected);
+}
+
+.table tbody tr:hover.onPress {
+  background-color: var(--mirai-ui-table-border-color);
+  cursor: pointer;
+}
+
+.table tr:not(:last-child) {
+  border-bottom: solid 1px var(--mirai-ui-table-border-color);
+}
+
+.table th,
+.table td {
+  padding: var(--mirai-ui-space-S) 0;
+}
+
+.table th:first-child,
+.table td:first-child {
+  padding-left: var(--mirai-ui-space-M);
+}
+
+.table th:last-child,
+.table td:last-child {
+  padding-right: var(--mirai-ui-space-M);
+}
+
+.table th.select,
+.table td.select {
+  width: calc(var(--mirai-ui-space-XL) + var(--mirai-ui-space-S));
+}
+
+.table th .hideIcon {
+  color: var(--mirai-ui-table-base);
+}
+
+.table .checkbox {
+  margin: 0;
+}