@evoke-platform/ui-components 1.0.0-dev.141 → 1.0.0-dev.142

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/custom/FormField/AddressFieldComponent/addressFieldComponent.js +33 -21
  2. package/dist/published/stories/FormField.stories.d.ts +1 -0
  3. package/dist/published/stories/FormField.stories.js +123 -0
  4. package/package.json +1 -1
package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import React, { useEffect, useState } from 'react';
2
- import { Button, List, ListItem, Popper, TextField, Typography } from '../../../core';
2
+ import { Button, List, ListItem, TextField, Typography } from '../../../core';
3
3
  import { Box } from '../../../layout';
4
4
  import InputMask from 'react-input-mask';
5
5
  import { CancelOutlined } from '../../../../icons';
6
- import { ClickAwayListener } from '@mui/material';
6
+ import { Popover } from '@mui/material';
7
7
  const AddressFieldComponent = (props) => {
8
8
  const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, } = props;
9
9
  const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
@@ -45,12 +45,12 @@ const AddressFieldComponent = (props) => {
45
45
  return { label, sublabel, value: address.address };
46
46
  }));
47
47
  });
48
- props.onChange(id, inputValue, property, undefined, true);
48
+ props.onChange(id, inputValue, property, undefined);
49
49
  };
50
50
  const handleClick = (option) => {
51
51
  setAnchorEl(null);
52
52
  setValue(option.value.line1);
53
- props.onChange(id, option.value, property, undefined, true);
53
+ props.onChange(id, option.value, property, undefined);
54
54
  };
55
55
  const handleClose = () => {
56
56
  setAnchorEl(null);
@@ -70,23 +70,35 @@ const AddressFieldComponent = (props) => {
70
70
  },
71
71
  }
72
72
  : undefined, required: required, error: error, errorMessage: errorMessage, InputProps: { readOnly: readOnly }, fullWidth: true, size: size !== null && size !== void 0 ? size : 'medium', type: 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, value: value })))),
73
- !readOnly && (React.createElement(ClickAwayListener, { onClickAway: handleClose },
74
- React.createElement(Popper, { id: popperId, open: open, anchorEl: anchorEl, placement: "bottom-start", sx: { margin: '0 0 0 35px', background: 'white', zIndex: 2000 } },
75
- React.createElement(List, null,
76
- selectOptions.map((option) => {
77
- return (React.createElement(ListItem, { onClick: () => handleClick(option), sx: {
78
- '&:hover': {
79
- cursor: 'pointer',
80
- backgroundColor: 'rgba(0, 0, 0, 0.04)',
81
- },
73
+ !readOnly && (React.createElement(Popover, { id: popperId, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
74
+ vertical: 'bottom',
75
+ horizontal: 'left',
76
+ }, transformOrigin: {
77
+ vertical: 'top',
78
+ horizontal: 'left',
79
+ }, PaperProps: {
80
+ sx: {
81
+ width: '100%',
82
+ maxWidth: '500px',
83
+ margin: 0,
84
+ boxShadow: 'none',
85
+ },
86
+ }, sx: { width: '100%', margin: '0 0 0 35px', background: 'white', zIndex: 2000 } },
87
+ React.createElement(List, null,
88
+ selectOptions.map((option) => {
89
+ return (React.createElement(ListItem, { onClick: () => handleClick(option), sx: {
90
+ '&:hover': {
91
+ cursor: 'pointer',
92
+ backgroundColor: 'rgba(0, 0, 0, 0.04)',
93
+ },
94
+ } },
95
+ React.createElement(Box, { sx: {
96
+ flexGrow: 1,
82
97
  } },
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
- }),
89
- React.createElement(ListItem, { sx: { justifyContent: 'center' } },
90
- React.createElement(Button, { fullWidth: true, size: "small", color: "primary", variant: "outlined", startIcon: React.createElement(CancelOutlined, null), onClick: () => handleClose() }, "Close"))))))));
98
+ React.createElement(Typography, null, option.label),
99
+ React.createElement(Typography, { sx: { color: '#586069' } }, option.sublabel))));
100
+ }),
101
+ React.createElement(ListItem, { sx: { justifyContent: 'center' } },
102
+ React.createElement(Button, { fullWidth: true, size: "small", color: "primary", variant: "outlined", startIcon: React.createElement(CancelOutlined, null), onClick: () => handleClose() }, "Close")))))));
91
103
  };
92
104
  export default AddressFieldComponent;
package/dist/published/stories/FormField.stories.d.ts CHANGED
@@ -9,3 +9,4 @@ export declare const DatePickerField: ComponentStory<(props: import("../componen
9
9
  export declare const BooleanField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
10
10
  export declare const FileUploadField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
11
11
  export declare const ArraySelectField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
12
+ export declare const AddressField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
package/dist/published/stories/FormField.stories.js CHANGED
@@ -1,3 +1,12 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
1
10
  import React from 'react';
2
11
  import { FormField } from '../index';
3
12
  export default {
@@ -169,3 +178,117 @@ ArraySelectField.args = {
169
178
  size: 'small',
170
179
  placeholder: 'string',
171
180
  };
181
+ export const AddressField = FormFieldTemplate.bind({});
182
+ AddressField.args = {
183
+ property: {
184
+ id: 'address.line1',
185
+ name: 'Address Line 1',
186
+ type: 'address',
187
+ required: false,
188
+ },
189
+ onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
190
+ defaultValue: '123 Valey Way',
191
+ error: false,
192
+ required: true,
193
+ readOnly: false,
194
+ selectOptions: [],
195
+ locale: 'string',
196
+ size: 'small',
197
+ placeholder: 'string',
198
+ isMultiLineText: true,
199
+ rows: 5,
200
+ queryAddresses: (value) => __awaiter(void 0, void 0, void 0, function* () {
201
+ return [
202
+ {
203
+ address: {
204
+ line1: '12 Riverview Drive',
205
+ city: 'Dummy Data Town',
206
+ county: 'Dummy Data County',
207
+ state: 'DS',
208
+ zipCode: '17347',
209
+ },
210
+ },
211
+ {
212
+ address: {
213
+ line1: '12 Devonshire Court',
214
+ city: 'Dummy Data Town',
215
+ county: 'Dummy Data County',
216
+ state: 'DS',
217
+ zipCode: '17347',
218
+ },
219
+ },
220
+ {
221
+ address: {
222
+ line1: '12 Westminster Court',
223
+ city: 'Dummy Data Town',
224
+ county: 'Dummy Data County',
225
+ state: 'DS',
226
+ zipCode: '17347',
227
+ },
228
+ },
229
+ {
230
+ address: {
231
+ line1: '12 Asbury Court',
232
+ city: 'Dummy Data Town',
233
+ county: 'Dummy Data County',
234
+ state: 'DS',
235
+ zipCode: '17347',
236
+ },
237
+ },
238
+ {
239
+ address: {
240
+ line1: '12 Coventry Crossroad',
241
+ city: 'Dummy Data Town',
242
+ county: 'Dummy Data County',
243
+ state: 'DS',
244
+ zipCode: '17347',
245
+ },
246
+ },
247
+ {
248
+ address: {
249
+ line1: '12 Burberry Lane',
250
+ city: 'Dummy Data Town',
251
+ county: 'Dummy Data County',
252
+ state: 'DS',
253
+ zipCode: '17347',
254
+ },
255
+ },
256
+ {
257
+ address: {
258
+ line1: '12 Abbey Drive',
259
+ city: 'Dummy Data Town',
260
+ county: 'Dummy Data County',
261
+ state: 'DS',
262
+ zipCode: '17347',
263
+ },
264
+ },
265
+ {
266
+ address: {
267
+ line1: '12 North Burberry Lane',
268
+ city: 'Dummy Data Town',
269
+ county: 'Dummy Data County',
270
+ state: 'DS',
271
+ zipCode: '17347',
272
+ },
273
+ },
274
+ {
275
+ address: {
276
+ line1: '12 Spring Road',
277
+ city: 'Hellam',
278
+ county: 'Dummy Data County',
279
+ state: 'DS',
280
+ zipCode: '17406',
281
+ },
282
+ },
283
+ {
284
+ address: {
285
+ line1: '12 Bonita Drive',
286
+ city: 'Dummy Data Town',
287
+ county: 'Dummy Data County',
288
+ state: 'DS',
289
+ zipCode: '17347',
290
+ },
291
+ },
292
+ ];
293
+ }),
294
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evoke-platform/ui-components",
3
- "version": "1.0.0-dev.141",
3
+ "version": "1.0.0-dev.142",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",