@xaypay/tui 0.0.102 → 0.0.104
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 +55 -38
- package/dist/index.js +55 -38
- 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 +3 -1
- package/src/components/input/input.module.css +2 -1
- package/src/components/modal/index.js +95 -84
- package/src/components/modal/modal.stories.js +17 -3
- package/src/components/newAutocomplete/autocomplete.module.css +3 -2
- package/src/components/newAutocomplete/index.js +8 -1
- package/src/components/select/index.js +3 -1
- package/src/stories/configuration.stories.mdx +6 -3
- package/tui.config.js +7 -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,13 +683,14 @@ 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 = {
|
|
680
690
|
type: 'content'
|
|
681
691
|
};
|
|
682
692
|
|
|
683
|
-
var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{
|
|
693
|
+
var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
|
|
684
694
|
var styles$a = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
|
|
685
695
|
styleInject(css_248z$c);
|
|
686
696
|
|
|
@@ -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
|
}) => {
|
|
@@ -1098,7 +1109,7 @@ const Input = ({
|
|
|
1098
1109
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
1099
1110
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
1100
1111
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
1101
|
-
backgroundColor: disabled ?
|
|
1112
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
1102
1113
|
}
|
|
1103
1114
|
})), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
|
|
1104
1115
|
onClick: type === 'password' ? handleShowPass : _ => _,
|
|
@@ -1184,6 +1195,7 @@ Input.propTypes = {
|
|
|
1184
1195
|
regexp: PropTypes.instanceOf(RegExp),
|
|
1185
1196
|
phoneJustifyContent: PropTypes.string,
|
|
1186
1197
|
borderRightColorHover: PropTypes.string,
|
|
1198
|
+
backgroundDisableColor: PropTypes.string,
|
|
1187
1199
|
errorAnimationDuration: PropTypes.string,
|
|
1188
1200
|
leftIcon: PropTypes.arrayOf(PropTypes.element),
|
|
1189
1201
|
rightIcon: PropTypes.arrayOf(PropTypes.element),
|
|
@@ -1420,6 +1432,7 @@ const Select = ({
|
|
|
1420
1432
|
selectedHoverColor,
|
|
1421
1433
|
selectedTransition,
|
|
1422
1434
|
selectedBackgroundColor,
|
|
1435
|
+
selectedDisableBackgroundColor,
|
|
1423
1436
|
optionsBoxShadow,
|
|
1424
1437
|
optionsBorderRadius,
|
|
1425
1438
|
optionsBackgroundColor,
|
|
@@ -1578,7 +1591,7 @@ const Select = ({
|
|
|
1578
1591
|
fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
|
|
1579
1592
|
lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
|
|
1580
1593
|
transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
|
|
1581
|
-
backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1594
|
+
backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1582
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
|
|
1583
1596
|
},
|
|
1584
1597
|
onClick: disabled ? _ => _ : _ => handleOpenClose(),
|
|
@@ -1699,6 +1712,7 @@ Select.propTypes = {
|
|
|
1699
1712
|
selectedLineHeight: PropTypes.string,
|
|
1700
1713
|
selectedTransition: PropTypes.string,
|
|
1701
1714
|
selectedBackgroundColor: PropTypes.string,
|
|
1715
|
+
selectedDisableBackgroundColor: PropTypes.string,
|
|
1702
1716
|
optionsBoxShadow: PropTypes.string,
|
|
1703
1717
|
optionsBorderRadius: PropTypes.string,
|
|
1704
1718
|
optionsBackgroundColor: PropTypes.string,
|
|
@@ -3954,7 +3968,7 @@ Autocomplate.defaultProps = {
|
|
|
3954
3968
|
required: false
|
|
3955
3969
|
};
|
|
3956
3970
|
|
|
3957
|
-
var css_248z = ".autocomplete-module_auto-complete__tdYkw{
|
|
3971
|
+
var css_248z = ".autocomplete-module_auto-complete__tdYkw{appearance:none!important;-webkit-appearance:none!important}";
|
|
3958
3972
|
var styles = {"auto-complete":"autocomplete-module_auto-complete__tdYkw"};
|
|
3959
3973
|
styleInject(css_248z);
|
|
3960
3974
|
|
|
@@ -3967,6 +3981,7 @@ const NewAutocomplete = ({
|
|
|
3967
3981
|
required,
|
|
3968
3982
|
disabled,
|
|
3969
3983
|
selected,
|
|
3984
|
+
className,
|
|
3970
3985
|
errorSize,
|
|
3971
3986
|
labelSize,
|
|
3972
3987
|
marginTop,
|
|
@@ -4042,6 +4057,7 @@ const NewAutocomplete = ({
|
|
|
4042
4057
|
const [innerValue, setInnerValue] = useState('');
|
|
4043
4058
|
const [innerOptions, setInnerOptions] = useState([]);
|
|
4044
4059
|
const configStyles = compereConfigs();
|
|
4060
|
+
const classProps = classnames(className ? className : configStyles.NEWAUTOCOMPLETE.className, styles['auto-complete']);
|
|
4045
4061
|
const showOption = keyframes`
|
|
4046
4062
|
100% {
|
|
4047
4063
|
max-height: 400px;
|
|
@@ -4216,7 +4232,7 @@ const NewAutocomplete = ({
|
|
|
4216
4232
|
onInput: handleChange,
|
|
4217
4233
|
onMouseEnter: handleMouseEnter,
|
|
4218
4234
|
onMouseLeave: handleMouseLeave,
|
|
4219
|
-
className:
|
|
4235
|
+
className: classProps,
|
|
4220
4236
|
placeholder: placeHolder ? placeHolder : '',
|
|
4221
4237
|
autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
|
|
4222
4238
|
style: {
|
|
@@ -4254,6 +4270,7 @@ NewAutocomplete.propTypes = {
|
|
|
4254
4270
|
disabled: PropTypes.bool,
|
|
4255
4271
|
keyNames: PropTypes.object,
|
|
4256
4272
|
selected: PropTypes.object,
|
|
4273
|
+
className: PropTypes.string,
|
|
4257
4274
|
errorSize: PropTypes.string,
|
|
4258
4275
|
marginTop: PropTypes.string,
|
|
4259
4276
|
labelSize: PropTypes.string,
|
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,13 +713,14 @@ 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 = {
|
|
710
720
|
type: 'content'
|
|
711
721
|
};
|
|
712
722
|
|
|
713
|
-
var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{
|
|
723
|
+
var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
|
|
714
724
|
var styles$a = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
|
|
715
725
|
styleInject(css_248z$c);
|
|
716
726
|
|
|
@@ -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
|
}) => {
|
|
@@ -1128,7 +1139,7 @@ const Input = ({
|
|
|
1128
1139
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
1129
1140
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
1130
1141
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
1131
|
-
backgroundColor: disabled ?
|
|
1142
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
1132
1143
|
}
|
|
1133
1144
|
})), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1134
1145
|
onClick: type === 'password' ? handleShowPass : _ => _,
|
|
@@ -1214,6 +1225,7 @@ Input.propTypes = {
|
|
|
1214
1225
|
regexp: PropTypes__default["default"].instanceOf(RegExp),
|
|
1215
1226
|
phoneJustifyContent: PropTypes__default["default"].string,
|
|
1216
1227
|
borderRightColorHover: PropTypes__default["default"].string,
|
|
1228
|
+
backgroundDisableColor: PropTypes__default["default"].string,
|
|
1217
1229
|
errorAnimationDuration: PropTypes__default["default"].string,
|
|
1218
1230
|
leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
|
|
1219
1231
|
rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
|
|
@@ -1450,6 +1462,7 @@ const Select = ({
|
|
|
1450
1462
|
selectedHoverColor,
|
|
1451
1463
|
selectedTransition,
|
|
1452
1464
|
selectedBackgroundColor,
|
|
1465
|
+
selectedDisableBackgroundColor,
|
|
1453
1466
|
optionsBoxShadow,
|
|
1454
1467
|
optionsBorderRadius,
|
|
1455
1468
|
optionsBackgroundColor,
|
|
@@ -1608,7 +1621,7 @@ const Select = ({
|
|
|
1608
1621
|
fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
|
|
1609
1622
|
lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
|
|
1610
1623
|
transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
|
|
1611
|
-
backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1624
|
+
backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1612
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
|
|
1613
1626
|
},
|
|
1614
1627
|
onClick: disabled ? _ => _ : _ => handleOpenClose(),
|
|
@@ -1729,6 +1742,7 @@ Select.propTypes = {
|
|
|
1729
1742
|
selectedLineHeight: PropTypes__default["default"].string,
|
|
1730
1743
|
selectedTransition: PropTypes__default["default"].string,
|
|
1731
1744
|
selectedBackgroundColor: PropTypes__default["default"].string,
|
|
1745
|
+
selectedDisableBackgroundColor: PropTypes__default["default"].string,
|
|
1732
1746
|
optionsBoxShadow: PropTypes__default["default"].string,
|
|
1733
1747
|
optionsBorderRadius: PropTypes__default["default"].string,
|
|
1734
1748
|
optionsBackgroundColor: PropTypes__default["default"].string,
|
|
@@ -3984,7 +3998,7 @@ Autocomplate.defaultProps = {
|
|
|
3984
3998
|
required: false
|
|
3985
3999
|
};
|
|
3986
4000
|
|
|
3987
|
-
var css_248z = ".autocomplete-module_auto-complete__tdYkw{
|
|
4001
|
+
var css_248z = ".autocomplete-module_auto-complete__tdYkw{appearance:none!important;-webkit-appearance:none!important}";
|
|
3988
4002
|
var styles = {"auto-complete":"autocomplete-module_auto-complete__tdYkw"};
|
|
3989
4003
|
styleInject(css_248z);
|
|
3990
4004
|
|
|
@@ -3997,6 +4011,7 @@ const NewAutocomplete = ({
|
|
|
3997
4011
|
required,
|
|
3998
4012
|
disabled,
|
|
3999
4013
|
selected,
|
|
4014
|
+
className,
|
|
4000
4015
|
errorSize,
|
|
4001
4016
|
labelSize,
|
|
4002
4017
|
marginTop,
|
|
@@ -4072,6 +4087,7 @@ const NewAutocomplete = ({
|
|
|
4072
4087
|
const [innerValue, setInnerValue] = React.useState('');
|
|
4073
4088
|
const [innerOptions, setInnerOptions] = React.useState([]);
|
|
4074
4089
|
const configStyles = compereConfigs();
|
|
4090
|
+
const classProps = classnames__default["default"](className ? className : configStyles.NEWAUTOCOMPLETE.className, styles['auto-complete']);
|
|
4075
4091
|
const showOption = styled.keyframes`
|
|
4076
4092
|
100% {
|
|
4077
4093
|
max-height: 400px;
|
|
@@ -4246,7 +4262,7 @@ const NewAutocomplete = ({
|
|
|
4246
4262
|
onInput: handleChange,
|
|
4247
4263
|
onMouseEnter: handleMouseEnter,
|
|
4248
4264
|
onMouseLeave: handleMouseLeave,
|
|
4249
|
-
className:
|
|
4265
|
+
className: classProps,
|
|
4250
4266
|
placeholder: placeHolder ? placeHolder : '',
|
|
4251
4267
|
autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
|
|
4252
4268
|
style: {
|
|
@@ -4284,6 +4300,7 @@ NewAutocomplete.propTypes = {
|
|
|
4284
4300
|
disabled: PropTypes__default["default"].bool,
|
|
4285
4301
|
keyNames: PropTypes__default["default"].object,
|
|
4286
4302
|
selected: PropTypes__default["default"].object,
|
|
4303
|
+
className: PropTypes__default["default"].string,
|
|
4287
4304
|
errorSize: PropTypes__default["default"].string,
|
|
4288
4305
|
marginTop: PropTypes__default["default"].string,
|
|
4289
4306
|
labelSize: PropTypes__default["default"].string,
|
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
|
}) => {
|
|
@@ -472,7 +473,7 @@ export const Input = ({
|
|
|
472
473
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
473
474
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
474
475
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
475
|
-
backgroundColor: disabled ?
|
|
476
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
476
477
|
}}
|
|
477
478
|
/>
|
|
478
479
|
{
|
|
@@ -578,6 +579,7 @@ Input.propTypes = {
|
|
|
578
579
|
regexp: PropTypes.instanceOf(RegExp),
|
|
579
580
|
phoneJustifyContent: PropTypes.string,
|
|
580
581
|
borderRightColorHover: PropTypes.string,
|
|
582
|
+
backgroundDisableColor: PropTypes.string,
|
|
581
583
|
errorAnimationDuration: PropTypes.string,
|
|
582
584
|
leftIcon: PropTypes.arrayOf(PropTypes.element),
|
|
583
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
|
</>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
|
|
4
|
+
import classnames from 'classnames';
|
|
4
5
|
import { keyframes, css } from 'styled-components';
|
|
5
6
|
|
|
6
7
|
import { compereConfigs } from './../../utils';
|
|
@@ -16,6 +17,7 @@ export const NewAutocomplete = ({
|
|
|
16
17
|
required,
|
|
17
18
|
disabled,
|
|
18
19
|
selected,
|
|
20
|
+
className,
|
|
19
21
|
errorSize,
|
|
20
22
|
labelSize,
|
|
21
23
|
marginTop,
|
|
@@ -91,6 +93,10 @@ export const NewAutocomplete = ({
|
|
|
91
93
|
const [innerValue, setInnerValue] = useState('');
|
|
92
94
|
const [innerOptions, setInnerOptions] = useState([]);
|
|
93
95
|
const configStyles = compereConfigs();
|
|
96
|
+
const classProps = classnames(
|
|
97
|
+
className ? className : configStyles.NEWAUTOCOMPLETE.className,
|
|
98
|
+
styles['auto-complete']
|
|
99
|
+
);
|
|
94
100
|
|
|
95
101
|
const showOption = keyframes`
|
|
96
102
|
100% {
|
|
@@ -328,7 +334,7 @@ export const NewAutocomplete = ({
|
|
|
328
334
|
onInput={handleChange}
|
|
329
335
|
onMouseEnter={handleMouseEnter}
|
|
330
336
|
onMouseLeave={handleMouseLeave}
|
|
331
|
-
className={
|
|
337
|
+
className={classProps}
|
|
332
338
|
placeholder={placeHolder ? placeHolder : ''}
|
|
333
339
|
autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
|
|
334
340
|
style={{
|
|
@@ -387,6 +393,7 @@ NewAutocomplete.propTypes = {
|
|
|
387
393
|
disabled: PropTypes.bool,
|
|
388
394
|
keyNames: PropTypes.object,
|
|
389
395
|
selected: PropTypes.object,
|
|
396
|
+
className: PropTypes.string,
|
|
390
397
|
errorSize: PropTypes.string,
|
|
391
398
|
marginTop: PropTypes.string,
|
|
392
399
|
labelSize: PropTypes.string,
|
|
@@ -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()}
|
|
@@ -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,
|
|
@@ -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
|
|
@@ -459,6 +461,7 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
459
461
|
labelTextTransform: 'none', // for label text transform
|
|
460
462
|
labelRequiredColor: '#ee0000', // for label required mark color
|
|
461
463
|
|
|
464
|
+
className: '', // for autocomplete class if it need
|
|
462
465
|
searchCount: 3, // for autocomplete show result logic
|
|
463
466
|
errorSize: '16px', // for error font size
|
|
464
467
|
autoComplete: 'off', // for off auto fill functionality ( browser specific, maybe will not work )
|
|
@@ -591,10 +594,10 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
591
594
|
minWidth: '320px', // for modal min width
|
|
592
595
|
headerSize: '20px', // for modal header font size
|
|
593
596
|
minHeight: '200px', // for modal min height
|
|
594
|
-
imageWidth: '600px', // for modal image width on images mode
|
|
595
597
|
headerWeight: '600', // for modal header font weight
|
|
596
|
-
imageHeight: '
|
|
597
|
-
headerHeight: '
|
|
598
|
+
imageHeight: '100%', // for modal image height on images mode
|
|
599
|
+
headerHeight: '30px', // for modal header height
|
|
600
|
+
grayDecorHeight: '80px', // for modal top decoration when show slider
|
|
598
601
|
width: 'fit-content', // for modal width
|
|
599
602
|
height: 'fit-content', // for modal width
|
|
600
603
|
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
|
|
@@ -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
|
|
@@ -268,7 +270,8 @@ module.exports = {
|
|
|
268
270
|
labelMarginBottom: '6px', // for label margin bottom
|
|
269
271
|
labelTextTransform: 'none', // for label text transform
|
|
270
272
|
labelRequiredColor: '#ee0000', // for label required mark color
|
|
271
|
-
|
|
273
|
+
|
|
274
|
+
className: '', // for autocomplete class if it need
|
|
272
275
|
searchCount: 3, // for autocomplete show result logic
|
|
273
276
|
errorSize: '16px', // for error font size
|
|
274
277
|
autoComplete: 'off', // for off auto fill functionality ( browser specific, maybe will not work )
|
|
@@ -386,10 +389,10 @@ module.exports = {
|
|
|
386
389
|
minWidth: '320px', // for modal min width
|
|
387
390
|
headerSize: '20px', // for modal header font size
|
|
388
391
|
minHeight: '200px', // for modal min height
|
|
389
|
-
imageWidth: '600px', // for modal image width on images mode
|
|
390
392
|
headerWeight: '600', // for modal header font weight
|
|
391
|
-
imageHeight: '
|
|
393
|
+
imageHeight: '100%', // for modal image height on images mode
|
|
392
394
|
headerHeight: '30px', // for modal header height
|
|
395
|
+
grayDecorHeight: '80px', // for modal top decoration when show slider
|
|
393
396
|
width: 'fit-content', // for modal width
|
|
394
397
|
height: 'fit-content', // for modal width
|
|
395
398
|
headerColor: '#00236a', // for modal header color
|