@evoke-platform/ui-components 1.0.0-dev.138 → 1.0.0-dev.140

package/dist/published/components/core/List/ListItem.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ListItemProps } from '@mui/material';
+declare const ListItem: (props: ListItemProps) => JSX.Element;
+export default ListItem;

package/dist/published/components/core/List/ListItem.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ListItem as MUIListItem } from '@mui/material';
+import UIThemeProvider from '../../../theme';
+const ListItem = (props) => {
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(MUIListItem, Object.assign({}, props))));
+};
+export default ListItem;

package/dist/published/components/core/List/index.d.ts

@@ -1,3 +1,4 @@
 import List from './List';
+import ListItem from './ListItem';
 export default List;
-export { List };
+export { List, ListItem };

package/dist/published/components/core/List/index.js

@@ -1,3 +1,4 @@
 import List from './List';
+import ListItem from './ListItem';
 export default List;
-export { List };
+export { List, ListItem };

package/dist/published/components/core/Popper/Popper.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PopperProps } from '@mui/material';
+declare const Popper: (props: PopperProps) => JSX.Element;
+export default Popper;

package/dist/published/components/core/Popper/Popper.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Popper as MUIPopper } from '@mui/material';
+import UIThemeProvider from '../../../theme';
+const Popper = (props) => {
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(MUIPopper, Object.assign({}, props))));
+};
+export default Popper;

package/dist/published/components/core/Popper/index.d.ts

@@ -0,0 +1,3 @@
+import Popper from './Popper';
+export default Popper;
+export { Popper };

package/dist/published/components/core/Popper/index.js

@@ -0,0 +1,3 @@
+import Popper from './Popper';
+export default Popper;
+export { Popper };

package/dist/published/components/core/index.d.ts

@@ -24,7 +24,7 @@ export { Switch } from './Switch';
 export { TextField } from './TextField';
 export { Typography } from './Typography';
 export { Paper } from './Paper';
-export { List } from './List';
+export { List, ListItem } from './List';
 export { Card } from './Card';
 export { Collapse } from './Collapse';
 export { IconButton } from './IconButton';
@@ -41,5 +41,6 @@ export { FieldError } from './FieldError';
 export { Select } from './Select';
 export { Step, StepLabel, Stepper, StepContent, StepButton, StepIcon, StepConnector } from './Stepper';
 export { Popover } from './Popover';
-export { TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItem, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, GridSize, } from '@mui/material';
+export { Popper } from './Popper';
+export { TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, GridSize, } from '@mui/material';
 export { LoadingButton, TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';

package/dist/published/components/core/index.js

@@ -24,7 +24,7 @@ export { Switch } from './Switch';
 export { TextField } from './TextField';
 export { Typography } from './Typography';
 export { Paper } from './Paper';
-export { List } from './List';
+export { List, ListItem } from './List';
 export { Card } from './Card';
 export { Collapse } from './Collapse';
 export { IconButton } from './IconButton';
@@ -41,6 +41,7 @@ export { FieldError } from './FieldError';
 export { Select } from './Select';
 export { Step, StepLabel, Stepper, StepContent, StepButton, StepIcon, StepConnector } from './Stepper';
 export { Popover } from './Popover';
+export { Popper } from './Popper';
 //TODO: Review following components. They also need theme control:
-export { TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItem, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, } from '@mui/material';
+export { TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, } from '@mui/material';
 export { LoadingButton, TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FormFieldProps } from '../FormField';
+declare const AddressFieldComponent: (props: FormFieldProps) => JSX.Element;
+export default AddressFieldComponent;

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import { Button, List, ListItem, Popper, TextField, Typography } from '../../../core';
+import { Box } from '../../../layout';
+import InputMask from 'react-input-mask';
+import { CancelOutlined } from '../../../../icons';
+const AddressFieldComponent = (props) => {
+    const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses } = props;
+    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+    // const [inputValue, setInputValue] = useState<string>('');
+    const [selectOptions, setSelectOptions] = useState([]);
+    const id = property.id;
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const popperId = open ? `${id}-popper` : undefined;
+    useEffect(() => {
+        setValue(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+    }, [defaultValue]);
+    const handleChange = (e) => {
+        setAnchorEl(e.currentTarget);
+        const inputValue = e.target.value;
+        setValue(inputValue);
+        queryAddresses && queryAddresses(value).then(addresses => {
+            setSelectOptions(addresses.filter(address => address.address.line1).map((address) => {
+                let label = '', sublabel = '';
+                if (address.address.line1)
+                    label = label.concat(address.address.line1);
+                if (address.address.city)
+                    sublabel = sublabel.concat(`${address.address.city}`);
+                if (address.address.county)
+                    sublabel = sublabel ? sublabel.concat(`, ${address.address.county}`) : address.address.county;
+                if (address.address.state)
+                    sublabel = sublabel ? sublabel.concat(`, ${address.address.state}`) : address.address.state;
+                if (address.address.zipCode)
+                    sublabel = sublabel ? sublabel.concat(` ${address.address.zipCode}`) : address.address.zipCode;
+                return { label, sublabel, value: address.address };
+            }));
+        });
+        props.onChange(id, inputValue, property, undefined, true);
+    };
+    const handleClick = (option) => {
+        setAnchorEl(null);
+        setValue(option.value.line1);
+        props.onChange(id, option.value, property, undefined, true);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (React.createElement(Box, null,
+        !mask ? React.createElement(TextField, { id: id, "aria-describedby": popperId, 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: {
+                type: 'search',
+                autoComplete: 'off'
+            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined }) : 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, { id: id, sx: readOnly
+                ? {
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        border: 'none',
+                    },
+                    '.MuiOutlinedInput-root': {
+                        borderRadius: '8px',
+                        backgroundColor: '#f4f6f8',
+                    },
+                }
+                : 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 }))),
+        !readOnly && React.createElement(Popper, { id: popperId, open: open, anchorEl: anchorEl, placement: 'bottom-start', sx: { margin: '0 0 0 35px', background: 'white' } },
+            React.createElement(List, null,
+                selectOptions.map((option) => {
+                    return (React.createElement(ListItem, { onClick: () => handleClick(option), sx: {
+                            '&:hover': {
+                                cursor: 'pointer',
+                                backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                            }
+                        } },
+                        React.createElement(Box, { sx: {
+                                flexGrow: 1,
+                            } },
+                            React.createElement(Typography, null, option.label),
+                            React.createElement(Typography, { sx: { color: '#586069' } }, option.sublabel))));
+                }),
+                React.createElement(ListItem, { sx: { justifyContent: 'center' } },
+                    React.createElement(Button, { fullWidth: true, size: 'small', color: 'primary', variant: "outlined", startIcon: React.createElement(CancelOutlined, null), onClick: () => handleClose() }, "Close"))))));
+};
+export default AddressFieldComponent;

package/dist/published/components/custom/FormField/AddressFieldComponent/index.d.ts

@@ -0,0 +1 @@
+export * from './addressFieldComponent';

package/dist/published/components/custom/FormField/AddressFieldComponent/index.js

@@ -0,0 +1 @@
+export * from './addressFieldComponent';

package/dist/published/components/custom/FormField/FormField.d.ts

@@ -17,6 +17,7 @@ export declare type FormFieldProps = {
     isMultiLineText?: boolean;
     rows?: number;
     inputMaskPlaceholderChar?: string;
+    queryAddresses?: Function;
 };
 export declare type ObjectProperty = {
     id: string;

package/dist/published/components/custom/FormField/FormField.js

@@ -4,8 +4,9 @@ import DatePickerSelect from './DatePickerSelect/DatePickerSelect';
 import FileUploadControl from './FileUpload/FileUpload';
 import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
+import AddressFieldComponent from './AddressFieldComponent/addressFieldComponent';
 const FormField = (props) => {
-    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, } = props;
+    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses } = props;
     const id = property.id;
     let control;
     const commonProps = {
@@ -24,6 +25,10 @@ const FormField = (props) => {
         min,
         max,
     };
+    if (queryAddresses) {
+        control = (React.createElement(AddressFieldComponent, Object.assign({}, commonProps, { mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses })));
+        return control;
+    }
     switch (property.type) {
         case 'boolean':
             control = (React.createElement(BooleanSelect, Object.assign({}, commonProps, { defaultValue: defaultValue ? 'Yes' : defaultValue === undefined ? '' : 'No' })));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.138",
+    "version": "1.0.0-dev.140",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",