@vendorflow/components 2.0.97 → 2.0.99

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 (68) 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/DataTable/DataTable.d.ts +1 -0
  4. package/lib/components/material-ui/DataTable/DataTable.js +2 -1
  5. package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts +3 -1
  6. package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js +3 -2
  7. package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts +3 -1
  8. package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js +3 -3
  9. package/lib/types/Component.types.d.ts +1 -0
  10. package/package.json +1 -1
  11. package/lib/TempHooks.d.ts +0 -9
  12. package/lib/TempHooks.js +0 -25
  13. package/lib/components/InfiniteScroll/InfiniteScroll.d.ts +0 -16
  14. package/lib/components/InfiniteScroll/InfiniteScroll.js +0 -159
  15. package/lib/components/InfiniteScroll/index.d.ts +0 -1
  16. package/lib/components/InfiniteScroll/index.js +0 -8
  17. package/lib/components/blueprint/InputGroup/InputGroup.d.ts +0 -20
  18. package/lib/components/blueprint/InputGroup/InputGroup.js +0 -13
  19. package/lib/components/blueprint/InputGroup/InputGroup.story.d.ts +0 -2
  20. package/lib/components/blueprint/InputGroup/InputGroup.story.js +0 -11
  21. package/lib/components/blueprint/InputGroup/index.d.ts +0 -1
  22. package/lib/components/blueprint/InputGroup/index.js +0 -4
  23. package/lib/components/blueprint/InputSelect/InputSelect.d.ts +0 -51
  24. package/lib/components/blueprint/InputSelect/InputSelect.js +0 -98
  25. package/lib/components/blueprint/InputSelect/InputSelect.story.d.ts +0 -3
  26. package/lib/components/blueprint/InputSelect/InputSelect.story.js +0 -19
  27. package/lib/components/blueprint/InputSelect/index.d.ts +0 -1
  28. package/lib/components/blueprint/InputSelect/index.js +0 -4
  29. package/lib/components/blueprint/InputTime/InputTime.d.ts +0 -24
  30. package/lib/components/blueprint/InputTime/InputTime.js +0 -28
  31. package/lib/components/blueprint/InputTime/InputTime.story.d.ts +0 -2
  32. package/lib/components/blueprint/InputTime/InputTime.story.js +0 -11
  33. package/lib/components/blueprint/InputTime/index.d.ts +0 -1
  34. package/lib/components/blueprint/InputTime/index.js +0 -4
  35. package/lib/components/material-ui/ChatInterface/ActionsMenu.d.ts +0 -4
  36. package/lib/components/material-ui/ChatInterface/ActionsMenu.js +0 -37
  37. package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts +0 -33
  38. package/lib/components/material-ui/ChatInterface/ChatInterface.js +0 -109
  39. package/lib/components/material-ui/ChatInterface/ChatInterface.story.d.ts +0 -1
  40. package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +0 -134
  41. package/lib/components/material-ui/ChatInterface/MessageInput.d.ts +0 -9
  42. package/lib/components/material-ui/ChatInterface/MessageInput.js +0 -53
  43. package/lib/components/material-ui/ChatInterface/MessageItem.d.ts +0 -8
  44. package/lib/components/material-ui/ChatInterface/MessageItem.js +0 -71
  45. package/lib/components/material-ui/ChatInterface/MessageThread.d.ts +0 -6
  46. package/lib/components/material-ui/ChatInterface/MessageThread.js +0 -119
  47. package/lib/components/material-ui/ChatInterface/index.d.ts +0 -1
  48. package/lib/components/material-ui/ChatInterface/index.js +0 -8
  49. package/lib/components/material-ui/DataTable/AppliedFilters.d.ts +0 -12
  50. package/lib/components/material-ui/DataTable/AppliedFilters.js +0 -26
  51. package/lib/components/material-ui/DataTable/GlobalSearchFilter.d.ts +0 -10
  52. package/lib/components/material-ui/DataTable/GlobalSearchFilter.js +0 -49
  53. package/lib/components/material-ui/DataTable/IndeterminateCheckbox.d.ts +0 -4
  54. package/lib/components/material-ui/DataTable/IndeterminateCheckbox.js +0 -65
  55. package/lib/components/material-ui/DataTable/SortIndicator.d.ts +0 -10
  56. package/lib/components/material-ui/DataTable/SortIndicator.js +0 -33
  57. package/lib/components/material-ui/DataTable/Toolbar.d.ts +0 -24
  58. package/lib/components/material-ui/DataTable/Toolbar.js +0 -63
  59. package/lib/components/material-ui/DataTable/Utils.d.ts +0 -25
  60. package/lib/components/material-ui/DataTable/Utils.js +0 -119
  61. package/lib/components/material-ui/DataTable/ViewColumnTool.d.ts +0 -11
  62. package/lib/components/material-ui/DataTable/ViewColumnTool.js +0 -76
  63. package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.d.ts +0 -7
  64. package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.js +0 -20
  65. package/lib/components/material-ui/ErrorBoundary/index.d.ts +0 -1
  66. package/lib/components/material-ui/ErrorBoundary/index.js +0 -8
  67. package/lib/services/Select.service.d.ts +0 -5
  68. 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;
@@ -57,6 +57,7 @@ export interface TableFeatureOptions<D extends object> {
57
57
  flexLayoutEnabled?: boolean;
58
58
  hideToolbar?: boolean;
59
59
  getRowId?: UseTableOptions<D>['getRowId'];
60
+ getRowClassName?: (rowId: string) => string;
60
61
  };
61
62
  virtualize?: {
62
63
  enabled: boolean;
@@ -154,6 +154,7 @@ function DataTable(_a) {
154
154
  var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
155
155
  var containerHeight = (rootContentRect.height || 0) - (toolbarContentRect.height || 0) - (paginationContentRect.height || 0);
156
156
  var defaultRowHeight = (virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.defaultRowHeight) || 50;
157
+ var getRowClassName = ((options === null || options === void 0 ? void 0 : options.table) || {}).getRowClassName;
157
158
  (0, react_2.useEffect)(function () {
158
159
  if (tableHeadRef.current) {
159
160
  tableHeadRef.current.scrollTo({ left: scrollLeft, behavior: 'auto' });
@@ -180,7 +181,7 @@ function DataTable(_a) {
180
181
  return ((0, react_1.jsx)(HeaderCell_1.default, { key: key, header: header, headerProps: restOfHeaderProps, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false }));
181
182
  })));
182
183
  })),
183
- (0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbar: hasScrollbar, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, scrollbarWidth: scrollbarWidth, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
184
+ (0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbar: hasScrollbar, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, scrollbarWidth: scrollbarWidth, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width, getRowClassName: getRowClassName }))),
184
185
  (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { ref: paginationRef, className: "DataTable__Pagination", component: "div", count: rows.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize, rowsPerPageOptions: pageOptions }))));
185
186
  }
186
187
  exports.default = DataTable;
@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
4
4
  import { CSSProperties } from 'react';
5
5
  import { EnhancedRow } from '../DataTable';
6
6
  import { TableRowProps } from 'react-table';
7
+ import { Maybe } from '@vendorflow/types';
7
8
  interface Props<D extends object> {
8
9
  ExpandedComponent: ((props: {
9
10
  data: D;
@@ -14,6 +15,7 @@ interface Props<D extends object> {
14
15
  style?: CSSProperties;
15
16
  className?: string;
16
17
  measure?: () => void;
18
+ getRowClassName?: Maybe<(rowId: string) => string>;
17
19
  }
18
- export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, className: rootClassName, measure, }: Props<D>): jsx.JSX.Element;
20
+ export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, className: rootClassName, measure, getRowClassName, }: Props<D>): jsx.JSX.Element;
19
21
  export {};
@@ -52,8 +52,9 @@ var react_2 = require("react");
52
52
  var material_1 = require("@mui/material");
53
53
  var BodyCell_1 = __importDefault(require("./BodyCell"));
54
54
  var lodash_1 = require("lodash");
55
+ var classnames_1 = __importDefault(require("classnames"));
55
56
  function BodyRow(_a) {
56
- var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, rootClassName = _a.className, measure = _a.measure;
57
+ var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, rootClassName = _a.className, measure = _a.measure, getRowClassName = _a.getRowClassName;
57
58
  var _b = __read((0, react_2.useState)(null), 2), element = _b[0], setElement = _b[1];
58
59
  var className = rowProps.className, rowPropsStyle = rowProps.style, restOfRowProps = __rest(rowProps, ["className", "style"]);
59
60
  var isExpanded = row.isExpanded;
@@ -74,7 +75,7 @@ function BodyRow(_a) {
74
75
  }, className: rootClassName, css: cx(style && css(style)) },
75
76
  (0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps, { component: "div", css: cx(
76
77
  // @ts-ignore
77
- css(rowPropsStyle), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "])))), className: className }), row.cells.map(function (cell) {
78
+ css(rowPropsStyle), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "])))), className: (0, classnames_1.default)(className, getRowClassName && getRowClassName(row.id)) }), row.cells.map(function (cell) {
78
79
  var _a = cell.getCellProps(), key = _a.key, restOfCellProps = __rest(_a, ["key"]);
79
80
  return (0, react_1.jsx)(BodyCell_1.default, { key: key, cell: cell, cellProps: restOfCellProps });
80
81
  })),
@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
4
4
  import { Dispatch, MutableRefObject, SetStateAction } from 'react';
5
5
  import { Row } from 'react-table';
6
6
  import { HasScrollbar } from '@vendorflow/common/lib/hooks';
7
+ import { Maybe } from '@vendorflow/types';
7
8
  interface Props<D extends object> {
8
9
  defaultRowHeight: number;
9
10
  ExpandedComponent?: ((props: {
@@ -24,6 +25,7 @@ interface Props<D extends object> {
24
25
  tableRows: Row<D>[];
25
26
  totalColumnsWidth: number;
26
27
  width: number | undefined;
28
+ getRowClassName: Maybe<(rowId: string) => string>;
27
29
  }
28
- export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, flexLayoutEnabled, hasScrollbar, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollbarWidth, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
30
+ export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, flexLayoutEnabled, hasScrollbar, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollbarWidth, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, getRowClassName, }: Props<D>): jsx.JSX.Element;
29
31
  export {};
@@ -27,7 +27,7 @@ var material_1 = require("@mui/material");
27
27
  var react_2 = require("react");
28
28
  var hooks_1 = require("@vendorflow/common/lib/hooks");
29
29
  function TableBodyContent(_a) {
30
- var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, flexLayoutEnabled = _a.flexLayoutEnabled, hasScrollbar = _a.hasScrollbar, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollbarWidth = _a.scrollbarWidth, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
30
+ var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, flexLayoutEnabled = _a.flexLayoutEnabled, hasScrollbar = _a.hasScrollbar, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollbarWidth = _a.scrollbarWidth, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width, getRowClassName = _a.getRowClassName;
31
31
  var trueWidth = width ? width - (hasScrollbar.vertical ? scrollbarWidth : 0) : 0;
32
32
  var scrollContentWidth = (0, react_2.useMemo)(function () {
33
33
  return trueWidth > totalColumnsWidth ? trueWidth : totalColumnsWidth;
@@ -53,7 +53,7 @@ function TableBodyContent(_a) {
53
53
  var _b = row.getRowProps(), _ = _b.key, restOfRowProps = __rest(_b, ["key"]);
54
54
  return ((0, react_1.jsx)(react_virtualized_1.CellMeasurer, { cache: cache.current, columnIndex: columnIndex, key: key, rowIndex: rowIndex, parent: parent }, function (_a) {
55
55
  var measure = _a.measure, registerChild = _a.registerChild;
56
- return ((0, react_1.jsx)(BodyRow_1.default, { key: key, innerRef: registerChild, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps, style: style, measure: measure }));
56
+ return ((0, react_1.jsx)(BodyRow_1.default, { key: key, innerRef: registerChild, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps, style: style, measure: measure, getRowClassName: getRowClassName }));
57
57
  }));
58
58
  }
59
59
  return ((0, react_1.jsx)(material_1.TableBody, { ref: function (node) {
@@ -79,7 +79,7 @@ function TableBodyContent(_a) {
79
79
  (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", "px;\n "], ["\n width: ", "px;\n "])), scrollContentWidth) }, tableRows.length > 0 ? (tableRows.map(function (row) {
80
80
  prepareRow(row);
81
81
  var _a = row.getRowProps(), key = _a.key, restOfRowProps = __rest(_a, ["key"]);
82
- return ((0, react_1.jsx)(BodyRow_1.default, { key: key, css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), trueWidth > totalColumnsWidth ? '100%' : 'max-content'), ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));
82
+ return ((0, react_1.jsx)(BodyRow_1.default, { key: key, css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), trueWidth > totalColumnsWidth ? '100%' : 'max-content'), ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps, getRowClassName: getRowClassName }));
83
83
  })) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n\n &&:last-child {\n border-bottom: none;\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n\n &&:last-child {\n border-bottom: none;\n }\n "]))) },
84
84
  (0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n && {\n display: block;\n border-bottom: none;\n width: 100%;\n }\n "], ["\n && {\n display: block;\n border-bottom: none;\n width: 100%;\n }\n "]))) },
85
85
  (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
@@ -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.97",
3
+ "version": "2.0.99",
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;