@pushwoosh/smart-components-kit 1.1.3 → 1.1.4

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.
Files changed (3) hide show
  1. package/MediaStore/MediaStore.js +80 -79
  2. package/MediaStore/styled.js +1 -1
  3. package/package.json +2 -2
package/MediaStore/MediaStore.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useEffect, useRef, useState } from 'react';
3
3
  import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, useToast } from '@pushwoosh/dumb-components';
4
- import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
4
+ import { FlexContainer, useAsync } from '@pushwoosh/kit-helpers';
5
5
  import { CheckIcon, EditIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
6
6
  import { Text } from '@pushwoosh/kit-typography';
7
7
  import { useSPAContext } from '@pushwoosh/spa-context';
@@ -192,14 +192,9 @@ export const MediaStore = ({
192
192
  setReloadToken(token => token + 1);
193
193
  };
194
194
  const totalPages = Math.ceil(total / perPage);
195
+ const showPagination = !loading && files.length > 0 && totalPages > 1;
195
196
  return _jsxs(_Fragment, {
196
- children: [usageAsync.value && _jsx(UsageLine, {
197
- children: lang({
198
- message: 'SMART.MEDIA_STORE.USAGE',
199
- count: usageAsync.value.totalCount,
200
- size: formatBytes(usageAsync.value.totalSize)
201
- })
202
- }), _jsxs(Dropzone, {
197
+ children: [_jsxs(Dropzone, {
203
198
  type: "button",
204
199
  "$dragOver": isDragOver,
205
200
  disabled: isUploading,
@@ -239,81 +234,81 @@ export const MediaStore = ({
239
234
  children: lang({
240
235
  message: 'SMART.MEDIA_STORE.EMPTY'
241
236
  })
242
- }), !loading && files.length > 0 && _jsxs(_Fragment, {
243
- children: [_jsx(Grid, {
244
- children: files.map(file => {
245
- const crops = cropsByUuid[file.uuid] ?? [];
246
- return _jsxs(Tile, {
247
- children: [_jsx(TileImage, {
248
- src: getThumbUrl(file),
249
- alt: file.filename
250
- }), crops.length > 0 && _jsx(CropBadge, {
251
- children: lang({
252
- message: 'SMART.MEDIA_STORE.CROPS_BADGE',
253
- count: crops.length
237
+ }), !loading && files.length > 0 && _jsx(Grid, {
238
+ children: files.map(file => {
239
+ const crops = cropsByUuid[file.uuid] ?? [];
240
+ return _jsxs(Tile, {
241
+ children: [_jsx(TileImage, {
242
+ src: getThumbUrl(file),
243
+ alt: file.filename
244
+ }), crops.length > 0 && _jsx(CropBadge, {
245
+ children: lang({
246
+ message: 'SMART.MEDIA_STORE.CROPS_BADGE',
247
+ count: crops.length
248
+ })
249
+ }), _jsxs(TileActions, {
250
+ children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
251
+ color: "secondary",
252
+ size: "compact",
253
+ icon: _jsx(CheckIcon, {
254
+ size: "small"
255
+ }),
256
+ menuPlacement: "bottom-start",
257
+ children: _jsxs(DropdownMenuSection, {
258
+ children: [_jsx(DropdownMenuItem, {
259
+ onClick: () => onSelect(file.url),
260
+ children: lang({
261
+ message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
262
+ })
263
+ }), crops.map(crop => _jsx(DropdownMenuItem, {
264
+ onClick: () => onSelect(crop.url),
265
+ children: getRatioLabel(crop) || crop.filename
266
+ }, crop.uuid))]
254
267
  })
255
- }), _jsxs(TileActions, {
256
- children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
257
- color: "secondary",
258
- size: "compact",
259
- icon: _jsx(CheckIcon, {
260
- size: "small"
261
- }),
262
- menuPlacement: "bottom-start",
263
- children: _jsxs(DropdownMenuSection, {
264
- children: [_jsx(DropdownMenuItem, {
265
- onClick: () => onSelect(file.url),
266
- children: lang({
267
- message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
268
- })
269
- }), crops.map(crop => _jsx(DropdownMenuItem, {
270
- onClick: () => onSelect(crop.url),
271
- children: getRatioLabel(crop) || crop.filename
272
- }, crop.uuid))]
273
- })
274
- }) : _jsx(Button, {
275
- color: "secondary",
276
- size: "compact",
277
- icon: _jsx(CheckIcon, {
278
- size: "small"
279
- }),
280
- "aria-label": lang({
281
- message: 'SMART.MEDIA_STORE.SELECT_HINT'
282
- }),
283
- onClick: () => onSelect(file.url)
284
- }), _jsx(Button, {
285
- color: "secondary",
286
- size: "compact",
287
- icon: _jsx(EditIcon, {
288
- size: "small",
289
- view: "lined"
290
- }),
291
- "aria-label": lang({
292
- message: 'SMART.MEDIA_STORE.CREATE_CROP_HINT'
293
- }),
294
- onClick: () => setCreateCropFor(file)
295
- }), _jsx(Button, {
296
- color: "secondary",
297
- size: "compact",
298
- icon: _jsx(TrashIcon, {
299
- size: "small",
300
- view: "lined"
301
- }),
302
- "aria-label": lang({
303
- message: 'SMART.MEDIA_STORE.DELETE_HINT'
304
- }),
305
- onClick: () => setPendingDelete(file)
306
- })]
268
+ }) : _jsx(Button, {
269
+ color: "secondary",
270
+ size: "compact",
271
+ icon: _jsx(CheckIcon, {
272
+ size: "small"
273
+ }),
274
+ "aria-label": lang({
275
+ message: 'SMART.MEDIA_STORE.SELECT_HINT'
276
+ }),
277
+ onClick: () => onSelect(file.url)
278
+ }), _jsx(Button, {
279
+ color: "secondary",
280
+ size: "compact",
281
+ icon: _jsx(EditIcon, {
282
+ size: "small",
283
+ view: "lined"
284
+ }),
285
+ "aria-label": lang({
286
+ message: 'SMART.MEDIA_STORE.CREATE_CROP_HINT'
287
+ }),
288
+ onClick: () => setCreateCropFor(file)
289
+ }), _jsx(Button, {
290
+ color: "secondary",
291
+ size: "compact",
292
+ icon: _jsx(TrashIcon, {
293
+ size: "small",
294
+ view: "lined"
295
+ }),
296
+ "aria-label": lang({
297
+ message: 'SMART.MEDIA_STORE.DELETE_HINT'
298
+ }),
299
+ onClick: () => setPendingDelete(file)
307
300
  })]
308
- }, file.uuid);
309
- })
310
- }), totalPages > 1 && _jsxs(Horizontal, {
311
- "$justifyContent": "center",
301
+ })]
302
+ }, file.uuid);
303
+ })
304
+ }), (showPagination || usageAsync.value) && _jsxs(FlexContainer, {
305
+ "$alignItems": "center",
306
+ "$margin": {
307
+ top: 16
308
+ },
309
+ children: [showPagination && _jsxs(FlexContainer, {
312
310
  "$alignItems": "center",
313
311
  "$gap": 8,
314
- "$margin": {
315
- top: 16
316
- },
317
312
  children: [_jsx(Button, {
318
313
  view: "ghost",
319
314
  color: "secondary",
@@ -335,6 +330,12 @@ export const MediaStore = ({
335
330
  message: 'SMART.MEDIA_STORE.NEXT_BUTTON'
336
331
  })
337
332
  })]
333
+ }), usageAsync.value && _jsx(UsageLine, {
334
+ children: lang({
335
+ message: 'SMART.MEDIA_STORE.USAGE',
336
+ count: usageAsync.value.totalCount,
337
+ size: formatBytes(usageAsync.value.totalSize)
338
+ })
338
339
  })]
339
340
  }), _jsx(CreateCropDrawer, {
340
341
  application: application,
package/MediaStore/styled.js CHANGED
@@ -39,7 +39,7 @@ export const HiddenInput = styled.input.withConfig({
39
39
  export const UsageLine = styled.div.withConfig({
40
40
  displayName: "UsageLine",
41
41
  componentId: "sc-1d9kmgw-8"
42
- })(["margin-bottom:8px;text-align:right;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
42
+ })(["margin-left:auto;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
43
43
  /* ---------- CreateCropDrawer ---------- */
44
44
  export const PreviewStage = styled.div.withConfig({
45
45
  displayName: "PreviewStage",
package/package.json CHANGED
@@ -23,7 +23,7 @@
23
23
  "@floating-ui/react-dom": "^2.1.2",
24
24
  "@pushwoosh/dumb-components": "^1.1.134",
25
25
  "@pushwoosh/kit-constants": "^1.6.9",
26
- "@pushwoosh/kit-helpers": "^4.9.1",
26
+ "@pushwoosh/kit-helpers": "^4.11.0",
27
27
  "@pushwoosh/kit-icons": "^2.1.6",
28
28
  "@pushwoosh/kit-typography": "^1.7.3",
29
29
  "@pushwoosh/rpc-v2-http-api-data": "^0.1.980",
@@ -49,5 +49,5 @@
49
49
  "react": "^16.14.0 || ^18.0.0",
50
50
  "react-dom": "^16.14.0 || ^18.0.0"
51
51
  },
52
- "version": "1.1.3"
52
+ "version": "1.1.4"
53
53
  }