@xaypay/tui 0.1.0 → 0.1.1

package/dist/index.es.js

@@ -2727,8 +2727,8 @@ const Modal = ({
       height: height ?? merge.MODAL.height,
       gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
       borderRadius: radius ?? merge.MODAL.radius,
-      maxWidth: mMaxWidth ?? merge.MODAL.mMaxWidth,
-      maxHeight: mMaxHeight ?? merge.MODAL.mMaxHeight,
+      maxWidth: mMaxWidth ?? merge.MODAL.maxWidth,
+      maxHeight: mMaxHeight ?? merge.MODAL.maxHeight,
       minWidth: type === 'content' ? minWidth ?? merge.MODAL.minWidth : '',
       backgroundColor: backgroundColor ?? merge.MODAL.colors.background,
       minHeight: type === 'content' ? minHeight ?? merge.MODAL.minHeight : ''
@@ -2993,7 +2993,6 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
-  telErrorMessage,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
@@ -3029,10 +3028,10 @@ const Input = ({
   const handleCheckTypeTel = (val, prevVal) => {
     if (type === 'tel') {
       if (!phoneNumberRegex.test(val)) {
-        if (val === '') {
-          setInnerErrorMessage('');
-        } else {
-          telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(merge.INPUT.error.telMessage);
+        if (errorMessage) {
+          setInnerErrorMessage(errorMessage);
+        }
+        if (val !== '') {
           val = prevVal;
         }
       } else {
@@ -3168,7 +3167,7 @@ const Input = ({
       }
     }
     setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
+  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -3340,7 +3339,6 @@ Input.propTypes = {
   boxShadowHover: PropTypes.string,
   errorClassName: PropTypes.string,
   labelFontFamily: PropTypes.string,
-  telErrorMessage: PropTypes.string,
   backgroundColor: PropTypes.string,
   phoneAlignItems: PropTypes.string,
   errorLineHeight: PropTypes.string,
@@ -4824,22 +4822,21 @@ const Textarea = ({
     }
   };
   useEffect(() => {
-    if (value === undefined) {
-      alert('Please add value prop on Textarea component');
-    }
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
+  }, [onChange]);
+  useEffect(() => {
+    if (value === undefined) {
+      alert('Please add value prop on Textarea component');
+    }
     if (errorMessage) {
-      setError(errorMessage);
+      value === '' ? setError(errorMessage) : setError('');
     } else {
       setError('');
     }
-    if (value === '') {
-      setError('');
-    }
     setInnerValue(value);
-  }, [value, onChange, errorMessage]);
+  }, [value, errorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: width ?? merge.TEXTAREA.width
@@ -4911,7 +4908,7 @@ const Textarea = ({
   }, /*#__PURE__*/React__default.createElement("span", {
     style: {
       display: 'inline-block',
-      color: errorColor ?? merge.TEXTAREA.error.font.color,
+      color: errorColor ?? merge.TEXTAREA.error.color,
       fontSize: errorSize ?? merge.TEXTAREA.error.font.size,
       fontStyle: errorStyle ?? merge.TEXTAREA.error.font.style,
       fontWeight: errorWeight ?? merge.TEXTAREA.error.font.weight,

package/dist/index.js

@@ -2757,8 +2757,8 @@ const Modal = ({
       height: height ?? merge.MODAL.height,
       gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
       borderRadius: radius ?? merge.MODAL.radius,
-      maxWidth: mMaxWidth ?? merge.MODAL.mMaxWidth,
-      maxHeight: mMaxHeight ?? merge.MODAL.mMaxHeight,
+      maxWidth: mMaxWidth ?? merge.MODAL.maxWidth,
+      maxHeight: mMaxHeight ?? merge.MODAL.maxHeight,
       minWidth: type === 'content' ? minWidth ?? merge.MODAL.minWidth : '',
       backgroundColor: backgroundColor ?? merge.MODAL.colors.background,
       minHeight: type === 'content' ? minHeight ?? merge.MODAL.minHeight : ''
@@ -3023,7 +3023,6 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
-  telErrorMessage,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
@@ -3059,10 +3058,10 @@ const Input = ({
   const handleCheckTypeTel = (val, prevVal) => {
     if (type === 'tel') {
       if (!phoneNumberRegex.test(val)) {
-        if (val === '') {
-          setInnerErrorMessage('');
-        } else {
-          telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(merge.INPUT.error.telMessage);
+        if (errorMessage) {
+          setInnerErrorMessage(errorMessage);
+        }
+        if (val !== '') {
           val = prevVal;
         }
       } else {
@@ -3198,7 +3197,7 @@ const Input = ({
       }
     }
     setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
+  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -3370,7 +3369,6 @@ Input.propTypes = {
   boxShadowHover: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
-  telErrorMessage: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   phoneAlignItems: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
@@ -4854,22 +4852,21 @@ const Textarea = ({
     }
   };
   React.useEffect(() => {
-    if (value === undefined) {
-      alert('Please add value prop on Textarea component');
-    }
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
+  }, [onChange]);
+  React.useEffect(() => {
+    if (value === undefined) {
+      alert('Please add value prop on Textarea component');
+    }
     if (errorMessage) {
-      setError(errorMessage);
+      value === '' ? setError(errorMessage) : setError('');
     } else {
       setError('');
     }
-    if (value === '') {
-      setError('');
-    }
     setInnerValue(value);
-  }, [value, onChange, errorMessage]);
+  }, [value, errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: width ?? merge.TEXTAREA.width
@@ -4941,7 +4938,7 @@ const Textarea = ({
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'inline-block',
-      color: errorColor ?? merge.TEXTAREA.error.font.color,
+      color: errorColor ?? merge.TEXTAREA.error.color,
       fontSize: errorSize ?? merge.TEXTAREA.error.font.size,
       fontStyle: errorStyle ?? merge.TEXTAREA.error.font.style,
       fontWeight: errorWeight ?? merge.TEXTAREA.error.font.weight,

package/package.json

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

package/tui.config.js

@@ -113,7 +113,6 @@ export default {
             marginTop: '10px',
             animation: false,
             transform: 'scale3d(0,0,0)',
-            telMessage: '',
             lineHeight: '19px',
             animationDuration: '240ms',