@vendorflow/components 2.0.99 → 2.1.0

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

@@ -55,19 +55,30 @@ var useStyles = (0, styles_1.makeStyles)({
     },
 });
 function InputSearchDropdown(props) {
-    var mRef = props.mRef, _a = props.autoHighlight, autoHighlight = _a === void 0 ? true : _a, _b = props.clearOnEscape, clearOnEscape = _b === void 0 ? true : _b, count = props.count, disableFilter = props.disableFilter, error = props.error, errors = props.errors, filterOptions = props.filterOptions, _c = props.filterSelectedOptions, filterSelectedOptions = _c === void 0 ? true : _c, getKey = props.getKey, label = props.label, helperText = props.helperText, name = props.name, onChange = props.onChange, _d = props.openOnFocus, openOnFocus = _d === void 0 ? true : _d, _e = props.renderInput, renderInput = _e === void 0 ? null : _e, renderTags = props.renderTags, _f = props.selectOnFocus, selectOnFocus = _f === void 0 ? true : _f, _g = props.variant, variant = _g === void 0 ? 'outlined' : _g, multiple = props.multiple, max = props.max, autoFocus = props.autoFocus, _h = props.size, size = _h === void 0 ? 'small' : _h, restOfProps = __rest(props, ["mRef", "autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "getKey", "label", "helperText", "name", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max", "autoFocus", "size"]);
+    var mRef = props.mRef, _a = props.autoHighlight, autoHighlight = _a === void 0 ? true : _a, _b = props.clearOnEscape, clearOnEscape = _b === void 0 ? true : _b, count = props.count, disableFilter = props.disableFilter, error = props.error, errors = props.errors, filterOptions = props.filterOptions, _c = props.filterSelectedOptions, filterSelectedOptions = _c === void 0 ? true : _c, getKey = props.getKey, label = props.label, helperText = props.helperText, name = props.name, onChange = props.onChange, _d = props.openOnFocus, openOnFocus = _d === void 0 ? true : _d, _e = props.renderInput, renderInput = _e === void 0 ? null : _e, renderOption = props.renderOption, renderTags = props.renderTags, _f = props.selectOnFocus, selectOnFocus = _f === void 0 ? true : _f, _g = props.variant, variant = _g === void 0 ? 'outlined' : _g, multiple = props.multiple, max = props.max, autoFocus = props.autoFocus, _h = props.size, size = _h === void 0 ? 'small' : _h, restOfProps = __rest(props, ["mRef", "autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "getKey", "label", "helperText", "name", "onChange", "openOnFocus", "renderInput", "renderOption", "renderTags", "selectOnFocus", "variant", "multiple", "max", "autoFocus", "size"]);
     var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
     var _j = __read((0, react_2.useState)(null), 2), value = _j[0], setValue = _j[1];
     var mainStyles = useStyles();
-    (0, react_2.useEffect)(function () {
-        if (props.value !== value) {
-            if (!props.value && props.multiple) {
-                setValue([]);
-            }
-            setValue(props.value);
+    var getOptionLabel = (0, react_2.useCallback)(function (option) {
+        if (typeof option === 'string') {
+            return option;
         }
-    }, [props.value]); // eslint-disable-line
-    function getValue() {
+        if (!props.getOptionLabel) {
+            throw new Error('You must provide the getOptionLabel prop to the InputSearchDropdown component');
+        }
+        return props.getOptionLabel(option);
+    }, [props.getOptionLabel]);
+    var getKeySuffix = (0, react_2.useCallback)(function (option) {
+        return typeof option === 'string' ? option : getKey !== undefined ? getKey(option) : getOptionLabel(option);
+    }, [getOptionLabel, getKey]);
+    var getCount = (0, react_2.useCallback)(function () {
+        var _a;
+        if (count !== undefined) {
+            return count;
+        }
+        return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    }, [count, value]);
+    var getValue = (0, react_2.useCallback)(function () {
         if (multiple && value === null) {
             return [];
         }
@@ -78,7 +89,28 @@ function InputSearchDropdown(props) {
             return value.length ? value[0] : null;
         }
         return value;
-    }
+    }, [multiple, value]);
+    var renderDefaultOption = (0, react_2.useCallback)(function (props, option) {
+        return ((0, react_1.jsx)("li", __assign({}, props, { key: "option-" + getKeySuffix(option) }), getOptionLabel(option)));
+    }, [getKeySuffix, getOptionLabel]);
+    var renderDefaultTags = (0, react_2.useCallback)(function (values, getTagProps) {
+        return values.map(function (value, index) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var _a = getTagProps({ index: index }), key = _a.key, tagProps = __rest(_a, ["key"]);
+            return ((0, react_1.jsx)(material_1.Chip, __assign({ key: "chip-" + getKeySuffix(value), css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              border-color: ", ";\n            "], ["\n              border-color: ", ";\n            "])), errors && errors[index] ? 'red' : 'initial'), variant: "outlined", label: getOptionLabel(value), size: "small" }, tagProps)));
+        });
+    }, [getKeySuffix, getOptionLabel, errors]);
+    var renderDefaultInput = (0, react_2.useCallback)(function (params) {
+        return ((0, react_1.jsx)(material_1.TextField, __assign({}, params, { error: error || !!(errors === null || errors === void 0 ? void 0 : errors.length), label: label, variant: variant, autoFocus: autoFocus })));
+    }, [error, errors, label, variant, autoFocus]);
+    (0, react_2.useEffect)(function () {
+        if (props.value !== value) {
+            if (!props.value && props.multiple) {
+                setValue([]);
+            }
+            setValue(props.value);
+        }
+    }, [props.value]); // eslint-disable-line
     function handleOnChange(_, newValue, reason) {
         // logic that prevents the input from exceeding its limit
         if (multiple && max) {
@@ -98,34 +130,11 @@ function InputSearchDropdown(props) {
     function handleOptionFilter() {
         return (0, material_1.createFilterOptions)({
             matchFrom: 'any',
-            stringify: props.getOptionLabel,
-        });
-    }
-    function renderDefaultInput(params) {
-        return ((0, react_1.jsx)(material_1.TextField, __assign({}, params, { error: error || !!(errors === null || errors === void 0 ? void 0 : errors.length), label: label, variant: variant, autoFocus: autoFocus })));
-    }
-    function renderDefaultTags(values, getTagProps) {
-        return values.map(function (value, index) {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            var _a = getTagProps({ index: index }), key = _a.key, tagProps = __rest(_a, ["key"]);
-            return ((0, react_1.jsx)(material_1.Chip, __assign({ key: "chip-" + (typeof value === 'string'
-                    ? value
-                    : getKey !== undefined
-                        ? getKey(value)
-                        : props.getOptionLabel !== undefined
-                            ? props.getOptionLabel(value)
-                            : JSON.stringify(value)), css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            border-color: ", ";\n          "], ["\n            border-color: ", ";\n          "])), errors && errors[index] ? 'red' : 'initial'), variant: "outlined", label: props.getOptionLabel ? props.getOptionLabel(value) : value, size: "small" }, tagProps)));
+            stringify: getOptionLabel,
         });
     }
-    function getCount() {
-        var _a;
-        if (count !== undefined) {
-            return count;
-        }
-        return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
-    }
     return ((0, react_1.jsx)("div", null,
-        (0, react_1.jsx)(material_1.Autocomplete, __assign({ id: id.current, css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n          &&& .MuiInputBase-root {\n            padding-right: 39px;\n          }\n        "], ["\n          // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n          &&& .MuiInputBase-root {\n            padding-right: 39px;\n          }\n        "]))), autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles, size: size }, restOfProps, { value: getValue(), ref: mRef })),
+        (0, react_1.jsx)(material_1.Autocomplete, __assign({ id: id.current, css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n          &&& .MuiInputBase-root {\n            padding-right: 39px;\n          }\n        "], ["\n          // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n          &&& .MuiInputBase-root {\n            padding-right: 39px;\n          }\n        "]))), autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderOption: renderOption ? renderOption : renderDefaultOption, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles, size: size }, restOfProps, { value: getValue(), ref: mRef })),
         (0, react_1.jsx)("div", null,
             helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "], ["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
             multiple && max && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "], ["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },

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

@@ -61,6 +61,6 @@ var InputSearchDropdownSingle = function () {
 exports.InputSearchDropdownSingle = InputSearchDropdownSingle;
 var InputSearchDropdownMulti = function () {
     var _a = __read((0, react_1.useState)([]), 2), value = _a[0], setValue = _a[1];
-    return (react_1.default.createElement(InputSearchDropdown_1.default, { freeSolo: true, multiple: true, name: "footballPlayer", label: "Football Player", options: options, getOptionLabel: getOptionLabel, onChange: function (evt) { return setValue(evt.target.value); }, errors: errors, value: value, helperText: "hello", max: 10 }));
+    return (react_1.default.createElement(InputSearchDropdown_1.default, { freeSolo: true, multiple: true, name: "footballPlayer", label: "Football Player", options: options, getKey: getKey, getOptionLabel: getOptionLabel, onChange: function (evt) { return setValue(evt.target.value); }, errors: errors, value: value, helperText: "hello", max: 10 }));
 };
 exports.InputSearchDropdownMulti = InputSearchDropdownMulti;

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.99",
+  "version": "2.1.0",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",