x-ui-design 0.4.60 → 0.4.62

package/dist/esm/types/helpers/mask.d.ts

@@ -1,4 +1,7 @@
 export declare const MASK_CHAR = "_";
 export declare const MASK_REGEX: RegExp;
 export declare function stripMask(value: string, mask: string, maskChar?: string): string;
-export declare function applyMask(raw: string, mask: string, maskChar?: string): string;
+export declare function applyMask(raw: string, mask: string, maskChar?: string): {
+    masked: string;
+    rawIndex: number;
+};

package/dist/index.esm.js

@@ -1013,7 +1013,7 @@ const FormItem$1 = ({
   }, !props.noStyle && (label || name) && /*#__PURE__*/React.createElement("label", {
     className: `${prefixCls}-label`,
     htmlFor: name
-  }, label || name, ":", isRequired && /*#__PURE__*/React.createElement("span", {
+  }, label || name, isRequired && /*#__PURE__*/React.createElement("span", {
     className: `${prefixCls}-required`
   }, "*")), Children.map(childrenList, (child, key) => {
     if (/*#__PURE__*/isValidElement(child)) {
@@ -2773,7 +2773,10 @@ function applyMask(raw, mask, maskChar = MASK_CHAR) {
       masked += mChar;
     }
   }
-  return masked;
+  return {
+    masked,
+    rawIndex
+  };
 }
 
 var css_248z$b = ".xUi-input-container{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);display:flex;overflow:hidden}.xUi-input-container:not(.xUi-input-error):not(.xUi-input-disabled):has(.xUi-input):hover,.xUi-input-container:not(.xUi-input-error):not(.xUi-input-disabled):has(.xUi-input:focus){border:1px solid var(--xui-primary-color)}.xUi-input-container.xUi-input-error{border-color:var(--xui-error-color)}.xUi-input-container.xUi-input-error .error-svg-icon,.xUi-input-suffix .error-svg-icon{color:var(--xui-error-color)}.xUi-input-wrapper{align-items:center;display:flex;flex-grow:1;margin:-1px;position:relative;transition:border .3s}.xUi-input,.xUi-input-wrapper{background-color:transparent;height:-webkit-fill-available}.xUi-input{border:none;color:var(--xui-text-color);flex:1;outline:none;padding:.1px 7px;width:100%}.xUi-input:placeholder-shown{text-overflow:ellipsis}.xUi-input::placeholder{color:var(--xui-text-color);opacity:.6}.xUi-input-prefix,.xUi-input-suffix{background-color:transparent;gap:4px}.xUi-input-addon,.xUi-input-prefix,.xUi-input-suffix{align-items:center;color:var(--xui-text-color);display:flex;height:-webkit-fill-available;padding:0 7px}.xUi-input-addon.xUi-input-after{border-left:1px solid var(--xui-border-color)}.xUi-input-addon.xUi-input-before{border-right:1px solid var(--xui-border-color)}.xUi-input-large .xUi-input-addon{padding:0 10px}.xUi-input-clear{align-items:center;cursor:pointer;display:flex;margin:0 5px;position:relative;width:16px}.xUi-input-clear svg{color:var(--xui-text-color)}.xUi-input-disabled,.xUi-input-disabled .xUi-input,.xUi-input-disabled .xUi-input-suffix{background-color:var(--xui-color-disabled);cursor:not-allowed}.xUi-input-small{height:22px}.xUi-input-large .xUi-input-clear,.xUi-input-small .xUi-input,.xUi-input-small .xUi-input::placeholder{font-size:var(--xui-font-size-md)}.xUi-input-middle{border-radius:var(--xui-border-radius-md);height:30px}.xUi-input-large .xUi-input-clear,.xUi-input-middle .xUi-input,.xUi-input-middle .xUi-input::placeholder{font-size:var(--xui-font-size-md)}.xUi-input-large{border-radius:var(--xui-border-radius-lg);height:44px}.xUi-input-large .xUi-input,.xUi-input-large .xUi-input-clear,.xUi-input-large .xUi-input::placeholder{font-size:var(--xui-font-size-lg)}";
@@ -2810,8 +2813,10 @@ const InputComponent = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const inputRef = useRef(null);
   const lastKeyPressed = useRef(null);
-  const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar) : value ?? '';
+  const internalValue = mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked : value ?? '';
+  const [maskValue, setMaskValue] = useState(internalValue);
   const [iconRenderVisible, setIconRenderVisible] = useState(false);
+  const animationRef = useRef(null);
   useImperativeHandle(ref, () => ({
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
@@ -2825,43 +2830,55 @@ const InputComponent = /*#__PURE__*/forwardRef(({
       }
     }
   }));
-  // useEffect(() => {
-  //   setInternalValue(mask ? applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar) : `${value ?? ''}`);
-  // }, [value, mask, maskChar]);
+  useEffect(() => {
+    if (mask) {
+      setMaskValue(applyMask(stripMask(`${value ?? ''}`, mask, maskChar), mask, maskChar).masked);
+    }
+  }, [value, mask, maskChar]);
   const handleChange = e => {
-    const inputEl = inputRef.current;
-    if (!inputEl) return;
-    const rawInput = e.target.value;
-    let nextCaret = inputEl.selectionStart ?? rawInput.length;
+    if (!inputRef.current) return;
+    let rawInput = e.target.value;
     const raw = mask ? rawInput.replace(maskRegex, '') : rawInput;
-    const masked = mask ? applyMask(raw, mask, maskChar) : rawInput;
-    // setInternalValue(masked);
     if (mask) {
-      requestAnimationFrame(() => {
-        if (!inputEl) return;
-        const isBackspace = lastKeyPressed.current === 'Backspace';
-        const isDelete = lastKeyPressed.current === 'Delete';
-        while (mask.includes(masked[nextCaret - 1])) {
-          if (isBackspace || isDelete) {
+      if (!inputRef.current) return;
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      const {
+        masked,
+        rawIndex
+      } = applyMask(raw, mask, maskChar);
+      rawInput = masked;
+      animationRef.current = requestAnimationFrame(() => {
+        const isRemove = lastKeyPressed.current === 'Delete' || lastKeyPressed.current === 'Backspace';
+        let nextCaret = !isRemove ? rawIndex : inputRef.current?.selectionStart ?? 0;
+        while (isRemove ? mask.includes(rawInput[nextCaret - 1]) : maskChar !== rawInput[nextCaret]) {
+          if (!isRemove && !rawInput[nextCaret]) {
+            break;
+          }
+          if (isRemove) {
             nextCaret--;
           } else {
             nextCaret++;
           }
         }
-        inputEl.setSelectionRange(nextCaret, nextCaret);
+        inputRef.current?.setSelectionRange(nextCaret, nextCaret);
       });
     }
+    setMaskValue(rawInput);
     const eventWithMaskedValue = {
       ...e,
       target: {
         ...e.target,
-        value: masked
+        value: rawInput
       }
     };
     props.onChange?.(eventWithMaskedValue);
   };
   const handleClear = e => {
-    // setInternalValue('');
+    if (mask) {
+      setMaskValue('');
+    }
     e.target.value = '';
     props.onChange?.(e);
   };
@@ -2891,7 +2908,7 @@ const InputComponent = /*#__PURE__*/forwardRef(({
     type: iconRenderVisible ? 'text' : 'password'
   } : {}, {
     disabled: disabled,
-    value: internalValue,
+    value: maskValue,
     onChange: handleChange,
     onKeyDown: handleOnKeyDown,
     className: clsx([prefixCls, className])