@vendorflow/components 2.0.95 → 2.0.97

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

@@ -55,7 +55,7 @@ var useStyles = (0, styles_1.makeStyles)({
     },
 });
 function InputSearchDropdown(props) {
-    var _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, ["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, 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 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();
@@ -125,7 +125,7 @@ function InputSearchDropdown(props) {
         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() })),
+        (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)("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/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.95",
+  "version": "2.0.97",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",