@wulperstudio/cms/node/components/TextFieldV5LabelOut/TextFieldV5LabelOut.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _base = require("../../base");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["variant", "size", "error", "label", "backgroundColor", "LabelProps", "errorMessage", "errorVariant", "WrapperProps", "boxProps", "disabledHoverVariantOutAndFlo", "onFocus", "onBlur", "inputRef", "helperNode", "placeholder"];
/* eslint-disable no-shadow */
var TextFieldV5LabelOut = /*#__PURE__*/_react["default"].forwardRef(function (props, propRef) {
  var _props$variant = props.variant,
    variant = _props$variant === void 0 ? 'divider' : _props$variant,
    size = props.size,
    error = props.error,
    label = props.label,
    backgroundColor = props.backgroundColor,
    LabelProps = props.LabelProps,
    errorMessage = props.errorMessage,
    errorVariant = props.errorVariant,
    WrapperProps = props.WrapperProps,
    boxProps = props.boxProps,
    disabledHoverVariantOutAndFlo = props.disabledHoverVariantOutAndFlo,
    _onFocus = props.onFocus,
    _onBlur = props.onBlur,
    inputRef = props.inputRef,
    helperNode = props.helperNode,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? 'Enter text here' : _props$placeholder,
    inputProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var _React$useState = _react["default"].useState(false),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    onFocusInput = _React$useState2[0],
    setOnFocusInput = _React$useState2[1];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, Object.assign({}, boxProps, {
    ref: propRef,
    children: [variant === 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, Object.assign({
      variant: variant,
      htmlFor: props.id,
      focused: onFocusInput
    }, LabelProps, {
      children: label
    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_base.WrapperInputVariant, Object.assign({
      variant: variant,
      error: error,
      size: size,
      disabledHoverVariantOutAndFlo: disabledHoverVariantOutAndFlo,
      backgroundColor: backgroundColor
    }, WrapperProps, {
      children: [variant !== 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, Object.assign({
        variant: variant,
        htmlFor: props.id,
        focused: onFocusInput
      }, LabelProps, {
        children: label
      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.BaseInputVariant, Object.assign({
        variant: variant,
        placeholder: placeholder,
        fullWidth: true,
        onFocus: function onFocus(e) {
          setOnFocusInput(true);
          if (_onFocus) _onFocus(e);
        },
        onBlur: function onBlur(e) {
          setOnFocusInput(false);
          if (_onBlur) _onBlur(e);
        },
        inputRef: inputRef
      }, inputProps))]
    })), helperNode, error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.ErrorAlert, {
      variant: errorVariant,
      children: errorMessage
    })]
  }));
});
var _default = exports["default"] = TextFieldV5LabelOut;