@onesy/ui-react 1.0.123 → 1.0.125
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 +36 -5
- package/esm/TextField/TextField.js +42 -13
- package/esm/index.js +1 -1
- package/package.json +1 -1
package/TextField/TextField.js
CHANGED
|
@@ -247,6 +247,33 @@ const useStyle = (0, style_react_1.style)(theme => {
|
|
|
247
247
|
icon_size_large: {
|
|
248
248
|
paddingBlock: '24px'
|
|
249
249
|
},
|
|
250
|
+
icon_version_text_size_small: {
|
|
251
|
+
paddingBlock: '6px'
|
|
252
|
+
},
|
|
253
|
+
icon_version_text_size_regular: {
|
|
254
|
+
paddingBlock: '8px'
|
|
255
|
+
},
|
|
256
|
+
icon_version_text_size_large: {
|
|
257
|
+
paddingBlock: '12px'
|
|
258
|
+
},
|
|
259
|
+
icon_version_outlined_size_small: {
|
|
260
|
+
paddingBlock: '9px'
|
|
261
|
+
},
|
|
262
|
+
icon_version_outlined_size_regular: {
|
|
263
|
+
paddingBlock: '12px'
|
|
264
|
+
},
|
|
265
|
+
icon_version_outlined_size_large: {
|
|
266
|
+
paddingBlock: '17px'
|
|
267
|
+
},
|
|
268
|
+
icon_version_filled_size_small: {
|
|
269
|
+
paddingBlock: '9px'
|
|
270
|
+
},
|
|
271
|
+
icon_version_filled_size_regular: {
|
|
272
|
+
paddingBlock: '12px'
|
|
273
|
+
},
|
|
274
|
+
icon_version_filled_size_large: {
|
|
275
|
+
paddingBlock: '17px'
|
|
276
|
+
},
|
|
250
277
|
icon_button_size_small: {
|
|
251
278
|
paddingBlock: '4px'
|
|
252
279
|
},
|
|
@@ -672,11 +699,13 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
672
699
|
]) }), refs.ids.clear));
|
|
673
700
|
}
|
|
674
701
|
}
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
702
|
+
if (value && password) {
|
|
703
|
+
if (!multiline && props.endVerticalAlign === undefined)
|
|
704
|
+
endVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
705
|
+
endItems.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)) })) })));
|
|
706
|
+
}
|
|
678
707
|
return endItems;
|
|
679
|
-
}, [visible, onClear, type, end_]);
|
|
708
|
+
}, [value, version, multiline, visible, onClear, type, end_]);
|
|
680
709
|
const valueWithData = value !== undefined && String(value);
|
|
681
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)([
|
|
682
711
|
(0, utils_2.staticClassName)('TextField', theme) && [
|
|
@@ -756,6 +785,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
756
785
|
classes.icon_start,
|
|
757
786
|
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}`],
|
|
758
787
|
classes[`icon_version_${version}`],
|
|
788
|
+
classes[`icon_version_${version}_size_${size}`],
|
|
759
789
|
classes[`icon_vertical_align_${startVerticalAlign}`]
|
|
760
790
|
]) }, { children: react_1.default.Children.toArray(start).map((item, index) => {
|
|
761
791
|
var _a, _b, _c, _d;
|
|
@@ -813,7 +843,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
813
843
|
inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
|
|
814
844
|
multiline && classes.multiline,
|
|
815
845
|
align && classes[`input_align_${align}`]
|
|
816
|
-
]), 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)([
|
|
846
|
+
]), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, onChange: onUpdate, value: value !== undefined ? value : '', type: type === 'password' && visible ? 'text' : 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)([
|
|
817
847
|
(0, utils_2.staticClassName)('TextField', theme) && [
|
|
818
848
|
'onesy-TextField-addition',
|
|
819
849
|
'onesy-TextField-sufix'
|
|
@@ -834,6 +864,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
834
864
|
classes.icon_end,
|
|
835
865
|
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}`],
|
|
836
866
|
classes[`icon_version_${version}`],
|
|
867
|
+
classes[`icon_version_${version}_size_${size}`],
|
|
837
868
|
classes[`icon_vertical_align_${endVerticalAlign}`]
|
|
838
869
|
]) }, { children: react_1.default.Children.toArray(end).map((item, index) => {
|
|
839
870
|
var _a, _b, _c, _d;
|
|
@@ -326,6 +326,33 @@ const useStyle = styleMethod(theme => {
|
|
|
326
326
|
icon_size_large: {
|
|
327
327
|
paddingBlock: '24px'
|
|
328
328
|
},
|
|
329
|
+
icon_version_text_size_small: {
|
|
330
|
+
paddingBlock: '6px'
|
|
331
|
+
},
|
|
332
|
+
icon_version_text_size_regular: {
|
|
333
|
+
paddingBlock: '8px'
|
|
334
|
+
},
|
|
335
|
+
icon_version_text_size_large: {
|
|
336
|
+
paddingBlock: '12px'
|
|
337
|
+
},
|
|
338
|
+
icon_version_outlined_size_small: {
|
|
339
|
+
paddingBlock: '9px'
|
|
340
|
+
},
|
|
341
|
+
icon_version_outlined_size_regular: {
|
|
342
|
+
paddingBlock: '12px'
|
|
343
|
+
},
|
|
344
|
+
icon_version_outlined_size_large: {
|
|
345
|
+
paddingBlock: '17px'
|
|
346
|
+
},
|
|
347
|
+
icon_version_filled_size_small: {
|
|
348
|
+
paddingBlock: '9px'
|
|
349
|
+
},
|
|
350
|
+
icon_version_filled_size_regular: {
|
|
351
|
+
paddingBlock: '12px'
|
|
352
|
+
},
|
|
353
|
+
icon_version_filled_size_large: {
|
|
354
|
+
paddingBlock: '17px'
|
|
355
|
+
},
|
|
329
356
|
icon_button_size_small: {
|
|
330
357
|
paddingBlock: '4px'
|
|
331
358
|
},
|
|
@@ -792,17 +819,19 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
792
819
|
})));
|
|
793
820
|
}
|
|
794
821
|
}
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
822
|
+
if (value && password) {
|
|
823
|
+
if (!multiline && props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
824
|
+
endItems.unshift(/*#__PURE__*/React.createElement(Tooltip, {
|
|
825
|
+
name: visible ? l('Hide password') : l('View password'),
|
|
826
|
+
color: "inverted"
|
|
827
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
828
|
+
onClick: onToggleVisible,
|
|
829
|
+
color: "default",
|
|
830
|
+
size: size === 'large' ? 'regular' : 'small'
|
|
831
|
+
}, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps))));
|
|
832
|
+
}
|
|
804
833
|
return endItems;
|
|
805
|
-
}, [visible, onClear, type, end_]);
|
|
834
|
+
}, [value, version, multiline, visible, onClear, type, end_]);
|
|
806
835
|
const valueWithData = value !== undefined && String(value);
|
|
807
836
|
return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
|
|
808
837
|
onMouseEnter: onMouseEnter,
|
|
@@ -834,7 +863,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
834
863
|
Component: "label",
|
|
835
864
|
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`]]])
|
|
836
865
|
}, label, required ? '*' : '', optional ? ` (${optionalText})` : ''), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, !!React.Children.toArray(start).length && /*#__PURE__*/React.createElement("span", {
|
|
837
|
-
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}`]])
|
|
866
|
+
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_version_${version}_size_${size}`], classes[`icon_vertical_align_${startVerticalAlign}`]])
|
|
838
867
|
}, React.Children.toArray(start).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
|
|
839
868
|
key: index,
|
|
840
869
|
size: item.props?.size !== undefined ? item.props?.size : 'regular',
|
|
@@ -865,7 +894,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
865
894
|
placeholder: placeholder,
|
|
866
895
|
onChange: onUpdate,
|
|
867
896
|
value: value !== undefined ? value : '',
|
|
868
|
-
type: type,
|
|
897
|
+
type: type === 'password' && visible ? 'text' : type,
|
|
869
898
|
autoFocus: autoFocus,
|
|
870
899
|
autoComplete: autoComplete,
|
|
871
900
|
readOnly: readOnly,
|
|
@@ -875,7 +904,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
875
904
|
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]),
|
|
876
905
|
version: "b2"
|
|
877
906
|
}, sufix), !minimal && /*#__PURE__*/React.createElement(React.Fragment, null, !!React.Children.toArray(end).length && /*#__PURE__*/React.createElement("span", {
|
|
878
|
-
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}`]])
|
|
907
|
+
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_version_${version}_size_${size}`], classes[`icon_vertical_align_${endVerticalAlign}`]])
|
|
879
908
|
}, React.Children.toArray(end).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
|
|
880
909
|
key: index,
|
|
881
910
|
size: item.props?.size !== undefined ? item.props?.size : size,
|
package/esm/index.js
CHANGED