@amaui/ui-react
Version:
UI for React
851 lines (850 loc) • 46.5 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
const Type_1 = __importDefault(require("../Type"));
const Line_1 = __importDefault(require("../Line"));
const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => {
const other = {
pointerEvents: 'none',
borderRadius: 'inherit',
boxSizing: 'border-box',
position: 'absolute',
inset: '0',
width: '100%',
height: '100%'
};
const overflow = {
width: '100%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
};
return {
wrapper: {
position: 'relative',
display: 'inline-flex',
flexDirection: 'column'
},
root: {
display: 'inline-flex',
alignItems: 'center',
position: 'relative',
borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
'& > *': {
'&::-webkit-scrollbar': {
width: '0px',
height: '0px'
}
}
},
// Color
color_default: { color: theme.palette.text.default.primary },
color_neutral: { color: theme.palette.color.neutral.main },
color_primary: { color: theme.palette.color.primary.main },
color_secondary: { color: theme.palette.color.secondary.main },
color_tertiary: { color: theme.palette.color.tertiary.main },
color_quaternary: { color: theme.palette.color.quaternary.main },
color_info: { color: theme.palette.color.info.main },
color_success: { color: theme.palette.color.success.main },
color_warning: { color: theme.palette.color.warning.main },
color_error: { color: theme.palette.color.error.main },
error_color: {
color: [theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80], '!important']
},
error_hover_color: {
color: [theme.palette.light ? theme.palette.color.error[20] : theme.palette.color.error[90], '!important']
},
inputWrapper: Object.assign({
// Reset
margin: '0', border: '0', fontFamily: 'inherit', fontSize: '100%', lineHeight: '1.15', overflow: 'visible', boxSizing: 'border-box', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', opacity: '0', transition: theme.methods.transitions.make('opacity'), borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, cursor: 'text', width: '0', flex: '1 1 auto' }, theme.typography.values.b2),
inputWrapper_focus: {
opacity: '1'
},
input: Object.assign(Object.assign({
// Reset
margin: '0', border: '0', outline: 'none', color: theme.palette.text.default.primary, background: 'transparent', '-webkit-tap-highlight-color': 'transparent', textAlign: 'start' }, theme.typography.values.b2), overflow),
multiline: {
resize: 'none',
overflow: 'auto',
whiteSpace: 'normal'
},
input_size_small: {
// height: '48px',
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
paddingTop: theme.methods.space.value(2.5, 'px')
},
input_size_regular: {
// height: '56px',
padding: `11px ${theme.methods.space.value(2, 'px')}`,
paddingTop: theme.methods.space.value(3, 'px')
},
input_size_large: {
// height: '64px',
padding: theme.methods.space.value(2, 'px'),
paddingTop: theme.methods.space.value(3.5, 'px')
},
inputWrapper_without_label_size_small: {
paddingTop: `${theme.methods.space.value(1, 'px')}`
},
inputWrapper_without_label_size_regular: {
paddingTop: `${theme.methods.space.value(2, 'px')}`
},
inputWrapper_without_label_size_large: {
paddingTop: `${theme.methods.space.value(2, 'px')}`
},
input_version_text: {
'&:not($input_start_icon)': {
paddingInline: '0'
}
},
input_start_icon: {
paddingInlineStart: '0'
},
input_end_icon: {
paddingInlineEnd: '0'
},
input_version_outlined_size_small: {
paddingTop: theme.methods.space.value(1.75, 'px'),
paddingBottom: theme.methods.space.value(1.75, 'px')
},
input_version_outlined_size_regular: {
paddingTop: theme.methods.space.value(2.25, 'px'),
paddingBottom: theme.methods.space.value(2.25, 'px')
},
input_version_outlined_size_large: {
paddingTop: theme.methods.space.value(2.75, 'px'),
paddingBottom: theme.methods.space.value(2.75, 'px')
},
input_align_start: {
textAlign: 'start'
},
input_align_center: {
textAlign: 'center'
},
input_align_end: {
textAlign: 'end'
},
label: Object.assign(Object.assign({ position: 'absolute', insetInlineStart: '16px', transformOrigin: 'top left', transition: theme.methods.transitions.make(['color', 'inset', 'margin', 'transform']), pointerEvents: 'none', userSelect: 'none' }, overflow), { width: 'auto' }),
label_regular: {
top: '50%',
transform: 'translate(0px, -50%) scale(1)'
},
label_multiline: {
top: '0px'
},
label_rtl: {
transformOrigin: 'top right'
},
label_version_text: {
insetInlineStart: '0px'
},
label_icon_start: {
insetInlineStart: theme.methods.space.value(6.5, 'px')
},
label_size_small_multiline: {
transform: 'translate(4px, 14px) scale(1)'
},
label_size_regular_multiline: {
transform: 'translate(4px, 18px) scale(1)'
},
label_size_large_multiline: {
transform: 'translate(4px, 22px) scale(1)'
},
// Focus
label_version_text_focus: {
top: '0px',
insetInlineStart: '0px',
transform: 'translate(0, 6px) scale(0.667)'
},
label_version_outlined_focus: {
top: '0px',
insetInlineStart: '15px',
marginInlineStart: '4px',
transform: 'translate(0, -6px) scale(0.667)'
},
label_version_filled_focus: {
top: '0px',
insetInlineStart: '15px',
transform: 'translate(0, 6px) scale(0.667)'
},
background: Object.assign(Object.assign({}, other), { background: 'currentColor', borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected, transition: theme.methods.transitions.make(['opacity']) }),
background_hover: {
opacity: theme.palette.visual_contrast.default.opacity.focus
},
background_focus: {
opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected
},
border: Object.assign(Object.assign({}, other), { borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, boxShadow: 'inset 0px -1px 0px 0px currentColor', transition: theme.methods.transitions.make(['box-shadow']) }),
border_focus: {
boxShadow: 'inset 0px -2px 0px 0px currentColor'
},
fieldset: Object.assign(Object.assign({}, other), { top: '-5px', height: 'calc(100% + 5px)', borderRadius: `${theme.shape.radius.unit}px`, border: '1px solid currentColor', padding: '0', paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`, transition: theme.methods.transitions.make(['border', 'padding']) }),
fieldset_focus: {
borderWidth: '2px',
paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`
},
legend: Object.assign(Object.assign({ display: 'inline-flex', height: '11px', width: 'auto', padding: '0px', maxWidth: '0.001px', whiteSpace: 'nowrap', visibility: 'hidden', overflow: 'hidden', transition: theme.methods.transitions.make(['max-width', 'padding'], { duration: 'xxs' }) }, theme.typography.values.b2), { fontSize: '0.64rem', letterSpacing: 'normal' }),
legend_focus: {
maxWidth: '100%',
padding: `0 ${theme.methods.space.value(0.5, 'px')}`,
transition: theme.methods.transitions.make(['max-width', 'padding'], { duration: 'xs' })
},
footer: {
marginTop: '4px',
paddingInline: theme.methods.space.value(2, 'px')
},
footer_version_text: {
paddingInline: '0'
},
helperText: {
display: 'inline-flex',
color: theme.palette.text.default.secondary,
userSelect: 'none'
},
counterText: {
display: 'inline-flex',
justifyContent: 'flex-end',
color: theme.palette.text.default.secondary,
userSelect: 'none',
flex: '1 0 auto'
},
// Start and end icon
icon: {
display: 'inline-flex',
alignItems: 'center',
flex: '0 0 auto'
},
icon_size_small: {
paddingBlock: '12px'
},
icon_size_regular: {
paddingBlock: '16px'
},
icon_size_large: {
paddingBlock: '24px'
},
icon_button_size_small: {
paddingBlock: '4px'
},
icon_button_size_regular: {
paddingBlock: '8px'
},
icon_button_size_large: {
paddingBlock: '12px'
},
icon_start: {
maxWidth: '40%',
overflow: 'auto hidden',
paddingInlineEnd: '16px',
paddingInlineStart: '12px'
},
icon_vertical_align_start: {
alignSelf: 'flex-start'
},
icon_vertical_align_center: {
alignSelf: 'center',
paddingBlock: '0px !important'
},
icon_vertical_align_end: {
alignSelf: 'flex-end'
},
icon_end: {
maxWidth: '40%',
overflow: 'auto hidden',
paddingInlineStart: theme.methods.space.value(2, 'px'),
paddingInlineEnd: theme.methods.space.value(1.5, 'px')
},
addition: {
color: theme.palette.text.default.secondary
},
addition_size_small: {
paddingBottom: theme.methods.space.value(1, 'px'),
paddingTop: theme.methods.space.value(2.5, 'px')
},
addition_size_regular: {
paddingBottom: theme.methods.space.value(2, 'px'),
paddingTop: theme.methods.space.value(3, 'px')
},
addition_size_large: {
paddingBottom: theme.methods.space.value(2, 'px'),
paddingTop: theme.methods.space.value(3.5, 'px')
},
addition_version_outlined_size_small: {
paddingTop: theme.methods.space.value(1.75, 'px'),
paddingBottom: theme.methods.space.value(1.75, 'px')
},
addition_version_outlined_size_regular: {
paddingTop: theme.methods.space.value(2.25, 'px'),
paddingBottom: theme.methods.space.value(2.25, 'px')
},
addition_version_outlined_size_large: {
paddingTop: theme.methods.space.value(2.75, 'px'),
paddingBottom: theme.methods.space.value(2.75, 'px')
},
addition_without_label_size_small: {
paddingTop: `${theme.methods.space.value(1, 'px')}`
},
addition_without_label_size_regular: {
paddingTop: `${theme.methods.space.value(2, 'px')}`
},
addition_without_label_size_large: {
paddingTop: `${theme.methods.space.value(2, 'px')}`
},
prefix: {
flex: '0 0 auto',
marginInlineStart: '16px',
marginInlineEnd: '8px',
opacity: '0',
transition: theme.methods.transitions.make('opacity'),
},
prefix_noStartMargin: {
marginInlineStart: '0px'
},
prefix_focus: {
opacity: '1'
},
noPrefixMargin: {
marginInlineEnd: '0'
},
sufix: {
flex: '0 0 auto',
marginInlineEnd: '16px',
marginInlineStart: '8px',
opacity: '0',
transition: theme.methods.transitions.make('opacity'),
},
sufix_focus: {
opacity: '1'
},
sufix_noEndMargin: {
marginInlineEnd: '0px'
},
noSufixMargin: {
marginInlineStart: '0'
},
fullWidth: {
width: '100%'
},
clear: {
cursor: 'pointer',
pointerEvents: 'all !important',
userSelect: 'none',
transition: theme.methods.transitions.make('transform', { duration: 'xs' }),
'&:active': {
transform: 'scale(0.87)'
}
},
disabled: {
opacity: '0.54',
pointerEvents: 'none',
cursor: 'default'
}
};
}, { name: 'amaui-TextField' });
const TextField = react_1.default.forwardRef((props_, ref) => {
var _a, _b, _c, _d, _e, _f;
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const { tonal = true, color = 'primary', version = 'filled', size = 'regular', rootRef, valueDefault, value: value_, onChange, name, label: label_, align, start, startVerticalAlign = 'start', end: end_, endVerticalAlign: endVerticalAlign_ = 'start', placeholder, fullWidth: fullWidth_, helperText, counter, prefix, sufix, noPrefixMargin, noSufixMargin, enabled, autoFocus, autoComplete, type: type_ = 'text', required, optional, optionalText = 'optional', error, multiline, rows: rows_, minRows = 1, maxRows, clear, focus: focus_, footer: footer_, subscription, controlled, minimal, restoreSelection = false, minWidth, readOnly, disabled, onInput: onInput_, onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, inputProps = {}, InputWrapperProps = {}, HelperTextProps, IconProps, IconClear = IconMaterialCloseW100_1.default, InputComponent: InputComponent_, WrapperComponent = 'div', Component = 'div', className, style, children,
// Other
colorUnchecked } = props, other = __rest(props, ["tonal", "color", "version", "size", "rootRef", "valueDefault", "value", "onChange", "name", "label", "align", "start", "startVerticalAlign", "end", "endVerticalAlign", "placeholder", "fullWidth", "helperText", "counter", "prefix", "sufix", "noPrefixMargin", "noSufixMargin", "enabled", "autoFocus", "autoComplete", "type", "required", "optional", "optionalText", "error", "multiline", "rows", "minRows", "maxRows", "clear", "focus", "footer", "subscription", "controlled", "minimal", "restoreSelection", "minWidth", "readOnly", "disabled", "onInput", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "inputProps", "InputWrapperProps", "HelperTextProps", "IconProps", "IconClear", "InputComponent", "WrapperComponent", "Component", "className", "style", "children", "colorUnchecked"]);
const { classes } = useStyle();
const refs = {
root: react_1.default.useRef(undefined),
input: react_1.default.useRef(undefined),
carret: react_1.default.useRef(undefined),
restoreSelection: react_1.default.useRef(restoreSelection),
controlled: react_1.default.useRef(controlled),
ids: {
label: react_1.default.useId(),
clear: react_1.default.useId()
}
};
refs.controlled.current = controlled;
const keys = react_1.default.useMemo(() => {
const result = [];
const items = [fullWidth_];
items.forEach(item => {
if ((0, utils_1.is)('object', item))
Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
});
return (0, utils_1.unique)(result);
}, [fullWidth_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
});
const label = name !== undefined ? name : label_;
let endVerticalAlign = endVerticalAlign_;
const fullWidth = (0, utils_2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
const rowValue = () => {
var _a;
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
const htmlFontSize = (0, utils_1.isEnvironment)('browser') ? +window.getComputedStyle(rootDocument.documentElement).fontSize.slice(0, -2) : 16;
const padding = size === 'small' ? 28 : size === 'regular' ? 36 : 44;
const row_ = Math.round(htmlFontSize * 0.875 * 1.4285714285714286);
return {
height: row_,
padding
};
};
const [value, setValue] = react_1.default.useState((valueDefault !== undefined ? valueDefault : value_));
const [focus, setFocus] = react_1.default.useState(focus_);
const [mouseDown, setMouseDown] = react_1.default.useState(false);
const [hover, setHover] = react_1.default.useState(false);
const [row, setRow] = react_1.default.useState(rowValue);
const [rows, setRows] = react_1.default.useState(1);
let end = end_;
let type = type_;
const styles = {
root: {},
input: {},
inputWrapper: {},
background: {
color: theme.palette.text.default.secondary
}
};
refs.restoreSelection.current = restoreSelection;
react_1.default.useEffect(() => {
var _a;
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
const htmlObserver = new MutationObserver(() => setRow(rowValue));
htmlObserver.observe(rootDocument.documentElement, { attributes: true, attributeFilter: ['style'] });
rootDocument.addEventListener('mouseup', onInputWrapperMouseUp);
return () => {
// Clean up
rootDocument.removeEventListener('mouseup', onInputWrapperMouseUp);
htmlObserver.disconnect();
};
}, []);
react_1.default.useEffect(() => {
setTimeout(() => {
if (refs.restoreSelection.current && refs.carret.current) {
// Carret restore previous value
try {
refs.input.current.selectionStart = refs.carret.current.start;
refs.input.current.selectionEnd = refs.carret.current.end;
}
catch (error) { }
}
});
}, [value]);
react_1.default.useEffect(() => {
if (value_ !== undefined && value_ !== value) {
setValue(value_);
}
}, [value_]);
react_1.default.useEffect(() => {
if (focus_ !== focus && focus_ !== undefined)
setFocus(focus_);
}, [focus_]);
react_1.default.useEffect(() => {
const method = (event) => {
if (event === 'clear')
onClear();
};
if (subscription)
subscription.subscribe(method);
return () => {
if (subscription)
subscription.unsubscribe(method);
};
}, [subscription]);
const onUpdateRows = () => {
if (multiline && row !== undefined) {
const heightValue = refs.input.current.style.height;
// Get actual height with auto
refs.input.current.style.height = 'auto';
const scrollHeight = refs.input.current.scrollHeight;
// Revert back to previous value
refs.input.current.style.height = heightValue;
const newRows = Math.floor(scrollHeight / row.height);
setRows(newRows);
}
};
const onUpdate = (event) => {
const inputValue = event.target.value;
// Carret save previous value
refs.carret.current = { start: refs.input.current.selectionStart, end: refs.input.current.selectionEnd };
// Only restore if it's not regular carret value
if (refs.carret.current.start === inputValue.length)
refs.carret.current = undefined;
onUpdateRows();
// Inner controlled value
if (!refs.controlled.current)
setValue(inputValue);
if ((0, utils_1.is)('function', onChange))
onChange(inputValue, event);
};
const onInput = (event) => {
onUpdateRows();
if ((0, utils_1.is)('function', onInput_))
onInput_(event);
};
const onClear = react_1.default.useCallback(() => {
if (!disabled) {
const valueNew = '';
// Inner controlled value
if (!refs.controlled.current)
setValue(valueNew);
if ((0, utils_1.is)('function', onChange))
onChange(valueNew);
}
}, [disabled, onChange]);
const onInputWrapperMouseDown = react_1.default.useCallback((event) => {
if (!disabled) {
setMouseDown(true);
refs.input.current.focus();
if ((0, utils_1.is)('function', InputWrapperProps.onMouseDown))
InputWrapperProps.onMouseDown(event);
}
}, []);
const onInputWrapperMouseUp = react_1.default.useCallback((event) => {
if (!disabled) {
setMouseDown(false);
if ((0, utils_1.is)('function', InputWrapperProps.onMouseUp))
InputWrapperProps.onMouseUp(event);
}
}, []);
const onInputWrapperClick = react_1.default.useCallback((event) => {
var _a;
if (!disabled) {
if (event.target === event.currentTarget)
(_a = refs.input.current) === null || _a === void 0 ? void 0 : _a.focus();
if ((0, utils_1.is)('function', InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.onClick))
InputWrapperProps.onClick(event);
}
}, []);
const onFocus = (event) => {
if (!disabled) {
setFocus(focus_ !== undefined ? focus_ : true);
if ((0, utils_1.is)('function', onFocus_))
onFocus_(event);
}
};
const onBlur = (event) => {
if (!disabled) {
setFocus(focus_ !== undefined ? focus_ : false);
if ((0, utils_1.is)('function', onBlur_))
onBlur_(event);
}
};
const onMouseEnter = react_1.default.useCallback((event) => {
if (!disabled) {
setHover(true);
if ((0, utils_1.is)('function', onMouseEnter_))
onMouseEnter_(event);
}
}, []);
const onMouseLeave = react_1.default.useCallback((event) => {
if (!disabled) {
setHover(false);
if ((0, utils_1.is)('function', onMouseLeave_))
onMouseLeave_(event);
}
}, []);
const palette = color === 'default' ? theme.palette.color.neutral : !theme.palette.color[color] ? theme.methods.color(color) : theme.palette.color[color];
if (!focus) {
styles.root.color = theme.palette.text.default.secondary;
}
else {
styles.root.color = styles.input.caretColor = tonal ? theme.methods.palette.color.value(color, 30, true, palette) : (color === 'default' ? theme.palette.text.default.primary : ((_a = theme.palette.color[color]) === null || _a === void 0 ? void 0 : _a.main) || color);
}
if (error) {
styles.input.caretColor = theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80];
}
if (tonal)
styles.background.color = theme.methods.palette.color.value(color, 20, true, palette);
const footer = (footer_ || !!helperText || counter !== undefined || required);
const Wrapper = footer ? WrapperComponent : react_1.default.Fragment;
let ComponentProps = {};
let WrapperProps = {};
if (value && clear) {
if (!Array.isArray(end))
end = [end].filter(Boolean);
const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
if (!exists) {
if (props.endVerticalAlign === undefined)
endVerticalAlign = 'center';
end.push((0, jsx_runtime_1.jsx)(IconClear, Object.assign({ color: 'inherit', onClick: onClear }, IconProps, { className: (0, style_react_1.classNames)([
IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
classes.clear
]) }), refs.ids.clear));
}
}
if (footer) {
WrapperProps = Object.assign({}, other);
WrapperProps.ref = item => {
if (rootRef) {
if ((0, utils_1.is)('function', rootRef))
rootRef(item);
else
rootRef.current = item;
}
refs.root.current = item;
};
WrapperProps['className'] = (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-wrapper',
fullWidth && 'amaui-TextField-full-width',
disabled && 'amaui-TextField-disabled',
fullWidth && 'amaui-full-width'
],
className,
classes.wrapper,
fullWidth && classes.fullWidth,
disabled && classes.disabled
]);
WrapperProps.style = Object.assign({}, style);
}
else {
ComponentProps = Object.assign({}, other);
ComponentProps.ref = item => {
if (rootRef) {
if ((0, utils_1.is)('function', rootRef))
rootRef(item);
else
rootRef.current = item;
}
refs.root.current = item;
};
ComponentProps.className = className;
ComponentProps.style = Object.assign({}, style);
}
ComponentProps.style = Object.assign(Object.assign({}, ComponentProps.style), styles.root);
let InputComponent = 'input';
if (multiline) {
InputComponent = 'textarea';
inputProps.rows = 1;
type = undefined;
if (row) {
if (rows_) {
styles.input.height = (rows_ * row.height);
styles.inputWrapper.height = (rows_ * row.height) + row.padding;
}
else {
styles.input.height = (row.height * (0, utils_1.clamp)(rows, minRows, maxRows));
styles.inputWrapper.height = (row.height * (0, utils_1.clamp)(rows, minRows, maxRows)) + row.padding;
}
}
}
// override the input element
// with a custom value
if (InputComponent_)
InputComponent = InputComponent_;
// onInput
if (!['input', 'textarea'].includes(InputComponent)) {
inputProps.onInput = onInput;
}
const valueWithData = value !== undefined && String(value);
return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, WrapperProps, { children: [(0, jsx_runtime_1.jsxs)(Component, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onMouseEnter, onTouchEnd: onMouseLeave, role: 'textbox', "aria-multiline": multiline, "aria-labelledby": refs.ids.label }, ComponentProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-root', ,
`amaui-TextField-version-${version}`,
`amaui-TextField-size-${size}`,
multiline && `amaui-TextField-multiline`,
valueWithData && 'amaui-TextField-value',
error && `amaui-TextField-error`,
required && 'amaui-TextField-required',
enabled && 'amaui-TextField-enabled',
hover && `amaui-TextField-hover`,
mouseDown && `amaui-TextField-mouse-down`,
focus && `amaui-TextField-focus`,
readOnly && `amaui-TextField-read-only`,
disabled && 'amaui-TextField-disabled',
fullWidth && 'amaui-full-width'
],
ComponentProps.className,
classes.root,
classes[`color_${color}`],
fullWidth && classes.fullWidth,
error && (hover ? classes.error_hover_color : classes.error_color),
!footer && disabled && classes.disabled
]), style: Object.assign({ minWidth }, ComponentProps === null || ComponentProps === void 0 ? void 0 : ComponentProps.style) }, { children: [!minimal && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [['filled'].includes(version) && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-background'
],
classes.background,
(enabled || valueWithData || focus) && classes.background_focus,
hover && classes.background_hover
]), style: styles.background })), ['text', 'filled'].includes(version) && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-border'
],
classes.border,
focus && classes.border_focus
]), style: styles.border })), ['outlined'].includes(version) && ((0, jsx_runtime_1.jsx)("fieldset", Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-fieldset'
],
classes.fieldset,
focus && classes.fieldset_focus
]), style: styles.fieldset }, { children: (0, jsx_runtime_1.jsxs)("legend", Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-legend'
],
classes.legend,
(enabled || valueWithData || focus) && label !== undefined && classes.legend_focus
]) }, { children: [label, required ? '*' : '', optional ? ` (${optionalText})` : ''] })) })))] }), label && ((0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2', id: refs.ids.label, Component: 'label', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-label'
],
classes.label,
classes[`label_${multiline ? 'multiline' : 'regular'}`],
classes[`label_version_${version}`],
classes[`label_size_${size}`],
multiline && classes[`label_size_${size}_multiline`],
classes[`label_version_${version}_size_${size}`],
(enabled || valueWithData || focus) && [
classes[`label_focus`],
classes[`label_version_${version}_focus`],
classes[`label_version_${version}_size_${size}${multiline ? '_multiline' : ''}_focus`],
multiline && classes.label_multiline_focus
],
theme.direction === 'rtl' && classes.label_rtl,
start && [
classes.label_icon_start,
classes[`label_version_${version}_icon_start`]
]
]) }, { children: [label, required ? '*' : '', optional ? ` (${optionalText})` : ''] }))), !minimal && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!react_1.default.Children.toArray(start).length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-icon',
'amaui-TextField-icon-start'
],
classes.icon,
classes.icon_start,
classes[`icon${((_c = (_b = start === null || start === void 0 ? void 0 : start.type) === null || _b === void 0 ? void 0 : _b.displayName) === null || _c === void 0 ? void 0 : _c.includes('IconButton')) ? '_button' : ''}_size_${size}`],
classes[`icon_version_${version}`],
classes[`icon_vertical_align_${startVerticalAlign}`]
]) }, { children: react_1.default.Children.toArray(start).map((item, index) => {
var _a, _b, _c, _d;
return (react_1.default.cloneElement(item, {
key: index,
size: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.size) !== undefined ? (_b = item.props) === null || _b === void 0 ? void 0 : _b.size : 'regular',
color: ((_c = item.props) === null || _c === void 0 ? void 0 : _c.color) !== undefined ? (_d = item.props) === null || _d === void 0 ? void 0 : _d.color : theme.palette.text.default.secondary,
style: Object.assign(Object.assign({}, item.props.style), styles.icon)
}));
}) }))) }), prefix !== undefined && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-addition',
'amaui-TextField-prefix'
],
classes.addition,
classes.prefix,
(start || version === 'text') && classes.prefix_noStartMargin,
classes[`addition_size_${size}`],
classes[`addition_version_${version}_size_${size}`],
(enabled || valueWithData || focus) && classes.prefix_focus,
noPrefixMargin && classes.noPrefixMargin,
minimal && !label && classes[`addition_without_label_size_${size}`]
]), version: 'b2' }, { children: prefix }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({}, InputWrapperProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-input-wrapper'
],
classes.inputWrapper,
InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className,
(enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus,
classes[`input_version_${version}`],
classes[`input_size_${size}`],
classes[`input_version_${version}_size_${size}`],
(prefix || start) && classes.input_start_icon,
(sufix || end) && classes.input_end_icon,
minimal && !label && classes[`inputWrapper_without_label_size_${size}`]
]), onClick: onInputWrapperClick, onMouseUp: onInputWrapperMouseUp, onMouseDown: onInputWrapperMouseDown, style: Object.assign(Object.assign({}, styles.inputWrapper), InputWrapperProps.style) }, { children: [children, (0, jsx_runtime_1.jsx)(InputComponent, Object.assign({}, inputProps, { ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.input.current = item;
if (inputProps.ref) {
if ((0, utils_1.is)('function', inputProps.ref))
inputProps.ref(item);
else
inputProps.ref.current = item;
}
}, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-input'
],
classes.input,
inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
multiline && classes.multiline,
align && classes[`input_align_${align}`]
]), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, onChange: onUpdate, value: value !== undefined ? value : '', type: type, autoFocus: autoFocus, autoComplete: autoComplete, readOnly: readOnly, disabled: disabled, style: Object.assign(Object.assign({}, styles.input), inputProps.style) }))] })), sufix !== undefined && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-addition',
'amaui-TextField-sufix'
],
classes.addition,
classes.sufix,
(end || version === 'text') && classes.sufix_noEndMargin,
classes[`addition_size_${size}`],
classes[`addition_version_${version}_size_${size}`],
(enabled || valueWithData || focus) && classes.sufix_focus,
noSufixMargin && classes.noSufixMargin
]), version: 'b2' }, { children: sufix }))), !minimal && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!react_1.default.Children.toArray(end).length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-icon',
'amaui-TextField-icon-end'
],
classes.icon,
classes.icon_end,
classes[`icon${((_e = (_d = end === null || end === void 0 ? void 0 : end.type) === null || _d === void 0 ? void 0 : _d.displayName) === null || _e === void 0 ? void 0 : _e.includes('IconButton')) ? '_button' : ''}_size_${size}`],
classes[`icon_version_${version}`],
classes[`icon_vertical_align_${endVerticalAlign}`]
]) }, { children: react_1.default.Children.toArray(end).map((item, index) => {
var _a, _b, _c, _d;
return (react_1.default.cloneElement(item, {
key: index,
size: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.size) !== undefined ? (_b = item.props) === null || _b === void 0 ? void 0 : _b.size : size,
color: ((_c = item.props) === null || _c === void 0 ? void 0 : _c.color) !== undefined ? (_d = item.props) === null || _d === void 0 ? void 0 : _d.color : error ? theme.palette.light ? theme.palette.color.error[hover ? 20 : 40] : theme.palette.color.error[hover ? 90 : 80] : theme.palette.text.default.secondary,
style: Object.assign(Object.assign({}, item.props.style), styles.icon)
}));
}) }))) })] })), footer && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!!helperText || counter !== undefined || required) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', justify: 'space-between', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-footer'
],
classes.footer,
classes[`footer_version_${version}`]
]) }, { children: [(helperText || required) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, HelperTextProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-helper-text',
error && 'amaui-TextField-error'
],
HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className,
classes.helperText,
error && classes.error_color
]) }, { children: helperText !== undefined ? helperText : required ? '*required' : '' }))), counter && ((0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('TextField', theme) && [
'amaui-TextField-counter'
],
classes.counterText,
error && classes.error_color
]) }, { children: [((_f = String(value)) === null || _f === void 0 ? void 0 : _f.length) || 0, "/", counter] })))] }))), footer_] })] })));
});
TextField.displayName = 'amaui-TextField';
exports.default = TextField;