@trilogy-ds/react 0.0.1-beta.9 → 0.0.1-calendar

package/lib/components/input/Input.js

@@ -1,15 +1,21 @@
-import React, { useEffect, useState } from 'react';
-import { has, is } from '../../services';
-import { Icon, IconColor, IconName, IconSize } from '../icon';
-import { Text } from '../text';
-import { InputStatus, InputType } from './InputEnum';
+import { __assign, __read, __rest } from "tslib";
+import translation from '@trilogy-ds/locales/lib/input';
 import clsx from 'clsx';
-import { hashClass } from '../../helpers';
+import React, { useCallback, useEffect, useId, useState } from 'react';
+import { Text, TextLevels, TextMarkup } from '../../components/text';
 import { useTrilogyContext } from '../../context';
-import { getColorStyle, TrilogyColor } from '../../objects';
+import { hashClass } from '../../helpers';
+import { TypographyColor } from '../../objects';
+import { has, is } from '../../services';
+import { ComponentName } from '../enumsComponentsName';
+import { Icon, IconName, IconSize } from '../icon';
+import { InputStatus, InputType } from './InputEnum';
+import InputGauge from './gauge/InputGauge';
 /**
  * Input Component
  * @param name {string} Input name
+ * @param label {string} Label for input
+ * @param sample {string} Sample for input (below label)
  * @param disabled {boolean} Disabled input
  * @param onChange {Function} OnChange Input Event
  * @param onFocus {Function} onFocus Input Event
@@ -18,30 +24,24 @@ import { getColorStyle, TrilogyColor } from '../../objects';
  * @param type {InputType} Type for input
  * @param defaultValue {string} Default Value for Input
  * @param hasIcon {boolean} Adding if you want icon - Default icon is defined by status
- * @param customIcon {IconName} Adding if you want custom icon
  * @param status {InputStatus} Input with status - (SUCCESS|WARNING|ERROR|DEFAULT)
  * @param patternValidator {RegExp} regex validator
  * @param customValidator {Function} custom function validator
  * @param onStatusChange {Function} status change event
  * @param help {string} Help for input
- * @param search {boolean} define if input is a search type
  * @param ref Pass a ref for input
  * @param onSubmit {Function} onSubmit Event
  * @param maxLength {number} Textarea max length
- * @param customIconLeft {IconName} Adding if you want custom icon left
- * @param customIconRight {IconName} Adding if you want custom icon right
  * @param securityGauge {boolean} add security gauge for input type password
  * @param validationRules {IValidationRules} Textarea max length
-
+ * @param readOnly {boolean} Read only input
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param loading {boolean} Loading input
  * @param value {string} Value for Input
- * @param hovered {boolean} Hover mode
  * @param focused {boolean} Fucus mode
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param onMouseEnter {Function} onMouseEnter Input Event
  * @param onMouseLeave {Function} onMouseLeave Input Event
- * @param iconClassname {string} Additional icon classes
  * @param onKeyPress {Function} onKeyPress Input Event
  * @param onKeyUp {Function} onKeyUp Input Event
  * @param onIconClick {Function} onIconClick Input Event
@@ -49,208 +49,118 @@ import { getColorStyle, TrilogyColor } from '../../objects';
  * @param forceControl {boolean} Force the control of the input value
  * @param minLength {number} Textarea min length
  * @param accessibilityLabel {string} Accessibility label
- * @param testId {string} Test Id for Test Integration
  * @param required {boolean} Required input
  * - -------------------------- NATIVE PROPERTIES -------------------------------
  * @param autoCompleteType {InputAutoCompleteType} Auto complete input type
  */
-const Input = ({ forceControl, className, disabled, onChange, onKeyPress, onKeyUp, onIconClick, onClick, onFocus, onBlur, patternValidator, onMouseEnter, onMouseLeave, name, placeholder, type = 'text', defaultValue, value, loading, hovered, focused, hasIcon, customIcon, status, help, iconClassname, search = false, reference, onStatusChange, customValidator, onSubmit, minLength, maxLength, testId, accessibilityLabel, autoCompleteType, customIconLeft, customIconRight, securityGauge, validationRules, required, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const [_value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
-    const [isHovered, setIsHovered] = useState(hovered !== null && hovered !== void 0 ? hovered : false);
-    const [isFocused, setIsFocused] = useState(focused !== null && focused !== void 0 ? focused : false);
-    const [isDirty, setIsDirty] = useState(false);
-    const [isTouched, setIsTouched] = useState(false);
-    const [localStatus, setLocalStatus] = useState(status || InputStatus.DEFAULT);
-    const validator = !customValidator && patternValidator
-        ? (value) => (patternValidator.test(value) ? InputStatus.SUCCESS : InputStatus.ERROR)
+var Input = React.forwardRef(function (_a, ref) {
+    var _b;
+    var forceControl = _a.forceControl, label = _a.label, sample = _a.sample, className = _a.className, _c = _a.id, id = _c === void 0 ? React.useId() : _c, disabled = _a.disabled, onChange = _a.onChange, onKeyPress = _a.onKeyPress, onKeyUp = _a.onKeyUp, onIconClick = _a.onIconClick, onClick = _a.onClick, onFocus = _a.onFocus, onBlur = _a.onBlur, patternValidator = _a.patternValidator, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, name = _a.name, placeholder = _a.placeholder, _d = _a.type, type = _d === void 0 ? InputType.TEXT : _d, defaultValue = _a.defaultValue, value = _a.value, loading = _a.loading, focused = _a.focused, status = _a.status, help = _a.help, onStatusChange = _a.onStatusChange, customValidator = _a.customValidator, onSubmit = _a.onSubmit, minLength = _a.minLength, maxLength = _a.maxLength, accessibilityLabel = _a.accessibilityLabel, autoCompleteType = _a.autoCompleteType, iconNameLeft = _a.iconNameLeft, iconNameRight = _a.iconNameRight, securityGauge = _a.securityGauge, validationRules = _a.validationRules, securityRules = _a.securityRules, required = _a.required, readOnly = _a.readOnly, others = __rest(_a, ["forceControl", "label", "sample", "className", "id", "disabled", "onChange", "onKeyPress", "onKeyUp", "onIconClick", "onClick", "onFocus", "onBlur", "patternValidator", "onMouseEnter", "onMouseLeave", "name", "placeholder", "type", "defaultValue", "value", "loading", "focused", "status", "help", "onStatusChange", "customValidator", "onSubmit", "minLength", "maxLength", "accessibilityLabel", "autoCompleteType", "iconNameLeft", "iconNameRight", "securityGauge", "validationRules", "securityRules", "required", "readOnly"]);
+    var styled = useTrilogyContext().styled;
+    var idHelp = useId();
+    var idSample = useId();
+    var inputIcon = new Map();
+    inputIcon.set(InputStatus.SUCCESS, IconName.CHECK_CIRCLE);
+    inputIcon.set(InputStatus.WARNING, IconName.EXCLAMATION_CIRCLE);
+    inputIcon.set(InputStatus.ERROR, IconName.EXCLAMATION_CIRCLE);
+    var _e = __read(useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''), 2), _value = _e[0], setValue = _e[1];
+    var _f = __read(useState(focused !== null && focused !== void 0 ? focused : false), 2), isFocused = _f[0], setIsFocused = _f[1];
+    var _g = __read(useState(false), 2), isDirty = _g[0], setIsDirty = _g[1];
+    var _h = __read(useState(false), 2), isTouched = _h[0], setIsTouched = _h[1];
+    var _j = __read(useState(status || InputStatus.DEFAULT), 2), localStatus = _j[0], setLocalStatus = _j[1];
+    var _k = __read(useState(type), 2), inputType = _k[0], setInputType = _k[1];
+    var _l = __read(useState(false), 2), isShowPwd = _l[0], setIsShowPwd = _l[1];
+    var helpClasses = clsx('help', localStatus && is(localStatus));
+    var loader = hashClass(styled, clsx(is('searching')));
+    var inputLabelClasses = hashClass(styled, 'input-label');
+    var iconTimesClasses = hashClass(styled, clsx(is('justified-self')));
+    var srOnlyClasses = hashClass(styled, clsx('sr-only'));
+    var classes = hashClass(styled, clsx('input', localStatus && is(localStatus)));
+    var wrapperClasses = hashClass(styled, clsx('field', className, type === InputType.PASSWORD && securityGauge && has('gauge')));
+    var hasIcon = iconNameLeft || iconNameRight;
+    var controlClasses = hashClass(styled, clsx('control', (_b = {},
+        _b[has('icons-right')] = hasIcon !== null && hasIcon !== void 0 ? hasIcon : (iconNameRight || type === InputType.PASSWORD),
+        _b[has('icons-left')] = iconNameLeft || type === InputType.SEARCH,
+        _b)));
+    var onPressKey = useCallback(function (e) {
+        var target = e.target;
+        return {
+            inputName: target.name,
+            inputValue: target.value,
+            inputKeyCode: e.keyCode,
+            target: target,
+            event: e,
+            preventDefault: function () { return e.preventDefault(); },
+        };
+    }, []);
+    var IconWrapper = useCallback(function (_a) {
+        var className = _a.className, name = _a.name, color = _a.color, closeIconSearch = _a.closeIconSearch, onPress = _a.onPress, srOnly = _a.srOnly, showPassword = _a.showPassword;
+        var Markup = showPassword ? 'button' : 'div';
+        return (React.createElement(Markup, __assign({}, (showPassword && { 'data-show-pwd': true, type: 'button' }), { onClick: function (e) {
+                onPress && onPress();
+                if (onIconClick) {
+                    onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value, target: e.target });
+                }
+            } }),
+            React.createElement(Icon, { className: className, name: name, size: IconSize.SMALL, color: color }),
+            _value && _value.length > 0 && closeIconSearch && (React.createElement(Icon, { onClick: function () { return setValue(''); }, className: iconTimesClasses, name: IconName.TIMES_CIRCLE, size: IconSize.SMALL })),
+            showPassword && srOnly && React.createElement("span", { className: srOnlyClasses }, srOnly)));
+    }, [_value, styled]);
+    var validator = !customValidator && patternValidator
+        ? function (value) { return (patternValidator.test(value) ? InputStatus.SUCCESS : InputStatus.ERROR); }
         : customValidator;
-    const [inputType, setInputType] = useState(type);
-    const [isShowPwd, setIsShowPwd] = useState(false);
-    useEffect(() => {
+    useEffect(function () {
         var _a;
         setValue((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : '');
     }, [value, defaultValue]);
-    useEffect(() => {
-        setIsHovered(hovered !== null && hovered !== void 0 ? hovered : false);
-    }, [hovered]);
-    useEffect(() => {
+    useEffect(function () {
         setIsFocused(focused !== null && focused !== void 0 ? focused : false);
     }, [focused]);
-    useEffect(() => {
-        if (isFocused) {
+    useEffect(function () {
+        if (isFocused)
             setIsDirty(true);
-        }
-        else if (isDirty) {
+        else if (isDirty)
             setIsTouched(true);
-        }
     }, [isFocused, isDirty]);
-    useEffect(() => {
-        if (!validator || !isTouched) {
+    useEffect(function () {
+        if (!validator || !isTouched)
             return;
-        }
         setLocalStatus(validator(_value));
     }, [isFocused, isTouched]);
-    useEffect(() => {
+    useEffect(function () {
         setLocalStatus(status || InputStatus.DEFAULT);
     }, [status]);
-    useEffect(() => {
-        if (onStatusChange) {
+    useEffect(function () {
+        if (onStatusChange)
             onStatusChange(localStatus);
-        }
     }, [localStatus]);
-    const inputIcon = new Map();
-    inputIcon.set(InputStatus.SUCCESS, IconName.CHECK_CIRCLE);
-    inputIcon.set(InputStatus.WARNING, IconName.EXCLAMATION_CIRCLE);
-    inputIcon.set(InputStatus.ERROR, IconName.EXCLAMATION_CIRCLE);
-    const wrapperClasses = hashClass(styled, clsx('field', className, type === 'password' && securityGauge && 'has-gauge'));
-    const hasPlaceholder = placeholder !== undefined && placeholder.length > 0;
-    const iconTimesClasse = hashClass(styled, clsx('tri-times'));
-    const iconCheckClasse = hashClass(styled, clsx('tri-check-circle'));
-    const successClasse = hashClass(styled, clsx('is-success'));
-    const iconClasse = hashClass(styled, clsx('icon'));
-    const controlClasses = hashClass(styled, clsx('control', hasPlaceholder && !search && has('dynamic-placeholder'), {
-        [has('icons-right')]: hasIcon !== null && hasIcon !== void 0 ? hasIcon : (customIcon || customIconRight || type === 'password'),
-        [is('disabled')]: disabled,
-        ['has-icons-left']: customIconLeft || search,
-    }));
-    const classes = hashClass(styled, clsx('input', localStatus && is(localStatus), isHovered && !isFocused && is('hovered'), isFocused && !isHovered && is('focused')));
-    const helpClasses = clsx('help', localStatus && is(localStatus));
-    const refLengthVerify = React.useRef(null);
-    const refSpecialCharsVerify = React.useRef(null);
-    const refNumberVerify = React.useRef(null);
-    const refUppercaseVerify = React.useRef(null);
-    const refLowerercaseVerify = React.useRef(null);
-    const [points, setPoints] = React.useState(0);
-    const [nbAllVerifies, setNbAllVerifies] = React.useState(0);
-    const [verifies, setVerifies] = React.useState({});
-    const lengthVerify = {
-        fn: (e) => {
-            var _a, _b, _c, _d;
-            if (((_a = validationRules === null || validationRules === void 0 ? void 0 : validationRules.length) === null || _a === void 0 ? void 0 : _a.max) && !validationRules.length.min) {
-                return e.length > 0 && e.length <= validationRules.length.max;
-            }
-            if (((_b = validationRules === null || validationRules === void 0 ? void 0 : validationRules.length) === null || _b === void 0 ? void 0 : _b.min) && !((_c = validationRules === null || validationRules === void 0 ? void 0 : validationRules.length) === null || _c === void 0 ? void 0 : _c.max)) {
-                return e.length >= validationRules.length.min;
-            }
-            if (((_d = validationRules === null || validationRules === void 0 ? void 0 : validationRules.length) === null || _d === void 0 ? void 0 : _d.max) && validationRules.length.min) {
-                return e.length >= validationRules.length.min && e.length <= validationRules.length.max;
-            }
-            return false;
-        },
-        ref: refLengthVerify,
-    };
-    const specialCharsverify = {
-        // eslint-disable-next-line
-        fn: (e) => /[^\w\*]/.test(e),
-        ref: refSpecialCharsVerify,
-    };
-    const numberVerify = {
-        // eslint-disable-next-line
-        fn: (e) => /[0-9]/.test(e),
-        ref: refNumberVerify,
-    };
-    const uppercaseVerify = {
-        // eslint-disable-next-line
-        fn: (e) => /[A-Z]/.test(e),
-        ref: refUppercaseVerify,
-    };
-    const lowercaseVerify = {
-        // eslint-disable-next-line
-        fn: (e) => /[a-z]/.test(e),
-        ref: refLowerercaseVerify,
-    };
-    React.useEffect(() => {
-        const data = {};
-        validationRules &&
-            Object.keys(validationRules).map((key) => {
-                if (key === 'number')
-                    Object.assign(data, { numberVerify });
-                if (key === 'length')
-                    Object.assign(data, { lengthVerify });
-                if (key === 'lowercase')
-                    Object.assign(data, { lowercaseVerify });
-                if (key === 'uppercase')
-                    Object.assign(data, { uppercaseVerify });
-                if (key === 'specialChars')
-                    Object.assign(data, { specialCharsverify });
-            });
-        setVerifies(data);
-        setNbAllVerifies(Object.keys(data).length);
-    }, [validationRules]);
-    const handleVerifyPwd = (e) => {
-        const verifiesTests = [];
-        Object.keys(verifies).map((key) => {
-            var _a, _b, _c, _d;
-            const test = verifies[key].fn(e);
-            verifiesTests.push(test);
-            if (test) {
-                (_a = verifies[key].ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove(iconTimesClasse);
-                (_b = verifies[key].ref.current) === null || _b === void 0 ? void 0 : _b.classList.add(iconCheckClasse, successClasse);
-            }
-            else {
-                (_c = verifies[key].ref.current) === null || _c === void 0 ? void 0 : _c.classList.remove(iconCheckClasse, successClasse);
-                (_d = verifies[key].ref.current) === null || _d === void 0 ? void 0 : _d.classList.add(iconTimesClasse);
-            }
-        });
-        setPoints(verifiesTests.filter((item) => item).length);
-    };
-    const widthGauge = React.useMemo(() => {
-        const calc = Number(((points / nbAllVerifies) * 100).toFixed(0));
-        if (calc <= 50 && calc > 0)
-            return '50%';
-        if (calc <= 99 && calc > 50)
-            return '75%';
-        if (calc === 100)
-            return '100%';
-        return '0%';
-    }, [points, nbAllVerifies]);
-    const colorGauge = React.useMemo(() => {
-        const calc = Number(((points / nbAllVerifies) * 100).toFixed(0));
-        if (calc <= 50 && calc > 0)
-            return getColorStyle(TrilogyColor.ERROR);
-        if (calc <= 99 && calc > 50)
-            return getColorStyle(TrilogyColor.WARNING);
-        if (calc === 100)
-            return getColorStyle(TrilogyColor.SUCCESS);
-        return '#D1D1D1';
-    }, [points, nbAllVerifies]);
     return (React.createElement("div", { className: wrapperClasses, "data-has-gauge": securityGauge ? true : undefined },
+        label && (React.createElement("label", { className: inputLabelClasses, htmlFor: id },
+            label,
+            ' ',
+            required && (React.createElement(Text, { markup: TextMarkup.SPAN, typo: TypographyColor.TEXT_ERROR }, "*")))),
+        sample && (React.createElement(Text, { className: 'input-sample', level: TextLevels.TWO, id: idSample }, sample)),
         React.createElement("div", { className: controlClasses },
-            React.createElement("input", { required: required, role: 'textbox', ...others, "data-testid": testId, "aria-label": accessibilityLabel, type: inputType, className: classes, value: _value, defaultValue: defaultValue, name: name, onSubmit: onSubmit, ref: reference, disabled: disabled, minLength: minLength, maxLength: maxLength, autoComplete: autoCompleteType, onClick: (e) => {
-                    const target = e.target;
+            React.createElement("input", __assign({ "aria-describedby": "".concat(idHelp, " ").concat(idSample), id: id, required: required, readOnly: readOnly }, others, { "aria-label": !label ? accessibilityLabel : undefined, type: inputType, className: classes, value: value, defaultValue: defaultValue, name: name, onSubmit: onSubmit, ref: ref, disabled: disabled, minLength: minLength, maxLength: maxLength, autoComplete: autoCompleteType, onKeyUp: function (e) { return onKeyUp && onKeyUp(onPressKey(e)); }, onKeyPress: function (e) { return onKeyPress && onKeyPress(onPressKey(e)); }, onMouseEnter: function (e) { return onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e); }, onMouseLeave: function (e) { return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e); }, placeholder: placeholder, onClick: function (e) {
+                    var target = e.target;
                     if (onClick) {
                         onClick({
                             inputName: target.name,
                             inputValue: target.value,
+                            target: target,
                         });
                     }
-                }, onKeyUp: (e) => {
-                    const target = e.target;
-                    if (onKeyUp) {
-                        onKeyUp({
-                            inputName: target.name,
-                            inputValue: target.value,
-                            inputKeyCode: e.keyCode,
-                        });
-                    }
-                }, onKeyPress: (e) => {
-                    const target = e.target;
-                    if (onKeyPress) {
-                        onKeyPress({
-                            inputName: target.name,
-                            inputValue: target.value,
-                            inputKeyCode: e.keyCode,
-                        });
-                    }
-                }, onChange: (e) => {
+                }, onChange: function (e) {
                     // --- solution to prevent cursor jump ---
-                    if (inputType !== InputType.DATE && inputType !== InputType.DATETIME_LOCAL && inputType !== InputType.NUMBER && inputType !== InputType.EMAIL) {
-                        const caret = e.target.selectionStart;
-                        const element = e.target;
-                        window.requestAnimationFrame(() => {
-                            element.selectionStart = caret;
-                            element.selectionEnd = caret;
+                    if (inputType !== InputType.DATE &&
+                        inputType !== InputType.DATETIME_LOCAL &&
+                        inputType !== InputType.NUMBER &&
+                        inputType !== InputType.EMAIL) {
+                        var caret_1 = e.target.selectionStart;
+                        var element_1 = e.target;
+                        window.requestAnimationFrame(function () {
+                            element_1.selectionStart = caret_1;
+                            element_1.selectionEnd = caret_1;
                         });
                     }
                     // ---------------------------------------
@@ -262,113 +172,34 @@ const Input = ({ forceControl, className, disabled, onChange, onKeyPress, onKeyU
                             inputName: e.target.name,
                             inputValue: e.target.value,
                             inputSelectionStart: e.target.selectionStart,
+                            target: e.target,
+                            event: e,
                         });
                     }
-                    if (type === 'password' && securityGauge) {
-                        handleVerifyPwd(e.target.value);
-                    }
-                }, onFocus: (e) => {
+                }, onFocus: function (e) {
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                     setIsFocused(true);
-                }, onBlur: (e) => {
+                }, onBlur: function (e) {
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
                     setIsFocused(false);
-                }, onMouseEnter: (e) => {
-                    onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
-                    setIsHovered(true);
-                }, onMouseLeave: (e) => {
-                    onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
-                    setIsHovered(false);
-                }, placeholder: placeholder }),
-            hasPlaceholder && !search && React.createElement("label", null, placeholder),
-            hasIcon && localStatus && !customIcon && !loading && !customIconLeft && !customIconRight && (React.createElement("div", { onClick: () => {
-                    if (onIconClick) {
-                        onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value });
-                    }
-                } },
-                React.createElement(Icon, { className: iconClassname, name: inputIcon.get(localStatus), size: IconSize.SMALL }))),
-            customIcon && !localStatus && !loading && (React.createElement("div", { onClick: () => {
-                    if (onIconClick) {
-                        onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value });
-                    }
-                } },
-                React.createElement(Icon, { className: iconClassname, name: customIcon, size: IconSize.SMALL }))),
-            customIconLeft && !loading && (React.createElement("div", { onClick: () => {
-                    if (onIconClick) {
-                        onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value });
-                    }
-                } },
-                React.createElement(Icon, { className: clsx(customIconLeft && 'icon-left', iconClassname), name: customIconLeft, size: IconSize.SMALL }))),
-            customIconRight && !loading && type !== 'password' && (React.createElement("div", { onClick: () => {
-                    if (onIconClick) {
-                        onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value });
-                    }
-                } },
-                React.createElement(Icon, { className: clsx(customIconRight && 'icon-right', iconClassname), name: customIconRight, size: IconSize.SMALL }))),
-            !loading && type === 'password' && (React.createElement("div", { "data-show-pwd": true, onClick: () => {
-                    if (inputType === 'password') {
-                        setInputType('text');
+                } })),
+            hasIcon && !localStatus && !loading && iconNameLeft && React.createElement(IconWrapper, { name: iconNameLeft }),
+            (iconNameLeft || type === InputType.SEARCH) && (React.createElement(IconWrapper, { className: 'icon-left', name: iconNameLeft || IconName.SEARCH })),
+            iconNameRight && !loading && type !== InputType.PASSWORD && (React.createElement(IconWrapper, { className: 'icon-right', name: iconNameRight })),
+            !loading && type === InputType.PASSWORD && (React.createElement(IconWrapper, { showPassword: true, srOnly: !isShowPwd ? translation.showPassword : translation.hidePassword, className: 'icon-right', name: isShowPwd ? IconName.EYE_SLASH : IconName.EYE, onPress: function () {
+                    if (inputType === InputType.PASSWORD) {
+                        setInputType(InputType.TEXT);
                         setIsShowPwd(true);
                     }
                     else {
-                        setInputType('password');
+                        setInputType(InputType.PASSWORD);
                         setIsShowPwd(false);
                     }
-                    if (onIconClick) {
-                        onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value });
-                    }
-                } },
-                React.createElement(Icon, { className: clsx('icon-right', iconClassname), name: isShowPwd ? 'tri-eye-slash' : 'tri-eye', size: IconSize.SMALL }))),
-            customIcon && localStatus && !loading && (React.createElement("div", { onClick: () => {
-                    if (onIconClick) {
-                        onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value });
-                    }
-                } },
-                React.createElement(Icon, { className: iconClassname, name: customIcon, size: IconSize.SMALL }))),
-            search && !customIcon && localStatus === 'default' && !loading && (React.createElement("div", { onClick: () => {
-                    if (onIconClick) {
-                        onIconClick({ inputName: name !== null && name !== void 0 ? name : '', inputValue: _value });
-                    }
-                } },
-                React.createElement(Icon, { color: IconColor.TERTIARY, className: iconClassname, name: IconName.SEARCH, size: IconSize.SMALL }),
-                _value && _value.length > 0 && (React.createElement(Icon, { onClick: () => setValue(''), className: hashClass(styled, clsx(is('justified-self'))), name: IconName.TIMES_CIRCLE, size: IconSize.SMALL })))),
-            loading && React.createElement("span", { className: hashClass(styled, clsx(is('searching'))) })),
-        help && React.createElement(Text, { className: helpClasses }, help),
-        securityGauge && type === 'password' && (React.createElement("div", { "data-testid": 'security-gauge', className: hashClass(styled, clsx('security-gauge-container')) },
-            React.createElement("div", { className: hashClass(styled, clsx('security-gauge')) },
-                React.createElement("div", { "data-gauge": true, style: { width: widthGauge, backgroundColor: colorGauge }, className: hashClass(styled, clsx('gauge')) })),
-            React.createElement("div", { className: hashClass(styled, clsx('security-gauge-verifies')) },
-                React.createElement("div", null,
-                    validationRules && validationRules.length && (React.createElement("div", { "data-security-length": true, className: hashClass(styled, clsx('security security-length')) },
-                        React.createElement("span", { "data-icon-securities": true, className: iconClasse },
-                            React.createElement("i", { ref: refLengthVerify, className: iconTimesClasse, "data-length-min": validationRules.length.min, "data-length-max": validationRules.length.max })),
-                        React.createElement("span", null,
-                            validationRules.length.min &&
-                                validationRules.length.max &&
-                                `Entre ${validationRules.length.min} et ${validationRules.length.max} caractères`,
-                            validationRules.length.min &&
-                                !validationRules.length.max &&
-                                `Minimum ${validationRules.length.min} caractères`,
-                            validationRules.length.max &&
-                                !validationRules.length.min &&
-                                `Maximum ${validationRules.length.max} caractères`))),
-                    validationRules && validationRules.specialChars && (React.createElement("div", { "data-security-special-chars": true, className: hashClass(styled, clsx('security security-special-chars')) },
-                        React.createElement("span", { "data-icon-securities": true, className: iconClasse },
-                            React.createElement("i", { ref: refSpecialCharsVerify, className: iconTimesClasse })),
-                        React.createElement("span", null, "Caract\u00E8res sp\u00E9ciaux"))),
-                    validationRules && validationRules.number && (React.createElement("div", { "data-security-number": true, className: hashClass(styled, clsx('security security-number')) },
-                        React.createElement("span", { "data-icon-securities": true, className: iconClasse },
-                            React.createElement("i", { ref: refNumberVerify, className: iconTimesClasse })),
-                        React.createElement("span", null, "Chiffre")))),
-                React.createElement("div", null,
-                    validationRules && validationRules.uppercase && (React.createElement("div", { "data-security-uppercase": true, className: hashClass(styled, clsx('security security-uppercase')) },
-                        React.createElement("span", { "data-icon-securities": true, className: iconClasse },
-                            React.createElement("i", { ref: refUppercaseVerify, className: iconTimesClasse })),
-                        React.createElement("span", null, "Majuscule"))),
-                    validationRules && validationRules.lowercase && (React.createElement("div", { "data-security-lowercase": true, className: hashClass(styled, clsx('security security-lowercase')) },
-                        React.createElement("span", { "data-icon-securities": true, className: iconClasse },
-                            React.createElement("i", { ref: refLowerercaseVerify, className: iconTimesClasse })),
-                        React.createElement("span", null, "Minuscule")))))))));
-};
+                } })),
+            loading && React.createElement("span", { className: loader })),
+        help && (React.createElement(Text, { className: helpClasses, id: idHelp }, help)),
+        securityGauge && type === InputType.PASSWORD && (React.createElement(InputGauge, { validationRules: validationRules, securityRules: securityRules, styled: styled, inputValue: _value }))));
+});
+Input.displayName = ComponentName.Input;
 export default Input;
-//# sourceMappingURL=Input.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2lucHV0L0lucHV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxXQUFXLE1BQU0sK0JBQStCLENBQUE7QUFDdkQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3RFLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLHVCQUF1QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUNqRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFBO0FBQ3pDLE9BQU8sRUFBaUIsZUFBZSxFQUFFLE1BQU0sZUFBZSxDQUFBO0FBQzlELE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sZ0JBQWdCLENBQUE7QUFDeEMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3RELE9BQU8sRUFBRSxJQUFJLEVBQWEsUUFBUSxFQUFrQixRQUFRLEVBQUUsTUFBTSxTQUFTLENBQUE7QUFDN0UsT0FBTyxFQUFFLFdBQVcsRUFBcUIsU0FBUyxFQUFtQixNQUFNLGFBQWEsQ0FBQTtBQUV4RixPQUFPLFVBQVUsTUFBTSxvQkFBb0IsQ0FBQTtBQWMzQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F5Q0c7QUFDSCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM1QixVQUNFLEVBeUNDLEVBQ0QsR0FBRzs7SUF6Q0QsSUFBQSxZQUFZLGtCQUFBLEVBQ1osS0FBSyxXQUFBLEVBQ0wsTUFBTSxZQUFBLEVBQ04sU0FBUyxlQUFBLEVBQ1QsVUFBa0IsRUFBbEIsRUFB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

package/lib/components/input/Input.native.d.ts

@@ -1,11 +1,13 @@
-/// <reference types="react" />
+import React from 'react';
+import { TextInput } from 'react-native';
 import { InputNativeEvents, InputProps } from './InputProps';
-import { ComponentName } from '../enumsComponentsName';
-interface InputNativeProps extends InputProps, InputNativeEvents {
+export interface InputNativeProps extends InputProps, InputNativeEvents {
 }
 /**
  * Input Native Component
  * @param name {string} Input name
+ * @param label {string} Label for input
+ * @param sample {string} Sample for input (below label)
  * @param disabled {boolean} Disabled input
  * @param onChange {Function} OnChange Input Event
  * @param onFocus {Function} OnFocus Input Event
@@ -15,7 +17,6 @@ interface InputNativeProps extends InputProps, InputNativeEvents {
  * @param defaultValue {string} Default Value for Input
  * @param status {InputStatus} Input with status - (SUCCESS|WARNING|ERROR|DEFAULT)
  * @param help {string} Help for input
- * @param search {boolean} define if input is a search type
  * @param hasIcon {boolean} Input Has Icon, Precise IconName with customIcon
  * @param ref Pass a ref for input
  * @param customIcon {IconName} Adding if you want custom icon
@@ -32,9 +33,7 @@ interface InputNativeProps extends InputProps, InputNativeEvents {
  * @param testId {string} Test Id for Test Integration
  * @param required {boolean} Required input
  * @param accessibilityActivate {boolean}
+ * @param readOnly {boolean} Read only input
  */
-declare const Input: {
-    ({ defaultValue, name, onChange, onFocus, onBlur, disabled, status, help, placeholder, type, hasIcon, customIcon, search, reference, keyboardStyle, autoCapitalize, autoCorrect, autoCompleteType, textContentType, keyboardType, keyType, onSubmit, maxLength, testId, accessibilityLabel, customIconRight, customIconLeft, securityGauge, validationRules, onIconClick, required, ...others }: InputNativeProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Input: React.ForwardRefExoticComponent<InputNativeProps & React.RefAttributes<TextInput>>;
 export default Input;