imbric-theme 1.0.8 → 1.1.0
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/.nvmrc +1 -1
- package/atoms/Icon/Icon.js +49 -16
- package/atoms/Icon/Icon.module.css +5 -0
- package/atoms/Icon/constants.js +322 -4
- package/atoms/Icon/helpers.js +1 -0
- package/atoms/Input/Input.js +7 -4
- package/atoms/Input/Input.module.css +1 -1
- package/atoms/Toggle/Toggle.module.css +13 -4
- package/hook/useStateDate.js +17 -12
- package/layout/DynamicTable/DynamicTable.js +36 -1
- package/molecules/DatePicker/DatePicker.js +6 -4
- package/molecules/DynamicSelect/DynamicSelect.js +31 -31
- package/molecules/RowTable/RowTable.js +129 -58
- package/molecules/RowTable/RowTable.module.css +1 -0
- package/package.json +2 -1
- package/styles/globals.css +1 -1
package/.nvmrc
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
16.13.2
|
package/atoms/Icon/Icon.js
CHANGED
|
@@ -18,28 +18,59 @@ export const Icon = ({
|
|
|
18
18
|
size,
|
|
19
19
|
isClickable,
|
|
20
20
|
getStyles,
|
|
21
|
+
disabled,
|
|
21
22
|
}) => {
|
|
22
23
|
const icon = iconsMap[name]
|
|
23
24
|
const mappedSize = mapSize(size)
|
|
24
25
|
|
|
25
26
|
return (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
27
|
+
|
|
28
|
+
!disabled ?
|
|
29
|
+
<div
|
|
30
|
+
id={id}
|
|
31
|
+
className={getStyles(className, 'icon', ['color', 'size', 'background'], {
|
|
32
|
+
'is-clickable': isClickable || !!onClick,
|
|
33
|
+
})}
|
|
34
|
+
style={{ width: mappedSize, height: mappedSize }
|
|
35
|
+
}
|
|
36
|
+
onClick={onClick && handleClick({ onClick })}
|
|
37
|
+
>
|
|
38
|
+
<svg
|
|
39
|
+
viewBox={icon.viewBox}
|
|
40
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
41
|
+
width={mappedSize}
|
|
42
|
+
height={mappedSize}
|
|
43
|
+
>
|
|
44
|
+
{icon.svg}
|
|
45
|
+
</svg>
|
|
46
|
+
</div >
|
|
47
|
+
|
|
48
|
+
:
|
|
49
|
+
|
|
50
|
+
<div
|
|
51
|
+
id={id}
|
|
52
|
+
className={getStyles(className, 'icon', ['color', 'size', 'background'], {
|
|
53
|
+
'is-clickable': isClickable || !!onClick,
|
|
54
|
+
'is-disabled': disabled,
|
|
55
|
+
})}
|
|
56
|
+
style={{ width: mappedSize, height: mappedSize }
|
|
57
|
+
}
|
|
39
58
|
>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
59
|
+
<svg
|
|
60
|
+
viewBox={icon.viewBox}
|
|
61
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
62
|
+
width={mappedSize}
|
|
63
|
+
height={mappedSize}
|
|
64
|
+
className={getStyles({
|
|
65
|
+
'is-disabled': disabled,
|
|
66
|
+
})}
|
|
67
|
+
>
|
|
68
|
+
{icon.svg}
|
|
69
|
+
</svg>
|
|
70
|
+
</div >
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
43
74
|
)
|
|
44
75
|
}
|
|
45
76
|
|
|
@@ -53,6 +84,7 @@ Icon.propTypes = {
|
|
|
53
84
|
id: PropTypes.string,
|
|
54
85
|
className: PropTypes.string,
|
|
55
86
|
isClickable: PropTypes.bool,
|
|
87
|
+
disabled: PropTypes.bool,
|
|
56
88
|
}
|
|
57
89
|
|
|
58
90
|
Icon.defaultProps = {
|
|
@@ -60,6 +92,7 @@ Icon.defaultProps = {
|
|
|
60
92
|
color: 'base',
|
|
61
93
|
background: 'transparent',
|
|
62
94
|
isClickable: false,
|
|
95
|
+
disabled: false,
|
|
63
96
|
getStyles: () => { },
|
|
64
97
|
}
|
|
65
98
|
|
package/atoms/Icon/constants.js
CHANGED
|
@@ -93,7 +93,6 @@ export const iconsMap = {
|
|
|
93
93
|
L4.6,9.7c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1L7,14.1c0.3,0.3,0.7,0.3,1,0L11.4,10.7z"/>
|
|
94
94
|
),
|
|
95
95
|
},
|
|
96
|
-
|
|
97
96
|
fileDownload: {
|
|
98
97
|
viewBox: '0 0 21 21',
|
|
99
98
|
svg: (
|
|
@@ -107,8 +106,6 @@ export const iconsMap = {
|
|
|
107
106
|
</g>
|
|
108
107
|
),
|
|
109
108
|
},
|
|
110
|
-
|
|
111
|
-
|
|
112
109
|
pauseCircle: {
|
|
113
110
|
viewBox: '0 0 28 28',
|
|
114
111
|
svg: (
|
|
@@ -1071,11 +1068,332 @@ export const iconsMap = {
|
|
|
1071
1068
|
</>
|
|
1072
1069
|
),
|
|
1073
1070
|
},
|
|
1071
|
+
iconSave: {
|
|
1072
|
+
viewBox: '0 0 24 24',
|
|
1073
|
+
svg: (
|
|
1074
|
+
<>
|
|
1075
|
+
<path d="M21.7,23.8H0.2V2.3c0-1.1,0.9-2,2-2h17.2l4.3,3.7v17.8C23.8,22.8,22.8,23.8,21.7,23.8z M1.8,22.3h20c0.3,0,0.5-0.2,0.5-0.5
|
|
1076
|
+
V4.6l-3.3-2.9H2.3C2,1.7,1.8,2,1.8,2.3V22.3z"/>
|
|
1077
|
+
<path d="M18.1,9.7H5.9V0.2h12.3V9.7z M7.4,8.2h9.3V1.7H7.4V8.2z" />
|
|
1078
|
+
<path d="M20,23.8H4V13.5h16V23.8z M5.5,22.3h13V15h-13V22.3z" />
|
|
1079
|
+
</>
|
|
1080
|
+
),
|
|
1081
|
+
},
|
|
1082
|
+
iconScore5: {
|
|
1083
|
+
viewBox: '0 0 24 24',
|
|
1084
|
+
svg: (
|
|
1085
|
+
<>
|
|
1086
|
+
<g id="Layer_2">
|
|
1087
|
+
<g id="Export">
|
|
1088
|
+
<path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
|
|
1089
|
+
C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
|
|
1090
|
+
<path class="st0" d="M9.6,11.1c-0.1,0-0.2-0.1-0.2-0.1c-0.3-0.6-1-0.8-1.6-0.5c-0.2,0.1-0.4,0.3-0.5,0.5c-0.1,0.1-0.2,0.2-0.4,0.1
|
|
1091
|
+
c-0.1-0.1-0.2-0.2-0.1-0.4C7.2,9.8,8.3,9.5,9.1,10c0.3,0.2,0.6,0.4,0.7,0.7c0.1,0.1,0,0.3-0.1,0.4C9.7,11.1,9.6,11.1,9.6,11.1z"/>
|
|
1092
|
+
<path class="st0" d="M14.8,11.1c-0.2,0-0.3-0.1-0.3-0.3c0-0.1,0-0.1,0-0.1c0.5-0.9,1.5-1.2,2.4-0.7c0.3,0.2,0.6,0.4,0.7,0.7
|
|
1093
|
+
c0.1,0.1,0,0.3-0.1,0.4c-0.1,0.1-0.3,0-0.4-0.1c0,0,0,0,0,0c-0.3-0.6-1-0.8-1.6-0.5c-0.2,0.1-0.4,0.3-0.5,0.5
|
|
1094
|
+
C15,11,14.9,11.1,14.8,11.1z"/>
|
|
1095
|
+
<path class="st0" d="M12,19.3c-1.2,0-2.2-0.8-2.4-1.8c0,0,0,0,0,0v-3.3c0-0.2,0.1-0.3,0.3-0.3h4.2c0.2,0,0.3,0.1,0.3,0.3v3.3
|
|
1096
|
+
c0,0,0,0,0,0C14.2,18.6,13.2,19.3,12,19.3z M10.2,17.5c0.1,0.7,0.9,1.3,1.8,1.3s1.7-0.5,1.8-1.3v-3h-3.6V17.5z M14.1,17.5
|
|
1097
|
+
L14.1,17.5z"/>
|
|
1098
|
+
</g>
|
|
1099
|
+
</g>
|
|
1100
|
+
</>
|
|
1101
|
+
),
|
|
1102
|
+
},
|
|
1103
|
+
iconScore5_done: {
|
|
1104
|
+
viewBox: '0 0 24 24',
|
|
1105
|
+
svg: (
|
|
1106
|
+
<>
|
|
1107
|
+
<g>
|
|
1108
|
+
<path class="st0" d="M10.2,17.5c0.1,0.7,0.9,1.3,1.8,1.3s1.7-0.5,1.8-1.3v-3h-3.6V17.5z" />
|
|
1109
|
+
<path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M7.8,10.5
|
|
1110
|
+
c-0.2,0.1-0.4,0.3-0.5,0.5c-0.1,0.1-0.2,0.2-0.4,0.1c-0.1-0.1-0.2-0.2-0.1-0.4C7.2,9.8,8.3,9.5,9.1,10c0.3,0.2,0.6,0.4,0.7,0.7
|
|
1111
|
+
c0.1,0.1,0,0.3-0.1,0.4H9.6c-0.1,0-0.2-0.1-0.2-0.1C9.1,10.4,8.4,10.2,7.8,10.5z M14.4,17.5c-0.2,1.1-1.2,1.8-2.4,1.8
|
|
1112
|
+
s-2.2-0.8-2.4-1.8v-3.3c0-0.2,0.1-0.3,0.3-0.3h4.2c0.2,0,0.3,0.1,0.3,0.3V17.5z M17.5,11.1c-0.1,0.1-0.3,0-0.4-0.1
|
|
1113
|
+
c-0.3-0.6-1-0.8-1.6-0.5c-0.2,0.1-0.4,0.3-0.5,0.5c0,0-0.1,0.1-0.2,0.1c-0.2,0-0.3-0.1-0.3-0.3c0-0.1,0-0.1,0-0.1
|
|
1114
|
+
C15,9.8,16,9.5,16.9,10c0.3,0.2,0.6,0.4,0.7,0.7C17.7,10.8,17.6,11,17.5,11.1z"/>
|
|
1115
|
+
</g>
|
|
1116
|
+
</>
|
|
1117
|
+
),
|
|
1118
|
+
},
|
|
1119
|
+
iconScore4: {
|
|
1120
|
+
viewBox: '0 0 24 24',
|
|
1121
|
+
svg: (
|
|
1122
|
+
<>
|
|
1123
|
+
<g id="Layer_2">
|
|
1124
|
+
<g id="Export">
|
|
1125
|
+
<path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
|
|
1126
|
+
C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
|
|
1127
|
+
<path class="st0" d="M16.9,10.6h-1.7c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7c0.2,0,0.3,0.1,0.3,0.3S17,10.6,16.9,10.6
|
|
1128
|
+
L16.9,10.6z"/>
|
|
1129
|
+
<path class="st0" d="M8.8,10.6H7.1c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7c0.2,0,0.3,0.1,0.3,0.3S9,10.6,8.8,10.6z" />
|
|
1130
|
+
<path class="st0" d="M12,17.8c-0.2,0-0.4,0-0.5,0c-1.4-0.1-2.7-0.6-3.8-1.4c-0.1-0.1-0.2-0.3-0.1-0.4c0.1-0.1,0.3-0.2,0.4-0.1l0,0
|
|
1131
|
+
c1,0.7,2.2,1.2,3.5,1.3c1.6,0.1,3.2-0.3,4.5-1.3c0.1-0.1,0.3-0.1,0.4,0c0.1,0.1,0.1,0.3,0,0.4c0,0,0,0,0,0
|
|
1132
|
+
C15.1,17.3,13.5,17.8,12,17.8z"/>
|
|
1133
|
+
</g>
|
|
1134
|
+
</g>
|
|
1135
|
+
</>
|
|
1136
|
+
),
|
|
1137
|
+
},
|
|
1138
|
+
iconScore4_done: {
|
|
1139
|
+
viewBox: '0 0 24 24',
|
|
1140
|
+
svg: (
|
|
1141
|
+
<>
|
|
1142
|
+
<path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M6.8,10.3c0-0.2,0.1-0.3,0.3-0.3
|
|
1143
|
+
h1.7c0.2,0,0.3,0.1,0.3,0.3S9,10.6,8.8,10.6H7.1C6.9,10.6,6.8,10.5,6.8,10.3z M16.4,16.3c-1.3,1-2.9,1.5-4.4,1.5c-0.2,0-0.4,0-0.5,0
|
|
1144
|
+
c-1.4-0.1-2.7-0.6-3.8-1.4c-0.1-0.1-0.2-0.3-0.1-0.4c0.1-0.1,0.3-0.2,0.4-0.1c1,0.7,2.2,1.2,3.5,1.3c1.6,0.1,3.2-0.3,4.5-1.3
|
|
1145
|
+
c0.1-0.1,0.3-0.1,0.4,0C16.5,16,16.5,16.2,16.4,16.3z M16.9,10.6h-1.7c-0.2,0-0.3-0.1-0.3-0.3S15,10,15.2,10h1.7
|
|
1146
|
+
c0.2,0,0.3,0.1,0.3,0.3S17,10.6,16.9,10.6z"/>
|
|
1147
|
+
</>
|
|
1148
|
+
),
|
|
1149
|
+
},
|
|
1150
|
+
iconScore3: {
|
|
1151
|
+
viewBox: '0 0 24 24',
|
|
1152
|
+
svg: (
|
|
1153
|
+
<>
|
|
1154
|
+
<g id="Layer_2">
|
|
1155
|
+
<g id="Export">
|
|
1156
|
+
<path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
|
|
1157
|
+
C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
|
|
1158
|
+
<path class="st0" d="M16.9,10.6h-1.7c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7c0.2,0,0.3,0.1,0.3,0.3S17,10.6,16.9,10.6
|
|
1159
|
+
L16.9,10.6z"/>
|
|
1160
|
+
<path class="st0" d="M8.8,10.6H7.1c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7c0.2,0,0.3,0.1,0.3,0.3S9,10.6,8.8,10.6z" />
|
|
1161
|
+
<path class="st0" d="M16.2,16.5H7.8c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h8.3c0.2,0,0.3,0.1,0.3,0.3S16.3,16.5,16.2,16.5z" />
|
|
1162
|
+
</g>
|
|
1163
|
+
</g>
|
|
1164
|
+
</>
|
|
1165
|
+
),
|
|
1166
|
+
},
|
|
1167
|
+
iconScore3_done: {
|
|
1168
|
+
viewBox: '0 0 24 24',
|
|
1169
|
+
svg: (
|
|
1170
|
+
<>
|
|
1171
|
+
<path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M6.8,10.3c0-0.2,0.1-0.3,0.3-0.3
|
|
1172
|
+
h1.7c0.2,0,0.3,0.1,0.3,0.3S9,10.6,8.8,10.6H7.1C6.9,10.6,6.8,10.5,6.8,10.3z M16.2,16.5H7.8c-0.2,0-0.3-0.1-0.3-0.3
|
|
1173
|
+
c0-0.2,0.1-0.3,0.3-0.3h8.3c0.2,0,0.3,0.1,0.3,0.3C16.4,16.4,16.3,16.5,16.2,16.5z M16.9,10.6h-1.7c-0.2,0-0.3-0.1-0.3-0.3
|
|
1174
|
+
S15,10,15.2,10h1.7c0.2,0,0.3,0.1,0.3,0.3S17,10.6,16.9,10.6z"/>
|
|
1175
|
+
</>
|
|
1176
|
+
),
|
|
1177
|
+
},
|
|
1178
|
+
iconScore2: {
|
|
1179
|
+
viewBox: '0 0 24 24',
|
|
1180
|
+
svg: (
|
|
1181
|
+
<>
|
|
1182
|
+
<g id="Layer_2">
|
|
1183
|
+
<g id="Export">
|
|
1184
|
+
<path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
|
|
1185
|
+
C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
|
|
1186
|
+
<path class="st0" d="M16.2,17.8c-0.1,0-0.1,0-0.2,0c-1.3-0.9-2.9-1.4-4.5-1.3C10.2,16.6,9,17,8,17.7c-0.1,0.1-0.3,0.1-0.4-0.1
|
|
1187
|
+
c-0.1-0.1-0.1-0.3,0.1-0.4c1.1-0.8,2.4-1.3,3.8-1.4c1.7-0.1,3.4,0.4,4.9,1.4c0.1,0.1,0.2,0.3,0.1,0.4
|
|
1188
|
+
C16.4,17.7,16.3,17.8,16.2,17.8L16.2,17.8z"/>
|
|
1189
|
+
<path class="st0" d="M8.2,11.4c-0.7,0-1.2-0.4-1.6-0.9c-0.1-0.1,0-0.3,0.1-0.4c0.1-0.1,0.3,0,0.4,0.1c0,0,0,0,0,0
|
|
1190
|
+
c0.3,0.6,1,0.8,1.6,0.5c0.2-0.1,0.4-0.3,0.5-0.5C9.3,10,9.5,10,9.7,10c0.1,0.1,0.2,0.2,0.1,0.4C9.5,11,8.9,11.4,8.2,11.4z"/>
|
|
1191
|
+
<path class="st0" d="M16,11.4c-0.7,0-1.2-0.4-1.6-0.9c-0.1-0.1,0-0.3,0.1-0.4c0.1-0.1,0.3,0,0.4,0.1c0,0,0,0,0,0
|
|
1192
|
+
c0.3,0.6,1,0.8,1.6,0.5c0.2-0.1,0.4-0.3,0.5-0.5c0.1-0.1,0.2-0.2,0.4-0.1c0.1,0.1,0.2,0.2,0.1,0.4c0,0,0,0,0,0
|
|
1193
|
+
C17.3,11,16.7,11.4,16,11.4z"/>
|
|
1194
|
+
</g>
|
|
1195
|
+
</g>
|
|
1196
|
+
</>
|
|
1197
|
+
),
|
|
1198
|
+
},
|
|
1199
|
+
iconScore2_done: {
|
|
1200
|
+
viewBox: '0 0 24 24',
|
|
1201
|
+
svg: (
|
|
1202
|
+
<>
|
|
1203
|
+
<path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M6.6,10.5c-0.1-0.1,0-0.3,0.1-0.4
|
|
1204
|
+
c0.1-0.1,0.3,0,0.4,0.1c0.3,0.6,1,0.8,1.6,0.5c0.2-0.1,0.4-0.3,0.5-0.5C9.3,10,9.5,10,9.7,10c0.1,0.1,0.2,0.2,0.1,0.4
|
|
1205
|
+
c-0.3,0.6-0.9,1-1.6,1S7,11,6.6,10.5z M16.5,17.6c-0.1,0.1-0.2,0.2-0.3,0.2c-0.1,0-0.1,0-0.2,0c-1.3-0.9-2.9-1.4-4.5-1.3
|
|
1206
|
+
C10.2,16.6,9,17,8,17.7c-0.1,0.1-0.3,0.1-0.4-0.1c-0.1-0.1-0.1-0.3,0.1-0.4c1.1-0.8,2.4-1.3,3.8-1.4c1.7-0.1,3.4,0.4,4.9,1.4
|
|
1207
|
+
C16.5,17.3,16.6,17.5,16.5,17.6z M17.5,10.5c-0.2,0.5-0.8,0.9-1.5,0.9s-1.2-0.4-1.6-0.9c-0.1-0.1,0-0.3,0.1-0.4
|
|
1208
|
+
c0.1-0.1,0.3,0,0.4,0.1c0.3,0.6,1,0.8,1.6,0.5c0.2-0.1,0.4-0.3,0.5-0.5c0.1-0.1,0.2-0.2,0.4-0.1C17.5,10.2,17.6,10.3,17.5,10.5z"/>
|
|
1209
|
+
</>
|
|
1210
|
+
),
|
|
1211
|
+
},
|
|
1212
|
+
iconScore1: {
|
|
1213
|
+
viewBox: '0 0 24 24',
|
|
1214
|
+
svg: (
|
|
1215
|
+
<>
|
|
1216
|
+
<g id="Layer_2">
|
|
1217
|
+
<g id="Export">
|
|
1218
|
+
<path class="st0" d="M12,0.6c6.3,0,11.4,5.1,11.4,11.4S18.3,23.4,12,23.4S0.6,18.3,0.6,12C0.6,5.7,5.7,0.6,12,0.6 M12,0
|
|
1219
|
+
C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/>
|
|
1220
|
+
<path class="st0" d="M8.8,5.1h-1l0.7-0.7c0.1-0.1,0.1-0.3,0-0.4c-0.1-0.1-0.3-0.1-0.4,0L6.9,5.1c0,0,0,0.1-0.1,0.1l0,0
|
|
1221
|
+
c0,0.1,0,0.1,0,0.2l0,0c0,0.1,0.1,0.1,0.2,0.2l0,0c0,0,0.1,0,0.1,0h1.7c0.2,0,0.3-0.1,0.3-0.3C9.1,5.2,9,5.1,8.8,5.1z"/>
|
|
1222
|
+
<path class="st0" d="M4.3,5.1h1L4.6,4.3c-0.1-0.1-0.1-0.3,0-0.4c0.1-0.1,0.3-0.1,0.4,0l1.2,1.2c0,0,0,0.1,0.1,0.1l0,0
|
|
1223
|
+
c0,0.1,0,0.1,0,0.2l0,0c0,0.1-0.1,0.1-0.2,0.2l0,0c0,0-0.1,0-0.1,0H4.3C4.2,5.6,4,5.5,4,5.3C4,5.2,4.2,5.1,4.3,5.1z"/>
|
|
1224
|
+
<path class="st0" d="M8.8,6.7h-1l0.7,0.7c0.1,0.1,0.1,0.3,0,0.4C8.4,8,8.2,8,8.1,7.9L6.9,6.7c0,0,0-0.1-0.1-0.1l0,0
|
|
1225
|
+
c0-0.1,0-0.1,0-0.2l0,0c0-0.1,0.1-0.1,0.2-0.2l0,0c0,0,0.1,0,0.1,0h1.7c0.2,0,0.3,0.1,0.3,0.3C9.1,6.6,9,6.7,8.8,6.7z"/>
|
|
1226
|
+
<path class="st0" d="M4.3,6.7h1L4.6,7.5c-0.1,0.1-0.1,0.3,0,0.4C4.7,8,4.9,8,5,7.9l1.2-1.2c0,0,0-0.1,0.1-0.1l0,0
|
|
1227
|
+
c0-0.1,0-0.1,0-0.2l0,0c0-0.1-0.1-0.1-0.2-0.2l0,0c0,0-0.1,0-0.1,0H4.3C4.2,6.2,4,6.3,4,6.5C4,6.6,4.2,6.7,4.3,6.7z"/>
|
|
1228
|
+
<path class="st0" d="M16.6,9.8h-1.7c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3h1.7c0.2,0,0.3-0.1,0.3-0.3S16.8,9.8,16.6,9.8z" />
|
|
1229
|
+
<path class="st0" d="M8.5,9.8H6.9c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3h1.7c0.2,0,0.3-0.1,0.3-0.3S8.7,9.8,8.5,9.8z" />
|
|
1230
|
+
<path class="st0" d="M15.9,15.7c-0.1,0-0.1,0-0.2,0c-1.3-0.9-2.9-1.4-4.5-1.3c-1.3,0.1-2.5,0.5-3.5,1.3c-0.1,0.1-0.3,0.1-0.4,0
|
|
1231
|
+
c-0.1-0.1-0.1-0.3,0-0.4c0,0,0,0,0.1-0.1c1.1-0.8,2.4-1.3,3.8-1.4c1.7-0.1,3.4,0.4,4.9,1.4c0.1,0.1,0.2,0.3,0.1,0.4
|
|
1232
|
+
C16.1,15.7,16,15.7,15.9,15.7L15.9,15.7z"/>
|
|
1233
|
+
</g>
|
|
1234
|
+
</g>
|
|
1235
|
+
</>
|
|
1236
|
+
),
|
|
1237
|
+
},
|
|
1238
|
+
iconScore1_done: {
|
|
1239
|
+
viewBox: '0 0 24 24',
|
|
1240
|
+
svg: (
|
|
1241
|
+
<>
|
|
1242
|
+
<path class="st0" d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12s12-5.4,12-12C24,5.4,18.6,0,12,0z M6.8,5.2c0.1,0,0.1-0.1,0.1-0.1
|
|
1243
|
+
L8.1,4c0.1-0.1,0.3-0.1,0.4,0c0.1,0.1,0.1,0.3,0,0.4L7.8,5.1h1c0.2,0,0.3,0.1,0.3,0.2c0,0.2-0.1,0.3-0.3,0.3H7.1H7
|
|
1244
|
+
C6.9,5.5,6.8,5.5,6.8,5.4C6.8,5.3,6.8,5.3,6.8,5.2z M6.8,6.4c0-0.1,0.1-0.1,0.2-0.2h0.1h1.7c0.2,0,0.3,0.1,0.3,0.3
|
|
1245
|
+
c0,0.1-0.1,0.2-0.3,0.2h-1l0.7,0.7c0.1,0.1,0.1,0.3,0,0.4C8.4,8,8.2,8,8.1,7.9L6.9,6.7c0,0,0-0.1-0.1-0.1C6.8,6.5,6.8,6.5,6.8,6.4z
|
|
1246
|
+
M6.3,6.6c-0.1,0-0.1,0.1-0.1,0.1L5,7.9C4.9,8,4.7,8,4.6,7.9c-0.1-0.1-0.1-0.3,0-0.4l0.7-0.8h-1C4.2,6.7,4,6.6,4,6.5
|
|
1247
|
+
c0-0.2,0.2-0.3,0.3-0.3H6h0.1c0.1,0.1,0.2,0.1,0.2,0.2C6.3,6.5,6.3,6.5,6.3,6.6z M6.3,5.4c0,0.1-0.1,0.1-0.2,0.2H6H4.3
|
|
1248
|
+
C4.2,5.6,4,5.5,4,5.3c0-0.1,0.2-0.2,0.3-0.2h1L4.6,4.3C4.5,4.2,4.5,4,4.6,3.9c0.1-0.1,0.3-0.1,0.4,0l1.2,1.2c0,0,0,0.1,0.1,0.1
|
|
1249
|
+
C6.3,5.3,6.3,5.3,6.3,5.4z M6.6,10.1c0-0.2,0.1-0.3,0.3-0.3h1.6c0.2,0,0.4,0.1,0.4,0.3s-0.1,0.3-0.3,0.3H6.9
|
|
1250
|
+
C6.7,10.4,6.6,10.3,6.6,10.1z M16.2,15.6c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.1,0-0.2,0c-1.3-0.9-2.9-1.4-4.5-1.3
|
|
1251
|
+
c-1.3,0.1-2.5,0.5-3.5,1.3c-0.1,0.1-0.3,0.1-0.4,0c-0.1-0.1-0.1-0.3,0-0.4c0,0,0,0,0.1-0.1c1.1-0.8,2.4-1.3,3.8-1.4
|
|
1252
|
+
c1.7-0.1,3.4,0.4,4.9,1.4C16.2,15.3,16.3,15.5,16.2,15.6z M16.6,10.4h-1.7c-0.2,0-0.3-0.1-0.3-0.3s0.1-0.3,0.3-0.3h1.7
|
|
1253
|
+
c0.2,0,0.3,0.1,0.3,0.3S16.8,10.4,16.6,10.4z"/>
|
|
1254
|
+
</>
|
|
1255
|
+
),
|
|
1256
|
+
},
|
|
1257
|
+
iconReload: {
|
|
1258
|
+
viewBox: '0 0 24 24',
|
|
1259
|
+
svg: (
|
|
1260
|
+
<>
|
|
1261
|
+
<g>
|
|
1262
|
+
<g>
|
|
1263
|
+
<path d="M5.5,4.8C9,1.6,14.3,1.5,17.9,4.4l-2.8,0.1c-0.4,0-0.7,0.3-0.6,0.7c0,0.4,0.3,0.6,0.7,0.6c0,0,0,0,0,0l4.4-0.2
|
|
1264
|
+
c0.4,0,0.6-0.3,0.6-0.7v0c0,0,0,0,0,0v0l0,0L20,0.6C20,0.3,19.7,0,19.3,0c-0.4,0-0.7,0.3-0.6,0.7l0.1,2.7c-1.8-1.5-4-2.3-6.3-2.4
|
|
1265
|
+
C9.6,0.8,6.8,1.8,4.6,3.8c-3,2.7-4.2,6.8-3.3,10.6c0.1,0.3,0.3,0.5,0.6,0.5c0.1,0,0.1,0,0.2,0c0.4-0.1,0.6-0.4,0.5-0.8
|
|
1266
|
+
C1.8,10.7,2.9,7.1,5.5,4.8z"/>
|
|
1267
|
+
<path d="M22.7,9.6c-0.1-0.4-0.4-0.6-0.8-0.5c-0.4,0.1-0.6,0.4-0.5,0.8c0.8,3.4-0.3,7-2.9,9.3c-1.8,1.7-4.1,2.5-6.4,2.5
|
|
1268
|
+
c-2.2,0-4.4-0.7-6.1-2.2l2.9-0.3c0.4,0,0.6-0.4,0.6-0.7c0-0.4-0.4-0.6-0.7-0.6l-4.4,0.4c-0.4,0-0.6,0.4-0.6,0.7l0.4,4.4
|
|
1269
|
+
c0,0.3,0.3,0.6,0.7,0.6c0,0,0,0,0.1,0c0.4,0,0.6-0.4,0.6-0.7l-0.2-2.7c1.8,1.4,4,2.3,6.3,2.4c0.2,0,0.4,0,0.6,0
|
|
1270
|
+
c2.7,0,5.3-1,7.3-2.8C22.4,17.5,23.6,13.5,22.7,9.6z"/>
|
|
1271
|
+
</g>
|
|
1272
|
+
</g>
|
|
1273
|
+
</>
|
|
1274
|
+
),
|
|
1275
|
+
},
|
|
1276
|
+
iconWindows: {
|
|
1277
|
+
viewBox: '0 0 24 24',
|
|
1278
|
+
svg: (
|
|
1279
|
+
<>
|
|
1280
|
+
<g id="Page-1">
|
|
1281
|
+
<g id="Dribbble-Light-Preview" transform="translate(-60.000000, -7439.000000)">
|
|
1282
|
+
<g id="icons" transform="translate(56.000000, 160.000000)">
|
|
1283
|
+
<path id="windows-_x5B__x23_174_x5D_" class="st0" d="M15,7291.5c0,2.4,0,6.5,0,9.6c4.3,0.6,8.7,1.2,13,1.8c0-3.8,0-7.5,0-11.1
|
|
1284
|
+
C23.7,7291.9,19.3,7291.5,15,7291.5 M4,7291.5v8.1c3.3,0.4,6.5,0.9,9.8,1.3c0-3.2,0-6.3,0-9.5C10.5,7291.6,7.3,7291.5,4,7291.5
|
|
1285
|
+
M4,7282.4v8.1c3.3,0,6.5,0,9.8,0c0-3.1,0-6.3,0-9.4C10.5,7281.5,7.3,7281.9,4,7282.4 M28,7290.4c-4.3,0-8.7,0.1-13,0.1
|
|
1286
|
+
c0-3.2,0-6.4,0-9.6c4.3-0.7,8.7-1.3,13-1.9C28,7282.8,28,7286.6,28,7290.4"/>
|
|
1287
|
+
</g>
|
|
1288
|
+
</g>
|
|
1289
|
+
</g>
|
|
1290
|
+
</>
|
|
1291
|
+
),
|
|
1292
|
+
},
|
|
1293
|
+
iconDotCircle: {
|
|
1294
|
+
viewBox: '0 0 24 24',
|
|
1295
|
+
svg: (
|
|
1296
|
+
<>
|
|
1297
|
+
<path d="M12,6.7c2.9,0,5.2,2.4,5.2,5.3s-2.4,5.2-5.2,5.2S6.7,14.9,6.7,12S9.1,6.7,12,6.7" />
|
|
1298
|
+
<path d="M12,24C5.4,24,0,18.6,0,12S5.4,0,12,0s12,5.4,12,12S18.6,24,12,24z M12,1.5C6.2,1.5,1.5,6.2,1.5,12S6.2,22.5,12,22.5
|
|
1299
|
+
S22.5,17.8,22.5,12S17.8,1.5,12,1.5z"/>
|
|
1300
|
+
</>
|
|
1301
|
+
),
|
|
1302
|
+
},
|
|
1303
|
+
iconApple: {
|
|
1304
|
+
viewBox: '0 0 24 24',
|
|
1305
|
+
svg: (
|
|
1306
|
+
<>
|
|
1307
|
+
<g id="Page-1">
|
|
1308
|
+
<g id="Dribbble-Light-Preview" transform="translate(-102.000000, -7439.000000)">
|
|
1309
|
+
<g id="icons" transform="translate(56.000000, 160.000000)">
|
|
1310
|
+
<path id="apple-_x5B__x23_173_x5D_" class="st0" d="M61.7,7282.8c0.9-1,1.5-2.4,1.3-3.8c-1.3,0-2.8,0.8-3.7,1.8
|
|
1311
|
+
c-0.8,0.9-1.5,2.3-1.3,3.7C59.4,7284.6,60.8,7283.8,61.7,7282.8 M64.8,7291.7c0,3.6,3.3,4.8,3.4,4.9c0,0.1-0.5,1.7-1.7,3.4
|
|
1312
|
+
c-1,1.5-2.1,2.9-3.8,2.9c-1.7,0-2.2-1-4.1-1c-1.9,0-2.5,0.9-4.1,1c-1.6,0.1-2.9-1.6-4-3c-2.2-3-3.8-8.4-1.6-12.1
|
|
1313
|
+
c1.1-1.8,3.1-3,5.2-3c1.6,0,3.1,1,4.1,1c1,0,2.8-1.3,4.8-1.1c0.8,0,3.1,0.3,4.6,2.4C67.4,7287.3,64.8,7288.7,64.8,7291.7"/>
|
|
1314
|
+
</g>
|
|
1315
|
+
</g>
|
|
1316
|
+
</g>
|
|
1317
|
+
</>
|
|
1318
|
+
),
|
|
1319
|
+
},
|
|
1320
|
+
iconAndroid: {
|
|
1321
|
+
viewBox: '0 0 24 24',
|
|
1322
|
+
svg: (
|
|
1323
|
+
<>
|
|
1324
|
+
<path d="M16.1,0.8l-1.2,1.6c1.8,0.9,3.1,2.5,3.3,4.4H5.8C5.9,5,7.2,3.3,9.1,2.5L7.9,0.8c-0.1-0.1,0-0.2,0.1-0.3s0.2,0,0.3,0.1
|
|
1325
|
+
l1.2,1.7C10.2,2,11.1,1.8,12,1.8s1.8,0.2,2.6,0.5l1.2-1.7c0.1-0.1,0.2-0.1,0.3-0.1S16.2,0.7,16.1,0.8L16.1,0.8z M9.4,5.1
|
|
1326
|
+
c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7C9,3.7,8.7,4.1,8.7,4.4C8.7,4.8,9,5.1,9.4,5.1z M14.7,5.1c0.4,0,0.7-0.3,0.7-0.7
|
|
1327
|
+
c0-0.4-0.3-0.7-0.7-0.7c-0.4,0-0.7,0.3-0.7,0.7C14,4.8,14.3,5.1,14.7,5.1z M2.2,14.6V9.1c0-0.8,0.6-1.4,1.4-1.4C4.4,7.7,5,8.3,5,9.1
|
|
1328
|
+
v5.5c0,0.8-0.6,1.4-1.4,1.4C2.8,16.1,2.2,15.5,2.2,14.6z M19,14.6V9.1c0-0.8,0.6-1.4,1.4-1.4s1.4,0.7,1.4,1.4v5.5
|
|
1329
|
+
c0,0.8-0.6,1.4-1.4,1.4S19,15.5,19,14.6z M5.8,17.8V7.7h12.4v10.1c0,0.6-0.5,1.1-1.1,1.1h-1.2v3.1c0,0.8-0.6,1.4-1.4,1.4
|
|
1330
|
+
c-0.8,0-1.4-0.6-1.4-1.4V19h-2.2v3.1c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4V19H6.9C6.3,19,5.8,18.4,5.8,17.8L5.8,17.8z"/>
|
|
1331
|
+
</>
|
|
1332
|
+
),
|
|
1333
|
+
},
|
|
1334
|
+
iconDesktop: {
|
|
1335
|
+
viewBox: '0 0 24 24',
|
|
1336
|
+
svg: (
|
|
1337
|
+
<>
|
|
1338
|
+
<path d="M22,1.6H2c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h7v2.8H5.6v2h12.8v-2h-3.3v-2.8H22c1.1,0,2-0.9,2-2v-12
|
|
1339
|
+
C24,2.5,23.1,1.6,22,1.6z M13.1,20.4H11v-2.8h2.1V20.4z M22,15.6H2v-12h20V15.6z"/>
|
|
1340
|
+
</>
|
|
1341
|
+
),
|
|
1342
|
+
},
|
|
1343
|
+
iconComments: {
|
|
1344
|
+
viewBox: '0 0 24 24',
|
|
1345
|
+
svg: (
|
|
1346
|
+
<>
|
|
1347
|
+
<g id="comments-Regular">
|
|
1348
|
+
<path id="comments-Regular-2" class="st0" d="M19.4,6.2h-0.3V4.6C19.1,2.1,17,0,14.5,0H4.6C2.1,0,0,2.1,0,4.6v12.3
|
|
1349
|
+
c0,0.4,0.2,0.7,0.6,0.9c0.1,0,0.2,0.1,0.3,0.1c0.2,0,0.5-0.1,0.7-0.3l2.1-2.2h1.2v1.5c0,2.5,2.1,4.6,4.6,4.6h10.7l2.1,2.2
|
|
1350
|
+
c0.2,0.2,0.4,0.3,0.7,0.3c0.1,0,0.2,0,0.3-0.1c0.3-0.1,0.6-0.5,0.6-0.9V10.8C24,8.2,21.9,6.2,19.4,6.2z M3.3,13.5
|
|
1351
|
+
c-0.2,0-0.5,0.1-0.7,0.3l-0.8,0.8v-10c0-1.5,1.2-2.8,2.8-2.8h9.8c1.5,0,2.8,1.2,2.8,2.8v6.2c0,1.5-1.2,2.8-2.8,2.8H3.3z M22.2,20.8
|
|
1352
|
+
L21.3,20c-0.2-0.2-0.4-0.3-0.7-0.3H9.5c-1.5,0-2.8-1.2-2.8-2.8v-1.5h7.7c2.5,0,4.6-2.1,4.6-4.6V8h0.3c1.5,0,2.8,1.2,2.8,2.8V20.8z"
|
|
1353
|
+
/>
|
|
1354
|
+
</g>
|
|
1355
|
+
</>
|
|
1356
|
+
),
|
|
1357
|
+
},
|
|
1358
|
+
iconFlash: {
|
|
1359
|
+
viewBox: '0 0 24 24',
|
|
1360
|
+
svg: (
|
|
1361
|
+
<>
|
|
1362
|
+
<path class="st0" d="M9.6,25c-0.2,0-0.4,0-0.6-0.1c-0.5-0.2-1.4-0.8-1.4-2.7v-7.7H4.9c-1.7,0-2.3-0.8-2.5-1.3
|
|
1363
|
+
C2.1,12.8,2,11.9,3,10.7l9.1-10.4c1.2-1.4,2.3-1.3,2.8-1.2c0.5,0.2,1.4,0.8,1.4,2.7v7.6H19c1.7,0,2.3,0.8,2.5,1.2
|
|
1364
|
+
c0.2,0.5,0.4,1.4-0.7,2.7l-9.1,10.4C10.9,24.7,10.1,25,9.6,25z M9.8,23.1L9.8,23.1L9.8,23.1z M4.2,12.4c0.1,0,0.3,0.1,0.7,0.1h3.7
|
|
1365
|
+
c0.6,0,1,0.4,1,1v8.7c0,0.4,0,0.6,0.1,0.7c0.1-0.1,0.3-0.2,0.6-0.5L19.4,12c0.2-0.3,0.3-0.5,0.3-0.5c-0.1,0-0.3-0.1-0.7-0.1h-3.7
|
|
1366
|
+
c-0.6,0-1-0.4-1-1V1.8c0-0.4,0-0.6-0.1-0.7c-0.1,0.1-0.3,0.2-0.6,0.5L4.5,12C4.4,12.2,4.3,12.4,4.2,12.4z"/>
|
|
1367
|
+
</>
|
|
1368
|
+
),
|
|
1369
|
+
},
|
|
1370
|
+
iconBuilding: {
|
|
1371
|
+
viewBox: '0 0 24 24',
|
|
1372
|
+
svg: (
|
|
1373
|
+
<>
|
|
1374
|
+
<g>
|
|
1375
|
+
<g>
|
|
1376
|
+
<path d="M23,24H10.5c-0.6,0-1-0.4-1-1v-3.4H7.1V23c0,0.6-0.4,1-1,1H1c-0.6,0-1-0.4-1-1V1.7C0,0.8,0.8,0,1.7,0h13.2
|
|
1377
|
+
c1,0,1.7,0.8,1.7,1.7v19.1c0,0.6-0.4,1-1,1s-1-0.4-1-1V2H2v20h3.1v-3.4c0-0.6,0.4-1,1-1h4.4c0.6,0,1,0.4,1,1V22H22V6.4h-4.1
|
|
1378
|
+
c-0.6,0-1-0.4-1-1s0.4-1,1-1h4.4c1.1,0,1.7,0.9,1.7,1.7V23C24,23.6,23.6,24,23,24z M19.3,15.9c-0.6,0-1-0.4-1-1v-1.5
|
|
1379
|
+
c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C20.3,15.5,19.9,15.9,19.3,15.9z M12,15.9c-0.6,0-1-0.4-1-1v-1.5c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1
|
|
1380
|
+
v1.5C13,15.5,12.6,15.9,12,15.9z M8.3,15.9c-0.6,0-1-0.4-1-1v-1.5c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C9.3,15.5,8.9,15.9,8.3,15.9z
|
|
1381
|
+
M4.7,15.9c-0.6,0-1-0.4-1-1v-1.5c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C5.7,15.5,5.2,15.9,4.7,15.9z M19.3,11.5c-0.6,0-1-0.4-1-1V9.1
|
|
1382
|
+
c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C20.3,11.1,19.9,11.5,19.3,11.5z M12,11.5c-0.6,0-1-0.4-1-1V9.1c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1
|
|
1383
|
+
v1.5C13,11.1,12.6,11.5,12,11.5z M8.3,11.5c-0.6,0-1-0.4-1-1V9.1c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C9.3,11.1,8.9,11.5,8.3,11.5z
|
|
1384
|
+
M4.7,11.5c-0.6,0-1-0.4-1-1V9.1c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C5.7,11.1,5.2,11.5,4.7,11.5z M12,7.1c-0.6,0-1-0.4-1-1V4.7
|
|
1385
|
+
c0-0.6,0.4-1,1-1c0.6,0,1,0.4,1,1v1.5C13,6.7,12.6,7.1,12,7.1z M8.3,7.1c-0.6,0-1-0.4-1-1V4.7c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5
|
|
1386
|
+
C9.3,6.7,8.9,7.1,8.3,7.1z M4.7,7.1c-0.6,0-1-0.4-1-1V4.7c0-0.6,0.4-1,1-1s1,0.4,1,1v1.5C5.7,6.7,5.2,7.1,4.7,7.1z"/>
|
|
1387
|
+
</g>
|
|
1388
|
+
</g>
|
|
1389
|
+
</>
|
|
1390
|
+
),
|
|
1391
|
+
},
|
|
1074
1392
|
}
|
|
1075
1393
|
|
|
1076
1394
|
|
|
1077
1395
|
export const options = {
|
|
1078
|
-
sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
|
|
1396
|
+
sizes: ['xs', 'sm', 'md', 'lg', 'xl', 'xl2'],
|
|
1079
1397
|
names: Object.keys(iconsMap),
|
|
1080
1398
|
colors: ['base', 'highlight', 'muted', 'primary', 'inverted', 'error', 'success'],
|
|
1081
1399
|
backgrounds: [
|
package/atoms/Icon/helpers.js
CHANGED
package/atoms/Input/Input.js
CHANGED
|
@@ -50,6 +50,7 @@ export const Input = ({
|
|
|
50
50
|
onClickModal,
|
|
51
51
|
formikForm,
|
|
52
52
|
inputExtra,
|
|
53
|
+
cleanSelected,
|
|
53
54
|
}) => {
|
|
54
55
|
|
|
55
56
|
const onClickDeleteInput = (results, id) => {
|
|
@@ -63,6 +64,10 @@ export const Input = ({
|
|
|
63
64
|
inputExtra([])
|
|
64
65
|
}
|
|
65
66
|
|
|
67
|
+
if (cleanSelected) {
|
|
68
|
+
cleanSelected()
|
|
69
|
+
}
|
|
70
|
+
|
|
66
71
|
}
|
|
67
72
|
|
|
68
73
|
const pulsar = (e, id) => {
|
|
@@ -164,15 +169,13 @@ export const Input = ({
|
|
|
164
169
|
: isOpenModal
|
|
165
170
|
|
|
166
171
|
?
|
|
167
|
-
<div className={getStyles('DynamicSelect_dynamic-select__oduOS')}>
|
|
172
|
+
<div style={{ pointerEvents: disabled ? 'none' : 'all' }} id="onClickModalDynamicSelect_dynamic" className={getStyles('DynamicSelect_dynamic-select__oduOS')}>
|
|
168
173
|
<div className={getStyles('css-1mfv3n-container')}>
|
|
169
|
-
<div style={{ zIndex: 1 }} className={getStyles('css-mlo5or-control')}>
|
|
174
|
+
<div style={{ zIndex: 1, background: disabled ? '#eeeeee' : 'hsl(0, 0%, 100%)' }} className={getStyles('css-mlo5or-control')}>
|
|
170
175
|
<div onClick={(op) => onClickModal(op, id)} style={{ height: '36px' }} className={getStyles('css-1huup54-ValueContainer')}>
|
|
171
176
|
<div className={getStyles('css-qc6sy-singleValue')}>{value}</div>
|
|
172
177
|
</div>
|
|
173
178
|
<div className={getStyles('css-1hb7zxy-IndicatorsContainer')}>
|
|
174
|
-
|
|
175
|
-
|
|
176
179
|
{value !== '' ? <div onClick={(op) => onClickDeleteInput(op, id)} className={getStyles('css-tlfecz-indicatorContainer')} aria-hidden="true">
|
|
177
180
|
<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" className={getStyles('css-tj5bde-Svg')} >
|
|
178
181
|
<path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
z-index: 1;
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
}
|
|
13
|
-
|
|
13
|
+
|
|
14
|
+
.toggle-item+.checkbox-custom-label {
|
|
14
15
|
display: flex;
|
|
15
16
|
width: 4em;
|
|
16
17
|
height: 2em;
|
|
@@ -21,7 +22,8 @@
|
|
|
21
22
|
cursor: pointer;
|
|
22
23
|
box-shadow: inset 0 0 5px #222;
|
|
23
24
|
}
|
|
24
|
-
|
|
25
|
+
|
|
26
|
+
.toggle-item+.checkbox-custom-label:after {
|
|
25
27
|
content: '';
|
|
26
28
|
position: absolute;
|
|
27
29
|
width: 1.5em;
|
|
@@ -32,10 +34,17 @@
|
|
|
32
34
|
left: .25em;
|
|
33
35
|
transition: all .2s ease;
|
|
34
36
|
}
|
|
35
|
-
|
|
37
|
+
|
|
38
|
+
.toggle-item:checked+.checkbox-custom-label {
|
|
36
39
|
background: var(--color-tertiary);
|
|
37
40
|
box-shadow: inset 0 0 5px rgb(95, 95, 95);
|
|
38
41
|
}
|
|
39
|
-
|
|
42
|
+
|
|
43
|
+
.toggle-item:checked+.checkbox-custom-label:after {
|
|
40
44
|
left: 2.3em;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.toggle-item:disabled+.checkbox-custom-label {
|
|
48
|
+
background: #dedede;
|
|
49
|
+
cursor: no-drop;
|
|
41
50
|
}
|
package/hook/useStateDate.js
CHANGED
|
@@ -1,22 +1,27 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react'
|
|
2
2
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
addDays,
|
|
4
|
+
startOfMonth,
|
|
5
|
+
endOfDay,
|
|
6
|
+
} from "date-fns";
|
|
5
7
|
|
|
6
|
-
const useStateDate = () => {
|
|
8
|
+
const useStateDate = (rangeDefault) => {
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
const [state, setState] = useState([
|
|
11
|
+
{
|
|
12
|
+
startDate: rangeDefault === 'quarter' ? addDays(new Date(), -59) : startOfMonth(new Date()),
|
|
13
|
+
endDate: endOfDay(new Date()),
|
|
14
|
+
key: 'selection',
|
|
15
|
+
}
|
|
16
|
+
])
|
|
15
17
|
|
|
18
|
+
// startDate: startOfMonth(new Date()),
|
|
19
|
+
// endDate: endOfDay(new Date())
|
|
16
20
|
|
|
17
|
-
useEffect(() => {
|
|
18
21
|
|
|
19
|
-
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
|
|
24
|
+
}, [state]);
|
|
20
25
|
|
|
21
26
|
|
|
22
27
|
return { state, setState }
|
|
@@ -71,6 +71,8 @@ export const DynamicTable = ({
|
|
|
71
71
|
titleHeadingTable,
|
|
72
72
|
titleHeadingTableSecundary,
|
|
73
73
|
handleChangeCheckboxDate,
|
|
74
|
+
isMultiSelectFilter,
|
|
75
|
+
dateRangeDefault,
|
|
74
76
|
}) => {
|
|
75
77
|
|
|
76
78
|
const [tableData, setTableData] = useState(optionsData)
|
|
@@ -95,7 +97,10 @@ export const DynamicTable = ({
|
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
useEffect(() => {
|
|
98
|
-
setColumnsData(opColumns)
|
|
100
|
+
setColumnsData(opColumns)
|
|
101
|
+
setFilterTableData(opFilterTable)
|
|
102
|
+
setAddColumsData(opAddColumns)
|
|
103
|
+
setFilterSecondaryTableData(opFilterSecondaryTable)
|
|
99
104
|
})
|
|
100
105
|
|
|
101
106
|
const handleSorting = (sortField, sortOrder) => {
|
|
@@ -210,8 +215,28 @@ export const DynamicTable = ({
|
|
|
210
215
|
|
|
211
216
|
<>
|
|
212
217
|
|
|
218
|
+
<div className={getStyles('opFunctionBox3')}>
|
|
219
|
+
|
|
220
|
+
<Button
|
|
221
|
+
type={typeBtnTertiary}
|
|
222
|
+
isInline={true}
|
|
223
|
+
onClick={handleBtnTertiary}
|
|
224
|
+
>
|
|
225
|
+
{titleBtnTertiary}
|
|
226
|
+
</Button>
|
|
227
|
+
|
|
228
|
+
</div>
|
|
229
|
+
|
|
213
230
|
<Horizontal size="sm" />
|
|
214
231
|
|
|
232
|
+
</>
|
|
233
|
+
) : null}
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
{isViewLeftBtnTertiary ? (
|
|
237
|
+
|
|
238
|
+
<>
|
|
239
|
+
|
|
215
240
|
<div className={getStyles('opFunctionBox3')}>
|
|
216
241
|
|
|
217
242
|
<Button
|
|
@@ -223,9 +248,13 @@ export const DynamicTable = ({
|
|
|
223
248
|
</Button>
|
|
224
249
|
|
|
225
250
|
</div>
|
|
251
|
+
|
|
252
|
+
<Horizontal size="sm" />
|
|
253
|
+
|
|
226
254
|
</>
|
|
227
255
|
) : null}
|
|
228
256
|
|
|
257
|
+
|
|
229
258
|
{isViewRange ? (
|
|
230
259
|
<div className={getStyles('opFunctionBox1')}>
|
|
231
260
|
<DatePicker
|
|
@@ -233,6 +262,7 @@ export const DynamicTable = ({
|
|
|
233
262
|
onChangeRange={handleSelectRange}
|
|
234
263
|
sinceDateRange={labelSinceDateRange}
|
|
235
264
|
tillDateRange={labelTillDateRange}
|
|
265
|
+
rangeDefault={dateRangeDefault}
|
|
236
266
|
/>
|
|
237
267
|
</div>
|
|
238
268
|
) : null}
|
|
@@ -290,6 +320,7 @@ export const DynamicTable = ({
|
|
|
290
320
|
closeMenuOnSelect={false}
|
|
291
321
|
isClearable={false}
|
|
292
322
|
instanceId={'idFilterTableAll'}
|
|
323
|
+
isMulti={isMultiSelectFilter}
|
|
293
324
|
// defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
|
|
294
325
|
/> : null
|
|
295
326
|
}
|
|
@@ -473,6 +504,8 @@ DynamicTable.propTypes = {
|
|
|
473
504
|
txtTootipFileDownload: PropTypes.string,
|
|
474
505
|
titleHeadingTable: PropTypes.string,
|
|
475
506
|
titleHeadingTableSecundary: PropTypes.string,
|
|
507
|
+
isMultiSelectFilter: PropTypes.bool,
|
|
508
|
+
dateRangeDefault: PropTypes.string,
|
|
476
509
|
}
|
|
477
510
|
|
|
478
511
|
DynamicTable.defaultProps = {
|
|
@@ -518,6 +551,8 @@ DynamicTable.defaultProps = {
|
|
|
518
551
|
txtTootipFileDownload: '',
|
|
519
552
|
titleHeadingTable: 'Total: 200',
|
|
520
553
|
titleHeadingTableSecundary: '',
|
|
554
|
+
isMultiSelectFilter: false,
|
|
555
|
+
dateRangeDefault: 'quarter',
|
|
521
556
|
}
|
|
522
557
|
|
|
523
558
|
export default withStyles(styles)(DynamicTable)
|
|
@@ -33,12 +33,12 @@ import {
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
|
|
36
|
-
export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange, disabledInputRange }) => {
|
|
36
|
+
export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange, disabledInputRange, rangeDefault }) => {
|
|
37
37
|
|
|
38
|
-
const [isShowCalendar, setShowCalendar] = useState(false)
|
|
38
|
+
const [isShowCalendar, setShowCalendar] = useState(false)
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
const { state, setState } = useStateDate()
|
|
41
|
+
const { state, setState } = useStateDate(rangeDefault)
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
// const [state, setState] = useState([
|
|
@@ -234,6 +234,7 @@ DatePicker.propTypes = {
|
|
|
234
234
|
sinceDateRange: PropTypes.string,
|
|
235
235
|
tillDateRange: PropTypes.string,
|
|
236
236
|
disabledInputRange: PropTypes.bool,
|
|
237
|
+
rangeDefault: PropTypes.string,
|
|
237
238
|
}
|
|
238
239
|
|
|
239
240
|
DatePicker.defaultProps = {
|
|
@@ -242,7 +243,8 @@ DatePicker.defaultProps = {
|
|
|
242
243
|
onChangeRange: () => { },
|
|
243
244
|
sinceDateRange: 'Desde',
|
|
244
245
|
tillDateRange: 'Hasta',
|
|
245
|
-
disabledInputRange: false
|
|
246
|
+
disabledInputRange: false,
|
|
247
|
+
rangeDefault: 'quarter'
|
|
246
248
|
}
|
|
247
249
|
|
|
248
250
|
export default withStyles(styles)(DatePicker)
|
|
@@ -70,16 +70,17 @@ export const DynamicSelect = ({
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
const customStyles = {
|
|
73
|
-
|
|
74
73
|
option: (base, state) => ({
|
|
75
74
|
...base,
|
|
76
75
|
cursor: 'pointer',
|
|
77
|
-
width:
|
|
78
|
-
minWidth:
|
|
76
|
+
width: 'max-content',
|
|
77
|
+
minWidth: '100%',
|
|
79
78
|
position: 'relative',
|
|
80
|
-
backgroundColor: state.isSelected
|
|
81
|
-
|
|
82
|
-
|
|
79
|
+
backgroundColor: state.isSelected
|
|
80
|
+
? 'var(--color-primary)'
|
|
81
|
+
: 'transparent',
|
|
82
|
+
'&:hover': {
|
|
83
|
+
backgroundColor: 'var(--color-primary-highlight)',
|
|
83
84
|
color: 'var(--color-primary)',
|
|
84
85
|
},
|
|
85
86
|
// "&:active": {
|
|
@@ -94,9 +95,11 @@ export const DynamicSelect = ({
|
|
|
94
95
|
borderRadius: 0,
|
|
95
96
|
border: 'var(--border-width-thin) solid var(--color-brand-white-lilac)',
|
|
96
97
|
// border: state.isFocused ? "var(--border-width-thin) solid var(--color-brand-white-lilac)" : "var(--border-width-thin) solid var(--color-brand-white-lilac)",
|
|
97
|
-
boxShadow: state.isFocused
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
boxShadow: state.isFocused
|
|
99
|
+
? '0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary)'
|
|
100
|
+
: 'none',
|
|
101
|
+
'&:hover': {
|
|
102
|
+
borderColor: 'var(--color-primary)',
|
|
100
103
|
},
|
|
101
104
|
}),
|
|
102
105
|
input: (base) => ({
|
|
@@ -116,51 +119,47 @@ export const DynamicSelect = ({
|
|
|
116
119
|
textOverflow: 'ellipsis',
|
|
117
120
|
}),
|
|
118
121
|
|
|
119
|
-
valueContainer: (base
|
|
122
|
+
valueContainer: (base) => ({
|
|
120
123
|
...base,
|
|
121
|
-
textOverflow:
|
|
122
|
-
whiteSpace:
|
|
123
|
-
overflow:
|
|
124
|
+
textOverflow: 'ellipsis',
|
|
125
|
+
whiteSpace: 'nowrap',
|
|
126
|
+
overflow: 'hidden',
|
|
124
127
|
// display: "inline-grid"
|
|
125
128
|
// maxHeight: "38px",
|
|
126
129
|
}),
|
|
127
130
|
|
|
128
|
-
|
|
131
|
+
singleValue: (base) => ({
|
|
129
132
|
...base,
|
|
130
|
-
|
|
131
|
-
minWidth: "100%",
|
|
133
|
+
overflow: 'visible',
|
|
132
134
|
}),
|
|
133
135
|
|
|
134
|
-
|
|
136
|
+
container: (base) => ({
|
|
135
137
|
...base,
|
|
136
|
-
width: "max-content",
|
|
137
|
-
minWidth:
|
|
138
|
+
// width: "max-content",
|
|
139
|
+
minWidth: '100%',
|
|
140
|
+
width: 'fit-content',
|
|
138
141
|
}),
|
|
139
142
|
|
|
140
|
-
|
|
143
|
+
menu: (base) => ({
|
|
141
144
|
...base,
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
// minWidth: "100%",
|
|
145
|
+
width: 'fit-content',
|
|
146
|
+
minWidth: '100%',
|
|
147
|
+
zIndex: 10000000000,
|
|
146
148
|
}),
|
|
147
149
|
|
|
148
|
-
|
|
150
|
+
menuPortal: (base) => ({
|
|
149
151
|
...base,
|
|
150
|
-
|
|
151
|
-
// width: "max-content",
|
|
152
|
-
// minWidth: "100%",
|
|
152
|
+
zIndex: 999999999999,
|
|
153
153
|
}),
|
|
154
154
|
|
|
155
|
-
// menu: styles => ({ ...styles,
|
|
155
|
+
// menu: styles => ({ ...styles,
|
|
156
156
|
// width: '500px'
|
|
157
|
-
// })
|
|
157
|
+
// })
|
|
158
158
|
|
|
159
159
|
// indicatorsContainer: (provided, state) => ({
|
|
160
160
|
// ...provided,
|
|
161
161
|
// height: '50px',
|
|
162
162
|
// }),
|
|
163
|
-
|
|
164
163
|
}
|
|
165
164
|
|
|
166
165
|
|
|
@@ -189,6 +188,7 @@ export const DynamicSelect = ({
|
|
|
189
188
|
defaultValue={defaultValue}
|
|
190
189
|
value={value}
|
|
191
190
|
onChange={onChange}
|
|
191
|
+
onBlur={onBlur}
|
|
192
192
|
components={{
|
|
193
193
|
MultiValue: SortableMultiValue,
|
|
194
194
|
MultiValueLabel: SortableMultiValueLabel
|
|
@@ -33,6 +33,7 @@ export const RowTable = ({
|
|
|
33
33
|
onClickActionClone,
|
|
34
34
|
onClickActionCheckbox,
|
|
35
35
|
txtTootipIconUserView,
|
|
36
|
+
onClickActionPlusCircle,
|
|
36
37
|
txtTootipIconFileDownload,
|
|
37
38
|
txtTootipIconListInvoice,
|
|
38
39
|
txtTootipIconListListXLS,
|
|
@@ -44,7 +45,8 @@ export const RowTable = ({
|
|
|
44
45
|
txtTootipIconLink,
|
|
45
46
|
txtTootipIconClone,
|
|
46
47
|
txtTootipIconCheckbox,
|
|
47
|
-
onClickCheckboxRow
|
|
48
|
+
onClickCheckboxRow,
|
|
49
|
+
txtTootipIconPlusCircle
|
|
48
50
|
}) => {
|
|
49
51
|
|
|
50
52
|
|
|
@@ -761,23 +763,24 @@ export const RowTable = ({
|
|
|
761
763
|
|
|
762
764
|
: null}
|
|
763
765
|
|
|
764
|
-
{itemTd.viewUserView ?
|
|
765
766
|
|
|
766
|
-
|
|
767
|
+
{itemTd.viewFileDownload ?
|
|
768
|
+
|
|
769
|
+
item.viewFileDownload === undefined ?
|
|
767
770
|
|
|
768
771
|
<>
|
|
769
772
|
<span
|
|
770
773
|
data-tip
|
|
771
|
-
data-for='
|
|
774
|
+
data-for='fileDownload'
|
|
772
775
|
onMouseEnter={handleMouseEnter}
|
|
773
776
|
onMouseLeave={handleMouseLeave}
|
|
774
777
|
>
|
|
775
778
|
<>
|
|
776
779
|
<Icon
|
|
777
|
-
id="
|
|
780
|
+
id="fileDownload"
|
|
778
781
|
background="base"
|
|
779
|
-
name="
|
|
780
|
-
onClick={(e) => {
|
|
782
|
+
name="fileDownload"
|
|
783
|
+
onClick={(e) => { onClickActionFileDownload(e, item) }}
|
|
781
784
|
/>
|
|
782
785
|
<Horizontal size="xs" />
|
|
783
786
|
</>
|
|
@@ -785,29 +788,29 @@ export const RowTable = ({
|
|
|
785
788
|
</span>
|
|
786
789
|
|
|
787
790
|
{isToolTipMounted ? (
|
|
788
|
-
<ReactTooltip id='
|
|
789
|
-
<span>{
|
|
791
|
+
<ReactTooltip id='fileDownload' type='error'>
|
|
792
|
+
<span>{txtTootipIconFileDownload}</span>
|
|
790
793
|
</ReactTooltip>
|
|
791
794
|
) : null}
|
|
792
795
|
</>
|
|
793
796
|
|
|
794
797
|
:
|
|
795
798
|
|
|
796
|
-
item.
|
|
799
|
+
item.viewFileDownload ?
|
|
797
800
|
|
|
798
801
|
<>
|
|
799
802
|
<span
|
|
800
803
|
data-tip
|
|
801
|
-
data-for='
|
|
804
|
+
data-for='fileDownload'
|
|
802
805
|
onMouseEnter={handleMouseEnter}
|
|
803
806
|
onMouseLeave={handleMouseLeave}
|
|
804
807
|
>
|
|
805
808
|
<>
|
|
806
809
|
<Icon
|
|
807
|
-
id="
|
|
810
|
+
id="fileDownload"
|
|
808
811
|
background="base"
|
|
809
|
-
name="
|
|
810
|
-
onClick={(e) => {
|
|
812
|
+
name="fileDownload"
|
|
813
|
+
onClick={(e) => { onClickActionFileDownload(e, item) }}
|
|
811
814
|
/>
|
|
812
815
|
<Horizontal size="xs" />
|
|
813
816
|
</>
|
|
@@ -815,8 +818,8 @@ export const RowTable = ({
|
|
|
815
818
|
</span>
|
|
816
819
|
|
|
817
820
|
{isToolTipMounted ? (
|
|
818
|
-
<ReactTooltip id='
|
|
819
|
-
<span>{
|
|
821
|
+
<ReactTooltip id='fileDownload' type='error'>
|
|
822
|
+
<span>{txtTootipIconFileDownload}</span>
|
|
820
823
|
</ReactTooltip>
|
|
821
824
|
) : null}
|
|
822
825
|
</>
|
|
@@ -826,23 +829,92 @@ export const RowTable = ({
|
|
|
826
829
|
: null}
|
|
827
830
|
|
|
828
831
|
|
|
829
|
-
{itemTd.viewFileDownload ?
|
|
830
832
|
|
|
831
|
-
|
|
833
|
+
|
|
834
|
+
{itemTd.viewCheckbox ?
|
|
835
|
+
|
|
836
|
+
item.viewCheckbox === undefined ?
|
|
832
837
|
|
|
833
838
|
<>
|
|
834
839
|
<span
|
|
835
840
|
data-tip
|
|
836
|
-
data-for='
|
|
841
|
+
data-for='checkbox'
|
|
842
|
+
onMouseEnter={handleMouseEnter}
|
|
843
|
+
onMouseLeave={handleMouseLeave}
|
|
844
|
+
>
|
|
845
|
+
<>
|
|
846
|
+
|
|
847
|
+
<Toggle
|
|
848
|
+
id={'idToggle' + item.id}
|
|
849
|
+
checked={item.isSelected}
|
|
850
|
+
label=""
|
|
851
|
+
onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
|
|
852
|
+
/>
|
|
853
|
+
|
|
854
|
+
{/* <Horizontal size="xs" /> */}
|
|
855
|
+
</>
|
|
856
|
+
|
|
857
|
+
</span>
|
|
858
|
+
|
|
859
|
+
{isToolTipMounted ? (
|
|
860
|
+
<ReactTooltip id='checkbox' type='error'>
|
|
861
|
+
<span>{txtTootipIconCheckbox}</span>
|
|
862
|
+
</ReactTooltip>
|
|
863
|
+
) : null}
|
|
864
|
+
</>
|
|
865
|
+
|
|
866
|
+
:
|
|
867
|
+
|
|
868
|
+
item.viewCheckbox ?
|
|
869
|
+
|
|
870
|
+
<>
|
|
871
|
+
<span
|
|
872
|
+
data-tip
|
|
873
|
+
data-for='checkbox'
|
|
874
|
+
onMouseEnter={handleMouseEnter}
|
|
875
|
+
onMouseLeave={handleMouseLeave}
|
|
876
|
+
>
|
|
877
|
+
<>
|
|
878
|
+
<Toggle
|
|
879
|
+
id={'idToggle' + item.id}
|
|
880
|
+
checked={item.isSelected}
|
|
881
|
+
label=""
|
|
882
|
+
onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
|
|
883
|
+
/>
|
|
884
|
+
|
|
885
|
+
{/* <Horizontal size="xs" /> */}
|
|
886
|
+
</>
|
|
887
|
+
|
|
888
|
+
</span>
|
|
889
|
+
|
|
890
|
+
{isToolTipMounted ? (
|
|
891
|
+
<ReactTooltip id='checkbox' type='error'>
|
|
892
|
+
<span>{txtTootipIconCheckbox}</span>
|
|
893
|
+
</ReactTooltip>
|
|
894
|
+
) : null}
|
|
895
|
+
</>
|
|
896
|
+
|
|
897
|
+
: null
|
|
898
|
+
|
|
899
|
+
: null}
|
|
900
|
+
|
|
901
|
+
{itemTd.viewUserView ?
|
|
902
|
+
|
|
903
|
+
item.viewUserView === undefined ?
|
|
904
|
+
|
|
905
|
+
<>
|
|
906
|
+
<span
|
|
907
|
+
data-tip
|
|
908
|
+
data-for='userView'
|
|
837
909
|
onMouseEnter={handleMouseEnter}
|
|
838
910
|
onMouseLeave={handleMouseLeave}
|
|
839
911
|
>
|
|
840
912
|
<>
|
|
841
913
|
<Icon
|
|
842
|
-
id="
|
|
914
|
+
id="userView"
|
|
843
915
|
background="base"
|
|
844
|
-
name="
|
|
845
|
-
onClick={(e) => {
|
|
916
|
+
name="userView"
|
|
917
|
+
onClick={(e) => { onClickActionUserView(e, item) }}
|
|
846
918
|
/>
|
|
847
919
|
<Horizontal size="xs" />
|
|
848
920
|
</>
|
|
@@ -850,29 +922,29 @@ export const RowTable = ({
|
|
|
850
922
|
</span>
|
|
851
923
|
|
|
852
924
|
{isToolTipMounted ? (
|
|
853
|
-
<ReactTooltip id='
|
|
854
|
-
<span>{
|
|
925
|
+
<ReactTooltip id='userView' type='error'>
|
|
926
|
+
<span>{txtTootipIconUserView}</span>
|
|
855
927
|
</ReactTooltip>
|
|
856
928
|
) : null}
|
|
857
929
|
</>
|
|
858
930
|
|
|
859
931
|
:
|
|
860
932
|
|
|
861
|
-
item.
|
|
933
|
+
item.viewUserView ?
|
|
862
934
|
|
|
863
935
|
<>
|
|
864
936
|
<span
|
|
865
937
|
data-tip
|
|
866
|
-
data-for='
|
|
938
|
+
data-for='userView'
|
|
867
939
|
onMouseEnter={handleMouseEnter}
|
|
868
940
|
onMouseLeave={handleMouseLeave}
|
|
869
941
|
>
|
|
870
942
|
<>
|
|
871
943
|
<Icon
|
|
872
|
-
id="
|
|
944
|
+
id="userView"
|
|
873
945
|
background="base"
|
|
874
|
-
name="
|
|
875
|
-
onClick={(e) => {
|
|
946
|
+
name="userView"
|
|
947
|
+
onClick={(e) => { onClickActionUserView(e, item) }}
|
|
876
948
|
/>
|
|
877
949
|
<Horizontal size="xs" />
|
|
878
950
|
</>
|
|
@@ -880,8 +952,8 @@ export const RowTable = ({
|
|
|
880
952
|
</span>
|
|
881
953
|
|
|
882
954
|
{isToolTipMounted ? (
|
|
883
|
-
<ReactTooltip id='
|
|
884
|
-
<span>{
|
|
955
|
+
<ReactTooltip id='userView' type='error'>
|
|
956
|
+
<span>{txtTootipIconUserView}</span>
|
|
885
957
|
</ReactTooltip>
|
|
886
958
|
) : null}
|
|
887
959
|
</>
|
|
@@ -891,67 +963,62 @@ export const RowTable = ({
|
|
|
891
963
|
: null}
|
|
892
964
|
|
|
893
965
|
|
|
966
|
+
{itemTd.viewPlusCircle ?
|
|
894
967
|
|
|
895
|
-
|
|
896
|
-
{itemTd.viewCheckbox ?
|
|
897
|
-
|
|
898
|
-
item.viewCheckbox === undefined ?
|
|
968
|
+
item.viewPlusCircle === undefined ?
|
|
899
969
|
|
|
900
970
|
<>
|
|
901
971
|
<span
|
|
902
972
|
data-tip
|
|
903
|
-
data-for='
|
|
973
|
+
data-for='plusCircle'
|
|
904
974
|
onMouseEnter={handleMouseEnter}
|
|
905
975
|
onMouseLeave={handleMouseLeave}
|
|
906
976
|
>
|
|
907
977
|
<>
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
|
|
978
|
+
<Icon
|
|
979
|
+
id="plusCircle"
|
|
980
|
+
background="base"
|
|
981
|
+
name="plusCircle"
|
|
982
|
+
onClick={(e) => { onClickActionPlusCircle(e, item) }}
|
|
914
983
|
/>
|
|
915
|
-
|
|
916
|
-
{/* <Horizontal size="xs" /> */}
|
|
984
|
+
<Horizontal size="xs" />
|
|
917
985
|
</>
|
|
918
986
|
|
|
919
987
|
</span>
|
|
920
988
|
|
|
921
989
|
{isToolTipMounted ? (
|
|
922
|
-
<ReactTooltip id='
|
|
923
|
-
<span>{
|
|
990
|
+
<ReactTooltip id='plusCircle' type='error'>
|
|
991
|
+
<span>{txtTootipIconPlusCircle}</span>
|
|
924
992
|
</ReactTooltip>
|
|
925
993
|
) : null}
|
|
926
994
|
</>
|
|
927
995
|
|
|
928
996
|
:
|
|
929
997
|
|
|
930
|
-
item.
|
|
998
|
+
item.viewPlusCircle ?
|
|
931
999
|
|
|
932
1000
|
<>
|
|
933
1001
|
<span
|
|
934
1002
|
data-tip
|
|
935
|
-
data-for='
|
|
1003
|
+
data-for='plusCircle'
|
|
936
1004
|
onMouseEnter={handleMouseEnter}
|
|
937
1005
|
onMouseLeave={handleMouseLeave}
|
|
938
1006
|
>
|
|
939
1007
|
<>
|
|
940
|
-
<
|
|
941
|
-
id=
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
1008
|
+
<Icon
|
|
1009
|
+
id="plusCircle"
|
|
1010
|
+
background="base"
|
|
1011
|
+
name="plusCircle"
|
|
1012
|
+
onClick={(e) => { onClickActionPlusCircle(e, item) }}
|
|
945
1013
|
/>
|
|
946
|
-
|
|
947
|
-
{/* <Horizontal size="xs" /> */}
|
|
1014
|
+
<Horizontal size="xs" />
|
|
948
1015
|
</>
|
|
949
1016
|
|
|
950
1017
|
</span>
|
|
951
1018
|
|
|
952
1019
|
{isToolTipMounted ? (
|
|
953
|
-
<ReactTooltip id='
|
|
954
|
-
<span>{
|
|
1020
|
+
<ReactTooltip id='plusCircle' type='error'>
|
|
1021
|
+
<span>{txtTootipIconPlusCircle}</span>
|
|
955
1022
|
</ReactTooltip>
|
|
956
1023
|
) : null}
|
|
957
1024
|
</>
|
|
@@ -961,6 +1028,7 @@ export const RowTable = ({
|
|
|
961
1028
|
: null}
|
|
962
1029
|
|
|
963
1030
|
|
|
1031
|
+
|
|
964
1032
|
{itemTd.viewTrash ?
|
|
965
1033
|
|
|
966
1034
|
item.viewTrash === undefined ?
|
|
@@ -1172,6 +1240,7 @@ RowTable.propTypes = {
|
|
|
1172
1240
|
onClickActionLink: PropTypes.func,
|
|
1173
1241
|
onClickActionClone: PropTypes.func,
|
|
1174
1242
|
onClickActionCheckbox: PropTypes.func,
|
|
1243
|
+
onClickActionPlusCircle: PropTypes.func,
|
|
1175
1244
|
txtTootipIconUserView: PropTypes.string,
|
|
1176
1245
|
txtTootipIconListInvoice: PropTypes.string,
|
|
1177
1246
|
txtTootipIconListListXLS: PropTypes.string,
|
|
@@ -1183,6 +1252,7 @@ RowTable.propTypes = {
|
|
|
1183
1252
|
txtTootipIconLink: PropTypes.string,
|
|
1184
1253
|
txtTootipIconClone: PropTypes.string,
|
|
1185
1254
|
txtTootipIconCheckbox: PropTypes.string,
|
|
1255
|
+
txtTootipIconPlusCircle: PropTypes.string,
|
|
1186
1256
|
colorRow: PropTypes.string,
|
|
1187
1257
|
isCheckedCheckbox: PropTypes.bool
|
|
1188
1258
|
}
|
|
@@ -1203,6 +1273,7 @@ RowTable.defaultProps = {
|
|
|
1203
1273
|
onClickActionLink: () => { },
|
|
1204
1274
|
onClickActionClone: () => { },
|
|
1205
1275
|
onClickActionCheckbox: () => { },
|
|
1276
|
+
onClickActionPlusCircle: () => { },
|
|
1206
1277
|
txtTootipIconUserView: '',
|
|
1207
1278
|
txtTootipIconListInvoice: '',
|
|
1208
1279
|
txtTootipIconListListXLS: '',
|
|
@@ -1214,7 +1285,7 @@ RowTable.defaultProps = {
|
|
|
1214
1285
|
txtTootipIconLink: '',
|
|
1215
1286
|
txtTootipIconClone: '',
|
|
1216
1287
|
txtTootipIconCheckbox: '',
|
|
1217
|
-
|
|
1288
|
+
txtTootipIconPlusCircle: '',
|
|
1218
1289
|
isCheckedCheckbox: false
|
|
1219
1290
|
|
|
1220
1291
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "imbric-theme",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Components library IMBRIC",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "index.js",
|
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
"license": "MIT",
|
|
52
52
|
"dependencies": {
|
|
53
53
|
"classnames": "2.3.1",
|
|
54
|
+
"country-flag-emoji-polyfill": "0.1.8",
|
|
54
55
|
"formik": "2.2.9",
|
|
55
56
|
"moment": "2.29.3",
|
|
56
57
|
"moment-timezone": "0.5.34",
|