imbric-theme 1.0.8 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. package/.nvmrc +1 -1
  2. package/atoms/Icon/Icon.js +49 -16
  3. package/atoms/Icon/Icon.module.css +5 -0
  4. package/atoms/Icon/constants.js +322 -4
  5. package/atoms/Icon/helpers.js +1 -0
  6. package/atoms/Input/Input.js +7 -4
  7. package/atoms/Input/Input.module.css +1 -1
  8. package/atoms/Toggle/Toggle.module.css +13 -4
  9. package/hook/useStateDate.js +17 -12
  10. package/layout/DynamicTable/DynamicTable.js +36 -1
  11. package/molecules/DatePicker/DatePicker.js +6 -4
  12. package/molecules/DynamicSelect/DynamicSelect.js +31 -31
  13. package/molecules/RowTable/RowTable.js +129 -58
  14. package/molecules/RowTable/RowTable.module.css +1 -0
  15. package/package.json +2 -1
  16. package/styles/globals.css +1 -1
package/.nvmrc CHANGED
@@ -1 +1 @@
1
- v15
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
- <div
27
- id={id}
28
- className={getStyles(className, 'icon', ['color', 'size', 'background'], {
29
- 'is-clickable': isClickable || !!onClick,
30
- })}
31
- style={{ width: mappedSize, height: mappedSize }}
32
- onClick={onClick && handleClick({ onClick })}
33
- >
34
- <svg
35
- viewBox={icon.viewBox}
36
- xmlns="http://www.w3.org/2000/svg"
37
- width={mappedSize}
38
- height={mappedSize}
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
- {icon.svg}
41
- </svg>
42
- </div>
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/Icon.module.css CHANGED
@@ -140,3 +140,8 @@
140
140
  .is-clickable {
141
141
  cursor: pointer;
142
142
  }
143
+
144
+ .is-disabled {
145
+ cursor: no-drop;
146
+ fill: #e8e8e8;
147
+ }
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
@@ -4,6 +4,7 @@ const iconSize = {
4
4
  md: 35,
5
5
  lg: 50,
6
6
  xl: 70,
7
+ xl2: 80,
7
8
  }
8
9
 
9
10
  export const mapSize = (size) => iconSize[size]
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>
package/atoms/Input/Input.module.css CHANGED
@@ -83,6 +83,6 @@
83
83
  }
84
84
 
85
85
  .is-date {
86
- width: 85px;
86
+ width: 100px;
87
87
  padding: 10px 6px;
88
88
  }
package/atoms/Toggle/Toggle.module.css CHANGED
@@ -10,7 +10,8 @@
10
10
  z-index: 1;
11
11
  cursor: pointer;
12
12
  }
13
- .toggle-item + .checkbox-custom-label {
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
- .toggle-item + .checkbox-custom-label:after {
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
- .toggle-item:checked + .checkbox-custom-label {
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
- .toggle-item:checked + .checkbox-custom-label:after {
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
- addDays,
4
- } from "date-fns";
3
+ addDays,
4
+ startOfMonth,
5
+ endOfDay,
6
+ } from "date-fns";
5
7
 
6
- const useStateDate = () => {
8
+ const useStateDate = (rangeDefault) => {
7
9
 
8
- const [state, setState] = useState([
9
- {
10
- startDate: addDays(new Date(), -59),
11
- endDate: new Date(),
12
- key: 'selection',
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
- }, [state]);
22
+ useEffect(() => {
23
+
24
+ }, [state]);
20
25
 
21
26
 
22
27
  return { state, setState }
package/layout/DynamicTable/DynamicTable.js CHANGED
@@ -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)
package/molecules/DatePicker/DatePicker.js CHANGED
@@ -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)
package/molecules/DynamicSelect/DynamicSelect.js CHANGED
@@ -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: "max-content",
78
- minWidth: "100%",
76
+ width: 'max-content',
77
+ minWidth: '100%',
79
78
  position: 'relative',
80
- backgroundColor: state.isSelected ? 'var(--color-primary)' : 'transparent',
81
- "&:hover": {
82
- backgroundColor: "var(--color-primary-highlight)",
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 ? "0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary)" : "none",
98
- "&:hover": {
99
- borderColor: "var(--color-primary)"
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, state) => ({
122
+ valueContainer: (base) => ({
120
123
  ...base,
121
- textOverflow: "ellipsis",
122
- whiteSpace: "nowrap",
123
- overflow: "hidden",
124
+ textOverflow: 'ellipsis',
125
+ whiteSpace: 'nowrap',
126
+ overflow: 'hidden',
124
127
  // display: "inline-grid"
125
128
  // maxHeight: "38px",
126
129
  }),
127
130
 
128
- container: (base) => ({
131
+ singleValue: (base) => ({
129
132
  ...base,
130
- // width: "max-content",
131
- minWidth: "100%",
133
+ overflow: 'visible',
132
134
  }),
133
135
 
134
- menu: (base) => ({
136
+ container: (base) => ({
135
137
  ...base,
136
- width: "max-content",
137
- minWidth: "100%",
138
+ // width: "max-content",
139
+ minWidth: '100%',
140
+ width: 'fit-content',
138
141
  }),
139
142
 
140
- multiValue: (base) => ({
143
+ menu: (base) => ({
141
144
  ...base,
142
- color: "hsl(0deg 100% 50%)",
143
- zIndex: "40",
144
- // width: "max-content",
145
- // minWidth: "100%",
145
+ width: 'fit-content',
146
+ minWidth: '100%',
147
+ zIndex: 10000000000,
146
148
  }),
147
149
 
148
- MultiValueGeneric: (base) => ({
150
+ menuPortal: (base) => ({
149
151
  ...base,
150
- color: "hsl(0deg 100% 50%)",
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
package/molecules/RowTable/RowTable.js CHANGED
@@ -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
- item.viewUserView === undefined ?
767
+ {itemTd.viewFileDownload ?
768
+
769
+ item.viewFileDownload === undefined ?
767
770
 
768
771
  <>
769
772
  <span
770
773
  data-tip
771
- data-for='userView'
774
+ data-for='fileDownload'
772
775
  onMouseEnter={handleMouseEnter}
773
776
  onMouseLeave={handleMouseLeave}
774
777
  >
775
778
  <>
776
779
  <Icon
777
- id="userView"
780
+ id="fileDownload"
778
781
  background="base"
779
- name="userView"
780
- onClick={(e) => { onClickActionUserView(e, item) }}
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='userView' type='error'>
789
- <span>{txtTootipIconUserView}</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.viewUserView ?
799
+ item.viewFileDownload ?
797
800
 
798
801
  <>
799
802
  <span
800
803
  data-tip
801
- data-for='userView'
804
+ data-for='fileDownload'
802
805
  onMouseEnter={handleMouseEnter}
803
806
  onMouseLeave={handleMouseLeave}
804
807
  >
805
808
  <>
806
809
  <Icon
807
- id="userView"
810
+ id="fileDownload"
808
811
  background="base"
809
- name="userView"
810
- onClick={(e) => { onClickActionUserView(e, item) }}
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='userView' type='error'>
819
- <span>{txtTootipIconUserView}</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
- item.viewFileDownload === undefined ?
833
+
834
+ {itemTd.viewCheckbox ?
835
+
836
+ item.viewCheckbox === undefined ?
832
837
 
833
838
  <>
834
839
  <span
835
840
  data-tip
836
- data-for='fileDownload'
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="fileDownload"
914
+ id="userView"
843
915
  background="base"
844
- name="fileDownload"
845
- onClick={(e) => { onClickActionFileDownload(e, item) }}
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='fileDownload' type='error'>
854
- <span>{txtTootipIconFileDownload}</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.viewFileDownload ?
933
+ item.viewUserView ?
862
934
 
863
935
  <>
864
936
  <span
865
937
  data-tip
866
- data-for='fileDownload'
938
+ data-for='userView'
867
939
  onMouseEnter={handleMouseEnter}
868
940
  onMouseLeave={handleMouseLeave}
869
941
  >
870
942
  <>
871
943
  <Icon
872
- id="fileDownload"
944
+ id="userView"
873
945
  background="base"
874
- name="fileDownload"
875
- onClick={(e) => { onClickActionFileDownload(e, item) }}
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='fileDownload' type='error'>
884
- <span>{txtTootipIconFileDownload}</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='checkbox'
973
+ data-for='plusCircle'
904
974
  onMouseEnter={handleMouseEnter}
905
975
  onMouseLeave={handleMouseLeave}
906
976
  >
907
977
  <>
908
-
909
- <Toggle
910
- id={'idToggle' + item.id}
911
- checked={item.isSelected}
912
- label=""
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='checkbox' type='error'>
923
- <span>{txtTootipIconCheckbox}</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.viewCheckbox ?
998
+ item.viewPlusCircle ?
931
999
 
932
1000
  <>
933
1001
  <span
934
1002
  data-tip
935
- data-for='checkbox'
1003
+ data-for='plusCircle'
936
1004
  onMouseEnter={handleMouseEnter}
937
1005
  onMouseLeave={handleMouseLeave}
938
1006
  >
939
1007
  <>
940
- <Toggle
941
- id={'idToggle' + item.id}
942
- checked={item.isSelected}
943
- label=""
944
- onChangeCheckbox={(e) => { onClickActionCheckbox(e, item) }}
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='checkbox' type='error'>
954
- <span>{txtTootipIconCheckbox}</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/molecules/RowTable/RowTable.module.css CHANGED
@@ -44,6 +44,7 @@
44
44
  text-align: right;
45
45
  inline-size: max-content;
46
46
  display: inline-flex;
47
+ float: inline-end;
47
48
  /* width: max-content;
48
49
  inline-size: max-content;
49
50
  height: max-content;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imbric-theme",
3
- "version": "1.0.8",
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",
package/styles/globals.css CHANGED
@@ -1,7 +1,7 @@
1
1
  html,
2
2
  body {
3
3
  height: 100%;
4
- font-family: var(--font-family-sans);
4
+ font-family: "Twemoji Country Flags", var(--font-family-sans);
5
5
  font-size: var(--font-size-base);
6
6
  }
7
7