@xaypay/tui 0.0.77 → 0.0.79
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 +44 -16
- package/dist/index.js +44 -16
- 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/src/utils/index.js +16 -3
- package/tui.config.js +5 -5
package/dist/index.es.js
CHANGED
|
@@ -192,10 +192,23 @@ File.defaultProps = {
|
|
|
192
192
|
const _ = require('lodash');
|
|
193
193
|
const compereConfigs = () => {
|
|
194
194
|
let projectConfig = {};
|
|
195
|
-
let packageConfig =
|
|
195
|
+
let packageConfig = {};
|
|
196
196
|
try {
|
|
197
|
-
|
|
198
|
-
} catch (e) {
|
|
197
|
+
packageConfig = require('../tui.config.js');
|
|
198
|
+
} catch (e) {
|
|
199
|
+
try {
|
|
200
|
+
packageConfig = require('../../tui.config.js');
|
|
201
|
+
} catch (err) {
|
|
202
|
+
packageConfig = {};
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
try {
|
|
206
|
+
projectConfig = require('../../../../tui.config.js');
|
|
207
|
+
} catch (error) {
|
|
208
|
+
projectConfig = {};
|
|
209
|
+
// console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
|
|
210
|
+
}
|
|
211
|
+
|
|
199
212
|
return _.merge(packageConfig, projectConfig);
|
|
200
213
|
};
|
|
201
214
|
|
|
@@ -637,14 +650,26 @@ const Input = ({
|
|
|
637
650
|
`;
|
|
638
651
|
const handleChange = event => {
|
|
639
652
|
const currentValue = event.target.value;
|
|
653
|
+
let prevValue = innerValue;
|
|
640
654
|
setInnerValue(currentValue);
|
|
641
655
|
if (change) {
|
|
642
656
|
change(currentValue);
|
|
643
657
|
}
|
|
644
658
|
if (type === 'tel') {
|
|
645
659
|
if (!phoneNumberRegex.test(currentValue)) {
|
|
646
|
-
|
|
647
|
-
|
|
660
|
+
if (currentValue === '') {
|
|
661
|
+
setInnerErrorMessage('');
|
|
662
|
+
setInnerValue('');
|
|
663
|
+
if (change) {
|
|
664
|
+
change('');
|
|
665
|
+
}
|
|
666
|
+
} else {
|
|
667
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
668
|
+
setInnerValue(prevValue);
|
|
669
|
+
if (change) {
|
|
670
|
+
change(prevValue);
|
|
671
|
+
}
|
|
672
|
+
}
|
|
648
673
|
} else {
|
|
649
674
|
setInnerErrorMessage('');
|
|
650
675
|
if (currentValue.length > 8) {
|
|
@@ -692,7 +717,11 @@ const Input = ({
|
|
|
692
717
|
setInnerValue(value);
|
|
693
718
|
if (type === 'tel') {
|
|
694
719
|
if (!phoneNumberRegex.test(value)) {
|
|
695
|
-
|
|
720
|
+
if (value === '') {
|
|
721
|
+
setInnerErrorMessage('');
|
|
722
|
+
} else {
|
|
723
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
724
|
+
}
|
|
696
725
|
setInnerValue('');
|
|
697
726
|
} else {
|
|
698
727
|
setInnerErrorMessage('');
|
|
@@ -711,7 +740,7 @@ const Input = ({
|
|
|
711
740
|
}
|
|
712
741
|
}
|
|
713
742
|
}
|
|
714
|
-
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
|
|
743
|
+
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
|
|
715
744
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
716
745
|
className: `${styles$9["input-wrap"]}`
|
|
717
746
|
}, label ? /*#__PURE__*/React__default.createElement("label", {
|
|
@@ -763,7 +792,7 @@ const Input = ({
|
|
|
763
792
|
display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
|
|
764
793
|
borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
|
|
765
794
|
alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
|
|
766
|
-
borderColor: isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
|
|
795
|
+
borderColor: innerErrorMessage ? errorColor ? errorColor : configStyles.INPUT.errorColor : isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
|
|
767
796
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
768
797
|
justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
|
|
769
798
|
backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
@@ -3672,7 +3701,6 @@ const NewAutocomplete = ({
|
|
|
3672
3701
|
contentTopDirection,
|
|
3673
3702
|
contentTopBoxSizing,
|
|
3674
3703
|
contentTopLineHeight,
|
|
3675
|
-
contentTopBorderColor,
|
|
3676
3704
|
contentBottomMaxWidth,
|
|
3677
3705
|
contentBottomOverflow,
|
|
3678
3706
|
contentBottomPosition,
|
|
@@ -3691,8 +3719,8 @@ const NewAutocomplete = ({
|
|
|
3691
3719
|
contentBottomRowAlignItems,
|
|
3692
3720
|
contentBottomRowTransition,
|
|
3693
3721
|
contentBottomRowHoverColor,
|
|
3694
|
-
|
|
3695
|
-
|
|
3722
|
+
contentTopBorderHover,
|
|
3723
|
+
contentTopBorderActive,
|
|
3696
3724
|
contentBottomInnerOverflowY,
|
|
3697
3725
|
contentBottomInnerOverflowX,
|
|
3698
3726
|
contentBottomInnerMaxHeight,
|
|
@@ -3869,13 +3897,14 @@ const NewAutocomplete = ({
|
|
|
3869
3897
|
placeholder: placeHolder ? placeHolder : '',
|
|
3870
3898
|
autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
|
|
3871
3899
|
style: {
|
|
3900
|
+
border: 'none',
|
|
3901
|
+
outline: 'none',
|
|
3872
3902
|
maxWidth: '100%',
|
|
3873
3903
|
transition: 'all 240ms',
|
|
3874
3904
|
cursor: disabled ? 'not-allowed' : 'auto',
|
|
3875
3905
|
color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
|
|
3876
3906
|
fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
|
|
3877
3907
|
height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
|
|
3878
|
-
border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
|
|
3879
3908
|
padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
|
|
3880
3909
|
display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
|
|
3881
3910
|
fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
|
|
@@ -3883,7 +3912,7 @@ const NewAutocomplete = ({
|
|
|
3883
3912
|
boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
|
|
3884
3913
|
lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
|
|
3885
3914
|
flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
|
|
3886
|
-
|
|
3915
|
+
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
3916
|
}
|
|
3888
3917
|
}, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
|
|
3889
3918
|
style: {
|
|
@@ -3937,7 +3966,7 @@ NewAutocomplete.propTypes = {
|
|
|
3937
3966
|
contentBottomZindex: PropTypes.number,
|
|
3938
3967
|
contentBottomRadius: PropTypes.string,
|
|
3939
3968
|
contentTopLineHeight: PropTypes.string,
|
|
3940
|
-
|
|
3969
|
+
contentTopBorderHover: PropTypes.string,
|
|
3941
3970
|
contentBottomRowColor: PropTypes.string,
|
|
3942
3971
|
contentBottomMaxWidth: PropTypes.string,
|
|
3943
3972
|
contentBottomOverflow: PropTypes.string,
|
|
@@ -3946,6 +3975,7 @@ NewAutocomplete.propTypes = {
|
|
|
3946
3975
|
contentBottomBoxShadow: PropTypes.string,
|
|
3947
3976
|
contentBottomRowHeight: PropTypes.string,
|
|
3948
3977
|
contentBottomRowCursor: PropTypes.string,
|
|
3978
|
+
contentTopBorderActive: PropTypes.string,
|
|
3949
3979
|
contentBottomRowDisplay: PropTypes.string,
|
|
3950
3980
|
contentBottomRowPadding: PropTypes.string,
|
|
3951
3981
|
contentBottomRowFontSize: PropTypes.string,
|
|
@@ -3956,8 +3986,6 @@ NewAutocomplete.propTypes = {
|
|
|
3956
3986
|
contentBottomRowAlignItems: PropTypes.string,
|
|
3957
3987
|
contentBottomRowTransition: PropTypes.string,
|
|
3958
3988
|
contentBottomRowHoverColor: PropTypes.string,
|
|
3959
|
-
contentTopBorderHoverColor: PropTypes.string,
|
|
3960
|
-
contentTopBorderActiveColor: PropTypes.string,
|
|
3961
3989
|
contentBottomInnerOverflowY: PropTypes.string,
|
|
3962
3990
|
contentBottomInnerOverflowX: PropTypes.string,
|
|
3963
3991
|
contentBottomInnerMaxHeight: PropTypes.string,
|
package/dist/index.js
CHANGED
|
@@ -222,10 +222,23 @@ File.defaultProps = {
|
|
|
222
222
|
const _ = require('lodash');
|
|
223
223
|
const compereConfigs = () => {
|
|
224
224
|
let projectConfig = {};
|
|
225
|
-
let packageConfig =
|
|
225
|
+
let packageConfig = {};
|
|
226
226
|
try {
|
|
227
|
-
|
|
228
|
-
} catch (e) {
|
|
227
|
+
packageConfig = require('../tui.config.js');
|
|
228
|
+
} catch (e) {
|
|
229
|
+
try {
|
|
230
|
+
packageConfig = require('../../tui.config.js');
|
|
231
|
+
} catch (err) {
|
|
232
|
+
packageConfig = {};
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
try {
|
|
236
|
+
projectConfig = require('../../../../tui.config.js');
|
|
237
|
+
} catch (error) {
|
|
238
|
+
projectConfig = {};
|
|
239
|
+
// console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
|
|
240
|
+
}
|
|
241
|
+
|
|
229
242
|
return _.merge(packageConfig, projectConfig);
|
|
230
243
|
};
|
|
231
244
|
|
|
@@ -667,14 +680,26 @@ const Input = ({
|
|
|
667
680
|
`;
|
|
668
681
|
const handleChange = event => {
|
|
669
682
|
const currentValue = event.target.value;
|
|
683
|
+
let prevValue = innerValue;
|
|
670
684
|
setInnerValue(currentValue);
|
|
671
685
|
if (change) {
|
|
672
686
|
change(currentValue);
|
|
673
687
|
}
|
|
674
688
|
if (type === 'tel') {
|
|
675
689
|
if (!phoneNumberRegex.test(currentValue)) {
|
|
676
|
-
|
|
677
|
-
|
|
690
|
+
if (currentValue === '') {
|
|
691
|
+
setInnerErrorMessage('');
|
|
692
|
+
setInnerValue('');
|
|
693
|
+
if (change) {
|
|
694
|
+
change('');
|
|
695
|
+
}
|
|
696
|
+
} else {
|
|
697
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
698
|
+
setInnerValue(prevValue);
|
|
699
|
+
if (change) {
|
|
700
|
+
change(prevValue);
|
|
701
|
+
}
|
|
702
|
+
}
|
|
678
703
|
} else {
|
|
679
704
|
setInnerErrorMessage('');
|
|
680
705
|
if (currentValue.length > 8) {
|
|
@@ -722,7 +747,11 @@ const Input = ({
|
|
|
722
747
|
setInnerValue(value);
|
|
723
748
|
if (type === 'tel') {
|
|
724
749
|
if (!phoneNumberRegex.test(value)) {
|
|
725
|
-
|
|
750
|
+
if (value === '') {
|
|
751
|
+
setInnerErrorMessage('');
|
|
752
|
+
} else {
|
|
753
|
+
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
754
|
+
}
|
|
726
755
|
setInnerValue('');
|
|
727
756
|
} else {
|
|
728
757
|
setInnerErrorMessage('');
|
|
@@ -741,7 +770,7 @@ const Input = ({
|
|
|
741
770
|
}
|
|
742
771
|
}
|
|
743
772
|
}
|
|
744
|
-
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
|
|
773
|
+
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
|
|
745
774
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
746
775
|
className: `${styles$9["input-wrap"]}`
|
|
747
776
|
}, label ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
@@ -793,7 +822,7 @@ const Input = ({
|
|
|
793
822
|
display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
|
|
794
823
|
borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
|
|
795
824
|
alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
|
|
796
|
-
borderColor: isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
|
|
825
|
+
borderColor: innerErrorMessage ? errorColor ? errorColor : configStyles.INPUT.errorColor : isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
|
|
797
826
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
798
827
|
justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
|
|
799
828
|
backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
@@ -3702,7 +3731,6 @@ const NewAutocomplete = ({
|
|
|
3702
3731
|
contentTopDirection,
|
|
3703
3732
|
contentTopBoxSizing,
|
|
3704
3733
|
contentTopLineHeight,
|
|
3705
|
-
contentTopBorderColor,
|
|
3706
3734
|
contentBottomMaxWidth,
|
|
3707
3735
|
contentBottomOverflow,
|
|
3708
3736
|
contentBottomPosition,
|
|
@@ -3721,8 +3749,8 @@ const NewAutocomplete = ({
|
|
|
3721
3749
|
contentBottomRowAlignItems,
|
|
3722
3750
|
contentBottomRowTransition,
|
|
3723
3751
|
contentBottomRowHoverColor,
|
|
3724
|
-
|
|
3725
|
-
|
|
3752
|
+
contentTopBorderHover,
|
|
3753
|
+
contentTopBorderActive,
|
|
3726
3754
|
contentBottomInnerOverflowY,
|
|
3727
3755
|
contentBottomInnerOverflowX,
|
|
3728
3756
|
contentBottomInnerMaxHeight,
|
|
@@ -3899,13 +3927,14 @@ const NewAutocomplete = ({
|
|
|
3899
3927
|
placeholder: placeHolder ? placeHolder : '',
|
|
3900
3928
|
autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
|
|
3901
3929
|
style: {
|
|
3930
|
+
border: 'none',
|
|
3931
|
+
outline: 'none',
|
|
3902
3932
|
maxWidth: '100%',
|
|
3903
3933
|
transition: 'all 240ms',
|
|
3904
3934
|
cursor: disabled ? 'not-allowed' : 'auto',
|
|
3905
3935
|
color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
|
|
3906
3936
|
fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
|
|
3907
3937
|
height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
|
|
3908
|
-
border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
|
|
3909
3938
|
padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
|
|
3910
3939
|
display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
|
|
3911
3940
|
fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
|
|
@@ -3913,7 +3942,7 @@ const NewAutocomplete = ({
|
|
|
3913
3942
|
boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
|
|
3914
3943
|
lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
|
|
3915
3944
|
flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
|
|
3916
|
-
|
|
3945
|
+
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
3946
|
}
|
|
3918
3947
|
}, props)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
3919
3948
|
style: {
|
|
@@ -3967,7 +3996,7 @@ NewAutocomplete.propTypes = {
|
|
|
3967
3996
|
contentBottomZindex: PropTypes__default["default"].number,
|
|
3968
3997
|
contentBottomRadius: PropTypes__default["default"].string,
|
|
3969
3998
|
contentTopLineHeight: PropTypes__default["default"].string,
|
|
3970
|
-
|
|
3999
|
+
contentTopBorderHover: PropTypes__default["default"].string,
|
|
3971
4000
|
contentBottomRowColor: PropTypes__default["default"].string,
|
|
3972
4001
|
contentBottomMaxWidth: PropTypes__default["default"].string,
|
|
3973
4002
|
contentBottomOverflow: PropTypes__default["default"].string,
|
|
@@ -3976,6 +4005,7 @@ NewAutocomplete.propTypes = {
|
|
|
3976
4005
|
contentBottomBoxShadow: PropTypes__default["default"].string,
|
|
3977
4006
|
contentBottomRowHeight: PropTypes__default["default"].string,
|
|
3978
4007
|
contentBottomRowCursor: PropTypes__default["default"].string,
|
|
4008
|
+
contentTopBorderActive: PropTypes__default["default"].string,
|
|
3979
4009
|
contentBottomRowDisplay: PropTypes__default["default"].string,
|
|
3980
4010
|
contentBottomRowPadding: PropTypes__default["default"].string,
|
|
3981
4011
|
contentBottomRowFontSize: PropTypes__default["default"].string,
|
|
@@ -3986,8 +4016,6 @@ NewAutocomplete.propTypes = {
|
|
|
3986
4016
|
contentBottomRowAlignItems: PropTypes__default["default"].string,
|
|
3987
4017
|
contentBottomRowTransition: PropTypes__default["default"].string,
|
|
3988
4018
|
contentBottomRowHoverColor: PropTypes__default["default"].string,
|
|
3989
|
-
contentTopBorderHoverColor: PropTypes__default["default"].string,
|
|
3990
|
-
contentTopBorderActiveColor: PropTypes__default["default"].string,
|
|
3991
4019
|
contentBottomInnerOverflowY: PropTypes__default["default"].string,
|
|
3992
4020
|
contentBottomInnerOverflowX: PropTypes__default["default"].string,
|
|
3993
4021
|
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/src/utils/index.js
CHANGED
|
@@ -2,11 +2,24 @@ const _ = require('lodash');
|
|
|
2
2
|
|
|
3
3
|
export const compereConfigs = () => {
|
|
4
4
|
let projectConfig = {};
|
|
5
|
-
let packageConfig =
|
|
5
|
+
let packageConfig = {};
|
|
6
6
|
|
|
7
7
|
try {
|
|
8
|
-
|
|
9
|
-
} catch(e)
|
|
8
|
+
packageConfig = require('../tui.config.js');
|
|
9
|
+
} catch (e){
|
|
10
|
+
try {
|
|
11
|
+
packageConfig = require('../../tui.config.js');
|
|
12
|
+
} catch (err) {
|
|
13
|
+
packageConfig = {};
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
try {
|
|
18
|
+
projectConfig = require('../../../../tui.config.js');
|
|
19
|
+
} catch (error) {
|
|
20
|
+
projectConfig = {};
|
|
21
|
+
// console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
|
|
22
|
+
}
|
|
10
23
|
|
|
11
24
|
return _.merge(packageConfig, projectConfig);
|
|
12
25
|
};
|
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
|