@dilicorp/ui 2.0.2 → 2.0.3

package/dist/components/form-builder/components/input.d.ts

@@ -14,6 +14,9 @@ export interface FormBuildItemInput extends Omit<FormBuilderBasicsItem, 'prefix'
     prefix?: string | React.ReactNode;
     fastField?: boolean;
     decimals?: number;
+    alpha?: boolean;
+    numbers?: boolean;
+    isEmail?: boolean;
 }
 declare type Props = Omit<FormBuildItemInput, 'component'> & {
     actions: FormikProps<any>;

package/dist/components/form-builder/components/input.js

@@ -6,7 +6,7 @@ import { InputMask } from './input-mask';
 import { InputPrefixSuffix } from './input-prefix-suffix';
 import { InputPercentage } from './input-percentage';
 export default function Input(props) {
-    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix, fastField = true, decimals = 2, ...elements } = props;
+    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix, fastField = true, decimals = 2, alpha = true, numbers = true, isEmail = false, ...elements } = props;
     const validOptions = {
         alt: elements.alt,
         autoComplete: elements.autoComplete,
@@ -47,12 +47,55 @@ export default function Input(props) {
                 actions.setFieldValue(name, newValue);
             }
             else {
-                actions.setFieldValue(name, event.currentTarget.value);
+                if (type !== 'text' ||
+                    currency ||
+                    mask ||
+                    prefix ||
+                    suffix) {
+                    actions.setFieldValue(name, event.currentTarget.value);
+                }
+                else {
+                    actions.setFieldValue(name, sanitize(event.currentTarget.value));
+                }
             }
         }
     };
     const curValue = actions.values[name];
     const classes = classNames(className, 'form-control');
+    const replacePattern = isEmail
+        ? /[^a-zA-Z0-9._%+\-@]/g
+        : alpha
+            ? (numbers ? /[^A-Za-z0-9 \-_]/g : /[^A-Za-z \-_]/g)
+            : (!numbers ? /[0-9]/g : null);
+    const blockPattern = isEmail
+        ? /[^a-zA-Z0-9._%+\-@]/
+        : alpha
+            ? (numbers ? /[^A-Za-z0-9 \-_]/ : /[^A-Za-z \-_]/)
+            : (!numbers ? /[0-9]/ : null);
+    const sanitize = (value) => {
+        let result = replacePattern ? value.replace(replacePattern, '') : value;
+        if (alpha && !isEmail)
+            result = result.replace(/ {2,}/g, ' ');
+        return result;
+    };
+    const handleKeyDown = (blockPattern || (alpha && !isEmail))
+        ? (e) => {
+            var _a;
+            const { key, ctrlKey, metaKey } = e;
+            if (key.length === 1 && !ctrlKey && !metaKey) {
+                if (blockPattern && blockPattern.test(key)) {
+                    e.preventDefault();
+                    return;
+                }
+                if (alpha && !isEmail && key === ' ') {
+                    const pos = (_a = e.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : 0;
+                    if (e.currentTarget.value[pos - 1] === ' ') {
+                        e.preventDefault();
+                    }
+                }
+            }
+        }
+        : undefined;
     const attrsInput = {
         ...validOptions,
         value: curValue,
@@ -82,7 +125,7 @@ export default function Input(props) {
     if (prefix || suffix)
         return React.createElement(InputPrefixSuffix, { ...{ attrs, suffix, prefix, handleChange } });
     const Tag = fastField ? FastField : Field;
-    return (React.createElement(Tag, { ...attrsInput, as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
+    return (React.createElement(Tag, { ...attrsInput, onKeyDown: handleKeyDown, as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
             event.currentTarget.readOnly = false;
         } }));
 }