@evoke-platform/ui-components 1.1.0-testing.8 → 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/custom/CriteriaBuilder/CriteriaBuilder.js +4 -7
- package/dist/published/components/custom/CriteriaBuilder/PropertyTree.js +4 -10
- 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
@@ -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
|
};
|
@@ -212,7 +212,7 @@ 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
218
|
} })), sx: { width: width, background: readOnly ? '#f4f6f8' : '#fff' }, disableClearable: true, readOnly: readOnly }))));
|
@@ -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;
|
@@ -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
|
+
};
|