@redsift/table 11.5.0 → 11.6.0-muiv5-alpha.0
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/_virtual/_commonjsHelpers.js +6 -0
- package/_virtual/_commonjsHelpers.js.map +1 -0
- package/_virtual/_rollupPluginBabelHelpers.js +93 -0
- package/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
- package/_virtual/index.js +4 -0
- package/_virtual/index.js.map +1 -0
- package/_virtual/index2.js +4 -0
- package/_virtual/index2.js.map +1 -0
- package/_virtual/index3.js +4 -0
- package/_virtual/index3.js.map +1 -0
- package/_virtual/jsx-runtime.js +4 -0
- package/_virtual/jsx-runtime.js.map +1 -0
- package/_virtual/react-is.development.js +4 -0
- package/_virtual/react-is.development.js.map +1 -0
- package/_virtual/react-is.development2.js +4 -0
- package/_virtual/react-is.development2.js.map +1 -0
- package/_virtual/react-is.production.min.js +4 -0
- package/_virtual/react-is.production.min.js.map +1 -0
- package/_virtual/react-is.production.min2.js +4 -0
- package/_virtual/react-is.production.min2.js.map +1 -0
- package/_virtual/react-jsx-runtime.development.js +4 -0
- package/_virtual/react-jsx-runtime.development.js.map +1 -0
- package/_virtual/react-jsx-runtime.production.min.js +4 -0
- package/_virtual/react-jsx-runtime.production.min.js.map +1 -0
- package/components/BaseComponents/BaseButton.d.ts +5 -0
- package/components/BaseComponents/BaseButton.js +41 -0
- package/components/BaseComponents/BaseButton.js.map +1 -0
- package/components/BaseComponents/BaseCheckbox.d.ts +5 -0
- package/components/BaseComponents/BaseCheckbox.js +24 -0
- package/components/BaseComponents/BaseCheckbox.js.map +1 -0
- package/components/BaseComponents/BaseIcon.d.ts +7 -0
- package/components/BaseComponents/BaseIcon.js +33 -0
- package/components/BaseComponents/BaseIcon.js.map +1 -0
- package/components/BaseComponents/BasePopper.d.ts +5 -0
- package/components/BaseComponents/BasePopper.js +13 -0
- package/components/BaseComponents/BasePopper.js.map +1 -0
- package/components/BaseComponents/BaseTextField.d.ts +5 -0
- package/components/BaseComponents/BaseTextField.js +26 -0
- package/components/BaseComponents/BaseTextField.js.map +1 -0
- package/components/DataGrid/DataGrid.d.ts +6 -0
- package/components/DataGrid/DataGrid.js +340 -0
- package/components/DataGrid/DataGrid.js.map +1 -0
- package/components/DataGrid/styles.js +74 -0
- package/components/DataGrid/styles.js.map +1 -0
- package/components/DataGrid/types.d.ts +36 -0
- package/components/GridToolbarFilterSemanticField/GridToolbarFilterSemanticField.d.ts +15 -0
- package/components/GridToolbarFilterSemanticField/GridToolbarFilterSemanticField.js +183 -0
- package/components/GridToolbarFilterSemanticField/GridToolbarFilterSemanticField.js.map +1 -0
- package/components/GridToolbarFilterSemanticField/styles.js +20 -0
- package/components/GridToolbarFilterSemanticField/styles.js.map +1 -0
- package/components/GridToolbarFilterSemanticField/types.d.ts +39 -0
- package/components/Pagination/ControlledPagination.d.ts +21 -0
- package/components/Pagination/ControlledPagination.js +74 -0
- package/components/Pagination/ControlledPagination.js.map +1 -0
- package/components/Pagination/ServerSideControlledPagination.d.ts +23 -0
- package/components/Pagination/ServerSideControlledPagination.js +102 -0
- package/components/Pagination/ServerSideControlledPagination.js.map +1 -0
- package/components/StatefulDataGrid/StatefulDataGrid.d.ts +6 -0
- package/components/StatefulDataGrid/StatefulDataGrid.js +373 -0
- package/components/StatefulDataGrid/StatefulDataGrid.js.map +1 -0
- package/components/StatefulDataGrid/types.d.ts +16 -0
- package/components/TextCell/TextCell.d.ts +9 -0
- package/components/TextCell/TextCell.js +48 -0
- package/components/TextCell/TextCell.js.map +1 -0
- package/components/TextCell/styles.js +22 -0
- package/components/TextCell/styles.js.map +1 -0
- package/components/TextCell/types.d.ts +25 -0
- package/components/Toolbar/Toolbar.d.ts +20 -0
- package/components/Toolbar/Toolbar.js +72 -0
- package/components/Toolbar/Toolbar.js.map +1 -0
- package/components/Toolbar/styles.js +17 -0
- package/components/Toolbar/styles.js.map +1 -0
- package/components/Toolbar/types.d.ts +40 -0
- package/components/ToolbarWrapper/ToolbarWrapper.d.ts +25 -0
- package/components/ToolbarWrapper/ToolbarWrapper.js +60 -0
- package/components/ToolbarWrapper/ToolbarWrapper.js.map +1 -0
- package/hooks/useControlledDatagridState.js +109 -0
- package/hooks/useControlledDatagridState.js.map +1 -0
- package/hooks/useFetchState.js +34 -0
- package/hooks/useFetchState.js.map +1 -0
- package/hooks/useStatefulTable.d.ts +12 -0
- package/hooks/useStatefulTable.js +182 -0
- package/hooks/useStatefulTable.js.map +1 -0
- package/hooks/useTableStates.js +52 -0
- package/hooks/useTableStates.js.map +1 -0
- package/index.d.ts +40 -629
- package/index.js +36 -28267
- package/index.js.map +1 -1
- package/package.json +6 -6
- package/packages/design-system/src/components/theme/context.js +7 -0
- package/packages/design-system/src/components/theme/context.js.map +1 -0
- package/packages/popovers/src/components/tooltip/Tooltip.js +60 -0
- package/packages/popovers/src/components/tooltip/Tooltip.js.map +1 -0
- package/packages/popovers/src/components/tooltip/context.js +6 -0
- package/packages/popovers/src/components/tooltip/context.js.map +1 -0
- package/packages/popovers/src/components/tooltip/types.js +28 -0
- package/packages/popovers/src/components/tooltip/types.js.map +1 -0
- package/packages/popovers/src/components/tooltip/useTooltip.js +78 -0
- package/packages/popovers/src/components/tooltip/useTooltip.js.map +1 -0
- package/packages/popovers/src/components/tooltip/useTooltipContext.js +13 -0
- package/packages/popovers/src/components/tooltip/useTooltipContext.js.map +1 -0
- package/packages/popovers/src/components/tooltip-content/TooltipContent.js +79 -0
- package/packages/popovers/src/components/tooltip-content/TooltipContent.js.map +1 -0
- package/packages/popovers/src/components/tooltip-content/styles.js +127 -0
- package/packages/popovers/src/components/tooltip-content/styles.js.map +1 -0
- package/packages/popovers/src/components/tooltip-trigger/TooltipTrigger.js +47 -0
- package/packages/popovers/src/components/tooltip-trigger/TooltipTrigger.js.map +1 -0
- package/utils/columnTypes/index.d.ts +78 -0
- package/utils/columnTypes/index.js +49 -0
- package/utils/columnTypes/index.js.map +1 -0
- package/utils/columns/detailPanelToggleColDef.d.ts +5 -0
- package/utils/columns/detailPanelToggleColDef.js +8 -0
- package/utils/columns/detailPanelToggleColDef.js.map +1 -0
- package/utils/fields/InputNumberInterval.js +85 -0
- package/utils/fields/InputNumberInterval.js.map +1 -0
- package/utils/gpt.d.ts +3 -0
- package/utils/gpt.js +33 -0
- package/utils/gpt.js.map +1 -0
- package/utils/localStorage.d.ts +17 -0
- package/utils/localStorage.js +59 -0
- package/utils/localStorage.js.map +1 -0
- package/utils/operators/index.d.ts +68 -0
- package/utils/operators/index.js +52 -0
- package/utils/operators/index.js.map +1 -0
- package/utils/operators/numeric/getGridNumericOperators.d.ts +5 -0
- package/utils/operators/numeric/getGridNumericOperators.js +7 -0
- package/utils/operators/numeric/getGridNumericOperators.js.map +1 -0
- package/utils/operators/numeric/isBetween.d.ts +10 -0
- package/utils/operators/numeric/isBetween.js +28 -0
- package/utils/operators/numeric/isBetween.js.map +1 -0
- package/utils/operators/string/doesNotContain.d.ts +10 -0
- package/utils/operators/string/doesNotContain.js +25 -0
- package/utils/operators/string/doesNotContain.js.map +1 -0
- package/utils/operators/string/doesNotEqual.d.ts +10 -0
- package/utils/operators/string/doesNotEqual.js +25 -0
- package/utils/operators/string/doesNotEqual.js.map +1 -0
- package/utils/operators/string/doesNotHave.d.ts +16 -0
- package/utils/operators/string/doesNotHave.js +24 -0
- package/utils/operators/string/doesNotHave.js.map +1 -0
- package/utils/operators/string/getGridStringOperators.d.ts +5 -0
- package/utils/operators/string/getGridStringOperators.js +9 -0
- package/utils/operators/string/getGridStringOperators.js.map +1 -0
- package/utils/operators/string/has.d.ts +16 -0
- package/utils/operators/string/has.js +24 -0
- package/utils/operators/string/has.js.map +1 -0
- package/utils/operators/string/hasOnly.d.ts +16 -0
- package/utils/operators/string/hasOnly.js +24 -0
- package/utils/operators/string/hasOnly.js.map +1 -0
- package/utils/operators/string/is.d.ts +16 -0
- package/utils/operators/string/is.js +26 -0
- package/utils/operators/string/is.js.map +1 -0
- package/utils/operators/string/isNot.d.ts +16 -0
- package/utils/operators/string/isNot.js +26 -0
- package/utils/operators/string/isNot.js.map +1 -0
- package/utils/operators/string-array/containsAnyOf.d.ts +16 -0
- package/utils/operators/string-array/containsAnyOf.js +56 -0
- package/utils/operators/string-array/containsAnyOf.js.map +1 -0
- package/utils/operators/string-array/doesNotHaveAnyOf.js +26 -0
- package/utils/operators/string-array/doesNotHaveAnyOf.js.map +1 -0
- package/utils/operators/string-array/endsWithAnyOf.d.ts +10 -0
- package/utils/operators/string-array/endsWithAnyOf.js +31 -0
- package/utils/operators/string-array/endsWithAnyOf.js.map +1 -0
- package/utils/operators/string-array/getGridStringArrayOperators.d.ts +7 -0
- package/utils/operators/string-array/getGridStringArrayOperators.js +19 -0
- package/utils/operators/string-array/getGridStringArrayOperators.js.map +1 -0
- package/utils/operators/string-array/hasAnyOf.d.ts +16 -0
- package/utils/operators/string-array/hasAnyOf.js +28 -0
- package/utils/operators/string-array/hasAnyOf.js.map +1 -0
- package/utils/operators/string-array/isAnyOf.d.ts +16 -0
- package/utils/operators/string-array/isAnyOf.js +32 -0
- package/utils/operators/string-array/isAnyOf.js.map +1 -0
- package/utils/operators/string-array/isNotAnyOf.d.ts +10 -0
- package/utils/operators/string-array/isNotAnyOf.js +28 -0
- package/utils/operators/string-array/isNotAnyOf.js.map +1 -0
- package/utils/operators/string-array/startsWithAnyOf.d.ts +10 -0
- package/utils/operators/string-array/startsWithAnyOf.js +31 -0
- package/utils/operators/string-array/startsWithAnyOf.js.map +1 -0
- package/utils/urlLocalStorageSync.d.ts +73 -0
- package/utils/urlLocalStorageSync.js +756 -0
- package/utils/urlLocalStorageSync.js.map +1 -0
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default, { forwardRef, useRef, useState } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { Flexbox, TextField, Button, Switch, Text } from '@redsift/design-system';
|
|
5
|
+
import { StyledGridToolbarFilterSemanticField } from './styles.js';
|
|
6
|
+
import { getCompletion } from '../../utils/gpt.js';
|
|
7
|
+
import { Tooltip } from '../../packages/popovers/src/components/tooltip/Tooltip.js';
|
|
8
|
+
|
|
9
|
+
const _excluded = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
|
|
10
|
+
const COMPONENT_NAME = 'GridToolbarFilterSemanticField';
|
|
11
|
+
const CLASSNAME = 'redsift-datagrid-toolbar-nlp-filter-field';
|
|
12
|
+
const DEFAULT_OPERATORS = {
|
|
13
|
+
string: ['contains', 'equals', 'startsWith', 'endsWith', 'isEmpty', 'isNotEmpty', 'isAnyOf'],
|
|
14
|
+
number: ['=', '!=', '>', '>=', '<', '<=', 'isEmpty', 'isNotEmpty', 'isAnyOf'],
|
|
15
|
+
boolean: ['is'],
|
|
16
|
+
date: ['is', 'not', 'after', 'onOrAfter', 'before', 'onOrBefore', 'isEmpty', 'isNotEmpty']
|
|
17
|
+
};
|
|
18
|
+
const getRole = (config, dateFormat) => {
|
|
19
|
+
const today = new Date().toDateString();
|
|
20
|
+
const columns = `[${config.columns.map(_ref => {
|
|
21
|
+
let {
|
|
22
|
+
field
|
|
23
|
+
} = _ref;
|
|
24
|
+
return `"${field}"`;
|
|
25
|
+
}).join(', ')}]`;
|
|
26
|
+
const operators = Object.entries(config.typeOperators).map(_ref2 => {
|
|
27
|
+
let [k, values] = _ref2;
|
|
28
|
+
return values.length === 1 ? ` - For "${k}" data type, operator must only be "${values[0]}"` : ` - For "${k}" data type, operator must be one of [${values.map(v => `"${v}"`).join(', ')}]`;
|
|
29
|
+
}).join('\n');
|
|
30
|
+
const column_description = config.columns.map(_ref3 => {
|
|
31
|
+
let {
|
|
32
|
+
field,
|
|
33
|
+
type,
|
|
34
|
+
description
|
|
35
|
+
} = _ref3;
|
|
36
|
+
return `- "${field}": "${type}" data type; ${description ? description.trim() : ''}`;
|
|
37
|
+
}).join('\n');
|
|
38
|
+
return `The AI assistant parses user input to generate a JSON object that will be used as a row filter for a data table MUI Data Grid.
|
|
39
|
+
The filter supports mulitple conditions using only two logical operator "and", "or". It only allows "and" between all conditions or "or" between all conditions. It can't mix the two types.
|
|
40
|
+
The AI assistant extracts information from the user input and generates a JSON object with exactly the two keys "linkOperator" and "items":
|
|
41
|
+
- "linkOperator": the logical operator, only "and" or "or" are allowed. If there is only one condition in the "items", use "and".
|
|
42
|
+
- "items": a list of conditions, each is an object with exactly the three keys "columnField", "operatorValue" and "value":
|
|
43
|
+
- "columnField": the column name, must be one of ${columns}
|
|
44
|
+
- "value":
|
|
45
|
+
- this can be skipped if the "operatorValue" is either "isEmpty" or "isNotEmpty"
|
|
46
|
+
- a list of multiple values if the "operatorValue" ends with "AnyOf"
|
|
47
|
+
- otherwise, it's a single value represented as a string: "true" instead of true, "false" instead of false, "0.6" instead of 0.6.
|
|
48
|
+
For "date" data type, use ${dateFormat}. If relative date is input, convert to the actual date given today is ${today}.
|
|
49
|
+
- "operatorValue": the comparison operator, accepted values depend on the data type of the column
|
|
50
|
+
${operators}
|
|
51
|
+
|
|
52
|
+
Below is the datatype in square bracket, constraints on the data range if any, followed by the description of each column used in the data table:
|
|
53
|
+
${column_description}
|
|
54
|
+
|
|
55
|
+
Notes:
|
|
56
|
+
- For "boolean" data type, use "is" operator with value "false" instead of "isEmpty".
|
|
57
|
+
${config.notes.trim()}
|
|
58
|
+
|
|
59
|
+
Pay close attention to the the data type, description and supported operators above to make a valid selection of fields.
|
|
60
|
+
Think step by step and check carefully if the chosen operator is supported by the chosen data type.
|
|
61
|
+
Return just the JSON object without any extra text, explanation or note.
|
|
62
|
+
If the user input can't be parsed, return a JSON object to indicate the error and the reason {"code":"error", "reason":"explain why it was failed to parse"}.
|
|
63
|
+
`;
|
|
64
|
+
};
|
|
65
|
+
async function getOpenAICompletion(config, prompt, model, dateFormat) {
|
|
66
|
+
const text = 'Parse the text delimited by triple backticks: ```' + prompt.trim() + '``` and make sure the output is a valid JSON object';
|
|
67
|
+
const role = getRole(config, dateFormat);
|
|
68
|
+
const completion = await getCompletion(text, role, config.openaiApiKey, model);
|
|
69
|
+
const response = JSON.parse(completion);
|
|
70
|
+
if ('code' in response) {
|
|
71
|
+
throw new Error(response.reason);
|
|
72
|
+
}
|
|
73
|
+
return response;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* The GridToolbarFilterSemanticField component.
|
|
78
|
+
*/
|
|
79
|
+
const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
|
|
80
|
+
const fieldRef = ref || useRef();
|
|
81
|
+
const {
|
|
82
|
+
className,
|
|
83
|
+
nlpFilterConfig,
|
|
84
|
+
onFilterModelChange,
|
|
85
|
+
dateFormat = 'yyyy-mm-dd',
|
|
86
|
+
defaultModel = 'gpt-4-0613',
|
|
87
|
+
defaultFilter = {
|
|
88
|
+
items: [],
|
|
89
|
+
linkOperator: 'and'
|
|
90
|
+
},
|
|
91
|
+
disablePower = false,
|
|
92
|
+
localeText
|
|
93
|
+
} = props,
|
|
94
|
+
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
95
|
+
const {
|
|
96
|
+
textLabel,
|
|
97
|
+
textPlaceholder,
|
|
98
|
+
buttonAriaLabel,
|
|
99
|
+
buttonText,
|
|
100
|
+
powerText,
|
|
101
|
+
powerTooltipContent,
|
|
102
|
+
errorText
|
|
103
|
+
} = _objectSpread2({
|
|
104
|
+
textLabel: 'Semantic filtering',
|
|
105
|
+
textPlaceholder: 'Describe here how you would like to filter this datagrid.',
|
|
106
|
+
buttonAriaLabel: 'Submit',
|
|
107
|
+
buttonText: 'Run',
|
|
108
|
+
powerText: 'Power mode',
|
|
109
|
+
powerTooltipContent: 'The Power mode can get better results but is slower.',
|
|
110
|
+
errorText: 'Unable to find a valid filter, please try again with a more specific prompt.'
|
|
111
|
+
}, localeText);
|
|
112
|
+
const [prompt, setPrompt] = useState('');
|
|
113
|
+
const modelRef = useRef(defaultModel);
|
|
114
|
+
const showErrorRef = useRef(false);
|
|
115
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
116
|
+
const handlePromptSubmit = async event => {
|
|
117
|
+
event.preventDefault();
|
|
118
|
+
if (prompt !== undefined) {
|
|
119
|
+
let filter;
|
|
120
|
+
|
|
121
|
+
// Use the cache if it's available and it's not the default filter.
|
|
122
|
+
// We still want to rerun default filter because it might be due to request fail.
|
|
123
|
+
const response = sessionStorage.getItem(prompt);
|
|
124
|
+
if (response && response !== JSON.stringify(defaultFilter)) {
|
|
125
|
+
filter = JSON.parse(response);
|
|
126
|
+
} else {
|
|
127
|
+
setIsLoading(true);
|
|
128
|
+
showErrorRef.current = false;
|
|
129
|
+
try {
|
|
130
|
+
if (nlpFilterConfig.completionFunc !== undefined) {
|
|
131
|
+
filter = await nlpFilterConfig.completionFunc(nlpFilterConfig, prompt, modelRef.current);
|
|
132
|
+
} else {
|
|
133
|
+
filter = await getOpenAICompletion(nlpFilterConfig, prompt, modelRef.current, dateFormat);
|
|
134
|
+
}
|
|
135
|
+
sessionStorage.setItem(prompt, JSON.stringify(filter));
|
|
136
|
+
} catch (error) {
|
|
137
|
+
showErrorRef.current = true;
|
|
138
|
+
filter = defaultFilter;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// MUI requires different id
|
|
142
|
+
filter.items.forEach((d, i) => d.id = i);
|
|
143
|
+
}
|
|
144
|
+
onFilterModelChange(filter);
|
|
145
|
+
setIsLoading(false);
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
return /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
149
|
+
flexDirection: "column",
|
|
150
|
+
gap: "0",
|
|
151
|
+
width: "100%"
|
|
152
|
+
}, /*#__PURE__*/React__default.createElement(StyledGridToolbarFilterSemanticField, _extends({}, forwardedProps, {
|
|
153
|
+
className: classNames(GridToolbarFilterSemanticField.className, className),
|
|
154
|
+
ref: fieldRef,
|
|
155
|
+
onSubmit: handlePromptSubmit
|
|
156
|
+
}), /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
157
|
+
gap: "0",
|
|
158
|
+
width: "100%"
|
|
159
|
+
}, /*#__PURE__*/React__default.createElement(TextField, {
|
|
160
|
+
width: "100%",
|
|
161
|
+
label: textLabel,
|
|
162
|
+
placeholder: textPlaceholder,
|
|
163
|
+
onChange: value => setPrompt(value),
|
|
164
|
+
value: prompt
|
|
165
|
+
}), /*#__PURE__*/React__default.createElement(Button, {
|
|
166
|
+
variant: "primary",
|
|
167
|
+
"aira-label": buttonAriaLabel,
|
|
168
|
+
type: "submit",
|
|
169
|
+
isLoading: isLoading
|
|
170
|
+
}, buttonText)), !disablePower && /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, /*#__PURE__*/React__default.createElement(Switch, {
|
|
171
|
+
width: "175px",
|
|
172
|
+
isSelected: modelRef.current === 'gpt-4-0613',
|
|
173
|
+
onChange: value => modelRef.current = value ? 'gpt-4-0613' : 'gpt-3.5-turbo-0613'
|
|
174
|
+
}, powerText)), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, powerTooltipContent))), showErrorRef.current && /*#__PURE__*/React__default.createElement(Text, {
|
|
175
|
+
color: "error",
|
|
176
|
+
marginLeft: "8px"
|
|
177
|
+
}, errorText));
|
|
178
|
+
});
|
|
179
|
+
GridToolbarFilterSemanticField.className = CLASSNAME;
|
|
180
|
+
GridToolbarFilterSemanticField.displayName = COMPONENT_NAME;
|
|
181
|
+
|
|
182
|
+
export { DEFAULT_OPERATORS, GridToolbarFilterSemanticField };
|
|
183
|
+
//# sourceMappingURL=GridToolbarFilterSemanticField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridToolbarFilterSemanticField.js","sources":["../../../src/components/GridToolbarFilterSemanticField/GridToolbarFilterSemanticField.tsx"],"sourcesContent":["import React, { FormEvent, forwardRef, RefObject, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { Comp, Button, Text, TextField, Switch, Flexbox } from '@redsift/design-system';\nimport { Tooltip } from '@redsift/popovers';\n\nimport { StyledGridToolbarFilterSemanticField } from './styles';\nimport { GridToolbarFilterSemanticFieldProps, CompletionResponse } from './types';\n\nimport { FilterConfig } from './types';\nimport { getCompletion } from '../../utils/gpt';\n\nconst COMPONENT_NAME = 'GridToolbarFilterSemanticField';\nconst CLASSNAME = 'redsift-datagrid-toolbar-nlp-filter-field';\n\nexport const DEFAULT_OPERATORS = {\n string: ['contains', 'equals', 'startsWith', 'endsWith', 'isEmpty', 'isNotEmpty', 'isAnyOf'],\n number: ['=', '!=', '>', '>=', '<', '<=', 'isEmpty', 'isNotEmpty', 'isAnyOf'],\n boolean: ['is'],\n date: ['is', 'not', 'after', 'onOrAfter', 'before', 'onOrBefore', 'isEmpty', 'isNotEmpty'],\n};\n\nconst getRole = (config: FilterConfig, dateFormat: string): string => {\n const today = new Date().toDateString();\n const columns = `[${config.columns.map(({ field }: any) => `\"${field}\"`).join(', ')}]`;\n const operators = Object.entries(config.typeOperators)\n .map(([k, values]: [string, any[]]) => {\n return values.length === 1\n ? ` - For \"${k}\" data type, operator must only be \"${values[0]}\"`\n : ` - For \"${k}\" data type, operator must be one of [${values.map((v: any) => `\"${v}\"`).join(', ')}]`;\n })\n .join('\\n');\n const column_description = config.columns\n .map(\n ({ field, type, description }: any) =>\n `- \"${field}\": \"${type}\" data type; ${description ? description.trim() : ''}`\n )\n .join('\\n');\n\n return `The AI assistant parses user input to generate a JSON object that will be used as a row filter for a data table MUI Data Grid.\nThe filter supports mulitple conditions using only two logical operator \"and\", \"or\". It only allows \"and\" between all conditions or \"or\" between all conditions. It can't mix the two types.\nThe AI assistant extracts information from the user input and generates a JSON object with exactly the two keys \"linkOperator\" and \"items\":\n- \"linkOperator\": the logical operator, only \"and\" or \"or\" are allowed. If there is only one condition in the \"items\", use \"and\".\n- \"items\": a list of conditions, each is an object with exactly the three keys \"columnField\", \"operatorValue\" and \"value\":\n - \"columnField\": the column name, must be one of ${columns}\n - \"value\":\n - this can be skipped if the \"operatorValue\" is either \"isEmpty\" or \"isNotEmpty\"\n - a list of multiple values if the \"operatorValue\" ends with \"AnyOf\"\n - otherwise, it's a single value represented as a string: \"true\" instead of true, \"false\" instead of false, \"0.6\" instead of 0.6.\n For \"date\" data type, use ${dateFormat}. If relative date is input, convert to the actual date given today is ${today}.\n - \"operatorValue\": the comparison operator, accepted values depend on the data type of the column\n${operators}\n\nBelow is the datatype in square bracket, constraints on the data range if any, followed by the description of each column used in the data table:\n${column_description}\n\nNotes:\n- For \"boolean\" data type, use \"is\" operator with value \"false\" instead of \"isEmpty\".\n${config.notes.trim()}\n\nPay close attention to the the data type, description and supported operators above to make a valid selection of fields.\nThink step by step and check carefully if the chosen operator is supported by the chosen data type.\nReturn just the JSON object without any extra text, explanation or note.\nIf the user input can't be parsed, return a JSON object to indicate the error and the reason {\"code\":\"error\", \"reason\":\"explain why it was failed to parse\"}.\n`;\n};\n\nasync function getOpenAICompletion(\n config: FilterConfig,\n prompt: string,\n model: string,\n dateFormat: string\n): Promise<CompletionResponse> {\n const text =\n 'Parse the text delimited by triple backticks: ```' +\n prompt.trim() +\n '``` and make sure the output is a valid JSON object';\n const role = getRole(config, dateFormat);\n\n const completion = await getCompletion(text, role, config.openaiApiKey, model);\n const response = JSON.parse(completion);\n if ('code' in response) {\n throw new Error(response.reason);\n }\n return response;\n}\n\n/**\n * The GridToolbarFilterSemanticField component.\n */\nexport const GridToolbarFilterSemanticField: Comp<GridToolbarFilterSemanticFieldProps, HTMLFormElement> = forwardRef(\n (props, ref) => {\n const fieldRef = ref || useRef<HTMLFormElement>();\n const {\n className,\n nlpFilterConfig,\n onFilterModelChange,\n dateFormat = 'yyyy-mm-dd',\n defaultModel = 'gpt-4-0613',\n defaultFilter = { items: [], linkOperator: 'and' },\n disablePower = false,\n localeText,\n ...forwardedProps\n } = props;\n const { textLabel, textPlaceholder, buttonAriaLabel, buttonText, powerText, powerTooltipContent, errorText } = {\n textLabel: 'Semantic filtering',\n textPlaceholder: 'Describe here how you would like to filter this datagrid.',\n buttonAriaLabel: 'Submit',\n buttonText: 'Run',\n powerText: 'Power mode',\n powerTooltipContent: 'The Power mode can get better results but is slower.',\n errorText: 'Unable to find a valid filter, please try again with a more specific prompt.',\n ...localeText,\n };\n const [prompt, setPrompt] = useState<string>('');\n const modelRef = useRef<string>(defaultModel!);\n const showErrorRef = useRef<boolean>(false);\n const [isLoading, setIsLoading] = useState<boolean>(false);\n\n const handlePromptSubmit = async (event: FormEvent) => {\n event.preventDefault();\n if (prompt !== undefined) {\n let filter;\n\n // Use the cache if it's available and it's not the default filter.\n // We still want to rerun default filter because it might be due to request fail.\n const response = sessionStorage.getItem(prompt);\n if (response && response !== JSON.stringify(defaultFilter)) {\n filter = JSON.parse(response);\n } else {\n setIsLoading(true);\n showErrorRef.current = false;\n\n try {\n if (nlpFilterConfig.completionFunc !== undefined) {\n filter = await nlpFilterConfig.completionFunc(nlpFilterConfig, prompt, modelRef.current);\n } else {\n filter = await getOpenAICompletion(nlpFilterConfig, prompt, modelRef.current, dateFormat!);\n }\n\n sessionStorage.setItem(prompt, JSON.stringify(filter));\n } catch (error) {\n showErrorRef.current = true;\n filter = defaultFilter!;\n }\n\n // MUI requires different id\n filter.items.forEach((d: any, i: number) => (d.id = i));\n }\n\n onFilterModelChange(filter);\n setIsLoading(false);\n }\n };\n\n return (\n <Flexbox flexDirection=\"column\" gap=\"0\" width=\"100%\">\n <StyledGridToolbarFilterSemanticField\n {...forwardedProps}\n className={classNames(GridToolbarFilterSemanticField.className, className)}\n ref={fieldRef as RefObject<HTMLFormElement>}\n onSubmit={handlePromptSubmit}\n >\n <Flexbox gap=\"0\" width=\"100%\">\n <TextField\n width=\"100%\"\n label={textLabel}\n placeholder={textPlaceholder}\n onChange={(value: string) => setPrompt(value)}\n value={prompt}\n />\n <Button variant=\"primary\" aira-label={buttonAriaLabel} type=\"submit\" isLoading={isLoading}>\n {buttonText}\n </Button>\n </Flexbox>\n {!disablePower && (\n <Tooltip>\n <Tooltip.Trigger>\n <Switch\n width=\"175px\"\n isSelected={modelRef.current === 'gpt-4-0613'}\n onChange={(value) => (modelRef.current = value ? 'gpt-4-0613' : 'gpt-3.5-turbo-0613')}\n >\n {powerText}\n </Switch>\n </Tooltip.Trigger>\n <Tooltip.Content>{powerTooltipContent}</Tooltip.Content>\n </Tooltip>\n )}\n </StyledGridToolbarFilterSemanticField>\n {showErrorRef.current && (\n <Text color=\"error\" marginLeft=\"8px\">\n {errorText}\n </Text>\n )}\n </Flexbox>\n );\n }\n);\n\nGridToolbarFilterSemanticField.className = CLASSNAME;\nGridToolbarFilterSemanticField.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DEFAULT_OPERATORS","string","number","boolean","date","getRole","config","dateFormat","today","Date","toDateString","columns","map","_ref","field","join","operators","Object","entries","typeOperators","_ref2","k","values","length","v","column_description","_ref3","type","description","trim","notes","getOpenAICompletion","prompt","model","text","role","completion","getCompletion","openaiApiKey","response","JSON","parse","Error","reason","GridToolbarFilterSemanticField","forwardRef","props","ref","fieldRef","useRef","className","nlpFilterConfig","onFilterModelChange","defaultModel","defaultFilter","items","linkOperator","disablePower","localeText","forwardedProps","_objectWithoutProperties","_excluded","textLabel","textPlaceholder","buttonAriaLabel","buttonText","powerText","powerTooltipContent","errorText","_objectSpread","setPrompt","useState","modelRef","showErrorRef","isLoading","setIsLoading","handlePromptSubmit","event","preventDefault","undefined","filter","sessionStorage","getItem","stringify","current","completionFunc","setItem","error","forEach","d","i","id","React","createElement","Flexbox","flexDirection","gap","width","StyledGridToolbarFilterSemanticField","_extends","classNames","onSubmit","TextField","label","placeholder","onChange","value","Button","variant","Tooltip","Trigger","Switch","isSelected","Content","Text","color","marginLeft","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
const StyledGridToolbarFilterSemanticField = styled.form`
|
|
4
|
+
display: flex;
|
|
5
|
+
gap: 8px;
|
|
6
|
+
align-items: center;
|
|
7
|
+
margin-left: 8px;
|
|
8
|
+
width: 100%;
|
|
9
|
+
|
|
10
|
+
.redsift-text-field-input-wrapper__fieldset {
|
|
11
|
+
border-radius: 4px 0 0 4px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.redsift-button {
|
|
15
|
+
border-radius: 0 4px 4px 0;
|
|
16
|
+
}
|
|
17
|
+
`;
|
|
18
|
+
|
|
19
|
+
export { StyledGridToolbarFilterSemanticField };
|
|
20
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../src/components/GridToolbarFilterSemanticField/styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledGridToolbarFilterSemanticField = styled.form`\n display: flex;\n gap: 8px;\n align-items: center;\n margin-left: 8px;\n width: 100%;\n\n .redsift-text-field-input-wrapper__fieldset {\n border-radius: 4px 0 0 4px;\n }\n\n .redsift-button {\n border-radius: 0 4px 4px 0;\n }\n`;\n"],"names":["StyledGridToolbarFilterSemanticField","styled","form"],"mappings":";;AAEaA,MAAAA,oCAAoC,GAAGC,MAAM,CAACC,IAAK,CAAA;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { GridFilterModel } from '@mui/x-data-grid-pro';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
|
|
4
|
+
interface CompletionResponseItem {
|
|
5
|
+
columnField: string;
|
|
6
|
+
operatorValue: string;
|
|
7
|
+
value?: string;
|
|
8
|
+
}
|
|
9
|
+
type CompletionResponse = {
|
|
10
|
+
linkOperator: 'and' | 'or';
|
|
11
|
+
items: CompletionResponseItem[];
|
|
12
|
+
};
|
|
13
|
+
interface LocaleText {
|
|
14
|
+
textLabel?: string;
|
|
15
|
+
textPlaceholder?: string;
|
|
16
|
+
buttonAriaLabel?: string;
|
|
17
|
+
buttonText?: string;
|
|
18
|
+
powerText?: string;
|
|
19
|
+
powerTooltipContent?: string;
|
|
20
|
+
errorText?: string;
|
|
21
|
+
}
|
|
22
|
+
interface FilterConfig {
|
|
23
|
+
columns: object[];
|
|
24
|
+
typeOperators: object;
|
|
25
|
+
notes: string;
|
|
26
|
+
openaiApiKey?: string;
|
|
27
|
+
completionFunc?: (nlpFilterConfig: FilterConfig, prompt: string, model: string) => Promise<CompletionResponse>;
|
|
28
|
+
}
|
|
29
|
+
interface GridToolbarFilterSemanticFieldProps extends ComponentProps<'form'> {
|
|
30
|
+
nlpFilterConfig: FilterConfig;
|
|
31
|
+
onFilterModelChange: (filterModel: GridFilterModel) => void;
|
|
32
|
+
dateFormat?: string;
|
|
33
|
+
defaultModel?: string;
|
|
34
|
+
defaultFilter?: CompletionResponse;
|
|
35
|
+
disablePower?: boolean;
|
|
36
|
+
localeText?: LocaleText;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export { CompletionResponse, FilterConfig, GridToolbarFilterSemanticFieldProps };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
|
2
|
+
import { SelectionStatus, DataGridProps } from '../DataGrid/types.js';
|
|
3
|
+
import { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';
|
|
4
|
+
|
|
5
|
+
type ControlledPaginationProps = {
|
|
6
|
+
displaySelection?: boolean;
|
|
7
|
+
displayRowsPerPage?: boolean;
|
|
8
|
+
displayPagination?: boolean;
|
|
9
|
+
selectionStatus: SelectionStatus;
|
|
10
|
+
apiRef: MutableRefObject<GridApiPro>;
|
|
11
|
+
page: number;
|
|
12
|
+
onPageChange: (page: number) => void;
|
|
13
|
+
pageSize: number;
|
|
14
|
+
onPageSizeChange: (pageSize: number) => void;
|
|
15
|
+
rowsPerPageOptions?: number[];
|
|
16
|
+
isRowSelectable?: DataGridProps['isRowSelectable'];
|
|
17
|
+
paginationProps?: DataGridProps['paginationProps'];
|
|
18
|
+
};
|
|
19
|
+
declare const ControlledPagination: React.FC<ControlledPaginationProps>;
|
|
20
|
+
|
|
21
|
+
export { ControlledPagination, ControlledPaginationProps };
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { Flexbox, Text, LinkButton } from '@redsift/design-system';
|
|
4
|
+
import { gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
|
|
5
|
+
import TablePagination from '../../node_modules/@mui/material/TablePagination/TablePagination.js';
|
|
6
|
+
|
|
7
|
+
const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
|
|
8
|
+
return isRowSelectable && typeof isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref => {
|
|
9
|
+
let {
|
|
10
|
+
model
|
|
11
|
+
} = _ref;
|
|
12
|
+
return isRowSelectable === null || isRowSelectable === void 0 ? void 0 : isRowSelectable({
|
|
13
|
+
row: model
|
|
14
|
+
});
|
|
15
|
+
}).map(_ref2 => {
|
|
16
|
+
let {
|
|
17
|
+
id
|
|
18
|
+
} = _ref2;
|
|
19
|
+
return id;
|
|
20
|
+
}) : gridFilteredSortedRowIdsSelector(apiRef);
|
|
21
|
+
};
|
|
22
|
+
const ControlledPagination = _ref3 => {
|
|
23
|
+
let {
|
|
24
|
+
displaySelection = false,
|
|
25
|
+
displayRowsPerPage = false,
|
|
26
|
+
displayPagination = false,
|
|
27
|
+
selectionStatus,
|
|
28
|
+
apiRef,
|
|
29
|
+
page,
|
|
30
|
+
onPageChange,
|
|
31
|
+
pageSize,
|
|
32
|
+
onPageSizeChange,
|
|
33
|
+
rowsPerPageOptions,
|
|
34
|
+
isRowSelectable,
|
|
35
|
+
paginationProps
|
|
36
|
+
} = _ref3;
|
|
37
|
+
const filteredRowsInTable = getSelectableRowsInTable(apiRef);
|
|
38
|
+
const selectableRowsInTable = getSelectableRowsInTable(apiRef, isRowSelectable);
|
|
39
|
+
const numberOfFilteredRowsInTable = filteredRowsInTable.length;
|
|
40
|
+
const numberOfSelectableRowsInTable = selectableRowsInTable.length;
|
|
41
|
+
return /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
42
|
+
flexDirection: "row",
|
|
43
|
+
alignItems: "center",
|
|
44
|
+
justifyContent: "space-between",
|
|
45
|
+
marginBottom: "7px"
|
|
46
|
+
}, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatus.type === 'page' ? /*#__PURE__*/React__default.createElement(Text, {
|
|
47
|
+
fontSize: "14px"
|
|
48
|
+
}, `All ${selectionStatus.numberOfSelectedRows}${numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : ''} rows on this page are selected. `, /*#__PURE__*/React__default.createElement(LinkButton, {
|
|
49
|
+
onClick: () => {
|
|
50
|
+
apiRef.current.selectRows(numberOfSelectableRowsInTable ? selectableRowsInTable : apiRef.current.getAllRowIds());
|
|
51
|
+
}
|
|
52
|
+
}, "Select all ", numberOfSelectableRowsInTable, numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : '', " rows in the table.")) : selectionStatus.type === 'table' ? /*#__PURE__*/React__default.createElement(Text, {
|
|
53
|
+
fontSize: "14px"
|
|
54
|
+
}, `All ${selectionStatus.numberOfSelectedRows}${numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : ''} rows in the table are selected. `, /*#__PURE__*/React__default.createElement(LinkButton, {
|
|
55
|
+
onClick: () => {
|
|
56
|
+
apiRef.current.selectRows([], false, true);
|
|
57
|
+
}
|
|
58
|
+
}, "Clear selection.")) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
|
|
59
|
+
fontSize: "14px"
|
|
60
|
+
}, `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination, _extends({
|
|
61
|
+
component: "div",
|
|
62
|
+
count: numberOfFilteredRowsInTable,
|
|
63
|
+
page: page,
|
|
64
|
+
onPageChange: (event, newPage) => onPageChange(newPage),
|
|
65
|
+
rowsPerPage: pageSize,
|
|
66
|
+
onRowsPerPageChange: event => {
|
|
67
|
+
onPageSizeChange(parseInt(event.target.value, 10));
|
|
68
|
+
},
|
|
69
|
+
rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
|
|
70
|
+
}, paginationProps)) : null);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export { ControlledPagination };
|
|
74
|
+
//# sourceMappingURL=ControlledPagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ControlledPagination.js","sources":["../../../src/components/Pagination/ControlledPagination.tsx"],"sourcesContent":["import React, { MutableRefObject } from 'react';\nimport { Flexbox, LinkButton, Text } from '@redsift/design-system';\nimport {\n gridFilteredSortedRowEntriesSelector,\n gridFilteredSortedRowIdsSelector,\n GridRowParams,\n} from '@mui/x-data-grid-pro';\n\nimport { DataGridProps, SelectionStatus } from '../DataGrid/types';\nimport { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';\nimport TablePagination from '@mui/material/TablePagination';\n\nconst getSelectableRowsInTable = (\n apiRef: React.MutableRefObject<GridApiPro>,\n isRowSelectable?: DataGridProps['isRowSelectable']\n) => {\n return isRowSelectable && typeof isRowSelectable === 'function'\n ? gridFilteredSortedRowEntriesSelector(apiRef)\n .filter(({ model }) => isRowSelectable?.({ row: model } as GridRowParams))\n .map(({ id }) => id)\n : gridFilteredSortedRowIdsSelector(apiRef);\n};\n\nexport type ControlledPaginationProps = {\n displaySelection?: boolean;\n displayRowsPerPage?: boolean;\n displayPagination?: boolean;\n selectionStatus: SelectionStatus;\n apiRef: MutableRefObject<GridApiPro>;\n page: number;\n onPageChange: (page: number) => void;\n pageSize: number;\n onPageSizeChange: (pageSize: number) => void;\n rowsPerPageOptions?: number[];\n isRowSelectable?: DataGridProps['isRowSelectable'];\n paginationProps?: DataGridProps['paginationProps'];\n};\n\nexport const ControlledPagination: React.FC<ControlledPaginationProps> = ({\n displaySelection = false,\n displayRowsPerPage = false,\n displayPagination = false,\n selectionStatus,\n apiRef,\n page,\n onPageChange,\n pageSize,\n onPageSizeChange,\n rowsPerPageOptions,\n isRowSelectable,\n paginationProps,\n}) => {\n const filteredRowsInTable = getSelectableRowsInTable(apiRef);\n const selectableRowsInTable = getSelectableRowsInTable(apiRef, isRowSelectable);\n const numberOfFilteredRowsInTable = filteredRowsInTable.length;\n const numberOfSelectableRowsInTable = selectableRowsInTable.length;\n\n return (\n <Flexbox flexDirection=\"row\" alignItems=\"center\" justifyContent=\"space-between\" marginBottom=\"7px\">\n {displaySelection ? (\n <>\n {selectionStatus.type === 'page' ? (\n <Text fontSize=\"14px\">\n {`All ${selectionStatus.numberOfSelectedRows}${\n numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : ''\n } rows on this page are selected. `}\n <LinkButton\n onClick={() => {\n apiRef.current.selectRows(\n numberOfSelectableRowsInTable ? selectableRowsInTable : apiRef.current.getAllRowIds()\n );\n }}\n >\n Select all {numberOfSelectableRowsInTable}\n {numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : ''} rows in the table.\n </LinkButton>\n </Text>\n ) : selectionStatus.type === 'table' ? (\n <Text fontSize=\"14px\">\n {`All ${selectionStatus.numberOfSelectedRows}${\n numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : ''\n } rows in the table are selected. `}\n <LinkButton\n onClick={() => {\n apiRef.current.selectRows([], false, true);\n }}\n >\n Clear selection.\n </LinkButton>\n </Text>\n ) : selectionStatus.type === 'other' ? (\n <Text fontSize=\"14px\">{`${selectionStatus.numberOfSelectedRows} row${\n selectionStatus.numberOfSelectedRows > 1 ? 's' : ''\n } selected`}</Text>\n ) : (\n <Text />\n )}\n </>\n ) : null}\n {displayPagination ? (\n <TablePagination\n component=\"div\"\n count={numberOfFilteredRowsInTable}\n page={page}\n onPageChange={(event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => onPageChange(newPage)}\n rowsPerPage={pageSize}\n onRowsPerPageChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n onPageSizeChange(parseInt(event.target.value, 10));\n }}\n rowsPerPageOptions={displayRowsPerPage ? rowsPerPageOptions : []}\n {...paginationProps}\n />\n ) : null}\n </Flexbox>\n );\n};\n"],"names":["getSelectableRowsInTable","apiRef","isRowSelectable","gridFilteredSortedRowEntriesSelector","filter","_ref","model","row","map","_ref2","id","gridFilteredSortedRowIdsSelector","ControlledPagination","_ref3","displaySelection","displayRowsPerPage","displayPagination","selectionStatus","page","onPageChange","pageSize","onPageSizeChange","rowsPerPageOptions","paginationProps","filteredRowsInTable","selectableRowsInTable","numberOfFilteredRowsInTable","length","numberOfSelectableRowsInTable","React","createElement","Flexbox","flexDirection","alignItems","justifyContent","marginBottom","Fragment","type","Text","fontSize","numberOfSelectedRows","LinkButton","onClick","current","selectRows","getAllRowIds","TablePagination","_extends","component","count","event","newPage","rowsPerPage","onRowsPerPageChange","parseInt","target","value"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SelectionStatus, DataGridProps } from '../DataGrid/types.js';
|
|
3
|
+
import { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';
|
|
4
|
+
import { GridSelectionModel, GridRowParams } from '@mui/x-data-grid-pro';
|
|
5
|
+
|
|
6
|
+
type ServerSideControlledPaginationProps = {
|
|
7
|
+
displaySelection?: boolean;
|
|
8
|
+
displayRowsPerPage?: boolean;
|
|
9
|
+
displayPagination?: boolean;
|
|
10
|
+
selectionStatus: SelectionStatus;
|
|
11
|
+
page: number;
|
|
12
|
+
onPageChange: (page: number) => void;
|
|
13
|
+
pageSize: number;
|
|
14
|
+
onPageSizeChange: (pageSize: number) => void;
|
|
15
|
+
rowsPerPageOptions?: number[];
|
|
16
|
+
paginationProps?: DataGridProps['paginationProps'];
|
|
17
|
+
rowCount: number;
|
|
18
|
+
loading?: boolean;
|
|
19
|
+
};
|
|
20
|
+
declare const onServerSideSelectionStatusChange: (newSelectionModel: GridSelectionModel, apiRef: React.MutableRefObject<GridApiPro>, selectionStatus: React.MutableRefObject<SelectionStatus>, isRowSelectable: ((params: GridRowParams<any>) => boolean) | undefined, page: number, pageSize: number) => void;
|
|
21
|
+
declare const ServerSideControlledPagination: React.FC<ServerSideControlledPaginationProps>;
|
|
22
|
+
|
|
23
|
+
export { ServerSideControlledPagination, ServerSideControlledPaginationProps, onServerSideSelectionStatusChange };
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { Flexbox, Text } from '@redsift/design-system';
|
|
4
|
+
import { gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector } from '@mui/x-data-grid-pro';
|
|
5
|
+
import TablePagination from '../../node_modules/@mui/material/TablePagination/TablePagination.js';
|
|
6
|
+
|
|
7
|
+
const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionStatus, isRowSelectable, page, pageSize) => {
|
|
8
|
+
const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
|
|
9
|
+
let {
|
|
10
|
+
model
|
|
11
|
+
} = _ref;
|
|
12
|
+
return isRowSelectable({
|
|
13
|
+
row: model
|
|
14
|
+
});
|
|
15
|
+
}).map(_ref2 => {
|
|
16
|
+
let {
|
|
17
|
+
id
|
|
18
|
+
} = _ref2;
|
|
19
|
+
return id;
|
|
20
|
+
}) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
|
|
21
|
+
const numberOfSelectableRowsInPage = selectableRowsInPage.length;
|
|
22
|
+
const numberOfSelectedRows = newSelectionModel.length;
|
|
23
|
+
const selectedRowsInPage = selectableRowsInPage.filter(rowId => newSelectionModel.includes(rowId));
|
|
24
|
+
const numberOfSelectedRowsInPage = selectedRowsInPage.length;
|
|
25
|
+
const isSamePage = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.page) == page;
|
|
26
|
+
const isSamePageSize = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.pageSize) == pageSize;
|
|
27
|
+
|
|
28
|
+
// if previous status is `page`,
|
|
29
|
+
// if page and pageSize didn't change
|
|
30
|
+
// and all the rows are selected, deselect all row
|
|
31
|
+
if (selectionStatus.current.type === 'page' && isSamePage && isSamePageSize && numberOfSelectedRowsInPage === numberOfSelectableRowsInPage) {
|
|
32
|
+
setTimeout(() => {
|
|
33
|
+
apiRef.current.selectRows(selectedRowsInPage, false, false);
|
|
34
|
+
}, 0);
|
|
35
|
+
}
|
|
36
|
+
if (numberOfSelectedRowsInPage === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage != 0) {
|
|
37
|
+
selectionStatus.current = {
|
|
38
|
+
type: 'page',
|
|
39
|
+
numberOfSelectedRows,
|
|
40
|
+
numberOfSelectedRowsInPage,
|
|
41
|
+
page,
|
|
42
|
+
pageSize
|
|
43
|
+
};
|
|
44
|
+
} else if (numberOfSelectedRows > 0) {
|
|
45
|
+
selectionStatus.current = {
|
|
46
|
+
type: 'other',
|
|
47
|
+
numberOfSelectedRows,
|
|
48
|
+
numberOfSelectedRowsInPage,
|
|
49
|
+
page,
|
|
50
|
+
pageSize
|
|
51
|
+
};
|
|
52
|
+
} else {
|
|
53
|
+
selectionStatus.current = {
|
|
54
|
+
type: 'none',
|
|
55
|
+
numberOfSelectedRows,
|
|
56
|
+
numberOfSelectedRowsInPage,
|
|
57
|
+
page,
|
|
58
|
+
pageSize
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
const ServerSideControlledPagination = _ref3 => {
|
|
63
|
+
let {
|
|
64
|
+
selectionStatus,
|
|
65
|
+
displaySelection,
|
|
66
|
+
displayPagination,
|
|
67
|
+
page,
|
|
68
|
+
onPageChange,
|
|
69
|
+
pageSize,
|
|
70
|
+
onPageSizeChange,
|
|
71
|
+
displayRowsPerPage,
|
|
72
|
+
rowsPerPageOptions,
|
|
73
|
+
paginationProps,
|
|
74
|
+
rowCount
|
|
75
|
+
} = _ref3;
|
|
76
|
+
const totalNumberOfRowsInTable = rowCount;
|
|
77
|
+
const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
|
|
78
|
+
const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
|
|
79
|
+
return /*#__PURE__*/React__default.createElement(Flexbox, {
|
|
80
|
+
flexDirection: "row",
|
|
81
|
+
alignItems: "center",
|
|
82
|
+
justifyContent: "space-between",
|
|
83
|
+
marginBottom: "7px"
|
|
84
|
+
}, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
|
|
85
|
+
fontSize: "14px"
|
|
86
|
+
}, pageRowsLabel) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
|
|
87
|
+
fontSize: "14px"
|
|
88
|
+
}, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination, _extends({
|
|
89
|
+
component: "div",
|
|
90
|
+
count: totalNumberOfRowsInTable,
|
|
91
|
+
page: page,
|
|
92
|
+
onPageChange: (event, newPage) => onPageChange(newPage),
|
|
93
|
+
rowsPerPage: pageSize,
|
|
94
|
+
onRowsPerPageChange: event => {
|
|
95
|
+
onPageSizeChange(parseInt(event.target.value, 10));
|
|
96
|
+
},
|
|
97
|
+
rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
|
|
98
|
+
}, paginationProps)) : null);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
export { ServerSideControlledPagination, onServerSideSelectionStatusChange };
|
|
102
|
+
//# sourceMappingURL=ServerSideControlledPagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ServerSideControlledPagination.js","sources":["../../../src/components/Pagination/ServerSideControlledPagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Flexbox, Text } from '@redsift/design-system';\n\nimport { DataGridProps, GridSelectionModel, SelectionStatus } from '../DataGrid/types';\nimport TablePagination from '@mui/material/TablePagination';\nimport { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';\nimport {\n gridPaginatedVisibleSortedGridRowEntriesSelector,\n gridPaginatedVisibleSortedGridRowIdsSelector,\n GridRowParams,\n} from '@mui/x-data-grid-pro';\n\nexport type ServerSideControlledPaginationProps = {\n displaySelection?: boolean;\n displayRowsPerPage?: boolean;\n displayPagination?: boolean;\n selectionStatus: SelectionStatus;\n page: number;\n onPageChange: (page: number) => void;\n pageSize: number;\n onPageSizeChange: (pageSize: number) => void;\n rowsPerPageOptions?: number[];\n paginationProps?: DataGridProps['paginationProps'];\n rowCount: number;\n loading?: boolean;\n};\n\nexport const onServerSideSelectionStatusChange = (\n newSelectionModel: GridSelectionModel,\n apiRef: React.MutableRefObject<GridApiPro>,\n selectionStatus: React.MutableRefObject<SelectionStatus>,\n isRowSelectable: ((params: GridRowParams<any>) => boolean) | undefined,\n page: number,\n pageSize: number\n) => {\n const selectableRowsInPage = isRowSelectable\n ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef)\n .filter(({ model }) => isRowSelectable({ row: model } as GridRowParams))\n .map(({ id }) => id)\n : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);\n const numberOfSelectableRowsInPage = selectableRowsInPage.length;\n\n const numberOfSelectedRows = newSelectionModel.length;\n\n const selectedRowsInPage = selectableRowsInPage.filter((rowId) => newSelectionModel.includes(rowId));\n const numberOfSelectedRowsInPage = selectedRowsInPage.length;\n\n const isSamePage = selectionStatus?.current.page == page;\n const isSamePageSize = selectionStatus?.current.pageSize == pageSize;\n\n // if previous status is `page`,\n // if page and pageSize didn't change\n // and all the rows are selected, deselect all row\n if (\n selectionStatus.current.type === 'page' &&\n isSamePage &&\n isSamePageSize &&\n numberOfSelectedRowsInPage === numberOfSelectableRowsInPage\n ) {\n setTimeout(() => {\n apiRef.current.selectRows(selectedRowsInPage, false, false);\n }, 0);\n }\n\n if (numberOfSelectedRowsInPage === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage != 0) {\n selectionStatus.current = {\n type: 'page',\n numberOfSelectedRows,\n numberOfSelectedRowsInPage,\n page,\n pageSize,\n };\n } else if (numberOfSelectedRows > 0) {\n selectionStatus.current = {\n type: 'other',\n numberOfSelectedRows,\n numberOfSelectedRowsInPage,\n page,\n pageSize,\n };\n } else {\n selectionStatus.current = {\n type: 'none',\n numberOfSelectedRows,\n numberOfSelectedRowsInPage,\n page,\n pageSize,\n };\n }\n};\n\nexport const ServerSideControlledPagination: React.FC<ServerSideControlledPaginationProps> = ({\n selectionStatus,\n displaySelection,\n displayPagination,\n page,\n onPageChange,\n pageSize,\n onPageSizeChange,\n displayRowsPerPage,\n rowsPerPageOptions,\n paginationProps,\n rowCount,\n}) => {\n const totalNumberOfRowsInTable = rowCount;\n\n const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${\n selectionStatus.numberOfSelectedRows > 1 ? 's' : ''\n } selected`;\n\n const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${\n selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage\n ? ` (${selectionStatus.numberOfSelectedRows} row${\n selectionStatus.numberOfSelectedRows > 1 ? 's' : ''\n } selected in total)`\n : ''\n }.`;\n\n return (\n <Flexbox flexDirection=\"row\" alignItems=\"center\" justifyContent=\"space-between\" marginBottom=\"7px\">\n {displaySelection ? (\n <>\n {selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? (\n <Text fontSize=\"14px\">{pageRowsLabel}</Text>\n ) : selectionStatus.type === 'other' ? (\n <Text fontSize=\"14px\">{totalRowsLabel}</Text>\n ) : (\n <Text />\n )}\n </>\n ) : null}\n {displayPagination ? (\n <TablePagination\n component=\"div\"\n count={totalNumberOfRowsInTable}\n page={page}\n onPageChange={(event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => onPageChange(newPage)}\n rowsPerPage={pageSize}\n onRowsPerPageChange={(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n onPageSizeChange(parseInt(event.target.value, 10));\n }}\n rowsPerPageOptions={displayRowsPerPage ? rowsPerPageOptions : []}\n {...paginationProps}\n />\n ) : null}\n </Flexbox>\n );\n};\n"],"names":["onServerSideSelectionStatusChange","newSelectionModel","apiRef","selectionStatus","isRowSelectable","page","pageSize","selectableRowsInPage","gridPaginatedVisibleSortedGridRowEntriesSelector","filter","_ref","model","row","map","_ref2","id","gridPaginatedVisibleSortedGridRowIdsSelector","numberOfSelectableRowsInPage","length","numberOfSelectedRows","selectedRowsInPage","rowId","includes","numberOfSelectedRowsInPage","isSamePage","current","isSamePageSize","type","setTimeout","selectRows","ServerSideControlledPagination","_ref3","displaySelection","displayPagination","onPageChange","onPageSizeChange","displayRowsPerPage","rowsPerPageOptions","paginationProps","rowCount","totalNumberOfRowsInTable","totalRowsLabel","pageRowsLabel","React","createElement","Flexbox","flexDirection","alignItems","justifyContent","marginBottom","Fragment","Text","fontSize","TablePagination","_extends","component","count","event","newPage","rowsPerPage","onRowsPerPageChange","parseInt","target","value"],"mappings":"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"}
|