@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 = "",
  layout = "vertical",
  slotProps,
  ...rest
}) {
  const {
    control,
    formState
  } = (0, _reactHookForm.useFormContext)();
  const theme = (0, _material.useTheme)();
  const isMobile = (0, _material.useMediaQuery)(theme.breakpoints.down("sm"));
  const inputRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, () => {
    return inputRef.current;
  });
  const error = (0, _get.default)(formState.errors, name)?.message;
  const isHorizontal = layout === "horizontal" && !isMobile;
  const mergedSlotProps = {
    htmlInput: {
      ...inputProps,
      ...slotProps?.htmlInput
    },
    input: Object.assign(rest.InputProps || {}, slotProps?.input || {}, errorPosition === "right" && error ? {
      endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(FormInputError, {
        error
      })
    } : {})
  };
  const renderLabel = () => {
    if (!label) return null;
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
      required,
      tooltip,
      description,
      boxSx: isHorizontal ? {
        width: "fit-content",
        whiteSpace: "nowrap",
        minWidth: "fit-content"
      } : void 0,
      children: label
    });
  };
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
    name,
    control,
    rules,
    render: ({
      field
    }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        width: "100%",
        ...wrapperStyle
      },
      children: isHorizontal ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        spacing: 2,
        sx: {
          alignItems: "center",
          justifyContent: "space-between"
        },
        children: [renderLabel(), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
          fullWidth: false,
          error: !!error,
          helperText: errorPosition === "bottom" && error ? error : "",
          placeholder,
          size: "small",
          ...field,
          ...rest,
          inputRef,
          slotProps: mergedSlotProps,
          sx: {
            flex: 1,
            ...rest.sx
          }
        })]
      }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [renderLabel(), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
          fullWidth: true,
          error: !!error,
          helperText: errorPosition === "bottom" && error ? error : "",
          placeholder,
          size: "small",
          ...field,
          ...rest,
          inputRef,
          slotProps: mergedSlotProps
        })]
      })
    })
  });
}