@vendorflow/components 2.0.96 → 2.0.98

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 (64) hide show
  1. package/lib/components/material-ui/ButtonMenu/ButtonMenu.js +1 -1
  2. package/lib/components/material-ui/ColorPicker/styles.d.ts +1 -1
  3. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.d.ts +2 -1
  4. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +2 -2
  5. package/lib/types/Component.types.d.ts +1 -0
  6. package/package.json +1 -1
  7. package/lib/TempHooks.d.ts +0 -9
  8. package/lib/TempHooks.js +0 -25
  9. package/lib/components/InfiniteScroll/InfiniteScroll.d.ts +0 -16
  10. package/lib/components/InfiniteScroll/InfiniteScroll.js +0 -159
  11. package/lib/components/InfiniteScroll/index.d.ts +0 -1
  12. package/lib/components/InfiniteScroll/index.js +0 -8
  13. package/lib/components/blueprint/InputGroup/InputGroup.d.ts +0 -20
  14. package/lib/components/blueprint/InputGroup/InputGroup.js +0 -13
  15. package/lib/components/blueprint/InputGroup/InputGroup.story.d.ts +0 -2
  16. package/lib/components/blueprint/InputGroup/InputGroup.story.js +0 -11
  17. package/lib/components/blueprint/InputGroup/index.d.ts +0 -1
  18. package/lib/components/blueprint/InputGroup/index.js +0 -4
  19. package/lib/components/blueprint/InputSelect/InputSelect.d.ts +0 -51
  20. package/lib/components/blueprint/InputSelect/InputSelect.js +0 -98
  21. package/lib/components/blueprint/InputSelect/InputSelect.story.d.ts +0 -3
  22. package/lib/components/blueprint/InputSelect/InputSelect.story.js +0 -19
  23. package/lib/components/blueprint/InputSelect/index.d.ts +0 -1
  24. package/lib/components/blueprint/InputSelect/index.js +0 -4
  25. package/lib/components/blueprint/InputTime/InputTime.d.ts +0 -24
  26. package/lib/components/blueprint/InputTime/InputTime.js +0 -28
  27. package/lib/components/blueprint/InputTime/InputTime.story.d.ts +0 -2
  28. package/lib/components/blueprint/InputTime/InputTime.story.js +0 -11
  29. package/lib/components/blueprint/InputTime/index.d.ts +0 -1
  30. package/lib/components/blueprint/InputTime/index.js +0 -4
  31. package/lib/components/material-ui/ChatInterface/ActionsMenu.d.ts +0 -4
  32. package/lib/components/material-ui/ChatInterface/ActionsMenu.js +0 -37
  33. package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts +0 -33
  34. package/lib/components/material-ui/ChatInterface/ChatInterface.js +0 -109
  35. package/lib/components/material-ui/ChatInterface/ChatInterface.story.d.ts +0 -1
  36. package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +0 -134
  37. package/lib/components/material-ui/ChatInterface/MessageInput.d.ts +0 -9
  38. package/lib/components/material-ui/ChatInterface/MessageInput.js +0 -53
  39. package/lib/components/material-ui/ChatInterface/MessageItem.d.ts +0 -8
  40. package/lib/components/material-ui/ChatInterface/MessageItem.js +0 -71
  41. package/lib/components/material-ui/ChatInterface/MessageThread.d.ts +0 -6
  42. package/lib/components/material-ui/ChatInterface/MessageThread.js +0 -119
  43. package/lib/components/material-ui/ChatInterface/index.d.ts +0 -1
  44. package/lib/components/material-ui/ChatInterface/index.js +0 -8
  45. package/lib/components/material-ui/DataTable/AppliedFilters.d.ts +0 -12
  46. package/lib/components/material-ui/DataTable/AppliedFilters.js +0 -26
  47. package/lib/components/material-ui/DataTable/GlobalSearchFilter.d.ts +0 -10
  48. package/lib/components/material-ui/DataTable/GlobalSearchFilter.js +0 -49
  49. package/lib/components/material-ui/DataTable/IndeterminateCheckbox.d.ts +0 -4
  50. package/lib/components/material-ui/DataTable/IndeterminateCheckbox.js +0 -65
  51. package/lib/components/material-ui/DataTable/SortIndicator.d.ts +0 -10
  52. package/lib/components/material-ui/DataTable/SortIndicator.js +0 -33
  53. package/lib/components/material-ui/DataTable/Toolbar.d.ts +0 -24
  54. package/lib/components/material-ui/DataTable/Toolbar.js +0 -63
  55. package/lib/components/material-ui/DataTable/Utils.d.ts +0 -25
  56. package/lib/components/material-ui/DataTable/Utils.js +0 -119
  57. package/lib/components/material-ui/DataTable/ViewColumnTool.d.ts +0 -11
  58. package/lib/components/material-ui/DataTable/ViewColumnTool.js +0 -76
  59. package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.d.ts +0 -7
  60. package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.js +0 -20
  61. package/lib/components/material-ui/ErrorBoundary/index.d.ts +0 -1
  62. package/lib/components/material-ui/ErrorBoundary/index.js +0 -8
  63. package/lib/services/Select.service.d.ts +0 -5
  64. package/lib/services/Select.service.js +0 -67
@@ -97,7 +97,7 @@ function ButtonMenu(props) {
97
97
  return ((0, react_1.jsx)(material_1.MenuItem, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .MuiDivider-wrapper {\n font-size: 0.875rem;\n color: hsl(0, 0%, 54%);\n }\n "], ["\n .MuiDivider-wrapper {\n font-size: 0.875rem;\n color: hsl(0, 0%, 54%);\n }\n "]))), key: id + "-menu-item-" + index, onClick: function () {
98
98
  item.onClick();
99
99
  setAnchorEl(null);
100
- } }, item.content));
100
+ }, disabled: item.disabled }, item.content));
101
101
  }
102
102
  if (item.type === 'Divider') {
103
103
  return ((0, react_1.jsx)(material_1.Divider, { key: id + "-divider-" + index, textAlign: item.textAlign }, item.text));
@@ -1 +1 @@
1
- export declare const colorPaletteStyles: import("@emotion/react").SerializedStyles;
1
+ export declare const colorPaletteStyles: import("@emotion/utils").SerializedStyles;
@@ -1,4 +1,4 @@
1
- import { ChangeEvent, ReactNode } from 'react';
1
+ import { ChangeEvent, ReactNode, Ref } from 'react';
2
2
  import { AutocompleteProps, AutocompleteChangeReason, AutocompleteRenderInputParams } from '@mui/material';
3
3
  import { Variant } from '../../../types';
4
4
  declare type MaybeBoolean = boolean | undefined;
@@ -17,6 +17,7 @@ declare type Props<T> = {
17
17
  count?: number;
18
18
  onChange: (event: ChangeEvent<any>, value: any, reason: AutocompleteChangeReason) => void;
19
19
  getKey?: (value: T) => string;
20
+ mRef?: Ref<HTMLElement>;
20
21
  } & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput' | 'id'>;
21
22
  export default function InputSearchDropdown<T>(props: Props<T>): JSX.Element;
22
23
  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, 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"]);
58
+ 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"]);
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();
@@ -125,7 +125,7 @@ function InputSearchDropdown(props) {
125
125
  return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
126
126
  }
127
127
  return ((0, react_1.jsx)("div", null,
128
- (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() })),
128
+ (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 })),
129
129
  (0, react_1.jsx)("div", null,
130
130
  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)),
131
131
  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" },
@@ -28,6 +28,7 @@ export declare type MenuItem = {
28
28
  content: ReactNode;
29
29
  onClick: () => void;
30
30
  type: 'MenuItem';
31
+ disabled?: boolean;
31
32
  };
32
33
  export declare type Divider = {
33
34
  text: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.96",
3
+ "version": "2.0.98",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -1,9 +0,0 @@
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 {};
package/lib/TempHooks.js DELETED
@@ -1,25 +0,0 @@
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;
@@ -1,16 +0,0 @@
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 {};
@@ -1,159 +0,0 @@
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;
@@ -1 +0,0 @@
1
- export { default } from './InfiniteScroll';
@@ -1,8 +0,0 @@
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; } });
@@ -1,20 +0,0 @@
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 {};
@@ -1,13 +0,0 @@
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;
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const InputGroup: () => JSX.Element;
@@ -1,11 +0,0 @@
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
- };
@@ -1 +0,0 @@
1
- export { default } from './InputGroup';
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var InputGroup_1 = require("./InputGroup");
4
- exports.default = InputGroup_1.default;
@@ -1,51 +0,0 @@
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 {};
@@ -1,98 +0,0 @@
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;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const InputSuggest: () => JSX.Element;
3
- export declare const InputMultiselect: () => JSX.Element;
@@ -1,19 +0,0 @@
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: [] })); };
@@ -1 +0,0 @@
1
- export { default } from './InputSelect';
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var InputSelect_1 = require("./InputSelect");
4
- exports.default = InputSelect_1.default;
@@ -1,24 +0,0 @@
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 {};
@@ -1,28 +0,0 @@
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;
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const InputTime: () => JSX.Element;
@@ -1,11 +0,0 @@
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
- };
@@ -1 +0,0 @@
1
- export { default } from './InputTime';
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var InputTime_1 = require("./InputTime");
4
- exports.default = InputTime_1.default;
@@ -1,4 +0,0 @@
1
- /** @jsxRuntime classic */
2
- /** @jsx jsx */
3
- import { jsx } from '@emotion/react';
4
- export default function ActionsMenu(): jsx.JSX.Element;