@blocklet/payment-react
Version:
Reusable react components for payment kit v2
62 lines (61 loc) • 1.94 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useImperativeHandle, useRef } from "react";
import { Box, InputAdornment, TextField, Typography } from "@mui/material";
import get from "lodash/get";
import { Controller, useFormContext } from "react-hook-form";
import FormLabel from "./label.js";
function FormInputError({ error }) {
return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: error }) });
}
export default function FormInput({
ref = void 0,
name,
label = "",
placeholder = "",
rules = {},
errorPosition = "bottom",
wrapperStyle = {},
inputProps = {},
required = false,
tooltip = "",
description = "",
...rest
}) {
const { control, formState } = useFormContext();
const inputRef = useRef(null);
useImperativeHandle(ref, () => {
return inputRef.current;
});
const error = get(formState.errors, name)?.message;
return /* @__PURE__ */ jsx(
Controller,
{
name,
control,
rules,
render: ({ field }) => /* @__PURE__ */ jsxs(Box, { sx: { width: "100%", ...wrapperStyle }, children: [
!!label && /* @__PURE__ */ jsx(FormLabel, { required, tooltip, description, children: label }),
/* @__PURE__ */ jsx(
TextField,
{
fullWidth: true,
error: !!get(formState.errors, name),
helperText: errorPosition === "bottom" && error ? error : "",
placeholder,
size: "small",
...field,
...rest,
inputRef,
slotProps: {
htmlInput: inputProps,
input: Object.assign(
rest.InputProps || {},
errorPosition === "right" && error ? { endAdornment: /* @__PURE__ */ jsx(FormInputError, { error }) } : {}
)
}
}
)
] })
}
);
}