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

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.
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { ObjectProperty } from '../../../../types';
2
3
  type FormComponentWrapperProps = {
3
4
  inputId: string;
4
5
  label: string;
@@ -17,6 +18,10 @@ type FormComponentWrapperProps = {
17
18
  viewOnly: boolean;
18
19
  children: React.ReactNode;
19
20
  key: string;
21
+ displayOption?: 'radioButton' | 'dropdown' | 'dialogBox';
22
+ onChange?: (key: string, value: unknown) => void;
23
+ property?: ObjectProperty;
24
+ readOnly?: boolean;
20
25
  };
21
26
  /**
22
27
  * A component that wraps a FormField and adds a label,
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useRef, useState } from 'react';
2
- import { ErrorRounded, Help } from '../../../../icons';
2
+ import { ErrorRounded, Help, HighlightOffOutlined } from '../../../../icons';
3
3
  import { IconButton, Tooltip, Typography } from '../../../core';
4
4
  import { Box } from '../../../layout';
5
5
  const underFieldStyles = {
@@ -13,6 +13,11 @@ const descriptionStyles = {
13
13
  whiteSpace: 'normal',
14
14
  paddingBottom: '4px',
15
15
  };
16
+ const clearBtnStyles = {
17
+ color: '#637381',
18
+ fontSize: '1.2rem',
19
+ marginBottom: '2px',
20
+ };
16
21
  const PrefixSuffix = (props) => {
17
22
  const { prefix, suffix, height } = props;
18
23
  const text = prefix || suffix;
@@ -46,7 +51,7 @@ const PrefixSuffix = (props) => {
46
51
  * description, tooltip, prefix, suffix and word/char counts
47
52
  */
48
53
  export const FormComponentWrapper = (props) => {
49
- const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, } = props;
54
+ const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, displayOption, onChange, property, readOnly, } = props;
50
55
  const [fieldHeight, setFieldHeight] = useState(40);
51
56
  const { maxLength } = validate;
52
57
  const fieldRef = useRef(null);
@@ -62,7 +67,7 @@ export const FormComponentWrapper = (props) => {
62
67
  charCount = maxLength - charCount;
63
68
  return (React.createElement(Box, null,
64
69
  React.createElement(Box, { sx: { padding: '10px 0' } },
65
- React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId },
70
+ React.createElement(Typography, { variant: "body2", color: viewOnly ? 'textSecondary' : 'textPrimary', component: "label", htmlFor: inputId, sx: { ...(displayOption === 'radioButton' && value && { marginRight: '8px' }) } },
66
71
  label,
67
72
  validate.required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px' } },
68
73
  ` *`,
@@ -70,7 +75,13 @@ export const FormComponentWrapper = (props) => {
70
75
  tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
71
76
  React.createElement(IconButton, null,
72
77
  React.createElement(Help, { sx: { fontSize: '14px' } }))))),
73
- React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description),
78
+ displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
79
+ React.createElement("span", null,
80
+ React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
81
+ property && onChange(property.id, '');
82
+ } },
83
+ React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
84
+ React.createElement(Typography, { variant: "caption", sx: { ...descriptionStyles, ...(displayOption === 'radioButton' && { display: 'flex' }) } }, description),
74
85
  React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },
75
86
  React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight }),
76
87
  React.createElement(Box, { sx: { width: '100%', paddingTop: '6px' } }, children),
@@ -10,6 +10,7 @@ type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'> & {
10
10
  addressPropertyId?: string;
11
11
  isAddressLine1?: boolean;
12
12
  initialValue?: string;
13
+ displayOption?: 'radioButton' | 'dropdown';
13
14
  };
14
15
  export declare class FormFieldComponent extends ReactComponent {
15
16
  [x: string]: any;
@@ -448,7 +448,7 @@ export class FormFieldComponent extends ReactComponent {
448
448
  * It'll cause issues with: field-level errors not showing up, conditional visibility not working, focus moving out of the form on keypress
449
449
  * Will need to be revisited later. Possibly look into using this.ref */
450
450
  return ReactDOM.render(React.createElement("div", null,
451
- React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, errorMessage: this.errorMessages(), value: this.dataValue },
451
+ React.createElement(FormComponentWrapper, { ...this.component, inputId: inputId, errorMessage: this.errorMessages(), value: this.dataValue, onChange: this.handleChange },
452
452
  React.createElement(FormField, { onChange: this.handleChange, onBlur: (e) => {
453
453
  // no mask errors when field is empty and not required
454
454
  const componentError = this.root.errors.find((error) => error.component.key === this.component.key);
@@ -195,7 +195,7 @@ export function convertFormToComponents(entries, parameters, object) {
195
195
  displayOptions?.defaultValue &&
196
196
  typeof displayOptions.defaultValue !== 'string'
197
197
  ? displayOptions.defaultValue?.sortBy
198
- : undefined,
198
+ : displayOptions?.choicesDisplay?.sortBy,
199
199
  orderBy: parameter.type === 'object' &&
200
200
  displayOptions?.defaultValue &&
201
201
  typeof displayOptions.defaultValue !== 'string'
@@ -205,7 +205,11 @@ export function convertFormToComponents(entries, parameters, object) {
205
205
  inputMaskPlacholderChar: displayOptions?.placeholderChar,
206
206
  placeholder: displayOptions?.placeholder,
207
207
  tableView: false,
208
- displayOption: parameter.type === 'object' ? displayOptions?.relatedObjectDisplay : undefined,
208
+ displayOption: parameter.type === 'object'
209
+ ? displayOptions?.relatedObjectDisplay
210
+ : parameter.type === 'string' && parameter.enum
211
+ ? displayOptions?.choicesDisplay?.type
212
+ : undefined,
209
213
  labelPosition: 'top',
210
214
  dataSrc: property.enum?.length ? 'values' : undefined,
211
215
  showCharCount: displayOptions?.charCount,
@@ -367,7 +371,20 @@ export function convertComponentsToForm(components) {
367
371
  ...(component.readOnly ? { readOnly: component.readOnly } : {}),
368
372
  ...(component.mode ? { mode: component.mode } : {}),
369
373
  ...(component.validate?.required ? { required: component.validate?.required } : {}),
370
- ...(component.displayOption ? { relatedObjectDisplay: component.displayOption } : {}),
374
+ ...((component.displayOption || component.sortBy) &&
375
+ component.property?.enum &&
376
+ component.property?.type !== 'array' &&
377
+ component.property?.type !== 'object'
378
+ ? {
379
+ choicesDisplay: {
380
+ ...(component.displayOption ? { type: component.displayOption } : {}),
381
+ ...(component.sortBy ? { sortBy: component.sortBy } : {}),
382
+ },
383
+ }
384
+ : {}),
385
+ ...(component.displayOption && component?.property?.type === 'object'
386
+ ? { relatedObjectDisplay: component.displayOption }
387
+ : {}),
371
388
  ...(component.defaultToCurrentDate ||
372
389
  component.defaultToCurrentTime ||
373
390
  component.initialValue ||
@@ -28,6 +28,8 @@ export type FormFieldProps = {
28
28
  getOptionLabel?: (option: AutocompleteOption) => string;
29
29
  disableCloseOnSelect?: boolean;
30
30
  additionalProps?: Record<string, unknown>;
31
+ displayOption?: 'dropdown' | 'radioButton';
32
+ sortBy?: 'ASC' | 'DESC' | 'NONE';
31
33
  };
32
34
  declare const FormField: (props: FormFieldProps) => JSX.Element;
33
35
  export default FormField;
@@ -8,7 +8,7 @@ import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
8
8
  import Select from './Select/Select';
9
9
  import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
10
10
  const FormField = (props) => {
11
- const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, } = props;
11
+ const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, } = props;
12
12
  let control;
13
13
  const commonProps = {
14
14
  id: id ?? property.id,
@@ -30,6 +30,8 @@ const FormField = (props) => {
30
30
  getOptionLabel,
31
31
  disableCloseOnSelect,
32
32
  additionalProps,
33
+ displayOption,
34
+ sortBy,
33
35
  };
34
36
  if (queryAddresses) {
35
37
  control = (React.createElement(AddressFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses }));
@@ -1,8 +1,8 @@
1
1
  import React, { useEffect, useState } from 'react';
2
- import { Autocomplete, TextField } from '../../../core';
2
+ import { Autocomplete, FormControl, FormControlLabel, Radio, RadioGroup, TextField, } from '../../../core';
3
3
  import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
4
4
  const Select = (props) => {
5
- const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, } = props;
5
+ const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
6
6
  const [value, setValue] = useState(defaultValue);
7
7
  const [inputValue, setInputValue] = useState('');
8
8
  useEffect(() => {
@@ -28,10 +28,34 @@ const Select = (props) => {
28
28
  setInputValue(selectValue);
29
29
  }
30
30
  };
31
- return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], disableClearable: true, inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
31
+ const sortedOptions = (() => {
32
+ if (!selectOptions)
33
+ return [];
34
+ const options = [...selectOptions];
35
+ switch (sortBy) {
36
+ case 'NONE':
37
+ return options;
38
+ case 'DESC':
39
+ return options.sort((a, b) => typeof a === 'string' ? b.localeCompare(a) : b.label.localeCompare(a.label));
40
+ default:
41
+ return options.sort((a, b) => typeof a === 'string' ? a.localeCompare(b) : a.label.localeCompare(b.label));
42
+ }
43
+ })();
44
+ return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : displayOption === 'radioButton' ? (React.createElement(FormControl, { error: error, required: required },
45
+ React.createElement(RadioGroup, { name: `radioGroup-${id}`, value: value, onChange: handleChange, sx: { paddingLeft: '12px' } }, sortedOptions.map((option, index) => (React.createElement(FormControlLabel, { key: index, value: typeof option === 'string' ? option : option.value, control: React.createElement(Radio, { size: "small", sx: {
46
+ ...(size === 'small' && { paddingTop: '2px', paddingBottom: '2px' }),
47
+ ...(error && {
48
+ color: '#FF4842',
49
+ '&.Mui-checked': { color: '#FF4842' },
50
+ }),
51
+ } }), label: typeof option === 'string' ? option : option.label })))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
32
52
  ? (option, value) => isOptionEqualToValue(option, value)
33
53
  : undefined, getOptionLabel: getOptionLabel ? (option) => getOptionLabel(option) : undefined, renderOption: renderOption
34
54
  ? (props, option, state) => renderOption(props, option, state)
35
- : undefined, disableCloseOnSelect: disableCloseOnSelect, ...(additionalProps ?? {}) }));
55
+ : undefined, disableCloseOnSelect: disableCloseOnSelect, sx: {
56
+ '& button.MuiButtonBase-root': {
57
+ visibility: 'visible',
58
+ },
59
+ }, ...(additionalProps ?? {}) }));
36
60
  };
37
61
  export default Select;
@@ -32,6 +32,20 @@ describe('Single select', () => {
32
32
  await screen.findByRole('option', { name: 'option 2' });
33
33
  expect(screen.queryByRole('option', { name: 'something different' })).not.toBeInTheDocument();
34
34
  });
35
+ test.each([
36
+ { sortBy: 'ASC', expectedValues: ['option 1', 'option 2', 'option 3'] },
37
+ { sortBy: 'NONE', expectedValues: ['option 2', 'option 1', 'option 3'] },
38
+ { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
39
+ ])('shows options in $sortBy order as dropdown display', async ({ sortBy, expectedValues }) => {
40
+ const options = ['option 2', 'option 1', 'option 3'];
41
+ render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'dropdown', sortBy: sortBy, onChange: jest.fn() }));
42
+ const user = userEvent.setup();
43
+ const input = screen.getByRole('combobox');
44
+ await user.click(input);
45
+ const allOptions = screen.getAllByRole('option');
46
+ const optionLabels = allOptions.map((option) => option.textContent);
47
+ expect(optionLabels).toEqual(expectedValues);
48
+ });
35
49
  });
36
50
  describe('Multi select', () => {
37
51
  // Right now an object property is required for this to function, but eventually this should go
@@ -57,3 +71,30 @@ describe('Multi select', () => {
57
71
  expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], multiChoiceProperty);
58
72
  });
59
73
  });
74
+ describe('Radio Single select', () => {
75
+ const choiceProperty = {
76
+ id: 'selectOptions',
77
+ name: 'Select Options',
78
+ type: 'choices',
79
+ };
80
+ test('returns selected radio option', async () => {
81
+ const user = userEvent.setup();
82
+ const onChangeMock = jest.fn((name, value, property) => { });
83
+ const options = ['option 1', 'option 2', 'option 3'];
84
+ render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock }));
85
+ const option2 = await screen.findByRole('radio', { name: 'option 2' });
86
+ await user.click(option2);
87
+ expect(onChangeMock).toBeCalledWith('selectOptions', expect.stringContaining('option 2'), choiceProperty);
88
+ });
89
+ test.each([
90
+ { sortBy: 'ASC', expectedValues: ['option 1', 'option 2', 'option 3'] },
91
+ { sortBy: 'NONE', expectedValues: ['option 2', 'option 1', 'option 3'] },
92
+ { sortBy: 'DESC', expectedValues: ['option 3', 'option 2', 'option 1'] },
93
+ ])('shows options in $sortBy order as radio display', async ({ sortBy, expectedValues }) => {
94
+ const options = ['option 2', 'option 1', 'option 3'];
95
+ render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: sortBy, onChange: jest.fn() }));
96
+ const radioButtons = screen.getAllByRole('radio');
97
+ const radioValues = radioButtons.map((radioButton) => radioButton.value);
98
+ expect(radioValues).toEqual(expectedValues);
99
+ });
100
+ });
@@ -85,6 +85,8 @@ ChoicesSelectField.args = {
85
85
  locale: 'string',
86
86
  size: 'small',
87
87
  placeholder: 'string',
88
+ displayOption: 'dropdown',
89
+ sortBy: 'ASC',
88
90
  };
89
91
  export const DatePickerField = FormFieldTemplate.bind({});
90
92
  DatePickerField.args = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evoke-platform/ui-components",
3
- "version": "1.1.0-testing.6",
3
+ "version": "1.1.0-testing.7",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",