@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
74 lines • 3.12 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["variant", "size", "error", "label", "backgroundColor", "LabelProps", "errorMessage", "errorVariant", "WrapperProps", "boxProps", "disabledHoverVariantOutAndFlo", "onFocus", "onBlur", "inputRef", "helperNode", "placeholder"];
/* eslint-disable no-shadow */
import React from 'react';
import { Box } from '@mui/material';
import { WrapperInputVariant, ErrorAlert, InputLabel, BaseInputVariant } from '../../base';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var TextFieldV5LabelOut = /*#__PURE__*/React.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 = _objectWithoutProperties(props, _excluded);
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
onFocusInput = _React$useState2[0],
setOnFocusInput = _React$useState2[1];
return /*#__PURE__*/_jsxs(Box, Object.assign({}, boxProps, {
ref: propRef,
children: [variant === 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, Object.assign({
variant: variant,
htmlFor: props.id,
focused: onFocusInput
}, LabelProps, {
children: label
})), /*#__PURE__*/_jsxs(WrapperInputVariant, Object.assign({
variant: variant,
error: error,
size: size,
disabledHoverVariantOutAndFlo: disabledHoverVariantOutAndFlo,
backgroundColor: backgroundColor
}, WrapperProps, {
children: [variant !== 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, Object.assign({
variant: variant,
htmlFor: props.id,
focused: onFocusInput
}, LabelProps, {
children: label
})), /*#__PURE__*/_jsx(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__*/_jsx(ErrorAlert, {
variant: errorVariant,
children: errorMessage
})]
}));
});
export default TextFieldV5LabelOut;