@onesy/ui-react 1.0.126 → 1.0.127
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/TextField/TextField.js +8 -5
- package/esm/TextField/TextField.js +6 -3
- package/esm/index.js +1 -1
- package/package.json +1 -1
package/TextField/TextField.js
CHANGED
|
@@ -401,7 +401,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
401
401
|
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]);
|
|
402
402
|
const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
|
|
403
403
|
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
|
|
404
|
-
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,
|
|
404
|
+
const { tonal = true, color = 'primary', version = 'filled', size = 'regular', rootRef, valueDefault, value: value_, onChange, name, label: label_, align, start, startVerticalAlign: 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,
|
|
405
405
|
// Other
|
|
406
406
|
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"]);
|
|
407
407
|
const { classes } = useStyle();
|
|
@@ -431,6 +431,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
431
431
|
breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
|
|
432
432
|
});
|
|
433
433
|
const label = name !== undefined ? name : label_;
|
|
434
|
+
let startVerticalAlign = startVerticalAlign_;
|
|
434
435
|
let endVerticalAlign = endVerticalAlign_;
|
|
435
436
|
const fullWidth = (0, utils_2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
|
|
436
437
|
const rowValue = () => {
|
|
@@ -690,8 +691,6 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
690
691
|
if (value && clear) {
|
|
691
692
|
const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
|
|
692
693
|
if (!exists) {
|
|
693
|
-
if (props.endVerticalAlign === undefined)
|
|
694
|
-
endVerticalAlign = 'center';
|
|
695
694
|
end.push((0, jsx_runtime_1.jsx)(IconClear, Object.assign({ color: 'inherit', onClick: onClear }, IconProps, { className: (0, style_react_1.classNames)([
|
|
696
695
|
IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
|
|
697
696
|
classes.clear
|
|
@@ -699,10 +698,14 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
699
698
|
}
|
|
700
699
|
}
|
|
701
700
|
if (value && isTypePassword) {
|
|
702
|
-
if (!multiline && props.endVerticalAlign === undefined)
|
|
703
|
-
endVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
704
701
|
end.unshift((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: visible ? l('Hide password') : l('View password'), color: 'inverted' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onToggleVisible, color: 'default', size: size === 'large' ? 'regular' : 'small' }, { children: visible ? (0, jsx_runtime_1.jsx)(IconMaterialPassword2OffW100_1.default, Object.assign({}, iconProps)) : (0, jsx_runtime_1.jsx)(IconMaterialPassword2W100_1.default, Object.assign({}, iconProps)) })) })));
|
|
705
702
|
}
|
|
703
|
+
if (!multiline) {
|
|
704
|
+
if (props.startVerticalAlign === undefined)
|
|
705
|
+
startVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
706
|
+
if (props.endVerticalAlign === undefined)
|
|
707
|
+
endVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
708
|
+
}
|
|
706
709
|
const valueWithData = value !== undefined && String(value);
|
|
707
710
|
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)([
|
|
708
711
|
(0, utils_2.staticClassName)('TextField', theme) && [
|
|
@@ -496,7 +496,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
496
496
|
label: label_,
|
|
497
497
|
align,
|
|
498
498
|
start,
|
|
499
|
-
startVerticalAlign = 'start',
|
|
499
|
+
startVerticalAlign: startVerticalAlign_ = 'start',
|
|
500
500
|
end: end_,
|
|
501
501
|
endVerticalAlign: endVerticalAlign_ = 'start',
|
|
502
502
|
placeholder,
|
|
@@ -579,6 +579,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
579
579
|
});
|
|
580
580
|
});
|
|
581
581
|
const label = name !== undefined ? name : label_;
|
|
582
|
+
let startVerticalAlign = startVerticalAlign_;
|
|
582
583
|
let endVerticalAlign = endVerticalAlign_;
|
|
583
584
|
const fullWidth = valueBreakpoints(fullWidth_, undefined, breakpoints, theme);
|
|
584
585
|
const rowValue = () => {
|
|
@@ -808,7 +809,6 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
808
809
|
if (value && clear) {
|
|
809
810
|
const exists = end?.find(item => item.key === refs.ids.clear);
|
|
810
811
|
if (!exists) {
|
|
811
|
-
if (props.endVerticalAlign === undefined) endVerticalAlign = 'center';
|
|
812
812
|
end.push(/*#__PURE__*/React.createElement(IconClear, _extends({
|
|
813
813
|
key: refs.ids.clear,
|
|
814
814
|
color: "inherit",
|
|
@@ -819,7 +819,6 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
819
819
|
}
|
|
820
820
|
}
|
|
821
821
|
if (value && isTypePassword) {
|
|
822
|
-
if (!multiline && props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
823
822
|
end.unshift(/*#__PURE__*/React.createElement(Tooltip, {
|
|
824
823
|
name: visible ? l('Hide password') : l('View password'),
|
|
825
824
|
color: "inverted"
|
|
@@ -829,6 +828,10 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
829
828
|
size: size === 'large' ? 'regular' : 'small'
|
|
830
829
|
}, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps))));
|
|
831
830
|
}
|
|
831
|
+
if (!multiline) {
|
|
832
|
+
if (props.startVerticalAlign === undefined) startVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
833
|
+
if (props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
834
|
+
}
|
|
832
835
|
const valueWithData = value !== undefined && String(value);
|
|
833
836
|
return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
|
|
834
837
|
onMouseEnter: onMouseEnter,
|
package/esm/index.js
CHANGED