@yakad/ui 1.2.79-beta → 1.2.81-beta

package/codeField/codeField.d.ts

@@ -3,6 +3,7 @@ interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
     length?: number;
     name?: string;
     type?: string;
+    size?: "small" | "medium" | "large";
 }
-declare function CodeField(props: CodeFieldsProps): JSX.Element;
+declare function CodeField(this: any, props: CodeFieldsProps): JSX.Element;
 export default CodeField;

package/codeField/codeField.js

@@ -1,10 +1,18 @@
 import React from "react";
 import { joinClassNames, joinStyles } from "@yakad/lib";
 import styles from "./codeField.module.css";
+function sliceOverLength(event, length) {
+    const targetInput = event.target;
+    const targetLength = targetInput.value.length;
+    if (targetLength > length)
+        targetInput.value = targetInput.value.slice(0, targetLength - 1);
+    targetInput.value = targetInput.value.replace(/[^0-9]+/, "");
+}
 function CodeField(props) {
-    const joinedClassNames = joinClassNames(styles.input, props.className);
+    const length = props.length ? props.length : 6;
+    const joinedClassNames = joinClassNames(styles.input, props.size ? styles[props.size] : styles.medium, props.className);
     const joinedStyles = joinStyles({ width: "calc(1.5ch * " + props.length + ")" }, props.style);
-    return (React.createElement("input", { ...props, name: props.name, type: props.type, minLength: props.length, maxLength: props.length, className: joinedClassNames, style: joinedStyles }));
+    return (React.createElement("input", { name: props.name, type: "number", minLength: length, maxLength: length, className: joinedClassNames, style: joinedStyles, onInput: (event) => sliceOverLength(event, length), autoComplete: "off", pattern: "[0-9]" }));
 }
 export default CodeField;
 //# sourceMappingURL=codeField.js.map

package/codeField/codeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeField.js","sourceRoot":"","sources":["codeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,SAAS,SAAS,CAAC,KAAsB;IACrC,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,EAC/C,KAAK,CAAC,KAAM,CACf,CAAC;IAEF,OAAO,CACH,kCACQ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,MAAM,EACvB,SAAS,EAAE,KAAK,CAAC,MAAM,EACvB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,GACrB,CACL,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"codeField.js","sourceRoot":"","sources":["codeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAS5C,SAAS,eAAe,CACpB,KAAwC,EACxC,MAAc;IAEd,MAAM,WAAW,GAAG,KAAK,CAAC,MAA0B,CAAC;IACrD,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC;IAC9C,IAAI,YAAY,GAAG,MAAM;QACrB,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;IAErE,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AACjE,CAAC;AAED,SAAS,SAAS,CAAY,KAAsB;IAChD,MAAM,MAAM,GAAW,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvD,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAC/C,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,EAC/C,KAAK,CAAC,KAAM,CACf,CAAC;IAEF,OAAO,CACH,+BACI,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAClD,YAAY,EAAC,KAAK,EAClB,OAAO,EAAC,OAAO,GACjB,CACL,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}

package/codeField/codeField.module.css

@@ -3,8 +3,7 @@
     display: block;
     border: none;
     padding: 0;
-    margin: 0;
-    margin-left: 0.5ch;
+    margin: auto;
     background: repeating-linear-gradient(
             90deg,
             #7d7d7d 0,
@@ -15,9 +14,22 @@
         0 100%/100% 0.2rem no-repeat;
     color: transparent;
     text-shadow: 0 0 0 rgb(var(--secondaryColor, 98 91 113));
-    font: 5ch consolas, monospace;
     letter-spacing: 0.5ch;
 }
 .input:focus {
     outline: none;
 }
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.small {
+    font: 5ch consolas, monospace;
+}
+.medium {
+    font: 7ch consolas, monospace;
+}
+.large {
+    font: 11ch consolas, monospace;
+}

package/codeField/codeField.tsx

@@ -6,10 +6,29 @@ interface CodeFieldsProps extends React.HTMLAttributes<HTMLInputElement> {
     length?: number;
     name?: string;
     type?: string;
+    size?: "small" | "medium" | "large";
 }
 
-function CodeField(props: CodeFieldsProps) {
-    const joinedClassNames = joinClassNames(styles.input, props.className!);
+function sliceOverLength(
+    event: React.FormEvent<HTMLInputElement>,
+    length: number
+) {
+    const targetInput = event.target as HTMLInputElement;
+    const targetLength = targetInput.value.length;
+    if (targetLength > length)
+        targetInput.value = targetInput.value.slice(0, targetLength - 1);
+
+    targetInput.value = targetInput.value.replace(/[^0-9]+/, "");
+}
+
+function CodeField(this: any, props: CodeFieldsProps) {
+    const length: number = props.length ? props.length : 6;
+
+    const joinedClassNames = joinClassNames(
+        styles.input,
+        props.size ? styles[props.size] : styles.medium,
+        props.className!
+    );
 
     const joinedStyles = joinStyles(
         { width: "calc(1.5ch * " + props.length + ")" },
@@ -18,13 +37,15 @@ function CodeField(props: CodeFieldsProps) {
 
     return (
         <input
-            {...props}
             name={props.name}
-            type={props.type}
-            minLength={props.length}
-            maxLength={props.length}
+            type="number"
+            minLength={length}
+            maxLength={length}
             className={joinedClassNames}
             style={joinedStyles}
+            onInput={(event) => sliceOverLength(event, length)}
+            autoComplete="off"
+            pattern="[0-9]"
         />
     );
 }

package/inputField/inputField.js

@@ -4,7 +4,7 @@ import styles from "./inputField.module.css";
 function InputField(props) {
     const joinedClassNames = joinClassNames(styles.input, props.variant ? styles[props.variant] : styles.standard, props.className);
     return (React.createElement("label", { className: styles.label },
-        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "  ", type: props.type, value: props.value, className: joinedClassNames }),
+        React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "  ", type: props.type, value: props.value, className: joinedClassNames, autoFocus: true }),
         React.createElement("span", { className: styles.span }, props.placeholder)));
 }
 export default InputField;

package/inputField/inputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAY7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,kCACQ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,gBAAgB,GAC7B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,WAAW,CAAQ,CACpD,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAY7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,kCACQ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,gBAAgB,EAC3B,SAAS,SACX;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,WAAW,CAAQ,CACpD,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}

package/inputField/inputField.tsx

@@ -29,6 +29,7 @@ function InputField(props: InputFieldProps) {
                 type={props.type}
                 value={props.value}
                 className={joinedClassNames}
+                autoFocus
             />
             <span className={styles.span}>{props.placeholder}</span>
         </label>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.79-beta",
+    "version": "1.2.81-beta",
     "description": "",
     "main": "./src/index.js",
     "scripts": {