@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
209 lines • 6.84 kB
JavaScript
/* eslint-disable no-nested-ternary */
import React from 'react';
import { styled, Box, TextField } from '@mui/material';
import { InputsSizes, InputsVariants } from '../../types/inputs';
import { jsx as _jsx } from "react/jsx-runtime";
var InputOutlined = /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/_jsx(TextField, Object.assign({}, props, {
variant: "outlined",
size: "medium",
ref: ref
}));
});
export var WrapperInputVariant = styled(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: InputsSizes[size].height,
margin: 0,
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'
}, InputsVariants[variant].showBoxShadow && {
boxShadow: theme.shadows[1]
}, InputsVariants[variant].disablePadding && {
padding: '5px 0px'
}, 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'
}))
});
});
export var InputLabel = 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'
});
});
export var BaseInputVariant = 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,
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'
}
}),
'& 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'
}, InputsVariants[variant].showBorder && {
padding: '0'
}, 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: InputsVariants[variant].borderColor || theme.palette.background.paper
},
'& .MuiOutlinedInput-root': {
backgroundColor: 'transparent',
rowGap: '10px',
padding: '0 !important',
'& fieldset': {
borderColor: InputsVariants[variant].borderColor || theme.palette.background.paper,
color: theme.palette.text.primary,
border: InputsVariants[variant].borderColor || 'none'
},
'&:hover fieldset': {
borderColor: InputsVariants[variant].borderColor || theme.palette.background.paper
},
'&.Mui-focused fieldset': {
borderColor: 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'
}
};
});
export var ErrorAlert = 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'
});
});