imbric-theme 1.1.5 → 1.1.7
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/Input/Input.js +158 -133
- package/atoms/Label/Label.js +11 -5
- package/atoms/Modal/Modal.js +73 -61
- package/layout/DynamicTable/DynamicTable.js +51 -129
- package/molecules/CardServiceDetail/CardServiceDetail.js +70 -14
- package/molecules/CardServiceDetail/CardServiceDetail.module.css +34 -17
- package/molecules/ColumnTable/ColumnTable.js +94 -116
- package/molecules/DatePicker/DatePicker.js +169 -165
- package/molecules/DatePickerTime/DatePickerTime.js +18 -23
- package/package-lock.json +36916 -0
- package/package.json +9 -1
- package/styles/globals.css +2 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.card-service-detail
|
|
1
|
+
.card-service-detail {
|
|
2
2
|
/* display: flex; */
|
|
3
3
|
width: 100%;
|
|
4
4
|
align-items: center;
|
|
@@ -35,6 +35,17 @@
|
|
|
35
35
|
margin-left: 4px;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
.card-content-btn {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
align-content: center;
|
|
42
|
+
border-top: 1px solid #dfe8f2;
|
|
43
|
+
padding: 6px 6px;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
flex-wrap: nowrap;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
|
|
38
49
|
.card-content-action {
|
|
39
50
|
padding-right: 4px;
|
|
40
51
|
}
|
|
@@ -143,7 +154,7 @@
|
|
|
143
154
|
-webkit-background-size: 4px 100%;
|
|
144
155
|
-moz-background-size: 4px 100%;
|
|
145
156
|
background-size: 4px 100%;
|
|
146
|
-
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
|
|
157
|
+
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
|
|
147
158
|
background-image: -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -webkit-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
|
|
148
159
|
background-image: -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -moz-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
|
|
149
160
|
background-image: -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%), -o-linear-gradient(top, #39b54a 0%, #00a3ff 100%);
|
|
@@ -151,13 +162,13 @@
|
|
|
151
162
|
}
|
|
152
163
|
|
|
153
164
|
.flip-out-hor-bottom {
|
|
154
|
-
|
|
155
|
-
|
|
165
|
+
-webkit-animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
|
166
|
+
animation: flip-out-hor-bottom 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
|
|
156
167
|
}
|
|
157
168
|
|
|
158
169
|
.flip-in-hor-bottom {
|
|
159
|
-
|
|
160
|
-
|
|
170
|
+
-webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
171
|
+
animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
|
161
172
|
}
|
|
162
173
|
|
|
163
174
|
/**
|
|
@@ -165,27 +176,30 @@
|
|
|
165
176
|
* animation flip-out-hor-bottom
|
|
166
177
|
* ----------------------------------------
|
|
167
178
|
*/
|
|
168
|
-
|
|
179
|
+
@-webkit-keyframes flip-out-hor-bottom {
|
|
169
180
|
0% {
|
|
170
181
|
-webkit-transform: rotateX(0);
|
|
171
|
-
|
|
182
|
+
transform: rotateX(0);
|
|
172
183
|
opacity: 1;
|
|
173
184
|
}
|
|
185
|
+
|
|
174
186
|
100% {
|
|
175
187
|
-webkit-transform: rotateX(-70deg);
|
|
176
|
-
|
|
188
|
+
transform: rotateX(-70deg);
|
|
177
189
|
opacity: 0;
|
|
178
190
|
}
|
|
179
191
|
}
|
|
192
|
+
|
|
180
193
|
@keyframes flip-out-hor-bottom {
|
|
181
194
|
0% {
|
|
182
195
|
-webkit-transform: rotateX(0);
|
|
183
|
-
|
|
196
|
+
transform: rotateX(0);
|
|
184
197
|
opacity: 1;
|
|
185
198
|
}
|
|
199
|
+
|
|
186
200
|
100% {
|
|
187
201
|
-webkit-transform: rotateX(-70deg);
|
|
188
|
-
|
|
202
|
+
transform: rotateX(-70deg);
|
|
189
203
|
opacity: 0;
|
|
190
204
|
}
|
|
191
205
|
}
|
|
@@ -196,27 +210,30 @@
|
|
|
196
210
|
* animation flip-in-hor-bottom
|
|
197
211
|
* ----------------------------------------
|
|
198
212
|
*/
|
|
199
|
-
|
|
213
|
+
@-webkit-keyframes flip-in-hor-bottom {
|
|
200
214
|
0% {
|
|
201
215
|
-webkit-transform: rotateX(80deg);
|
|
202
|
-
|
|
216
|
+
transform: rotateX(80deg);
|
|
203
217
|
opacity: 0;
|
|
204
218
|
}
|
|
219
|
+
|
|
205
220
|
100% {
|
|
206
221
|
-webkit-transform: rotateX(0);
|
|
207
|
-
|
|
222
|
+
transform: rotateX(0);
|
|
208
223
|
opacity: 1;
|
|
209
224
|
}
|
|
210
225
|
}
|
|
226
|
+
|
|
211
227
|
@keyframes flip-in-hor-bottom {
|
|
212
228
|
0% {
|
|
213
229
|
-webkit-transform: rotateX(80deg);
|
|
214
|
-
|
|
230
|
+
transform: rotateX(80deg);
|
|
215
231
|
opacity: 0;
|
|
216
232
|
}
|
|
233
|
+
|
|
217
234
|
100% {
|
|
218
235
|
-webkit-transform: rotateX(0);
|
|
219
|
-
|
|
236
|
+
transform: rotateX(0);
|
|
220
237
|
opacity: 1;
|
|
221
238
|
}
|
|
222
|
-
}
|
|
239
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { useState } from
|
|
2
|
+
import { useState } from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import styles from './ColumnTable.module.css'
|
|
5
5
|
import { options } from './constants'
|
|
@@ -10,145 +10,123 @@ import Icon from '../../atoms/Icon'
|
|
|
10
10
|
import DynamicSelect from '../../molecules/DynamicSelect'
|
|
11
11
|
import { Horizontal, Vertical } from '../../layout/Spacer/components'
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
export const ColumnTable = ({
|
|
14
|
+
getStyles,
|
|
15
|
+
handleSorting,
|
|
16
|
+
columnUppercase,
|
|
17
|
+
onChangeInput,
|
|
18
|
+
onChangeSelect,
|
|
19
|
+
columnsData,
|
|
20
|
+
opSelect,
|
|
21
|
+
}) => {
|
|
16
22
|
// const [sortable, setSortable] = useState(true)
|
|
17
23
|
// const [accessor, setAccessor] = useState("")
|
|
18
24
|
|
|
19
|
-
const [sortField, setSortField] = useState(
|
|
20
|
-
const [order, setOrder] = useState(
|
|
25
|
+
const [sortField, setSortField] = useState('')
|
|
26
|
+
const [order, setOrder] = useState('asc')
|
|
21
27
|
|
|
22
28
|
// const [optionsSelect, setOptionsSelect] = useState(opSelect);
|
|
23
29
|
|
|
24
|
-
|
|
25
30
|
const handleSortingChange = (accessor) => {
|
|
26
|
-
const sortOrder =
|
|
27
|
-
accessor === sortField && order === "asc" ? "desc" : "asc"
|
|
31
|
+
const sortOrder = accessor === sortField && order === 'asc' ? 'desc' : 'asc'
|
|
28
32
|
|
|
29
33
|
setSortField(accessor)
|
|
30
34
|
setOrder(sortOrder)
|
|
31
35
|
handleSorting(accessor, sortOrder)
|
|
32
36
|
}
|
|
33
37
|
|
|
34
|
-
|
|
35
38
|
return (
|
|
36
|
-
|
|
37
39
|
// <div className={getStyles('tbl-header')}>
|
|
38
40
|
// <table className={getStyles('table')} cellPadding="0" cellSpacing="0" border="0">
|
|
39
41
|
<thead>
|
|
40
42
|
<tr>
|
|
41
|
-
|
|
42
43
|
{columnsData.map(({ accessor, sortable, ...props }) => {
|
|
43
|
-
|
|
44
44
|
const cl = sortable
|
|
45
|
-
? sortField && sortField === accessor && order ===
|
|
46
|
-
?
|
|
47
|
-
: sortField && sortField === accessor && order ===
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
:
|
|
51
|
-
|
|
52
|
-
return (
|
|
53
|
-
props.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
<Vertical size="xs" />
|
|
99
|
-
|
|
100
|
-
{props.viewIsFilter ? (
|
|
101
|
-
|
|
102
|
-
props.typeFilter === 'select' ?
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
props.opSelectSecundary ?
|
|
106
|
-
|
|
107
|
-
<DynamicSelect
|
|
108
|
-
isInline
|
|
109
|
-
// onChange={item => useStateDate([item.selection])}
|
|
110
|
-
onChange={item => { onChangeSelect(item, props.idInput) }}
|
|
111
|
-
optionsSelect={props.optionsSelect}
|
|
112
|
-
placeholder={props.placeholder}
|
|
113
|
-
maxMenuHeight={110}
|
|
114
|
-
/>
|
|
115
|
-
|
|
116
|
-
:
|
|
117
|
-
|
|
118
|
-
<DynamicSelect
|
|
119
|
-
isInline
|
|
120
|
-
// onChange={item => useStateDate([item.selection])}
|
|
121
|
-
onChange={item => { onChangeSelect(item, props.idInput) }}
|
|
122
|
-
optionsSelect={opSelect || props.optionsSelect}
|
|
123
|
-
placeholder={props.placeholder}
|
|
124
|
-
maxMenuHeight={110}
|
|
125
|
-
/>
|
|
126
|
-
|
|
127
|
-
:
|
|
128
|
-
<Input
|
|
129
|
-
isInputFilter
|
|
130
|
-
id={props.idInput}
|
|
131
|
-
type={props.typeFilter}
|
|
132
|
-
name={props.nameInput}
|
|
133
|
-
onChange={onChangeInput}
|
|
45
|
+
? sortField && sortField === accessor && order === 'asc'
|
|
46
|
+
? 'up'
|
|
47
|
+
: sortField && sortField === accessor && order === 'desc'
|
|
48
|
+
? 'down'
|
|
49
|
+
: 'default'
|
|
50
|
+
: ''
|
|
51
|
+
|
|
52
|
+
return props.activeView ? (
|
|
53
|
+
// setSortable(props.sortable)
|
|
54
|
+
// setAccessor()
|
|
55
|
+
<th
|
|
56
|
+
key={props.idInput}
|
|
57
|
+
className={getStyles(
|
|
58
|
+
'column-table',
|
|
59
|
+
{ 'column-uppercase': columnUppercase },
|
|
60
|
+
{ thacction: accessor === 'iconUrl' },
|
|
61
|
+
{ thcheckbox: props.isCheckbox }
|
|
62
|
+
)}
|
|
63
|
+
>
|
|
64
|
+
<span
|
|
65
|
+
className={getStyles('tbl-txtTh')}
|
|
66
|
+
onClick={sortable ? () => handleSortingChange(accessor) : null}
|
|
67
|
+
>
|
|
68
|
+
<Paragraph size="xs" isInline>
|
|
69
|
+
{props.title}
|
|
70
|
+
</Paragraph>
|
|
71
|
+
|
|
72
|
+
<Horizontal size="xs" />
|
|
73
|
+
|
|
74
|
+
{sortable ? (
|
|
75
|
+
cl === 'default' ? (
|
|
76
|
+
<Icon name="angleUpDown" size="xs" />
|
|
77
|
+
) : cl === '' ? null : cl === 'up' ? (
|
|
78
|
+
<Icon name="angleDown" size="xs" />
|
|
79
|
+
) : (
|
|
80
|
+
<Icon name="angleUp" size="xs" />
|
|
81
|
+
)
|
|
82
|
+
) : null}
|
|
83
|
+
</span>
|
|
84
|
+
|
|
85
|
+
<Vertical size="xs" />
|
|
86
|
+
|
|
87
|
+
{props.viewIsFilter ? (
|
|
88
|
+
props.typeFilter === 'select' ? (
|
|
89
|
+
props.opSelectSecundary ? (
|
|
90
|
+
<DynamicSelect
|
|
91
|
+
isInline
|
|
92
|
+
// onChange={item => useStateDate([item.selection])}
|
|
93
|
+
onChange={(item) => {
|
|
94
|
+
onChangeSelect(item, props.idInput)
|
|
95
|
+
}}
|
|
96
|
+
optionsSelect={props.optionsSelect}
|
|
134
97
|
placeholder={props.placeholder}
|
|
98
|
+
maxMenuHeight={110}
|
|
135
99
|
/>
|
|
100
|
+
) : (
|
|
101
|
+
<DynamicSelect
|
|
102
|
+
isInline
|
|
103
|
+
// onChange={item => useStateDate([item.selection])}
|
|
104
|
+
onChange={(item) => {
|
|
105
|
+
onChangeSelect(item, props.idInput)
|
|
106
|
+
}}
|
|
107
|
+
optionsSelect={opSelect || props.optionsSelect}
|
|
108
|
+
placeholder={props.placeholder}
|
|
109
|
+
maxMenuHeight={110}
|
|
110
|
+
/>
|
|
111
|
+
)
|
|
112
|
+
) : (
|
|
113
|
+
<Input
|
|
114
|
+
isInputFilter
|
|
115
|
+
id={props.idInput}
|
|
116
|
+
type={props.typeFilter}
|
|
117
|
+
name={props.nameInput}
|
|
118
|
+
onChange={onChangeInput}
|
|
119
|
+
placeholder={props.placeholder}
|
|
120
|
+
/>
|
|
136
121
|
)
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
</th>
|
|
142
|
-
) : null
|
|
143
|
-
)
|
|
144
|
-
|
|
122
|
+
) : null}
|
|
123
|
+
</th>
|
|
124
|
+
) : null
|
|
145
125
|
})}
|
|
146
|
-
|
|
147
126
|
</tr>
|
|
148
127
|
</thead>
|
|
149
128
|
// </table>
|
|
150
129
|
// </div>
|
|
151
|
-
|
|
152
130
|
)
|
|
153
131
|
}
|
|
154
132
|
|
|
@@ -161,11 +139,11 @@ ColumnTable.propTypes = {
|
|
|
161
139
|
}
|
|
162
140
|
|
|
163
141
|
ColumnTable.defaultProps = {
|
|
164
|
-
getStyles: () => {
|
|
165
|
-
handleSorting: () => {
|
|
142
|
+
getStyles: () => {},
|
|
143
|
+
handleSorting: () => {},
|
|
166
144
|
columnUppercase: false,
|
|
167
|
-
onChangeInput: () => {
|
|
168
|
-
onChangeSelect: () => {
|
|
145
|
+
onChangeInput: () => {},
|
|
146
|
+
onChangeSelect: () => {},
|
|
169
147
|
}
|
|
170
148
|
|
|
171
149
|
export default withStyles(styles)(ColumnTable)
|