@xaypay/tui 0.0.91 → 0.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.91",
+  "version": "0.0.93",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/input/index.js

@@ -45,6 +45,7 @@ export const Input = ({
     errorSize,
     labelSize,
     maxLength,
+    floatToFix,
     minNumSize,
     maxNumSize,
     labelColor,
@@ -135,18 +136,37 @@ export const Input = ({
         }
 
         if (type === 'number') {
+            const regNum = /^\d+(\.)?(\d+)?$/;
+            if (!regNum.test(currentValue)) {
+                setInnerValue(prevValue);
+                if (change) {
+                    change(prevValue);
+                }
+            }
             if (minNumSize && currentValue < minNumSize) {
-                setInnerValue(minNumSize);
+                setInnerValue(`${minNumSize}`);
                 if (change) {
-                    change(minNumSize);
+                    change(`${minNumSize}`);
                 }
             }
             if (maxNumSize && currentValue > maxNumSize) {
-                setInnerValue(maxNumSize);
+                setInnerValue(`${maxNumSize}`);
                 if (change) {
-                    change(maxNumSize);
+                    change(`${maxNumSize}`);
                 }
             }
+            if (floatToFix && floatToFix > 0 && !Number.isInteger(parseFloat(currentValue))) {
+                const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
+                const int = floatNumParts[0];
+                const float = floatNumParts[1];
+                
+                if (float && float.length > floatToFix) {
+                    setInnerValue(`${int}.${float.substr(0, floatToFix)}`);
+                    if (change) {
+                        change(`${int}.${float.substr(0, floatToFix)}`);
+                    }
+                }   
+            }
             if (currentValue === '') {
                 setInnerValue('');
                 if (change) {
@@ -155,14 +175,14 @@ export const Input = ({
             }
         }
 
-        if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
+        if (maxLength && currentValue.length > maxLength && type !== 'tel') {
             setInnerValue(currentValue.substr(0, maxLength));
             if (change) {
                 change(currentValue.substr(0, maxLength));
             }
         }
 
-        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
+        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
             !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
             if (change) {
                 change(currentValue);
@@ -210,6 +230,46 @@ export const Input = ({
                     }
                 }
 
+                if (type === 'number') {
+                    const regNum = /^\d+(\.)?(\d+)?$/;
+                    if (!regNum.test(value)) {
+                        setInnerValue('');
+                        if (change) {
+                            change('');
+                        }
+                    }
+                    if (minNumSize && value < minNumSize) {
+                        setInnerValue(`${minNumSize}`);
+                        if (change) {
+                            change(`${minNumSize}`);
+                        }
+                    }
+                    if (maxNumSize && value > maxNumSize) {
+                        setInnerValue(`${maxNumSize}`);
+                        if (change) {
+                            change(`${maxNumSize}`);
+                        }
+                    }
+                    if (floatToFix && floatToFix > 0 && !Number.isInteger(parseFloat(value))) {
+                        const floatNumParts = typeof value === 'string' ? value.split('.') : value;
+                        const int = floatNumParts[0];
+                        const float = floatNumParts[1];
+                        
+                        if (float && float.length > floatToFix) {
+                            setInnerValue(`${int}.${float.substr(0, floatToFix)}`);
+                            if (change) {
+                                change(`${int}.${float.substr(0, floatToFix)}`);
+                            }
+                        }   
+                    }
+                    if (value === '') {
+                        setInnerValue('');
+                        if (change) {
+                            change('');
+                        }
+                    }
+                }
+
                 if (maxLength && value.length > maxLength && type !== 'tel') {
                     setInnerValue(value.substr(0, maxLength));
                 }
@@ -220,7 +280,7 @@ export const Input = ({
             }
         }
     }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
-    
+
     return (
         <div className={`${styles["input-wrap"]}`}>
             {
@@ -304,14 +364,14 @@ export const Input = ({
                     {...props}
                     value={innerValue}
                     className={classProps}
-                    onChange={handleChange}
-                    type={show ? 'text' : type}
+                    onInput={handleChange}
                     disabled={disabled ? disabled : ""}
                     name={name ? name : `tui_${random}_tui`}
                     placeholder={placeholder ? placeholder : ''}
-                    autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
+                    type={show || type === 'number' ? 'text' : type}
                     min={type === 'number' && minNumSize ? minNumSize: ''}
                     max={type === 'number' && maxNumSize ? maxNumSize : ''}
+                    autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
                     style={{
                         border: 'none',
                         outline: 'none',
@@ -401,6 +461,7 @@ Input.propTypes = {
     errorLeft: PropTypes.string,
     labelSize: PropTypes.string,
     maxLength: PropTypes.number,
+    floatToFix: PropTypes.number,
     minNumSize: PropTypes.number,
     maxNumSize: PropTypes.number,
     errorColor: PropTypes.string,

package/src/components/input/input.module.css

@@ -6,6 +6,7 @@
 .input-content {
     display: flex;
     width: 100%;
+    -webkit-appearance: none;
 }
 
 input:-webkit-autofill,

package/src/components/newAutocomplete/autocomplete.module.css

@@ -0,0 +1,3 @@
+.auto-complete {
+    -webkit-appearance: none;
+}

package/src/components/newAutocomplete/index.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import { keyframes, css } from 'styled-components';
 
 import { compereConfigs } from './../../utils';
+
+import styles from './autocomplete.module.css';
  
 export const NewAutocomplete = ({
     label,
@@ -320,6 +322,7 @@ export const NewAutocomplete = ({
                     onInput={handleChange}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
+                    className={styles['auto-complete']}
                     placeholder={placeHolder ? placeHolder : ''}
                     autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
                     style={{

package/src/components/select/select.module.css

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     position: relative;
+    -webkit-appearance: none;
 }
 
 .select-content-top {
@@ -10,6 +11,7 @@
     flex-wrap: nowrap;
     align-items: center;
     justify-content: space-between;
+    -webkit-appearance: none;
 }
 
 .select-content-bottom {

package/src/components/textarea/textarea.module.css

@@ -1,3 +1,7 @@
+textarea {
+    -webkit-appearance: none;
+}
+
 textarea::-webkit-scrollbar {
     width: 6px;
 }