@scaleflex/widget-pixaforge 4.4.0 → 4.5.1
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/CHANGELOG.md +16 -0
- package/dist/style.css +317 -0
- package/dist/style.min.css +1 -0
- package/lib/api.service.js +93 -0
- package/lib/common.slice.js +77 -0
- package/lib/components/CategoriesCards/CategoryCard.js +33 -0
- package/lib/components/CategoriesCards/index.js +48 -0
- package/lib/components/CustomizeIcons/ColorCustomization.js +159 -0
- package/lib/components/CustomizeIcons/index.js +105 -0
- package/lib/components/GalleryViewsOptionsMenu.js +97 -0
- package/lib/components/IconsGallery/SingleIcon.js +49 -0
- package/lib/components/IconsGallery/index.js +153 -0
- package/lib/components/ImagesGallery/ImageCell.js +59 -0
- package/lib/components/ImagesGallery/LandscapesContainer.js +28 -0
- package/lib/components/ImagesGallery/PortraitsColumns.js +72 -0
- package/lib/components/ImagesGallery/index.js +183 -0
- package/lib/components/MainView.js +102 -0
- package/lib/components/TagsAndFoundLabel/TagItem.js +23 -0
- package/lib/components/TagsAndFoundLabel/index.js +72 -0
- package/lib/components/TopBar.js +113 -0
- package/lib/constants.js +19 -0
- package/lib/defaultLocale.js +22 -0
- package/lib/index.js +327 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.5.1](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.5.0...v4.5.1) (2025-10-14)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @scaleflex/widget-pixaforge
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [4.5.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.4.0...v4.5.0) (2025-10-08)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @scaleflex/widget-pixaforge
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
# [4.4.0](https://code.scaleflex.cloud/scaleflex/widget/compare/v4.1.0...v4.4.0) (2025-10-07)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @scaleflex/widget-pixaforge
|
package/dist/style.css
ADDED
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
|
|
2
|
+
.filerobot-Pixaforge-MainView {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
height: 100%;
|
|
6
|
+
}
|
|
7
|
+
.filerobot-Pixaforge-MainView img {
|
|
8
|
+
-webkit-user-select: none;
|
|
9
|
+
-moz-user-select: none;
|
|
10
|
+
user-select: none;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.filerobot-Pixaforge-TopBar {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
padding: 12px;
|
|
17
|
+
background: #F8FAFB;
|
|
18
|
+
border-bottom: 1px solid #eaeaea;
|
|
19
|
+
}
|
|
20
|
+
.filerobot-Pixaforge-TopBar > div:nth-child(2) {
|
|
21
|
+
min-width: calc(100% - 128px);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.filerobot-Pixaforge-TopBar-gallerySelect {
|
|
25
|
+
max-width: 128px;
|
|
26
|
+
margin-right: 8px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.filerobot-Pixaforge-TopBar-galleryOption {
|
|
30
|
+
display: flex;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.filerobot-Pixaforge-Topbar-galleryIcon {
|
|
34
|
+
width: 16px;
|
|
35
|
+
height: 16px;
|
|
36
|
+
margin-right: 8px;
|
|
37
|
+
color: #5D6D7E;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.filerobot-Pixaforge-overlay {
|
|
41
|
+
position: absolute;
|
|
42
|
+
top: 4px;
|
|
43
|
+
bottom: 4px;
|
|
44
|
+
left: 4px;
|
|
45
|
+
right: 4px;
|
|
46
|
+
display: none;
|
|
47
|
+
z-index: 100;
|
|
48
|
+
}
|
|
49
|
+
.filerobot-Pixaforge-overlay * {
|
|
50
|
+
color: #fff;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.filerobot-Pixaforge-Categories {
|
|
54
|
+
display: grid;
|
|
55
|
+
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
56
|
+
padding: 8px 8px 4px;
|
|
57
|
+
overflow: auto;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.filerobot-Pixaforge-CategoryCard {
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
padding: 4px 4px 8px;
|
|
63
|
+
width: 100%;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.filerobot-Pixaforge-CategoryCard-image {
|
|
67
|
+
width: 100%;
|
|
68
|
+
height: 120px;
|
|
69
|
+
}
|
|
70
|
+
.filerobot-Pixaforge-CategoryCard-image img {
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: 100%;
|
|
73
|
+
border-radius: 2px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.filerobot-Pixaforge-CategoryCard-label {
|
|
77
|
+
margin: 4px 0 2px;
|
|
78
|
+
font-size: 12px;
|
|
79
|
+
line-height: 14px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.filerobot-Pixaforge-TagsAndFoundLabel {
|
|
83
|
+
margin: 12px 12px 4px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.filerobot-Pixaforge-TagsAndFoundLabel-foundLabel {
|
|
87
|
+
display: inline-block;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.filerobot-Pixaforge-TagsAndFoundLabel-tags {
|
|
91
|
+
margin-left: 6px;
|
|
92
|
+
margin-right: 4px;
|
|
93
|
+
display: inline;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.filerobot-Pixaforge-TagItem {
|
|
97
|
+
margin: 2px;
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
}
|
|
100
|
+
.filerobot-Pixaforge-TagItem span {
|
|
101
|
+
border: 1px solid #92A6BC !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.filerobot-Pixaforge-TagsAndFoundLabel-showMoreLabel {
|
|
105
|
+
display: inline-flex;
|
|
106
|
+
margin-left: 8px;
|
|
107
|
+
margin-top: 2px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@keyframes imgPlaceholderSkeleton {
|
|
111
|
+
0% {
|
|
112
|
+
background-position: -468px 0;
|
|
113
|
+
}
|
|
114
|
+
100% {
|
|
115
|
+
background-position: 468px 0;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
.filerobot-Pixaforge-ImagesGallery {
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: column;
|
|
121
|
+
overflow: auto;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.filerobot-Pixaforge-ImagesGallery-imagesWrapper {
|
|
125
|
+
display: flex;
|
|
126
|
+
padding: 8px 8px 4px;
|
|
127
|
+
overflow: auto;
|
|
128
|
+
height: 100%;
|
|
129
|
+
width: 100%;
|
|
130
|
+
}
|
|
131
|
+
.filerobot-Pixaforge-ImagesGallery-imagesWrapper .filerobot-c-empty {
|
|
132
|
+
justify-content: center;
|
|
133
|
+
align-items: center;
|
|
134
|
+
gap: 16px;
|
|
135
|
+
font-size: 16px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.filerobot-Pixaforge-PortraitsColumn {
|
|
139
|
+
margin: 0 4px;
|
|
140
|
+
flex-grow: 1;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.filerobot-Pixaforge-ImageCell {
|
|
144
|
+
margin-bottom: 8px;
|
|
145
|
+
position: relative;
|
|
146
|
+
cursor: pointer;
|
|
147
|
+
}
|
|
148
|
+
.filerobot-Pixaforge-ImageCell.filerobot-Pixaforge-ImageCell--selected .filerobot-Pixaforge-overlay, .filerobot-Pixaforge-ImageCell:hover .filerobot-Pixaforge-overlay {
|
|
149
|
+
display: block;
|
|
150
|
+
}
|
|
151
|
+
.filerobot-Pixaforge-ImageCell.filerobot-Pixaforge-ImageCell--selected img, .filerobot-Pixaforge-ImageCell:hover img {
|
|
152
|
+
filter: brightness(0.8);
|
|
153
|
+
}
|
|
154
|
+
.filerobot-Pixaforge-ImageCell:hover .filerobot-Pixaforge-ImageCell-imageInfo {
|
|
155
|
+
display: block;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.filerobot-Pixaforge-ImageCell-imageWrapper {
|
|
159
|
+
width: 100%;
|
|
160
|
+
height: 100%;
|
|
161
|
+
animation-duration: 1s;
|
|
162
|
+
animation-fill-mode: forwards;
|
|
163
|
+
animation-iteration-count: infinite;
|
|
164
|
+
animation-name: imgPlaceholderSkeleton;
|
|
165
|
+
animation-timing-function: linear;
|
|
166
|
+
background: #F8FAFB;
|
|
167
|
+
background-image: linear-gradient(to right, #F8FAFB 0%, #f1f3f6 30%, #F8FAFB 90%, #F8FAFB 100%);
|
|
168
|
+
background-repeat: no-repeat;
|
|
169
|
+
}
|
|
170
|
+
.filerobot-Pixaforge-ImageCell-imageWrapper img {
|
|
171
|
+
border-radius: 2px;
|
|
172
|
+
max-width: 100%;
|
|
173
|
+
filter: drop-shadow(0px 1px 2px rgba(78, 77, 77, 0.15));
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.filerobot-Pixaforge-ImageCell-imageInfo {
|
|
177
|
+
display: none;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.filerobot-Pixaforge-ImageCell-authorAndTitle {
|
|
181
|
+
text-align: right;
|
|
182
|
+
position: absolute;
|
|
183
|
+
width: 80%;
|
|
184
|
+
top: 0;
|
|
185
|
+
right: 0;
|
|
186
|
+
}
|
|
187
|
+
.filerobot-Pixaforge-ImageCell-authorAndTitle div {
|
|
188
|
+
font-size: 10px;
|
|
189
|
+
line-height: 12px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.filerobot-Pixaforge-ImageCell-author {
|
|
193
|
+
font-weight: 700;
|
|
194
|
+
margin-bottom: 4px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.filerobot-Pixaforge-ImageCell-imageMeta {
|
|
198
|
+
display: flex;
|
|
199
|
+
align-items: center;
|
|
200
|
+
justify-content: space-between;
|
|
201
|
+
position: absolute;
|
|
202
|
+
width: 100%;
|
|
203
|
+
bottom: 0;
|
|
204
|
+
}
|
|
205
|
+
.filerobot-Pixaforge-ImageCell-imageMeta span {
|
|
206
|
+
font-size: 11px;
|
|
207
|
+
line-height: 12px;
|
|
208
|
+
text-align: center;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.filerobot-Pixaforge-LandscapesContainer {
|
|
212
|
+
display: flex;
|
|
213
|
+
flex-wrap: wrap;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.filerobot-Pixaforge-LandscapesContainer .filerobot-Pixaforge-ImageCell {
|
|
217
|
+
margin: 4px;
|
|
218
|
+
flex-grow: 1;
|
|
219
|
+
height: 160px;
|
|
220
|
+
max-height: 160px;
|
|
221
|
+
}
|
|
222
|
+
.filerobot-Pixaforge-LandscapesContainer .filerobot-Pixaforge-ImageCell img {
|
|
223
|
+
max-height: 100%;
|
|
224
|
+
width: 100%;
|
|
225
|
+
-o-object-fit: cover;
|
|
226
|
+
object-fit: cover;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.filerobot-Pixaforge-IconsGallery {
|
|
230
|
+
display: flex;
|
|
231
|
+
flex-direction: column;
|
|
232
|
+
overflow: auto;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.filerobot-Pixaforge-IconsGallery-icons {
|
|
236
|
+
display: flex;
|
|
237
|
+
padding: 8px;
|
|
238
|
+
overflow: auto;
|
|
239
|
+
flex-wrap: wrap;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.filerobot-Pixaforge-SingleIcon {
|
|
243
|
+
cursor: pointer;
|
|
244
|
+
position: relative;
|
|
245
|
+
width: 106px;
|
|
246
|
+
height: 106px;
|
|
247
|
+
display: flex;
|
|
248
|
+
justify-content: center;
|
|
249
|
+
align-items: center;
|
|
250
|
+
background-color: #F8FAFB;
|
|
251
|
+
margin: 4px;
|
|
252
|
+
}
|
|
253
|
+
.filerobot-Pixaforge-SingleIcon:hover {
|
|
254
|
+
background-color: #EFF3F6;
|
|
255
|
+
}
|
|
256
|
+
.filerobot-Pixaforge-SingleIcon:hover .filerobot-Pixaforge-overlay {
|
|
257
|
+
display: block;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.filerobot-Pixaforge-SingleIcon--selected {
|
|
261
|
+
background-color: #EFF3F6;
|
|
262
|
+
}
|
|
263
|
+
.filerobot-Pixaforge-SingleIcon--selected .filerobot-Pixaforge-overlay {
|
|
264
|
+
display: block;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.filerobot-Pixaforge-SingleIcon-icon {
|
|
268
|
+
width: 50px;
|
|
269
|
+
height: 50px;
|
|
270
|
+
max-width: 50px;
|
|
271
|
+
max-height: 50px;
|
|
272
|
+
display: flex;
|
|
273
|
+
align-items: center;
|
|
274
|
+
justify-content: center;
|
|
275
|
+
color: #5D6D7E;
|
|
276
|
+
}
|
|
277
|
+
.filerobot-Pixaforge-SingleIcon-icon svg {
|
|
278
|
+
max-width: 100%;
|
|
279
|
+
max-height: 100%;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.filerobot-Pixaforge-CustomizeIcons {
|
|
283
|
+
padding: 12px 8px 0;
|
|
284
|
+
display: flex;
|
|
285
|
+
flex-direction: column;
|
|
286
|
+
overflow: auto;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.filerobot-Pixaforge-ColorCustomization {
|
|
290
|
+
margin: 0 4px;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.filerobot-Pixaforge-CustomizedIcons-title {
|
|
294
|
+
margin: 0 0 12px 4px;
|
|
295
|
+
}
|
|
296
|
+
.filerobot-Pixaforge-CustomizedIcons-title svg {
|
|
297
|
+
margin-left: 6px;
|
|
298
|
+
width: 12px;
|
|
299
|
+
height: 12px;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.filerobot-Pixaforge-CustomizeIcons-iconsWrapper {
|
|
303
|
+
display: flex;
|
|
304
|
+
flex-wrap: wrap;
|
|
305
|
+
overflow: auto;
|
|
306
|
+
margin: 12px 0;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.filerobot-Pixaforge-ColorCustomization-rgbField {
|
|
310
|
+
max-width: 80px;
|
|
311
|
+
margin-right: 4px;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.filerobot-Pixaforge-ColorCustomization-removeButton {
|
|
315
|
+
display: inline-flex;
|
|
316
|
+
margin-left: 8px;
|
|
317
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");.filerobot-Pixaforge-MainView{display:flex;flex-direction:column;height:100%}.filerobot-Pixaforge-MainView img{-webkit-user-select:none;-moz-user-select:none;user-select:none}.filerobot-Pixaforge-TopBar{align-items:center;background:#f8fafb;border-bottom:1px solid #eaeaea;display:flex;padding:12px}.filerobot-Pixaforge-TopBar>div:nth-child(2){min-width:calc(100% - 128px)}.filerobot-Pixaforge-TopBar-gallerySelect{margin-right:8px;max-width:128px}.filerobot-Pixaforge-TopBar-galleryOption{display:flex}.filerobot-Pixaforge-Topbar-galleryIcon{color:#5d6d7e;height:16px;margin-right:8px;width:16px}.filerobot-Pixaforge-overlay{bottom:4px;display:none;left:4px;position:absolute;right:4px;top:4px;z-index:100}.filerobot-Pixaforge-overlay *{color:#fff}.filerobot-Pixaforge-Categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:auto;padding:8px 8px 4px}.filerobot-Pixaforge-CategoryCard{cursor:pointer;padding:4px 4px 8px;width:100%}.filerobot-Pixaforge-CategoryCard-image{height:120px;width:100%}.filerobot-Pixaforge-CategoryCard-image img{border-radius:2px;height:100%;width:100%}.filerobot-Pixaforge-CategoryCard-label{font-size:12px;line-height:14px;margin:4px 0 2px}.filerobot-Pixaforge-TagsAndFoundLabel{margin:12px 12px 4px}.filerobot-Pixaforge-TagsAndFoundLabel-foundLabel{display:inline-block}.filerobot-Pixaforge-TagsAndFoundLabel-tags{display:inline;margin-left:6px;margin-right:4px}.filerobot-Pixaforge-TagItem{cursor:pointer;margin:2px}.filerobot-Pixaforge-TagItem span{border:1px solid #92a6bc!important}.filerobot-Pixaforge-TagsAndFoundLabel-showMoreLabel{display:inline-flex;margin-left:8px;margin-top:2px}@keyframes imgPlaceholderSkeleton{0%{background-position:-468px 0}to{background-position:468px 0}}.filerobot-Pixaforge-ImagesGallery{display:flex;flex-direction:column;overflow:auto}.filerobot-Pixaforge-ImagesGallery-imagesWrapper{display:flex;height:100%;overflow:auto;padding:8px 8px 4px;width:100%}.filerobot-Pixaforge-ImagesGallery-imagesWrapper .filerobot-c-empty{align-items:center;font-size:16px;gap:16px;justify-content:center}.filerobot-Pixaforge-PortraitsColumn{flex-grow:1;margin:0 4px}.filerobot-Pixaforge-ImageCell{cursor:pointer;margin-bottom:8px;position:relative}.filerobot-Pixaforge-ImageCell.filerobot-Pixaforge-ImageCell--selected .filerobot-Pixaforge-overlay,.filerobot-Pixaforge-ImageCell:hover .filerobot-Pixaforge-overlay{display:block}.filerobot-Pixaforge-ImageCell.filerobot-Pixaforge-ImageCell--selected img,.filerobot-Pixaforge-ImageCell:hover img{filter:brightness(.8)}.filerobot-Pixaforge-ImageCell:hover .filerobot-Pixaforge-ImageCell-imageInfo{display:block}.filerobot-Pixaforge-ImageCell-imageWrapper{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:imgPlaceholderSkeleton;animation-timing-function:linear;background:#f8fafb;background-image:linear-gradient(90deg,#f8fafb 0,#f1f3f6 30%,#f8fafb 90%,#f8fafb);background-repeat:no-repeat;height:100%;width:100%}.filerobot-Pixaforge-ImageCell-imageWrapper img{border-radius:2px;filter:drop-shadow(0 1px 2px rgba(78,77,77,.15));max-width:100%}.filerobot-Pixaforge-ImageCell-imageInfo{display:none}.filerobot-Pixaforge-ImageCell-authorAndTitle{position:absolute;right:0;text-align:right;top:0;width:80%}.filerobot-Pixaforge-ImageCell-authorAndTitle div{font-size:10px;line-height:12px}.filerobot-Pixaforge-ImageCell-author{font-weight:700;margin-bottom:4px}.filerobot-Pixaforge-ImageCell-imageMeta{align-items:center;bottom:0;display:flex;justify-content:space-between;position:absolute;width:100%}.filerobot-Pixaforge-ImageCell-imageMeta span{font-size:11px;line-height:12px;text-align:center}.filerobot-Pixaforge-LandscapesContainer{display:flex;flex-wrap:wrap}.filerobot-Pixaforge-LandscapesContainer .filerobot-Pixaforge-ImageCell{flex-grow:1;height:160px;margin:4px;max-height:160px}.filerobot-Pixaforge-LandscapesContainer .filerobot-Pixaforge-ImageCell img{max-height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.filerobot-Pixaforge-IconsGallery{display:flex;flex-direction:column;overflow:auto}.filerobot-Pixaforge-IconsGallery-icons{display:flex;flex-wrap:wrap;overflow:auto;padding:8px}.filerobot-Pixaforge-SingleIcon{align-items:center;background-color:#f8fafb;cursor:pointer;display:flex;height:106px;justify-content:center;margin:4px;position:relative;width:106px}.filerobot-Pixaforge-SingleIcon:hover{background-color:#eff3f6}.filerobot-Pixaforge-SingleIcon:hover .filerobot-Pixaforge-overlay{display:block}.filerobot-Pixaforge-SingleIcon--selected{background-color:#eff3f6}.filerobot-Pixaforge-SingleIcon--selected .filerobot-Pixaforge-overlay{display:block}.filerobot-Pixaforge-SingleIcon-icon{align-items:center;color:#5d6d7e;display:flex;height:50px;justify-content:center;max-height:50px;max-width:50px;width:50px}.filerobot-Pixaforge-SingleIcon-icon svg{max-height:100%;max-width:100%}.filerobot-Pixaforge-CustomizeIcons{display:flex;flex-direction:column;overflow:auto;padding:12px 8px 0}.filerobot-Pixaforge-ColorCustomization{margin:0 4px}.filerobot-Pixaforge-CustomizedIcons-title{margin:0 0 12px 4px}.filerobot-Pixaforge-CustomizedIcons-title svg{height:12px;margin-left:6px;width:12px}.filerobot-Pixaforge-CustomizeIcons-iconsWrapper{display:flex;flex-wrap:wrap;margin:12px 0;overflow:auto}.filerobot-Pixaforge-ColorCustomization-rgbField{margin-right:4px;max-width:80px}.filerobot-Pixaforge-ColorCustomization-removeButton{display:inline-flex;margin-left:8px}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
8
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
10
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
11
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
13
|
+
import { DEFAULT_ICONS_COLOR } from './constants';
|
|
14
|
+
var baseUrl = 'https://www.openpix.net/v3/';
|
|
15
|
+
var CDN_HOST_DOMAIN = '.cloudimg.io';
|
|
16
|
+
var CDN_URL = "https://scaleflex".concat(CDN_HOST_DOMAIN, "/v7/");
|
|
17
|
+
var categoriesImgsUrl = 'https://cdn.scaleflex.com/plugins/widget/assets/categories.json?vh=ac2e9b&func=proxy';
|
|
18
|
+
|
|
19
|
+
// We didn't split them into thunks and reuse the apiClient from the redux store's middleware as it is not that bulky code.
|
|
20
|
+
var _send = function _send(endpoint) {
|
|
21
|
+
var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'GET';
|
|
22
|
+
var data = arguments.length > 2 ? arguments[2] : undefined;
|
|
23
|
+
return new Promise(function (resolve, reject) {
|
|
24
|
+
var xhr = new XMLHttpRequest();
|
|
25
|
+
xhr.open(method, endpoint.startsWith('http') ? endpoint : "".concat(baseUrl).concat(endpoint));
|
|
26
|
+
xhr.responseType = 'json';
|
|
27
|
+
if (data) xhr.setRequestHeader('Content-Type', 'application/json');
|
|
28
|
+
xhr.onload = function () {
|
|
29
|
+
if (xhr.status >= 200 && xhr.status < 300) {
|
|
30
|
+
resolve(xhr.response);
|
|
31
|
+
} else {
|
|
32
|
+
reject(xhr.status);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
xhr.onerror = function () {
|
|
36
|
+
reject(xhr.status);
|
|
37
|
+
};
|
|
38
|
+
xhr.send(data ? JSON.stringify(data) : null);
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
export var getCategories = function getCategories() {
|
|
42
|
+
return Promise.all([_send('pictures/tags'), _send(categoriesImgsUrl)]).then(function (_ref) {
|
|
43
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
44
|
+
_ref2$ = _ref2[0],
|
|
45
|
+
categoriesResponse = _ref2$ === void 0 ? {} : _ref2$,
|
|
46
|
+
_ref2$2 = _ref2[1],
|
|
47
|
+
categoriesImages = _ref2$2 === void 0 ? {} : _ref2$2;
|
|
48
|
+
return (categoriesResponse.tags || []).map(function (category) {
|
|
49
|
+
return {
|
|
50
|
+
name: category.tag,
|
|
51
|
+
count: category.count,
|
|
52
|
+
image: "".concat(categoriesImages[category.tag] || categoriesImages["default"], "?w=170")
|
|
53
|
+
};
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
export var getImagesAndTags = function getImagesAndTags() {
|
|
58
|
+
var searchQueries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
59
|
+
var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
60
|
+
var limit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
|
|
61
|
+
return _send("search?q[]=".concat(searchQueries.join('&q[]='), "&limit=").concat(limit, "&offset=").concat(offset)).then(function () {
|
|
62
|
+
var _response$images, _response$ratio, _response$related_tag, _response$count;
|
|
63
|
+
var response = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
64
|
+
return {
|
|
65
|
+
images: ((_response$images = response.images) !== null && _response$images !== void 0 ? _response$images : []).map(function (image) {
|
|
66
|
+
return _objectSpread(_objectSpread({}, image), {}, {
|
|
67
|
+
preview: image.src.includes(CDN_HOST_DOMAIN) ? "".concat(image.src, "?w=300") : "".concat(CDN_URL).concat(image.src, "?w=300")
|
|
68
|
+
});
|
|
69
|
+
}),
|
|
70
|
+
ratio: (_response$ratio = response.ratio) !== null && _response$ratio !== void 0 ? _response$ratio : 1,
|
|
71
|
+
tags: (_response$related_tag = response.related_tags) !== null && _response$related_tag !== void 0 ? _response$related_tag : [],
|
|
72
|
+
totalCount: (_response$count = response.count) !== null && _response$count !== void 0 ? _response$count : 0
|
|
73
|
+
};
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
export var getIconsAndTags = function getIconsAndTags() {
|
|
77
|
+
var searchQueries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
78
|
+
var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
79
|
+
var limit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
|
|
80
|
+
return _send("icons?q[]=".concat(searchQueries.join('&q[]='), "&style[]=MONOCOLOR&limit=").concat(limit, "&offset=").concat(offset)).then(function () {
|
|
81
|
+
var _response$icons, _response$related_tag2, _response$count2;
|
|
82
|
+
var response = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
83
|
+
return {
|
|
84
|
+
icons: ((_response$icons = response.icons) !== null && _response$icons !== void 0 ? _response$icons : []).map(function (i) {
|
|
85
|
+
return _objectSpread(_objectSpread({}, i), {}, {
|
|
86
|
+
color: DEFAULT_ICONS_COLOR
|
|
87
|
+
});
|
|
88
|
+
}),
|
|
89
|
+
tags: (_response$related_tag2 = response.related_tags) !== null && _response$related_tag2 !== void 0 ? _response$related_tag2 : [],
|
|
90
|
+
totalCount: (_response$count2 = response.count) !== null && _response$count2 !== void 0 ? _response$count2 : 0
|
|
91
|
+
};
|
|
92
|
+
});
|
|
93
|
+
};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
+
import { createSlice } from '@reduxjs/toolkit';
|
|
8
|
+
import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
|
|
9
|
+
import { GALLERIES, IMAGES_GALLERY_VIEWS } from './constants';
|
|
10
|
+
var initialState = {
|
|
11
|
+
currentSelection: [],
|
|
12
|
+
customizedIcons: [],
|
|
13
|
+
gallery: GALLERIES.IMAGES,
|
|
14
|
+
galleryView: IMAGES_GALLERY_VIEWS.STANDARD_PORTRAITS,
|
|
15
|
+
loading: false
|
|
16
|
+
};
|
|
17
|
+
var commonSlice = createSlice({
|
|
18
|
+
name: PLUGINS_IDS.PIXAFORGE,
|
|
19
|
+
initialState: initialState,
|
|
20
|
+
reducers: {
|
|
21
|
+
currentSelectionsUpdated: function currentSelectionsUpdated(state, action) {
|
|
22
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
23
|
+
currentSelection: action.payload
|
|
24
|
+
});
|
|
25
|
+
},
|
|
26
|
+
customizedIconsUpdated: function customizedIconsUpdated(state, action) {
|
|
27
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
28
|
+
customizedIcons: action.payload
|
|
29
|
+
});
|
|
30
|
+
},
|
|
31
|
+
galleryChanged: function galleryChanged(state, action) {
|
|
32
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
33
|
+
gallery: action.payload
|
|
34
|
+
});
|
|
35
|
+
},
|
|
36
|
+
galleryViewChanged: function galleryViewChanged(state, action) {
|
|
37
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
38
|
+
galleryView: action.payload
|
|
39
|
+
});
|
|
40
|
+
},
|
|
41
|
+
loadingToggled: function loadingToggled(state, action) {
|
|
42
|
+
return _objectSpread(_objectSpread({}, state), {}, {
|
|
43
|
+
loading: !state.loading
|
|
44
|
+
});
|
|
45
|
+
},
|
|
46
|
+
pixaforgeCommonStateUpdated: function pixaforgeCommonStateUpdated(state, action) {
|
|
47
|
+
return _objectSpread(_objectSpread({}, state), action.payload);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
var _commonSlice$actions = commonSlice.actions,
|
|
52
|
+
currentSelectionsUpdated = _commonSlice$actions.currentSelectionsUpdated,
|
|
53
|
+
customizedIconsUpdated = _commonSlice$actions.customizedIconsUpdated,
|
|
54
|
+
galleryChanged = _commonSlice$actions.galleryChanged,
|
|
55
|
+
galleryViewChanged = _commonSlice$actions.galleryViewChanged,
|
|
56
|
+
loadingToggled = _commonSlice$actions.loadingToggled,
|
|
57
|
+
pixaforgeCommonStateUpdated = _commonSlice$actions.pixaforgeCommonStateUpdated;
|
|
58
|
+
export { currentSelectionsUpdated, customizedIconsUpdated, galleryChanged, galleryViewChanged, loadingToggled, pixaforgeCommonStateUpdated };
|
|
59
|
+
export var selectPixaforgeCommonState = function selectPixaforgeCommonState(state) {
|
|
60
|
+
return state[PLUGINS_IDS.PIXAFORGE];
|
|
61
|
+
};
|
|
62
|
+
export var selectCurrentSelection = function selectCurrentSelection(state) {
|
|
63
|
+
return selectPixaforgeCommonState(state).currentSelection;
|
|
64
|
+
};
|
|
65
|
+
export var selectCustomizedIcons = function selectCustomizedIcons(state) {
|
|
66
|
+
return selectPixaforgeCommonState(state).customizedIcons;
|
|
67
|
+
};
|
|
68
|
+
export var selectGallery = function selectGallery(state) {
|
|
69
|
+
return selectPixaforgeCommonState(state).gallery;
|
|
70
|
+
};
|
|
71
|
+
export var selectGalleryView = function selectGalleryView(state) {
|
|
72
|
+
return selectPixaforgeCommonState(state).galleryView;
|
|
73
|
+
};
|
|
74
|
+
export var selectIsLoading = function selectIsLoading(state) {
|
|
75
|
+
return selectPixaforgeCommonState(state).loading;
|
|
76
|
+
};
|
|
77
|
+
export default commonSlice.reducer;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Image } from '@scaleflex/widget-common';
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
var CategoryCard = function CategoryCard(_ref) {
|
|
5
|
+
var onClick = _ref.onClick,
|
|
6
|
+
image = _ref.image,
|
|
7
|
+
name = _ref.name,
|
|
8
|
+
count = _ref.count;
|
|
9
|
+
var handleClick = useCallback(function () {
|
|
10
|
+
if (typeof onClick === 'function') {
|
|
11
|
+
onClick(name);
|
|
12
|
+
}
|
|
13
|
+
}, [name]);
|
|
14
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
15
|
+
className: "filerobot-Pixaforge-CategoryCard",
|
|
16
|
+
onClick: handleClick,
|
|
17
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
18
|
+
className: "filerobot-Pixaforge-CategoryCard-image",
|
|
19
|
+
children: /*#__PURE__*/_jsx(Image, {
|
|
20
|
+
src: image
|
|
21
|
+
})
|
|
22
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
23
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
24
|
+
className: "filerobot-Pixaforge-CategoryCard-label",
|
|
25
|
+
children: name
|
|
26
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
27
|
+
className: "filerobot-common-secondaryTxt",
|
|
28
|
+
children: count
|
|
29
|
+
})]
|
|
30
|
+
})]
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
export default CategoryCard;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["name"];
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
9
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
10
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
11
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
12
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
13
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
14
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
15
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
16
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
17
|
+
import CategoryCard from './CategoryCard';
|
|
18
|
+
import { getCategories } from '../../api.service';
|
|
19
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
|
+
var CategoriesCards = function CategoriesCards(_ref) {
|
|
21
|
+
var selectCategory = _ref.selectCategory,
|
|
22
|
+
setIsLoading = _ref.setIsLoading;
|
|
23
|
+
var _useState = useState([]),
|
|
24
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
25
|
+
categories = _useState2[0],
|
|
26
|
+
setCategories = _useState2[1];
|
|
27
|
+
var fetchCategories = useCallback(function () {
|
|
28
|
+
setIsLoading(true);
|
|
29
|
+
getCategories().then(function (foundCategories) {
|
|
30
|
+
setCategories(foundCategories.splice(0, 20)); // We use slice to use only first 20 categories (descriptions in T6119 https://sfx.li/xyRTwym9kUsWxR)
|
|
31
|
+
})["finally"](function () {
|
|
32
|
+
setIsLoading(false);
|
|
33
|
+
});
|
|
34
|
+
}, []);
|
|
35
|
+
useEffect(fetchCategories, []);
|
|
36
|
+
return /*#__PURE__*/_jsx("div", {
|
|
37
|
+
className: "filerobot-Pixaforge-Categories",
|
|
38
|
+
children: categories.map(function (_ref2) {
|
|
39
|
+
var name = _ref2.name,
|
|
40
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
41
|
+
return /*#__PURE__*/_jsx(CategoryCard, _objectSpread({
|
|
42
|
+
name: name,
|
|
43
|
+
onClick: selectCategory
|
|
44
|
+
}, rest), name);
|
|
45
|
+
})
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
export default CategoriesCards;
|