@evoke-platform/ui-components 1.0.0-dev.1.10.8 → 1.0.0-dev.1.10.9

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

@@ -10,6 +10,7 @@ export declare type FormFieldProps = {
     locale?: string;
     size?: 'small' | 'medium';
     placeholder?: string;
+    mask?: 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 } = props;
+    const { defaultValue, error, onChange, property, readOnly, selectOptions, required, size, placeholder, errorMessage, mask } = props;
     const id = property.id;
     let control;
     const commonProps = {
@@ -38,7 +38,7 @@ const FormField = (props) => {
             control = React.createElement(Select, Object.assign({}, commonProps));
             break;
         default:
-            control = React.createElement(InputFieldComponent, Object.assign({}, commonProps));
+            control = React.createElement(InputFieldComponent, Object.assign({}, commonProps, { mask: mask }));
             break;
     }
     return control;

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

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useEffect, useState } from 'react';
 import NumberFormat from 'react-number-format';
 import { Autocomplete, TextField } from '../../../core';
+import InputMask from 'react-input-mask';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NumericFormat = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -22,11 +23,11 @@ const NumericFormat = (props) => {
                     value: values.floatValue,
                 },
             });
-        }, thousandSeparator: true, isNumericString: true, fixedDecimalScale: true, allowNegative: true })));
+        }, thousandSeparator: true, isNumericString: true, fixedDecimalScale: true, allowNegative: false })));
 };
 const InputFieldComponent = (props) => {
     var _a;
-    const { property, defaultValue, error, errorMessage, readOnly, required, size, placeholder } = props;
+    const { property, defaultValue, error, errorMessage, readOnly, required, size, placeholder, mask } = props;
     const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
     const [inputValue, setInputValue] = useState('');
     const id = property.id;
@@ -61,7 +62,7 @@ const InputFieldComponent = (props) => {
     }
     return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, fullWidth: true, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
-        }, error: error, required: required, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', onInputChange: handleInputValueChange })) : (React.createElement(TextField, { id: id, sx: readOnly
+        }, error: error, required: required, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', onInputChange: handleInputValueChange })) : !mask ? (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',
@@ -71,6 +72,17 @@ 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, 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 }));
+            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, 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, alwaysShowMask: true },
+        React.createElement(TextField, { id: id, sx: readOnly
+                ? {
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        border: 'none',
+                    },
+                    '.MuiOutlinedInput-root': {
+                        borderRadius: '8px',
+                        backgroundColor: '#f4f6f8',
+                    },
+                }
+                : undefined, error: error, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), fullWidth: true, type: property.type === 'integer' ? 'number' : 'text' })));
 };
 export default InputFieldComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.1.10.8",
+    "version": "1.0.0-dev.1.10.9",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -72,6 +72,7 @@
         "@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-number-format": "^4.9.3",
         "react-querybuilder": "^6.0.2"
     },