@vendorflow/components 2.0.89 → 2.0.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/lib/TempHooks.d.ts +9 -0
  2. package/lib/TempHooks.js +25 -0
  3. package/lib/components/InfiniteScroll/InfiniteScroll.d.ts +16 -0
  4. package/lib/components/InfiniteScroll/InfiniteScroll.js +159 -0
  5. package/lib/components/InfiniteScroll/index.d.ts +1 -0
  6. package/lib/components/InfiniteScroll/index.js +8 -0
  7. package/lib/components/blueprint/InputGroup/InputGroup.d.ts +20 -0
  8. package/lib/components/blueprint/InputGroup/InputGroup.js +13 -0
  9. package/lib/components/blueprint/InputGroup/InputGroup.story.d.ts +2 -0
  10. package/lib/components/blueprint/InputGroup/InputGroup.story.js +11 -0
  11. package/lib/components/blueprint/InputGroup/index.d.ts +1 -0
  12. package/lib/components/blueprint/InputGroup/index.js +4 -0
  13. package/lib/components/blueprint/InputSelect/InputSelect.d.ts +51 -0
  14. package/lib/components/blueprint/InputSelect/InputSelect.js +98 -0
  15. package/lib/components/blueprint/InputSelect/InputSelect.story.d.ts +3 -0
  16. package/lib/components/blueprint/InputSelect/InputSelect.story.js +19 -0
  17. package/lib/components/blueprint/InputSelect/index.d.ts +1 -0
  18. package/lib/components/blueprint/InputSelect/index.js +4 -0
  19. package/lib/components/blueprint/InputTime/InputTime.d.ts +24 -0
  20. package/lib/components/blueprint/InputTime/InputTime.js +28 -0
  21. package/lib/components/blueprint/InputTime/InputTime.story.d.ts +2 -0
  22. package/lib/components/blueprint/InputTime/InputTime.story.js +11 -0
  23. package/lib/components/blueprint/InputTime/index.d.ts +1 -0
  24. package/lib/components/blueprint/InputTime/index.js +4 -0
  25. package/lib/components/material-ui/DataTable/SortIndicator.js +2 -2
  26. package/lib/components/material-ui/DataTable/Utils.d.ts +25 -0
  27. package/lib/components/material-ui/DataTable/Utils.js +119 -0
  28. package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.d.ts +7 -0
  29. package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.js +20 -0
  30. package/lib/components/material-ui/ErrorBoundary/index.d.ts +1 -0
  31. package/lib/components/material-ui/ErrorBoundary/index.js +8 -0
  32. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.d.ts +1 -0
  33. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +6 -4
  34. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.story.js +10 -11
  35. package/lib/services/Select.service.d.ts +5 -0
  36. package/lib/services/Select.service.js +67 -0
  37. package/package.json +1 -1
@@ -0,0 +1,9 @@
1
+ import { RefObject } from 'react';
2
+ interface UseInfiniteScrollProps {
3
+ parentEl?: RefObject<HTMLDivElement>;
4
+ isLoading?: boolean;
5
+ hasMore?: boolean;
6
+ loadMore?: () => Promise<void> | void;
7
+ }
8
+ export declare function useInfiniteScroll({ parentEl, isLoading, hasMore, loadMore }: UseInfiniteScrollProps): (node: any) => void;
9
+ export {};
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useInfiniteScroll = void 0;
4
+ var react_1 = require("react");
5
+ function useInfiniteScroll(_a) {
6
+ var parentEl = _a.parentEl, isLoading = _a.isLoading, hasMore = _a.hasMore, loadMore = _a.loadMore;
7
+ var observer = (0, react_1.useRef)();
8
+ return (0, react_1.useCallback)(function (node) {
9
+ if (isLoading)
10
+ return;
11
+ if (observer.current)
12
+ observer.current.disconnect();
13
+ observer.current = new IntersectionObserver(function (entries) {
14
+ if (entries[0].isIntersecting && hasMore && loadMore) {
15
+ loadMore();
16
+ }
17
+ }, {
18
+ root: (parentEl === null || parentEl === void 0 ? void 0 : parentEl.current) || null,
19
+ threshold: 1.0,
20
+ });
21
+ if (node)
22
+ observer.current.observe(node);
23
+ }, [isLoading, hasMore, loadMore, parentEl]);
24
+ }
25
+ exports.useInfiniteScroll = useInfiniteScroll;
@@ -0,0 +1,16 @@
1
+ /** @jsxRuntime classic */
2
+ /** @jsx jsx */
3
+ import { jsx } from '@emotion/react';
4
+ import { MutableRefObject, ReactElement } from 'react';
5
+ interface Props {
6
+ children: ReactElement[];
7
+ scrollParent: MutableRefObject<HTMLDivElement | null>;
8
+ isLoading?: boolean;
9
+ isFetching?: boolean;
10
+ isReverse?: boolean;
11
+ hasNextPage?: boolean;
12
+ fetchNextPage?: () => Promise<any> | any;
13
+ Loader?: ReactElement;
14
+ }
15
+ export default function InfiniteScroll({ children, scrollParent, isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, Loader, }: Props): jsx.JSX.Element;
16
+ export {};
@@ -0,0 +1,159 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __read = (this && this.__read) || function (o, n) {
7
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
8
+ if (!m) return o;
9
+ var i = m.call(o), r, ar = [], e;
10
+ try {
11
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
12
+ }
13
+ catch (error) { e = { error: error }; }
14
+ finally {
15
+ try {
16
+ if (r && !r.done && (m = i["return"])) m.call(i);
17
+ }
18
+ finally { if (e) throw e.error; }
19
+ }
20
+ return ar;
21
+ };
22
+ Object.defineProperty(exports, "__esModule", { value: true });
23
+ /** @jsxRuntime classic */
24
+ /** @jsx jsx */
25
+ var react_1 = require("@emotion/react");
26
+ var react_2 = require("react");
27
+ var material_1 = require("@mui/material");
28
+ function InfiniteScroll(_a) {
29
+ var children = _a.children, scrollParent = _a.scrollParent, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, Loader = _a.Loader;
30
+ var _b = __read((0, react_2.useState)(false), 2), isLoadMoreFetch = _b[0], setLoadMoreFetch = _b[1];
31
+ var scrollBody = (0, react_2.useRef)(null);
32
+ var loadMoreRef = useInfiniteScroll({
33
+ scrollParent: scrollParent,
34
+ scrollBody: scrollBody,
35
+ isReverse: isReverse,
36
+ isLoading: isLoading,
37
+ isFetching: isFetching,
38
+ hasNextPage: hasNextPage,
39
+ fetchNextPage: fetchNextPageAndSetFlag,
40
+ });
41
+ (0, react_2.useEffect)(function () {
42
+ if (!isFetching) {
43
+ setLoadMoreFetch(false);
44
+ }
45
+ }, [isFetching]);
46
+ function fetchNextPageAndSetFlag() {
47
+ if (fetchNextPage) {
48
+ fetchNextPage();
49
+ setLoadMoreFetch(true);
50
+ }
51
+ }
52
+ function renderLoader() {
53
+ if (!hasNextPage) {
54
+ return null;
55
+ }
56
+ if (Loader) {
57
+ return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
58
+ var css = _a.css;
59
+ return (0, react_2.cloneElement)(Loader, {
60
+ ref: loadMoreRef,
61
+ className: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n visibility: ", ";\n }\n "], ["\n && {\n visibility: ", ";\n }\n "])), isFetching && isLoadMoreFetch ? 'visible' : 'hidden'),
62
+ });
63
+ }));
64
+ }
65
+ else {
66
+ return ((0, react_1.jsx)(DefaultLoader, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n && {\n visibility: ", ";\n }\n "], ["\n && {\n visibility: ", ";\n }\n "])), isFetching && isLoadMoreFetch ? 'visible' : 'hidden'), ref: loadMoreRef }));
67
+ }
68
+ }
69
+ return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n justify-content: flex-start;\n align-items: flex-start;\n "], ["\n display: flex;\n flex-direction: ", ";\n justify-content: flex-start;\n align-items: flex-start;\n "])), isReverse ? 'column-reverse' : 'column'), ref: scrollBody },
70
+ children,
71
+ renderLoader()));
72
+ }
73
+ exports.default = InfiniteScroll;
74
+ var DefaultLoader = (0, react_2.forwardRef)(function (_a, ref) {
75
+ var className = _a.className, style = _a.style;
76
+ return ((0, react_1.jsx)("div", { key: "loader", className: className, style: style, ref: ref, css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%;\n margin: 0.5rem 0;\n height: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n "], ["\n width: 100%;\n margin: 0.5rem 0;\n height: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n "]))) },
77
+ (0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true })));
78
+ });
79
+ function useInfiniteScroll(_a) {
80
+ var _b, _c, _d, _e;
81
+ var scrollParent = _a.scrollParent, scrollBody = _a.scrollBody, isLoading = _a.isLoading, isFetching = _a.isFetching, isReverse = _a.isReverse, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage;
82
+ var prevPosition = (0, react_2.useRef)();
83
+ var observer = (0, react_2.useRef)();
84
+ var _f = __read((0, react_2.useState)(false), 2), isScrollInit = _f[0], setScrollInit = _f[1];
85
+ var _g = __read((0, react_2.useState)(false), 2), isScrollLoad = _g[0], setScrollLoad = _g[1];
86
+ var hasScrollbar = (0, react_2.useMemo)(function () {
87
+ if (scrollParent.current && scrollBody.current) {
88
+ return scrollBody.current.clientHeight > scrollParent.current.clientHeight;
89
+ }
90
+ return false;
91
+ }, [(_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.clientHeight, (_c = scrollBody.current) === null || _c === void 0 ? void 0 : _c.clientHeight]);
92
+ // Ensures that when the chat initializes, it will scroll to the bottom
93
+ (0, react_2.useEffect)(function () {
94
+ if (!isLoading && hasScrollbar) {
95
+ prevPosition.current = null;
96
+ setScrollLoad(false);
97
+ scrollToStart();
98
+ }
99
+ }, [isLoading, hasScrollbar]);
100
+ // If a fetch happens that was not started by a scroll action (aka fetchNextPage),
101
+ // then this will track the prevPosition
102
+ (0, react_2.useEffect)(function () {
103
+ if (!isScrollLoad && scrollBody.current && isFetching) {
104
+ prevPosition.current = scrollBody.current.clientHeight;
105
+ }
106
+ }, [isFetching, isScrollLoad, (_d = scrollBody.current) === null || _d === void 0 ? void 0 : _d.clientHeight]);
107
+ // This will potentially scroll the page to the start when the page loads new data that did not
108
+ // originate from a fetchNextPage action
109
+ (0, react_2.useEffect)(function () {
110
+ if (!isScrollLoad &&
111
+ isReverse &&
112
+ scrollBody.current &&
113
+ prevPosition.current != null &&
114
+ scrollBody.current.clientHeight - prevPosition.current <= 200) {
115
+ prevPosition.current = null;
116
+ scrollToStart();
117
+ }
118
+ }, [isScrollLoad, (_e = scrollBody.current) === null || _e === void 0 ? void 0 : _e.clientHeight]);
119
+ function scrollToStart() {
120
+ var _a;
121
+ var scrollHeight = (scrollBody.current || { scrollHeight: 0 }).scrollHeight;
122
+ var scrollToValue = isReverse ? scrollHeight : 0;
123
+ (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, scrollToValue);
124
+ setScrollInit(true);
125
+ }
126
+ // this callback is used and fired based on the state of the element it is attached to
127
+ return (0, react_2.useCallback)(function (node) {
128
+ if (isLoading || isFetching) {
129
+ return;
130
+ }
131
+ if (observer.current) {
132
+ observer.current.disconnect();
133
+ }
134
+ observer.current = new IntersectionObserver(function (entries) {
135
+ if (entries[0].isIntersecting && hasNextPage && fetchNextPage) {
136
+ if (scrollBody.current && isReverse && isScrollInit) {
137
+ // save the last element, so that we can scroll to it after the new data loads in
138
+ prevPosition.current = scrollBody.current.clientHeight;
139
+ }
140
+ // load the next page
141
+ fetchNextPage();
142
+ setScrollLoad(true);
143
+ }
144
+ }, {
145
+ root: (scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) || null,
146
+ threshold: 1.0,
147
+ });
148
+ if (node) {
149
+ if (isReverse && scrollParent.current && prevPosition.current != null && isScrollLoad) {
150
+ // If we had a prev position, then we want to scroll to it
151
+ scrollParent.current.scrollTo(0, scrollBody.current.clientHeight - prevPosition.current);
152
+ prevPosition.current = null;
153
+ setScrollLoad(false);
154
+ }
155
+ observer.current.observe(node);
156
+ }
157
+ }, [isLoading, isFetching, isReverse, hasNextPage, fetchNextPage, scrollParent, scrollBody, isScrollInit, isScrollLoad]);
158
+ }
159
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
@@ -0,0 +1 @@
1
+ export { default } from './InfiniteScroll';
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.default = void 0;
7
+ var InfiniteScroll_1 = require("./InfiniteScroll");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(InfiniteScroll_1).default; } });
@@ -0,0 +1,20 @@
1
+ import { ChangeEvent } from 'react';
2
+ import { IIntentProps, IInputGroupProps } from '@blueprintjs/core';
3
+ interface Props {
4
+ id?: string;
5
+ className?: string;
6
+ disabled?: boolean;
7
+ fill?: boolean;
8
+ helperText?: string;
9
+ intent?: IIntentProps['intent'];
10
+ label?: string;
11
+ labelInfo?: string;
12
+ name?: string;
13
+ onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
14
+ placeholder?: string;
15
+ type?: string;
16
+ value: IInputGroupProps['value'];
17
+ hideCharCount?: boolean;
18
+ }
19
+ export default function InputGroup(props: Props): JSX.Element;
20
+ export {};
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var core_1 = require("@blueprintjs/core");
8
+ function InputGroup(props) {
9
+ var id = props.id, className = props.className, disabled = props.disabled, fill = props.fill, helperText = props.helperText, intent = props.intent, label = props.label, labelInfo = props.labelInfo, name = props.name, onChange = props.onChange, placeholder = props.placeholder, _a = props.type, type = _a === void 0 ? 'text' : _a, value = props.value;
10
+ return (react_1.default.createElement(core_1.FormGroup, { className: className, helperText: helperText, intent: intent, label: label, labelFor: id, labelInfo: labelInfo, disabled: disabled },
11
+ react_1.default.createElement(core_1.InputGroup, { fill: fill, id: id, intent: intent, name: name, onChange: onChange, placeholder: placeholder, type: type, value: value })));
12
+ }
13
+ exports.default = InputGroup;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const InputGroup: () => JSX.Element;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var addon_actions_1 = require("@storybook/addon-actions");
8
+ var InputGroup_1 = __importDefault(require("./InputGroup"));
9
+ exports.InputGroup = function () {
10
+ return (react_1.default.createElement(InputGroup_1.default, { name: "name", label: "First Name", labelInfo: "(required)", value: "", intent: "danger", onChange: addon_actions_1.action('changed') }));
11
+ };
@@ -0,0 +1 @@
1
+ export { default } from './InputGroup';
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var InputGroup_1 = require("./InputGroup");
4
+ exports.default = InputGroup_1.default;
@@ -0,0 +1,51 @@
1
+ /// <reference types="react" />
2
+ import { IIntentProps } from '@blueprintjs/core';
3
+ import { ItemRenderer } from '@blueprintjs/select';
4
+ import { SimpleEvent, InputValueRender, TagRender } from '../../../types/Component.types';
5
+ declare type Props<T> = InputSuggestProps<T> | InputMultiSelectProps<T>;
6
+ declare type InputSuggestProps<T> = {
7
+ type: 'suggest';
8
+ className?: string;
9
+ disabled?: boolean;
10
+ fill?: boolean;
11
+ helperText?: string;
12
+ id?: string;
13
+ inputValueRenderer: InputValueRender<T>;
14
+ intent?: IIntentProps['intent'];
15
+ itemRenderer?: ItemRenderer<T>;
16
+ items: T[];
17
+ uniqueKey: string | ((item: T) => string | number);
18
+ label?: string;
19
+ labelInfo?: string;
20
+ multi?: boolean;
21
+ name?: string;
22
+ onChange: (evt: SimpleEvent<T | T[]>) => void;
23
+ placeholder?: string;
24
+ selectedItem: T | null;
25
+ selectedItems?: undefined;
26
+ tagRenderer?: undefined;
27
+ };
28
+ declare type InputMultiSelectProps<T> = {
29
+ type: 'multiselect';
30
+ className?: string;
31
+ disabled?: boolean;
32
+ fill?: boolean;
33
+ helperText?: string;
34
+ id?: string;
35
+ inputValueRenderer: InputValueRender<T>;
36
+ intent?: IIntentProps['intent'];
37
+ itemRenderer?: ItemRenderer<T>;
38
+ items: T[];
39
+ uniqueKey: string | ((item: T) => string | number);
40
+ label?: string;
41
+ labelInfo?: string;
42
+ multi?: boolean;
43
+ name?: string;
44
+ onChange: (evt: SimpleEvent<T | T[]>) => void;
45
+ placeholder?: string;
46
+ selectedItem?: undefined;
47
+ selectedItems: T[];
48
+ tagRenderer?: TagRender<T>;
49
+ };
50
+ export default function InputSelect<T>(props: Props<T>): JSX.Element;
51
+ export {};
@@ -0,0 +1,98 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importStar = (this && this.__importStar) || function (mod) {
14
+ if (mod && mod.__esModule) return mod;
15
+ var result = {};
16
+ if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
17
+ result["default"] = mod;
18
+ return result;
19
+ };
20
+ Object.defineProperty(exports, "__esModule", { value: true });
21
+ var react_1 = __importStar(require("react"));
22
+ var core_1 = require("@blueprintjs/core");
23
+ var select_1 = require("@blueprintjs/select");
24
+ var Select_service_1 = require("../../../services/Select.service");
25
+ function InputSelect(props) {
26
+ var className = props.className, disabled = props.disabled, fill = props.fill, helperText = props.helperText, id = props.id, inputValueRenderer = props.inputValueRenderer, intent = props.intent, items = props.items, itemRenderer = props.itemRenderer, uniqueKey = props.uniqueKey, label = props.label, labelInfo = props.labelInfo, name = props.name, onChange = props.onChange, placeholder = props.placeholder, _a = props.selectedItem, selectedItem = _a === void 0 ? null : _a, tagRenderer = props.tagRenderer, type = props.type;
27
+ var _b = react_1.useState(''), query = _b[0], setQuery = _b[1];
28
+ var _c = react_1.useState(null), value = _c[0], setValue = _c[1];
29
+ var _d = react_1.useState([]), values = _d[0], setValues = _d[1];
30
+ react_1.useEffect(function () {
31
+ if (value !== selectedItem) {
32
+ setValue(selectedItem);
33
+ }
34
+ // eslint-disable-next-line react-hooks/exhaustive-deps
35
+ }, [selectedItem]);
36
+ function handleOnChange(value, _) {
37
+ var newValue = null;
38
+ if (type === 'multiselect') {
39
+ if (isItemSelected(value)) {
40
+ newValue = values.filter(function (item) { return value !== item; });
41
+ }
42
+ else {
43
+ newValue = values.concat(value);
44
+ }
45
+ setValues(newValue);
46
+ }
47
+ else {
48
+ newValue = value;
49
+ setValue(newValue);
50
+ }
51
+ onChange({ target: { value: newValue, name: name } });
52
+ }
53
+ function handleOnTagRemove(_, index) {
54
+ var newValues = values.filter(function (_, valueIndex) { return index !== valueIndex; });
55
+ setValues(newValues);
56
+ onChange({ target: { value: newValues, name: name } });
57
+ }
58
+ function handleOnClear() {
59
+ setValues([]);
60
+ onChange({ target: { value: [], name: name } });
61
+ }
62
+ function isItemSelected(item) {
63
+ return values.indexOf(item) !== -1;
64
+ }
65
+ function getCommonProps() {
66
+ return {
67
+ disabled: disabled,
68
+ fill: fill,
69
+ itemPredicate: Select_service_1.getFilter(inputValueRenderer),
70
+ itemRenderer: itemRenderer ||
71
+ Select_service_1.getItemRenderer(uniqueKey, inputValueRenderer, type === 'multiselect' ? isItemSelected : undefined),
72
+ items: items,
73
+ noResults: react_1.default.createElement(core_1.MenuItem, { disabled: true, text: "No results." }),
74
+ onItemSelect: handleOnChange,
75
+ onQueryChange: setQuery,
76
+ query: query,
77
+ popoverProps: { minimal: true },
78
+ };
79
+ }
80
+ function renderClearButton() {
81
+ return values.length > 0 ? (react_1.default.createElement(core_1.Button, { icon: "cross", minimal: true, onClick: handleOnClear })) : undefined;
82
+ }
83
+ function renderSelectComponent() {
84
+ switch (type) {
85
+ case 'multiselect': {
86
+ return (react_1.default.createElement(select_1.MultiSelect, __assign({}, getCommonProps(), { resetOnSelect: true, selectedItems: values, tagRenderer: tagRenderer || inputValueRenderer, tagInputProps: {
87
+ onRemove: handleOnTagRemove,
88
+ rightElement: renderClearButton(),
89
+ tagProps: {},
90
+ } })));
91
+ }
92
+ default:
93
+ return (react_1.default.createElement(select_1.Suggest, __assign({}, getCommonProps(), { inputProps: { intent: intent, placeholder: placeholder }, inputValueRenderer: inputValueRenderer, resetOnSelect: false, selectedItem: value })));
94
+ }
95
+ }
96
+ return (react_1.default.createElement(core_1.FormGroup, { className: className, helperText: helperText, intent: intent, label: label, labelFor: id, labelInfo: labelInfo, disabled: disabled }, renderSelectComponent()));
97
+ }
98
+ exports.default = InputSelect;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const InputSuggest: () => JSX.Element;
3
+ export declare const InputMultiselect: () => JSX.Element;
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var InputSelect_1 = __importDefault(require("./InputSelect"));
8
+ var addon_actions_1 = require("@storybook/addon-actions");
9
+ var items = [
10
+ { firstName: 'Alvin', lastName: 'Kamara' },
11
+ { firstName: 'Michael', lastName: 'Thomas' },
12
+ { firstName: 'Todd', lastName: 'Gurley' },
13
+ { firstName: 'Raheem', lastName: 'Mostert' },
14
+ { firstName: 'Tyeke', lastName: 'Hill' },
15
+ { firstName: 'Frank', lastName: 'Gore' },
16
+ { firstName: 'Patrick', lastName: 'Willis' },
17
+ ];
18
+ exports.InputSuggest = function () { return (react_1.default.createElement(InputSelect_1.default, { type: "suggest", label: "Football Players", name: "player", inputValueRenderer: function (item) { return item.firstName + " " + item.lastName; }, uniqueKey: "lastName", labelInfo: "(required)", helperText: "Please select a player.", intent: "danger", items: items, onChange: addon_actions_1.action('onChange'), placeholder: "Select football player", selectedItem: null })); };
19
+ exports.InputMultiselect = function () { return (react_1.default.createElement(InputSelect_1.default, { type: "multiselect", label: "Football Players", name: "player", inputValueRenderer: function (item) { return item.firstName + " " + item.lastName; }, uniqueKey: "lastName", labelInfo: "(required)", helperText: "Please select a player.", intent: "danger", items: items, onChange: addon_actions_1.action('onChange'), placeholder: "Select football player", selectedItems: [] })); };
@@ -0,0 +1 @@
1
+ export { default } from './InputSelect';
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var InputSelect_1 = require("./InputSelect");
4
+ exports.default = InputSelect_1.default;
@@ -0,0 +1,24 @@
1
+ /// <reference types="react" />
2
+ import { IIntentProps } from '@blueprintjs/core';
3
+ import { TimePrecision } from '@blueprintjs/datetime';
4
+ import { SimpleEvent } from '../../../types/Component.types';
5
+ interface Props {
6
+ className?: string;
7
+ disabled?: boolean;
8
+ fill?: boolean;
9
+ helperText?: string;
10
+ intent?: IIntentProps['intent'];
11
+ label?: string;
12
+ labelInfo?: string;
13
+ maxTime?: Date;
14
+ minTime?: Date;
15
+ name?: string;
16
+ onChange: (evt: SimpleEvent<Date>) => void;
17
+ precision?: TimePrecision;
18
+ selectAllOnFocus?: boolean;
19
+ showArrowButtons?: boolean;
20
+ value: Date | null;
21
+ useAmPm?: boolean;
22
+ }
23
+ export default function InputTime(props: Props): JSX.Element;
24
+ export {};
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ var __importStar = (this && this.__importStar) || function (mod) {
3
+ if (mod && mod.__esModule) return mod;
4
+ var result = {};
5
+ if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
6
+ result["default"] = mod;
7
+ return result;
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ var react_1 = __importStar(require("react"));
11
+ var core_1 = require("@blueprintjs/core");
12
+ var datetime_1 = require("@blueprintjs/datetime");
13
+ function InputTime(props) {
14
+ var className = props.className, disabled = props.disabled, helperText = props.helperText, intent = props.intent, label = props.label, labelInfo = props.labelInfo, maxTime = props.maxTime, minTime = props.minTime, name = props.name, onChange = props.onChange, precision = props.precision, selectAllOnFocus = props.selectAllOnFocus, showArrowButtons = props.showArrowButtons, useAmPm = props.useAmPm;
15
+ var _a = react_1.useState(undefined), value = _a[0], setValue = _a[1];
16
+ react_1.useEffect(function () {
17
+ if (props.value) {
18
+ setValue(props.value);
19
+ }
20
+ }, []);
21
+ function handleOnChange(time) {
22
+ setValue(time);
23
+ onChange({ target: { name: name, value: time } });
24
+ }
25
+ return (react_1.default.createElement(core_1.FormGroup, { className: className, helperText: helperText, intent: intent, label: label, labelInfo: labelInfo, disabled: disabled },
26
+ react_1.default.createElement(datetime_1.TimePicker, { disabled: disabled, onChange: handleOnChange, maxTime: maxTime, minTime: minTime, precision: precision, selectAllOnFocus: selectAllOnFocus, showArrowButtons: showArrowButtons, value: value, useAmPm: useAmPm })));
27
+ }
28
+ exports.default = InputTime;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const InputTime: () => JSX.Element;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var addon_actions_1 = require("@storybook/addon-actions");
8
+ var InputTime_1 = __importDefault(require("./InputTime"));
9
+ exports.InputTime = function () {
10
+ return (react_1.default.createElement(InputTime_1.default, { name: "time", label: "Bedtime", labelInfo: "(required)", value: null, onChange: addon_actions_1.action('changed') }));
11
+ };
@@ -0,0 +1 @@
1
+ export { default } from './InputTime';
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var InputTime_1 = require("./InputTime");
4
+ exports.default = InputTime_1.default;
@@ -10,8 +10,8 @@ var react_1 = require("@emotion/react");
10
10
  var icons_material_1 = require("@mui/icons-material");
11
11
  var iconStyle = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left: 0.25rem;\n color: #b2b2b2;\n line-height: 0;\n\n && {\n font-size: 1rem;\n }\n"], ["\n margin-left: 0.25rem;\n color: #b2b2b2;\n line-height: 0;\n\n && {\n font-size: 1rem;\n }\n"])));
12
12
  var smallIconStyle = (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n && {\n font-size: 0.75rem;\n }\n"], ["\n ", ";\n && {\n font-size: 0.75rem;\n }\n"])), iconStyle);
13
- var wrapperStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n line-height: 0;\n"], ["\n line-height: 0;\n"])));
14
- var stackedWrapperStyle = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n ", ";\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), wrapperStyle);
13
+ var wrapperStyle = (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n line-height: 0;\n flex: none;\n"], ["\n line-height: 0;\n flex: none;\n"])));
14
+ var stackedWrapperStyle = (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n flex: none;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n ", ";\n flex: none;\n display: inline-flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), wrapperStyle);
15
15
  function SortIndicator(_a) {
16
16
  var canSort = _a.canSort, isSorted = _a.isSorted, isSortedDesc = _a.isSortedDesc;
17
17
  if (!canSort) {
@@ -0,0 +1,25 @@
1
+ /// <reference types="react" />
2
+ import short from 'short-uuid';
3
+ import { EnhancedRow } from './DataTable';
4
+ /**
5
+ * This custom hook is designed to replace the `<CellMeasurer />` component in `react-virtualized`
6
+ * in `react-window`
7
+ *
8
+ * This hook returns props to be given to the `<VariableSizeList />` component in `react-window`
9
+ *
10
+ * `items` are react elements
11
+ */
12
+ export default function useCellMeasurer({ items, renderItem, }: {
13
+ items: any[];
14
+ renderItem: (item: EnhancedRow<any>) => JSX.Element;
15
+ }): {
16
+ innerRef: import("react").RefObject<HTMLDivElement>;
17
+ itemSize: (index: any) => number;
18
+ itemCount: number;
19
+ key: short.SUUID;
20
+ style: {
21
+ visibility?: undefined;
22
+ } | {
23
+ visibility: string;
24
+ };
25
+ };
@@ -0,0 +1,119 @@
1
+ "use strict";
2
+ var __read = (this && this.__read) || function (o, n) {
3
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
4
+ if (!m) return o;
5
+ var i = m.call(o), r, ar = [], e;
6
+ try {
7
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
8
+ }
9
+ catch (error) { e = { error: error }; }
10
+ finally {
11
+ try {
12
+ if (r && !r.done && (m = i["return"])) m.call(i);
13
+ }
14
+ finally { if (e) throw e.error; }
15
+ }
16
+ return ar;
17
+ };
18
+ var __importDefault = (this && this.__importDefault) || function (mod) {
19
+ return (mod && mod.__esModule) ? mod : { "default": mod };
20
+ };
21
+ Object.defineProperty(exports, "__esModule", { value: true });
22
+ var react_1 = require("react");
23
+ var short_uuid_1 = __importDefault(require("short-uuid"));
24
+ var server_1 = require("react-dom/server");
25
+ var resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
26
+ /**
27
+ * This custom hook is designed to replace the `<CellMeasurer />` component in `react-virtualized`
28
+ * in `react-window`
29
+ *
30
+ * This hook returns props to be given to the `<VariableSizeList />` component in `react-window`
31
+ *
32
+ * `items` are react elements
33
+ */
34
+ function useCellMeasurer(_a) {
35
+ var items = _a.items, renderItem = _a.renderItem;
36
+ // create a ref to get the `div` element the `VariableSizeList` uses
37
+ var innerRef = (0, react_1.useRef)(null);
38
+ // create a unique ID for this cell measurer instance
39
+ var id = (0, react_1.useMemo)(function () { return short_uuid_1.default.generate(); }, []);
40
+ // create a "hidden sizing element" in state.
41
+ //
42
+ // when the innerRef element mounts, the width of the innerRef will be used for width of
43
+ // the hidden sizing element
44
+ var _b = __read((0, react_1.useState)(null), 2), hiddenSizingEl = _b[0], setHiddenSizingEl = _b[1];
45
+ // this width is used to determine whether the list needs to be re-rendered due to a resize
46
+ var _c = __read((0, react_1.useState)(0), 2), width = _c[0], setWidth = _c[1];
47
+ // `itemSize` is a function required by `VariableSizeList`. This function is called when it needs
48
+ // to get the height of the item inside it.
49
+ // note: the result of this function is memoized by `react-window` so it will only be called once
50
+ // to get the item size
51
+ var itemSize = (0, react_1.useCallback)(function (index) {
52
+ if (!hiddenSizingEl)
53
+ return 0;
54
+ // get the item (which is a react node)
55
+ var item = items[index];
56
+ // then render the react node to a string synchronously with `react-dom/server`
57
+ hiddenSizingEl.innerHTML = (0, server_1.renderToString)(renderItem(item));
58
+ // get and return the size of the hidden sizing element
59
+ return hiddenSizingEl.clientHeight || 0;
60
+ }, [hiddenSizingEl, items]);
61
+ // this effects adds the hidden sizing element to the DOM
62
+ (0, react_1.useEffect)(function () {
63
+ /** @type {HTMLElement} */
64
+ var innerEl = innerRef.current;
65
+ if (!innerEl)
66
+ return;
67
+ if (hiddenSizingEl)
68
+ return;
69
+ var newHiddenSizingEl = document.createElement('div');
70
+ var width = innerEl.clientWidth;
71
+ newHiddenSizingEl.classList.add("hidden-sizing-element-" + id);
72
+ newHiddenSizingEl.style.position = 'absolute';
73
+ newHiddenSizingEl.style.top = '0';
74
+ newHiddenSizingEl.style.width = width + "px";
75
+ newHiddenSizingEl.style.pointerEvents = 'none';
76
+ newHiddenSizingEl.style.visibility = 'hidden';
77
+ setHiddenSizingEl(newHiddenSizingEl);
78
+ document.body.appendChild(newHiddenSizingEl);
79
+ }, [hiddenSizingEl, id]);
80
+ // this removes all hidden sizing elements on unmount
81
+ (0, react_1.useEffect)(function () {
82
+ // returning a function from `useEffect` is the "clean-up" phase
83
+ return function () {
84
+ var hiddenSizingElement = document.querySelector(".hidden-sizing-element-" + id);
85
+ if (hiddenSizingElement) {
86
+ document.body.removeChild(hiddenSizingElement);
87
+ }
88
+ };
89
+ }, [id]);
90
+ // this is used to watch for changes in the size of the list element and sets the width
91
+ (0, react_1.useEffect)(function () {
92
+ var el = innerRef.current;
93
+ if (!el)
94
+ return;
95
+ function handleResize() {
96
+ var width = ((el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) || { width: 0 }).width;
97
+ setWidth(width);
98
+ }
99
+ var resizeObserver = new resize_observer_polyfill_1.default(handleResize);
100
+ resizeObserver.observe(el);
101
+ return function () { return resizeObserver.disconnect(); };
102
+ }, []);
103
+ // this key is used to re-render the list when the dependencies array changes
104
+ var key = (0, react_1.useMemo)(function () { return short_uuid_1.default.generate(); }, [itemSize, hiddenSizingEl, width]);
105
+ // while there is no hidden sizing element, hide the list element
106
+ var style = hiddenSizingEl
107
+ ? {}
108
+ : {
109
+ visibility: 'hidden',
110
+ };
111
+ return {
112
+ innerRef: innerRef,
113
+ itemSize: itemSize,
114
+ itemCount: items.length,
115
+ key: key,
116
+ style: style,
117
+ };
118
+ }
119
+ exports.default = useCellMeasurer;
@@ -0,0 +1,7 @@
1
+ /** @jsx jsx */
2
+ import { jsx } from '@emotion/react';
3
+ import { ReactNode } from 'react';
4
+ export default function ErrorBoundary({ children, onReset, }: {
5
+ children: ReactNode;
6
+ onReset: (...args: Array<unknown>) => void | Promise<void>;
7
+ }): jsx.JSX.Element;
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ /** @jsx jsx */
8
+ var react_1 = require("@emotion/react");
9
+ var material_1 = require("@mui/material");
10
+ var react_error_boundary_1 = require("react-error-boundary");
11
+ function ErrorFallback(_a) {
12
+ var resetErrorBoundary = _a.resetErrorBoundary;
13
+ 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."));
14
+ }
15
+ function ErrorBoundary(_a) {
16
+ var children = _a.children, onReset = _a.onReset;
17
+ return ((0, react_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: onReset }, children));
18
+ }
19
+ exports.default = ErrorBoundary;
20
+ var templateObject_1;
@@ -0,0 +1 @@
1
+ export { default } from './ErrorBoundary';
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.default = void 0;
7
+ var ErrorBoundary_1 = require("./ErrorBoundary");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_1).default; } });
@@ -16,6 +16,7 @@ declare type Props<T> = {
16
16
  max?: number;
17
17
  count?: number;
18
18
  onChange: (event: ChangeEvent<any>, value: any, reason: AutocompleteChangeReason) => void;
19
+ getKey?: (value: T) => string;
19
20
  } & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput' | 'id'>;
20
21
  export default function InputSearchDropdown<T>(props: Props<T>): JSX.Element;
21
22
  export {};
@@ -55,7 +55,7 @@ var useStyles = (0, styles_1.makeStyles)({
55
55
  },
56
56
  });
57
57
  function InputSearchDropdown(props) {
58
- 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, 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", "label", "helperText", "name", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max", "autoFocus", "size"]);
58
+ 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"]);
59
59
  var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
60
60
  var _j = __read((0, react_2.useState)(null), 2), value = _j[0], setValue = _j[1];
61
61
  var mainStyles = useStyles();
@@ -110,9 +110,11 @@ function InputSearchDropdown(props) {
110
110
  var _a = getTagProps({ index: index }), key = _a.key, tagProps = __rest(_a, ["key"]);
111
111
  return ((0, react_1.jsx)(material_1.Chip, __assign({ key: "chip-" + (typeof value === 'string'
112
112
  ? value
113
- : props.getOptionLabel !== undefined
114
- ? props.getOptionLabel(value)
115
- : 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)));
113
+ : getKey !== undefined
114
+ ? getKey(value)
115
+ : props.getOptionLabel !== undefined
116
+ ? props.getOptionLabel(value)
117
+ : 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)));
116
118
  });
117
119
  }
118
120
  function getCount() {
@@ -43,21 +43,20 @@ var react_1 = __importStar(require("react"));
43
43
  var InputSearchDropdown_1 = __importDefault(require("./InputSearchDropdown"));
44
44
  exports.default = {};
45
45
  var options = [
46
- { firstName: 'Alvin', lastName: 'Kamara' },
47
- { firstName: 'Michael', lastName: 'Thomas' },
48
- { firstName: 'Todd', lastName: 'Gurley' },
49
- { firstName: 'Raheem', lastName: 'Mostert' },
50
- { firstName: 'Tyeke', lastName: 'Hill' },
51
- { firstName: 'Frank', lastName: 'Gore' },
52
- { firstName: 'Patrick', lastName: 'Willis' },
46
+ { firstName: 'Alvin', lastName: 'Kamara', id: '1' },
47
+ { firstName: 'Michael', lastName: 'Thomas', id: '2' },
48
+ { firstName: 'Todd', lastName: 'Gurley', id: '3' },
49
+ { firstName: 'Raheem', lastName: 'Mostert', id: '4' },
50
+ { firstName: 'Tyeke', lastName: 'Hill', id: '5' },
51
+ { firstName: 'Frank', lastName: 'Gore', id: '6' },
52
+ { firstName: 'Patrick', lastName: 'Willis', id: '7' },
53
53
  ];
54
- var getOptionLabel = function (option) {
55
- return option.firstName + " " + option.lastName;
56
- };
54
+ var getKey = function (option) { return option.id; };
55
+ var getOptionLabel = function (option) { return option.firstName + " " + option.lastName; };
57
56
  var errors = [true];
58
57
  var InputSearchDropdownSingle = function () {
59
58
  var _a = __read((0, react_1.useState)(null), 2), value = _a[0], setValue = _a[1];
60
- return (react_1.default.createElement(InputSearchDropdown_1.default, { name: "footballPlayer", label: "Football Player", options: options, getOptionLabel: getOptionLabel, onChange: function (evt) { return setValue(evt.target.value || null); }, value: value }));
59
+ return (react_1.default.createElement(InputSearchDropdown_1.default, { name: "footballPlayer", label: "Football Player", options: options, getKey: getKey, getOptionLabel: getOptionLabel, onChange: function (evt) { return setValue(evt.target.value || null); }, value: value }));
61
60
  };
62
61
  exports.InputSearchDropdownSingle = InputSearchDropdownSingle;
63
62
  var InputSearchDropdownMulti = function () {
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import { IItemRendererProps } from '@blueprintjs/select';
3
+ import { UniqueKey, InputValueRender } from 'types/Component.types';
4
+ export declare function getFilter<T>(inputValueRenderer: InputValueRender<T>): (query: string, item: T, index?: number | undefined, exactMatch?: boolean | undefined) => boolean;
5
+ export declare function getItemRenderer<T>(uniqueKey: UniqueKey<T>, inputValueRenderer: InputValueRender<T>, isItemSelected?: (item: T) => boolean): (item: T, { handleClick, modifiers, query }: IItemRendererProps) => JSX.Element | null;
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var core_1 = require("@blueprintjs/core");
8
+ function escapeRegExpChars(text) {
9
+ return text.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
10
+ }
11
+ function highlightText(text, query) {
12
+ var lastIndex = 0;
13
+ var words = query
14
+ .split(/\s+/)
15
+ .filter(function (word) { return word.length > 0; })
16
+ .map(escapeRegExpChars);
17
+ if (words.length === 0) {
18
+ return [text];
19
+ }
20
+ var regexp = new RegExp(words.join('|'), 'gi');
21
+ var tokens = [];
22
+ while (true) {
23
+ var match = regexp.exec(text);
24
+ if (!match) {
25
+ break;
26
+ }
27
+ var length_1 = match[0].length;
28
+ var before = text.slice(lastIndex, regexp.lastIndex - length_1);
29
+ if (before.length > 0) {
30
+ tokens.push(before);
31
+ }
32
+ lastIndex = regexp.lastIndex;
33
+ tokens.push(react_1.default.createElement("strong", { key: lastIndex }, match[0]));
34
+ }
35
+ var rest = text.slice(lastIndex);
36
+ if (rest.length > 0) {
37
+ tokens.push(rest);
38
+ }
39
+ return tokens;
40
+ }
41
+ function getFilter(inputValueRenderer) {
42
+ return function filterItems(query, item, index, exactMatch) {
43
+ return exactMatch
44
+ ? inputValueRenderer(item).toLowerCase() === query.toLowerCase()
45
+ : inputValueRenderer(item).toLowerCase().includes(query.toLowerCase());
46
+ };
47
+ }
48
+ exports.getFilter = getFilter;
49
+ function getItemRenderer(uniqueKey, inputValueRenderer, isItemSelected) {
50
+ return function renderItem(item, _a) {
51
+ var handleClick = _a.handleClick, modifiers = _a.modifiers, query = _a.query;
52
+ if (!modifiers.matchesPredicate) {
53
+ return null;
54
+ }
55
+ var text = inputValueRenderer(item);
56
+ var key = null;
57
+ if (typeof uniqueKey === 'string') {
58
+ // @ts-ignore
59
+ key = item[uniqueKey];
60
+ }
61
+ else if (typeof uniqueKey === 'function') {
62
+ key = uniqueKey(item);
63
+ }
64
+ 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) }));
65
+ };
66
+ }
67
+ exports.getItemRenderer = getItemRenderer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.89",
3
+ "version": "2.0.91",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",