@vendorflow/components 2.0.73 → 2.0.76

package/lib/components/material-ui/DataTable/TablePieces/ViewColumnTool.js

@@ -0,0 +1,76 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 });
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
+var material_1 = require("@mui/material");
+var icons_material_1 = require("@mui/icons-material");
+var nanoid_1 = require("nanoid");
+var IndeterminateCheckbox_1 = __importDefault(require("./IndeterminateCheckbox"));
+function ViewColumnTool(_a) {
+    var allColumns = _a.allColumns, columnNameById = _a.columnNameById;
+    var id = (0, react_2.useMemo)(function () { return (0, nanoid_1.nanoid)(); }, []);
+    var _b = __read((0, react_2.useState)(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
+    var open = !!anchorEl;
+    function handleClick(evt) {
+        setAnchorEl(evt.currentTarget);
+    }
+    function handleClose() {
+        setAnchorEl(null);
+    }
+    return ((0, react_1.jsx)(react_2.Fragment, null,
+        (0, react_1.jsx)(material_1.Tooltip, { title: "Show Columns" },
+            (0, react_1.jsx)(material_1.IconButton, { "aria-describedby": id, onClick: handleClick },
+                (0, react_1.jsx)(icons_material_1.ViewColumn, null))),
+        (0, react_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
+            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            padding: 0.5rem;\n          "], ["\n            padding: 0.5rem;\n          "]))) },
+                (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: row;\n              justify-content: flex-start;\n              align-items: center;\n            "], ["\n              display: flex;\n              flex-direction: row;\n              justify-content: flex-start;\n              align-items: center;\n            "]))) },
+                    (0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                font-size: 14px;\n                color: rgba(0, 0, 0, 0.54);\n              "], ["\n                font-size: 14px;\n                color: rgba(0, 0, 0, 0.54);\n              "]))) }, "Show Columns"),
+                    (0, react_1.jsx)(material_1.Tooltip, { title: "Close" },
+                        (0, react_1.jsx)(material_1.IconButton, { onClick: handleClose },
+                            (0, react_1.jsx)(icons_material_1.Close, null)))),
+                (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: flex-start;\n              align-items: flex-start;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: flex-start;\n              align-items: flex-start;\n            "]))) }, allColumns
+                    .filter(function (column) { return column.id !== 'custom'; })
+                    .map(function (column) {
+                    return ((0, react_1.jsx)(material_1.FormControlLabel, { key: column.id, label: columnNameById[column.id], 
+                        // @ts-ignore
+                        control: (0, react_1.jsx)(IndeterminateCheckbox_1.default, __assign({}, column.getToggleHiddenProps())) }));
+                }))))));
+}
+exports.default = ViewColumnTool;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/material-ui/DataTable/Utils.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import short from 'short-uuid';
+import { EnhancedRow } from './DataTable';
+/**
+ * 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
+ */
+export default function useCellMeasurer({ items, renderItem, }: {
+    items: any[];
+    renderItem: (item: EnhancedRow<any>) => JSX.Element;
+}): {
+    innerRef: import("react").RefObject<HTMLDivElement>;
+    itemSize: (index: any) => number;
+    itemCount: number;
+    key: short.SUUID;
+    style: {
+        visibility?: undefined;
+    } | {
+        visibility: string;
+    };
+};

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/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactNode } from 'react';
+export default function ErrorBoundary({ children, onReset, }: {
+    children: ReactNode;
+    onReset: (...args: Array<unknown>) => void | Promise<void>;
+}): jsx.JSX.Element;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var react_error_boundary_1 = require("react-error-boundary");
+function ErrorFallback(_a) {
+    var resetErrorBoundary = _a.resetErrorBoundary;
+    return ((0, react_1.jsx)(material_1.Alert, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n      "], ["\n        width: 100%;\n      "]))), severity: "error", action: (0, react_1.jsx)(material_1.Button, { color: "inherit", size: "small", onClick: resetErrorBoundary }, "Reload") }, "Something went wrong when trying to load this view's data. Please try to reload the data again."));
+}
+function ErrorBoundary(_a) {
+    var children = _a.children, onReset = _a.onReset;
+    return ((0, react_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: onReset }, children));
+}
+exports.default = ErrorBoundary;
+var templateObject_1;

package/lib/components/material-ui/ErrorBoundary/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary';

package/lib/components/material-ui/ErrorBoundary/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ErrorBoundary_1 = require("./ErrorBoundary");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_1).default; } });

package/lib/services/Select.service.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IItemRendererProps } from '@blueprintjs/select';
+import { UniqueKey, InputValueRender } from 'types/Component.types';
+export declare function getFilter<T>(inputValueRenderer: InputValueRender<T>): (query: string, item: T, index?: number | undefined, exactMatch?: boolean | undefined) => boolean;
+export declare function getItemRenderer<T>(uniqueKey: UniqueKey<T>, inputValueRenderer: InputValueRender<T>, isItemSelected?: (item: T) => boolean): (item: T, { handleClick, modifiers, query }: IItemRendererProps) => JSX.Element | null;

package/lib/services/Select.service.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var core_1 = require("@blueprintjs/core");
+function escapeRegExpChars(text) {
+    return text.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
+}
+function highlightText(text, query) {
+    var lastIndex = 0;
+    var words = query
+        .split(/\s+/)
+        .filter(function (word) { return word.length > 0; })
+        .map(escapeRegExpChars);
+    if (words.length === 0) {
+        return [text];
+    }
+    var regexp = new RegExp(words.join('|'), 'gi');
+    var tokens = [];
+    while (true) {
+        var match = regexp.exec(text);
+        if (!match) {
+            break;
+        }
+        var length_1 = match[0].length;
+        var before = text.slice(lastIndex, regexp.lastIndex - length_1);
+        if (before.length > 0) {
+            tokens.push(before);
+        }
+        lastIndex = regexp.lastIndex;
+        tokens.push(react_1.default.createElement("strong", { key: lastIndex }, match[0]));
+    }
+    var rest = text.slice(lastIndex);
+    if (rest.length > 0) {
+        tokens.push(rest);
+    }
+    return tokens;
+}
+function getFilter(inputValueRenderer) {
+    return function filterItems(query, item, index, exactMatch) {
+        return exactMatch
+            ? inputValueRenderer(item).toLowerCase() === query.toLowerCase()
+            : inputValueRenderer(item).toLowerCase().includes(query.toLowerCase());
+    };
+}
+exports.getFilter = getFilter;
+function getItemRenderer(uniqueKey, inputValueRenderer, isItemSelected) {
+    return function renderItem(item, _a) {
+        var handleClick = _a.handleClick, modifiers = _a.modifiers, query = _a.query;
+        if (!modifiers.matchesPredicate) {
+            return null;
+        }
+        var text = inputValueRenderer(item);
+        var key = null;
+        if (typeof uniqueKey === 'string') {
+            // @ts-ignore
+            key = item[uniqueKey];
+        }
+        else if (typeof uniqueKey === 'function') {
+            key = uniqueKey(item);
+        }
+        return (react_1.default.createElement(core_1.MenuItem, { active: modifiers.active, icon: isItemSelected && isItemSelected(item) ? 'tick' : 'blank', disabled: modifiers.disabled, label: undefined, key: key, onClick: handleClick, text: highlightText(text, query) }));
+    };
+}
+exports.getItemRenderer = getItemRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.73",
+  "version": "2.0.76",
   "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",