@evoke-platform/ui-components 1.0.0-dev.190 → 1.0.0-dev.191

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 (2) hide show
  1. package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js +27 -37
  2. package/package.json +1 -1
package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js CHANGED
@@ -1,14 +1,15 @@
1
1
  import { Popover } from '@mui/material';
2
- import React, { useEffect, useState } from 'react';
2
+ import React, { useEffect, useRef, useState } from 'react';
3
3
  import InputMask from 'react-input-mask';
4
- import { CancelOutlined } from '@mui/icons-material';
5
- import { Button, List, ListItem, MenuItem, TextField, Typography } from '../../../core';
4
+ import { List, MenuItem, TextField, Typography } from '../../../core';
6
5
  import { Box } from '../../../layout';
7
6
  const AddressFieldComponent = (props) => {
7
+ var _a;
8
8
  const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, additionalProps, } = props;
9
9
  const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
10
10
  const [selectOptions, setSelectOptions] = useState([]);
11
11
  const [anchorEl, setAnchorEl] = React.useState(null);
12
+ const textFieldRef = useRef(null);
12
13
  const open = Boolean(anchorEl);
13
14
  const popoverId = open ? `${id}-popover` : undefined;
14
15
  useEffect(() => {
@@ -25,23 +26,12 @@ const AddressFieldComponent = (props) => {
25
26
  setSelectOptions(addresses
26
27
  .filter((address) => address.address.line1)
27
28
  .map((address) => {
28
- let label = '', sublabel = '';
29
- if (address.address.line1)
30
- label = label.concat(address.address.line1);
31
- if (address.address.city)
32
- sublabel = sublabel.concat(`${address.address.city}`);
33
- if (address.address.county)
34
- sublabel = sublabel
35
- ? sublabel.concat(`, ${address.address.county}`)
36
- : address.address.county;
37
- if (address.address.state)
38
- sublabel = sublabel
39
- ? sublabel.concat(`, ${address.address.state}`)
40
- : address.address.state;
41
- if (address.address.zipCode)
42
- sublabel = sublabel
43
- ? sublabel.concat(` ${address.address.zipCode}`)
44
- : address.address.zipCode;
29
+ const { line1, city, county, state, zipCode } = address.address;
30
+ const label = line1 !== null && line1 !== void 0 ? line1 : '';
31
+ let sublabel = [city, county, state].filter(Boolean).join(', ');
32
+ if (zipCode) {
33
+ sublabel = sublabel ? `${sublabel} ${zipCode}` : zipCode;
34
+ }
45
35
  return { label, sublabel, value: address.address };
46
36
  }));
47
37
  });
@@ -56,10 +46,10 @@ const AddressFieldComponent = (props) => {
56
46
  setAnchorEl(null);
57
47
  };
58
48
  return (React.createElement(Box, null,
59
- !mask ? (React.createElement(TextField, Object.assign({ id: id, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder, InputProps: {
49
+ !mask ? (React.createElement(TextField, Object.assign({ id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder, InputProps: {
60
50
  type: 'search',
61
51
  autoComplete: 'off',
62
- }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar !== null && inputMaskPlaceholderChar !== void 0 ? inputMaskPlaceholderChar : '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, Object.assign({ id: id, sx: readOnly
52
+ }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined }, (additionalProps !== null && additionalProps !== void 0 ? additionalProps : {})))) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar !== null && inputMaskPlaceholderChar !== void 0 ? inputMaskPlaceholderChar : '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, Object.assign({ id: id, inputRef: textFieldRef, sx: readOnly
63
53
  ? {
64
54
  '& .MuiOutlinedInput-notchedOutline': {
65
55
  border: 'none',
@@ -78,23 +68,23 @@ const AddressFieldComponent = (props) => {
78
68
  horizontal: 'left',
79
69
  }, PaperProps: {
80
70
  sx: {
81
- width: '100%',
82
- height: '400px',
83
- maxWidth: '300px',
84
- boxShadow: 'none',
71
+ width: ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth)
72
+ ? `${textFieldRef.current.offsetWidth}px`
73
+ : '100%',
74
+ height: 'fit-content',
75
+ maxHeight: '400px',
76
+ borderRadius: '8px',
77
+ boxShadow: 'rgb(222, 218, 218) -2px 4px 5px -3px, rgb(150 150 150 / 14%) 0px 0px 10px 2px',
85
78
  zIndex: 2000,
86
79
  },
87
80
  } },
88
- React.createElement(List, null,
89
- selectOptions.map((option) => {
90
- return (React.createElement(MenuItem, { key: option.label + option.sublabel, onClick: () => handleClick(option) },
91
- React.createElement(Box, { sx: {
92
- flexGrow: 1,
93
- } },
94
- React.createElement(Typography, null, option.label),
95
- React.createElement(Typography, { sx: { color: '#586069' } }, option.sublabel))));
96
- }),
97
- React.createElement(ListItem, { sx: { justifyContent: 'center' } },
98
- React.createElement(Button, { fullWidth: true, size: "small", color: "primary", variant: "outlined", startIcon: React.createElement(CancelOutlined, null), onClick: () => handleClose() }, "Close")))))));
81
+ React.createElement(List, null, selectOptions.map((option, index) => {
82
+ return (React.createElement(MenuItem, { key: `${option.label}-${option.sublabel}-${index}`, onClick: () => handleClick(option) },
83
+ React.createElement(Box, { sx: {
84
+ flexGrow: 1,
85
+ } },
86
+ React.createElement(Typography, null, option.label),
87
+ React.createElement(Typography, { sx: { color: '#586069' } }, option.sublabel))));
88
+ }))))));
99
89
  };
100
90
  export default AddressFieldComponent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evoke-platform/ui-components",
3
- "version": "1.0.0-dev.190",
3
+ "version": "1.0.0-dev.191",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",