@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.40876133bb

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 @@
+export declare const Table: import("@emotion/styled-base").StyledComponent<{}, Pick<{}, never>, 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 } from \"@rmwc/data-table\";\n\nexport const Table = styled(RmwcDataTable)`\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;

package/DelayedOnChange/withDelayedOnChange.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = withDelayedOnChange;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DelayedOnChange = _interopRequireDefault(require("./DelayedOnChange"));
+
+var _excluded = ["value", "onChange"];
+
+function withDelayedOnChange() {
+  return function decorator(Component) {
+    return function WithDelayedOnChange(props) {
+      var value = props.value,
+          onChange = props.onChange,
+          rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_DelayedOnChange.default, {
+        value: value,
+        onChange: onChange
+      }, function (_ref) {
+        var value = _ref.value,
+            onChange = _ref.onChange;
+        return /*#__PURE__*/_react.default.createElement(Component, Object.assign({}, rest, {
+          value: value,
+          onChange: onChange
+        }));
+      });
+    };
+  };
+}

package/DelayedOnChange/withDelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["withDelayedOnChange","decorator","Component","WithDelayedOnChange","props","value","onChange","rest"],"sources":["withDelayedOnChange.tsx"],"sourcesContent":["import React from \"react\";\nimport Delayed, { DelayedOnChangeProps } from \"./DelayedOnChange\";\n\nexport default function withDelayedOnChange() {\n    return function decorator(Component: React.FC<DelayedOnChangeProps>) {\n        return function WithDelayedOnChange(props: DelayedOnChangeProps) {\n            const { value, onChange, ...rest } = props;\n            return (\n                <Delayed value={value} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <Component {...rest} value={value} onChange={onChange} />\n                    )}\n                </Delayed>\n            );\n        };\n    };\n}\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEe,SAASA,mBAAT,GAA+B;EAC1C,OAAO,SAASC,SAAT,CAAmBC,SAAnB,EAA8D;IACjE,OAAO,SAASC,mBAAT,CAA6BC,KAA7B,EAA0D;MAC7D,IAAQC,KAAR,GAAqCD,KAArC,CAAQC,KAAR;MAAA,IAAeC,QAAf,GAAqCF,KAArC,CAAeE,QAAf;MAAA,IAA4BC,IAA5B,0CAAqCH,KAArC;MACA,oBACI,6BAAC,wBAAD;QAAS,KAAK,EAAEC,KAAhB;QAAuB,QAAQ,EAAEC;MAAjC,GACK;QAAA,IAAGD,KAAH,QAAGA,KAAH;QAAA,IAAUC,QAAV,QAAUA,QAAV;QAAA,oBACG,6BAAC,SAAD,oBAAeC,IAAf;UAAqB,KAAK,EAAEF,KAA5B;UAAmC,QAAQ,EAAEC;QAA7C,GADH;MAAA,CADL,CADJ;IAOH,CATD;EAUH,CAXD;AAYH"}

package/Dialog/Dialog.d.ts

@@ -1,29 +1,29 @@
-import * as React from "react";
+/// <reference types="web" />
+import React from "react";
 import { DialogProps as RmwcDialogProps, DialogOnCloseEventT, DialogContentProps as RmwcDialogContentProps, DialogTitleProps as RmwcDialogTitleProps, DialogActionsProps as RmwcDialogActionsProps, DialogButtonProps as RmwcDialogButtonProps } from "@rmwc/dialog";
 export declare type DialogOnClose = (event: DialogOnCloseEventT) => void;
-export declare type DialogProps = RmwcDialogProps & {
-    children: any;
+export interface DialogProps extends RmwcDialogProps {
     className?: string;
     style?: React.CSSProperties;
     open?: boolean;
     onClose?: (evt: DialogOnCloseEventT) => void;
     preventOutsideDismiss?: boolean;
-};
+}
 export declare class Dialog extends React.Component<DialogProps> {
-    container?: Element;
-    constructor(props: any);
+    container: HTMLElement;
+    constructor(props: DialogProps);
     render(): React.ReactPortal;
 }
-export declare type DialogTitleProps = RmwcDialogTitleProps & {
+export interface DialogTitleProps extends RmwcDialogTitleProps {
     /**
      * Title text.
      */
     children: React.ReactNode[] | React.ReactNode;
-};
+}
 /**
  * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
  */
-export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;
+export declare const DialogTitle: React.FC<DialogTitleProps>;
 export declare type DialogContentProps = RmwcDialogContentProps & {
     /**
      * Dialog content.
@@ -34,55 +34,47 @@ export declare type DialogContentProps = RmwcDialogContentProps & {
 /**
  * A simple component for showing dialog's body.
  */
-export declare const DialogContent: (props: DialogContentProps) => JSX.Element;
-export declare type DialogActionsProps = RmwcDialogActionsProps & {
+export declare const DialogContent: React.FC<DialogContentProps>;
+export interface DialogActionsProps extends RmwcDialogActionsProps {
     /**
      * Action buttons.
      */
     children: React.ReactNode[] | React.ReactNode;
     style?: React.CSSProperties;
-};
+}
 /**
  * Can be used to show accept and cancel buttons.
  */
-export declare const DialogActions: (props: DialogActionsProps) => JSX.Element;
-declare type DialogButtonProps = RmwcDialogButtonProps & {
+export declare const DialogActions: React.FC<DialogActionsProps>;
+interface DialogButtonProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
      */
     onClick?: (e: React.MouseEvent) => void;
     className?: string;
-};
+}
 /**
  * Use this to show a simple button.
  */
-export declare const DialogButton: (props: DialogButtonProps) => JSX.Element;
-declare type DialogCancelProps = RmwcDialogButtonProps & {
-    /**
-     * Children elements.
-     */
-    children: React.ReactNode;
+export declare const DialogButton: React.FC<DialogButtonProps>;
+interface DialogCancelProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
      */
     onClick?: (e: React.MouseEvent) => void;
-};
+}
 /**
  * Use this to close the dialog without taking any additional action.
  */
-export declare const DialogCancel: (props: DialogCancelProps) => JSX.Element;
-declare type DialogAcceptProps = RmwcDialogButtonProps & {
-    /**
-     * Children elements.
-     */
-    children: React.ReactNode;
+export declare const DialogCancel: React.FC<DialogCancelProps>;
+interface DialogAcceptProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
      */
     onClick?: (e: React.MouseEvent) => void;
-};
+}
 /**
  * Use this to close the dialog without taking any additional action.
  */
-export declare const DialogAccept: (props: DialogAcceptProps) => JSX.Element;
+export declare const DialogAccept: React.FC<DialogAcceptProps>;
 export {};