imbric-theme 0.7.1 → 0.7.2
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/atoms/Modal/Modal.js
CHANGED
|
@@ -37,6 +37,7 @@ export const Modal = ({
|
|
|
37
37
|
isPlayground,
|
|
38
38
|
titleModal,
|
|
39
39
|
isFullWidth,
|
|
40
|
+
isFullWidthSoft,
|
|
40
41
|
}) => {
|
|
41
42
|
const isDesktop = useMedia(['(min-width: 992px)'], [true])
|
|
42
43
|
const [onFadeOut, setOnFadeOut] = useState(false)
|
|
@@ -52,13 +53,13 @@ export const Modal = ({
|
|
|
52
53
|
onClick={handleClose}
|
|
53
54
|
>
|
|
54
55
|
<div
|
|
55
|
-
className={getStyles(isFullWidth ? 'modal-full' : 'modal', ['type'])}
|
|
56
|
+
className={getStyles(isFullWidth ? 'modal-full' : isFullWidthSoft ? 'modal-full-soft' : 'modal', ['type'])}
|
|
56
57
|
onClick={createHandlerClick()}
|
|
57
58
|
>
|
|
58
59
|
<div className={getStyles('heading')}>
|
|
59
60
|
{!!onClose && (
|
|
60
61
|
<Icon
|
|
61
|
-
|
|
62
|
+
id='btnColsedModal'
|
|
62
63
|
color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
|
|
63
64
|
name={isDesktop ? 'cross' : 'angleLeft'}
|
|
64
65
|
background={isDesktop ? 'transparent' : 'muted'}
|
|
@@ -76,13 +77,19 @@ export const Modal = ({
|
|
|
76
77
|
})}
|
|
77
78
|
/>
|
|
78
79
|
)}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
<Heading color='black' size='lg' weight='light'>
|
|
81
|
+
{titleModal}
|
|
82
|
+
</Heading>
|
|
82
83
|
</div>
|
|
83
84
|
|
|
84
|
-
{isFullWidth ?
|
|
85
|
-
|
|
85
|
+
{isFullWidth ?
|
|
86
|
+
<div className={getStyles('container-full')}>{children}</div>
|
|
87
|
+
:
|
|
88
|
+
isFullWidthSoft ? <div className={getStyles('container-full-soft')}>{children}</div>
|
|
89
|
+
:
|
|
90
|
+
<Container><div className={getStyles('container')}>{children}</div></Container>
|
|
91
|
+
}
|
|
92
|
+
|
|
86
93
|
</div>
|
|
87
94
|
</div>
|
|
88
95
|
)
|
|
@@ -99,14 +106,16 @@ Modal.propTypes = {
|
|
|
99
106
|
type: PropTypes.oneOf(options.types),
|
|
100
107
|
isPlayground: PropTypes.bool,
|
|
101
108
|
isFullWidth: PropTypes.bool,
|
|
109
|
+
isFullWidthSoft: PropTypes.bool,
|
|
102
110
|
titleModal: PropTypes.string,
|
|
103
111
|
}
|
|
104
112
|
|
|
105
113
|
Modal.defaultProps = {
|
|
106
|
-
getStyles: () => {},
|
|
114
|
+
getStyles: () => { },
|
|
107
115
|
type: 'primary',
|
|
108
116
|
titleModal: 'Ejemplo titulo',
|
|
109
|
-
isFullWidth: false
|
|
117
|
+
isFullWidth: false,
|
|
118
|
+
isFullWidthSoft: false
|
|
110
119
|
}
|
|
111
120
|
|
|
112
121
|
export default withStyles(styles)(Modal)
|
|
@@ -32,6 +32,14 @@
|
|
|
32
32
|
padding: 16px 32px;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
.modal-full-soft {
|
|
36
|
+
display: flex;
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
padding: 16px 32px;
|
|
41
|
+
}
|
|
42
|
+
|
|
35
43
|
:not(.is-playground)>.modal {
|
|
36
44
|
animation: fadeInModal 0.4s ease-in forwards;
|
|
37
45
|
opacity: 0;
|
|
@@ -84,6 +92,12 @@
|
|
|
84
92
|
padding: 16px 32px;
|
|
85
93
|
}
|
|
86
94
|
|
|
95
|
+
.modal-full-soft {
|
|
96
|
+
width: 90%;
|
|
97
|
+
height: auto;
|
|
98
|
+
border-radius: var(--border-radius-sm);
|
|
99
|
+
}
|
|
100
|
+
|
|
87
101
|
.heading {
|
|
88
102
|
flex-direction: row-reverse;
|
|
89
103
|
}
|
|
@@ -98,6 +112,13 @@
|
|
|
98
112
|
overflow: auto;
|
|
99
113
|
min-width: 100%;
|
|
100
114
|
}
|
|
115
|
+
|
|
116
|
+
.container-full-soft {
|
|
117
|
+
max-height: 600px;
|
|
118
|
+
overflow: auto;
|
|
119
|
+
min-width: 100%;
|
|
120
|
+
}
|
|
121
|
+
|
|
101
122
|
}
|
|
102
123
|
|
|
103
124
|
@keyframes fadeInModal {
|
|
@@ -679,12 +679,22 @@ export const RowTable = ({
|
|
|
679
679
|
|
|
680
680
|
?
|
|
681
681
|
|
|
682
|
-
|
|
683
|
-
<Moment format="DD/MM/YYYY hh:mm:ss">
|
|
684
|
-
{item[itemTd.accessor]}
|
|
685
|
-
</Moment>
|
|
686
|
-
</td>
|
|
682
|
+
itemTd.typeFilterSub === 'date_only' ?
|
|
687
683
|
|
|
684
|
+
<td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
|
|
685
|
+
<Moment format="DD/MM/YYYY">
|
|
686
|
+
{item[itemTd.accessor]}
|
|
687
|
+
</Moment>
|
|
688
|
+
</td>
|
|
689
|
+
|
|
690
|
+
:
|
|
691
|
+
|
|
692
|
+
<td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
|
|
693
|
+
{/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
|
|
694
|
+
<Moment format="DD/MM/YYYY HH:mm">
|
|
695
|
+
{item[itemTd.accessor]}
|
|
696
|
+
</Moment>
|
|
697
|
+
</td>
|
|
688
698
|
:
|
|
689
699
|
|
|
690
700
|
itemTd.typeFilter === 'select'
|