@xaypay/tui 0.0.77 → 0.0.78
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/dist/index.es.js +28 -13
- package/dist/index.js +28 -13
- package/package.json +1 -1
- package/src/components/captcha/index.js +2 -0
- package/src/components/input/index.js +22 -4
- package/src/components/input/input.stories.js +1 -1
- package/src/components/newAutocomplete/index.js +11 -12
- package/src/components/table/index.js +9 -16
- package/src/components/table/table.stories.js +180 -14
- package/tui.config.js +5 -5
package/dist/index.es.js
CHANGED
|
@@ -637,14 +637,26 @@ const Input = ({
|
|
|
637
637
|
`;
|
|
638
638
|
const handleChange = event => {
|
|
639
639
|
const currentValue = event.target.value;
|
|
640
|
+
let prevValue = innerValue;
|
|
640
641
|
setInnerValue(currentValue);
|
|
641
642
|
if (change) {
|
|
642
643
|
change(currentValue);
|
|
643
644
|
}
|
|
644
645
|
if (type === 'tel') {
|
|
645
646
|
if (!phoneNumberRegex.test(currentValue)) {
|
|
646
|
-
|
|
647
|
-
|
|
647
|
+
if (currentValue === '') {
|
|
648
|
+
setInnerErrorMessage('');
|
|
649
|
+
setInnerValue('');
|
|
650
|
+
if (change) {
|
|
651
|
+
change('');
|
|
652
|
+
}
|
|
653
|
+
} else {
|
|
654
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
655
|
+
setInnerValue(prevValue);
|
|
656
|
+
if (change) {
|
|
657
|
+
change(prevValue);
|
|
658
|
+
}
|
|
659
|
+
}
|
|
648
660
|
} else {
|
|
649
661
|
setInnerErrorMessage('');
|
|
650
662
|
if (currentValue.length > 8) {
|
|
@@ -692,7 +704,11 @@ const Input = ({
|
|
|
692
704
|
setInnerValue(value);
|
|
693
705
|
if (type === 'tel') {
|
|
694
706
|
if (!phoneNumberRegex.test(value)) {
|
|
695
|
-
|
|
707
|
+
if (value === '') {
|
|
708
|
+
setInnerErrorMessage('');
|
|
709
|
+
} else {
|
|
710
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
711
|
+
}
|
|
696
712
|
setInnerValue('');
|
|
697
713
|
} else {
|
|
698
714
|
setInnerErrorMessage('');
|
|
@@ -711,7 +727,7 @@ const Input = ({
|
|
|
711
727
|
}
|
|
712
728
|
}
|
|
713
729
|
}
|
|
714
|
-
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
|
|
730
|
+
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
|
|
715
731
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
716
732
|
className: `${styles$9["input-wrap"]}`
|
|
717
733
|
}, label ? /*#__PURE__*/React__default.createElement("label", {
|
|
@@ -763,7 +779,7 @@ const Input = ({
|
|
|
763
779
|
display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
|
|
764
780
|
borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
|
|
765
781
|
alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
|
|
766
|
-
borderColor: isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
|
|
782
|
+
borderColor: innerErrorMessage ? errorColor ? errorColor : configStyles.INPUT.errorColor : isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
|
|
767
783
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
768
784
|
justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
|
|
769
785
|
backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
@@ -3672,7 +3688,6 @@ const NewAutocomplete = ({
|
|
|
3672
3688
|
contentTopDirection,
|
|
3673
3689
|
contentTopBoxSizing,
|
|
3674
3690
|
contentTopLineHeight,
|
|
3675
|
-
contentTopBorderColor,
|
|
3676
3691
|
contentBottomMaxWidth,
|
|
3677
3692
|
contentBottomOverflow,
|
|
3678
3693
|
contentBottomPosition,
|
|
@@ -3691,8 +3706,8 @@ const NewAutocomplete = ({
|
|
|
3691
3706
|
contentBottomRowAlignItems,
|
|
3692
3707
|
contentBottomRowTransition,
|
|
3693
3708
|
contentBottomRowHoverColor,
|
|
3694
|
-
|
|
3695
|
-
|
|
3709
|
+
contentTopBorderHover,
|
|
3710
|
+
contentTopBorderActive,
|
|
3696
3711
|
contentBottomInnerOverflowY,
|
|
3697
3712
|
contentBottomInnerOverflowX,
|
|
3698
3713
|
contentBottomInnerMaxHeight,
|
|
@@ -3869,13 +3884,14 @@ const NewAutocomplete = ({
|
|
|
3869
3884
|
placeholder: placeHolder ? placeHolder : '',
|
|
3870
3885
|
autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
|
|
3871
3886
|
style: {
|
|
3887
|
+
border: 'none',
|
|
3888
|
+
outline: 'none',
|
|
3872
3889
|
maxWidth: '100%',
|
|
3873
3890
|
transition: 'all 240ms',
|
|
3874
3891
|
cursor: disabled ? 'not-allowed' : 'auto',
|
|
3875
3892
|
color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
|
|
3876
3893
|
fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
|
|
3877
3894
|
height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
|
|
3878
|
-
border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
|
|
3879
3895
|
padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
|
|
3880
3896
|
display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
|
|
3881
3897
|
fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
|
|
@@ -3883,7 +3899,7 @@ const NewAutocomplete = ({
|
|
|
3883
3899
|
boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
|
|
3884
3900
|
lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
|
|
3885
3901
|
flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
|
|
3886
|
-
|
|
3902
|
+
boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.NEWAUTOCOMPLETE.errorColor}` : isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.NEWAUTOCOMPLETE.contentTopBorderActive : isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.NEWAUTOCOMPLETE.contentTopBorderHover : contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder
|
|
3887
3903
|
}
|
|
3888
3904
|
}, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
|
|
3889
3905
|
style: {
|
|
@@ -3937,7 +3953,7 @@ NewAutocomplete.propTypes = {
|
|
|
3937
3953
|
contentBottomZindex: PropTypes.number,
|
|
3938
3954
|
contentBottomRadius: PropTypes.string,
|
|
3939
3955
|
contentTopLineHeight: PropTypes.string,
|
|
3940
|
-
|
|
3956
|
+
contentTopBorderHover: PropTypes.string,
|
|
3941
3957
|
contentBottomRowColor: PropTypes.string,
|
|
3942
3958
|
contentBottomMaxWidth: PropTypes.string,
|
|
3943
3959
|
contentBottomOverflow: PropTypes.string,
|
|
@@ -3946,6 +3962,7 @@ NewAutocomplete.propTypes = {
|
|
|
3946
3962
|
contentBottomBoxShadow: PropTypes.string,
|
|
3947
3963
|
contentBottomRowHeight: PropTypes.string,
|
|
3948
3964
|
contentBottomRowCursor: PropTypes.string,
|
|
3965
|
+
contentTopBorderActive: PropTypes.string,
|
|
3949
3966
|
contentBottomRowDisplay: PropTypes.string,
|
|
3950
3967
|
contentBottomRowPadding: PropTypes.string,
|
|
3951
3968
|
contentBottomRowFontSize: PropTypes.string,
|
|
@@ -3956,8 +3973,6 @@ NewAutocomplete.propTypes = {
|
|
|
3956
3973
|
contentBottomRowAlignItems: PropTypes.string,
|
|
3957
3974
|
contentBottomRowTransition: PropTypes.string,
|
|
3958
3975
|
contentBottomRowHoverColor: PropTypes.string,
|
|
3959
|
-
contentTopBorderHoverColor: PropTypes.string,
|
|
3960
|
-
contentTopBorderActiveColor: PropTypes.string,
|
|
3961
3976
|
contentBottomInnerOverflowY: PropTypes.string,
|
|
3962
3977
|
contentBottomInnerOverflowX: PropTypes.string,
|
|
3963
3978
|
contentBottomInnerMaxHeight: PropTypes.string,
|
package/dist/index.js
CHANGED
|
@@ -667,14 +667,26 @@ const Input = ({
|
|
|
667
667
|
`;
|
|
668
668
|
const handleChange = event => {
|
|
669
669
|
const currentValue = event.target.value;
|
|
670
|
+
let prevValue = innerValue;
|
|
670
671
|
setInnerValue(currentValue);
|
|
671
672
|
if (change) {
|
|
672
673
|
change(currentValue);
|
|
673
674
|
}
|
|
674
675
|
if (type === 'tel') {
|
|
675
676
|
if (!phoneNumberRegex.test(currentValue)) {
|
|
676
|
-
|
|
677
|
-
|
|
677
|
+
if (currentValue === '') {
|
|
678
|
+
setInnerErrorMessage('');
|
|
679
|
+
setInnerValue('');
|
|
680
|
+
if (change) {
|
|
681
|
+
change('');
|
|
682
|
+
}
|
|
683
|
+
} else {
|
|
684
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
685
|
+
setInnerValue(prevValue);
|
|
686
|
+
if (change) {
|
|
687
|
+
change(prevValue);
|
|
688
|
+
}
|
|
689
|
+
}
|
|
678
690
|
} else {
|
|
679
691
|
setInnerErrorMessage('');
|
|
680
692
|
if (currentValue.length > 8) {
|
|
@@ -722,7 +734,11 @@ const Input = ({
|
|
|
722
734
|
setInnerValue(value);
|
|
723
735
|
if (type === 'tel') {
|
|
724
736
|
if (!phoneNumberRegex.test(value)) {
|
|
725
|
-
|
|
737
|
+
if (value === '') {
|
|
738
|
+
setInnerErrorMessage('');
|
|
739
|
+
} else {
|
|
740
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
741
|
+
}
|
|
726
742
|
setInnerValue('');
|
|
727
743
|
} else {
|
|
728
744
|
setInnerErrorMessage('');
|
|
@@ -741,7 +757,7 @@ const Input = ({
|
|
|
741
757
|
}
|
|
742
758
|
}
|
|
743
759
|
}
|
|
744
|
-
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
|
|
760
|
+
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
|
|
745
761
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
746
762
|
className: `${styles$9["input-wrap"]}`
|
|
747
763
|
}, label ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
@@ -793,7 +809,7 @@ const Input = ({
|
|
|
793
809
|
display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
|
|
794
810
|
borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
|
|
795
811
|
alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
|
|
796
|
-
borderColor: isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
|
|
812
|
+
borderColor: innerErrorMessage ? errorColor ? errorColor : configStyles.INPUT.errorColor : isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
|
|
797
813
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
798
814
|
justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
|
|
799
815
|
backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
@@ -3702,7 +3718,6 @@ const NewAutocomplete = ({
|
|
|
3702
3718
|
contentTopDirection,
|
|
3703
3719
|
contentTopBoxSizing,
|
|
3704
3720
|
contentTopLineHeight,
|
|
3705
|
-
contentTopBorderColor,
|
|
3706
3721
|
contentBottomMaxWidth,
|
|
3707
3722
|
contentBottomOverflow,
|
|
3708
3723
|
contentBottomPosition,
|
|
@@ -3721,8 +3736,8 @@ const NewAutocomplete = ({
|
|
|
3721
3736
|
contentBottomRowAlignItems,
|
|
3722
3737
|
contentBottomRowTransition,
|
|
3723
3738
|
contentBottomRowHoverColor,
|
|
3724
|
-
|
|
3725
|
-
|
|
3739
|
+
contentTopBorderHover,
|
|
3740
|
+
contentTopBorderActive,
|
|
3726
3741
|
contentBottomInnerOverflowY,
|
|
3727
3742
|
contentBottomInnerOverflowX,
|
|
3728
3743
|
contentBottomInnerMaxHeight,
|
|
@@ -3899,13 +3914,14 @@ const NewAutocomplete = ({
|
|
|
3899
3914
|
placeholder: placeHolder ? placeHolder : '',
|
|
3900
3915
|
autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
|
|
3901
3916
|
style: {
|
|
3917
|
+
border: 'none',
|
|
3918
|
+
outline: 'none',
|
|
3902
3919
|
maxWidth: '100%',
|
|
3903
3920
|
transition: 'all 240ms',
|
|
3904
3921
|
cursor: disabled ? 'not-allowed' : 'auto',
|
|
3905
3922
|
color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
|
|
3906
3923
|
fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
|
|
3907
3924
|
height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
|
|
3908
|
-
border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
|
|
3909
3925
|
padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
|
|
3910
3926
|
display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
|
|
3911
3927
|
fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
|
|
@@ -3913,7 +3929,7 @@ const NewAutocomplete = ({
|
|
|
3913
3929
|
boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
|
|
3914
3930
|
lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
|
|
3915
3931
|
flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
|
|
3916
|
-
|
|
3932
|
+
boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.NEWAUTOCOMPLETE.errorColor}` : isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.NEWAUTOCOMPLETE.contentTopBorderActive : isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.NEWAUTOCOMPLETE.contentTopBorderHover : contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder
|
|
3917
3933
|
}
|
|
3918
3934
|
}, props)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
3919
3935
|
style: {
|
|
@@ -3967,7 +3983,7 @@ NewAutocomplete.propTypes = {
|
|
|
3967
3983
|
contentBottomZindex: PropTypes__default["default"].number,
|
|
3968
3984
|
contentBottomRadius: PropTypes__default["default"].string,
|
|
3969
3985
|
contentTopLineHeight: PropTypes__default["default"].string,
|
|
3970
|
-
|
|
3986
|
+
contentTopBorderHover: PropTypes__default["default"].string,
|
|
3971
3987
|
contentBottomRowColor: PropTypes__default["default"].string,
|
|
3972
3988
|
contentBottomMaxWidth: PropTypes__default["default"].string,
|
|
3973
3989
|
contentBottomOverflow: PropTypes__default["default"].string,
|
|
@@ -3976,6 +3992,7 @@ NewAutocomplete.propTypes = {
|
|
|
3976
3992
|
contentBottomBoxShadow: PropTypes__default["default"].string,
|
|
3977
3993
|
contentBottomRowHeight: PropTypes__default["default"].string,
|
|
3978
3994
|
contentBottomRowCursor: PropTypes__default["default"].string,
|
|
3995
|
+
contentTopBorderActive: PropTypes__default["default"].string,
|
|
3979
3996
|
contentBottomRowDisplay: PropTypes__default["default"].string,
|
|
3980
3997
|
contentBottomRowPadding: PropTypes__default["default"].string,
|
|
3981
3998
|
contentBottomRowFontSize: PropTypes__default["default"].string,
|
|
@@ -3986,8 +4003,6 @@ NewAutocomplete.propTypes = {
|
|
|
3986
4003
|
contentBottomRowAlignItems: PropTypes__default["default"].string,
|
|
3987
4004
|
contentBottomRowTransition: PropTypes__default["default"].string,
|
|
3988
4005
|
contentBottomRowHoverColor: PropTypes__default["default"].string,
|
|
3989
|
-
contentTopBorderHoverColor: PropTypes__default["default"].string,
|
|
3990
|
-
contentTopBorderActiveColor: PropTypes__default["default"].string,
|
|
3991
4006
|
contentBottomInnerOverflowY: PropTypes__default["default"].string,
|
|
3992
4007
|
contentBottomInnerOverflowX: PropTypes__default["default"].string,
|
|
3993
4008
|
contentBottomInnerMaxHeight: PropTypes__default["default"].string,
|
package/package.json
CHANGED
|
@@ -100,6 +100,8 @@ export const Input = ({
|
|
|
100
100
|
|
|
101
101
|
const handleChange = (event) => {
|
|
102
102
|
const currentValue = event.target.value;
|
|
103
|
+
|
|
104
|
+
let prevValue = innerValue;
|
|
103
105
|
|
|
104
106
|
setInnerValue(currentValue);
|
|
105
107
|
if (change) {
|
|
@@ -108,8 +110,19 @@ export const Input = ({
|
|
|
108
110
|
|
|
109
111
|
if (type === 'tel') {
|
|
110
112
|
if (!phoneNumberRegex.test(currentValue)) {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
+
if (currentValue === '') {
|
|
114
|
+
setInnerErrorMessage('');
|
|
115
|
+
setInnerValue('');
|
|
116
|
+
if (change) {
|
|
117
|
+
change('');
|
|
118
|
+
}
|
|
119
|
+
} else {
|
|
120
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
121
|
+
setInnerValue(prevValue);
|
|
122
|
+
if (change) {
|
|
123
|
+
change(prevValue);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
113
126
|
} else {
|
|
114
127
|
setInnerErrorMessage('');
|
|
115
128
|
if (currentValue.length > 8) {
|
|
@@ -163,7 +176,11 @@ export const Input = ({
|
|
|
163
176
|
setInnerValue(value);
|
|
164
177
|
if (type === 'tel') {
|
|
165
178
|
if (!phoneNumberRegex.test(value)) {
|
|
166
|
-
|
|
179
|
+
if (value === '') {
|
|
180
|
+
setInnerErrorMessage('');
|
|
181
|
+
} else {
|
|
182
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
183
|
+
}
|
|
167
184
|
setInnerValue('');
|
|
168
185
|
} else {
|
|
169
186
|
setInnerErrorMessage('');
|
|
@@ -184,7 +201,7 @@ export const Input = ({
|
|
|
184
201
|
}
|
|
185
202
|
}
|
|
186
203
|
}
|
|
187
|
-
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
|
|
204
|
+
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
|
|
188
205
|
|
|
189
206
|
return (
|
|
190
207
|
<div className={`${styles["input-wrap"]}`}>
|
|
@@ -249,6 +266,7 @@ export const Input = ({
|
|
|
249
266
|
borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
|
|
250
267
|
alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
|
|
251
268
|
borderColor:
|
|
269
|
+
innerErrorMessage ? errorColor ? errorColor : configStyles.INPUT.errorColor :
|
|
252
270
|
isHover
|
|
253
271
|
?
|
|
254
272
|
borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover
|
|
@@ -47,7 +47,6 @@ export const NewAutocomplete = ({
|
|
|
47
47
|
contentTopDirection,
|
|
48
48
|
contentTopBoxSizing,
|
|
49
49
|
contentTopLineHeight,
|
|
50
|
-
contentTopBorderColor,
|
|
51
50
|
contentBottomMaxWidth,
|
|
52
51
|
contentBottomOverflow,
|
|
53
52
|
contentBottomPosition,
|
|
@@ -66,8 +65,8 @@ export const NewAutocomplete = ({
|
|
|
66
65
|
contentBottomRowAlignItems,
|
|
67
66
|
contentBottomRowTransition,
|
|
68
67
|
contentBottomRowHoverColor,
|
|
69
|
-
|
|
70
|
-
|
|
68
|
+
contentTopBorderHover,
|
|
69
|
+
contentTopBorderActive,
|
|
71
70
|
contentBottomInnerOverflowY,
|
|
72
71
|
contentBottomInnerOverflowX,
|
|
73
72
|
contentBottomInnerMaxHeight,
|
|
@@ -312,13 +311,14 @@ export const NewAutocomplete = ({
|
|
|
312
311
|
placeholder={placeHolder ? placeHolder : ''}
|
|
313
312
|
autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
|
|
314
313
|
style={{
|
|
314
|
+
border: 'none',
|
|
315
|
+
outline: 'none',
|
|
315
316
|
maxWidth: '100%',
|
|
316
317
|
transition: 'all 240ms',
|
|
317
318
|
cursor: disabled ? 'not-allowed' : 'auto',
|
|
318
319
|
color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
|
|
319
320
|
fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
|
|
320
321
|
height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
|
|
321
|
-
border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
|
|
322
322
|
padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
|
|
323
323
|
display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
|
|
324
324
|
fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
|
|
@@ -326,11 +326,11 @@ export const NewAutocomplete = ({
|
|
|
326
326
|
boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
|
|
327
327
|
lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
|
|
328
328
|
flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
|
|
329
|
-
|
|
330
|
-
errorMessage ? errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor :
|
|
331
|
-
isFocus ?
|
|
332
|
-
isHover ?
|
|
333
|
-
|
|
329
|
+
boxShadow:
|
|
330
|
+
errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.NEWAUTOCOMPLETE.errorColor}` :
|
|
331
|
+
isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.NEWAUTOCOMPLETE.contentTopBorderActive :
|
|
332
|
+
isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.NEWAUTOCOMPLETE.contentTopBorderHover :
|
|
333
|
+
contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
|
|
334
334
|
}}
|
|
335
335
|
{...props}
|
|
336
336
|
/>
|
|
@@ -401,7 +401,7 @@ NewAutocomplete.propTypes = {
|
|
|
401
401
|
contentBottomZindex: PropTypes.number,
|
|
402
402
|
contentBottomRadius: PropTypes.string,
|
|
403
403
|
contentTopLineHeight: PropTypes.string,
|
|
404
|
-
|
|
404
|
+
contentTopBorderHover: PropTypes.string,
|
|
405
405
|
contentBottomRowColor: PropTypes.string,
|
|
406
406
|
contentBottomMaxWidth: PropTypes.string,
|
|
407
407
|
contentBottomOverflow: PropTypes.string,
|
|
@@ -410,6 +410,7 @@ NewAutocomplete.propTypes = {
|
|
|
410
410
|
contentBottomBoxShadow: PropTypes.string,
|
|
411
411
|
contentBottomRowHeight: PropTypes.string,
|
|
412
412
|
contentBottomRowCursor: PropTypes.string,
|
|
413
|
+
contentTopBorderActive: PropTypes.string,
|
|
413
414
|
contentBottomRowDisplay: PropTypes.string,
|
|
414
415
|
contentBottomRowPadding: PropTypes.string,
|
|
415
416
|
contentBottomRowFontSize: PropTypes.string,
|
|
@@ -420,8 +421,6 @@ NewAutocomplete.propTypes = {
|
|
|
420
421
|
contentBottomRowAlignItems: PropTypes.string,
|
|
421
422
|
contentBottomRowTransition: PropTypes.string,
|
|
422
423
|
contentBottomRowHoverColor: PropTypes.string,
|
|
423
|
-
contentTopBorderHoverColor: PropTypes.string,
|
|
424
|
-
contentTopBorderActiveColor: PropTypes.string,
|
|
425
424
|
contentBottomInnerOverflowY: PropTypes.string,
|
|
426
425
|
contentBottomInnerOverflowX: PropTypes.string,
|
|
427
426
|
contentBottomInnerMaxHeight: PropTypes.string,
|
|
@@ -31,6 +31,7 @@ const Table = ({
|
|
|
31
31
|
<>
|
|
32
32
|
<table
|
|
33
33
|
style={{
|
|
34
|
+
width: '1475px',
|
|
34
35
|
borderCollapse: 'collapse'
|
|
35
36
|
}}
|
|
36
37
|
>
|
|
@@ -49,6 +50,7 @@ const Table = ({
|
|
|
49
50
|
<th
|
|
50
51
|
key={`${item}_${index}`}
|
|
51
52
|
style={{
|
|
53
|
+
cursor: 'pointer',
|
|
52
54
|
padding: tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding,
|
|
53
55
|
fontFamily: tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily,
|
|
54
56
|
fontWeight: tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight,
|
|
@@ -56,7 +58,7 @@ const Table = ({
|
|
|
56
58
|
borderTopRightRadius: index === tableHeadItems.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'
|
|
57
59
|
}}
|
|
58
60
|
>
|
|
59
|
-
{item}
|
|
61
|
+
{item.type === 'show' ? item.content : ''}
|
|
60
62
|
</th>
|
|
61
63
|
)
|
|
62
64
|
})
|
|
@@ -68,6 +70,7 @@ const Table = ({
|
|
|
68
70
|
{
|
|
69
71
|
tableBodyItems && tableBodyItems.length > 0 && <tbody
|
|
70
72
|
style={{
|
|
73
|
+
overflow: 'auto',
|
|
71
74
|
boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
|
|
72
75
|
}}
|
|
73
76
|
>
|
|
@@ -75,9 +78,10 @@ const Table = ({
|
|
|
75
78
|
{
|
|
76
79
|
|
|
77
80
|
tableBodyItems.map((item, index) => {
|
|
81
|
+
const monst = Object.entries(item);
|
|
78
82
|
return (
|
|
79
83
|
<>
|
|
80
|
-
{
|
|
84
|
+
{/* {
|
|
81
85
|
tBodyMarginTop ? tBodyMarginTop : configStyles.TABLE.tBodyMarginTop && index === 0 && <tr>
|
|
82
86
|
<td
|
|
83
87
|
style={{
|
|
@@ -86,7 +90,7 @@ const Table = ({
|
|
|
86
90
|
>
|
|
87
91
|
</td>
|
|
88
92
|
</tr>
|
|
89
|
-
}
|
|
93
|
+
} */}
|
|
90
94
|
|
|
91
95
|
<tr
|
|
92
96
|
key={`${item.id}_${index}`}
|
|
@@ -94,9 +98,9 @@ const Table = ({
|
|
|
94
98
|
borderBottom: index === tableBodyItems.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder
|
|
95
99
|
}}
|
|
96
100
|
>
|
|
97
|
-
{
|
|
101
|
+
{
|
|
98
102
|
Object.values(item).map((innerItem, innerIndex) => {
|
|
99
|
-
if (innerIndex
|
|
103
|
+
if (monst[innerIndex][0] !== 'id') {
|
|
100
104
|
return (
|
|
101
105
|
<td
|
|
102
106
|
key={`${innerItem}_${innerIndex}`}
|
|
@@ -150,17 +154,6 @@ const Table = ({
|
|
|
150
154
|
}
|
|
151
155
|
</tbody>
|
|
152
156
|
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
<tfoot
|
|
158
|
-
style={{
|
|
159
|
-
|
|
160
|
-
}}
|
|
161
|
-
>
|
|
162
|
-
|
|
163
|
-
</tfoot>
|
|
164
157
|
</table>
|
|
165
158
|
</>
|
|
166
159
|
);
|
|
@@ -1,23 +1,61 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Table from './index';
|
|
3
3
|
|
|
4
|
+
import { ReactComponent as ReactSVG } from './../../assets/table-settings-icon.svg';
|
|
5
|
+
|
|
4
6
|
export default {
|
|
5
7
|
component: Table,
|
|
6
8
|
title: 'Components/Table'
|
|
7
9
|
};
|
|
8
10
|
|
|
9
11
|
const Template = (args) => {
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
const tableDataInfo = {
|
|
13
|
+
header: [
|
|
14
|
+
{
|
|
15
|
+
type: 'show',
|
|
16
|
+
content: 'Հ/Հ'
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
type: 'show',
|
|
20
|
+
content: 'ՀՎՀՀ'
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
type: 'show',
|
|
24
|
+
content: 'Վարչ․շրջան'
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
type: 'show',
|
|
28
|
+
content: 'Վճար'
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
type: 'show',
|
|
32
|
+
content: 'Ամսաթիվ'
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
type: 'show',
|
|
36
|
+
content: 'Մուտքի ամս․'
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
type: 'show',
|
|
40
|
+
content: 'Հավելյալ ինֆորմացիա'
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
type: 'show',
|
|
44
|
+
content: 'Ստեղծված'
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
type: 'show',
|
|
48
|
+
content: 'Գործողություն'
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
type: 'show',
|
|
52
|
+
content: <ReactSVG />
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
body: [
|
|
56
|
+
|
|
57
|
+
]
|
|
58
|
+
};
|
|
21
59
|
|
|
22
60
|
const tableBodyItems = [
|
|
23
61
|
{ id: 1, hh: 19854, hvhh: 10195524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: ['item', 'just'] },
|
|
@@ -30,10 +68,138 @@ const Template = (args) => {
|
|
|
30
68
|
{ id: 541, hh: 44547, hvhh: 26595524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
|
|
31
69
|
];
|
|
32
70
|
|
|
33
|
-
return <Table tableHeadItems={
|
|
71
|
+
return <Table tableHeadItems={tableDataInfo.header} tableBodyItems={tableBodyItems} {...args} />;
|
|
34
72
|
};
|
|
35
73
|
|
|
36
74
|
export const Default = Template.bind({});
|
|
37
|
-
Default.args = {
|
|
75
|
+
Default.args = {};
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
// {
|
|
87
|
+
// header: [
|
|
88
|
+
// "Hello" | <component></component>,
|
|
89
|
+
// "Title 2",
|
|
90
|
+
// {
|
|
91
|
+
// type: 'hide',
|
|
92
|
+
// icon: svg
|
|
93
|
+
// }
|
|
94
|
+
// ]
|
|
95
|
+
|
|
96
|
+
// body: [
|
|
97
|
+
// {
|
|
98
|
+
// color: 'red',
|
|
99
|
+
// colorStatus: 'left' | "row" | "right",
|
|
100
|
+
// data: [
|
|
101
|
+
// "jkashdkjha",
|
|
102
|
+
// "jkashdkjha 1",
|
|
103
|
+
// "jkashdkjha 2",
|
|
104
|
+
// {
|
|
105
|
+
// type: "image",
|
|
106
|
+
// svg: <SVG></SVG>,
|
|
107
|
+
// click: onclick()
|
|
108
|
+
// },
|
|
109
|
+
// {
|
|
110
|
+
// type: "action",
|
|
111
|
+
// data: [
|
|
112
|
+
// {
|
|
113
|
+
// icon: svg,
|
|
114
|
+
// title?: 'sadas',
|
|
115
|
+
// click: onclick()
|
|
116
|
+
// },
|
|
117
|
+
// {
|
|
118
|
+
// icon: svg,
|
|
119
|
+
// group: [
|
|
120
|
+
// {
|
|
121
|
+
// icon: svg,
|
|
122
|
+
// title?: 'sadas',
|
|
123
|
+
// click: onclick()
|
|
124
|
+
// },
|
|
125
|
+
// {
|
|
126
|
+
// icon: svg,
|
|
127
|
+
// title?: 'sadas',
|
|
128
|
+
// click: onclick()
|
|
129
|
+
// }
|
|
130
|
+
// ]
|
|
131
|
+
// }
|
|
132
|
+
// ]
|
|
133
|
+
// },
|
|
134
|
+
// {
|
|
135
|
+
// type: "action",
|
|
136
|
+
// data: [
|
|
137
|
+
// [
|
|
138
|
+
// {
|
|
139
|
+
// icon: svg,
|
|
140
|
+
// title?: 'sadas',
|
|
141
|
+
// click: onclick()
|
|
142
|
+
// },
|
|
143
|
+
// {
|
|
144
|
+
// icon: svg,
|
|
145
|
+
// group: [
|
|
146
|
+
// {
|
|
147
|
+
// icon: svg,
|
|
148
|
+
// title?: 'sadas',
|
|
149
|
+
// click: onclick()
|
|
150
|
+
// },
|
|
151
|
+
// {
|
|
152
|
+
// icon: svg,
|
|
153
|
+
// title?: 'sadas',
|
|
154
|
+
// click: onclick()
|
|
155
|
+
// }
|
|
156
|
+
// ]
|
|
157
|
+
// }
|
|
158
|
+
// ],
|
|
159
|
+
// [
|
|
160
|
+
// {
|
|
161
|
+
// icon: svg,
|
|
162
|
+
// title?: 'sadas',
|
|
163
|
+
// click: onclick()
|
|
164
|
+
// },
|
|
165
|
+
// {
|
|
166
|
+
// icon: svg,
|
|
167
|
+
// group: [
|
|
168
|
+
// {
|
|
169
|
+
// icon: svg,
|
|
170
|
+
// title?: 'sadas',
|
|
171
|
+
// click: onclick()
|
|
172
|
+
// },
|
|
173
|
+
// {
|
|
174
|
+
// icon: svg,
|
|
175
|
+
// title?: 'sadas',
|
|
176
|
+
// click: onclick()
|
|
177
|
+
// }
|
|
178
|
+
// ]
|
|
179
|
+
// }
|
|
180
|
+
// ]
|
|
181
|
+
// ]
|
|
182
|
+
// },
|
|
183
|
+
// {
|
|
184
|
+
// type: "accordion",
|
|
185
|
+
// title: 'asdasdsa',
|
|
186
|
+
// openKeys: [
|
|
187
|
+
// 't1',
|
|
188
|
+
// 't2',
|
|
189
|
+
// 't3'
|
|
190
|
+
// ]
|
|
191
|
+
// },
|
|
192
|
+
// {
|
|
193
|
+
// type: "text",
|
|
194
|
+
// accourdionData: [
|
|
195
|
+
// 'asdasd',
|
|
196
|
+
// <Component></Component>,
|
|
197
|
+
// 'asdasd',
|
|
198
|
+
// 'asdasd'
|
|
199
|
+
// ]
|
|
200
|
+
// }
|
|
201
|
+
// ]
|
|
202
|
+
// }
|
|
203
|
+
// ]
|
|
204
|
+
// }
|
|
38
205
|
|
|
39
|
-
};
|
package/tui.config.js
CHANGED
|
@@ -40,6 +40,7 @@ module.exports = {
|
|
|
40
40
|
errorColor: '#e00', // for error message color
|
|
41
41
|
labelWeight: '500', // for label font weight
|
|
42
42
|
errorClassName: '', // for error message classname (you can set custom class for your custom css)
|
|
43
|
+
telErrorMessage: '', // for error message when type is tel
|
|
43
44
|
phoneDisplay: 'flex', // for phone extention display, work when input type is tel
|
|
44
45
|
autoComplete: 'off', // for autocomplete fill mode (browser specific, may not work)
|
|
45
46
|
errorBottom: '-20px', // for error message position from bottom (work when errorPosition prop is 'absolute')
|
|
@@ -50,7 +51,7 @@ module.exports = {
|
|
|
50
51
|
labelLineHeight: '22px', // for label line height
|
|
51
52
|
errorLineHeight: '19px', // for error message line height
|
|
52
53
|
boxSizing: 'border-box', // for box sizing
|
|
53
|
-
borderRight: '
|
|
54
|
+
borderRight: '1px solid', // for type tel right border
|
|
54
55
|
backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
|
|
55
56
|
color: 'rgb(60, 57, 62)', // for input color
|
|
56
57
|
labelMarginBottom: '6px', // for label margin bottom
|
|
@@ -280,11 +281,10 @@ module.exports = {
|
|
|
280
281
|
contentTopMaxWidth: '400px', // for autocomplate top block max width
|
|
281
282
|
contentTopLineHeight: '22px', // for autocomplate top block line height
|
|
282
283
|
contentTopPadding: '0px 15px', // for autocomplate top block padding
|
|
283
|
-
contentTopBorder: '2px solid', // for autocomplate top block border
|
|
284
|
-
contentTopBorderColor: '#D1D1D1', // for autocomplate top block border color
|
|
285
284
|
contentTopBoxSizing: 'border-box', // for autocomplate top block box sizing
|
|
286
|
-
|
|
287
|
-
|
|
285
|
+
contentTopBorder: '0 0 0 2px #D1D1D1', // for autocomplate top block border color
|
|
286
|
+
contentTopBorderHover: '0 0 0 2px #3C393E', // for autocomplate top block border hover color
|
|
287
|
+
contentTopBorderActive: '0 0 0 2px #00236A', // for autocomplate top block border active color
|
|
288
288
|
|
|
289
289
|
contentBottomZindex: 1, // for autocomplete bottom block z-index
|
|
290
290
|
contentBottomLeft: '0px', // for autocomplete bottom block left
|