@pushwoosh/smart-components-kit 1.12.0 → 1.13.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.
Files changed (17) hide show
  1. package/MediaStorage/MediaStorage.js +32 -3
  2. package/MediaStorage/polyglot/messages_ar.js +2 -1
  3. package/MediaStorage/polyglot/messages_bn.js +2 -1
  4. package/MediaStorage/polyglot/messages_de.js +2 -1
  5. package/MediaStorage/polyglot/messages_en.js +2 -1
  6. package/MediaStorage/polyglot/messages_es.js +2 -1
  7. package/MediaStorage/polyglot/messages_fr.js +2 -1
  8. package/MediaStorage/polyglot/messages_he.js +2 -1
  9. package/MediaStorage/polyglot/messages_hi.js +2 -1
  10. package/MediaStorage/polyglot/messages_ja.js +2 -1
  11. package/MediaStorage/polyglot/messages_ko.js +2 -1
  12. package/MediaStorage/polyglot/messages_pt.js +2 -1
  13. package/MediaStorage/polyglot/messages_ru.js +2 -1
  14. package/MediaStorage/polyglot/messages_th.js +2 -1
  15. package/MediaStorage/polyglot/messages_zh.js +2 -1
  16. package/MediaStorage/polyglot/types.d.ts +1 -0
  17. package/package.json +1 -1
package/MediaStorage/MediaStorage.js CHANGED
@@ -14,7 +14,7 @@ import { useCanvaEdit, useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
14
14
  import { formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
15
15
  import { Lang, useLang } from './polyglot';
16
16
  import { StockPhotosTab } from './StockPhotosTab';
17
- import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
17
+ import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SearchField, SearchRow, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
18
18
  const UPLOAD_PATH = '/api/media/upload';
19
19
  const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
20
20
  const TAB_MESSAGES = {
@@ -76,6 +76,8 @@ export const MediaStorage = ({
76
76
  const [selectedUuids, setSelectedUuids] = useState([]);
77
77
  const [isBulkDeleteOpen, setIsBulkDeleteOpen] = useState(false);
78
78
  const [isBulkDeleting, setIsBulkDeleting] = useState(false);
79
+ const [search, setSearch] = useState('');
80
+ const [searchDraft, setSearchDraft] = useState('');
79
81
  // Format filtering belongs to the query, not the response: `total` and the page count come
80
82
  // from the filtered set, so a client-side filter would paginate over files it then hides.
81
83
  const listAsync = useAsync(async () => {
@@ -83,14 +85,15 @@ export const MediaStorage = ({
83
85
  application,
84
86
  page,
85
87
  perPage,
86
- extensions
88
+ extensions,
89
+ searchByName: search || undefined
87
90
  });
88
91
  // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
89
92
  return {
90
93
  files: response.files ?? [],
91
94
  total: response.total
92
95
  };
93
- }, [rpcGateway, application, page, perPage, extensions, reloadToken]);
96
+ }, [rpcGateway, application, page, perPage, extensions, search, reloadToken]);
94
97
  const usageAsync = useAsync(() => rpcGateway.mediaFiles.GetUsage({
95
98
  application
96
99
  }), [rpcGateway, application, reloadToken, usageToken]);
@@ -174,6 +177,14 @@ export const MediaStorage = ({
174
177
  cancelled = true;
175
178
  };
176
179
  }, [listAsync.value, rpcGateway, application, extensions]);
180
+ const applySearch = value => {
181
+ if (value === search) return;
182
+ setSearch(value);
183
+ if (pageRef.current !== 0) {
184
+ onPageChange(0);
185
+ }
186
+ };
187
+ const commitSearch = () => applySearch(searchDraft.trim());
177
188
  const uploadFiles = async selected => {
178
189
  if (selected.length === 0) return;
179
190
  const images = selected.filter(isAllowedImage);
@@ -346,6 +357,24 @@ export const MediaStorage = ({
346
357
  accept: ALLOWED_IMAGE_EXTENSIONS.join(','),
347
358
  multiple: true,
348
359
  onChange: event => void uploadFiles(Array.from(event.target.files ?? []))
360
+ }), _jsx(SearchRow, {
361
+ children: _jsx(SearchField, {
362
+ type: "search",
363
+ value: searchDraft,
364
+ placeholder: lang({
365
+ message: 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER'
366
+ }),
367
+ onChange: event => {
368
+ setSearchDraft(event.target.value);
369
+ if (event.target.value === '') {
370
+ applySearch('');
371
+ }
372
+ },
373
+ onKeyDown: event => {
374
+ if (event.key === 'Enter') commitSearch();
375
+ },
376
+ onBlur: commitSearch
377
+ })
349
378
  }), loading && _jsx(EmptyState, {
350
379
  children: lang({
351
380
  message: 'SMART.MEDIA_STORAGE.LOADING'
package/MediaStorage/polyglot/messages_ar.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'عريض (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'بانر (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'بورتريه (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'طويل (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'طويل (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ابحث باسم الملف…'
109
110
  };
package/MediaStorage/polyglot/messages_bn.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'চওড়া (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'ব্যানার (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'পোর্ট্রেট (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'লম্বা (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'লম্বা (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ফাইলের নাম দিয়ে অনুসন্ধান করুন…'
109
110
  };
package/MediaStorage/polyglot/messages_de.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Breit (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Banner (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Hochformat (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Hoch (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Hoch (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Nach Dateinamen suchen…'
109
110
  };
package/MediaStorage/polyglot/messages_en.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Wide (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Banner (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Portrait (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Tall (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Tall (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Search by file name…'
109
110
  };
package/MediaStorage/polyglot/messages_es.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Ancho (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Banner (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Vertical (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Buscar por nombre de archivo…'
109
110
  };
package/MediaStorage/polyglot/messages_fr.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Large (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Bannière (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Portrait (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Haut (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Haut (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Rechercher par nom de fichier…'
109
110
  };
package/MediaStorage/polyglot/messages_he.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'רחב (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'באנר (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'לאורך (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'גבוה (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'גבוה (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'חיפוש לפי שם קובץ…'
109
110
  };
package/MediaStorage/polyglot/messages_hi.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'वाइड (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'बैनर (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'पोर्ट्रेट (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'टॉल (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'टॉल (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'फ़ाइल नाम से खोजें…'
109
110
  };
package/MediaStorage/polyglot/messages_ja.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'ワイド (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'バナー (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '縦長 (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '縦長 (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '縦長 (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ファイル名で検索…'
109
110
  };
package/MediaStorage/polyglot/messages_ko.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': '와이드 (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': '배너 (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '세로 (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '세로형 (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '세로형 (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': '파일 이름으로 검색…'
109
110
  };
package/MediaStorage/polyglot/messages_pt.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Largo (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Banner (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Retrato (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Buscar por nome do arquivo…'
109
110
  };
package/MediaStorage/polyglot/messages_ru.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'Широкая (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'Баннер (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Портретная (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Вертикальная (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Вертикальная (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Поиск по имени файла…'
109
110
  };
package/MediaStorage/polyglot/messages_th.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'แนวนอนกว้าง (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'แบนเนอร์ (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'แนวตั้ง (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'แนวตั้งสูง (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'แนวตั้งสูง (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ค้นหาตามชื่อไฟล์…'
109
110
  };
package/MediaStorage/polyglot/messages_zh.js CHANGED
@@ -105,5 +105,6 @@ export const messages = {
105
105
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': '宽 (16:9)',
106
106
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': '横幅 (21:9)',
107
107
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '纵向 (3:4)',
108
- 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '高 (9:16)'
108
+ 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '高 (9:16)',
109
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': '按文件名搜索…'
109
110
  };
package/MediaStorage/polyglot/types.d.ts CHANGED
@@ -140,4 +140,5 @@ export type MediaStorageMessages = {
140
140
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': NoParams;
141
141
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': NoParams;
142
142
  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': NoParams;
143
+ 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': NoParams;
143
144
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/smart-components-kit",
3
- "version": "1.12.0",
3
+ "version": "1.13.0",
4
4
  "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
5
5
  "repository": {
6
6
  "type": "git",