@vendorflow/components 2.1.1 → 3.0.5
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.
- package/lib/components/index.d.ts +1 -1
- package/lib/components/material-ui/Button/Button.d.ts +1 -1
- package/lib/components/material-ui/ButtonMenu/ButtonMenu.d.ts +2 -2
- package/lib/components/material-ui/ColorPicker/ColorPicker.d.ts +1 -1
- package/lib/components/material-ui/DataTable/Data.d.ts +1 -1
- package/lib/components/material-ui/DataTable/DataTable.d.ts +10 -77
- package/lib/components/material-ui/DataTable/FilterTool/Filters/MultiSelectFilter.d.ts +1 -1
- package/lib/components/material-ui/DataTable/FilterTool/Filters/RangeFilter.d.ts +1 -1
- package/lib/components/material-ui/DataTable/FilterTool/Filters/SingleSelectFilter.d.ts +1 -1
- package/lib/components/material-ui/DataTable/FilterTool/Filters/TextFilter.d.ts +1 -1
- package/lib/components/material-ui/DataTable/FilterTool/index.d.ts +2 -2
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts +1 -1
- package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.d.ts +1 -1
- package/lib/components/material-ui/DataTable/TablePieces/Toolbar.d.ts +1 -1
- package/lib/components/material-ui/DataTable/index.d.ts +1 -1
- package/lib/components/material-ui/InputDate/InputDate.d.ts +2 -2
- package/lib/components/material-ui/InputDateTime/InputDateTime.d.ts +2 -2
- package/lib/components/material-ui/InputGroup/InputGroup.d.ts +1 -1
- package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.d.ts +2 -2
- package/lib/components/material-ui/InputTime/InputTime.d.ts +2 -2
- package/lib/components/material-ui/Modal/Modal.d.ts +1 -1
- package/lib/index.js +3 -14
- package/lib/index.js.LICENSE.txt +29 -0
- package/lib/index.js.map +1 -0
- package/lib/types/Component.types.d.ts +9 -9
- package/lib/types/DataTable.types.d.ts +69 -0
- package/lib/types/index.d.ts +1 -0
- package/package.json +24 -103
- package/lib/TempHooks.d.ts +0 -9
- package/lib/TempHooks.js +0 -25
- package/lib/components/InfiniteScroll/InfiniteScroll.d.ts +0 -16
- package/lib/components/InfiniteScroll/InfiniteScroll.js +0 -159
- package/lib/components/InfiniteScroll/index.d.ts +0 -1
- package/lib/components/InfiniteScroll/index.js +0 -8
- package/lib/components/blueprint/InputGroup/InputGroup.d.ts +0 -20
- package/lib/components/blueprint/InputGroup/InputGroup.js +0 -13
- package/lib/components/blueprint/InputGroup/InputGroup.story.d.ts +0 -2
- package/lib/components/blueprint/InputGroup/InputGroup.story.js +0 -11
- package/lib/components/blueprint/InputGroup/index.d.ts +0 -1
- package/lib/components/blueprint/InputGroup/index.js +0 -4
- package/lib/components/blueprint/InputSelect/InputSelect.d.ts +0 -51
- package/lib/components/blueprint/InputSelect/InputSelect.js +0 -98
- package/lib/components/blueprint/InputSelect/InputSelect.story.d.ts +0 -3
- package/lib/components/blueprint/InputSelect/InputSelect.story.js +0 -19
- package/lib/components/blueprint/InputSelect/index.d.ts +0 -1
- package/lib/components/blueprint/InputSelect/index.js +0 -4
- package/lib/components/blueprint/InputTime/InputTime.d.ts +0 -24
- package/lib/components/blueprint/InputTime/InputTime.js +0 -28
- package/lib/components/blueprint/InputTime/InputTime.story.d.ts +0 -2
- package/lib/components/blueprint/InputTime/InputTime.story.js +0 -11
- package/lib/components/blueprint/InputTime/index.d.ts +0 -1
- package/lib/components/blueprint/InputTime/index.js +0 -4
- package/lib/components/index.js +0 -32
- package/lib/components/material-ui/AudioPlayer/AudioPlayer.js +0 -111
- package/lib/components/material-ui/AudioPlayer/AudioPlayer.story.js +0 -9
- package/lib/components/material-ui/AudioPlayer/index.js +0 -8
- package/lib/components/material-ui/Button/Button.js +0 -38
- package/lib/components/material-ui/Button/Button.story.js +0 -9
- package/lib/components/material-ui/Button/index.js +0 -8
- package/lib/components/material-ui/ButtonMenu/ButtonMenu.js +0 -115
- package/lib/components/material-ui/ButtonMenu/ButtonMenu.story.js +0 -79
- package/lib/components/material-ui/ButtonMenu/index.js +0 -8
- package/lib/components/material-ui/ChatInterface/ActionsMenu.d.ts +0 -4
- package/lib/components/material-ui/ChatInterface/ActionsMenu.js +0 -37
- package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts +0 -33
- package/lib/components/material-ui/ChatInterface/ChatInterface.js +0 -109
- package/lib/components/material-ui/ChatInterface/ChatInterface.story.d.ts +0 -1
- package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +0 -134
- package/lib/components/material-ui/ChatInterface/MessageInput.d.ts +0 -9
- package/lib/components/material-ui/ChatInterface/MessageInput.js +0 -53
- package/lib/components/material-ui/ChatInterface/MessageItem.d.ts +0 -8
- package/lib/components/material-ui/ChatInterface/MessageItem.js +0 -71
- package/lib/components/material-ui/ChatInterface/MessageThread.d.ts +0 -6
- package/lib/components/material-ui/ChatInterface/MessageThread.js +0 -119
- package/lib/components/material-ui/ChatInterface/index.d.ts +0 -1
- package/lib/components/material-ui/ChatInterface/index.js +0 -8
- package/lib/components/material-ui/ColorPicker/ColorPicker.js +0 -86
- package/lib/components/material-ui/ColorPicker/ColorPicker.story.js +0 -47
- package/lib/components/material-ui/ColorPicker/index.js +0 -8
- package/lib/components/material-ui/ColorPicker/styles.js +0 -24
- package/lib/components/material-ui/DataTable/AppliedFilters.d.ts +0 -12
- package/lib/components/material-ui/DataTable/AppliedFilters.js +0 -26
- package/lib/components/material-ui/DataTable/Data.js +0 -42
- package/lib/components/material-ui/DataTable/DataTable.js +0 -363
- package/lib/components/material-ui/DataTable/DataTable.story.js +0 -76
- package/lib/components/material-ui/DataTable/FilterTool/Filters/MultiSelectFilter.js +0 -63
- package/lib/components/material-ui/DataTable/FilterTool/Filters/RangeFilter.js +0 -76
- package/lib/components/material-ui/DataTable/FilterTool/Filters/SingleSelectFilter.js +0 -69
- package/lib/components/material-ui/DataTable/FilterTool/Filters/TextFilter.js +0 -52
- package/lib/components/material-ui/DataTable/FilterTool/index.js +0 -78
- package/lib/components/material-ui/DataTable/GlobalSearchFilter.d.ts +0 -10
- package/lib/components/material-ui/DataTable/GlobalSearchFilter.js +0 -49
- package/lib/components/material-ui/DataTable/IndeterminateCheckbox.d.ts +0 -4
- package/lib/components/material-ui/DataTable/IndeterminateCheckbox.js +0 -65
- package/lib/components/material-ui/DataTable/SortIndicator.d.ts +0 -10
- package/lib/components/material-ui/DataTable/SortIndicator.js +0 -33
- package/lib/components/material-ui/DataTable/TablePieces/AppliedFilters.js +0 -26
- package/lib/components/material-ui/DataTable/TablePieces/BodyCell.js +0 -50
- package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js +0 -88
- package/lib/components/material-ui/DataTable/TablePieces/GlobalSearchFilter.js +0 -49
- package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js +0 -57
- package/lib/components/material-ui/DataTable/TablePieces/IndeterminateCheckbox.js +0 -65
- package/lib/components/material-ui/DataTable/TablePieces/SortIndicator.js +0 -33
- package/lib/components/material-ui/DataTable/TablePieces/Table.js +0 -47
- package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js +0 -89
- package/lib/components/material-ui/DataTable/TablePieces/Toolbar.js +0 -59
- package/lib/components/material-ui/DataTable/TablePieces/ViewColumnTool.js +0 -77
- package/lib/components/material-ui/DataTable/Toolbar.d.ts +0 -24
- package/lib/components/material-ui/DataTable/Toolbar.js +0 -63
- package/lib/components/material-ui/DataTable/Utils.d.ts +0 -25
- package/lib/components/material-ui/DataTable/Utils.js +0 -119
- package/lib/components/material-ui/DataTable/ViewColumnTool.d.ts +0 -11
- package/lib/components/material-ui/DataTable/ViewColumnTool.js +0 -76
- package/lib/components/material-ui/DataTable/index.js +0 -8
- package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.d.ts +0 -7
- package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.js +0 -20
- package/lib/components/material-ui/ErrorBoundary/index.d.ts +0 -1
- package/lib/components/material-ui/ErrorBoundary/index.js +0 -8
- package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.js +0 -99
- package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story.js +0 -52
- package/lib/components/material-ui/InputCheckboxGroup/index.js +0 -8
- package/lib/components/material-ui/InputDate/InputDate.js +0 -93
- package/lib/components/material-ui/InputDate/InputDate.story.js +0 -53
- package/lib/components/material-ui/InputDate/index.js +0 -8
- package/lib/components/material-ui/InputDateTime/InputDateTime.js +0 -82
- package/lib/components/material-ui/InputDateTime/InputDateTime.story.js +0 -53
- package/lib/components/material-ui/InputDateTime/index.js +0 -8
- package/lib/components/material-ui/InputGroup/InputGroup.js +0 -91
- package/lib/components/material-ui/InputGroup/InputGroup.story.js +0 -50
- package/lib/components/material-ui/InputGroup/index.js +0 -8
- package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.js +0 -82
- package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.story.js +0 -52
- package/lib/components/material-ui/InputRadioGroup/index.js +0 -8
- package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +0 -146
- package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.story.js +0 -66
- package/lib/components/material-ui/InputSearchDropdown/index.js +0 -8
- package/lib/components/material-ui/InputTime/InputTime.js +0 -82
- package/lib/components/material-ui/InputTime/InputTime.story.js +0 -53
- package/lib/components/material-ui/InputTime/index.js +0 -8
- package/lib/components/material-ui/Modal/Modal.js +0 -57
- package/lib/components/material-ui/Modal/Modal.story.js +0 -83
- package/lib/components/material-ui/Modal/index.js +0 -8
- package/lib/services/Select.service.d.ts +0 -5
- package/lib/services/Select.service.js +0 -67
- package/lib/stories/0-Inputs.stories.d.ts +0 -17
- package/lib/stories/0-Inputs.stories.js +0 -38
- package/lib/types/Component.types.js +0 -2
- package/lib/types/Internal.types.js +0 -2
- package/lib/types/index.js +0 -13
|
@@ -1,119 +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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
-
};
|
|
9
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
/** @jsxRuntime classic */
|
|
11
|
-
/** @jsx jsx */
|
|
12
|
-
var react_1 = require("@emotion/react");
|
|
13
|
-
var react_2 = require("react");
|
|
14
|
-
var MessageItem_1 = __importDefault(require("./MessageItem"));
|
|
15
|
-
var lodash_1 = require("lodash");
|
|
16
|
-
var material_1 = require("@mui/material");
|
|
17
|
-
function MessageThread(_a) {
|
|
18
|
-
var _b;
|
|
19
|
-
var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, isSubmitting = _a.isSubmitting, colors = _a.colors;
|
|
20
|
-
var isInitialized = (0, react_2.useRef)(false);
|
|
21
|
-
var isScrollLoad = (0, react_2.useRef)(false);
|
|
22
|
-
var hasSubmitted = (0, react_2.useRef)(false);
|
|
23
|
-
var prevScrollTop = (0, react_2.useRef)(null);
|
|
24
|
-
var prevScrollHeight = (0, react_2.useRef)(null);
|
|
25
|
-
var shouldScrollToPrevPosition = (0, react_2.useRef)(false);
|
|
26
|
-
var scrollParent = (0, react_2.useRef)(null);
|
|
27
|
-
var handleScrollEvent = (0, react_2.useCallback)((0, lodash_1.debounce)(function (evt) {
|
|
28
|
-
var parent = evt.target;
|
|
29
|
-
if (parent.scrollTop === 0 && hasNextPage && fetchNextPage && !isLoading && !isFetching) {
|
|
30
|
-
isScrollLoad.current = true;
|
|
31
|
-
prevScrollHeight.current = parent.scrollHeight;
|
|
32
|
-
fetchNextPage();
|
|
33
|
-
}
|
|
34
|
-
}, 300), [hasNextPage, fetchNextPage, isLoading, isFetching]);
|
|
35
|
-
(0, react_2.useEffect)(function () {
|
|
36
|
-
if (isSubmitting) {
|
|
37
|
-
hasSubmitted.current = true;
|
|
38
|
-
}
|
|
39
|
-
}, [isSubmitting]);
|
|
40
|
-
// This will handle the initial loading of messages, then scroll to bottom
|
|
41
|
-
(0, react_2.useEffect)(function () {
|
|
42
|
-
if (!isInitialized.current && !isFetching && scrollParent.current) {
|
|
43
|
-
var _a = scrollParent.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
|
|
44
|
-
if (clientHeight >= scrollHeight && hasNextPage && fetchNextPage) {
|
|
45
|
-
fetchNextPage();
|
|
46
|
-
return;
|
|
47
|
-
}
|
|
48
|
-
isInitialized.current = true;
|
|
49
|
-
scrollParent.current.scrollTo(0, scrollHeight - clientHeight);
|
|
50
|
-
}
|
|
51
|
-
}, [isFetching, isInitialized.current, hasNextPage, fetchNextPage]);
|
|
52
|
-
// Sets up the scroll event listener
|
|
53
|
-
(0, react_2.useEffect)(function () {
|
|
54
|
-
if (scrollParent.current) {
|
|
55
|
-
scrollParent.current.addEventListener('scroll', handleScrollEvent);
|
|
56
|
-
}
|
|
57
|
-
return function () {
|
|
58
|
-
if (scrollParent.current) {
|
|
59
|
-
scrollParent.current.removeEventListener('scroll', handleScrollEvent);
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
}, [scrollParent.current, hasNextPage, fetchNextPage, isLoading, isFetching]);
|
|
63
|
-
// Handles the scroll position adjustment after fetching the next page
|
|
64
|
-
(0, react_2.useEffect)(function () {
|
|
65
|
-
if (!isFetching &&
|
|
66
|
-
isInitialized.current &&
|
|
67
|
-
scrollParent.current &&
|
|
68
|
-
isScrollLoad.current &&
|
|
69
|
-
prevScrollHeight.current &&
|
|
70
|
-
scrollParent.current.scrollHeight !== prevScrollHeight.current) {
|
|
71
|
-
var delta = scrollParent.current.scrollHeight - prevScrollHeight.current;
|
|
72
|
-
scrollParent.current.scrollTo(0, delta);
|
|
73
|
-
isScrollLoad.current = false;
|
|
74
|
-
prevScrollHeight.current = 0;
|
|
75
|
-
}
|
|
76
|
-
}, [isFetching, prevScrollHeight.current]);
|
|
77
|
-
// Manages scroll position for data changes that are triggered from anything other than the scroll event
|
|
78
|
-
(0, react_2.useEffect)(function () {
|
|
79
|
-
var _a;
|
|
80
|
-
if (scrollParent.current && !isScrollLoad.current && isInitialized.current) {
|
|
81
|
-
var _b = scrollParent.current, scrollHeight = _b.scrollHeight, scrollTop = _b.scrollTop, clientHeight = _b.clientHeight;
|
|
82
|
-
if (isFetching) {
|
|
83
|
-
// track the current position
|
|
84
|
-
prevScrollHeight.current = scrollHeight;
|
|
85
|
-
prevScrollTop.current = scrollTop;
|
|
86
|
-
var distanceFromBottom = scrollHeight - scrollTop - clientHeight;
|
|
87
|
-
if (!isSubmitting && distanceFromBottom > 200) {
|
|
88
|
-
shouldScrollToPrevPosition.current = true;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
else {
|
|
92
|
-
// init to scroll to bottom delta
|
|
93
|
-
var delta = scrollHeight - clientHeight;
|
|
94
|
-
if (hasSubmitted.current) {
|
|
95
|
-
// scroll to bottom if this was triggered by the current user's sent message
|
|
96
|
-
(_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, delta);
|
|
97
|
-
}
|
|
98
|
-
else if (!isFetching && prevScrollHeight.current !== null && prevScrollTop.current !== null) {
|
|
99
|
-
if (shouldScrollToPrevPosition.current) {
|
|
100
|
-
delta = prevScrollTop.current;
|
|
101
|
-
}
|
|
102
|
-
scrollParent.current.scrollTo(0, delta);
|
|
103
|
-
}
|
|
104
|
-
// clean up
|
|
105
|
-
prevScrollHeight.current = null;
|
|
106
|
-
prevScrollTop.current = null;
|
|
107
|
-
hasSubmitted.current = false;
|
|
108
|
-
shouldScrollToPrevPosition.current = false;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
}, [isFetching, (_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.scrollHeight]);
|
|
112
|
-
return ((0, react_1.jsx)("div", { ref: scrollParent, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n height: calc(100% - ", "px);\n width: 100%;\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "], ["\n box-sizing: border-box;\n height: calc(100% - ", "px);\n width: 100%;\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "])), inputHeight) },
|
|
113
|
-
(0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "]))) },
|
|
114
|
-
messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }),
|
|
115
|
-
hasNextPage && ((0, react_1.jsx)("div", { key: "loader", css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __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 && {\n visibility: ", ";\n }\n "], ["\n width: 100%;\n margin: 0.5rem 0;\n height: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n\n && {\n visibility: ", ";\n }\n "])), isFetching && isScrollLoad ? 'visible' : 'hidden') },
|
|
116
|
-
(0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true }))))));
|
|
117
|
-
}
|
|
118
|
-
exports.default = MessageThread;
|
|
119
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './ChatInterface';
|
|
@@ -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 ChatInterface_1 = require("./ChatInterface");
|
|
8
|
-
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ChatInterface_1).default; } });
|
|
@@ -1,86 +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 __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
25
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
26
|
-
if (!m) return o;
|
|
27
|
-
var i = m.call(o), r, ar = [], e;
|
|
28
|
-
try {
|
|
29
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
30
|
-
}
|
|
31
|
-
catch (error) { e = { error: error }; }
|
|
32
|
-
finally {
|
|
33
|
-
try {
|
|
34
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
35
|
-
}
|
|
36
|
-
finally { if (e) throw e.error; }
|
|
37
|
-
}
|
|
38
|
-
return ar;
|
|
39
|
-
};
|
|
40
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
41
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
42
|
-
};
|
|
43
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
44
|
-
/** @jsxRuntime classic */
|
|
45
|
-
/** @jsx jsx */
|
|
46
|
-
var react_1 = require("@emotion/react");
|
|
47
|
-
var lodash_1 = require("lodash");
|
|
48
|
-
var react_2 = require("react");
|
|
49
|
-
var react_color_palette_1 = require("react-color-palette");
|
|
50
|
-
var material_1 = require("@mui/material");
|
|
51
|
-
var styles_1 = require("./styles");
|
|
52
|
-
var InputGroup_1 = __importDefault(require("../InputGroup/InputGroup"));
|
|
53
|
-
function ColorPicker(_a) {
|
|
54
|
-
var name = _a.name, value = _a.value, onChange = _a.onChange, restOfProps = __rest(_a, ["name", "value", "onChange"]);
|
|
55
|
-
var _b = __read((0, react_2.useState)(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
56
|
-
var _c = __read((0, react_color_palette_1.useColor)('hex', value || '#000'), 2), color = _c[0], setColor = _c[1];
|
|
57
|
-
var id = (0, react_2.useMemo)(function () { return "color-picker-popover-" + (0, lodash_1.random)(0, 9999999); }, []);
|
|
58
|
-
var open = !!anchorEl;
|
|
59
|
-
(0, react_2.useEffect)(function () {
|
|
60
|
-
if (value && value != color.hex) {
|
|
61
|
-
setColor((0, react_color_palette_1.toColor)('hex', value));
|
|
62
|
-
}
|
|
63
|
-
}, [value, setColor]);
|
|
64
|
-
var debouncedOnChange = (0, react_2.useCallback)((0, lodash_1.debounce)(function (value) {
|
|
65
|
-
if (onChange) {
|
|
66
|
-
// @ts-ignore
|
|
67
|
-
onChange({ target: { name: name, value: value } });
|
|
68
|
-
}
|
|
69
|
-
}, 300), [onChange, name]);
|
|
70
|
-
function handleColorChange(color) {
|
|
71
|
-
setColor(color);
|
|
72
|
-
debouncedOnChange(color.hex);
|
|
73
|
-
}
|
|
74
|
-
return ((0, react_1.jsx)(react_2.Fragment, null,
|
|
75
|
-
(0, react_1.jsx)(InputGroup_1.default, __assign({}, restOfProps, { "area-describedby": id, onClick: function (evt) {
|
|
76
|
-
setAnchorEl(evt.currentTarget);
|
|
77
|
-
}, onFocus: function (evt) {
|
|
78
|
-
setAnchorEl(evt.currentTarget);
|
|
79
|
-
}, value: color.hex, onChange: onChange })),
|
|
80
|
-
(0, react_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, disableAutoFocus: true, disableEnforceFocus: true, onClose: function () { return setAnchorEl(null); } },
|
|
81
|
-
(0, react_1.jsx)("div", { css: styles_1.colorPaletteStyles },
|
|
82
|
-
(0, react_1.jsx)(react_color_palette_1.ColorPicker, { width: 280, height: 200, color: color,
|
|
83
|
-
// @ts-ignore
|
|
84
|
-
onChange: handleColorChange, hideHSV: true, hideRGB: true, alpha: false })))));
|
|
85
|
-
}
|
|
86
|
-
exports.default = ColorPicker;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
-
}) : function(o, v) {
|
|
12
|
-
o["default"] = v;
|
|
13
|
-
});
|
|
14
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
-
if (mod && mod.__esModule) return mod;
|
|
16
|
-
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
-
__setModuleDefault(result, mod);
|
|
19
|
-
return result;
|
|
20
|
-
};
|
|
21
|
-
var __read = (this && this.__read) || function (o, n) {
|
|
22
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
23
|
-
if (!m) return o;
|
|
24
|
-
var i = m.call(o), r, ar = [], e;
|
|
25
|
-
try {
|
|
26
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
27
|
-
}
|
|
28
|
-
catch (error) { e = { error: error }; }
|
|
29
|
-
finally {
|
|
30
|
-
try {
|
|
31
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
32
|
-
}
|
|
33
|
-
finally { if (e) throw e.error; }
|
|
34
|
-
}
|
|
35
|
-
return ar;
|
|
36
|
-
};
|
|
37
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
38
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
39
|
-
};
|
|
40
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
|
-
var react_1 = __importStar(require("react"));
|
|
42
|
-
var ColorPicker_1 = __importDefault(require("./ColorPicker"));
|
|
43
|
-
function ColorPicker() {
|
|
44
|
-
var _a = __read((0, react_1.useState)(null), 2), value = _a[0], setValue = _a[1];
|
|
45
|
-
return react_1.default.createElement(ColorPicker_1.default, { label: "Color Picker", value: value, onChange: function (evt) { return setValue(evt.target.value); } });
|
|
46
|
-
}
|
|
47
|
-
exports.default = ColorPicker;
|
|
@@ -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 ColorPicker_1 = require("./ColorPicker");
|
|
8
|
-
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
|
|
@@ -1,24 +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
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.colorPaletteStyles = void 0;
|
|
8
|
-
var react_1 = require("@emotion/react");
|
|
9
|
-
var Colors = {
|
|
10
|
-
light: {
|
|
11
|
-
background: '#ffffff',
|
|
12
|
-
inputText: '#111111',
|
|
13
|
-
inputBorder: 'rgba(0, 0, 0, 0.1)',
|
|
14
|
-
inputLabel: '#717171',
|
|
15
|
-
},
|
|
16
|
-
dark: {
|
|
17
|
-
background: '#181818',
|
|
18
|
-
inputText: '#f3f3f3',
|
|
19
|
-
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
|
20
|
-
inputLabel: '#999999',
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
exports.colorPaletteStyles = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rcp {\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 10px;\n box-sizing: border-box;\n }\n\n .rcp.rcp-light {\n background-color: ", ";\n }\n\n .rcp.rcp-dark {\n background-color: ", ";\n }\n\n .rcp-body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n width: 100%;\n padding: 20px;\n }\n\n .rcp-saturation {\n position: relative;\n width: 100%;\n background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);\n border-radius: 10px 10px 0 0;\n user-select: none;\n }\n\n .rcp-saturation-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n box-sizing: border-box;\n transform: translate(-10px, -10px);\n }\n\n .rcp-hue {\n position: relative;\n width: 100%;\n height: 12px;\n background-image: linear-gradient(\n to right,\n rgb(255, 0, 0),\n rgb(255, 255, 0),\n rgb(0, 255, 0),\n rgb(0, 255, 255),\n rgb(0, 0, 255),\n rgb(255, 0, 255),\n rgb(255, 0, 0)\n );\n border-radius: 10px;\n user-select: none;\n }\n\n .rcp-hue-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n box-sizing: border-box;\n transform: translate(-10px, -4px);\n }\n\n .rcp-alpha {\n position: relative;\n width: 100%;\n height: 12px;\n border-radius: 10px;\n user-select: none;\n }\n\n .rcp-alpha-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n box-sizing: border-box;\n transform: translate(-10px, -4px);\n }\n\n .rcp-fields {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 10px;\n width: 100%;\n }\n\n .rcp-fields-element {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .hex-element {\n grid-row: 1;\n }\n\n .hex-element:nth-of-type(3n) {\n grid-column: 1 / -1;\n }\n\n .rcp-fields-element-input {\n width: 100%;\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n background: none;\n border: 2px solid;\n border-radius: 5px;\n box-sizing: border-box;\n outline: none;\n padding: 10px;\n }\n\n .rcp-light .rcp-fields-element-input {\n color: ", ";\n border-color: ", ";\n }\n\n .rcp-dark .rcp-fields-element-input {\n color: ", ";\n border-color: ", ";\n }\n\n .rcp-fields-element-label {\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .rcp-light .rcp-fields-element-label {\n color: ", ";\n }\n\n .rcp-dark .rcp-fields-element-label {\n color: ", ";\n }\n"], ["\n .rcp {\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 10px;\n box-sizing: border-box;\n }\n\n .rcp.rcp-light {\n background-color: ", ";\n }\n\n .rcp.rcp-dark {\n background-color: ", ";\n }\n\n .rcp-body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n width: 100%;\n padding: 20px;\n }\n\n .rcp-saturation {\n position: relative;\n width: 100%;\n background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);\n border-radius: 10px 10px 0 0;\n user-select: none;\n }\n\n .rcp-saturation-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n box-sizing: border-box;\n transform: translate(-10px, -10px);\n }\n\n .rcp-hue {\n position: relative;\n width: 100%;\n height: 12px;\n background-image: linear-gradient(\n to right,\n rgb(255, 0, 0),\n rgb(255, 255, 0),\n rgb(0, 255, 0),\n rgb(0, 255, 255),\n rgb(0, 0, 255),\n rgb(255, 0, 255),\n rgb(255, 0, 0)\n );\n border-radius: 10px;\n user-select: none;\n }\n\n .rcp-hue-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n box-sizing: border-box;\n transform: translate(-10px, -4px);\n }\n\n .rcp-alpha {\n position: relative;\n width: 100%;\n height: 12px;\n border-radius: 10px;\n user-select: none;\n }\n\n .rcp-alpha-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n box-sizing: border-box;\n transform: translate(-10px, -4px);\n }\n\n .rcp-fields {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 10px;\n width: 100%;\n }\n\n .rcp-fields-element {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .hex-element {\n grid-row: 1;\n }\n\n .hex-element:nth-of-type(3n) {\n grid-column: 1 / -1;\n }\n\n .rcp-fields-element-input {\n width: 100%;\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n background: none;\n border: 2px solid;\n border-radius: 5px;\n box-sizing: border-box;\n outline: none;\n padding: 10px;\n }\n\n .rcp-light .rcp-fields-element-input {\n color: ", ";\n border-color: ", ";\n }\n\n .rcp-dark .rcp-fields-element-input {\n color: ", ";\n border-color: ", ";\n }\n\n .rcp-fields-element-label {\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .rcp-light .rcp-fields-element-label {\n color: ", ";\n }\n\n .rcp-dark .rcp-fields-element-label {\n color: ", ";\n }\n"])), Colors.light.background, Colors.dark.background, Colors.light.inputText, Colors.light.inputBorder, Colors.dark.inputText, Colors.dark.inputBorder, Colors.light.inputLabel, Colors.dark.inputLabel);
|
|
24
|
-
var templateObject_1;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/** @jsxRuntime classic */
|
|
2
|
-
/** @jsx jsx */
|
|
3
|
-
import { jsx } from '@emotion/react';
|
|
4
|
-
import { Filters, UseFiltersInstanceProps } from 'react-table';
|
|
5
|
-
import { SimpleMap } from '../../../types/Internal.types';
|
|
6
|
-
interface Props<D extends object> {
|
|
7
|
-
columnNameById: SimpleMap<string>;
|
|
8
|
-
filters: Filters<D>;
|
|
9
|
-
setFilter: UseFiltersInstanceProps<D>['setFilter'];
|
|
10
|
-
}
|
|
11
|
-
export default function AppliedFilters<D extends object>({ columnNameById, filters, setFilter }: Props<D>): jsx.JSX.Element | null;
|
|
12
|
-
export {};
|
|
@@ -1,26 +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
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
/** @jsxRuntime classic */
|
|
8
|
-
/** @jsx jsx */
|
|
9
|
-
var react_1 = require("@emotion/react");
|
|
10
|
-
var material_1 = require("@mui/material");
|
|
11
|
-
var SingleSelectFilter_1 = require("./FilterTool/Filters/SingleSelectFilter");
|
|
12
|
-
var PADDING = 24;
|
|
13
|
-
function AppliedFilters(_a) {
|
|
14
|
-
var columnNameById = _a.columnNameById, filters = _a.filters, setFilter = _a.setFilter;
|
|
15
|
-
if (!filters.length) {
|
|
16
|
-
return null;
|
|
17
|
-
}
|
|
18
|
-
return ((0, react_1.jsx)(material_1.Stack, { direction: "row", overflow: "none", css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: calc(100% - ", "px);\n padding: 8px ", "px;\n flex-wrap: wrap;\n gap: 0.25rem 0.25rem;\n "], ["\n width: calc(100% - ", "px);\n padding: 8px ", "px;\n flex-wrap: wrap;\n gap: 0.25rem 0.25rem;\n "])), PADDING * 2, PADDING) }, filters
|
|
19
|
-
.filter(function (filter) {
|
|
20
|
-
return (Array.isArray(filter.value) && !!filter.value.length) ||
|
|
21
|
-
(!Array.isArray(filter.value) && filter.value != null);
|
|
22
|
-
})
|
|
23
|
-
.map(function (filter) { return ((0, react_1.jsx)(material_1.Chip, { key: filter.id, label: columnNameById[filter.id] + ": " + (filter.value === '' ? SingleSelectFilter_1.BLANK_VALUE_LABEL : filter.value), onDelete: function () { return setFilter(filter.id, null); } })); })));
|
|
24
|
-
}
|
|
25
|
-
exports.default = AppliedFilters;
|
|
26
|
-
var templateObject_1;
|
|
@@ -1,42 +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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Data = exports.Columns = void 0;
|
|
18
|
-
var faker_1 = __importDefault(require("faker"));
|
|
19
|
-
var DataTable_1 = require("./DataTable");
|
|
20
|
-
exports.Columns = [
|
|
21
|
-
{
|
|
22
|
-
id: 'fullName',
|
|
23
|
-
Header: 'Full Name',
|
|
24
|
-
columns: [
|
|
25
|
-
__assign({ Header: 'First Name', accessor: 'firstName' }, (0, DataTable_1.getColumnFilterConfig)('text')),
|
|
26
|
-
__assign({ Header: 'Last Name', accessor: 'lastName', filterName: 'Custom LN' }, (0, DataTable_1.getColumnFilterConfig)('multi-select')),
|
|
27
|
-
],
|
|
28
|
-
},
|
|
29
|
-
__assign(__assign({ Header: 'Age', accessor: 'age', sortType: 'number', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('range')), { width: 100 }),
|
|
30
|
-
__assign({ Header: 'Occupation', accessor: 'occupation', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
|
|
31
|
-
__assign({ Header: 'Company', id: 'company', accessor: function (originalRow) { return originalRow.company.name; }, disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
|
|
32
|
-
];
|
|
33
|
-
exports.Data = new Array(20).fill(null).map(function () { return ({
|
|
34
|
-
id: faker_1.default.datatype.uuid(),
|
|
35
|
-
firstName: faker_1.default.name.firstName(),
|
|
36
|
-
lastName: faker_1.default.name.lastName(),
|
|
37
|
-
age: faker_1.default.datatype.number(60),
|
|
38
|
-
occupation: faker_1.default.name.jobTitle(),
|
|
39
|
-
company: {
|
|
40
|
-
name: faker_1.default.company.companyName(),
|
|
41
|
-
},
|
|
42
|
-
}); });
|