react-validate-component 0.1.1 → 0.1.3

package/src/vText/index.tsx

@@ -0,0 +1,93 @@
+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,
+  props = {},
+}: VTEXT_PARAMS) {
+  switch (vType) {
+    case 'outer':
+      return (
+        <div
+          className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}
+        >
+          <input
+            type="text"
+            {...props}
+            defaultValue={props?.defaultValue ?? ''}
+            className={`${props?.className} ${
+              vState ? vClassName || styles.invalid : ''
+            }`}
+          ></input>
+          {vState && vShowMessage ? (
+            <p
+              className={`${vMessageClass} ${
+                vIsAnimate ? styles.animateMessage : ''
+              }`}
+            >
+              {vMessage}
+            </p>
+          ) : null}
+        </div>
+      );
+    case 'inner':
+      return (
+        <div className={styles.vinput}>
+          <input
+            type="text"
+            {...props}
+            defaultValue={props?.defaultValue ?? ''}
+            className={`${props?.className} ${
+              vState ? vClassName || styles.invalid : ''
+            }`}
+          ></input>
+          {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}`]
+          }`}
+        >
+          <input
+            type="text"
+            {...props}
+            defaultValue={props?.defaultValue ?? ''}
+            className={`${props?.className} ${
+              vState ? vClassName || styles.invalid : ''
+            }`}
+          ></input>
+          {vState && vShowMessage ? (
+            <p
+              className={`${vMessageClass} ${styles.tooltipMessage} ${
+                styles[`tooltipMessage-${vLocateMessage}`]
+              } ${vIsAnimate ? styles.animateMessage : ''}`}
+            >
+              {vMessage}
+            </p>
+          ) : null}
+        </div>
+      );
+    default:
+      return <div></div>;
+  }
+}

package/src/{types/vinput.ts → vText/vText.ts}

@@ -1,12 +1,13 @@
-import propsType from './vprops';
+import propsType from '../types/vprops';
 
 // VText 파라미터
 export interface VTEXT_PARAMS {
   readonly vState: boolean; // 유효성 상태 값
+  readonly vType: // 유효성 메시지를 출력할 타입
+  'inner' | 'outer' | 'tooltip';
   vClassName?: string; // 유효성 입힐 class 명
   readonly vShowMessage: boolean; // 유효성 메시지 출력할지
   vMessage?: string; // 유효성 메시지
-  vIsInnerMessage?: boolean; // 유효성 메시지를 element 안에 넣을지 (absolute)
   vLocateMessage?: // 유효성 메시지를 element 어디에 붙일지
   | 'top-left'
     | 'top'

package/src/vURL/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function vURL() {
+  return <input type="url" />;
+}

package/src/index.module.css

@@ -1,103 +0,0 @@
-.invalid {
-  border: 2px solid red;
-}
-
-/* 유효성 메시지 locate */
-.vinput {
-  display: flex;
-}
-.vinput-top-left {
-  flex-direction: column-reverse;
-  align-items: flex-start;
-  justify-content: center;
-}
-.vinput-top {
-  flex-direction: column-reverse;
-  align-items: center;
-  justify-content: center;
-}
-.vinput-top-right {
-  flex-direction: column-reverse;
-  align-items: flex-end;
-  justify-content: center;
-}
-.vinput-center-left {
-  flex-direction: row-reverse;
-  align-items: center;
-  justify-content: center;
-}
-.vinput-center-right {
-  align-items: center;
-  justify-content: center;
-}
-.vinput-bottom-left {
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-}
-.vinput-bottom {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.vinput-bottom-right {
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: center;
-}
-.innerMessage {
-  position: absolute;
-  font-size: 12px;
-  margin: 0;
-  padding: 2px 5px;
-  display: flex;
-}
-.innerMessage-top-left {
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.innerMessage-top {
-  align-items: flex-start;
-  justify-content: center;
-}
-.innerMessage-top-right {
-  align-items: flex-start;
-  justify-content: flex-end;
-}
-.innerMessage-center-left {
-  align-items: center;
-  justify-content: flex-start;
-}
-.innerMessage-center {
-  align-items: center;
-  justify-content: center;
-}
-.innerMessage-center-right {
-  align-items: center;
-  justify-content: flex-end;
-}
-.innerMessage-bottom-left {
-  align-items: flex-end;
-  justify-content: flex-start;
-}
-.innerMessage-bottom {
-  align-items: flex-end;
-  justify-content: center;
-}
-.innerMessage-bottom-right {
-  align-items: flex-end;
-  justify-content: flex-end;
-}
-
-.animateMessage {
-  animation: fade-in 1s ease-in-out;
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}

package/src/index.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import styles from './index.module.css';
-import { VTEXT_PARAMS } from './types/vinput';
-
-// Text
-export const VText = ({
-  vState = false,
-  vClassName = '',
-  vShowMessage = false,
-  vMessage = '',
-  vIsInnerMessage = false,
-  vLocateMessage = 'bottom',
-  vMessageClass = '',
-  vIsAnimate = false,
-  props = {},
-}: VTEXT_PARAMS) => {
-  const Result: JSX.Element = (
-    <div className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}>
-      <input
-        type="text"
-        {...props}
-        defaultValue={props?.defaultValue ?? ''}
-        className={`${props?.className} ${
-          vState ? vClassName || styles.invalid : ''
-        }`}
-      ></input>
-      {vState && vShowMessage ? (
-        <p
-          className={`${vMessageClass} ${
-            vIsInnerMessage
-              ? `${props?.className} ${styles.innerMessage} ${
-                  styles[`innerMessage-${vLocateMessage}`]
-                }`
-              : ''
-          } ${vIsAnimate ? styles.animateMessage : ''}`}
-        >
-          {vMessage}
-        </p>
-      ) : null}
-    </div>
-  );
-
-  return Result;
-};
-
-// Checkbox
-export const VCheckbox = () => {
-  return <input type="checkbox" />;
-};
-
-// Radio
-export const VRadio = () => {
-  return <input type="radio" />;
-};
-
-// Date
-export const VDate = () => {
-  return <input type="date" />;
-};
-
-// Color
-export const VColor = () => {
-  return <input type="color" />;
-};
-
-// Email
-export const VEmail = () => {
-  return <input type="email" />;
-};
-
-// Range
-export const VRange = () => {
-  return <input type="range" />;
-};
-
-// Url
-export const VUrl = () => {
-  return <input type="url" />;
-};