@webiny/ui 5.33.5 → 5.34.0-beta.0

package/DataTable/DataTable.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataTable = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _dataTable = require("@rmwc/data-table");
+
+var _reactTable = require("@tanstack/react-table");
+
+var _Checkbox = require("../Checkbox");
+
+var _Skeleton = require("../Skeleton");
+
+require("@rmwc/data-table/data-table.css");
+
+var _styled = require("./styled");
+
+var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial) {
+  return (0, _react.useMemo)(function () {
+    var columnsList = Object.keys(columns).map(function (key) {
+      return (0, _objectSpread2.default)({
+        id: key
+      }, columns[key]);
+    });
+    var defaults = columnsList.map(function (column) {
+      var id = column.id,
+          _header = column.header,
+          meta = column.meta,
+          _cell = column.cell;
+      return {
+        accessorKey: id,
+        header: function header() {
+          return _header;
+        },
+        cell: function cell(info) {
+          if (_cell && typeof _cell === "function") {
+            return _cell(info.row.original);
+          } else {
+            return info.getValue();
+          }
+        },
+        meta: meta
+      };
+    });
+    var select = !!onSelectRow ? [{
+      id: "datatable-select-column",
+      header: function header(_ref) {
+        var table = _ref.table;
+        return !loadingInitial && /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+          indeterminate: table.getIsSomeRowsSelected(),
+          value: table.getIsAllRowsSelected(),
+          onChange: function onChange(e) {
+            return table.toggleAllPageRowsSelected(e);
+          }
+        });
+      },
+      cell: function cell(_ref2) {
+        var row = _ref2.row;
+        return /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+          indeterminate: row.getIsSomeSelected(),
+          value: row.getIsSelected(),
+          onChange: row.getToggleSelectedHandler()
+        });
+      },
+      meta: {
+        hasFormControl: true,
+        className: "datatable-select-column"
+      }
+    }] : [];
+    return [].concat(select, (0, _toConsumableArray2.default)(defaults)).map(function (column) {
+      if (loadingInitial) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, column), {}, {
+          cell: function cell() {
+            return /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null);
+          }
+        });
+      }
+
+      return column;
+    });
+  }, [columns, onSelectRow, loadingInitial]);
+};
+
+var defineData = function defineData(data, loadingInitial) {
+  return (0, _react.useMemo)(function () {
+    if (loadingInitial) {
+      return Array(10).fill({});
+    }
+
+    return data;
+  }, [data, loadingInitial]);
+};
+
+var DataTable = function DataTable(_ref3) {
+  var columns = _ref3.columns,
+      data = _ref3.data,
+      loadingInitial = _ref3.loadingInitial,
+      onSelectRow = _ref3.onSelectRow,
+      stickyColumns = _ref3.stickyColumns,
+      stickyRows = _ref3.stickyRows;
+
+  var _React$useState = _react.default.useState({}),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      rowSelection = _React$useState2[0],
+      setRowSelection = _React$useState2[1];
+
+  var table = (0, _reactTable.useReactTable)({
+    data: defineData(data, loadingInitial),
+    columns: defineColumns(columns, onSelectRow, loadingInitial),
+    getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    state: {
+      rowSelection: rowSelection
+    },
+    enableRowSelection: !!onSelectRow,
+    onRowSelectionChange: setRowSelection
+  });
+  (0, _react.useEffect)(function () {
+    if (onSelectRow && typeof onSelectRow === "function") {
+      var dataSelected = table.getSelectedRowModel().flatRows.map(function (row) {
+        return row.original;
+      });
+      onSelectRow(dataSelected);
+    }
+  }, [rowSelection]);
+  return /*#__PURE__*/_react.default.createElement(_styled.Table, {
+    stickyColumns: stickyColumns,
+    stickyRows: stickyRows
+  }, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableContent, null, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHead, null, table.getHeaderGroups().map(function (headerGroup) {
+    return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
+      key: headerGroup.id
+    }, headerGroup.headers.map(function (header) {
+      return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHeadCell, Object.assign({
+        key: header.id
+      }, header.column.columnDef.meta), header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_dataTable.DataTableBody, null, table.getRowModel().rows.map(function (row) {
+    return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
+      key: row.id,
+      selected: rowSelection.hasOwnProperty(row.index)
+    }, row.getVisibleCells().map(function (cell) {
+      return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableCell, Object.assign({
+        key: cell.id
+      }, cell.column.columnDef.meta), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+    }));
+  }))));
+};
+
+exports.DataTable = DataTable;

package/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","DataTable","stickyColumns","stickyRows","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","state","enableRowSelection","onRowSelectionChange","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","columnDef","isPlaceholder","flexRender","getContext","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport { flexRender, getCoreRowModel, useReactTable, ColumnDef } from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { Table } from \"./styled\";\n\ninterface Column<T> {\n    /*\n     * Column header component.\n     */\n    header: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element;\n    /*\n     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\n    /*\n     * Column class names.\n     */\n    className?: string;\n}\n\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\ninterface Props<T> {\n    /*\n     * Columns definition.\n     */\n    columns: Columns<T>;\n    /*\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /*\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[] | []) => void;\n    /*\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n    /*\n     * The number of columns to affix to the side of the table when scrolling.\n     */\n    stickyColumns?: number;\n    /*\n     * The number of rows to affix to the top of the table when scrolling.\n     */\n    stickyRows?: number;\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    onSelectRow: Props<T>[\"onSelectRow\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n    useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const { id, header, meta, cell } = column;\n\n            return {\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue();\n                    }\n                },\n                meta\n            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) =>\n                          !loadingInitial && (\n                              <Checkbox\n                                  indeterminate={table.getIsSomeRowsSelected()}\n                                  value={table.getIsAllRowsSelected()}\n                                  onChange={e => table.toggleAllPageRowsSelected(e)}\n                              />\n                          ),\n                      cell: ({ row }) => (\n                          <Checkbox\n                              indeterminate={row.getIsSomeSelected()}\n                              value={row.getIsSelected()}\n                              onChange={row.getToggleSelectedHandler()}\n                          />\n                      ),\n                      meta: {\n                          hasFormControl: true,\n                          className: \"datatable-select-column\"\n                      }\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, loadingInitial]);\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    return useMemo(() => {\n        if (loadingInitial) {\n            return Array(10).fill({});\n        }\n        return data;\n    }, [data, loadingInitial]);\n};\n\nexport const DataTable = <T,>({\n    columns,\n    data,\n    loadingInitial,\n    onSelectRow,\n    stickyColumns,\n    stickyRows\n}: Props<T>) => {\n    const [rowSelection, setRowSelection] = React.useState({});\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, onSelectRow, loadingInitial),\n        getCoreRowModel: getCoreRowModel(),\n        state: {\n            rowSelection\n        },\n        enableRowSelection: !!onSelectRow,\n        onRowSelectionChange: setRowSelection\n    });\n\n    useEffect(() => {\n        if (onSelectRow && typeof onSelectRow === \"function\") {\n            const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n            onSelectRow(dataSelected);\n        }\n    }, [rowSelection]);\n\n    return (\n        <Table stickyColumns={stickyColumns} stickyRows={stickyRows}>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(header => (\n                                <DataTableHeadCell\n                                    key={header.id}\n                                    {...header.column.columnDef.meta}\n                                >\n                                    {header.isPlaceholder\n                                        ? null\n                                        : flexRender(\n                                              header.column.columnDef.header,\n                                              header.getContext()\n                                          )}\n                                </DataTableHeadCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <DataTableRow\n                            key={row.id}\n                            selected={rowSelection.hasOwnProperty(row.index)}\n                        >\n                            {row.getVisibleCells().map(cell => (\n                                <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </DataTableCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":"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"}

package/DataTable/DataTable.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/DataTable/DataTable.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../DataTable/README.md"));
+
+var _DataTable = require("./DataTable");
+
+var story = (0, _react2.storiesOf)("Components/DataTable", module);
+story.add("usage", function () {
+  var data = [{
+    name: "Page 1",
+    createdBy: "John Doe",
+    lastModified: "3 days ago",
+    status: "Draft"
+  }, {
+    name: "Page 2",
+    createdBy: "John Doe",
+    lastModified: "1 day ago",
+    status: "Published"
+  }, {
+    name: "Page 3",
+    createdBy: "John Doe",
+    lastModified: "1 hour ago",
+    status: "Published"
+  }];
+  var columns = {
+    name: {
+      header: "Title"
+    },
+    createdBy: {
+      header: "Author",
+      cell: function cell(row) {
+        return /*#__PURE__*/_react.default.createElement("em", null, row.createdBy.toUpperCase());
+      }
+    },
+    lastModified: {
+      header: "Last Modified"
+    },
+    status: {
+      header: "Status",
+      meta: {
+        alignEnd: true
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A simple DataTable."
+  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
+    data: data,
+    columns: columns
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "DataTable with selectable rows"
+  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
+    data: data,
+    columns: columns,
+    onSelectRow: function onSelectRow(row) {
+      return console.log("Do whatever you like with the selected row data", row);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "DataTable at initial loading state"
+  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
+    data: data,
+    columns: columns,
+    loadingInitial: true
+  })));
+}, {
+  info: {
+    propTables: [_DataTable.DataTable]
+  }
+});

package/DataTable/DataTable.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","data","name","createdBy","lastModified","status","columns","header","cell","row","toUpperCase","meta","alignEnd","readme","console","log","info","propTables","DataTable"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataTable/README.md\";\nimport { Columns, DataTable } from \"./DataTable\";\n\nconst story = storiesOf(\"Components/DataTable\", module);\n\ninterface Entry {\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\nstory.add(\n    \"usage\",\n    () => {\n        const data: Entry[] = [\n            {\n                name: \"Page 1\",\n                createdBy: \"John Doe\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                name: \"Page 2\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 day ago\",\n                status: \"Published\"\n            },\n            {\n                name: \"Page 3\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            }\n        ];\n\n        const columns: Columns<Entry> = {\n            name: {\n                header: \"Title\"\n            },\n            createdBy: {\n                header: \"Author\",\n                cell: row => <em>{row.createdBy.toUpperCase()}</em>\n            },\n            lastModified: {\n                header: \"Last Modified\"\n            },\n            status: {\n                header: \"Status\",\n                meta: {\n                    alignEnd: true\n                }\n            }\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple DataTable.\"}>\n                    <DataTable data={data} columns={columns} />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable with selectable rows\"}>\n                    <DataTable\n                        data={data}\n                        columns={columns}\n                        onSelectRow={row =>\n                            console.log(\"Do whatever you like with the selected row data\", row)\n                        }\n                    />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable at initial loading state\"}>\n                    <DataTable data={data} columns={columns} loadingInitial={true} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [DataTable]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AASAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAa,GAAG,CAClB;IACIC,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,YAHlB;IAIIC,MAAM,EAAE;EAJZ,CADkB,EAOlB;IACIH,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,WAHlB;IAIIC,MAAM,EAAE;EAJZ,CAPkB,EAalB;IACIH,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,YAHlB;IAIIC,MAAM,EAAE;EAJZ,CAbkB,CAAtB;EAqBA,IAAMC,OAAuB,GAAG;IAC5BJ,IAAI,EAAE;MACFK,MAAM,EAAE;IADN,CADsB;IAI5BJ,SAAS,EAAE;MACPI,MAAM,EAAE,QADD;MAEPC,IAAI,EAAE,cAAAC,GAAG;QAAA,oBAAI,yCAAKA,GAAG,CAACN,SAAJ,CAAcO,WAAd,EAAL,CAAJ;MAAA;IAFF,CAJiB;IAQ5BN,YAAY,EAAE;MACVG,MAAM,EAAE;IADE,CARc;IAW5BF,MAAM,EAAE;MACJE,MAAM,EAAE,QADJ;MAEJI,IAAI,EAAE;QACFC,QAAQ,EAAE;MADR;IAFF;EAXoB,CAAhC;EAmBA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IAAW,IAAI,EAAEZ,IAAjB;IAAuB,OAAO,EAAEK;EAAhC,EADJ,CAFJ,eAKI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IACI,IAAI,EAAEL,IADV;IAEI,OAAO,EAAEK,OAFb;IAGI,WAAW,EAAE,qBAAAG,GAAG;MAAA,OACZK,OAAO,CAACC,GAAR,CAAY,iDAAZ,EAA+DN,GAA/D,CADY;IAAA;EAHpB,EADJ,CALJ,eAcI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IAAW,IAAI,EAAER,IAAjB;IAAuB,OAAO,EAAEK,OAAhC;IAAyC,cAAc,EAAE;EAAzD,EADJ,CAdJ,CADJ;AAoBH,CA/DL,EAgEI;EACIU,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,oBAAD;EADV;AADV,CAhEJ"}

package/DataTable/README.md

@@ -0,0 +1,72 @@
+# DataTable
+
+### Design
+
+https://material.io/components/data-tables
+
+### Description
+
+Use `DataTable` components to display sets of data across rows and columns.
+
+### Usage
+
+```tsx
+import { DataTable, Columns } from "@webiny/ui/DataTable";
+
+// Declare the data structure.
+interface Entry {
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the data you want to display.
+const data: Entry[] = [
+    {
+        name: "Page 1",
+        createdBy: "John Doe",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        name: "Page 2",
+        createdBy: "John Doe",
+        lastModified: "1 day ago",
+        status: "Published"
+    },
+    {
+        name: "Page 3",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    }
+];
+
+// Define the columns structure for your table.
+const columns: Columns<Entry> = {
+    name: {
+        header: "Title"
+    },
+    createdBy: {
+        header: "Author",
+        cell: row => <em>{row.createdBy.toUpperCase()}</em>
+    },
+    lastModified: {
+        header: "Last Modified"
+    },
+    status: {
+        header: "Status",
+        meta: {
+            alignEnd: true
+        }
+    }
+};
+
+...
+
+// Use the <DataTable /> component within your code.
+return(
+    <DataTable data={data} columns={columns} />
+)
+```

package/DataTable/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataTable";

package/DataTable/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DataTable = require("./DataTable");
+
+Object.keys(_DataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[key];
+    }
+  });
+});

package/DataTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/DataTable/styled.d.ts

@@ -0,0 +1,2 @@
+import { DataTableProps } from "@rmwc/data-table";
+export declare const Table: import("@emotion/styled-base").StyledComponent<{}, DataTableProps, object>;

package/DataTable/styled.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _dataTable = require("@rmwc/data-table");
+
+var Table = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTable, {
+  label: "Table",
+  target: "er5nqo40"
+})("width:100%;th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
+exports.Table = Table;

package/DataTable/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Table","styled","RmwcDataTable"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\n\nexport const Table = styled(RmwcDataTable)<DataTableProps>`\n    width: 100%;\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEO,IAAMA,KAAK,oBAAGC,eAAH,EAAUC,oBAAV;EAAA;EAAA;AAAA,mFAAX"}

package/DelayedOnChange/DelayedOnChange.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="web" />
+import React from "react";
+interface ApplyValueCb {
+    (value: string, cb: (value: string) => void): void;
+}
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+interface OnChangeCallable {
+    (value: string, cb?: ApplyValueCb): void;
+}
+interface OnBlurCallable {
+    (ev: React.SyntheticEvent): void;
+}
+interface OnKeyDownCallable {
+    (ev: React.KeyboardEvent<HTMLInputElement>): void;
+}
+interface ChildrenCallableParams {
+    value: string;
+    onChange: OnChangeCallable;
+}
+interface ChildrenCallable {
+    (params: ChildrenCallableParams): React.ReactElement;
+}
+export interface DelayedOnChangeProps {
+    value?: string;
+    delay?: number;
+    onChange?: OnChangeCallable;
+    onBlur?: OnBlurCallable;
+    onKeyDown?: OnKeyDownCallable;
+    children: React.ReactNode | ChildrenCallable;
+}
+export declare const DelayedOnChange: React.FC<DelayedOnChangeProps>;
+export default DelayedOnChange;

package/DelayedOnChange/DelayedOnChange.js

@@ -0,0 +1,129 @@
+"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.default = exports.DelayedOnChange = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _excluded = ["children"];
+
+var emptyFunction = function emptyFunction() {
+  return undefined;
+};
+
+var DelayedOnChange = function DelayedOnChange(_ref) {
+  var children = _ref.children,
+      other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var onChange = other.onChange,
+      _other$delay = other.delay,
+      delay = _other$delay === void 0 ? 400 : _other$delay,
+      initialValue = other.value;
+
+  var _useState = (0, _react.useState)(initialValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1]; // Sync state and props
+
+
+  (0, _react.useEffect)(function () {
+    if (initialValue !== value) {
+      setValue(initialValue);
+    }
+  }, [initialValue]);
+
+  var localTimeout = _react.default.useRef(null);
+
+  var applyValue = function applyValue(value) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : emptyFunction;
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+
+    if (!onChange) {
+      return;
+    }
+
+    onChange(value, callback);
+  };
+
+  var onChangeLocal = _react.default.useCallback(function (value) {
+    setValue(value);
+  }, []); // this is fired upon change value state
+
+
+  var onValueStateChanged = function onValueStateChanged(nextValue) {
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+    localTimeout.current = setTimeout(function () {
+      return applyValue(nextValue);
+    }, delay);
+  }; // need to clear the timeout when unmounting the component
+
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (!localTimeout.current) {
+        return;
+      }
+
+      clearTimeout(localTimeout.current);
+      localTimeout.current = null;
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    onValueStateChanged(value || "");
+  }, [value]);
+  var newProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, other), {}, {
+    value: value || "",
+    onChange: onChangeLocal
+  });
+  var renderProp = typeof children === "function" ? children : null;
+  var child = renderProp ? renderProp(newProps) : /*#__PURE__*/_react.default.cloneElement(children, newProps);
+  var props = (0, _objectSpread2.default)({}, child.props);
+  var realOnKeyDown = props.onKeyDown || emptyFunction;
+  var realOnBlur = props.onBlur || emptyFunction; // Need to apply value if input lost focus
+
+  var onBlur = function onBlur(ev) {
+    ev.persist();
+    applyValue(ev.target.value, function () {
+      return realOnBlur(ev);
+    });
+  }; // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
+
+
+  var onKeyDown = function onKeyDown(ev) {
+    ev.persist();
+
+    if (ev.key === "Tab") {
+      applyValue(ev.target.value, function () {
+        return realOnKeyDown(ev);
+      });
+    } else if (ev.key === "Enter" && props["data-on-enter"]) {
+      applyValue(ev.target.value, function () {
+        return realOnKeyDown(ev);
+      });
+    } else {
+      realOnKeyDown(ev);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    onBlur: onBlur,
+    onKeyDown: onKeyDown
+  }));
+};
+
+exports.DelayedOnChange = DelayedOnChange;
+var _default = DelayedOnChange;
+exports.default = _default;

package/DelayedOnChange/DelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["emptyFunction","undefined","DelayedOnChange","children","other","onChange","delay","initialValue","value","useState","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n    return undefined;\n};\n\ninterface ApplyValueCb {\n    (value: string, cb: (value: string) => void): void;\n}\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\ninterface OnChangeCallable {\n    (value: string, cb?: ApplyValueCb): void;\n}\ninterface OnBlurCallable {\n    (ev: React.SyntheticEvent): void;\n}\ninterface OnKeyDownCallable {\n    (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\ninterface ChildrenCallableParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface ChildrenCallable {\n    (params: ChildrenCallableParams): React.ReactElement;\n}\nexport interface DelayedOnChangeProps {\n    value?: string;\n    delay?: number;\n    onChange?: OnChangeCallable;\n    onBlur?: OnBlurCallable;\n    onKeyDown?: OnKeyDownCallable;\n    children: React.ReactNode | ChildrenCallable;\n}\nexport const DelayedOnChange: React.FC<DelayedOnChangeProps> = ({ children, ...other }) => {\n    const { onChange, delay = 400, value: initialValue } = other;\n    const [value, setValue] = useState<string | undefined>(initialValue);\n    // Sync state and props\n    useEffect(() => {\n        if (initialValue !== value) {\n            setValue(initialValue);\n        }\n    }, [initialValue]);\n\n    const localTimeout = React.useRef<number | null>(null);\n\n    const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        if (!onChange) {\n            return;\n        }\n        onChange(value, callback);\n    };\n\n    const onChangeLocal = React.useCallback((value: string) => {\n        setValue(value);\n    }, []);\n\n    // this is fired upon change value state\n    const onValueStateChanged = (nextValue: string) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n    };\n\n    // need to clear the timeout when unmounting the component\n    useEffect(() => {\n        return () => {\n            if (!localTimeout.current) {\n                return;\n            }\n            clearTimeout(localTimeout.current);\n            localTimeout.current = null;\n        };\n    }, []);\n\n    useEffect(() => {\n        onValueStateChanged(value || \"\");\n    }, [value]);\n\n    const newProps = {\n        ...other,\n        value: value || \"\",\n        onChange: onChangeLocal\n    };\n\n    const renderProp = typeof children === \"function\" ? (children as ChildrenCallable) : null;\n    const child = renderProp\n        ? renderProp(newProps)\n        : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n    const props = { ...child.props };\n    const realOnKeyDown = props.onKeyDown || emptyFunction;\n    const realOnBlur = props.onBlur || emptyFunction;\n\n    // Need to apply value if input lost focus\n    const onBlur: OnBlurCallable = ev => {\n        ev.persist();\n        applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n    };\n\n    // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n    const onKeyDown: OnKeyDownCallable = ev => {\n        ev.persist();\n        if (ev.key === \"Tab\") {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":"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"}

package/DelayedOnChange/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DelayedOnChange } from "./DelayedOnChange";
+export { default as withDelayedOnChange } from "./withDelayedOnChange";

package/DelayedOnChange/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DelayedOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _DelayedOnChange.default;
+  }
+});
+Object.defineProperty(exports, "withDelayedOnChange", {
+  enumerable: true,
+  get: function get() {
+    return _withDelayedOnChange.default;
+  }
+});
+
+var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
+
+var _withDelayedOnChange = _interopRequireDefault(require("./withDelayedOnChange"));

package/DelayedOnChange/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as DelayedOnChange } from \"./DelayedOnChange\";\nexport { default as withDelayedOnChange } from \"./withDelayedOnChange\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}

package/DelayedOnChange/withDelayedOnChange.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DelayedOnChangeProps } from "./DelayedOnChange";
+export default function withDelayedOnChange(): (Component: React.FC<DelayedOnChangeProps>) => (props: DelayedOnChangeProps) => JSX.Element;