@vendorflow/components 2.0.71 → 2.0.74

package/lib/components/material-ui/DataTable/Utils.js

@@ -0,0 +1,119 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var short_uuid_1 = __importDefault(require("short-uuid"));
+var server_1 = require("react-dom/server");
+var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
+/**
+ * This custom hook is designed to replace the `<CellMeasurer />` component in `react-virtualized`
+ * in `react-window`
+ *
+ * This hook returns props to be given to the `<VariableSizeList />` component in `react-window`
+ *
+ * `items` are react elements
+ */
+function useCellMeasurer(_a) {
+    var items = _a.items, renderItem = _a.renderItem;
+    // create a ref to get the `div` element the `VariableSizeList` uses
+    var innerRef = (0, react_1.useRef)(null);
+    // create a unique ID for this cell measurer instance
+    var id = (0, react_1.useMemo)(function () { return short_uuid_1.default.generate(); }, []);
+    // create a "hidden sizing element" in state.
+    //
+    // when the innerRef element mounts, the width of the innerRef will be used for width of
+    // the hidden sizing element
+    var _b = __read((0, react_1.useState)(null), 2), hiddenSizingEl = _b[0], setHiddenSizingEl = _b[1];
+    // this width is used to determine whether the list needs to be re-rendered due to a resize
+    var _c = __read((0, react_1.useState)(0), 2), width = _c[0], setWidth = _c[1];
+    // `itemSize` is a function required by `VariableSizeList`. This function is called when it needs
+    // to get the height of the item inside it.
+    // note: the result of this function is memoized by `react-window` so it will only be called once
+    // to get the item size
+    var itemSize = (0, react_1.useCallback)(function (index) {
+        if (!hiddenSizingEl)
+            return 0;
+        // get the item (which is a react node)
+        var item = items[index];
+        // then render the react node to a string synchronously with `react-dom/server`
+        hiddenSizingEl.innerHTML = (0, server_1.renderToString)(renderItem(item));
+        // get and return the size of the hidden sizing element
+        return hiddenSizingEl.clientHeight || 0;
+    }, [hiddenSizingEl, items]);
+    // this effects adds the hidden sizing element to the DOM
+    (0, react_1.useEffect)(function () {
+        /** @type {HTMLElement} */
+        var innerEl = innerRef.current;
+        if (!innerEl)
+            return;
+        if (hiddenSizingEl)
+            return;
+        var newHiddenSizingEl = document.createElement('div');
+        var width = innerEl.clientWidth;
+        newHiddenSizingEl.classList.add("hidden-sizing-element-" + id);
+        newHiddenSizingEl.style.position = 'absolute';
+        newHiddenSizingEl.style.top = '0';
+        newHiddenSizingEl.style.width = width + "px";
+        newHiddenSizingEl.style.pointerEvents = 'none';
+        newHiddenSizingEl.style.visibility = 'hidden';
+        setHiddenSizingEl(newHiddenSizingEl);
+        document.body.appendChild(newHiddenSizingEl);
+    }, [hiddenSizingEl, id]);
+    // this removes all hidden sizing elements on unmount
+    (0, react_1.useEffect)(function () {
+        // returning a function from `useEffect` is the "clean-up" phase
+        return function () {
+            var hiddenSizingElement = document.querySelector(".hidden-sizing-element-" + id);
+            if (hiddenSizingElement) {
+                document.body.removeChild(hiddenSizingElement);
+            }
+        };
+    }, [id]);
+    // this is used to watch for changes in the size of the list element and sets the width
+    (0, react_1.useEffect)(function () {
+        var el = innerRef.current;
+        if (!el)
+            return;
+        function handleResize() {
+            var width = ((el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) || { width: 0 }).width;
+            setWidth(width);
+        }
+        var resizeObserver = new resize_observer_polyfill_1.default(handleResize);
+        resizeObserver.observe(el);
+        return function () { return resizeObserver.disconnect(); };
+    }, []);
+    // this key is used to re-render the list when the dependencies array changes
+    var key = (0, react_1.useMemo)(function () { return short_uuid_1.default.generate(); }, [itemSize, hiddenSizingEl, width]);
+    // while there is no hidden sizing element, hide the list element
+    var style = hiddenSizingEl
+        ? {}
+        : {
+            visibility: 'hidden',
+        };
+    return {
+        innerRef: innerRef,
+        itemSize: itemSize,
+        itemCount: items.length,
+        key: key,
+        style: style,
+    };
+}
+exports.default = useCellMeasurer;

package/lib/components/material-ui/Modal/Modal.d.ts

@@ -17,6 +17,7 @@ declare type Props = DialogProps & {
     submitting?: boolean;
     open: boolean;
     title?: string;
+    progressValue?: number;
 };
 export default function Modal(props: Props): JSX.Element;
 export {};

package/lib/components/material-ui/Modal/Modal.js

@@ -35,16 +35,22 @@ var react_1 = require("@emotion/react");
 var material_1 = require("@mui/material");
 var Button_1 = __importDefault(require("../Button"));
 function Modal(props) {
-    var children = props.children, classes = props.classes, cancelButton = props.cancelButton, okayButton = props.okayButton, onClose = props.onClose, submitting = props.submitting, open = props.open, title = props.title, restOfProps = __rest(props, ["children", "classes", "cancelButton", "okayButton", "onClose", "submitting", "open", "title"]);
+    var children = props.children, classes = props.classes, cancelButton = props.cancelButton, okayButton = props.okayButton, onClose = props.onClose, submitting = props.submitting, open = props.open, title = props.title, progressValue = props.progressValue, restOfProps = __rest(props, ["children", "classes", "cancelButton", "okayButton", "onClose", "submitting", "open", "title", "progressValue"]);
+    var showProgressBar = typeof progressValue !== 'undefined' && submitting;
     return ((0, react_1.jsx)(material_1.Dialog, __assign({}, restOfProps, { classes: classes, open: open, onClose: onClose }),
         (0, react_1.jsx)(material_1.DialogTitle, null, title),
         (0, react_1.jsx)(material_1.DialogContent, null, typeof children === 'string' ? (0, react_1.jsx)(material_1.DialogContentText, null, children) : children),
-        (0, react_1.jsx)(material_1.DialogActions, null,
-            cancelButton && ((0, react_1.jsx)(Button_1.default, { variant: "text", disabled: cancelButton.disabled || submitting, onClick: cancelButton.onClick }, cancelButton.text)),
-            okayButton && ((0, react_1.jsx)(Button_1.default, { css: function (theme) {
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n          align-items: center;\n        "], ["\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n          align-items: center;\n        "]))) },
+            showProgressBar && ((0, react_1.jsx)(material_1.LinearProgress, { css: function (theme) {
                     var _a, _b;
-                    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              &&.MuiButton-root .MuiCircularProgress-root {\n                color: ", ";\n              }\n            "], ["\n              &&.MuiButton-root .MuiCircularProgress-root {\n                color: ", ";\n              }\n            "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
-                }, color: "primary", variant: "text", disabled: okayButton.disabled, onClick: okayButton.onClick, loading: submitting }, okayButton.text)))));
+                    return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              margin-left: 20px;\n              width: -webkit-fill-available;\n              border-radius: 5px;\n              color: ", ";\n\n              & .MuiLinearProgress-bar {\n                border-radius: 5px;\n              }\n            "], ["\n              margin-left: 20px;\n              width: -webkit-fill-available;\n              border-radius: 5px;\n              color: ", ";\n\n              & .MuiLinearProgress-bar {\n                border-radius: 5px;\n              }\n            "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
+                }, variant: "determinate", value: progressValue })),
+            (0, react_1.jsx)(material_1.DialogActions, null,
+                cancelButton && !showProgressBar && ((0, react_1.jsx)(Button_1.default, { variant: "text", disabled: cancelButton.disabled || submitting, onClick: cancelButton.onClick }, cancelButton.text)),
+                okayButton && ((0, react_1.jsx)(Button_1.default, { css: function (theme) {
+                        var _a, _b;
+                        return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                &&.MuiButton-root .MuiCircularProgress-root {\n                  color: ", ";\n                }\n              "], ["\n                &&.MuiButton-root .MuiCircularProgress-root {\n                  color: ", ";\n                }\n              "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
+                    }, color: "primary", variant: "text", disabled: okayButton.disabled, onClick: okayButton.onClick, loading: submitting }, okayButton.text))))));
 }
 exports.default = Modal;
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/components/material-ui/Modal/Modal.story.js

@@ -44,14 +44,41 @@ var Button_1 = __importDefault(require("../Button"));
 var Modal_1 = __importDefault(require("./Modal"));
 var Modal = function () {
     var _a = __read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
+    var _b = __read((0, react_1.useState)(0), 2), progressValue = _b[0], setProgressValue = _b[1];
+    var _c = __read((0, react_1.useState)(false), 2), isSubmitting = _c[0], setIsSubmitting = _c[1];
+    react_1.default.useEffect(function () {
+        var timer = setInterval(function () {
+            if (isSubmitting) {
+                setProgressValue(function (progressValue) {
+                    if (progressValue === 100) {
+                        alert('Have a great day!!');
+                        handleOnClose();
+                    }
+                    var diff = Math.random() * 15;
+                    return Math.min(progressValue + diff, 100);
+                });
+            }
+        }, 500);
+        return function () {
+            clearInterval(timer);
+        };
+    }, [isSubmitting]);
+    function handleOnClose() {
+        setOpen(false);
+        setIsSubmitting(false);
+        setProgressValue(0);
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return setOpen(true); } }, "Open"),
-        react_1.default.createElement(Modal_1.default, { open: open, submitting: true, title: "My Modal", onClose: function () { return setOpen(false); }, cancelButton: {
+        react_1.default.createElement(Modal_1.default, { open: open, submitting: isSubmitting, title: "My Modal", onClose: handleOnClose, cancelButton: {
                 text: 'Cancel',
                 onClick: function () { return alert('You canceled it!'); },
             }, okayButton: {
                 text: 'Okay',
-                onClick: function () { return alert('Okay!'); },
-            } }, "Hello there! How are you today?")));
+                onClick: function () {
+                    alert('Okay!');
+                    setIsSubmitting(true);
+                },
+            }, progressValue: progressValue }, "Hello there! How are you today?")));
 };
 exports.Modal = Modal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.71",
+  "version": "2.0.74",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -62,7 +62,7 @@
     "@types/react-table": "^7.7.6",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
-    "@vendorflow/common": "^1.0.36",
+    "@vendorflow/common": "^1.0.44",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.2.2",
@@ -115,9 +115,11 @@
     "react-h5-audio-player": "^3.8.1",
     "react-measure": "^2.5.2",
     "react-scripts": "^4.0.3",
+    "react-scrollbar-size": "^4.0.0",
     "react-table": "^7.7.0",
     "react-text-mask": "^5.4.3",
     "react-textarea-autosize": "^8.3.3",
+    "react-virtualized": "^9.22.3",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.1",
     "sass-loader": "8.0.2",
@@ -145,6 +147,7 @@
     "@types/lodash": "^4.14.150",
     "@types/react-measure": "^2.0.7",
     "@types/react-text-mask": "^5.4.6",
+    "@types/react-virtualized": "^9.21.21",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-webpack-plugin": "^2.5.4",