@evoke-platform/ui-components 1.1.0-testing.7 → 1.1.0-testing.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/published/components/core/DateTimePicker/DateTimePicker.js +7 -1
  2. package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js +2 -2
  3. package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js +20 -14
  4. package/package.json +1 -1
package/dist/published/components/core/DateTimePicker/DateTimePicker.js CHANGED
@@ -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 }), ...rest })));
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;
package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js CHANGED
@@ -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) => {
@@ -215,7 +215,7 @@ const customSelector = (props) => {
215
215
  }, renderInput: (params) => (React.createElement(TextField, { ...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;
package/dist/published/components/custom/CriteriaBuilder/ValueEditor.js CHANGED
@@ -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 { DateTimePicker, TimePicker } from '@mui/x-date-pickers';
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: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
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: { width: '33%', background: '#fff' } })), readOnly: readOnly })));
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: { width: '33%', background: '#fff' }, ref: setAnchorEl },
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", sx: { backgroundColor: '#fff' } })), groupBy: (option) => isPresetValue(option.value?.name) ? context.presetGroupLabel || 'Preset Values' : 'Options', renderGroup: groupRenderGroup, sx: { width: '33%', background: '#fff' }, readOnly: readOnly }));
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: { width: '33%', background: '#fff' }, readOnly: readOnly }));
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", sx: { backgroundColor: '#fff' } })),
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: { width: '33%' }, readOnly: readOnly }));
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: { width: '33%', background: '#fff' }, readOnly: readOnly }));
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
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evoke-platform/ui-components",
3
- "version": "1.1.0-testing.7",
3
+ "version": "1.1.0-testing.8",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",