@onesy/ui-react 1.0.124 → 1.0.126
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 +46 -18
- package/esm/TextField/TextField.js +49 -23
- 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
|
},
|
|
@@ -658,25 +685,24 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
658
685
|
const iconProps = {
|
|
659
686
|
size
|
|
660
687
|
};
|
|
661
|
-
const
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
if (
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
]) }), refs.ids.clear));
|
|
673
|
-
}
|
|
688
|
+
const isTypePassword = type === 'password';
|
|
689
|
+
const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
|
|
690
|
+
if (value && clear) {
|
|
691
|
+
const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
|
|
692
|
+
if (!exists) {
|
|
693
|
+
if (props.endVerticalAlign === undefined)
|
|
694
|
+
endVerticalAlign = 'center';
|
|
695
|
+
end.push((0, jsx_runtime_1.jsx)(IconClear, Object.assign({ color: 'inherit', onClick: onClear }, IconProps, { className: (0, style_react_1.classNames)([
|
|
696
|
+
IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
|
|
697
|
+
classes.clear
|
|
698
|
+
]) }), refs.ids.clear));
|
|
674
699
|
}
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
700
|
+
}
|
|
701
|
+
if (value && isTypePassword) {
|
|
702
|
+
if (!multiline && props.endVerticalAlign === undefined)
|
|
703
|
+
endVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
704
|
+
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
|
+
}
|
|
680
706
|
const valueWithData = value !== undefined && String(value);
|
|
681
707
|
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
708
|
(0, utils_2.staticClassName)('TextField', theme) && [
|
|
@@ -756,6 +782,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
756
782
|
classes.icon_start,
|
|
757
783
|
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
784
|
classes[`icon_version_${version}`],
|
|
785
|
+
classes[`icon_version_${version}_size_${size}`],
|
|
759
786
|
classes[`icon_vertical_align_${startVerticalAlign}`]
|
|
760
787
|
]) }, { children: react_1.default.Children.toArray(start).map((item, index) => {
|
|
761
788
|
var _a, _b, _c, _d;
|
|
@@ -834,6 +861,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
|
|
|
834
861
|
classes.icon_end,
|
|
835
862
|
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
863
|
classes[`icon_version_${version}`],
|
|
864
|
+
classes[`icon_version_${version}_size_${size}`],
|
|
837
865
|
classes[`icon_vertical_align_${endVerticalAlign}`]
|
|
838
866
|
]) }, { children: react_1.default.Children.toArray(end).map((item, index) => {
|
|
839
867
|
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
|
},
|
|
@@ -776,33 +803,32 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
776
803
|
const iconProps = {
|
|
777
804
|
size
|
|
778
805
|
};
|
|
779
|
-
const
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
if (
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
})));
|
|
793
|
-
}
|
|
806
|
+
const isTypePassword = type === 'password';
|
|
807
|
+
const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
|
|
808
|
+
if (value && clear) {
|
|
809
|
+
const exists = end?.find(item => item.key === refs.ids.clear);
|
|
810
|
+
if (!exists) {
|
|
811
|
+
if (props.endVerticalAlign === undefined) endVerticalAlign = 'center';
|
|
812
|
+
end.push(/*#__PURE__*/React.createElement(IconClear, _extends({
|
|
813
|
+
key: refs.ids.clear,
|
|
814
|
+
color: "inherit",
|
|
815
|
+
onClick: onClear
|
|
816
|
+
}, IconProps, {
|
|
817
|
+
className: classNames([IconProps?.className, classes.clear])
|
|
818
|
+
})));
|
|
794
819
|
}
|
|
795
|
-
|
|
820
|
+
}
|
|
821
|
+
if (value && isTypePassword) {
|
|
822
|
+
if (!multiline && props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
|
|
823
|
+
end.unshift(/*#__PURE__*/React.createElement(Tooltip, {
|
|
796
824
|
name: visible ? l('Hide password') : l('View password'),
|
|
797
825
|
color: "inverted"
|
|
798
826
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
799
827
|
onClick: onToggleVisible,
|
|
800
828
|
color: "default",
|
|
801
|
-
size:
|
|
802
|
-
}, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps)));
|
|
803
|
-
|
|
804
|
-
return endItems;
|
|
805
|
-
}, [value, visible, onClear, type, end_]);
|
|
829
|
+
size: size === 'large' ? 'regular' : 'small'
|
|
830
|
+
}, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps))));
|
|
831
|
+
}
|
|
806
832
|
const valueWithData = value !== undefined && String(value);
|
|
807
833
|
return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
|
|
808
834
|
onMouseEnter: onMouseEnter,
|
|
@@ -834,7 +860,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
834
860
|
Component: "label",
|
|
835
861
|
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
862
|
}, 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}`]])
|
|
863
|
+
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
864
|
}, React.Children.toArray(start).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
|
|
839
865
|
key: index,
|
|
840
866
|
size: item.props?.size !== undefined ? item.props?.size : 'regular',
|
|
@@ -875,7 +901,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
875
901
|
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
902
|
version: "b2"
|
|
877
903
|
}, 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}`]])
|
|
904
|
+
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
905
|
}, React.Children.toArray(end).map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
|
|
880
906
|
key: index,
|
|
881
907
|
size: item.props?.size !== undefined ? item.props?.size : size,
|
package/esm/index.js
CHANGED