@xaypay/tui 0.0.101 → 0.0.103
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 +75 -57
- package/dist/index.js +75 -57
- package/package.json +1 -1
- package/src/assets/figma-image.png +0 -0
- package/src/components/icon/CloseSlide.js +2 -2
- package/src/components/icon/index.js +0 -1
- package/src/components/input/index.js +29 -21
- package/src/components/modal/index.js +95 -84
- package/src/components/modal/modal.stories.js +17 -3
- package/src/components/select/index.js +4 -2
- package/src/components/toaster/index.js +1 -1
- package/src/stories/configuration.stories.mdx +5 -3
- package/tui.config.js +6 -4
package/dist/index.es.js
CHANGED
|
@@ -389,7 +389,6 @@ const SvgCloseIcon = ({
|
|
|
389
389
|
const SvgCloseSlide = ({
|
|
390
390
|
title,
|
|
391
391
|
titleId,
|
|
392
|
-
fillColor,
|
|
393
392
|
...props
|
|
394
393
|
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
395
394
|
width: "18",
|
|
@@ -402,7 +401,7 @@ const SvgCloseSlide = ({
|
|
|
402
401
|
id: titleId
|
|
403
402
|
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
404
403
|
d: "m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z",
|
|
405
|
-
fill:
|
|
404
|
+
fill: "#fff"
|
|
406
405
|
}));
|
|
407
406
|
|
|
408
407
|
const Modal = ({
|
|
@@ -434,6 +433,7 @@ const Modal = ({
|
|
|
434
433
|
headerHeight,
|
|
435
434
|
justifyContent,
|
|
436
435
|
backgroundColor,
|
|
436
|
+
grayDecorHeight,
|
|
437
437
|
layerBackgroundColor
|
|
438
438
|
}) => {
|
|
439
439
|
const [select, setSelect] = useState(0);
|
|
@@ -522,13 +522,13 @@ const Modal = ({
|
|
|
522
522
|
className: `${classProps} ${styles$b['animation__modal']}`,
|
|
523
523
|
onClick: handleStopClosing,
|
|
524
524
|
style: {
|
|
525
|
-
width: width ? width : configStyles.MODAL.width,
|
|
526
|
-
height: height ? height : configStyles.MODAL.height,
|
|
527
525
|
position: 'relative',
|
|
528
|
-
display: 'grid',
|
|
529
|
-
overflow: 'hidden',
|
|
530
526
|
boxSizing: 'border-box',
|
|
531
|
-
|
|
527
|
+
display: type === 'content' ? 'grid' : 'block',
|
|
528
|
+
width: width ? width : configStyles.MODAL.width,
|
|
529
|
+
overflow: type === 'content' ? 'auto' : 'hidden',
|
|
530
|
+
height: height ? height : configStyles.MODAL.height,
|
|
531
|
+
gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
|
|
532
532
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
533
533
|
maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
|
|
534
534
|
maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
|
|
@@ -536,16 +536,16 @@ const Modal = ({
|
|
|
536
536
|
backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
|
|
537
537
|
minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : ''
|
|
538
538
|
}
|
|
539
|
-
}, type === 'content'
|
|
539
|
+
}, type === 'content' && /*#__PURE__*/React__default.createElement("div", {
|
|
540
540
|
style: {
|
|
541
541
|
width: '100%',
|
|
542
542
|
display: 'flex',
|
|
543
543
|
alignItems: 'center',
|
|
544
|
-
backgroundColor: '#FBFBFB',
|
|
545
544
|
boxSizing: 'border-box',
|
|
546
|
-
|
|
545
|
+
backgroundColor: '#FBFBFB',
|
|
546
|
+
padding: padding ? padding : configStyles.MODAL.padding,
|
|
547
547
|
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
548
|
-
|
|
548
|
+
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
|
|
549
549
|
}
|
|
550
550
|
}, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
|
|
551
551
|
style: {
|
|
@@ -565,39 +565,49 @@ const Modal = ({
|
|
|
565
565
|
height: '14px',
|
|
566
566
|
cursor: 'pointer'
|
|
567
567
|
}
|
|
568
|
-
}, /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)))
|
|
569
|
-
onClick: handleCloseModal,
|
|
570
|
-
style: {
|
|
571
|
-
position: 'absolute',
|
|
572
|
-
top: '23px',
|
|
573
|
-
width: '18px',
|
|
574
|
-
right: '23px',
|
|
575
|
-
height: '18px',
|
|
576
|
-
border: 'none',
|
|
577
|
-
outline: 'none',
|
|
578
|
-
cursor: 'pointer',
|
|
579
|
-
zIndex: '1',
|
|
580
|
-
backgroundColor: 'transparent'
|
|
581
|
-
}
|
|
582
|
-
}, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null)), /*#__PURE__*/React__default.createElement("div", {
|
|
568
|
+
}, /*#__PURE__*/React__default.createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default.createElement("div", {
|
|
583
569
|
style: {
|
|
584
570
|
display: 'flex',
|
|
585
|
-
position: 'relative',
|
|
586
571
|
width: '100%',
|
|
587
572
|
height: '100%',
|
|
573
|
+
overflow: 'hidden',
|
|
574
|
+
position: 'relative',
|
|
588
575
|
alignItems: 'center',
|
|
589
576
|
boxSizing: 'border-box',
|
|
590
577
|
justifyContent: 'center',
|
|
591
|
-
overflow: 'auto',
|
|
592
578
|
borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
|
|
593
579
|
borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
|
|
594
580
|
borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
|
|
595
581
|
}
|
|
596
|
-
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement("div", {
|
|
582
|
+
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
597
583
|
style: {
|
|
584
|
+
position: 'absolute',
|
|
585
|
+
top: '0px',
|
|
586
|
+
left: '0px',
|
|
598
587
|
width: '100%',
|
|
599
|
-
|
|
600
|
-
|
|
588
|
+
borderTopLeftRadius: '6px',
|
|
589
|
+
borderTopRightRadius: '6px',
|
|
590
|
+
height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
|
|
591
|
+
backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
|
|
592
|
+
}
|
|
593
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
594
|
+
onClick: handleCloseModal,
|
|
595
|
+
style: {
|
|
596
|
+
position: 'absolute',
|
|
597
|
+
zIndex: '1',
|
|
598
|
+
top: '20px',
|
|
599
|
+
width: '18px',
|
|
600
|
+
right: '20px',
|
|
601
|
+
height: '18px',
|
|
602
|
+
border: 'none',
|
|
603
|
+
padding: '0px',
|
|
604
|
+
outline: 'none',
|
|
605
|
+
cursor: 'pointer',
|
|
606
|
+
backgroundColor: 'transparent'
|
|
607
|
+
}
|
|
608
|
+
}, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
|
|
609
|
+
style: {
|
|
610
|
+
height: '100%'
|
|
601
611
|
}
|
|
602
612
|
}, innerData && innerData.length > 0 && innerData.map((item, index) => {
|
|
603
613
|
if (select === index) {
|
|
@@ -609,7 +619,6 @@ const Modal = ({
|
|
|
609
619
|
objectFit: 'cover',
|
|
610
620
|
objectPosition: 'center',
|
|
611
621
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
612
|
-
width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
|
|
613
622
|
height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
|
|
614
623
|
},
|
|
615
624
|
src: item.url,
|
|
@@ -645,7 +654,7 @@ const Modal = ({
|
|
|
645
654
|
top: 'calc(50% - 12px)',
|
|
646
655
|
backgroundColor: 'transparent'
|
|
647
656
|
}
|
|
648
|
-
}, /*#__PURE__*/React__default.createElement(SvgNext, null))))))));
|
|
657
|
+
}, /*#__PURE__*/React__default.createElement(SvgNext, null)))))))));
|
|
649
658
|
};
|
|
650
659
|
Modal.propTypes = {
|
|
651
660
|
data: PropTypes.array,
|
|
@@ -674,6 +683,7 @@ Modal.propTypes = {
|
|
|
674
683
|
headerHeight: PropTypes.string,
|
|
675
684
|
justifyContent: PropTypes.string,
|
|
676
685
|
backgroundColor: PropTypes.string,
|
|
686
|
+
grayDecorHeight: PropTypes.string,
|
|
677
687
|
layerBackgroundColor: PropTypes.string
|
|
678
688
|
};
|
|
679
689
|
Modal.defaultProps = {
|
|
@@ -748,6 +758,7 @@ const Input = ({
|
|
|
748
758
|
regexpErrorMessage,
|
|
749
759
|
phoneJustifyContent,
|
|
750
760
|
borderRightColorHover,
|
|
761
|
+
backgroundDisableColor,
|
|
751
762
|
errorAnimationDuration,
|
|
752
763
|
...props
|
|
753
764
|
}) => {
|
|
@@ -801,14 +812,7 @@ const Input = ({
|
|
|
801
812
|
}
|
|
802
813
|
}
|
|
803
814
|
if (type === 'number') {
|
|
804
|
-
const regNum = /^\d+(\.)?(
|
|
805
|
-
if (!regNum.test(currentValue)) {
|
|
806
|
-
const newStr = currentValue.replace(/[^\d+]/g, '');
|
|
807
|
-
setInnerValue(newStr);
|
|
808
|
-
if (change) {
|
|
809
|
-
change(newStr);
|
|
810
|
-
}
|
|
811
|
-
}
|
|
815
|
+
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
812
816
|
if (minNumSize && currentValue < minNumSize) {
|
|
813
817
|
setInnerValue(`${minNumSize}`);
|
|
814
818
|
if (change) {
|
|
@@ -821,7 +825,7 @@ const Input = ({
|
|
|
821
825
|
change(`${maxNumSize}`);
|
|
822
826
|
}
|
|
823
827
|
}
|
|
824
|
-
if (floatToFix
|
|
828
|
+
if (floatToFix > 0) {
|
|
825
829
|
const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
|
|
826
830
|
const int = floatNumParts[0];
|
|
827
831
|
const float = floatNumParts[1];
|
|
@@ -859,7 +863,7 @@ const Input = ({
|
|
|
859
863
|
}
|
|
860
864
|
}
|
|
861
865
|
}
|
|
862
|
-
} else
|
|
866
|
+
} else {
|
|
863
867
|
const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
|
|
864
868
|
const int = floatNumParts[0];
|
|
865
869
|
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
@@ -869,6 +873,15 @@ const Input = ({
|
|
|
869
873
|
}
|
|
870
874
|
}
|
|
871
875
|
}
|
|
876
|
+
if (!regNum.test(currentValue)) {
|
|
877
|
+
const newStr = currentValue.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
878
|
+
return b + c.replace(/\./g, '');
|
|
879
|
+
});
|
|
880
|
+
setInnerValue(newStr);
|
|
881
|
+
if (change) {
|
|
882
|
+
change(newStr);
|
|
883
|
+
}
|
|
884
|
+
}
|
|
872
885
|
if (currentValue === '') {
|
|
873
886
|
setInnerValue('');
|
|
874
887
|
if (change) {
|
|
@@ -931,14 +944,7 @@ const Input = ({
|
|
|
931
944
|
}
|
|
932
945
|
}
|
|
933
946
|
if (type === 'number') {
|
|
934
|
-
const regNum = /^\d+(\.)?(\d+)
|
|
935
|
-
if (!regNum.test(value)) {
|
|
936
|
-
const newStr = value.replace(/[^\d+]/g, '');
|
|
937
|
-
setInnerValue(newStr);
|
|
938
|
-
if (change) {
|
|
939
|
-
change(newStr);
|
|
940
|
-
}
|
|
941
|
-
}
|
|
947
|
+
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
942
948
|
if (minNumSize && value < minNumSize) {
|
|
943
949
|
setInnerValue(`${minNumSize}`);
|
|
944
950
|
if (change) {
|
|
@@ -951,7 +957,7 @@ const Input = ({
|
|
|
951
957
|
change(`${maxNumSize}`);
|
|
952
958
|
}
|
|
953
959
|
}
|
|
954
|
-
if (floatToFix
|
|
960
|
+
if (floatToFix > 0) {
|
|
955
961
|
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
956
962
|
const int = floatNumParts[0];
|
|
957
963
|
const float = floatNumParts[1];
|
|
@@ -989,7 +995,7 @@ const Input = ({
|
|
|
989
995
|
}
|
|
990
996
|
}
|
|
991
997
|
}
|
|
992
|
-
} else
|
|
998
|
+
} else {
|
|
993
999
|
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
994
1000
|
const int = floatNumParts[0];
|
|
995
1001
|
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
@@ -999,6 +1005,15 @@ const Input = ({
|
|
|
999
1005
|
}
|
|
1000
1006
|
}
|
|
1001
1007
|
}
|
|
1008
|
+
if (!regNum.test(value)) {
|
|
1009
|
+
const newStr = value.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
1010
|
+
return b + c.replace(/\./g, '');
|
|
1011
|
+
});
|
|
1012
|
+
setInnerValue(newStr);
|
|
1013
|
+
if (change) {
|
|
1014
|
+
change(newStr);
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1002
1017
|
if (value === '') {
|
|
1003
1018
|
setInnerValue('');
|
|
1004
1019
|
if (change) {
|
|
@@ -1094,7 +1109,7 @@ const Input = ({
|
|
|
1094
1109
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
1095
1110
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
1096
1111
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
1097
|
-
backgroundColor: disabled ?
|
|
1112
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
1098
1113
|
}
|
|
1099
1114
|
})), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
|
|
1100
1115
|
onClick: type === 'password' ? handleShowPass : _ => _,
|
|
@@ -1180,6 +1195,7 @@ Input.propTypes = {
|
|
|
1180
1195
|
regexp: PropTypes.instanceOf(RegExp),
|
|
1181
1196
|
phoneJustifyContent: PropTypes.string,
|
|
1182
1197
|
borderRightColorHover: PropTypes.string,
|
|
1198
|
+
backgroundDisableColor: PropTypes.string,
|
|
1183
1199
|
errorAnimationDuration: PropTypes.string,
|
|
1184
1200
|
leftIcon: PropTypes.arrayOf(PropTypes.element),
|
|
1185
1201
|
rightIcon: PropTypes.arrayOf(PropTypes.element),
|
|
@@ -1416,6 +1432,7 @@ const Select = ({
|
|
|
1416
1432
|
selectedHoverColor,
|
|
1417
1433
|
selectedTransition,
|
|
1418
1434
|
selectedBackgroundColor,
|
|
1435
|
+
selectedDisableBackgroundColor,
|
|
1419
1436
|
optionsBoxShadow,
|
|
1420
1437
|
optionsBorderRadius,
|
|
1421
1438
|
optionsBackgroundColor,
|
|
@@ -1574,7 +1591,7 @@ const Select = ({
|
|
|
1574
1591
|
fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
|
|
1575
1592
|
lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
|
|
1576
1593
|
transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
|
|
1577
|
-
backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1594
|
+
backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1578
1595
|
boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
|
|
1579
1596
|
},
|
|
1580
1597
|
onClick: disabled ? _ => _ : _ => handleOpenClose(),
|
|
@@ -1599,7 +1616,7 @@ const Select = ({
|
|
|
1599
1616
|
}
|
|
1600
1617
|
}) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
|
|
1601
1618
|
className: `${styles$8['select-content-top-icon']}`
|
|
1602
|
-
}, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon || configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
|
|
1619
|
+
}, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
|
|
1603
1620
|
className: `${styles$8['close-icon']}`,
|
|
1604
1621
|
onClick: disabled ? _ => _ : handleClearSelect,
|
|
1605
1622
|
style: {
|
|
@@ -1695,6 +1712,7 @@ Select.propTypes = {
|
|
|
1695
1712
|
selectedLineHeight: PropTypes.string,
|
|
1696
1713
|
selectedTransition: PropTypes.string,
|
|
1697
1714
|
selectedBackgroundColor: PropTypes.string,
|
|
1715
|
+
selectedDisableBackgroundColor: PropTypes.string,
|
|
1698
1716
|
optionsBoxShadow: PropTypes.string,
|
|
1699
1717
|
optionsBorderRadius: PropTypes.string,
|
|
1700
1718
|
optionsBackgroundColor: PropTypes.string,
|
|
@@ -1977,7 +1995,7 @@ const createToast = ({
|
|
|
1977
1995
|
toastParentBlock = document.createElement('div');
|
|
1978
1996
|
toastParentBlock.style.position = 'fixed';
|
|
1979
1997
|
toastParentBlock.style.display = 'flex';
|
|
1980
|
-
toastParentBlock.style.zIndex =
|
|
1998
|
+
toastParentBlock.style.zIndex = 999999999999;
|
|
1981
1999
|
toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
|
|
1982
2000
|
toastParentBlock.setAttribute('id', styles$7[position]);
|
|
1983
2001
|
toastParentBlock.appendChild(toastBlock);
|
package/dist/index.js
CHANGED
|
@@ -419,7 +419,6 @@ const SvgCloseIcon = ({
|
|
|
419
419
|
const SvgCloseSlide = ({
|
|
420
420
|
title,
|
|
421
421
|
titleId,
|
|
422
|
-
fillColor,
|
|
423
422
|
...props
|
|
424
423
|
}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
425
424
|
width: "18",
|
|
@@ -432,7 +431,7 @@ const SvgCloseSlide = ({
|
|
|
432
431
|
id: titleId
|
|
433
432
|
}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
|
|
434
433
|
d: "m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z",
|
|
435
|
-
fill:
|
|
434
|
+
fill: "#fff"
|
|
436
435
|
}));
|
|
437
436
|
|
|
438
437
|
const Modal = ({
|
|
@@ -464,6 +463,7 @@ const Modal = ({
|
|
|
464
463
|
headerHeight,
|
|
465
464
|
justifyContent,
|
|
466
465
|
backgroundColor,
|
|
466
|
+
grayDecorHeight,
|
|
467
467
|
layerBackgroundColor
|
|
468
468
|
}) => {
|
|
469
469
|
const [select, setSelect] = React.useState(0);
|
|
@@ -552,13 +552,13 @@ const Modal = ({
|
|
|
552
552
|
className: `${classProps} ${styles$b['animation__modal']}`,
|
|
553
553
|
onClick: handleStopClosing,
|
|
554
554
|
style: {
|
|
555
|
-
width: width ? width : configStyles.MODAL.width,
|
|
556
|
-
height: height ? height : configStyles.MODAL.height,
|
|
557
555
|
position: 'relative',
|
|
558
|
-
display: 'grid',
|
|
559
|
-
overflow: 'hidden',
|
|
560
556
|
boxSizing: 'border-box',
|
|
561
|
-
|
|
557
|
+
display: type === 'content' ? 'grid' : 'block',
|
|
558
|
+
width: width ? width : configStyles.MODAL.width,
|
|
559
|
+
overflow: type === 'content' ? 'auto' : 'hidden',
|
|
560
|
+
height: height ? height : configStyles.MODAL.height,
|
|
561
|
+
gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
|
|
562
562
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
563
563
|
maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
|
|
564
564
|
maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
|
|
@@ -566,16 +566,16 @@ const Modal = ({
|
|
|
566
566
|
backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
|
|
567
567
|
minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : ''
|
|
568
568
|
}
|
|
569
|
-
}, type === 'content'
|
|
569
|
+
}, type === 'content' && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
570
570
|
style: {
|
|
571
571
|
width: '100%',
|
|
572
572
|
display: 'flex',
|
|
573
573
|
alignItems: 'center',
|
|
574
|
-
backgroundColor: '#FBFBFB',
|
|
575
574
|
boxSizing: 'border-box',
|
|
576
|
-
|
|
575
|
+
backgroundColor: '#FBFBFB',
|
|
576
|
+
padding: padding ? padding : configStyles.MODAL.padding,
|
|
577
577
|
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
578
|
-
|
|
578
|
+
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
|
|
579
579
|
}
|
|
580
580
|
}, headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
|
|
581
581
|
style: {
|
|
@@ -595,39 +595,49 @@ const Modal = ({
|
|
|
595
595
|
height: '14px',
|
|
596
596
|
cursor: 'pointer'
|
|
597
597
|
}
|
|
598
|
-
}, /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)))
|
|
599
|
-
onClick: handleCloseModal,
|
|
600
|
-
style: {
|
|
601
|
-
position: 'absolute',
|
|
602
|
-
top: '23px',
|
|
603
|
-
width: '18px',
|
|
604
|
-
right: '23px',
|
|
605
|
-
height: '18px',
|
|
606
|
-
border: 'none',
|
|
607
|
-
outline: 'none',
|
|
608
|
-
cursor: 'pointer',
|
|
609
|
-
zIndex: '1',
|
|
610
|
-
backgroundColor: 'transparent'
|
|
611
|
-
}
|
|
612
|
-
}, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
598
|
+
}, /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
613
599
|
style: {
|
|
614
600
|
display: 'flex',
|
|
615
|
-
position: 'relative',
|
|
616
601
|
width: '100%',
|
|
617
602
|
height: '100%',
|
|
603
|
+
overflow: 'hidden',
|
|
604
|
+
position: 'relative',
|
|
618
605
|
alignItems: 'center',
|
|
619
606
|
boxSizing: 'border-box',
|
|
620
607
|
justifyContent: 'center',
|
|
621
|
-
overflow: 'auto',
|
|
622
608
|
borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
|
|
623
609
|
borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
|
|
624
610
|
borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
|
|
625
611
|
}
|
|
626
|
-
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
612
|
+
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
627
613
|
style: {
|
|
614
|
+
position: 'absolute',
|
|
615
|
+
top: '0px',
|
|
616
|
+
left: '0px',
|
|
628
617
|
width: '100%',
|
|
629
|
-
|
|
630
|
-
|
|
618
|
+
borderTopLeftRadius: '6px',
|
|
619
|
+
borderTopRightRadius: '6px',
|
|
620
|
+
height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
|
|
621
|
+
backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
|
|
622
|
+
}
|
|
623
|
+
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
624
|
+
onClick: handleCloseModal,
|
|
625
|
+
style: {
|
|
626
|
+
position: 'absolute',
|
|
627
|
+
zIndex: '1',
|
|
628
|
+
top: '20px',
|
|
629
|
+
width: '18px',
|
|
630
|
+
right: '20px',
|
|
631
|
+
height: '18px',
|
|
632
|
+
border: 'none',
|
|
633
|
+
padding: '0px',
|
|
634
|
+
outline: 'none',
|
|
635
|
+
cursor: 'pointer',
|
|
636
|
+
backgroundColor: 'transparent'
|
|
637
|
+
}
|
|
638
|
+
}, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
639
|
+
style: {
|
|
640
|
+
height: '100%'
|
|
631
641
|
}
|
|
632
642
|
}, innerData && innerData.length > 0 && innerData.map((item, index) => {
|
|
633
643
|
if (select === index) {
|
|
@@ -639,7 +649,6 @@ const Modal = ({
|
|
|
639
649
|
objectFit: 'cover',
|
|
640
650
|
objectPosition: 'center',
|
|
641
651
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
642
|
-
width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
|
|
643
652
|
height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
|
|
644
653
|
},
|
|
645
654
|
src: item.url,
|
|
@@ -675,7 +684,7 @@ const Modal = ({
|
|
|
675
684
|
top: 'calc(50% - 12px)',
|
|
676
685
|
backgroundColor: 'transparent'
|
|
677
686
|
}
|
|
678
|
-
}, /*#__PURE__*/React__default["default"].createElement(SvgNext, null))))))));
|
|
687
|
+
}, /*#__PURE__*/React__default["default"].createElement(SvgNext, null)))))))));
|
|
679
688
|
};
|
|
680
689
|
Modal.propTypes = {
|
|
681
690
|
data: PropTypes__default["default"].array,
|
|
@@ -704,6 +713,7 @@ Modal.propTypes = {
|
|
|
704
713
|
headerHeight: PropTypes__default["default"].string,
|
|
705
714
|
justifyContent: PropTypes__default["default"].string,
|
|
706
715
|
backgroundColor: PropTypes__default["default"].string,
|
|
716
|
+
grayDecorHeight: PropTypes__default["default"].string,
|
|
707
717
|
layerBackgroundColor: PropTypes__default["default"].string
|
|
708
718
|
};
|
|
709
719
|
Modal.defaultProps = {
|
|
@@ -778,6 +788,7 @@ const Input = ({
|
|
|
778
788
|
regexpErrorMessage,
|
|
779
789
|
phoneJustifyContent,
|
|
780
790
|
borderRightColorHover,
|
|
791
|
+
backgroundDisableColor,
|
|
781
792
|
errorAnimationDuration,
|
|
782
793
|
...props
|
|
783
794
|
}) => {
|
|
@@ -831,14 +842,7 @@ const Input = ({
|
|
|
831
842
|
}
|
|
832
843
|
}
|
|
833
844
|
if (type === 'number') {
|
|
834
|
-
const regNum = /^\d+(\.)?(
|
|
835
|
-
if (!regNum.test(currentValue)) {
|
|
836
|
-
const newStr = currentValue.replace(/[^\d+]/g, '');
|
|
837
|
-
setInnerValue(newStr);
|
|
838
|
-
if (change) {
|
|
839
|
-
change(newStr);
|
|
840
|
-
}
|
|
841
|
-
}
|
|
845
|
+
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
842
846
|
if (minNumSize && currentValue < minNumSize) {
|
|
843
847
|
setInnerValue(`${minNumSize}`);
|
|
844
848
|
if (change) {
|
|
@@ -851,7 +855,7 @@ const Input = ({
|
|
|
851
855
|
change(`${maxNumSize}`);
|
|
852
856
|
}
|
|
853
857
|
}
|
|
854
|
-
if (floatToFix
|
|
858
|
+
if (floatToFix > 0) {
|
|
855
859
|
const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
|
|
856
860
|
const int = floatNumParts[0];
|
|
857
861
|
const float = floatNumParts[1];
|
|
@@ -889,7 +893,7 @@ const Input = ({
|
|
|
889
893
|
}
|
|
890
894
|
}
|
|
891
895
|
}
|
|
892
|
-
} else
|
|
896
|
+
} else {
|
|
893
897
|
const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
|
|
894
898
|
const int = floatNumParts[0];
|
|
895
899
|
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
@@ -899,6 +903,15 @@ const Input = ({
|
|
|
899
903
|
}
|
|
900
904
|
}
|
|
901
905
|
}
|
|
906
|
+
if (!regNum.test(currentValue)) {
|
|
907
|
+
const newStr = currentValue.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
908
|
+
return b + c.replace(/\./g, '');
|
|
909
|
+
});
|
|
910
|
+
setInnerValue(newStr);
|
|
911
|
+
if (change) {
|
|
912
|
+
change(newStr);
|
|
913
|
+
}
|
|
914
|
+
}
|
|
902
915
|
if (currentValue === '') {
|
|
903
916
|
setInnerValue('');
|
|
904
917
|
if (change) {
|
|
@@ -961,14 +974,7 @@ const Input = ({
|
|
|
961
974
|
}
|
|
962
975
|
}
|
|
963
976
|
if (type === 'number') {
|
|
964
|
-
const regNum = /^\d+(\.)?(\d+)
|
|
965
|
-
if (!regNum.test(value)) {
|
|
966
|
-
const newStr = value.replace(/[^\d+]/g, '');
|
|
967
|
-
setInnerValue(newStr);
|
|
968
|
-
if (change) {
|
|
969
|
-
change(newStr);
|
|
970
|
-
}
|
|
971
|
-
}
|
|
977
|
+
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
972
978
|
if (minNumSize && value < minNumSize) {
|
|
973
979
|
setInnerValue(`${minNumSize}`);
|
|
974
980
|
if (change) {
|
|
@@ -981,7 +987,7 @@ const Input = ({
|
|
|
981
987
|
change(`${maxNumSize}`);
|
|
982
988
|
}
|
|
983
989
|
}
|
|
984
|
-
if (floatToFix
|
|
990
|
+
if (floatToFix > 0) {
|
|
985
991
|
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
986
992
|
const int = floatNumParts[0];
|
|
987
993
|
const float = floatNumParts[1];
|
|
@@ -1019,7 +1025,7 @@ const Input = ({
|
|
|
1019
1025
|
}
|
|
1020
1026
|
}
|
|
1021
1027
|
}
|
|
1022
|
-
} else
|
|
1028
|
+
} else {
|
|
1023
1029
|
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
1024
1030
|
const int = floatNumParts[0];
|
|
1025
1031
|
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
@@ -1029,6 +1035,15 @@ const Input = ({
|
|
|
1029
1035
|
}
|
|
1030
1036
|
}
|
|
1031
1037
|
}
|
|
1038
|
+
if (!regNum.test(value)) {
|
|
1039
|
+
const newStr = value.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
1040
|
+
return b + c.replace(/\./g, '');
|
|
1041
|
+
});
|
|
1042
|
+
setInnerValue(newStr);
|
|
1043
|
+
if (change) {
|
|
1044
|
+
change(newStr);
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
1032
1047
|
if (value === '') {
|
|
1033
1048
|
setInnerValue('');
|
|
1034
1049
|
if (change) {
|
|
@@ -1124,7 +1139,7 @@ const Input = ({
|
|
|
1124
1139
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
1125
1140
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
1126
1141
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
1127
|
-
backgroundColor: disabled ?
|
|
1142
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
1128
1143
|
}
|
|
1129
1144
|
})), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1130
1145
|
onClick: type === 'password' ? handleShowPass : _ => _,
|
|
@@ -1210,6 +1225,7 @@ Input.propTypes = {
|
|
|
1210
1225
|
regexp: PropTypes__default["default"].instanceOf(RegExp),
|
|
1211
1226
|
phoneJustifyContent: PropTypes__default["default"].string,
|
|
1212
1227
|
borderRightColorHover: PropTypes__default["default"].string,
|
|
1228
|
+
backgroundDisableColor: PropTypes__default["default"].string,
|
|
1213
1229
|
errorAnimationDuration: PropTypes__default["default"].string,
|
|
1214
1230
|
leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
|
|
1215
1231
|
rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
|
|
@@ -1446,6 +1462,7 @@ const Select = ({
|
|
|
1446
1462
|
selectedHoverColor,
|
|
1447
1463
|
selectedTransition,
|
|
1448
1464
|
selectedBackgroundColor,
|
|
1465
|
+
selectedDisableBackgroundColor,
|
|
1449
1466
|
optionsBoxShadow,
|
|
1450
1467
|
optionsBorderRadius,
|
|
1451
1468
|
optionsBackgroundColor,
|
|
@@ -1604,7 +1621,7 @@ const Select = ({
|
|
|
1604
1621
|
fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
|
|
1605
1622
|
lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
|
|
1606
1623
|
transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
|
|
1607
|
-
backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1624
|
+
backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1608
1625
|
boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
|
|
1609
1626
|
},
|
|
1610
1627
|
onClick: disabled ? _ => _ : _ => handleOpenClose(),
|
|
@@ -1629,7 +1646,7 @@ const Select = ({
|
|
|
1629
1646
|
}
|
|
1630
1647
|
}) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1631
1648
|
className: `${styles$8['select-content-top-icon']}`
|
|
1632
|
-
}, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon || configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1649
|
+
}, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1633
1650
|
className: `${styles$8['close-icon']}`,
|
|
1634
1651
|
onClick: disabled ? _ => _ : handleClearSelect,
|
|
1635
1652
|
style: {
|
|
@@ -1725,6 +1742,7 @@ Select.propTypes = {
|
|
|
1725
1742
|
selectedLineHeight: PropTypes__default["default"].string,
|
|
1726
1743
|
selectedTransition: PropTypes__default["default"].string,
|
|
1727
1744
|
selectedBackgroundColor: PropTypes__default["default"].string,
|
|
1745
|
+
selectedDisableBackgroundColor: PropTypes__default["default"].string,
|
|
1728
1746
|
optionsBoxShadow: PropTypes__default["default"].string,
|
|
1729
1747
|
optionsBorderRadius: PropTypes__default["default"].string,
|
|
1730
1748
|
optionsBackgroundColor: PropTypes__default["default"].string,
|
|
@@ -2007,7 +2025,7 @@ const createToast = ({
|
|
|
2007
2025
|
toastParentBlock = document.createElement('div');
|
|
2008
2026
|
toastParentBlock.style.position = 'fixed';
|
|
2009
2027
|
toastParentBlock.style.display = 'flex';
|
|
2010
|
-
toastParentBlock.style.zIndex =
|
|
2028
|
+
toastParentBlock.style.zIndex = 999999999999;
|
|
2011
2029
|
toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
|
|
2012
2030
|
toastParentBlock.setAttribute('id', styles$7[position]);
|
|
2013
2031
|
toastParentBlock.appendChild(toastBlock);
|
package/package.json
CHANGED
|
Binary file
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
const SvgCloseSlide = ({ title, titleId,
|
|
2
|
+
const SvgCloseSlide = ({ title, titleId, ...props }) => (
|
|
3
3
|
<svg
|
|
4
4
|
width="18"
|
|
5
5
|
height="18"
|
|
@@ -12,7 +12,7 @@ const SvgCloseSlide = ({ title, titleId, fillColor, ...props }) => (
|
|
|
12
12
|
{title ? <title id={titleId}>{title}</title> : null}
|
|
13
13
|
<path
|
|
14
14
|
d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
|
|
15
|
-
fill=
|
|
15
|
+
fill="#fff"
|
|
16
16
|
/>
|
|
17
17
|
</svg>
|
|
18
18
|
);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -72,6 +72,7 @@ export const Input = ({
|
|
|
72
72
|
regexpErrorMessage,
|
|
73
73
|
phoneJustifyContent,
|
|
74
74
|
borderRightColorHover,
|
|
75
|
+
backgroundDisableColor,
|
|
75
76
|
errorAnimationDuration,
|
|
76
77
|
...props
|
|
77
78
|
}) => {
|
|
@@ -136,14 +137,8 @@ export const Input = ({
|
|
|
136
137
|
}
|
|
137
138
|
|
|
138
139
|
if (type === 'number') {
|
|
139
|
-
const regNum = /^\d+(\.)?(
|
|
140
|
-
|
|
141
|
-
const newStr = currentValue.replace(/[^\d+]/g, '');
|
|
142
|
-
setInnerValue(newStr);
|
|
143
|
-
if (change) {
|
|
144
|
-
change(newStr);
|
|
145
|
-
}
|
|
146
|
-
}
|
|
140
|
+
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
141
|
+
|
|
147
142
|
if (minNumSize && currentValue < minNumSize) {
|
|
148
143
|
setInnerValue(`${minNumSize}`);
|
|
149
144
|
if (change) {
|
|
@@ -156,7 +151,7 @@ export const Input = ({
|
|
|
156
151
|
change(`${maxNumSize}`);
|
|
157
152
|
}
|
|
158
153
|
}
|
|
159
|
-
if (floatToFix
|
|
154
|
+
if (floatToFix > 0) {
|
|
160
155
|
const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
|
|
161
156
|
const int = floatNumParts[0];
|
|
162
157
|
const float = floatNumParts[1];
|
|
@@ -195,7 +190,7 @@ export const Input = ({
|
|
|
195
190
|
}
|
|
196
191
|
}
|
|
197
192
|
}
|
|
198
|
-
} else
|
|
193
|
+
} else {
|
|
199
194
|
const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
|
|
200
195
|
const int = floatNumParts[0];
|
|
201
196
|
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
@@ -206,6 +201,15 @@ export const Input = ({
|
|
|
206
201
|
}
|
|
207
202
|
}
|
|
208
203
|
|
|
204
|
+
if (!regNum.test(currentValue)) {
|
|
205
|
+
const newStr = currentValue.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
206
|
+
return b + c.replace(/\./g, '');
|
|
207
|
+
});
|
|
208
|
+
setInnerValue(newStr);
|
|
209
|
+
if (change) {
|
|
210
|
+
change(newStr);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
209
213
|
if (currentValue === '') {
|
|
210
214
|
setInnerValue('');
|
|
211
215
|
if (change) {
|
|
@@ -276,14 +280,8 @@ export const Input = ({
|
|
|
276
280
|
}
|
|
277
281
|
|
|
278
282
|
if (type === 'number') {
|
|
279
|
-
const regNum = /^\d+(\.)?(\d+)
|
|
280
|
-
|
|
281
|
-
const newStr = value.replace(/[^\d+]/g, '');
|
|
282
|
-
setInnerValue(newStr);
|
|
283
|
-
if (change) {
|
|
284
|
-
change(newStr);
|
|
285
|
-
}
|
|
286
|
-
}
|
|
283
|
+
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
284
|
+
|
|
287
285
|
if (minNumSize && value < minNumSize) {
|
|
288
286
|
setInnerValue(`${minNumSize}`);
|
|
289
287
|
if (change) {
|
|
@@ -296,7 +294,7 @@ export const Input = ({
|
|
|
296
294
|
change(`${maxNumSize}`);
|
|
297
295
|
}
|
|
298
296
|
}
|
|
299
|
-
if (floatToFix
|
|
297
|
+
if (floatToFix > 0) {
|
|
300
298
|
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
301
299
|
const int = floatNumParts[0];
|
|
302
300
|
const float = floatNumParts[1];
|
|
@@ -335,7 +333,7 @@ export const Input = ({
|
|
|
335
333
|
}
|
|
336
334
|
}
|
|
337
335
|
}
|
|
338
|
-
} else
|
|
336
|
+
} else {
|
|
339
337
|
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
340
338
|
const int = floatNumParts[0];
|
|
341
339
|
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
@@ -345,6 +343,15 @@ export const Input = ({
|
|
|
345
343
|
}
|
|
346
344
|
}
|
|
347
345
|
}
|
|
346
|
+
if (!regNum.test(value)) {
|
|
347
|
+
const newStr = value.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
348
|
+
return b + c.replace(/\./g, '');
|
|
349
|
+
});
|
|
350
|
+
setInnerValue(newStr);
|
|
351
|
+
if (change) {
|
|
352
|
+
change(newStr);
|
|
353
|
+
}
|
|
354
|
+
}
|
|
348
355
|
if (value === '') {
|
|
349
356
|
setInnerValue('');
|
|
350
357
|
if (change) {
|
|
@@ -466,7 +473,7 @@ export const Input = ({
|
|
|
466
473
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
467
474
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
468
475
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
469
|
-
backgroundColor: disabled ?
|
|
476
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
470
477
|
}}
|
|
471
478
|
/>
|
|
472
479
|
{
|
|
@@ -572,6 +579,7 @@ Input.propTypes = {
|
|
|
572
579
|
regexp: PropTypes.instanceOf(RegExp),
|
|
573
580
|
phoneJustifyContent: PropTypes.string,
|
|
574
581
|
borderRightColorHover: PropTypes.string,
|
|
582
|
+
backgroundDisableColor: PropTypes.string,
|
|
575
583
|
errorAnimationDuration: PropTypes.string,
|
|
576
584
|
leftIcon: PropTypes.arrayOf(PropTypes.element),
|
|
577
585
|
rightIcon: PropTypes.arrayOf(PropTypes.element),
|
|
@@ -39,6 +39,7 @@ export const Modal = ({
|
|
|
39
39
|
headerHeight,
|
|
40
40
|
justifyContent,
|
|
41
41
|
backgroundColor,
|
|
42
|
+
grayDecorHeight,
|
|
42
43
|
layerBackgroundColor,
|
|
43
44
|
}) => {
|
|
44
45
|
const [select, setSelect] = useState(0);
|
|
@@ -139,13 +140,13 @@ export const Modal = ({
|
|
|
139
140
|
className={`${classProps} ${styles['animation__modal']}`}
|
|
140
141
|
onClick={handleStopClosing}
|
|
141
142
|
style={{
|
|
142
|
-
width: width ? width : configStyles.MODAL.width,
|
|
143
|
-
height: height ? height : configStyles.MODAL.height,
|
|
144
143
|
position: 'relative',
|
|
145
|
-
display: 'grid',
|
|
146
|
-
overflow: 'hidden',
|
|
147
144
|
boxSizing: 'border-box',
|
|
148
|
-
|
|
145
|
+
display: type === 'content' ? 'grid' : 'block',
|
|
146
|
+
width: width ? width : configStyles.MODAL.width,
|
|
147
|
+
overflow: type === 'content' ? 'auto' : 'hidden',
|
|
148
|
+
height: height ? height : configStyles.MODAL.height,
|
|
149
|
+
gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
|
|
149
150
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
150
151
|
maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
|
|
151
152
|
maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
|
|
@@ -154,91 +155,101 @@ export const Modal = ({
|
|
|
154
155
|
minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : '',
|
|
155
156
|
}}
|
|
156
157
|
>
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
?
|
|
160
|
-
<div
|
|
161
|
-
style={{
|
|
162
|
-
width: '100%',
|
|
163
|
-
display: 'flex',
|
|
164
|
-
alignItems: 'center',
|
|
165
|
-
backgroundColor: '#FBFBFB',
|
|
166
|
-
boxSizing: 'border-box',
|
|
167
|
-
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
|
|
168
|
-
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
169
|
-
padding: padding ? padding : configStyles.MODAL.padding
|
|
170
|
-
}}
|
|
171
|
-
>
|
|
172
|
-
{
|
|
173
|
-
headerText && type === 'content' && <p
|
|
174
|
-
style={{
|
|
175
|
-
flex: '1',
|
|
176
|
-
overflow: 'hidden',
|
|
177
|
-
whiteSpace: 'nowrap',
|
|
178
|
-
textOverflow: 'ellipsis',
|
|
179
|
-
margin: '0px 16px 0px 0px',
|
|
180
|
-
fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
|
|
181
|
-
color: headerColor ? headerColor : configStyles.MODAL.headerColor,
|
|
182
|
-
fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
|
|
183
|
-
}}
|
|
184
|
-
>{headerText}</p>
|
|
185
|
-
}
|
|
186
|
-
<div
|
|
187
|
-
onClick={handleCloseModal}
|
|
188
|
-
style={{
|
|
189
|
-
width: '14px',
|
|
190
|
-
height: '14px',
|
|
191
|
-
cursor: 'pointer'
|
|
192
|
-
}}
|
|
193
|
-
>
|
|
194
|
-
<SvgCloseIcon />
|
|
195
|
-
</div>
|
|
196
|
-
</div>
|
|
197
|
-
:
|
|
198
|
-
<button
|
|
199
|
-
onClick={handleCloseModal}
|
|
200
|
-
style={{
|
|
201
|
-
position: 'absolute',
|
|
202
|
-
top: '23px',
|
|
203
|
-
width: '18px',
|
|
204
|
-
right: '23px',
|
|
205
|
-
height: '18px',
|
|
206
|
-
border: 'none',
|
|
207
|
-
outline: 'none',
|
|
208
|
-
cursor: 'pointer',
|
|
209
|
-
zIndex: '1',
|
|
210
|
-
backgroundColor: 'transparent'
|
|
211
|
-
}}
|
|
212
|
-
>
|
|
213
|
-
<SvgCloseSlide />
|
|
214
|
-
</button>
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
<div
|
|
158
|
+
{
|
|
159
|
+
type === 'content' && <div
|
|
218
160
|
style={{
|
|
219
|
-
display: 'flex',
|
|
220
|
-
position: 'relative',
|
|
221
161
|
width: '100%',
|
|
222
|
-
|
|
162
|
+
display: 'flex',
|
|
223
163
|
alignItems: 'center',
|
|
224
164
|
boxSizing: 'border-box',
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
|
|
165
|
+
backgroundColor: '#FBFBFB',
|
|
166
|
+
padding: padding ? padding : configStyles.MODAL.padding,
|
|
167
|
+
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
168
|
+
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
|
|
230
169
|
}}
|
|
231
170
|
>
|
|
232
171
|
{
|
|
233
|
-
type === 'content'
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
172
|
+
headerText && type === 'content' && <p
|
|
173
|
+
style={{
|
|
174
|
+
flex: '1',
|
|
175
|
+
overflow: 'hidden',
|
|
176
|
+
whiteSpace: 'nowrap',
|
|
177
|
+
textOverflow: 'ellipsis',
|
|
178
|
+
margin: '0px 16px 0px 0px',
|
|
179
|
+
fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
|
|
180
|
+
color: headerColor ? headerColor : configStyles.MODAL.headerColor,
|
|
181
|
+
fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
|
|
182
|
+
}}
|
|
183
|
+
>{headerText}</p>
|
|
184
|
+
}
|
|
185
|
+
<div
|
|
186
|
+
onClick={handleCloseModal}
|
|
187
|
+
style={{
|
|
188
|
+
width: '14px',
|
|
189
|
+
height: '14px',
|
|
190
|
+
cursor: 'pointer'
|
|
191
|
+
}}
|
|
192
|
+
>
|
|
193
|
+
<SvgCloseIcon />
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
<div
|
|
199
|
+
style={{
|
|
200
|
+
display: 'flex',
|
|
201
|
+
width: '100%',
|
|
202
|
+
height: '100%',
|
|
203
|
+
overflow: 'hidden',
|
|
204
|
+
position: 'relative',
|
|
205
|
+
alignItems: 'center',
|
|
206
|
+
boxSizing: 'border-box',
|
|
207
|
+
justifyContent: 'center',
|
|
208
|
+
borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
|
|
209
|
+
borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
|
|
210
|
+
borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
|
|
211
|
+
}}
|
|
212
|
+
>
|
|
213
|
+
{
|
|
214
|
+
type === 'content'
|
|
215
|
+
?
|
|
216
|
+
children ? children : ''
|
|
217
|
+
:
|
|
218
|
+
<>
|
|
237
219
|
<div
|
|
238
220
|
style={{
|
|
221
|
+
position: 'absolute',
|
|
222
|
+
top: '0px',
|
|
223
|
+
left: '0px',
|
|
239
224
|
width: '100%',
|
|
240
|
-
|
|
241
|
-
|
|
225
|
+
borderTopLeftRadius: '6px',
|
|
226
|
+
borderTopRightRadius: '6px',
|
|
227
|
+
height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
|
|
228
|
+
backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
|
|
229
|
+
}}
|
|
230
|
+
>
|
|
231
|
+
<button
|
|
232
|
+
onClick={handleCloseModal}
|
|
233
|
+
style={{
|
|
234
|
+
position: 'absolute',
|
|
235
|
+
zIndex: '1',
|
|
236
|
+
top: '20px',
|
|
237
|
+
width: '18px',
|
|
238
|
+
right: '20px',
|
|
239
|
+
height: '18px',
|
|
240
|
+
border: 'none',
|
|
241
|
+
padding: '0px',
|
|
242
|
+
outline: 'none',
|
|
243
|
+
cursor: 'pointer',
|
|
244
|
+
backgroundColor: 'transparent'
|
|
245
|
+
}}
|
|
246
|
+
>
|
|
247
|
+
<SvgCloseSlide />
|
|
248
|
+
</button>
|
|
249
|
+
</div>
|
|
250
|
+
<div
|
|
251
|
+
style={{
|
|
252
|
+
height: '100%'
|
|
242
253
|
}}
|
|
243
254
|
>
|
|
244
255
|
{
|
|
@@ -253,7 +264,6 @@ export const Modal = ({
|
|
|
253
264
|
objectFit: 'cover',
|
|
254
265
|
objectPosition: 'center',
|
|
255
266
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
256
|
-
width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
|
|
257
267
|
height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
|
|
258
268
|
}}
|
|
259
269
|
src={item.url}
|
|
@@ -304,9 +314,9 @@ export const Modal = ({
|
|
|
304
314
|
</>
|
|
305
315
|
}
|
|
306
316
|
</div>
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
317
|
+
</>
|
|
318
|
+
}
|
|
319
|
+
</div>
|
|
310
320
|
</div>
|
|
311
321
|
</div>
|
|
312
322
|
</div>
|
|
@@ -340,6 +350,7 @@ Modal.propTypes = {
|
|
|
340
350
|
headerHeight: PropTypes.string,
|
|
341
351
|
justifyContent: PropTypes.string,
|
|
342
352
|
backgroundColor: PropTypes.string,
|
|
353
|
+
grayDecorHeight: PropTypes.string,
|
|
343
354
|
layerBackgroundColor: PropTypes.string,
|
|
344
355
|
};
|
|
345
356
|
|
|
@@ -29,6 +29,14 @@ const Template = ({ headerText, className }) => {
|
|
|
29
29
|
{
|
|
30
30
|
url: 'https://media.istockphoto.com/id/500221043/photo/cascade-yerevan.jpg?s=612x612&w=0&k=20&c=vaULCkIZaIbetZlkFnP20ELnD8cyhlc9cRsvt-X5YAk=',
|
|
31
31
|
id: 5
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
url: 'https://images.unsplash.com/photo-1512850183-6d7990f42385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
|
|
35
|
+
id: 6
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
url: './../../assets/figma-image.png',
|
|
39
|
+
id: 7
|
|
32
40
|
}
|
|
33
41
|
];
|
|
34
42
|
|
|
@@ -56,9 +64,15 @@ const Template = ({ headerText, className }) => {
|
|
|
56
64
|
>Change type to {type === 'content' ? 'images' : 'content'}</button>
|
|
57
65
|
{show && (
|
|
58
66
|
<Modal type={type} selected={0} data={data} setShow={setShow} className={className}>
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
67
|
+
<div
|
|
68
|
+
style={{
|
|
69
|
+
width: '400px',
|
|
70
|
+
height: '500px',
|
|
71
|
+
backgroundColor: 'red'
|
|
72
|
+
}}
|
|
73
|
+
>
|
|
74
|
+
just test
|
|
75
|
+
</div>
|
|
62
76
|
</Modal>
|
|
63
77
|
)}
|
|
64
78
|
</>
|
|
@@ -51,6 +51,7 @@ export const Select = ({
|
|
|
51
51
|
selectedHoverColor,
|
|
52
52
|
selectedTransition,
|
|
53
53
|
selectedBackgroundColor,
|
|
54
|
+
selectedDisableBackgroundColor,
|
|
54
55
|
|
|
55
56
|
optionsBoxShadow,
|
|
56
57
|
optionsBorderRadius,
|
|
@@ -235,7 +236,7 @@ export const Select = ({
|
|
|
235
236
|
fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
|
|
236
237
|
lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
|
|
237
238
|
transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
|
|
238
|
-
backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
239
|
+
backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
239
240
|
boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
|
|
240
241
|
}}
|
|
241
242
|
onClick={disabled ? _ => _ : _ => handleOpenClose()}
|
|
@@ -270,7 +271,7 @@ export const Select = ({
|
|
|
270
271
|
!disabled && multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
|
|
271
272
|
}
|
|
272
273
|
|
|
273
|
-
{(showCloseIcon || configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 &&
|
|
274
|
+
{(showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 &&
|
|
274
275
|
<div
|
|
275
276
|
className={`${styles['close-icon']}`}
|
|
276
277
|
onClick={disabled ? _ => _ : handleClearSelect}
|
|
@@ -405,6 +406,7 @@ Select.propTypes = {
|
|
|
405
406
|
selectedLineHeight: PropTypes.string,
|
|
406
407
|
selectedTransition: PropTypes.string,
|
|
407
408
|
selectedBackgroundColor: PropTypes.string,
|
|
409
|
+
selectedDisableBackgroundColor: PropTypes.string,
|
|
408
410
|
|
|
409
411
|
optionsBoxShadow: PropTypes.string,
|
|
410
412
|
optionsBorderRadius: PropTypes.string,
|
|
@@ -52,7 +52,7 @@ const createToast = ({
|
|
|
52
52
|
toastParentBlock = document.createElement('div');
|
|
53
53
|
toastParentBlock.style.position = 'fixed';
|
|
54
54
|
toastParentBlock.style.display = 'flex';
|
|
55
|
-
toastParentBlock.style.zIndex =
|
|
55
|
+
toastParentBlock.style.zIndex = 999999999999;
|
|
56
56
|
toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
|
|
57
57
|
toastParentBlock.setAttribute('id', styles[position]);
|
|
58
58
|
toastParentBlock.appendChild(toastBlock);
|
|
@@ -181,6 +181,7 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
181
181
|
errorLineHeight: '19px', // for error message line height
|
|
182
182
|
boxSizing: 'border-box', // for box sizing
|
|
183
183
|
backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
|
|
184
|
+
backgroundDisableColor: '#FBFBFB', // for input and also (if there exist left or right icons) icons block background color when input is disable
|
|
184
185
|
color: 'rgb(60, 57, 62)', // for input color
|
|
185
186
|
labelMarginBottom: '6px', // for label margin bottom
|
|
186
187
|
phoneAlignItems: 'center', // for phone extention inside item, work when input type is tel
|
|
@@ -353,6 +354,7 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
353
354
|
selectedBoxSizing: 'border-box', // for selected box sizing
|
|
354
355
|
selectedTransition: 'border-color 240ms', // for selected transition
|
|
355
356
|
selectedBackgroundColor: '#FBFBFB', // for selected background color
|
|
357
|
+
selectedDisableBackgroundColor: '#FBFBFB', // for selected background color when selet is disable
|
|
356
358
|
|
|
357
359
|
optionsBorderRadius: '6px', // for options block border radius
|
|
358
360
|
optionsBackgroundColor: '#FBFBFB', // for options block background color
|
|
@@ -591,10 +593,10 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
591
593
|
minWidth: '320px', // for modal min width
|
|
592
594
|
headerSize: '20px', // for modal header font size
|
|
593
595
|
minHeight: '200px', // for modal min height
|
|
594
|
-
imageWidth: '600px', // for modal image width on images mode
|
|
595
596
|
headerWeight: '600', // for modal header font weight
|
|
596
|
-
imageHeight: '
|
|
597
|
-
headerHeight: '
|
|
597
|
+
imageHeight: '100%', // for modal image height on images mode
|
|
598
|
+
headerHeight: '30px', // for modal header height
|
|
599
|
+
grayDecorHeight: '80px', // for modal top decoration when show slider
|
|
598
600
|
width: 'fit-content', // for modal width
|
|
599
601
|
height: 'fit-content', // for modal width
|
|
600
602
|
headerColor: '#00236a', // for modal header color
|
package/tui.config.js
CHANGED
|
@@ -55,7 +55,8 @@ module.exports = {
|
|
|
55
55
|
errorLineHeight: '19px', // for error message line height
|
|
56
56
|
boxSizing: 'border-box', // for box sizing
|
|
57
57
|
borderRight: '1px solid', // for type tel right border
|
|
58
|
-
backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
|
|
58
|
+
backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
|
|
59
|
+
backgroundDisableColor: '#FBFBFB', // for input and also (if there exist left or right icons) icons block background color when input is disable
|
|
59
60
|
color: 'rgb(60, 57, 62)', // for input color
|
|
60
61
|
labelMarginBottom: '6px', // for label margin bottom
|
|
61
62
|
phoneAlignItems: 'center', // for phone extention inside item, work when input type is tel
|
|
@@ -182,7 +183,7 @@ module.exports = {
|
|
|
182
183
|
// default properties for <Select /> component
|
|
183
184
|
SELECT: {
|
|
184
185
|
dots: false, // for options, cut text and add dots
|
|
185
|
-
showCloseIcon:
|
|
186
|
+
showCloseIcon: true, // for select reset icon, when prop exist or true is show, otherwise is hide
|
|
186
187
|
marginTop: '10px', // for error message postion from top
|
|
187
188
|
labelWeight: '500', // for label font weight
|
|
188
189
|
labelColor: '#3C393E', // for label color
|
|
@@ -207,6 +208,7 @@ module.exports = {
|
|
|
207
208
|
selectedBoxSizing: 'border-box', // for selected box sizing
|
|
208
209
|
selectedTransition: 'border-color 240ms', // for selected transition
|
|
209
210
|
selectedBackgroundColor: '#FBFBFB', // for selected background color
|
|
211
|
+
selectedDisableBackgroundColor: '#FBFBFB', // for selected background color when selet is disable
|
|
210
212
|
|
|
211
213
|
optionsBorderRadius: '6px', // for options block border radius
|
|
212
214
|
optionsBackgroundColor: '#FBFBFB', // for options block background color
|
|
@@ -386,10 +388,10 @@ module.exports = {
|
|
|
386
388
|
minWidth: '320px', // for modal min width
|
|
387
389
|
headerSize: '20px', // for modal header font size
|
|
388
390
|
minHeight: '200px', // for modal min height
|
|
389
|
-
imageWidth: '600px', // for modal image width on images mode
|
|
390
391
|
headerWeight: '600', // for modal header font weight
|
|
391
|
-
imageHeight: '
|
|
392
|
+
imageHeight: '100%', // for modal image height on images mode
|
|
392
393
|
headerHeight: '30px', // for modal header height
|
|
394
|
+
grayDecorHeight: '80px', // for modal top decoration when show slider
|
|
393
395
|
width: 'fit-content', // for modal width
|
|
394
396
|
height: 'fit-content', // for modal width
|
|
395
397
|
headerColor: '#00236a', // for modal header color
|