@evoke-platform/ui-components 1.0.0-dev.120 → 1.0.0-dev.122

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 System Automation Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -10,7 +10,7 @@ const styles = {
         display: 'flex',
         backgroundColor: 'white',
         minHeight: '40px',
-        width: '348px',
+        width: '400px',
         padding: '7px',
         border: '1px solid #919EAB7A',
         borderRadius: '8px',
@@ -23,9 +23,9 @@ const styles = {
     }
 };
 export const Snackbar = (props) => {
-    const { handleClose, error, message } = props;
+    const { handleClose, error, message, autoHideDuration, action } = props;
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUISnackbar, Object.assign({ autoHideDuration: 6000, onClose: () => handleClose(), anchorOrigin: {
+        React.createElement(MUISnackbar, Object.assign({ autoHideDuration: autoHideDuration !== null && autoHideDuration !== void 0 ? autoHideDuration : 6000, onClose: () => handleClose(), anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'center',
             } }, props),
@@ -34,6 +34,7 @@ export const Snackbar = (props) => {
                     error ?
                         React.createElement(InfoRounded, { sx: Object.assign(Object.assign({}, styles.icon), { color: '#A22723' }) }) : React.createElement(CheckCircle, { sx: Object.assign(Object.assign({}, styles.icon), { color: '#229A16' }) }),
                     React.createElement(Typography, { fontSize: '14px', fontWeight: 400, sx: { marginRight: '3px' } }, (message !== null && message !== void 0 ? message : '')),
+                    action,
                     React.createElement(IconButton, { size: "small", "aria-label": "close", color: "inherit", sx: { marginLeft: 'auto', marginRight: '15px' }, onClick: () => handleClose() },
                         React.createElement(Close, { fontSize: "small" })))))));
 };

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

@@ -14,6 +14,9 @@ export declare type FormFieldProps = {
     size?: 'small' | 'medium';
     placeholder?: string;
     mask?: string;
+    isMultiLineText?: boolean;
+    rows?: number;
+    inputMaskPlaceholderChar?: string;
 };
 export declare type ObjectProperty = {
     id: string;

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

@@ -5,7 +5,7 @@ import FileUploadControl from './FileUpload/FileUpload';
 import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 const FormField = (props) => {
-    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min } = props;
+    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, } = props;
     const id = property.id;
     let control;
     const commonProps = {
@@ -22,7 +22,7 @@ const FormField = (props) => {
         size,
         placeholder,
         min,
-        max
+        max,
     };
     switch (property.type) {
         case 'boolean':
@@ -41,7 +41,7 @@ const FormField = (props) => {
             control = React.createElement(Select, Object.assign({}, commonProps));
             break;
         default:
-            control = React.createElement(InputFieldComponent, Object.assign({}, commonProps, { mask: mask }));
+            control = (React.createElement(InputFieldComponent, Object.assign({}, commonProps, { mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows })));
             break;
     }
     return control;

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

@@ -27,7 +27,7 @@ export const NumericFormat = (props) => {
 };
 const InputFieldComponent = (props) => {
     var _a;
-    const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max } = props;
+    const { property, defaultValue, error, errorMessage, onBlur, readOnly, required, size, placeholder, mask, min, max, isMultiLineText, rows, inputMaskPlaceholderChar, } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [inputValue, setInputValue] = useState('');
     const id = property.id;
@@ -70,17 +70,16 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }
-            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !!readOnly })) : (React.createElement(InputMask, { mask: mask, 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, error: error, errorMessage: errorMessage, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), fullWidth: true, type: property.type === 'integer' ? 'number' : 'text' })));
+            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'text' && !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, error: error, errorMessage: errorMessage, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), fullWidth: true, type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'text' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined }))));
 };
 export default InputFieldComponent;

package/dist/published/stories/FormField.stories.d.ts

@@ -2,6 +2,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const _default: ComponentMeta<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
 export default _default;
 export declare const InputField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
+export declare const MaskedInput: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
 export declare const ChoicesSelectField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
 export declare const DatePickerField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;
 export declare const BooleanField: ComponentStory<(props: import("../components/custom/FormField/FormField").FormFieldProps) => any>;

package/dist/published/stories/FormField.stories.js

@@ -23,6 +23,28 @@ InputField.args = {
     locale: 'string',
     size: 'small',
     placeholder: 'string',
+    isMultiLineText: true,
+    rows: 5,
+};
+export const MaskedInput = FormFieldTemplate.bind({});
+MaskedInput.args = {
+    mask: '999-99-9999',
+    inputMaskPlaceholderChar: '#',
+    property: {
+        id: 'ssn',
+        name: 'SS Number',
+        type: 'text',
+        required: true,
+    },
+    onChange: (id, value) => console.log('id= ', id, 'Value= ', value),
+    defaultValue: '123-45-6789',
+    error: false,
+    required: true,
+    readOnly: false,
+    selectOptions: [],
+    locale: 'string',
+    size: 'small',
+    placeholder: 'string',
 };
 export const ChoicesSelectField = FormFieldTemplate.bind({});
 ChoicesSelectField.args = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.120",
+    "version": "1.0.0-dev.122",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -74,7 +74,8 @@
         "@react-querybuilder/material": "^5.4.1",
         "lodash-es": "^4.17.21",
         "react-dropzone": "^14.2.2",
-        "react-input-mask": "^3.0.0-alpha.2",
+        "react-input-mask": "^2.0.4",
+        "@types/react-input-mask": "^3.0.2",
         "react-querybuilder": "^6.0.2",
         "react-number-format": "^4.9.3"
     },
@@ -85,4 +86,4 @@
         "verbose": true,
         "testEnvironment": "jsdom"
     }
-}
+}