@evoke-platform/ui-components 1.1.0-testing.7 → 1.1.0-testing.9
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/dist/published/components/core/DateTimePicker/DateTimePicker.js +7 -1
- package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js +6 -9
- package/dist/published/components/custom/CriteriaBuilder/PropertyTree.js +4 -10
- package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js +20 -14
- package/dist/published/components/custom/OverflowTextField/OverflowTextField.d.ts +4 -0
- package/dist/published/components/custom/OverflowTextField/OverflowTextField.js +13 -0
- package/dist/published/components/custom/OverflowTextField/index.d.ts +2 -0
- package/dist/published/components/custom/OverflowTextField/index.js +2 -0
- package/dist/published/stories/OverflowTextField.stories.d.ts +5 -0
- package/dist/published/stories/OverflowTextField.stories.js +28 -0
- package/package.json +1 -1
@@ -24,6 +24,12 @@ const DateTimePicker = (props) => {
|
|
24
24
|
handleChange(newValue, keyboardInputValue);
|
25
25
|
};
|
26
26
|
return (React.createElement(UIThemeProvider, null,
|
27
|
-
React.createElement(MUIDateTimePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }),
|
27
|
+
React.createElement(MUIDateTimePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), PaperProps: {
|
28
|
+
sx: {
|
29
|
+
'&.MuiPickersPopper-paper': {
|
30
|
+
borderRadius: '12px',
|
31
|
+
},
|
32
|
+
},
|
33
|
+
}, ...rest })));
|
28
34
|
};
|
29
35
|
export default DateTimePicker;
|
@@ -7,8 +7,9 @@ import { QueryBuilder, RuleGroupBodyComponents, RuleGroupHeaderComponents, TestI
|
|
7
7
|
import 'react-querybuilder/dist/query-builder.css';
|
8
8
|
import escape from 'string-escape-regex';
|
9
9
|
import { TrashCan } from '../../../icons/custom';
|
10
|
-
import { Autocomplete, Button, IconButton
|
10
|
+
import { Autocomplete, Button, IconButton } from '../../core';
|
11
11
|
import { Box } from '../../layout';
|
12
|
+
import { OverflowTextField } from '../OverflowTextField';
|
12
13
|
import { difference } from '../util';
|
13
14
|
import PropertyTree from './PropertyTree';
|
14
15
|
import { parseMongoDB, traversePropertyPath } from './utils';
|
@@ -32,7 +33,6 @@ const styles = {
|
|
32
33
|
buttons: {
|
33
34
|
padding: '6px 16px',
|
34
35
|
fontSize: '0.875rem',
|
35
|
-
marginRight: '0px',
|
36
36
|
boxShadow: 'none',
|
37
37
|
},
|
38
38
|
};
|
@@ -198,7 +198,7 @@ const customSelector = (props) => {
|
|
198
198
|
};
|
199
199
|
return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
|
200
200
|
if (typeof option === 'string') {
|
201
|
-
return opts.find((o) => option === o.name)?.label ||
|
201
|
+
return opts.find((o) => option === o.name)?.label || option;
|
202
202
|
}
|
203
203
|
return option.label;
|
204
204
|
}, isOptionEqualToValue: (option, value) => {
|
@@ -212,10 +212,10 @@ const customSelector = (props) => {
|
|
212
212
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
213
213
|
onChange: (event, newValue) => {
|
214
214
|
handleOnChange(newValue?.value.name);
|
215
|
-
}, renderInput: (params) => (React.createElement(
|
215
|
+
}, renderInput: (params) => (React.createElement(OverflowTextField, { value: opts.find((o) => value === o.name)?.label || '', ...params, placeholder: placeholder, size: "small", inputProps: {
|
216
216
|
...params.inputProps,
|
217
217
|
'aria-label': placeholder,
|
218
|
-
} })), sx: { width: width, background: '#fff' }, disableClearable: true, readOnly: readOnly }))));
|
218
|
+
} })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
|
219
219
|
};
|
220
220
|
const customCombinator = (props) => {
|
221
221
|
const { value, handleOnChange, context, level, path } = props;
|
@@ -439,7 +439,6 @@ const CriteriaBuilder = (props) => {
|
|
439
439
|
borderStyle: 'hidden',
|
440
440
|
background: '#fff',
|
441
441
|
maxWidth: '70vw',
|
442
|
-
margin: 'auto',
|
443
442
|
},
|
444
443
|
'.ruleGroup-header': {
|
445
444
|
display: 'block',
|
@@ -527,8 +526,6 @@ const CriteriaBuilder = (props) => {
|
|
527
526
|
alignItems: 'center',
|
528
527
|
marginBottom: '10px',
|
529
528
|
maxWidth: '71vw',
|
530
|
-
marginLeft: 'auto',
|
531
|
-
marginRight: 'auto',
|
532
529
|
} },
|
533
530
|
React.createElement(Box, null,
|
534
531
|
React.createElement(Button, { sx: {
|
@@ -558,7 +555,7 @@ const CriteriaBuilder = (props) => {
|
|
558
555
|
backgroundColor: 'transparent',
|
559
556
|
},
|
560
557
|
...styles.buttons,
|
561
|
-
}, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear
|
558
|
+
}, onClick: handleClearAll, title: "Clear all conditions", disabled: isEmpty(query.rules) }, "Clear all"))));
|
562
559
|
}
|
563
560
|
return React.createElement(React.Fragment, null);
|
564
561
|
};
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { ChevronRight, ExpandMore } from '@mui/icons-material';
|
2
2
|
import React, { useEffect, useState } from 'react';
|
3
|
-
import { Autocomplete, MenuItem,
|
3
|
+
import { Autocomplete, MenuItem, TreeView } from '../../core';
|
4
|
+
import { OverflowTextField } from '../OverflowTextField';
|
4
5
|
import PropertyTreeItem from './PropertyTreeItem';
|
5
6
|
import { fetchDisplayNamePath, findPropertyById, setIdPaths, truncateNamePath, updateTreeNode } from './utils';
|
6
7
|
const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value }) => {
|
@@ -126,15 +127,8 @@ const PropertyTree = ({ fetchObject, handleTreePropertySelect, rootObject, value
|
|
126
127
|
: objectPropertyNamePathMap[option.value] ?? '';
|
127
128
|
return truncateNamePath(namePath, NAME_PATH_LIMIT);
|
128
129
|
}, renderInput: (params) => {
|
129
|
-
|
130
|
-
|
131
|
-
let displayValue = fullDisplayValue;
|
132
|
-
if (!!displayValue && displayValue.length > NAME_PATH_LIMIT) {
|
133
|
-
isTruncated = true;
|
134
|
-
displayValue = truncateNamePath(displayValue, NAME_PATH_LIMIT);
|
135
|
-
}
|
136
|
-
return (React.createElement(Tooltip, { title: isTruncated ? fullDisplayValue : '', arrow: true },
|
137
|
-
React.createElement(TextField, { ...params, "aria-label": fullDisplayValue, value: displayValue, size: "small", placeholder: "Select a property", variant: "outlined" })));
|
130
|
+
const fullDisplayName = value && objectPropertyNamePathMap[value];
|
131
|
+
return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, size: "small", placeholder: "Select a property", variant: "outlined" }));
|
138
132
|
}, isOptionEqualToValue: (option, val) => {
|
139
133
|
if (typeof val === 'string') {
|
140
134
|
return option.value === val;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { Instant, LocalDate, LocalDateTime, LocalTime, ZoneId } from '@js-joda/core';
|
2
2
|
import { ClearRounded } from '@mui/icons-material';
|
3
3
|
import { Box, darken, lighten, styled } from '@mui/material';
|
4
|
-
import {
|
4
|
+
import { TimePicker } from '@mui/x-date-pickers';
|
5
5
|
import React, { useEffect, useRef, useState } from 'react';
|
6
|
-
import { Autocomplete, Chip, DatePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
|
6
|
+
import { Autocomplete, Chip, DatePicker, DateTimePicker, LocalizationProvider, Menu, MenuItem, TextField, Typography, } from '../../core';
|
7
7
|
import { NumericFormat } from '../FormField/InputFieldComponent';
|
8
8
|
const GroupHeader = styled('div')(({ theme }) => ({
|
9
9
|
position: 'sticky',
|
@@ -43,6 +43,16 @@ const ValueEditor = (props) => {
|
|
43
43
|
const isPresetValueSelected = presetValues && typeof value === 'string' && isPresetValue(value);
|
44
44
|
const presetDisplayValue = presetValues?.find((option) => option.value.name === value)?.label ?? '';
|
45
45
|
let readOnly = false;
|
46
|
+
if (context.disabledCriteria) {
|
47
|
+
readOnly =
|
48
|
+
Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
|
49
|
+
}
|
50
|
+
const styles = {
|
51
|
+
input: {
|
52
|
+
width: '33%',
|
53
|
+
background: readOnly ? '#f4f6f8' : '#fff',
|
54
|
+
},
|
55
|
+
};
|
46
56
|
useEffect(() => {
|
47
57
|
if (!['in', 'notIn'].includes(operator) && Array.isArray(value)) {
|
48
58
|
handleOnChange('');
|
@@ -51,10 +61,6 @@ const ValueEditor = (props) => {
|
|
51
61
|
handleOnChange([]);
|
52
62
|
}
|
53
63
|
}, [operator]);
|
54
|
-
if (context.disabledCriteria) {
|
55
|
-
readOnly =
|
56
|
-
Object.entries(context.disabledCriteria.criteria).some(([key, value]) => key === rule.field && value === rule.value && rule.operator === '=') && level === context.disabledCriteria.level;
|
57
|
-
}
|
58
64
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
59
65
|
const onClick = (e) => {
|
60
66
|
// if property is date and date picker is open, don't open preset values
|
@@ -93,11 +99,11 @@ const ValueEditor = (props) => {
|
|
93
99
|
if (inputType === 'date') {
|
94
100
|
// date editor
|
95
101
|
return (React.createElement(LocalizationProvider, null,
|
96
|
-
React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx:
|
102
|
+
React.createElement(DatePicker, { inputRef: inputRef, disabled: disabled, value: disabled ? null : value, onChange: handleOnChange, onClose: onClose, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: styles.input })), readOnly: readOnly })));
|
97
103
|
}
|
98
104
|
else if (inputType === 'time') {
|
99
105
|
return (React.createElement(LocalizationProvider, null,
|
100
|
-
React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx:
|
106
|
+
React.createElement(TimePicker, { inputRef: inputRef, disabled: disabled, value: disabled || !value ? null : value, onChange: handleOnChange, renderInput: (params) => (React.createElement(TextField, { ...params, onClick: onClick, placeholder: "Value", size: "small", sx: styles.input })), readOnly: readOnly })));
|
101
107
|
}
|
102
108
|
else if (inputType === 'date-time') {
|
103
109
|
const dateTimeValue = parseISOStringToLocalDateTime(value);
|
@@ -118,7 +124,7 @@ const ValueEditor = (props) => {
|
|
118
124
|
handleOnChange(new Date(localDateTime.toString()).toISOString());
|
119
125
|
}, onClose: onClose, PopperProps: {
|
120
126
|
anchorEl,
|
121
|
-
}, renderInput: (params) => (React.createElement(Box, { sx:
|
127
|
+
}, renderInput: (params) => (React.createElement(Box, { sx: styles.input, ref: setAnchorEl },
|
122
128
|
React.createElement(TextField, { ...params, disabled: disabled, onClick: onClick, placeholder: "Value", size: "small", inputRef: inputRef }))), readOnly: readOnly })));
|
123
129
|
}
|
124
130
|
else if (inputType === 'number' || inputType === 'integer') {
|
@@ -133,7 +139,7 @@ const ValueEditor = (props) => {
|
|
133
139
|
handleOnChange(uniqueSelections.length ? uniqueSelections : '');
|
134
140
|
},
|
135
141
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
136
|
-
isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small"
|
142
|
+
isOptionEqualToValue: (option, value) => option === value, renderInput: (params) => (React.createElement(TextField, { label: params.label, ...params, size: "small" })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: styles.input, readOnly: readOnly }));
|
137
143
|
}
|
138
144
|
else {
|
139
145
|
return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => {
|
@@ -145,7 +151,7 @@ const ValueEditor = (props) => {
|
|
145
151
|
}
|
146
152
|
}, ...(inputType === 'number'
|
147
153
|
? { InputProps: { inputComponent: NumericFormat } }
|
148
|
-
: { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx:
|
154
|
+
: { type: 'number' }), placeholder: "Value", size: "small", onClick: onClick, sx: styles.input, readOnly: readOnly }));
|
149
155
|
}
|
150
156
|
}
|
151
157
|
else {
|
@@ -187,7 +193,7 @@ const ValueEditor = (props) => {
|
|
187
193
|
}
|
188
194
|
}, onInputChange: (event, newInputValue) => {
|
189
195
|
setInputValue(newInputValue);
|
190
|
-
}, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small"
|
196
|
+
}, inputValue: inputValue, renderInput: (params) => (React.createElement(TextField, { inputRef: inputRef, label: params?.label, ...params, size: "small" })),
|
191
197
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
192
198
|
getOptionLabel: (option) => {
|
193
199
|
if (typeof option === 'string') {
|
@@ -204,10 +210,10 @@ const ValueEditor = (props) => {
|
|
204
210
|
else {
|
205
211
|
return option?.label === value?.label;
|
206
212
|
}
|
207
|
-
}, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx:
|
213
|
+
}, groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sortBy: "NONE", sx: styles.input, readOnly: readOnly }));
|
208
214
|
}
|
209
215
|
else {
|
210
|
-
return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx:
|
216
|
+
return (React.createElement(TextField, { inputRef: inputRef, value: ['null', 'notNull'].includes(operator) ? '' : value, disabled: ['null', 'notNull'].includes(operator), onChange: (e) => handleOnChange(e.target.value), onClick: onClick, placeholder: "Value", size: "small", sx: styles.input, readOnly: readOnly }));
|
211
217
|
}
|
212
218
|
}
|
213
219
|
};
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { TextField, Tooltip } from '@mui/material';
|
2
|
+
import React, { useRef, useState } from 'react';
|
3
|
+
const OverflowTextField = (props) => {
|
4
|
+
const { value, ...rest } = props;
|
5
|
+
const inputRef = useRef(null);
|
6
|
+
const [isOpen, setIsOpen] = useState(false);
|
7
|
+
const textField = (React.createElement(TextField, { ...rest, value: value, InputProps: {
|
8
|
+
...rest.InputProps,
|
9
|
+
inputRef: inputRef,
|
10
|
+
} }));
|
11
|
+
return (React.createElement(Tooltip, { open: isOpen, onOpen: () => inputRef.current && inputRef.current.scrollWidth > inputRef.current.clientWidth && setIsOpen(true), onClose: () => setIsOpen(false), title: value }, textField));
|
12
|
+
};
|
13
|
+
export default OverflowTextField;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
2
|
+
import React from 'react';
|
3
|
+
declare const _default: ComponentMeta<React.FC<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps>>;
|
4
|
+
export default _default;
|
5
|
+
export declare const OverflowTextField: ComponentStory<React.FC<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps>>;
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { OverflowTextField as CustomOverflowTextField } from '../components/custom/OverflowTextField';
|
3
|
+
export default {
|
4
|
+
title: 'Input/OverflowTextField',
|
5
|
+
component: CustomOverflowTextField,
|
6
|
+
argTypes: {
|
7
|
+
value: {
|
8
|
+
control: 'text',
|
9
|
+
defaultValue: 'This is a sample text that is too long to be fully visible within the input field, triggering an ellipsis.',
|
10
|
+
description: 'The text to display in the field',
|
11
|
+
},
|
12
|
+
placeholder: {
|
13
|
+
control: 'text',
|
14
|
+
defaultValue: 'Enter text...',
|
15
|
+
},
|
16
|
+
size: {
|
17
|
+
control: 'text',
|
18
|
+
defaultValue: 'small',
|
19
|
+
},
|
20
|
+
},
|
21
|
+
};
|
22
|
+
const Template = (args) => React.createElement(CustomOverflowTextField, { ...args });
|
23
|
+
export const OverflowTextField = Template.bind({});
|
24
|
+
OverflowTextField.args = {
|
25
|
+
value: 'This is a sample text that is too long to be fully visible within the input field, triggering an ellipsis.',
|
26
|
+
placeholder: 'Enter text here...',
|
27
|
+
size: 'small',
|
28
|
+
};
|