@stokr/components-library 2.1.2 → 2.1.3

package/dist/components/AdminDashboard/Table/ReactTable.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactTable = ReactTable;
+exports.default = exports.ReactTableWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactTable = require("react-table");
+var _Table = require("./Table.styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pagination = _interopRequireDefault(require("../../Pagination/Pagination"));
+var _ComponentWrapper = _interopRequireDefault(require("../../ComponentWrapper/ComponentWrapper.styles"));
+var _Card = require("../../Card/Card.styles");
+var _InputWithButton = _interopRequireDefault(require("../../Input/InputWithButton"));
+var _Button = _interopRequireDefault(require("../../Button/Button.styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+//This components is used only to memoize the values before we sent them to the react-table
+var ReactTableWrapper = function ReactTableWrapper(props) {
+  var makeNewColumns = function makeNewColumns(data) {
+    return data === null || data === void 0 ? void 0 : data.map(function (column) {
+      if (column.key === 'dropdown') {
+        return {
+          Header: function Header() {
+            return null;
+          },
+          id: column.key,
+          Cell: function Cell(_ref) {
+            var row = _ref.row;
+            return (
+              /*#__PURE__*/
+              // Use Cell to render an expander for dropdown cell.
+              // We can use the getToggleRowExpandedProps prop-getter
+              // to build the expander. (moved to the whole row to make it easier to click)
+              _react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Table.TableDropdownIcon, {
+                isActive: row.isExpanded
+              }))
+            );
+          }
+        };
+      }
+      return {
+        Header: column.label,
+        accessor: column.key
+        //totalWidth: 50, // column.width,
+      };
+    });
+  };
+
+  var memoizedColumns = _react.default.useMemo(function () {
+    return makeNewColumns(props.columns);
+  }, []);
+  var memoizedData = _react.default.useMemo(function () {
+    return props.data;
+  }, []);
+  var memoizedSubColumns = _react.default.useMemo(function () {
+    return makeNewColumns(props.subColumns);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(ReactTable, {
+    columns: memoizedColumns,
+    data: memoizedData,
+    subColumns: memoizedSubColumns,
+    blue: props.blue,
+    withSubTable: props.withSubTable,
+    calculateSubData: props.calculateSubData
+  });
+};
+exports.ReactTableWrapper = ReactTableWrapper;
+function ReactTable(props) {
+  var columns = props.columns,
+    data = props.data,
+    subColumns = props.subColumns,
+    blue = props.blue,
+    noPagination = props.noPagination,
+    withSubTable = props.withSubTable,
+    isSubTable = props.isSubTable,
+    calculateSubData = props.calculateSubData;
+
+  // Use the state and functions returned from useTable to build UI
+  var _useTable = (0, _reactTable.useTable)({
+      columns: columns,
+      data: data,
+      initialState: {
+        pageIndex: 0,
+        pageSize: isSubTable ? 10000 : 10
+      }
+    }, _reactTable.useExpanded, _reactTable.usePagination),
+    getTableProps = _useTable.getTableProps,
+    getTableBodyProps = _useTable.getTableBodyProps,
+    headerGroups = _useTable.headerGroups,
+    prepareRow = _useTable.prepareRow,
+    visibleColumns = _useTable.visibleColumns,
+    page = _useTable.page,
+    gotoPage = _useTable.gotoPage,
+    setPageSize = _useTable.setPageSize,
+    _useTable$state = _useTable.state,
+    pageIndex = _useTable$state.pageIndex,
+    pageSize = _useTable$state.pageSize;
+  return /*#__PURE__*/_react.default.createElement(_Table.Styles, null, /*#__PURE__*/_react.default.createElement(_Table.TableWrap, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable, getTableProps(), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
+    return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
+      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Th, _extends({}, column.getHeaderProps({
+        className: column.collapse ? 'collapse' : ''
+      }), {
+        blue: blue
+      }), column.render('Header'));
+    }));
+  })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
+    prepareRow(row);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, row.getRowProps(), row.cells.map(function (cell) {
+      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), cell.getCellProps({
+        className: cell.column.collapse ? 'collapse' : ''
+      }), {
+        blue: blue
+      }), cell.render('Cell'));
+    })), withSubTable && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
+      key: "".concat(row.id, "-").concat(i)
+    }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
+      colSpan: visibleColumns.length,
+      subTable: true
+    }, /*#__PURE__*/_react.default.createElement(ReactTable, {
+      columns: subColumns,
+      data: calculateSubData(row),
+      noPagination: true,
+      isSubTable: true
+    }))));
+  })))), !noPagination && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    flex: true,
+    style: {
+      justifyContent: 'space-between',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+    currentPage: pageIndex + 1,
+    totalCount: data.length,
+    pageSize: pageSize,
+    onPageChange: function onPageChange(page) {
+      return gotoPage(page - 1);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Card.Card, {
+    noPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, {
+    style: {
+      padding: '2px 20px'
+    }
+  }, "Page Size:"), /*#__PURE__*/_react.default.createElement(_InputWithButton.default, {
+    id: "pageSize",
+    name: "pageSize",
+    value: pageSize,
+    type: "number",
+    placeholder: 'Page size',
+    onChange: function onChange(e) {
+      return setPageSize(Number(e.target.value));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default //onClick={() => setPageSize(Number(inputPageSize))}
+  , null, "apply"))))));
+}
+ReactTable.propTypes = {
+  columns: _propTypes.default.array.isRequired,
+  data: _propTypes.default.array.isRequired,
+  subColumns: _propTypes.default.array,
+  calculateSubData: _propTypes.default.func,
+  blue: _propTypes.default.bool,
+  noPagination: _propTypes.default.bool,
+  withSubTable: _propTypes.default.bool,
+  isSubTable: _propTypes.default.bool
+};
+ReactTable.defaultProps = {
+  blue: false,
+  noPagination: false,
+  withSubTable: false,
+  isSubTable: false
+};
+var _default = ReactTableWrapper;
+exports.default = _default;

package/dist/components/AdminDashboard/Table/Table.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableWrapper = exports.TableCellType = exports.StyledTable = exports.Row = exports.HeadWrapper = exports.Head = exports.Container = exports.Column = exports.Body = void 0;
+exports.TableWrapper = exports.TableWrap = exports.TableDropdownIcon = exports.TableCellType = exports.Styles = exports.StyledTr = exports.StyledTh = exports.StyledTd = exports.StyledTable = exports.StyledReactTable = exports.Row = exports.HeadWrapper = exports.Head = exports.Container = exports.Column = exports.Body = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Container = _styledComponents.default.div.withConfig({
@@ -76,4 +76,52 @@ var TableCellType = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.cWhite;
 });
-exports.TableCellType = TableCellType;
+exports.TableCellType = TableCellType;
+var TableDropdownIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-down'
+}).withConfig({
+  displayName: "Tablestyles__TableDropdownIcon",
+  componentId: "sc-pdcd6r-9"
+})(["width:14px;height:20px;font-size:20px;margin-top:-10px;transform:rotate(0);transition:0.3s transform;cursor:pointer;", ""], function (props) {
+  return props.isActive && "\n      transform: rotate(180deg);\n  ";
+});
+exports.TableDropdownIcon = TableDropdownIcon;
+var Styles = _styledComponents.default.div.withConfig({
+  displayName: "Tablestyles__Styles",
+  componentId: "sc-pdcd6r-10"
+})(["display:block;max-width:100%;table{th,td{&.collapse{width:0.0000000001%;}}}"]);
+exports.Styles = Styles;
+var TableWrap = _styledComponents.default.div.withConfig({
+  displayName: "Tablestyles__TableWrap",
+  componentId: "sc-pdcd6r-11"
+})(["display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;"]);
+exports.TableWrap = TableWrap;
+var StyledTh = _styledComponents.default.th.withConfig({
+  displayName: "Tablestyles__StyledTh",
+  componentId: "sc-pdcd6r-12"
+})(["text-transform:uppercase;padding:10px;font-size:11px;letter-spacing:1.6px;font-weight:600;background-color:white;color:#000000de;border-bottom:1px solid #e1e1e1;line-height:20px;", ""], function (props) {
+  return props.blue && "\n      background-color: #0050ca;\n      color: #ffffff;\n      border:none;\n  ";
+});
+exports.StyledTh = StyledTh;
+var StyledTd = _styledComponents.default.td.withConfig({
+  displayName: "Tablestyles__StyledTd",
+  componentId: "sc-pdcd6r-13"
+})(["padding:26px 15px;border-bottom:1px solid #e1e1e1;font-size:14px;", " ", ""], function (props) {
+  return props.blue && "\n      background-color: #004bb7;\n    color: #ffffff;\n  ";
+}, function (props) {
+  return props.subTable && "\n     padding: 0;\n      &:last-child {\n        border-bottom: 0;\n      }\n  ";
+});
+exports.StyledTd = StyledTd;
+var StyledTr = _styledComponents.default.tr.withConfig({
+  displayName: "Tablestyles__StyledTr",
+  componentId: "sc-pdcd6r-14"
+})([""]);
+exports.StyledTr = StyledTr;
+var StyledReactTable = _styledComponents.default.table.withConfig({
+  displayName: "Tablestyles__StyledReactTable",
+  componentId: "sc-pdcd6r-15"
+})(["width:100%;border-spacing:0;"]);
+exports.StyledReactTable = StyledReactTable;
+StyledReactTable.Tr = StyledTr;
+StyledReactTable.Th = StyledTh;
+StyledReactTable.Td = StyledTd;

package/dist/components/Background/Background.stories.js

@@ -47,7 +47,9 @@ var Template = function Template(args) {
 };
 var BackgroundDefault = Template.bind({});
 exports.BackgroundDefault = BackgroundDefault;
-BackgroundDefault.args = {};
+BackgroundDefault.args = {
+  src: 'https://www.cookingclassy.com/wp-content/uploads/2014/06/chocolate-chip-cookie-16.jpg'
+};
 BackgroundDefault.parameters = {
   viewport: {
     defaultViewport: 'reset viewport'

package/dist/index.js

@@ -25,6 +25,17 @@ Object.keys(_Table).forEach(function (key) {
     }
   });
 });
+var _ReactTable = require("./components/AdminDashboard/Table/ReactTable");
+Object.keys(_ReactTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ReactTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ReactTable[key];
+    }
+  });
+});
 var _AgreementItem = require("./components/AgreementItem/AgreementItem");
 Object.keys(_AgreementItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -67,6 +67,7 @@
     "react-scripts": "5.0.1",
     "react-select": "^5.7.0",
     "react-slick": "^0.29.0",
+    "react-table": "^7.8.0",
     "react-tippy": "^1.4.0",
     "react-transition-group": "^4.4.5",
     "scroll-to-element": "^2.0.3",