@onesy/ui-react
Version:
UI for React
871 lines (863 loc) • 35.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["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"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { clamp, is, isEnvironment, unique } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import IconMaterialClose from '@onesy/icons-material-rounded-react/IconMaterialCloseW100';
import TypeElement from '../Type';
import LineElement from '../Line';
import useMediaQuery from '../useMediaQuery';
import { valueBreakpoints, staticClassName } from '../utils';
const useStyle = styleMethod(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: _objectSpread({
// 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',
flex: '1 1 auto'
}, theme.typography.values.b2),
inputWrapper_focus: {
opacity: '1'
},
input: _objectSpread(_objectSpread({
// 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: _objectSpread(_objectSpread({
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: _objectSpread(_objectSpread({}, 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,
zIndex: '-1',
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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({}, 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: _objectSpread(_objectSpread({
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: 'onesy-TextField'
});
const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useOnesyTheme();
const l = theme.l;
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTextField?.props?.default), props_), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [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 = IconMaterialClose,
InputComponent: InputComponent_,
WrapperComponent = 'div',
Component = 'div',
className,
style,
children,
// Other
colorUnchecked
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: React.useRef(undefined),
input: React.useRef(undefined),
carret: React.useRef(undefined),
restoreSelection: React.useRef(restoreSelection),
controlled: React.useRef(controlled),
ids: {
label: React.useId(),
clear: React.useId()
}
};
refs.controlled.current = controlled;
const keys = React.useMemo(() => {
const result = [];
const items = [fullWidth_];
items.forEach(item => {
if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
});
return unique(result);
}, [fullWidth_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
element: refs.root.current
});
});
const label = name !== undefined ? name : label_;
let endVerticalAlign = endVerticalAlign_;
const fullWidth = valueBreakpoints(fullWidth_, undefined, breakpoints, theme);
const rowValue = () => {
const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
const htmlFontSize = 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.useState(valueDefault !== undefined ? valueDefault : value_);
const [focus, setFocus] = React.useState(focus_);
const [mouseDown, setMouseDown] = React.useState(false);
const [hover, setHover] = React.useState(false);
const [row, setRow] = React.useState(rowValue);
const [rows, setRows] = React.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.useEffect(() => {
const rootDocument = isEnvironment('browser') ? refs.root.current?.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.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.useEffect(() => {
if (value_ !== undefined && value_ !== value) {
setValue(value_);
}
}, [value_]);
React.useEffect(() => {
if (focus_ !== focus && focus_ !== undefined) setFocus(focus_);
}, [focus_]);
React.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 (is('function', onChange)) onChange(inputValue, event);
};
const onInput = event => {
onUpdateRows();
if (is('function', onInput_)) onInput_(event);
};
const onClear = React.useCallback(() => {
if (!disabled) {
const valueNew = '';
// Inner controlled value
if (!refs.controlled.current) setValue(valueNew);
if (is('function', onChange)) onChange(valueNew);
}
}, [disabled, onChange]);
const onInputWrapperMouseDown = React.useCallback(event => {
if (!disabled) {
setMouseDown(true);
refs.input.current.focus();
if (is('function', InputWrapperProps.onMouseDown)) InputWrapperProps.onMouseDown(event);
}
}, []);
const onInputWrapperMouseUp = React.useCallback(event => {
if (!disabled) {
setMouseDown(false);
if (is('function', InputWrapperProps.onMouseUp)) InputWrapperProps.onMouseUp(event);
}
}, []);
const onInputWrapperClick = React.useCallback(event => {
if (!disabled) {
if (event.target === event.currentTarget) refs.input.current?.focus();
if (is('function', InputWrapperProps?.onClick)) InputWrapperProps.onClick(event);
}
}, []);
const onFocus = event => {
if (!disabled) {
setFocus(focus_ !== undefined ? focus_ : true);
if (is('function', onFocus_)) onFocus_(event);
}
};
const onBlur = event => {
if (!disabled) {
setFocus(focus_ !== undefined ? focus_ : false);
if (is('function', onBlur_)) onBlur_(event);
}
};
const onMouseEnter = React.useCallback(event => {
if (!disabled) {
setHover(true);
if (is('function', onMouseEnter_)) onMouseEnter_(event);
}
}, []);
const onMouseLeave = React.useCallback(event => {
if (!disabled) {
setHover(false);
if (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 : theme.palette.color[color]?.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.Fragment;
let ComponentProps = {};
let WrapperProps = {};
if (value && clear) {
if (!Array.isArray(end)) end = [end].filter(Boolean);
const exists = end?.find(item => item.key === refs.ids.clear);
if (!exists) {
if (props.endVerticalAlign === undefined) endVerticalAlign = 'center';
end.push(/*#__PURE__*/React.createElement(IconClear, _extends({
key: refs.ids.clear,
color: "inherit",
onClick: onClear
}, IconProps, {
className: classNames([IconProps?.className, classes.clear])
})));
}
}
if (footer) {
WrapperProps = _objectSpread({}, other);
WrapperProps.ref = item => {
if (rootRef) {
if (is('function', rootRef)) rootRef(item);else rootRef.current = item;
}
refs.root.current = item;
};
WrapperProps['className'] = classNames([staticClassName('TextField', theme) && ['onesy-TextField-wrapper', fullWidth && 'onesy-TextField-full-width', disabled && 'onesy-TextField-disabled', fullWidth && 'onesy-full-width'], className, classes.wrapper, fullWidth && classes.fullWidth, disabled && classes.disabled]);
WrapperProps.style = _objectSpread({}, style);
} else {
ComponentProps = _objectSpread({}, other);
ComponentProps.ref = item => {
if (rootRef) {
if (is('function', rootRef)) rootRef(item);else rootRef.current = item;
}
refs.root.current = item;
};
ComponentProps.className = className;
ComponentProps.style = _objectSpread({}, style);
}
ComponentProps.style = _objectSpread(_objectSpread({}, 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 * clamp(rows, minRows, maxRows);
styles.inputWrapper.height = row.height * 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 /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onTouchStart: onMouseEnter,
onTouchEnd: onMouseLeave,
role: "textbox",
"aria-multiline": multiline,
"aria-labelledby": refs.ids.label
}, ComponentProps, {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-root',, `onesy-TextField-version-${version}`, `onesy-TextField-size-${size}`, multiline && `onesy-TextField-multiline`, valueWithData && 'onesy-TextField-value', error && `onesy-TextField-error`, required && 'onesy-TextField-required', enabled && 'onesy-TextField-enabled', hover && `onesy-TextField-hover`, mouseDown && `onesy-TextField-mouse-down`, focus && `onesy-TextField-focus`, readOnly && `onesy-TextField-read-only`, disabled && 'onesy-TextField-disabled', fullWidth && 'onesy-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: _objectSpread({
minWidth
}, ComponentProps?.style)
}), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, ['filled'].includes(version) && /*#__PURE__*/React.createElement("span", {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-background'], classes.background, (enabled || valueWithData || focus) && classes.background_focus, hover && classes.background_hover]),
style: styles.background
}), ['text', 'filled'].includes(version) && /*#__PURE__*/React.createElement("span", {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-border'], classes.border, focus && classes.border_focus]),
style: styles.border
}), ['outlined'].includes(version) && /*#__PURE__*/React.createElement("fieldset", {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-fieldset'], classes.fieldset, focus && classes.fieldset_focus]),
style: styles.fieldset
}, /*#__PURE__*/React.createElement("legend", {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-legend'], classes.legend, (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus])
}, label, required ? '*' : '', optional ? ` (${optionalText})` : ''))), label && /*#__PURE__*/React.createElement(Type, {
version: "b2",
id: refs.ids.label,
Component: "label",
className: classNames([staticClassName('TextField', theme) && ['onesy-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`]]])
}, label, required ? '*' : '', optional ? ` (${optionalText})` : ''), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, !!React.Children.toArray(start).length && /*#__PURE__*/React.createElement("span", {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-start'], classes.icon, classes.icon_start, classes[`icon${start?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_vertical_align_${startVerticalAlign}`]])
}, React.Children.toArray(start).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
key: index,
size: item.props?.size !== undefined ? item.props?.size : 'regular',
color: item.props?.color !== undefined ? item.props?.color : theme.palette.text.default.secondary,
style: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
}))))), prefix !== undefined && /*#__PURE__*/React.createElement(Type, {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-addition', 'onesy-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"
}, prefix), /*#__PURE__*/React.createElement("div", _extends({}, InputWrapperProps, {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, 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: _objectSpread(_objectSpread({}, styles.inputWrapper), InputWrapperProps.style)
}), children, /*#__PURE__*/React.createElement(InputComponent, _extends({}, inputProps, {
ref: item => {
if (ref) {
if (is('function', ref)) ref(item);else ref.current = item;
}
refs.input.current = item;
if (inputProps.ref) {
if (is('function', inputProps.ref)) inputProps.ref(item);else inputProps.ref.current = item;
}
},
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-input'], classes.input, 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: _objectSpread(_objectSpread({}, styles.input), inputProps.style)
}))), sufix !== undefined && /*#__PURE__*/React.createElement(Type, {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-addition', 'onesy-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"
}, sufix), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, !!React.Children.toArray(end).length && /*#__PURE__*/React.createElement("span", {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-end'], classes.icon, classes.icon_end, classes[`icon${end?.type?.displayName?.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_vertical_align_${endVerticalAlign}`]])
}, React.Children.toArray(end).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
key: index,
size: item.props?.size !== undefined ? item.props?.size : size,
color: item.props?.color !== undefined ? item.props?.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: _objectSpread(_objectSpread({}, item.props.style), styles.icon)
})))))), footer && /*#__PURE__*/React.createElement(React.Fragment, null, (!!helperText || counter !== undefined || required) && /*#__PURE__*/React.createElement(Line, {
gap: 2,
direction: "row",
justify: "space-between",
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-footer'], classes.footer, classes[`footer_version_${version}`]])
}, (helperText || required) && /*#__PURE__*/React.createElement(Type, _extends({
version: "b3"
}, HelperTextProps, {
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-helper-text', error && 'onesy-TextField-error'], HelperTextProps?.className, classes.helperText, error && classes.error_color])
}), helperText !== undefined ? helperText : required ? `*${l('required')}` : ''), counter && /*#__PURE__*/React.createElement(Type, {
version: "b3",
className: classNames([staticClassName('TextField', theme) && ['onesy-TextField-counter'], classes.counterText, error && classes.error_color])
}, String(value)?.length || 0, "/", counter)), footer_));
});
TextField.displayName = 'onesy-TextField';
export default TextField;