|
@@ -16,6 +16,7 @@ export interface InputProps
|
|
withError?: boolean;
|
|
withError?: boolean;
|
|
label?: React.ReactNode;
|
|
label?: React.ReactNode;
|
|
hint?: React.ReactNode;
|
|
hint?: React.ReactNode;
|
|
|
|
+ children?: React.ReactNode;
|
|
|
|
|
|
// Some may only accept integer, like `Number of Partitions`
|
|
// Some may only accept integer, like `Number of Partitions`
|
|
// some may accept decimal
|
|
// some may accept decimal
|
|
@@ -99,19 +100,22 @@ function pasteNumberCheck(
|
|
return value;
|
|
return value;
|
|
}
|
|
}
|
|
|
|
|
|
-const Input: React.FC<InputProps> = ({
|
|
|
|
- name,
|
|
|
|
- hookFormOptions,
|
|
|
|
- search,
|
|
|
|
- inputSize = 'L',
|
|
|
|
- type,
|
|
|
|
- positiveOnly,
|
|
|
|
- integerOnly,
|
|
|
|
- withError = false,
|
|
|
|
- label,
|
|
|
|
- hint,
|
|
|
|
- ...rest
|
|
|
|
-}) => {
|
|
|
|
|
|
+const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
|
|
|
+ const {
|
|
|
|
+ name,
|
|
|
|
+ hookFormOptions,
|
|
|
|
+ search,
|
|
|
|
+ inputSize = 'L',
|
|
|
|
+ type,
|
|
|
|
+ positiveOnly,
|
|
|
|
+ integerOnly,
|
|
|
|
+ withError = false,
|
|
|
|
+ label,
|
|
|
|
+ hint,
|
|
|
|
+ children,
|
|
|
|
+ ...rest
|
|
|
|
+ } = props;
|
|
|
|
+
|
|
const methods = useFormContext();
|
|
const methods = useFormContext();
|
|
|
|
|
|
const fieldId = React.useId();
|
|
const fieldId = React.useId();
|
|
@@ -168,7 +172,6 @@ const Input: React.FC<InputProps> = ({
|
|
// if the field is a part of react-hook-form form
|
|
// if the field is a part of react-hook-form form
|
|
inputOptions = { ...rest, ...methods.register(name, hookFormOptions) };
|
|
inputOptions = { ...rest, ...methods.register(name, hookFormOptions) };
|
|
}
|
|
}
|
|
-
|
|
|
|
return (
|
|
return (
|
|
<div>
|
|
<div>
|
|
{label && <InputLabel htmlFor={rest.id || fieldId}>{label}</InputLabel>}
|
|
{label && <InputLabel htmlFor={rest.id || fieldId}>{label}</InputLabel>}
|
|
@@ -181,8 +184,11 @@ const Input: React.FC<InputProps> = ({
|
|
type={type}
|
|
type={type}
|
|
onKeyPress={keyPressEventHandler}
|
|
onKeyPress={keyPressEventHandler}
|
|
onPaste={pasteEventHandler}
|
|
onPaste={pasteEventHandler}
|
|
|
|
+ ref={ref}
|
|
{...inputOptions}
|
|
{...inputOptions}
|
|
/>
|
|
/>
|
|
|
|
+ {search && children}
|
|
|
|
+
|
|
{withError && isHookFormField && (
|
|
{withError && isHookFormField && (
|
|
<S.FormError>
|
|
<S.FormError>
|
|
<ErrorMessage name={name} />
|
|
<ErrorMessage name={name} />
|
|
@@ -192,6 +198,6 @@ const Input: React.FC<InputProps> = ({
|
|
</S.Wrapper>
|
|
</S.Wrapper>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
-};
|
|
|
|
|
|
+});
|
|
|
|
|
|
export default Input;
|
|
export default Input;
|