@blocklet/payment-react/lib/components/input.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = FormInput;
var _jsxRuntime = require("react/jsx-runtime");
var _react = require("react");
var _material = require("@mui/material");
var _get = _interopRequireDefault(require("lodash/get"));
var _reactHookForm = require("react-hook-form");
var _label = _interopRequireDefault(require("./label"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function FormInputError({
  error
}) {
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
    position: "end",
    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      component: "span",
      color: "error",
      children: error
    })
  });
}
function FormInput({
  ref = void 0,
  name,
  label = "",
  placeholder = "",
  rules = {},
  errorPosition = "bottom",
  wrapperStyle = {},
  inputProps = {},
  required = false,
  tooltip = "",
  description = "",
  ...rest
}) {
  const {
    control,
    formState
  } = (0, _reactHookForm.useFormContext)();
  const inputRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, () => {
    return inputRef.current;
  });
  const error = (0, _get.default)(formState.errors, name)?.message;
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
    name,
    control,
    rules,
    render: ({
      field
    }) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      sx: {
        width: "100%",
        ...wrapperStyle
      },
      children: [!!label && /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
        required,
        tooltip,
        description,
        children: label
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
        fullWidth: true,
        error: !!(0, _get.default)(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__ */(0, _jsxRuntime.jsx)(FormInputError, {
              error
            })
          } : {})
        }
      })]
    })
  });
}