@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
225 lines (223 loc) • 7.63 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WrapperInputVariant = exports.InputLabel = exports.ErrorAlert = exports.BaseInputVariant = void 0;
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _inputs = require("../../types/inputs");
var _jsxRuntime = require("react/jsx-runtime");
/* eslint-disable no-nested-ternary */
var InputOutlined = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, Object.assign({}, props, {
variant: "outlined",
size: "medium",
ref: ref
}));
});
var WrapperInputVariant = exports.WrapperInputVariant = (0, _material.styled)(_material.Box, {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'disabledHoverVariantOutAndFlo' && prop !== 'variant' && prop !== 'error' && prop !== 'backgroundColor';
}
})(function (_ref) {
var theme = _ref.theme,
variant = _ref.variant,
error = _ref.error,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'auto' : _ref$size,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? theme.palette.background["default"] : _ref$backgroundColor,
disabledHoverVariantOutAndFlo = _ref.disabledHoverVariantOutAndFlo;
return Object.assign({
minHeight: _inputs.InputsSizes[size].height,
margin: 0,
color: theme.palette.grey[400],
backgroundColor: backgroundColor,
padding: '8px 12px',
borderRadius: '0px',
border: 'none',
display: 'flex',
flexDirection: 'column',
rowGap: 4,
alignItems: 'flex-start',
justifyContent: 'center',
alignContent: 'center',
boxShadow: 'none',
borderBottom: "1px solid ".concat(theme.palette.background.paper),
transition: 'border 0.4s ease-in-out'
}, variant === 'ghost' && {
backgroundColor: 'transparent',
borderBottom: '1px solid transparent'
}, _inputs.InputsVariants[variant].showBoxShadow && {
boxShadow: theme.shadows[1]
}, _inputs.InputsVariants[variant].disablePadding && {
padding: '5px 0px'
}, _inputs.InputsVariants[variant].showBorder && Object.assign({
border: "1px solid ".concat(theme.palette.background.paper),
borderRadius: '15px'
}, error && {
border: "1px solid ".concat(theme.palette.error.main)
}), variant === 'labelOut' && {
borderRadius: 12
}, variant === 'pipe' && {
borderRadius: '200px',
padding: '8px 20px'
}, variant === 'unfilled' && {
borderBottom: 'none'
}, error && {
borderBottom: "1px solid ".concat(theme.palette.error.main)
}, {
'&:hover': Object.assign({}, (variant === 'outlined' || variant === 'float') && Object.assign({
border: "1px solid ".concat(theme.palette.background.paper),
filter: 'drop-shadow(0px 4px 24px rgba(0, 0, 0, 0.05))'
}, disabledHoverVariantOutAndFlo && {
filter: 'none'
}))
});
});
var InputLabel = exports.InputLabel = (0, _material.styled)('label', {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'focused' && prop !== 'variant' && prop !== 'sx' && prop !== 'disabledHoverVariantOutAndFlo';
}
})(function (_ref2) {
var theme = _ref2.theme,
focused = _ref2.focused,
variant = _ref2.variant;
return Object.assign({
paddingLeft: 0,
fontSize: '14px',
lineHeight: '18px',
fontWeight: 400,
display: 'block',
marginBottom: variant === 'unfilled' || variant === 'divider' ? '12px' : 0,
marginTop: '0px',
color: focused ? theme.palette.primary.main : theme.palette.text.secondary
}, variant === 'labelOut' && {
paddingLeft: '13px',
paddingBottom: '6px'
});
});
var BaseInputVariant = exports.BaseInputVariant = (0, _material.styled)(InputOutlined, {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'variant' && prop !== 'backgroundColor' && prop !== 'sx';
}
})(function (_ref3) {
var theme = _ref3.theme,
variant = _ref3.variant;
return {
borderRadius: '10px',
// color: theme.palette.text.secondary,
color: theme.palette.grey[400],
paddingLeft: 0,
paddingTop: 0,
paddingBottom: 0,
'& div': {
paddingRight: '0px',
paddingLeft: '0px',
paddingBottom: 0
},
'& textarea': Object.assign({}, variant === 'outlined' && {
paddingLeft: '4px'
}, {
'&:-webkit-autofill': {
transition: 'background-color 6000s ease-in-out 0s'
}
}),
'& textarea[placeholder]': {
color: theme.palette.grey[400]
},
'& textarea[placeholder]:focus:not(:placeholder-shown)': {
color: theme.palette.text.primary
},
'& input': {
'&:-webkit-autofill': {
transition: 'background-color 6000s ease-in-out 0s'
},
'&:-webkit-autofill:focus': {
transition: 'background-color 6000s ease-in-out 0s'
},
'&:-webkit-autofill:hover': {
transition: 'background-color 6000s ease-in-out 0s'
}
},
'& input.MuiOutlinedInput-input.MuiInputBase-input': Object.assign({
fontWeight: '400',
fontSize: '16px',
lineHeight: '24px',
padding: '5px 2px',
backgroundColor: 'transparent'
}, _inputs.InputsVariants[variant].showBorder && {
padding: '0'
}, _inputs.InputsVariants[variant].disablePadding && {
padding: '0'
}, {
'&.Mui-disabled ~ .MuiOutlinedInput-notchedOutline': {
borderColor: 'transparent'
}
}),
'& input::placeholder': {
fontWeight: '400',
fontSize: '16px',
lineHeight: '24px',
color: theme.palette.grey[400]
},
'& label.Mui-focused': {
color: theme.palette.text.primary
},
'& .MuiInput-underline:after': {
borderBottomColor: _inputs.InputsVariants[variant].borderColor || theme.palette.background.paper
},
'& .MuiOutlinedInput-root': {
backgroundColor: 'transparent',
rowGap: '10px',
padding: '0 !important',
'& fieldset': {
borderColor: _inputs.InputsVariants[variant].borderColor || theme.palette.background.paper,
color: theme.palette.text.primary,
border: _inputs.InputsVariants[variant].borderColor || 'none'
},
'&:hover fieldset': {
borderColor: _inputs.InputsVariants[variant].borderColor || theme.palette.background.paper
},
'&.Mui-focused fieldset': {
borderColor: _inputs.InputsVariants[variant].borderColor || theme.palette.background.paper
}
},
'& .MuiInputAdornment-root': {
marginLeft: 0,
'& > button': {
marginRight: 0
}
},
'& .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled': {
opacity: '1 !important',
WebkitTextFillColor: 'rgba(0, 0, 0, 0.38) !important'
}
};
});
var ErrorAlert = exports.ErrorAlert = (0, _material.styled)('div', {
shouldForwardProp: function shouldForwardProp(prop) {
return prop !== 'variant';
}
})(function (_ref4) {
var _ref4$variant = _ref4.variant,
variant = _ref4$variant === void 0 ? 'text' : _ref4$variant;
return Object.assign({
color: '#f25a5a',
fontWeight: 400,
display: 'flex',
alignItems: 'center'
}, variant === 'filled' && {
backgroundColor: '#f25a5a1a',
borderRadius: '8px',
padding: '10px',
fontSize: '14px',
lineHeight: '20px',
minHeight: '32px'
}, variant === 'text' && {
fontSize: '12px',
lineHeight: 1.3,
padding: '5px 10px 5px 10px'
});
});