feat(EditableInput): add renderInput props. #166

uiwjs · Feb 13, 2025 · 65fd3e2 · 65fd3e2
1 parent 711fb70
commit 65fd3e2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/packages/color-editable-input/README.md b/packages/color-editable-input/README.md
@@ -49,6 +49,7 @@ export interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLI
   placement?: 'top' | 'left' | 'bottom' | 'right';
   inputStyle?: React.CSSProperties;
   onChange?: (evn: React.ChangeEvent<HTMLInputElement>, value: string | number) => void;
+  renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>, ref: React.Ref<HTMLInputElement>) => React.ReactNode;
 }
 declare const EditableInput: React.ForwardRefExoticComponent<EditableInputProps & React.RefAttributes<HTMLInputElement>>;
 export default EditableInput;

diff --git a/packages/color-editable-input/src/index.tsx b/packages/color-editable-input/src/index.tsx
@@ -12,6 +12,7 @@ export interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLI
   placement?: 'top' | 'left' | 'bottom' | 'right';
   inputStyle?: React.CSSProperties;
   onChange?: (evn: React.ChangeEvent<HTMLInputElement>, value: string | number) => void;
+  renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>, ref: React.Ref<HTMLInputElement>) => React.ReactNode;
 }
 
 const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((props, ref) => {
@@ -26,6 +27,7 @@ const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((pr
     inputStyle,
     onChange,
     onBlur,
+    renderInput,
     ...other
   } = props;
   const [value, setValue] = useState<string | number | undefined>(initValue);
@@ -90,18 +92,19 @@ const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>((pr
     boxShadow: 'var(--editable-input-box-shadow)',
     ...inputStyle,
   } as React.CSSProperties;
+
+  const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
+    value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    autoComplete: 'off',
+    onFocus: () => (isFocus.current = true),
+    ...other,
+    style: editableStyle,
+  };
   return (
     <div className={[prefixCls, className || ''].filter(Boolean).join(' ')} style={wrapperStyle}>
-      <input
-        ref={ref}
-        value={value}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        autoComplete="off"
-        onFocus={() => (isFocus.current = true)}
-        {...other}
-        style={editableStyle}
-      />
+      {renderInput ? renderInput(inputProps, ref) : <input ref={ref} {...inputProps} />}
       {label && (
         <span
           style={{