forstok-ui-lib 5.11.12 → 5.11.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.11.12",
+  "version": "5.11.13",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/input/otp.tsx

@@ -0,0 +1,62 @@
+import { InputOtpContainer } from './styles';
+import { TChangeEvent, TKeyboadEvent, TPasteEvent, TState } from '../../typeds';
+
+const InputOTPComponent = ({ otpLength = 6, value, onChange, ...props }: {otpLength: number, value: string, onChange: TState<string>}) => {
+
+  const handleChange: TChangeEvent = (e) => {
+    const target = e.target as HTMLInputElement;
+    const inputValue = target.value;
+    const inputIndex = target.dataset.index ? parseInt(target.dataset.index) : 0;
+    if (inputValue === '' || /^\d$/.test(inputValue)) {
+      let updatedValue = value.split('');
+      updatedValue[inputIndex] = inputValue;
+      const newOtpValue = updatedValue.join('');
+      onChange(newOtpValue);
+      if (inputValue !== '' && inputIndex < otpLength - 1) {
+        (document.getElementById(`otp-inputbox-${inputIndex + 1}`) as HTMLInputElement)?.focus();
+      };
+    };
+  }
+
+  const handleKeyDown: TKeyboadEvent = (e) => {
+    const target = e.target as HTMLInputElement;
+    const inputIndex = target.dataset.index ? parseInt(target.dataset.index) : 0;
+    if (e.key === 'Backspace' && !value[inputIndex] && inputIndex > 0) {
+      (document.getElementById(`otp-inputbox-${inputIndex - 1}`) as HTMLInputElement)?.focus();
+    }
+  }
+
+  const handlePaste: TPasteEvent<HTMLDivElement> = (e) => {
+    e.preventDefault();
+    const pastedValue = e.clipboardData.getData('Text').replace(/\D/g, '').slice(0, otpLength);
+    onChange(pastedValue);
+  }
+
+  let inputEls = [];
+  for (let i = 0; i < otpLength; i++) {
+    inputEls.push(
+      <InputOtpContainer
+        key={i}
+        data-index={i}
+        id={`otp-inputbox-${i}`}
+        name={`otp-input-${i}`}
+        autoComplete='one-time-code'
+        inputMode='numeric'
+        required
+        value={value[i] || ''}
+        onChange={(e) => handleChange(e)}
+        onKeyDown={(e) => handleKeyDown(e)}
+        onFocus={(e) => {e.target.addEventListener('wheel', function (e) { e.preventDefault() }, { passive: false }); e.target.select()}}
+        {...props}
+      />
+    );
+  };
+
+  return (
+    <div onPaste={handlePaste}>
+      {inputEls}
+    </div>
+  );
+}
+
+export default InputOTPComponent;

package/src/components/input/styles.ts

@@ -89,4 +89,20 @@ export const InputLabel = styled.label`
   top: 50%;
   transform: translateY(-50%);
   color: var(--mt-clr);
+`
+export const InputOtpContainer = styled.input`
+  text-align: center;
+  height: 40px;
+  width: 38px;
+  font-size: 20px;
+  margin-right: 5px;
+  &:last-child {
+    margin-right: 0;
+  }
+  @media only screen and (min-width: 768px) {
+    height: 55px;
+    width: 45px;
+    font-size: 28px;
+    margin-right: 16px;
+  }
 `

package/src/typeds/base.typed.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent, ChangeEvent, DragEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent } from 'react';
+import type { MouseEvent, ChangeEvent, DragEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent, ClipboardEvent } from 'react';
 
 type RemoveUnderscoreFirstLetter<S extends string> =
   S extends `${infer FirstLetter}${infer U}`
@@ -24,6 +24,7 @@ export type TChangeEvent = (e: ChangeEvent) => void;
 export type TDragEvent = (e:DragEvent) => void;
 export type TEnterEvent = (e:KeyboardEvent<HTMLInputElement | HTMLElement> | FocusEvent<HTMLInputElement | HTMLElement | Element> | MouseEvent<HTMLElement>) => void;
 export type TKeyboadEvent = (e: KeyboardEvent<HTMLInputElement>) => void;
+export type TPasteEvent<T> = (e:ClipboardEvent<T>) => void;
 export type TPage = {
     totalCount: number
     totalPageCount: number