@timeax/form-palette 0.0.3 → 0.0.4

package/src/presets/ui/input-mask.tsx

@@ -1,739 +0,0 @@
-import * as React from "react";
-import { Input } from "@/presets/ui/input";
-
-export interface InputMaskChangeEvent {
-   originalEvent: React.SyntheticEvent<HTMLInputElement> | Event | undefined;
-   value: string;
-   stopPropagation(): void;
-   preventDefault(): void;
-   target: {
-      name?: string;
-      id?: string;
-      value: string;
-   };
-}
-
-export interface InputMaskCompleteEvent {
-   originalEvent: React.SyntheticEvent<HTMLInputElement> | Event;
-   value: string;
-}
-
-export interface InputMaskRef {
-   focus(): void;
-   getElement(): HTMLInputElement | null;
-}
-
-export interface InputMaskProps
-   extends Omit<
-      React.InputHTMLAttributes<HTMLInputElement>,
-      "onChange" | "value" | "defaultValue"
-   > {
-   mask: string | null;
-   autoClear?: boolean;
-   autoFocus?: boolean;
-   invalid?: boolean;
-   unmask?: boolean;
-   slotChar?: string;
-   'data-slot'?: string;
-   value?: string | null;
-   onChange?: (e: InputMaskChangeEvent) => void;
-   onComplete?: (e: InputMaskCompleteEvent) => void;
-}
-
-const isEmpty = (val: unknown): boolean =>
-   val === null || val === undefined || val === "";
-
-const isAndroid = (): boolean =>
-   typeof navigator !== "undefined" &&
-   /android/i.test(navigator.userAgent || "");
-
-const isIOS = (): boolean =>
-   typeof navigator !== "undefined" &&
-   /(iphone|ipad|ipod)/i.test(navigator.userAgent || "");
-
-const isChrome = (): boolean =>
-   typeof navigator !== "undefined" &&
-   /chrome/i.test(navigator.userAgent || "");
-
-const focusEl = (el: HTMLInputElement | null) => {
-   if (el && typeof el.focus === "function") {
-      el.focus();
-   }
-};
-
-function useUpdateEffect(effect: React.EffectCallback, deps: React.DependencyList) {
-   const mounted = React.useRef(false);
-
-   React.useEffect(() => {
-      if (mounted.current) {
-         return effect();
-      }
-      mounted.current = true;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-   }, deps);
-}
-
-export const InputMask = React.memo(
-   React.forwardRef<InputMaskRef, InputMaskProps>((inProps, ref) => {
-      // merge defaults with incoming props
-      const props = React.useMemo(
-         () => ({
-            autoClear: true,
-            autoFocus: false,
-            disabled: false,
-            invalid: false,
-            readOnly: false,
-            required: false,
-            slotChar: "_",
-            type: "text",
-            unmask: false,
-            ...inProps,
-         }),
-         [inProps]
-      );
-
-      const elementRef = React.useRef<HTMLInputElement | null>(null);
-      const firstNonMaskPos = React.useRef<number | null>(null);
-      const lastRequiredNonMaskPos = React.useRef(0);
-      const tests = React.useRef<(RegExp | null)[]>([]);
-      const buffer = React.useRef<string[]>([]);
-      const len = React.useRef(0);
-      const oldVal = React.useRef<string | null>(null);
-      const focus = React.useRef(false);
-      const focusText = React.useRef<string | null>(null);
-      const isValueChecked = React.useRef<boolean | null>(null);
-      const partialPosition = React.useRef<number | null>(null);
-      const defaultBuffer = React.useRef<string | null>(null);
-      const caretTimeoutId = React.useRef<number | null>(null);
-      const androidChrome = React.useRef(false);
-
-      const caret = (first?: number, last?: number) => {
-         let range: any;
-         let begin: number | null = null;
-         let end: number | null = null;
-         const inputEl = elementRef.current;
-
-         if (!inputEl || !inputEl.offsetParent || inputEl !== document.activeElement) {
-            return null;
-         }
-
-         if (typeof first === "number") {
-            begin = first;
-            end = typeof last === "number" ? last : begin;
-
-            if (inputEl.setSelectionRange) {
-               inputEl.setSelectionRange(begin, end);
-            } else if ((inputEl as any).createTextRange) {
-               range = (inputEl as any).createTextRange();
-               range.collapse(true);
-               range.moveEnd("character", end);
-               range.moveStart("character", begin);
-               range.select();
-            }
-            //@ts-ignore
-         } else if (inputEl.setSelectionRange) {
-            begin = inputEl.selectionStart ?? 0;
-            end = inputEl.selectionEnd ?? begin;
-         } else if ((document as any).selection && (document as any).selection.createRange) {
-            range = (document as any).selection.createRange();
-            begin = 0 - range.duplicate().moveStart("character", -100000);
-            end = begin + range.text.length;
-         }
-
-         if (begin === null || end === null) {
-            return null;
-         }
-
-         return { begin, end };
-      };
-
-      const getPlaceholder = React.useCallback(
-         (i: number): string => {
-            const slotChar = props.slotChar ?? "_";
-
-            if (i < slotChar.length) {
-               return slotChar.charAt(i);
-            }
-
-            return slotChar.charAt(0);
-         },
-         [props.slotChar]
-      );
-
-      const isCompleted = () => {
-         const first = firstNonMaskPos.current ?? 0;
-
-         for (let i = first; i <= lastRequiredNonMaskPos.current; i++) {
-            if (tests.current[i] && buffer.current[i] === getPlaceholder(i)) {
-               return false;
-            }
-         }
-
-         return true;
-      };
-
-      const getValue = () =>
-         props.unmask ? getUnmaskedValue() : elementRef.current?.value ?? "";
-
-      const seekNext = (pos: number) => {
-         while (++pos < len.current && !tests.current[pos]) {
-            /* loop */
-         }
-         return pos;
-      };
-
-      const seekPrev = (pos: number) => {
-         while (--pos >= 0 && !tests.current[pos]) {
-            /* loop */
-         }
-         return pos;
-      };
-
-      const shiftL = (begin: number, end: number) => {
-         if (begin < 0) {
-            return;
-         }
-
-         let i: number;
-         let j: number;
-
-         for (i = begin, j = seekNext(end); i < len.current; i++) {
-            if (tests.current[i]) {
-               if (j < len.current && tests.current[i]!.test(buffer.current[j]!)) {
-                  buffer.current[i] = buffer.current[j]!;
-                  buffer.current[j] = getPlaceholder(j);
-               } else {
-                  break;
-               }
-
-               j = seekNext(j);
-            }
-         }
-
-         writeBuffer();
-         caret(Math.max(firstNonMaskPos.current ?? 0, begin));
-      };
-
-      const shiftR = (pos: number) => {
-         let i: number;
-         let c: string;
-         let j: number;
-         let t: string;
-
-         for (i = pos, c = getPlaceholder(pos); i < len.current; i++) {
-            if (tests.current[i]) {
-               j = seekNext(i);
-               t = buffer.current[i]!;
-               buffer.current[i] = c;
-               if (j < len.current && tests.current[j]!.test(t)) {
-                  c = t;
-               } else {
-                  break;
-               }
-            }
-         }
-      };
-
-      const clearBuffer = (start: number, end: number) => {
-         for (let i = start; i < end && i < len.current; i++) {
-            if (tests.current[i]) {
-               buffer.current[i] = getPlaceholder(i);
-            }
-         }
-      };
-
-      const writeBuffer = () => {
-         if (elementRef.current) {
-            elementRef.current.value = buffer.current.join("");
-         }
-      };
-
-      const checkVal = (allow?: boolean): number => {
-         isValueChecked.current = true;
-
-         const test = elementRef.current?.value ?? "";
-         let lastMatch = -1;
-         let i: number;
-         let c: string;
-         let pos: number;
-
-         for (i = 0, pos = 0; i < len.current; i++) {
-            if (tests.current[i]) {
-               buffer.current[i] = getPlaceholder(i);
-
-               while (pos++ < test.length) {
-                  c = test.charAt(pos - 1);
-                  if (tests.current[i]!.test(c)) {
-                     buffer.current[i] = c;
-                     lastMatch = i;
-                     break;
-                  }
-               }
-
-               if (pos > test.length) {
-                  clearBuffer(i + 1, len.current);
-                  break;
-               }
-            } else {
-               if (buffer.current[i] === test.charAt(pos)) {
-                  pos++;
-               }
-               if (i < (partialPosition.current ?? 0)) {
-                  lastMatch = i;
-               }
-            }
-         }
-
-         if (allow) {
-            writeBuffer();
-         } else if (lastMatch + 1 < (partialPosition.current ?? 0)) {
-            if (props.autoClear || buffer.current.join("") === defaultBuffer.current) {
-               if (elementRef.current && elementRef.current.value) {
-                  elementRef.current.value = "";
-               }
-               clearBuffer(0, len.current);
-            } else {
-               writeBuffer();
-            }
-         } else {
-            writeBuffer();
-            if (elementRef.current) {
-               elementRef.current.value = elementRef.current.value.substring(0, lastMatch + 1);
-            }
-         }
-
-         return partialPosition.current ? i : (firstNonMaskPos.current ?? 0);
-      };
-
-      const handleAndroidInput = (e: React.SyntheticEvent<HTMLInputElement>) => {
-         const inputEl = elementRef.current;
-         if (!inputEl) return;
-
-         const curVal = inputEl.value;
-         const pos = caret();
-         if (!pos) return;
-
-         if (oldVal.current && oldVal.current.length > curVal.length) {
-            // deletion/backspace
-            checkVal(true);
-            while (pos.begin > 0 && !tests.current[pos.begin - 1]) {
-               pos.begin--;
-            }
-            if (pos.begin === 0) {
-               while (
-                  pos.begin < (firstNonMaskPos.current ?? 0) &&
-                  !tests.current[pos.begin]
-               ) {
-                  pos.begin++;
-               }
-            }
-            caret(pos.begin, pos.begin);
-         } else {
-            checkVal(true);
-            while (pos.begin < len.current && !tests.current[pos.begin]) {
-               pos.begin++;
-            }
-            caret(pos.begin, pos.begin);
-         }
-
-         if (props.onComplete && isCompleted()) {
-            props.onComplete({
-               originalEvent: e,
-               value: getValue(),
-            });
-         }
-
-         updateModel(e);
-      };
-
-      const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-         console.log("InputMask onBlur");
-         focus.current = false;
-         checkVal();
-         updateModel(e);
-
-         if (props.onBlur) {
-            props.onBlur(e);
-         }
-
-         if (elementRef.current && elementRef.current.value !== focusText.current) {
-            const event = document.createEvent("HTMLEvents");
-            event.initEvent("change", true, false);
-            elementRef.current.dispatchEvent(event);
-         }
-      };
-
-      const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-         if (props.readOnly) {
-            return;
-         }
-
-         const k = e.which || e.keyCode;
-         let pos: { begin: number; end: number } | null;
-         let begin: number;
-         let end: number;
-
-         oldVal.current = elementRef.current?.value ?? null;
-
-         // backspace, delete, escape
-         if (k === 8 || k === 46 || (isIOS() && k === 127)) {
-            pos = caret();
-            if (!pos) {
-               return;
-            }
-            begin = pos.begin;
-            end = pos.end;
-
-            if (end - begin === 0) {
-               begin = k !== 46 ? seekPrev(begin) : (end = seekNext(begin - 1));
-               end = k === 46 ? seekNext(end) : end;
-            }
-
-            clearBuffer(begin, end);
-            shiftL(begin, end - 1);
-            updateModel(e as any);
-            e.preventDefault();
-         } else if (k === 13) {
-            // enter
-            onBlur(e as any);
-            updateModel(e as any);
-         } else if (k === 27) {
-            // escape
-            if (elementRef.current) {
-               elementRef.current.value = focusText.current ?? "";
-            }
-            caret(0, checkVal());
-            updateModel(e as any);
-            e.preventDefault();
-         }
-      };
-
-      const onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-         if (props.readOnly) {
-            return;
-         }
-
-         const pos = caret();
-         if (!pos) {
-            return;
-         }
-
-         const k = e.which || e.keyCode;
-         let p: number;
-         let c: string;
-         let next: number;
-         let completed = false;
-
-         if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
-            return;
-         } else if (k && k !== 13) {
-            if (pos.end - pos.begin !== 0) {
-               clearBuffer(pos.begin, pos.end);
-               shiftL(pos.begin, pos.end - 1);
-            }
-
-            p = seekNext(pos.begin - 1);
-            if (p < len.current) {
-               c = String.fromCharCode(k);
-               if (tests.current[p] && tests.current[p]!.test(c)) {
-                  shiftR(p);
-                  buffer.current[p] = c;
-                  writeBuffer();
-
-                  next = seekNext(p);
-                  if (isAndroid()) {
-                     const proxy = () => caret(next);
-                     setTimeout(proxy, 0);
-                  } else {
-                     caret(next);
-                  }
-
-                  if (pos.begin <= lastRequiredNonMaskPos.current) {
-                     completed = isCompleted();
-                  }
-               }
-            }
-
-            e.preventDefault();
-         }
-
-         updateModel(e as any);
-
-         if (props.onComplete && completed) {
-            props.onComplete({
-               originalEvent: e,
-               value: getValue(),
-            });
-         }
-      };
-
-      const getUnmaskedValue = React.useCallback((): string => {
-         const unmaskedBuffer: string[] = [];
-
-         for (let i = 0; i < buffer.current.length; i++) {
-            const c = buffer.current[i]!;
-            if (tests.current[i] && c !== getPlaceholder(i)) {
-               unmaskedBuffer.push(c);
-            }
-         }
-
-         return unmaskedBuffer.join("");
-      }, [getPlaceholder]);
-
-      const updateModel = (e?: React.SyntheticEvent<HTMLInputElement>) => {
-         if (!props.onChange) return;
-
-         const val = props.unmask ? getUnmaskedValue() : e && (e.target as HTMLInputElement)?.value;
-
-         const normalized = defaultBuffer.current !== val ? (val ?? "") : "";
-         console.log("InputMask updateModel:", { val, normalized });
-         const payload: InputMaskChangeEvent = {
-            originalEvent: e,
-            value: normalized,
-            stopPropagation: () => {
-               (e as any)?.stopPropagation?.();
-            },
-            preventDefault: () => {
-               (e as any)?.preventDefault?.();
-            },
-            target: {
-               name: props.name,
-               id: props.id,
-               value: normalized,
-            },
-         };
-
-         props.onChange(payload);
-      };
-
-      const updateValue = (allow?: boolean): number | undefined => {
-         let pos: number | undefined;
-
-         if (elementRef.current) {
-            if (isEmpty(props.value)) {
-               elementRef.current.value = "";
-            } else {
-               elementRef.current.value = props.value ?? "";
-               pos = checkVal(allow);
-               setTimeout(() => {
-                  if (elementRef.current) {
-                     writeBuffer();
-                     return checkVal(allow);
-                  }
-               }, 10);
-            }
-
-            focusText.current = elementRef.current.value;
-         }
-
-         return pos;
-      };
-
-      const isValueUpdated = React.useCallback(() => {
-         const elVal = elementRef.current?.value ?? "";
-         return props.unmask
-            ? (props.value ?? "") !== getUnmaskedValue()
-            : defaultBuffer.current !== elVal && elVal !== (props.value ?? "");
-      }, [props.unmask, props.value, getUnmaskedValue]);
-
-      const init = () => {
-         const mask = props.mask;
-         if (!mask) return;
-
-         tests.current = [];
-         partialPosition.current = mask.length;
-         len.current = mask.length;
-         firstNonMaskPos.current = null;
-
-         const defs: Record<string, string> = {
-            "9": "[0-9]",
-            a: "[A-Za-z]",
-            "*": "[A-Za-z0-9]",
-         };
-
-         androidChrome.current = isChrome() && isAndroid();
-         const maskTokens = mask.split("");
-
-         for (let i = 0; i < maskTokens.length; i++) {
-            const c = maskTokens[i]!;
-
-            if (c === "?") {
-               len.current--;
-               partialPosition.current = i;
-            } else if (defs[c]) {
-               tests.current.push(new RegExp(defs[c]!));
-               if (firstNonMaskPos.current === null) {
-                  firstNonMaskPos.current = tests.current.length - 1;
-               }
-               if (i < (partialPosition.current ?? 0)) {
-                  lastRequiredNonMaskPos.current = tests.current.length - 1;
-               }
-            } else {
-               tests.current.push(null);
-            }
-         }
-
-         buffer.current = [];
-
-         for (let i = 0; i < maskTokens.length; i++) {
-            const c = maskTokens[i]!;
-            if (c !== "?") {
-               if (defs[c]) {
-                  buffer.current.push(getPlaceholder(i));
-               } else {
-                  buffer.current.push(c);
-               }
-            }
-         }
-
-         defaultBuffer.current = buffer.current.join("");
-      };
-
-      const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-         console.log("InputMask onFocus");
-         if (props.readOnly) {
-            return;
-         }
-
-         focus.current = true;
-         if (caretTimeoutId.current) {
-            window.clearTimeout(caretTimeoutId.current);
-         }
-
-         let pos: number;
-
-         if (elementRef.current) {
-            focusText.current = elementRef.current.value;
-         } else {
-            focusText.current = "";
-         }
-
-         pos = checkVal() || 0;
-
-         caretTimeoutId.current = window.setTimeout(() => {
-            if (elementRef.current !== document.activeElement) {
-               return;
-            }
-
-            writeBuffer();
-
-            if (props.mask && pos === props.mask.replace("?", "").length) {
-               caret(0, pos);
-            } else {
-               caret(pos);
-            }
-         }, 100);
-
-         if (props.onFocus) {
-            props.onFocus(e);
-         }
-      };
-
-      const handleInputChange = (
-         e: React.FormEvent<HTMLInputElement>,
-         isOnPaste = false
-      ) => {
-         if (props.readOnly) {
-            return;
-         }
-
-         if (!isOnPaste) {
-            const pos = checkVal(true);
-            caret(pos);
-         }
-
-         updateModel(e as any);
-
-         if (props.onComplete && isCompleted()) {
-            props.onComplete({
-               originalEvent: e,
-               value: getValue(),
-            });
-         }
-      };
-
-      const onInput = (event: React.FormEvent<HTMLInputElement>) => {
-         androidChrome.current
-            ? handleAndroidInput(event as any)
-            : handleInputChange(event);
-      };
-
-      React.useImperativeHandle(
-         ref,
-         () => ({
-            focus: () => focusEl(elementRef.current),
-            getElement: () => elementRef.current,
-         }),
-         []
-      );
-
-      React.useEffect(() => {
-         if (!elementRef.current) return;
-      }, []);
-
-      React.useEffect(() => {
-         init();
-         updateValue();
-         // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
-
-      useUpdateEffect(() => {
-         init();
-         const pos = updateValue(true);
-         if (typeof pos === "number") {
-            caret(pos);
-         }
-         if (props.unmask) {
-            updateModel();
-         }
-      }, [props.mask, props.unmask]);
-
-      useUpdateEffect(() => {
-         if (isValueUpdated()) {
-            updateValue();
-         }
-      }, [isValueUpdated]);
-
-      const {
-         mask,
-         autoClear,
-         unmask,
-         slotChar,
-         onChange,
-         onComplete,
-         value,
-         autoFocus,
-         onFocus: i,
-         onBlur: j,
-         onKeyDown: k,
-         onKeyPress: l,
-         onInput: m,
-         className,
-         ...restInputProps
-      } = props;
-
-      return (
-         <input
-            ref={elementRef}
-            autoFocus={autoFocus}
-            id={props.id}
-            name={props.name}
-            style={props.style}
-            className={className}
-            placeholder={props.placeholder}
-            size={props.size}
-            maxLength={props.maxLength}
-            tabIndex={props.tabIndex}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onKeyDown={onKeyDown}
-            onKeyPress={onKeyPress}
-            onInput={onInput}
-            onPaste={(e) => handleInputChange(e, true)}
-            {...restInputProps}
-         />
-      );
-   })
-);
-
-InputMask.displayName = "InputMask";