react-validate-component 0.8.1 → 1.1.0

package/src/vText/index.tsx

@@ -12,22 +12,63 @@ export function VText({
   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}`]}`}
+          className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]} ${
+            vUseMaxLength ? styles.vMaxLengthContainer : ''
+          }`}
         >
-          <input
-            type="text"
-            {...props}
-            defaultValue={props?.defaultValue ?? ''}
-            className={`${props?.className ?? ''} ${vClassName} ${
-              vState ? styles.invalid : ''
-            }`}
-          ></input>
+          {inputHTML}
+          {vUseMaxLength && (
+            <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
+              {inputLength} / {vMaxLength}
+            </p>
+          )}
           {vState && vShowMessage ? (
             <p
               className={`${vMessageClass} ${
@@ -41,15 +82,17 @@ export function VText({
       );
     case 'inner':
       return (
-        <div className={styles.vinput}>
-          <input
-            type="text"
-            {...props}
-            defaultValue={props?.defaultValue ?? ''}
-            className={`${props?.className ?? ''} ${vClassName} ${
-              vState ? styles.invalid : ''
-            }`}
-          ></input>
+        <div
+          className={`${styles.vinput} ${
+            vUseMaxLength ? styles.vMaxLengthContainer : ''
+          }`}
+        >
+          {inputHTML}
+          {vUseMaxLength && (
+            <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
+              {inputLength} / {vMaxLength}
+            </p>
+          )}
           {vState && vShowMessage ? (
             <p
               className={`${vMessageClass} ${styles.innerMessage} ${
@@ -66,16 +109,14 @@ export function VText({
         <div
           className={`${styles.vinput} ${
             styles[`tooltipMessage-${vLocateMessage}`]
-          }`}
+          } ${vUseMaxLength ? styles.vMaxLengthContainer : ''}`}
         >
-          <input
-            type="text"
-            {...props}
-            defaultValue={props?.defaultValue ?? ''}
-            className={`${props?.className ?? ''} ${vClassName} ${
-              vState ? styles.invalid : ''
-            }`}
-          ></input>
+          {inputHTML}
+          {vUseMaxLength && (
+            <p className={`${styles.vMaxLength} ${vClassMaxLength}`}>
+              {inputLength} / {vMaxLength}
+            </p>
+          )}
           {vState && vShowMessage ? (
             <p
               className={`${vMessageClass} ${styles.tooltipMessage} ${

package/src/vText/vText.ts

@@ -20,5 +20,8 @@ export interface VTEXT_PARAMS {
     | 'bottom-right';
   vMessageClass?: string; // 유효성 메시지에 입힐 class 명
   vIsAnimate?: boolean; // 유효성 메시지 출력 시 애니메이션 적용할지
+  vUseMaxLength?: boolean; // 입력 최댓값 표시 사용 여부
+  vMaxLength?: number; // 입력 최댓값
+  vClassMaxLength?: string; // 입력 최댓값 class 명
   props?: propsType; // 기타 옵션
 }