react-validate-component 1.1.0 → 1.1.2

package/src/index.module.css

@@ -1,5 +1,5 @@
 .invalid {
-  border: 2px solid red;
+  border: 1px solid red;
   outline: none;
 }
 .invalid:focus,
@@ -26,6 +26,7 @@
 /* vType === 'outer' */
 .vinput {
   display: flex;
+  width: fit-content;
 }
 .vinput-top-left {
   flex-direction: column-reverse;
@@ -113,13 +114,16 @@
 }
 
 /* vType === 'tooltip' */
+* {
+  --tooltip-default-color: #333;
+}
 .tooltipMessage {
   position: absolute;
   margin: 0;
   padding: 10px 20px;
   border: 1px solid transparent;
   border-radius: 10px;
-  background-color: black;
+  background-color: var(--tooltip-default-color);
 }
 p[class*='tooltipMessage-top'] {
   transform: translateY(calc(-100% - 10px));
@@ -129,15 +133,15 @@ p[class*='tooltipMessage-top']::after {
   position: absolute;
   bottom: 0;
   border: 10px solid transparent;
-  border-top-color: black;
+  border-top-color: var(--tooltip-default-color);
   border-bottom: 0;
-  margin-bottom: -11px;
+  margin-bottom: -10px;
 }
 .vinput.tooltipMessage-top-left {
   justify-content: flex-start;
 }
 p.tooltipMessage-top-left::after {
-  left: 3%;
+  left: 10%;
 }
 .vinput.tooltipMessage-top {
   justify-content: center;
@@ -149,7 +153,7 @@ p.tooltipMessage-top::after {
   justify-content: flex-end;
 }
 p.tooltipMessage-top-right::after {
-  left: 87%;
+  left: 80%;
 }
 p[class*='tooltipMessage-center'] {
   /* transform: translateY(calc(-100% - 10px)); */
@@ -166,8 +170,8 @@ p.tooltipMessage-center-right {
   transform: translateX(calc(100% + 10px));
 }
 p.tooltipMessage-center-right::after {
-  border-right-color: black;
-  left: -10%;
+  border-right-color: var(--tooltip-default-color);
+  left: -15%;
 }
 .vinput.tooltipMessage-center-left {
   justify-content: flex-start;
@@ -176,7 +180,7 @@ p.tooltipMessage-center-left {
   transform: translateX(calc(-100% - 10px));
 }
 p.tooltipMessage-center-left::after {
-  border-left-color: black;
+  border-left-color: var(--tooltip-default-color);
   left: 100%;
 }
 
@@ -188,7 +192,7 @@ p[class*='tooltipMessage-bottom']::after {
   position: absolute;
   top: 0;
   border: 10px solid transparent;
-  border-bottom-color: black;
+  border-bottom-color: var(--tooltip-default-color);
   border-top: 0;
   margin-top: -11px;
 }
@@ -196,7 +200,7 @@ p[class*='tooltipMessage-bottom']::after {
   justify-content: flex-start;
 }
 p.tooltipMessage-bottom-left::after {
-  left: 3%;
+  left: 10%;
 }
 .vinput.tooltipMessage-bottom {
   justify-content: center;
@@ -208,7 +212,7 @@ p.tooltipMessage-bottom::after {
   justify-content: flex-end;
 }
 p.tooltipMessage-bottom-right::after {
-  left: 87%;
+  left: 80%;
 }
 
 .animateMessage {

package/src/vCheckbox/index.tsx

@@ -46,6 +46,7 @@ export function VCheckbox({
   }
 
   switch (vType) {
+    default:
     case 'top':
       return (
         <div>
@@ -76,7 +77,5 @@ export function VCheckbox({
           ) : null}
         </div>
       );
-    default:
-      return <></>;
   }
 }

package/src/vColor/index.tsx

@@ -13,6 +13,7 @@ export function VColor({
   props = {},
 }: VCOLOR_PARAMS) {
   switch (vType) {
+    default:
     case 'top':
       return (
         <>
@@ -47,7 +48,5 @@ export function VColor({
           ) : null}
         </>
       );
-    default:
-      return <></>;
   }
 }

package/src/vDate/index.tsx

@@ -13,6 +13,7 @@ export function VDate({
   props = {},
 }: VDATE_PARAMS) {
   switch (vType) {
+    default:
     case 'top':
       return (
         <>
@@ -47,7 +48,5 @@ export function VDate({
           ) : null}
         </>
       );
-    default:
-      return <></>;
   }
 }

package/src/vEmail/index.tsx

@@ -14,6 +14,7 @@ export function VEmail({
   props = {},
 }: VEMAIL_PARAMS) {
   switch (vType) {
+    default:
     case 'outer':
       return (
         <div
@@ -86,7 +87,5 @@ export function VEmail({
           ) : null}
         </div>
       );
-    default:
-      return <div></div>;
   }
 }

package/src/vRadio/index.tsx

@@ -38,6 +38,7 @@ export function VRadio({
   }
 
   switch (vType) {
+    default:
     case 'bottom':
       return (
         <>
@@ -103,7 +104,5 @@ export function VRadio({
           ) : null}
         </>
       );
-    default:
-      return <div></div>;
   }
 }

package/src/vRange/index.tsx

@@ -13,6 +13,7 @@ export function VRange({
   props = {},
 }: VRANGE_PARAMS) {
   switch (vType) {
+    default:
     case 'top':
       return (
         <>
@@ -47,7 +48,5 @@ export function VRange({
           ) : null}
         </>
       );
-    default:
-      return <></>;
   }
 }

package/src/vText/index.tsx

@@ -1,134 +1,131 @@
-import React from 'react';
-import styles from '../index.module.css';
-import { VTEXT_PARAMS } from './vText';
-
-// Text
-export function VText({
-  vState = false,
-  vType = 'outer',
-  vClassName = '',
-  vShowMessage = false,
-  vMessage = '',
-  vLocateMessage = 'bottom',
-  vMessageClass = '',
-  vIsAnimate = false,
-  vUseMaxLength = false,
-  vMaxLength = 0,
-  vClassMaxLength = '',
-  props = {},
-}: VTEXT_PARAMS) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const [inputLength, setInputLength] = React.useState<number>(
-    (props?.defaultValue || props?.value)?.length ?? 0
-  );
-
-  // 공통 input 태그 변수화
-  const inputHTML = (
-    <input
-      type="text"
-      ref={inputRef}
-      {...props}
-      onChange={e => {
-        if (vUseMaxLength && e.target.value.length > vMaxLength) {
-          e.preventDefault();
-          e.target.value = e.target.value.slice(0, vMaxLength);
-        } else {
-          props?.onChange(e);
-        }
-      }}
-      defaultValue={props?.defaultValue ?? ''}
-      className={`${props?.className ?? ''} ${vClassName} ${
-        vState ? styles.invalid : ''
-      }`}
-    ></input>
-  );
-
-  // 일부 옵션 값들은 input 기본 속성값을 이용하기 위해 merge 진행
-  if (vUseMaxLength) {
-    props = { ...props, maxLength: vMaxLength };
-  }
-
-  React.useEffect(() => {
-    // 입력 최댓값을 사용할 경우 useEffect Hook 설정
-    if (vUseMaxLength) {
-      setInputLength((inputRef.current?.value ?? '').length);
-    }
-  }, [inputRef.current?.value]);
-
-  switch (vType) {
-    case 'outer':
-      return (
-        <div
-          className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]} ${
-            vUseMaxLength ? styles.vMaxLengthContainer : ''
-          }`}
-        >
-          {inputHTML}
-          {vUseMaxLength && (
-            <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
-              {inputLength} / {vMaxLength}
-            </p>
-          )}
-          {vState && vShowMessage ? (
-            <p
-              className={`${vMessageClass} ${
-                vIsAnimate ? styles.animateMessage : ''
-              }`}
-            >
-              {vMessage}
-            </p>
-          ) : null}
-        </div>
-      );
-    case 'inner':
-      return (
-        <div
-          className={`${styles.vinput} ${
-            vUseMaxLength ? styles.vMaxLengthContainer : ''
-          }`}
-        >
-          {inputHTML}
-          {vUseMaxLength && (
-            <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
-              {inputLength} / {vMaxLength}
-            </p>
-          )}
-          {vState && vShowMessage ? (
-            <p
-              className={`${vMessageClass} ${styles.innerMessage} ${
-                styles[`innerMessage-${vLocateMessage}`]
-              } ${vIsAnimate ? styles.animateMessage : ''}`}
-            >
-              {vMessage}
-            </p>
-          ) : null}
-        </div>
-      );
-    case 'tooltip':
-      return (
-        <div
-          className={`${styles.vinput} ${
-            styles[`tooltipMessage-${vLocateMessage}`]
-          } ${vUseMaxLength ? styles.vMaxLengthContainer : ''}`}
-        >
-          {inputHTML}
-          {vUseMaxLength && (
-            <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
-              {inputLength} / {vMaxLength}
-            </p>
-          )}
-          {vState && vShowMessage ? (
-            <p
-              className={`${vMessageClass} ${styles.tooltipMessage} ${
-                styles[`tooltipMessage-${vLocateMessage}`]
-              } ${vIsAnimate ? styles.animateMessage : ''}`}
-            >
-              {vMessage}
-            </p>
-          ) : null}
-        </div>
-      );
-    default:
-      return <div></div>;
-  }
-}
+import React from 'react';
+import styles from '../index.module.css';
+import { VTEXT_PARAMS } from './vText';
+
+// Text
+export function VText({
+  vState = false,
+  vType = 'outer',
+  vClassName = '',
+  vShowMessage = false,
+  vMessage = '',
+  vLocateMessage = 'bottom',
+  vMessageClass = '',
+  vIsAnimate = false,
+  vUseMaxLength = false,
+  vMaxLength = 0,
+  vClassMaxLength = '',
+  props = {},
+}: VTEXT_PARAMS) {
+  const [inputLength, setInputLength] = React.useState<number>(
+    (props?.defaultValue || props?.value)?.length ?? 0
+  );
+
+  // 공통 input 태그 변수화
+  const inputHTML = () => {
+    return (
+      <input
+        type="text"
+        {...props}
+        onChange={e => {
+          if (vUseMaxLength && e.target.value.length > vMaxLength) {
+            e.preventDefault();
+            e.target.value = e.target.value.slice(0, vMaxLength);
+          } else {
+            props?.onChange(e);
+            if (vUseMaxLength) {
+              setInputLength(e.target.value.length);
+            }
+          }
+        }}
+        defaultValue={props?.defaultValue ?? ''}
+        className={`${props?.className ?? ''} ${vClassName} ${
+          vState ? styles.invalid : ''
+        }`}
+      ></input>
+    );
+  };
+
+  // 일부 옵션 값들은 input 기본 속성값을 이용하기 위해 merge 진행
+  if (vUseMaxLength) {
+    props = { ...props, maxLength: vMaxLength };
+  }
+
+  switch (vType) {
+    default:
+    case 'outer':
+      return (
+        <div
+          className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]} ${
+            vUseMaxLength ? styles.vMaxLengthContainer : ''
+          }`}
+        >
+          <div style={{ position: 'relative' }}>
+            {inputHTML()}
+            {vUseMaxLength && (
+              <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
+                {inputLength} / {vMaxLength}
+              </p>
+            )}
+          </div>
+          {vState && vShowMessage ? (
+            <p
+              className={`${vMessageClass} ${
+                vIsAnimate ? styles.animateMessage : ''
+              }`}
+            >
+              {vMessage}
+            </p>
+          ) : null}
+        </div>
+      );
+    case 'inner':
+      return (
+        <div
+          className={`${styles.vinput} ${
+            vUseMaxLength ? styles.vMaxLengthContainer : ''
+          }`}
+        >
+          {inputHTML()}
+          {vUseMaxLength && (
+            <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
+              {inputLength} / {vMaxLength}
+            </p>
+          )}
+          {vState && vShowMessage ? (
+            <p
+              className={`${vMessageClass} ${styles.innerMessage} ${
+                styles[`innerMessage-${vLocateMessage}`]
+              } ${vIsAnimate ? styles.animateMessage : ''}`}
+            >
+              {vMessage}
+            </p>
+          ) : null}
+        </div>
+      );
+    case 'tooltip':
+      return (
+        <div
+          className={`${styles.vinput} ${
+            styles[`tooltipMessage-${vLocateMessage}`]
+          } ${vUseMaxLength ? styles.vMaxLengthContainer : ''}`}
+        >
+          {inputHTML()}
+          {vUseMaxLength && (
+            <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
+              {inputLength} / {vMaxLength}
+            </p>
+          )}
+          {vState && vShowMessage ? (
+            <p
+              className={`${vMessageClass} ${styles.tooltipMessage} ${
+                styles[`tooltipMessage-${vLocateMessage}`]
+              } ${vIsAnimate ? styles.animateMessage : ''}`}
+            >
+              {vMessage}
+            </p>
+          ) : null}
+        </div>
+      );
+  }
+}

package/src/vURL/index.tsx

@@ -14,6 +14,7 @@ export function VURL({
   props = {},
 }: VURL_PARAMS) {
   switch (vType) {
+    default:
     case 'outer':
       return (
         <div
@@ -86,7 +87,5 @@ export function VURL({
           ) : null}
         </div>
       );
-    default:
-      return <div></div>;
   }
 }