@micromag/media-gallery 0.2.394 → 0.2.395

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 (4) hide show
  1. package/assets/css/styles.css +6 -6
  2. package/es/index.js +1106 -1106
  3. package/lib/index.js +1121 -1121
  4. package/package.json +3 -3
package/lib/index.js CHANGED
@@ -4,20 +4,20 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
5
5
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
6
6
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
7
- var React = require('react');
8
- var PropTypes = require('prop-types');
9
- var classNames = require('classnames');
10
- var data = require('@micromag/data');
11
7
  var core = require('@micromag/core');
12
8
  var components = require('@micromag/core/components');
13
- var reactIntl = require('react-intl');
14
- var reactFontawesome = require('@fortawesome/react-fontawesome');
15
- var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
16
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
17
- var hooks = require('@micromag/core/hooks');
18
9
  var contexts = require('@micromag/core/contexts');
10
+ var data = require('@micromag/data');
11
+ var classNames = require('classnames');
12
+ var PropTypes = require('prop-types');
13
+ var React = require('react');
14
+ var hooks = require('@micromag/core/hooks');
15
+ var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
16
+ var reactFontawesome = require('@fortawesome/react-fontawesome');
19
17
  var uniqBy = require('lodash/uniqBy');
20
18
  var prettyBytes = require('pretty-bytes');
19
+ var reactIntl = require('react-intl');
20
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
21
21
 
22
22
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
23
23
 
@@ -25,450 +25,517 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
25
25
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
26
26
  var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
27
27
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
28
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
29
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
30
28
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
31
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
29
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
30
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
32
31
  var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
33
32
  var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
33
+ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
34
+
35
+ var styles$8 = {"container":"micromag-media-gallery-container","mediaMetadata":"micromag-media-gallery-mediaMetadata","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
36
+
37
+ var middleEllipsis = function middleEllipsis(string, maxLength) {
38
+ if (!string) return string;
39
+ if (maxLength < 1) return string;
40
+ if (string.length <= maxLength) return string;
41
+ if (maxLength === 1) return "".concat(string.substring(0, 1), "...");
42
+ var midpoint = Math.ceil(string.length / 2);
43
+ var toremove = string.length - maxLength;
44
+ var lstrip = Math.ceil(toremove / 2);
45
+ var rstrip = toremove - lstrip;
46
+ return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
47
+ };
34
48
 
35
- var styles$8 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label"};
49
+ var styles$7 = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon","infoButton":"micromag-media-gallery-items-gallery-item-infoButton"};
36
50
 
37
51
  var propTypes$a = {
38
- value: PropTypes__default["default"].string,
39
- items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
40
- label: core.PropTypes.label,
41
- value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
42
- active: PropTypes__default["default"].bool
43
- })),
44
- onChange: PropTypes__default["default"].func,
45
- className: PropTypes__default["default"].string
52
+ item: core.PropTypes.media,
53
+ width: PropTypes__default["default"].number,
54
+ selected: PropTypes__default["default"].bool,
55
+ withInfoButton: PropTypes__default["default"].bool,
56
+ className: PropTypes__default["default"].string,
57
+ onClick: PropTypes__default["default"].func,
58
+ onClickInfo: PropTypes__default["default"].func
46
59
  };
47
60
  var defaultProps$a = {
48
- value: null,
49
- items: null,
50
- onChange: null,
51
- className: null
61
+ item: null,
62
+ width: 0,
63
+ selected: false,
64
+ withInfoButton: false,
65
+ className: null,
66
+ onClick: null,
67
+ onClickInfo: null
52
68
  };
53
69
 
54
- var DropdownSection = function DropdownSection(_ref) {
55
- var value = _ref.value,
56
- items = _ref.items,
57
- onChange = _ref.onChange,
58
- className = _ref.className;
70
+ var GalleryItem = function GalleryItem(_ref) {
71
+ var item = _ref.item,
72
+ width = _ref.width,
73
+ selected = _ref.selected,
74
+ withInfoButton = _ref.withInfoButton,
75
+ className = _ref.className,
76
+ onClick = _ref.onClick,
77
+ onClickInfo = _ref.onClickInfo;
78
+ var type = item.type,
79
+ _item$thumbnail_url = item.thumbnail_url,
80
+ thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
81
+ name = item.name,
82
+ size = item.size;
83
+ var title = name;
59
84
 
60
- var _useState = React.useState(false),
61
- _useState2 = _slicedToArray__default["default"](_useState, 2),
62
- open = _useState2[0],
63
- setOpen = _useState2[1];
85
+ if (width < 768) {
86
+ title = middleEllipsis(name, Math.floor(Math.max(18, width / 2 / 9)));
87
+ } else {
88
+ title = middleEllipsis(name, Math.floor(Math.max(25, width / 3 / 8)));
89
+ }
64
90
 
65
- var currentItem = items.find(function (i) {
66
- return i.value === value;
67
- });
68
- var onOpen = React.useCallback(function () {
69
- setOpen(!open);
70
- }, [open, setOpen]);
71
- var onBlur = React.useCallback(function () {
72
- // Work around the event call order
73
- setTimeout(function () {
74
- setOpen(false);
75
- }, 300);
76
- }, [setOpen]);
77
- var onItemClick = React.useCallback(function (e) {
78
- var val = e.target.dataset.value || null;
79
- setOpen(false);
80
- onChange(val);
81
- }, [setOpen]);
82
- return items !== null && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
83
- className: classNames__default["default"]([styles$8.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
84
- }, /*#__PURE__*/React__default["default"].createElement("span", {
85
- className: styles$8.label
86
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
87
- id: "9ZdD+Q",
88
- defaultMessage: [{
89
- "type": 0,
90
- "value": "Library for"
91
- }]
92
- })), /*#__PURE__*/React__default["default"].createElement("button", {
93
- className: classNames__default["default"]([styles$8.dropdownToggle, 'dropdown-toggle', {
94
- open: open === true
95
- }]),
96
- type: "button",
97
- onClick: onOpen,
98
- onBlur: onBlur
99
- }, (currentItem ? currentItem.label : null) || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
100
- id: "15GBmG",
101
- defaultMessage: [{
102
- "type": 0,
103
- "value": "All"
104
- }]
105
- })), /*#__PURE__*/React__default["default"].createElement("div", {
106
- className: classNames__default["default"]([styles$8.dropdown, 'dropdown-menu', {
107
- show: open === true
108
- }])
109
- }, items.map(function (_ref3) {
110
- var label = _ref3.label,
111
- itemValue = _ref3.value;
112
- var itemClassNames = classNames__default["default"](['dropdown-item', {
113
- active: itemValue === value
114
- }]);
115
- return /*#__PURE__*/React__default["default"].createElement("button", {
116
- className: itemClassNames,
91
+ return /*#__PURE__*/React__default["default"].createElement(components.Card, {
92
+ image: /*#__PURE__*/React__default["default"].createElement("button", {
117
93
  type: "button",
118
- key: "drop-".concat(itemValue),
119
- onClick: onItemClick,
120
- "data-value": itemValue
121
- }, label);
122
- }))) : null;
94
+ className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$7.imageButton]),
95
+ onClick: onClick
96
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
97
+ className: classNames__default["default"](['card-img-top', styles$7.image]),
98
+ style: {
99
+ backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
100
+ }
101
+ })),
102
+ beforeBody: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withInfoButton ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
103
+ className: styles$7.infoButton,
104
+ onClick: onClickInfo,
105
+ withoutStyle: true
106
+ }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
107
+ icon: freeSolidSvgIcons.faInfoCircle,
108
+ className: styles$7.icon
109
+ })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
110
+ className: classNames__default["default"](['text-danger', styles$7.closeIcon])
111
+ }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
112
+ icon: freeSolidSvgIcons.faTimesCircle,
113
+ className: styles$7.icon
114
+ })) : null),
115
+ footer: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
116
+ className: styles$7.icon,
117
+ icon: freeSolidSvgIcons.faPlayCircle
118
+ }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
119
+ className: styles$7.icon,
120
+ icon: freeSolidSvgIcons.faHeadphonesAlt
121
+ }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
122
+ className: classNames__default["default"](['text-truncate', styles$7.label])
123
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
124
+ className: "text-muted ml-1"
125
+ }, size) : null)),
126
+ theme: selected ? 'primary' : null,
127
+ className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({
128
+ 'border-primary': selected
129
+ }, className, className !== null)]),
130
+ footerClassName: classNames__default["default"](['p-2', styles$7.footer]),
131
+ onClickFooter: onClick
132
+ });
123
133
  };
124
134
 
125
- DropdownSection.propTypes = propTypes$a;
126
- DropdownSection.defaultProps = defaultProps$a;
135
+ GalleryItem.propTypes = propTypes$a;
136
+ GalleryItem.defaultProps = defaultProps$a;
137
+
138
+ var styles$6 = {};
127
139
 
128
140
  var propTypes$9 = {
129
- tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
130
- label: PropTypes__default["default"].string,
131
- value: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].node]),
132
- active: PropTypes__default["default"].bool
133
- })),
134
- parent: PropTypes__default["default"].string,
135
- onChange: PropTypes__default["default"].func,
136
- className: PropTypes__default["default"].string
141
+ items: core.PropTypes.medias,
142
+ selectedItem: core.PropTypes.media,
143
+ withInfoButton: PropTypes__default["default"].bool,
144
+ isSmall: PropTypes__default["default"].bool,
145
+ selectedFirst: PropTypes__default["default"].bool,
146
+ className: PropTypes__default["default"].string,
147
+ onClickItem: PropTypes__default["default"].func,
148
+ onClickItemInfo: PropTypes__default["default"].func
137
149
  };
138
150
  var defaultProps$9 = {
139
- tags: null,
140
- parent: null,
141
- onChange: null,
142
- className: null
151
+ items: null,
152
+ selectedItem: null,
153
+ withInfoButton: false,
154
+ isSmall: false,
155
+ selectedFirst: false,
156
+ className: null,
157
+ onClickItem: null,
158
+ onClickItemInfo: null
143
159
  };
144
160
 
145
- var TagSection = function TagSection(_ref) {
146
- var tags = _ref.tags,
147
- parent = _ref.parent,
148
- onChange = _ref.onChange,
149
- className = _ref.className;
150
- var onItemChange = React.useCallback(function (e) {
151
- var val = e.target.dataset.value || null;
152
- onChange(val, parent);
153
- }, [onChange, parent]);
154
- return /*#__PURE__*/React__default["default"].createElement("div", {
155
- className: classNames__default["default"](['d-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
156
- }, tags !== null ? tags.map(function (_ref3) {
157
- var label = _ref3.label,
158
- value = _ref3.value,
159
- active = _ref3.active;
160
- var itemClassNames = classNames__default["default"](['btn', 'btn-sm', 'mb-1', 'mr-1', 'btn-dark', {
161
- 'btn-primary': active === true // 'btn-outline-light': active === false,
161
+ var Gallery = function Gallery(_ref) {
162
+ var items = _ref.items,
163
+ selectedItem = _ref.selectedItem,
164
+ withInfoButton = _ref.withInfoButton,
165
+ isSmall = _ref.isSmall,
166
+ selectedFirst = _ref.selectedFirst,
167
+ className = _ref.className,
168
+ onClickItem = _ref.onClickItem,
169
+ onClickItemInfo = _ref.onClickItemInfo;
162
170
 
163
- }]);
164
- return /*#__PURE__*/React__default["default"].createElement("button", {
165
- className: itemClassNames,
166
- type: "button",
167
- key: "tag-".concat(value),
168
- onClick: onItemChange,
169
- "data-value": value
170
- }, label);
171
- }) : null);
172
- };
171
+ var _useResizeObserver = hooks.useResizeObserver(),
172
+ ref = _useResizeObserver.ref,
173
+ contentRect = _useResizeObserver.entry.contentRect;
173
174
 
174
- TagSection.propTypes = propTypes$9;
175
- TagSection.defaultProps = defaultProps$9;
175
+ var _ref2 = contentRect || {},
176
+ width = _ref2.width;
176
177
 
177
- var styles$7 = {"container":"micromag-media-gallery-forms-search-filters-container","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
178
+ var finalItems = React.useMemo(function () {
179
+ if (selectedFirst && selectedItem !== null && typeof selectedItem.id !== 'undefined') {
180
+ return [selectedItem].concat(_toConsumableArray__default["default"](items.filter(function (_ref3) {
181
+ var id = _ref3.id;
182
+ return id !== selectedItem.id;
183
+ })));
184
+ }
178
185
 
179
- var propTypes$8 = {
180
- filters: PropTypes__default["default"].object,
181
- // eslint-disable-line
182
- sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
183
- onChange: PropTypes__default["default"].func,
184
- className: PropTypes__default["default"].string
185
- };
186
- var defaultProps$8 = {
187
- filters: null,
188
- sections: [],
189
- onChange: null,
190
- className: null
191
- };
192
-
193
- var SearchFilters = function SearchFilters(_ref) {
194
- var filters = _ref.filters,
195
- sections = _ref.sections,
196
- onChange = _ref.onChange,
197
- className = _ref.className;
198
- var getActive = React.useCallback(function (items, sectionFilters) {
199
- return items !== null ? items.map(function (it) {
200
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
201
- active: sectionFilters ? !!sectionFilters.find(function (f) {
202
- return f === it.value;
203
- }) : false
204
- });
205
- }) : [];
206
- }, []);
207
- var activeSections = React.useMemo(function () {
208
- return sections.map(function (section) {
209
- return _objectSpread__default["default"](_objectSpread__default["default"]({}, section), {}, {
210
- items: getActive(section.items, filters[section.value])
211
- });
212
- });
213
- }, [getActive, sections, filters]);
214
- var onSectionChange = React.useCallback(function (data, section) {
215
- var val = filters[section] ? filters[section] : [];
216
- var found = !!val.find(function (f) {
217
- return f === data;
218
- });
219
-
220
- if (found) {
221
- onChange(section, val.filter(function (f) {
222
- return f !== data;
223
- }));
224
- } else if (data) {
225
- if (section === 'recent') {
226
- onChange('search', data);
227
- } else if (section === 'usage') {
228
- onChange(section, [data]);
229
- } else {
230
- onChange(section, [].concat(_toConsumableArray__default["default"](val), [data]));
231
- }
232
- }
233
- }, [filters, onChange]);
186
+ return items;
187
+ }, [selectedFirst, selectedItem, items]);
234
188
  return /*#__PURE__*/React__default["default"].createElement("div", {
235
- className: classNames__default["default"]([styles$7.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
236
- }, activeSections.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
237
- className: classNames__default["default"](['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
238
- }, activeSections.map(function (_ref3) {
239
- var value = _ref3.value,
240
- label = _ref3.label,
241
- items = _ref3.items;
242
- return items.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
243
- key: "filter-".concat(value),
244
- className: classNames__default["default"]([styles$7.section, 'py-2'])
245
- }, /*#__PURE__*/React__default["default"].createElement("p", {
246
- className: classNames__default["default"]([styles$7.title, 'm-0'])
247
- }, label), /*#__PURE__*/React__default["default"].createElement(TagSection, {
248
- className: classNames__default["default"]([styles$7.tags]),
249
- tags: items,
250
- parent: value,
251
- onChange: onSectionChange
252
- })) : null;
253
- })) : null);
189
+ className: classNames__default["default"]([styles$6.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
190
+ ref: ref
191
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
192
+ className: classNames__default["default"](['row', 'mx-n1', 'row-cols-2', {
193
+ 'row-cols-md-3': !isSmall
194
+ }])
195
+ }, finalItems.map(function (item) {
196
+ return /*#__PURE__*/React__default["default"].createElement("div", {
197
+ className: "col px-1 py-1",
198
+ key: "gallery-item-".concat(item.id)
199
+ }, /*#__PURE__*/React__default["default"].createElement(GalleryItem, {
200
+ item: item,
201
+ width: width,
202
+ selected: selectedItem !== null && selectedItem.id === item.id,
203
+ onClick: onClickItem !== null ? function () {
204
+ return onClickItem(item);
205
+ } : null,
206
+ onClickInfo: onClickItemInfo !== null ? function () {
207
+ return onClickItemInfo(item);
208
+ } : null,
209
+ withInfoButton: withInfoButton
210
+ }));
211
+ })));
254
212
  };
255
213
 
256
- SearchFilters.propTypes = propTypes$8;
257
- SearchFilters.defaultProps = defaultProps$8;
214
+ Gallery.propTypes = propTypes$9;
215
+ Gallery.defaultProps = defaultProps$9;
258
216
 
259
- var propTypes$7 = {
260
- value: PropTypes__default["default"].string,
261
- onChange: PropTypes__default["default"].func,
262
- onFocus: PropTypes__default["default"].func,
263
- onBlur: PropTypes__default["default"].func,
264
- onClickIcon: PropTypes__default["default"].func,
217
+ var styles$5 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
218
+
219
+ var propTypes$8 = {
220
+ media: core.PropTypes.media,
221
+ tags: core.PropTypes.tags,
265
222
  className: PropTypes__default["default"].string
266
223
  };
267
- var defaultProps$7 = {
268
- value: null,
269
- onChange: null,
270
- onFocus: null,
271
- onBlur: null,
272
- onClickIcon: null,
224
+ var defaultProps$8 = {
225
+ media: null,
226
+ tags: [],
273
227
  className: null
274
228
  };
275
229
 
276
- var Search = function Search(_ref) {
277
- var value = _ref.value,
278
- onChange = _ref.onChange,
279
- onFocus = _ref.onFocus,
280
- onBlur = _ref.onBlur,
281
- onClickIcon = _ref.onClickIcon,
230
+ var MediaMetadata = function MediaMetadata(_ref) {
231
+ var media = _ref.media,
232
+ allTags = _ref.tags,
282
233
  className = _ref.className;
283
- var intl = reactIntl.useIntl();
284
- var onSearchChange = React.useCallback(function (e) {
285
- var newValue = e.currentTarget.value.length > 0 ? e.currentTarget.value : null;
286
234
 
287
- if (onChange !== null) {
288
- onChange(newValue);
289
- }
290
- }, [onChange]);
291
- React.useCallback(function () {
292
- if (onChange !== null) {
293
- onChange('');
294
- }
295
- }, [onChange]);
296
- var onClickSearchIcon = React.useCallback(function () {
297
- if (onClickIcon !== null) {
298
- onClickIcon();
299
- }
300
- }, [onClickIcon]);
301
- return /*#__PURE__*/React__default["default"].createElement("form", {
302
- method: "post",
303
- className: classNames__default["default"](['w-100', _defineProperty__default["default"]({}, className, className !== null)]),
304
- onSubmit: function onSubmit(e) {
305
- return e.preventDefault();
306
- }
307
- }, /*#__PURE__*/React__default["default"].createElement("div", {
308
- className: "input-group w-100"
309
- }, /*#__PURE__*/React__default["default"].createElement("span", {
310
- type: "span",
311
- className: "input-group-prepend"
312
- }, /*#__PURE__*/React__default["default"].createElement("button", {
313
- type: "button",
314
- className: "input-group-text reset-button",
315
- onClick: onClickSearchIcon
316
- }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
317
- icon: freeSolidSvgIcons.faSearch
318
- }))), /*#__PURE__*/React__default["default"].createElement("input", {
319
- className: classNames__default["default"](['form-control', {
320
- 'bg-light': !!value,
321
- 'text-dark': value
322
- }]),
323
- type: "text",
324
- value: value || '',
325
- placeholder: intl.formatMessage({
326
- "id": "gprXiG",
327
- "defaultMessage": [{
328
- "type": 0,
329
- "value": "Search..."
330
- }]
331
- }),
332
- onChange: onSearchChange,
333
- onFocus: onFocus,
334
- onBlur: onBlur
335
- }), null));
336
- };
235
+ var _ref2 = media || {},
236
+ mediaId = _ref2.id,
237
+ type = _ref2.type,
238
+ _ref2$url = _ref2.url,
239
+ url = _ref2$url === void 0 ? null : _ref2$url,
240
+ _ref2$thumbnail_url = _ref2.thumbnail_url,
241
+ thumbnail = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
242
+ _ref2$name = _ref2.name,
243
+ mediaName = _ref2$name === void 0 ? null : _ref2$name,
244
+ _ref2$metadata = _ref2.metadata,
245
+ metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
337
246
 
338
- Search.propTypes = propTypes$7;
339
- Search.defaultProps = defaultProps$7;
247
+ var _ref3 = metadata || {},
248
+ _ref3$filename = _ref3.filename,
249
+ filename = _ref3$filename === void 0 ? null : _ref3$filename,
250
+ _ref3$size = _ref3.size,
251
+ size = _ref3$size === void 0 ? null : _ref3$size,
252
+ _ref3$width = _ref3.width,
253
+ width = _ref3$width === void 0 ? null : _ref3$width,
254
+ _ref3$height = _ref3.height,
255
+ height = _ref3$height === void 0 ? null : _ref3$height,
256
+ _ref3$duration = _ref3.duration,
257
+ duration = _ref3$duration === void 0 ? null : _ref3$duration,
258
+ _ref3$user = _ref3.user,
259
+ user = _ref3$user === void 0 ? null : _ref3$user,
260
+ _ref3$description = _ref3.description,
261
+ mediaDescription = _ref3$description === void 0 ? null : _ref3$description,
262
+ _ref3$tags = _ref3.tags,
263
+ mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
340
264
 
341
- var styles$6 = {"container":"micromag-media-gallery-buttons-close-container"};
265
+ var _useMediaUpdate = data.useMediaUpdate(),
266
+ update = _useMediaUpdate.update;
342
267
 
343
- var _excluded = ["className"];
344
- var propTypes$6 = {
345
- className: PropTypes__default["default"].string
346
- };
347
- var defaultProps$6 = {
348
- className: null
349
- };
268
+ var getOptionLabel = React.useCallback(function (_ref4) {
269
+ var name = _ref4.name;
270
+ return name;
271
+ }, []);
272
+ var getOptionValue = React.useCallback(function (_ref5) {
273
+ var name = _ref5.name;
274
+ return name;
275
+ }, []);
276
+ var getNewOptionData = React.useCallback(function (inputValue) {
277
+ return {
278
+ name: inputValue
279
+ };
280
+ }, []);
281
+ var finalTags = React.useMemo(function () {
282
+ return allTags !== null ? uniqBy__default["default"](mediaTags.concat(allTags), function (_ref6) {
283
+ var id = _ref6.id;
284
+ return id;
285
+ }) : mediaTags;
286
+ }, [mediaTags, allTags]);
350
287
 
351
- var CloseButton = function CloseButton(_ref) {
352
- var className = _ref.className,
353
- props = _objectWithoutProperties__default["default"](_ref, _excluded);
288
+ var _useState = React.useState(mediaName),
289
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
290
+ name = _useState2[0],
291
+ setName = _useState2[1];
354
292
 
355
- return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
356
- className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({}, className, className !== null)]),
357
- withoutStyle: true,
358
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
359
- icon: freeSolidSvgIcons.faTimes,
360
- className: styles$6.icon
361
- }),
362
- iconPosition: "right"
363
- }, props));
364
- };
293
+ var _useState3 = React.useState(mediaDescription),
294
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
295
+ description = _useState4[0],
296
+ setDescription = _useState4[1];
365
297
 
366
- CloseButton.propTypes = propTypes$6;
367
- CloseButton.defaultProps = defaultProps$6;
298
+ var _useState5 = React.useState(mediaTags.map(getOptionValue)),
299
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
300
+ tags = _useState6[0],
301
+ setTags = _useState6[1];
368
302
 
369
- var styles$5 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
303
+ var _useState7 = React.useState(false),
304
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
305
+ changed = _useState8[0],
306
+ setChanged = _useState8[1];
370
307
 
371
- var propTypes$5 = {
372
- filters: PropTypes__default["default"].shape({
373
- types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
374
- tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
375
- users: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
376
- usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
377
- }),
378
- onChange: PropTypes__default["default"].func,
379
- onReset: PropTypes__default["default"].func,
380
- sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
381
- className: PropTypes__default["default"].string
382
- };
383
- var defaultProps$5 = {
384
- filters: null,
385
- onChange: null,
386
- onReset: null,
387
- sections: [],
388
- className: null
389
- };
390
-
391
- var ActiveFilters = function ActiveFilters(_ref) {
392
- var filters = _ref.filters,
393
- onChange = _ref.onChange,
394
- onReset = _ref.onReset,
395
- sections = _ref.sections,
396
- className = _ref.className;
397
- var handleReset = React.useCallback(function () {
398
- if (onReset !== null) {
399
- onReset();
400
- }
401
- }, [onReset]);
402
- var removeFilter = React.useCallback(function (key, activeValue) {
403
- var newFilterValue = filters[key].filter(function (it) {
404
- return it !== activeValue;
308
+ var onTagChange = React.useCallback(function (val) {
309
+ setTags(val);
310
+ setChanged(true);
311
+ }, [tags, setTags, setChanged]);
312
+ var onNameChange = React.useCallback(function (val) {
313
+ setName(val);
314
+ setChanged(true);
315
+ }, [tags, setName, setChanged]);
316
+ var onDescriptionChange = React.useCallback(function (val) {
317
+ setDescription(val);
318
+ setChanged(true);
319
+ }, [tags, setDescription, setChanged]);
320
+ var onSave = React.useCallback(function () {
321
+ return update(mediaId, {
322
+ name: name,
323
+ tags: tags,
324
+ description: description
325
+ }).then(function () {
326
+ setChanged(false);
405
327
  });
406
- var newValue = newFilterValue.length > 0 ? newFilterValue : null;
407
-
408
- if (onChange !== null) {
409
- onChange(key, newValue);
328
+ }, [mediaId, name, tags, description, metadata, update]);
329
+ React.useEffect(function () {
330
+ if (media !== null) {
331
+ setTags(mediaTags);
332
+ setName(mediaName);
333
+ setDescription(mediaDescription);
334
+ } else {
335
+ setTags([]);
336
+ setName(null);
337
+ setDescription(null);
410
338
  }
411
- }, [onChange, filters]);
412
- var hasValue = Object.keys(filters).reduce(function (oneHasValue, key) {
413
- return oneHasValue || filters[key] !== null;
414
- }, false);
339
+
340
+ setChanged(false);
341
+ }, [media, setTags, setName, setDescription, setChanged]);
342
+ var TextField = contexts.useFieldComponent('text');
343
+ var TokensField = contexts.useFieldComponent('tokens');
415
344
  return /*#__PURE__*/React__default["default"].createElement("div", {
416
- className: classNames__default["default"](['w-100', styles$5.container, _defineProperty__default["default"]({}, className, className)])
417
- }, hasValue ? /*#__PURE__*/React__default["default"].createElement("div", {
418
- className: styles$5.heading
345
+ className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className)])
346
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
347
+ className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({
348
+ 'bg-light': type === 'audio',
349
+ 'bg-black': type === 'image'
350
+ }, styles$5.video, type === 'video')])
351
+ }, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("video", {
352
+ className: styles$5.player,
353
+ controls: true,
354
+ src: url
355
+ })) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
356
+ className: styles$5.audio
357
+ }, /*#__PURE__*/React__default["default"].createElement("audio", {
358
+ className: styles$5.player,
359
+ controls: true,
360
+ src: url
361
+ }))) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
362
+ src: thumbnail,
363
+ className: styles$5.image,
364
+ alt: filename
365
+ }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
366
+ className: "p-2"
419
367
  }, /*#__PURE__*/React__default["default"].createElement("div", {
420
- className: styles$5.title
368
+ className: "tags mb-4"
369
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
370
+ className: "form-group"
371
+ }, /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
372
+ id: "kBz8vF",
373
+ defaultMessage: [{
374
+ "type": 0,
375
+ "value": "Name"
376
+ }]
377
+ })), /*#__PURE__*/React__default["default"].createElement(TextField, {
378
+ value: name,
379
+ onChange: onNameChange
380
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
381
+ className: "form-group"
382
+ }, /*#__PURE__*/React__default["default"].createElement("h6", {
383
+ className: "mb-0"
421
384
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
422
- id: "t2cFdl",
385
+ id: "YJZtWR",
423
386
  defaultMessage: [{
424
387
  "type": 0,
425
- "value": "Active filters"
388
+ "value": "Description"
426
389
  }]
427
- })), /*#__PURE__*/React__default["default"].createElement(CloseButton, {
428
- className: styles$5.resetButton,
429
- onClick: handleReset
430
- }, /*#__PURE__*/React__default["default"].createElement("u", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
431
- id: "/T/UDH",
390
+ })), /*#__PURE__*/React__default["default"].createElement("p", {
391
+ className: "mb-1"
392
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
393
+ id: "EDFyUp",
432
394
  defaultMessage: [{
433
395
  "type": 0,
434
- "value": "Remove all"
396
+ "value": "Alternative text (accessibility)"
435
397
  }]
436
- })))) : null, filters !== null ? Object.keys(filters).map(function (key) {
437
- var section = sections.find(function (s) {
438
- return s.value === key;
439
- });
440
- return section && filters[key] !== null ? filters[key].map(function (activeValue) {
441
- var current = section.items.find(function (s) {
442
- return s.value === activeValue;
443
- });
444
-
445
- var _ref3 = current || {},
446
- _ref3$label = _ref3.label,
447
- label = _ref3$label === void 0 ? '' : _ref3$label;
448
-
449
- return /*#__PURE__*/React__default["default"].createElement(components.Button, {
450
- className: styles$5.activeTag,
451
- key: "filter-button-".concat(activeValue),
452
- type: "submit",
453
- size: "sm",
454
- label: /*#__PURE__*/React__default["default"].createElement("span", null, section.label, " : ", label),
455
- theme: "secondary",
456
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
457
- icon: freeSolidSvgIcons.faTimes
458
- }),
459
- iconPosition: "right",
460
- onClick: function onClick() {
461
- return removeFilter(key, activeValue);
462
- }
463
- });
464
- }) : null;
465
- }) : null);
398
+ }))), /*#__PURE__*/React__default["default"].createElement(TextField, {
399
+ value: description,
400
+ onChange: onDescriptionChange
401
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
402
+ className: "form-group"
403
+ }, /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
404
+ id: "4fHMVj",
405
+ defaultMessage: [{
406
+ "type": 0,
407
+ "value": "Tags"
408
+ }]
409
+ })), /*#__PURE__*/React__default["default"].createElement(TokensField, {
410
+ value: tags,
411
+ options: finalTags // loadOptions={loadTags}
412
+ ,
413
+ getOptionLabel: getOptionLabel,
414
+ getOptionValue: getOptionValue,
415
+ getNewOptionData: getNewOptionData,
416
+ onChange: onTagChange
417
+ })), changed ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
418
+ theme: "primary",
419
+ onClick: onSave
420
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
421
+ id: "qIw1nW",
422
+ defaultMessage: [{
423
+ "type": 0,
424
+ "value": "Save"
425
+ }]
426
+ })) : null), /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
427
+ id: "c9VwT/",
428
+ defaultMessage: [{
429
+ "type": 0,
430
+ "value": "Technical details"
431
+ }]
432
+ })), /*#__PURE__*/React__default["default"].createElement("ul", {
433
+ className: "list-group"
434
+ }, type !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
435
+ className: "list-group-item py-2 px-2"
436
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
437
+ className: "row"
438
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
439
+ className: "col-4 text-muted"
440
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
441
+ id: "OkNUmk",
442
+ defaultMessage: [{
443
+ "type": 0,
444
+ "value": "Type"
445
+ }]
446
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
447
+ className: "col text-capitalize"
448
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, type)))) : null, filename !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
449
+ className: "list-group-item py-2 px-2"
450
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
451
+ className: "row"
452
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
453
+ className: "col-4 text-muted"
454
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
455
+ id: "aovRFH",
456
+ defaultMessage: [{
457
+ "type": 0,
458
+ "value": "Filename"
459
+ }]
460
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
461
+ className: "col"
462
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, filename)))) : null, duration ? /*#__PURE__*/React__default["default"].createElement("li", {
463
+ className: "list-group-item py-2 px-2"
464
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
465
+ className: "row"
466
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
467
+ className: "col-4 text-muted"
468
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
469
+ id: "eoW0tZ",
470
+ defaultMessage: [{
471
+ "type": 0,
472
+ "value": "Duration"
473
+ }]
474
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
475
+ className: "col"
476
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, duration)))) : null, width !== null || height !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
477
+ className: "list-group-item py-2 px-2"
478
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
479
+ className: "row"
480
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
481
+ className: "col-4 text-muted"
482
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
483
+ id: "mv37oK",
484
+ defaultMessage: [{
485
+ "type": 0,
486
+ "value": "Dimension"
487
+ }]
488
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
489
+ className: "col"
490
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, width, "x", height)))) : null, size !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
491
+ className: "list-group-item py-2 px-2"
492
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
493
+ className: "row"
494
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
495
+ className: "col-4 text-muted"
496
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
497
+ id: "liyV7Y",
498
+ defaultMessage: [{
499
+ "type": 0,
500
+ "value": "Size"
501
+ }]
502
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
503
+ className: "col"
504
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, prettyBytes__default["default"](size))))) : null, description !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
505
+ className: "list-group-item py-2 px-2"
506
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
507
+ className: "row"
508
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
509
+ className: "col-4 text-muted"
510
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
511
+ id: "7uyslu",
512
+ defaultMessage: [{
513
+ "type": 0,
514
+ "value": "Description"
515
+ }]
516
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
517
+ className: "col"
518
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, description)))) : null, user !== null && user.name ? /*#__PURE__*/React__default["default"].createElement("li", {
519
+ className: "list-group-item py-2 px-2"
520
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
521
+ className: "row"
522
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
523
+ className: "col-4 text-muted"
524
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
525
+ id: "sUR1xV",
526
+ defaultMessage: [{
527
+ "type": 0,
528
+ "value": "Author"
529
+ }]
530
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
531
+ className: "col"
532
+ }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null)));
466
533
  };
467
534
 
468
- ActiveFilters.propTypes = propTypes$5;
469
- ActiveFilters.defaultProps = defaultProps$5;
535
+ MediaMetadata.propTypes = propTypes$8;
536
+ MediaMetadata.defaultProps = defaultProps$8;
470
537
 
471
- var useSearchSections = function useSearchSections(_ref) {
538
+ var useSearchFilters = function useSearchFilters(_ref) {
472
539
  var _ref$recent = _ref.recent,
473
540
  recent = _ref$recent === void 0 ? [] : _ref$recent,
474
541
  _ref$tags = _ref.tags,
@@ -478,26 +545,28 @@ var useSearchSections = function useSearchSections(_ref) {
478
545
  _ref$sources = _ref.sources,
479
546
  upstreamSources = _ref$sources === void 0 ? [] : _ref$sources,
480
547
  _ref$withType = _ref.withType,
481
- withType = _ref$withType === void 0 ? false : _ref$withType;
482
- var sources = [{
548
+ withType = _ref$withType === void 0 ? false : _ref$withType,
549
+ _ref$storyId = _ref.storyId,
550
+ storyId = _ref$storyId === void 0 ? null : _ref$storyId;
551
+ var sources = [].concat(_toConsumableArray__default["default"](storyId !== null ? [{
483
552
  label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
484
- id: "xAzv6g",
553
+ id: "eiaIIB",
485
554
  defaultMessage: [{
486
555
  "type": 0,
487
- "value": "All sources"
556
+ "value": "This Micromag"
488
557
  }]
489
558
  }),
490
- value: 'all'
491
- }, {
559
+ value: storyId
560
+ }] : []), [{
492
561
  label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
493
- id: "eiaIIB",
562
+ id: "xAzv6g",
494
563
  defaultMessage: [{
495
564
  "type": 0,
496
- "value": "This Micromag"
565
+ "value": "All sources"
497
566
  }]
498
567
  }),
499
- value: 'micromag'
500
- }].concat(_toConsumableArray__default["default"](team.length > 0 ? [{
568
+ value: 'all'
569
+ }], _toConsumableArray__default["default"](team !== null && team.length > 0 ? [{
501
570
  label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
502
571
  id: "/62oe4",
503
572
  defaultMessage: [{
@@ -595,776 +664,691 @@ var useSearchSections = function useSearchSections(_ref) {
595
664
  "value": "Added by"
596
665
  }]
597
666
  }),
598
- items: team
599
- }, {
600
- value: 'usage',
601
- label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
602
- id: "mOSkbf",
603
- defaultMessage: [{
604
- "type": 0,
605
- "value": "Usage"
606
- }]
607
- }),
608
- items: usage
609
- }].filter(function (it) {
610
- return it !== null;
611
- });
612
- return {
613
- sources: sources,
614
- sections: sections,
615
- types: types
616
- };
617
- };
618
-
619
- var filtersValue = PropTypes__default["default"].shape({
620
- search: PropTypes__default["default"].string
621
- });
622
- PropTypes__default["default"].shape({
623
- types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
624
- tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
625
- users: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
626
- usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
627
- });
628
-
629
- var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner"};
630
-
631
- var propTypes$4 = {
632
- filters: filtersValue,
633
- media: core.PropTypes.media,
634
- withoutTitle: PropTypes__default["default"].bool,
635
- withoutSource: PropTypes__default["default"].bool,
636
- withoutType: PropTypes__default["default"].bool,
637
- onClickAdd: PropTypes__default["default"].func,
638
- onClickCancel: PropTypes__default["default"].func,
639
- onFocusSearch: PropTypes__default["default"].func,
640
- onFiltersChange: PropTypes__default["default"].func,
641
- onClickBack: PropTypes__default["default"].func,
642
- className: PropTypes__default["default"].string
643
- };
644
- var defaultProps$4 = {
645
- filters: null,
646
- media: null,
647
- withoutTitle: false,
648
- withoutSource: false,
649
- withoutType: true,
650
- onClickAdd: null,
651
- onClickCancel: null,
652
- onFocusSearch: null,
653
- onFiltersChange: null,
654
- onClickBack: null,
655
- className: null
656
- };
657
-
658
- var Navbar = function Navbar(_ref) {
659
- var filters = _ref.filters,
660
- media = _ref.media,
661
- withoutTitle = _ref.withoutTitle,
662
- withoutSource = _ref.withoutSource,
663
- withoutType = _ref.withoutType,
664
- className = _ref.className,
665
- onClickAdd = _ref.onClickAdd;
666
- _ref.onClickCancel;
667
- var onFocusSearch = _ref.onFocusSearch,
668
- onFiltersChange = _ref.onFiltersChange,
669
- onClickBack = _ref.onClickBack;
670
- var throttle = React.useRef(null);
671
-
672
- var _useState = React.useState(false),
673
- _useState2 = _slicedToArray__default["default"](_useState, 2),
674
- open = _useState2[0],
675
- setOpen = _useState2[1]; // TODO: get data from api for real testing
676
-
677
-
678
- var _useMediasRecentSearc = data.useMediasRecentSearches(),
679
- getSearches = _useMediasRecentSearc.getSearches,
680
- createSearch = _useMediasRecentSearc.createSearch;
681
-
682
- var recent = React.useMemo(function () {
683
- return getSearches();
684
- }, [getSearches]);
685
-
686
- var _useMediaTags = data.useMediaTags(),
687
- _useMediaTags$tags = _useMediaTags.tags,
688
- tags = _useMediaTags$tags === void 0 ? [] : _useMediaTags$tags; // const { team } = useOrganisationTeam();
689
-
690
-
691
- var team = [];
692
-
693
- var _useSearchFilters = useSearchSections({
694
- recent: recent.map(function (val) {
695
- return {
696
- value: val,
697
- label: val
698
- };
699
- }),
700
- tags: tags !== null ? tags.map(function (t) {
701
- return {
702
- value: t.name,
703
- label: t.name
704
- };
705
- }) : [],
706
- team: team,
707
- withType: !withoutType
708
- }),
709
- sources = _useSearchFilters.sources,
710
- sections = _useSearchFilters.sections;
711
-
712
- var searchValue = filters !== null ? filters.search || null : null;
713
- var hasFilter = filters !== null ? Object.keys(filters).reduce(function (acc, val) {
714
- if (val !== 'type' && val !== 'search' && val !== 'source' && filters[val] !== null && filters[val].length > 0) {
715
- return true;
716
- }
717
-
718
- return acc;
719
- }, false) : false;
720
- var onFilterChange = React.useCallback(function (type, value) {
721
- var isOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
722
-
723
- var newFiltersValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, filters), {}, _defineProperty__default["default"]({}, type, value));
724
-
725
- if (onFiltersChange !== null) {
726
- onFiltersChange(newFiltersValue);
727
- }
728
-
729
- setOpen(isOpen);
730
- }, [filters, onFiltersChange, setOpen]);
731
- var onFiltersReset = React.useCallback(function () {
732
- onFiltersChange({
733
- type: filters.type || null,
734
- search: filters.search || null,
735
- source: filters.source || null
736
- });
737
- setOpen(false);
738
- }, [filters, onFiltersChange]);
739
- var onSearchChange = React.useCallback(function (value) {
740
- if (throttle.current !== null) {
741
- clearTimeout(throttle.current);
742
- }
743
-
744
- throttle.current = setTimeout(function () {
745
- createSearch(value);
746
- throttle.current = null;
747
- }, 5000);
748
- onFilterChange('search', value, !!value);
749
- setOpen(false);
750
- }, [onFilterChange, createSearch, setOpen, throttle]);
751
- var onSourceChange = React.useCallback(function (value) {
752
- onFilterChange('source', value);
753
- }, [onFilterChange]);
754
- var onSearchFocus = React.useCallback(function () {
755
- if (onFocusSearch !== null) {
756
- onFocusSearch();
757
- }
758
-
759
- setOpen(true);
760
- });
761
- var onClear = React.useCallback(function () {
762
- setOpen(false);
763
- }, [setOpen]);
764
- var onToggleMenu = React.useCallback(function () {
765
- setOpen(!open);
766
- }, [open, setOpen]);
767
- var title = !withoutTitle ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
768
- id: "JV5hRr",
769
- defaultMessage: [{
770
- "type": 0,
771
- "value": "Media gallery"
772
- }]
773
- }) : null;
774
- return /*#__PURE__*/React__default["default"].createElement("nav", {
775
- className: classNames__default["default"]([styles$4.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
776
- }, /*#__PURE__*/React__default["default"].createElement("div", {
777
- className: styles$4.inner
778
- }, !withoutSource && media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
779
- className: "d-flex w-100 flex-nowrap justify-content-center"
780
- }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
781
- items: sources,
782
- value: filters.source || null,
783
- onChange: onSourceChange
784
- })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
785
- className: "w-100 d-flex flex-nowrap justify-content-between"
786
- }, media !== null ? /*#__PURE__*/React__default["default"].createElement("form", {
787
- className: classNames__default["default"](['form-inline', 'mr-2'])
788
- }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
789
- theme: "secondary",
790
- outline: true,
791
- size: "sm",
792
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
793
- icon: freeSolidSvgIcons.faChevronLeft
794
- }),
795
- onClick: onClickBack
796
- })) : null, /*#__PURE__*/React__default["default"].createElement("strong", {
797
- className: "navbar-text mr-auto w-100 d-flex align-items-center justify-content-between"
798
- }, media !== null ? media.name : title, media === null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
799
- theme: "primary",
800
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
801
- icon: freeSolidSvgIcons.faPlus
802
- }),
803
- onClick: onClickAdd
804
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
805
- id: "Tt4jN1",
806
- defaultMessage: [{
807
- "type": 0,
808
- "value": "Add"
809
- }]
810
- })) : null)), media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
811
- className: "d-flex w-100 flex-nowrap justify-content-between"
812
- }, /*#__PURE__*/React__default["default"].createElement(Search, {
813
- value: searchValue,
814
- onChange: onSearchChange,
815
- onFocus: onSearchFocus,
816
- onClickIcon: onToggleMenu,
817
- className: classNames__default["default"](['form-inline'])
818
- }), /*#__PURE__*/React__default["default"].createElement("form", {
819
- className: classNames__default["default"](['form-inline'])
820
- }, open ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
821
- className: "ml-2",
822
- theme: "primary",
823
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
824
- icon: freeSolidSvgIcons.faTimes
667
+ items: team
668
+ }, {
669
+ value: 'usage',
670
+ label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
671
+ id: "mOSkbf",
672
+ defaultMessage: [{
673
+ "type": 0,
674
+ "value": "Usage"
675
+ }]
825
676
  }),
826
- onClick: onClear
827
- }) : null)), open ? /*#__PURE__*/React__default["default"].createElement("div", {
828
- className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
829
- }, /*#__PURE__*/React__default["default"].createElement(SearchFilters, {
830
- filters: filters,
831
- sections: sections,
832
- onChange: onFilterChange
833
- })) : null) : null, hasFilter && !open && media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
834
- className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
835
- }, /*#__PURE__*/React__default["default"].createElement(ActiveFilters, {
836
- filters: filters,
677
+ items: usage
678
+ }].filter(function (it) {
679
+ return it !== null;
680
+ });
681
+ return {
682
+ sources: sources,
837
683
  sections: sections,
838
- onChange: onFilterChange,
839
- onReset: onFiltersReset
840
- })) : null));
684
+ types: types
685
+ };
841
686
  };
842
687
 
843
- Navbar.propTypes = propTypes$4;
844
- Navbar.defaultProps = defaultProps$4;
688
+ var filtersValue = PropTypes__default["default"].shape({
689
+ search: PropTypes__default["default"].string
690
+ });
691
+ PropTypes__default["default"].shape({
692
+ types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
693
+ tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
694
+ users: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
695
+ usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
696
+ });
845
697
 
846
- var middleEllipsis = function middleEllipsis(string, maxLength) {
847
- if (!string) return string;
848
- if (maxLength < 1) return string;
849
- if (string.length <= maxLength) return string;
850
- if (maxLength === 1) return "".concat(string.substring(0, 1), "...");
851
- var midpoint = Math.ceil(string.length / 2);
852
- var toremove = string.length - maxLength;
853
- var lstrip = Math.ceil(toremove / 2);
854
- var rstrip = toremove - lstrip;
855
- return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
856
- };
698
+ var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner"};
857
699
 
858
- var styles$3 = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon","infoButton":"micromag-media-gallery-items-gallery-item-infoButton"};
700
+ var styles$3 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label"};
859
701
 
860
- var propTypes$3 = {
861
- item: core.PropTypes.media,
862
- width: PropTypes__default["default"].number,
863
- selected: PropTypes__default["default"].bool,
864
- withInfoButton: PropTypes__default["default"].bool,
865
- className: PropTypes__default["default"].string,
866
- onClick: PropTypes__default["default"].func,
867
- onClickInfo: PropTypes__default["default"].func
702
+ var propTypes$7 = {
703
+ value: PropTypes__default["default"].string,
704
+ items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
705
+ label: core.PropTypes.label,
706
+ value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
707
+ active: PropTypes__default["default"].bool
708
+ })),
709
+ onChange: PropTypes__default["default"].func,
710
+ className: PropTypes__default["default"].string
868
711
  };
869
- var defaultProps$3 = {
870
- item: null,
871
- width: 0,
872
- selected: false,
873
- withInfoButton: false,
874
- className: null,
875
- onClick: null,
876
- onClickInfo: null
712
+ var defaultProps$7 = {
713
+ value: null,
714
+ items: null,
715
+ onChange: null,
716
+ className: null
877
717
  };
878
718
 
879
- var GalleryItem = function GalleryItem(_ref) {
880
- var item = _ref.item,
881
- width = _ref.width,
882
- selected = _ref.selected,
883
- withInfoButton = _ref.withInfoButton,
884
- className = _ref.className,
885
- onClick = _ref.onClick,
886
- onClickInfo = _ref.onClickInfo;
887
- var type = item.type,
888
- _item$thumbnail_url = item.thumbnail_url,
889
- thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
890
- name = item.name,
891
- size = item.size;
892
- var title = name;
719
+ var DropdownSection = function DropdownSection(_ref) {
720
+ var value = _ref.value,
721
+ items = _ref.items,
722
+ onChange = _ref.onChange,
723
+ className = _ref.className;
893
724
 
894
- if (width < 768) {
895
- title = middleEllipsis(name, Math.floor(Math.max(18, width / 2 / 9)));
896
- } else {
897
- title = middleEllipsis(name, Math.floor(Math.max(25, width / 3 / 8)));
898
- }
725
+ var _useState = React.useState(false),
726
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
727
+ open = _useState2[0],
728
+ setOpen = _useState2[1];
899
729
 
900
- return /*#__PURE__*/React__default["default"].createElement(components.Card, {
901
- image: /*#__PURE__*/React__default["default"].createElement("button", {
902
- type: "button",
903
- className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$3.imageButton]),
904
- onClick: onClick
905
- }, /*#__PURE__*/React__default["default"].createElement("div", {
906
- className: classNames__default["default"](['card-img-top', styles$3.image]),
907
- style: {
908
- backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
909
- }
910
- })),
911
- beforeBody: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withInfoButton ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
912
- className: styles$3.infoButton,
913
- onClick: onClickInfo,
914
- withoutStyle: true
915
- }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
916
- icon: freeSolidSvgIcons.faInfoCircle,
917
- className: styles$3.icon
918
- })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
919
- className: classNames__default["default"](['text-primary', styles$3.closeIcon])
920
- }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
921
- icon: freeSolidSvgIcons.faTimesCircle,
922
- className: styles$3.icon
923
- })) : null),
924
- footer: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
925
- className: styles$3.icon,
926
- icon: freeSolidSvgIcons.faPlayCircle
927
- }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
928
- className: styles$3.icon,
929
- icon: freeSolidSvgIcons.faHeadphonesAlt
930
- }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
931
- className: classNames__default["default"](['text-truncate', styles$3.label])
932
- }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
933
- className: "text-muted ml-1"
934
- }, size) : null)),
935
- theme: selected ? 'primary' : null,
936
- className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({
937
- 'border-primary': selected
938
- }, className, className !== null)]),
939
- footerClassName: classNames__default["default"](['p-2', styles$3.footer]),
940
- onClickFooter: onClick
730
+ var currentItem = items.find(function (i) {
731
+ return i.value === value;
941
732
  });
733
+ var onOpen = React.useCallback(function () {
734
+ setOpen(!open);
735
+ }, [open, setOpen]);
736
+ var onBlur = React.useCallback(function () {
737
+ // Work around the event call order
738
+ setTimeout(function () {
739
+ setOpen(false);
740
+ }, 300);
741
+ }, [setOpen]);
742
+ var onItemClick = React.useCallback(function (e) {
743
+ var val = e.target.dataset.value || null;
744
+ setOpen(false);
745
+ onChange(val);
746
+ }, [setOpen]);
747
+ return items !== null && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
748
+ className: classNames__default["default"]([styles$3.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
749
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
750
+ className: styles$3.label
751
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
752
+ id: "9ZdD+Q",
753
+ defaultMessage: [{
754
+ "type": 0,
755
+ "value": "Library for"
756
+ }]
757
+ })), /*#__PURE__*/React__default["default"].createElement("button", {
758
+ className: classNames__default["default"]([styles$3.dropdownToggle, 'dropdown-toggle', {
759
+ open: open === true
760
+ }]),
761
+ type: "button",
762
+ onClick: onOpen,
763
+ onBlur: onBlur
764
+ }, (currentItem ? currentItem.label : null) || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
765
+ id: "15GBmG",
766
+ defaultMessage: [{
767
+ "type": 0,
768
+ "value": "All"
769
+ }]
770
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
771
+ className: classNames__default["default"]([styles$3.dropdown, 'dropdown-menu', {
772
+ show: open === true
773
+ }])
774
+ }, items.map(function (_ref3) {
775
+ var label = _ref3.label,
776
+ itemValue = _ref3.value;
777
+ var itemClassNames = classNames__default["default"](['dropdown-item', {
778
+ active: itemValue === value
779
+ }]);
780
+ return /*#__PURE__*/React__default["default"].createElement("button", {
781
+ className: itemClassNames,
782
+ type: "button",
783
+ key: "drop-".concat(itemValue),
784
+ onClick: onItemClick,
785
+ "data-value": itemValue
786
+ }, label);
787
+ }))) : null;
942
788
  };
943
789
 
944
- GalleryItem.propTypes = propTypes$3;
945
- GalleryItem.defaultProps = defaultProps$3;
946
-
947
- var styles$2 = {};
790
+ DropdownSection.propTypes = propTypes$7;
791
+ DropdownSection.defaultProps = defaultProps$7;
948
792
 
949
- var propTypes$2 = {
950
- items: core.PropTypes.medias,
951
- selectedItem: core.PropTypes.media,
952
- withInfoButton: PropTypes__default["default"].bool,
953
- isSmall: PropTypes__default["default"].bool,
954
- selectedFirst: PropTypes__default["default"].bool,
955
- className: PropTypes__default["default"].string,
956
- onClickItem: PropTypes__default["default"].func,
957
- onClickItemInfo: PropTypes__default["default"].func
958
- };
959
- var defaultProps$2 = {
960
- items: null,
961
- selectedItem: null,
962
- withInfoButton: false,
963
- isSmall: false,
964
- selectedFirst: false,
965
- className: null,
966
- onClickItem: null,
967
- onClickItemInfo: null
793
+ var propTypes$6 = {
794
+ value: PropTypes__default["default"].string,
795
+ onChange: PropTypes__default["default"].func,
796
+ onFocus: PropTypes__default["default"].func,
797
+ onBlur: PropTypes__default["default"].func,
798
+ onClickIcon: PropTypes__default["default"].func,
799
+ className: PropTypes__default["default"].string
800
+ };
801
+ var defaultProps$6 = {
802
+ value: null,
803
+ onChange: null,
804
+ onFocus: null,
805
+ onBlur: null,
806
+ onClickIcon: null,
807
+ className: null
968
808
  };
969
809
 
970
- var Gallery = function Gallery(_ref) {
971
- var items = _ref.items,
972
- selectedItem = _ref.selectedItem,
973
- withInfoButton = _ref.withInfoButton,
974
- isSmall = _ref.isSmall,
975
- selectedFirst = _ref.selectedFirst,
976
- className = _ref.className,
977
- onClickItem = _ref.onClickItem,
978
- onClickItemInfo = _ref.onClickItemInfo;
979
-
980
- var _useResizeObserver = hooks.useResizeObserver(),
981
- ref = _useResizeObserver.ref,
982
- contentRect = _useResizeObserver.entry.contentRect;
983
-
984
- var _ref2 = contentRect || {},
985
- width = _ref2.width;
810
+ var Search = function Search(_ref) {
811
+ var value = _ref.value,
812
+ onChange = _ref.onChange,
813
+ onFocus = _ref.onFocus,
814
+ onBlur = _ref.onBlur,
815
+ onClickIcon = _ref.onClickIcon,
816
+ className = _ref.className;
817
+ var intl = reactIntl.useIntl();
818
+ var onSearchChange = React.useCallback(function (e) {
819
+ var newValue = e.currentTarget.value.length > 0 ? e.currentTarget.value : null;
986
820
 
987
- var finalItems = React.useMemo(function () {
988
- if (selectedFirst && selectedItem !== null && typeof selectedItem.id !== 'undefined') {
989
- return [selectedItem].concat(_toConsumableArray__default["default"](items.filter(function (_ref3) {
990
- var id = _ref3.id;
991
- return id !== selectedItem.id;
992
- })));
821
+ if (onChange !== null) {
822
+ onChange(newValue);
823
+ }
824
+ }, [onChange]);
825
+ React.useCallback(function () {
826
+ if (onChange !== null) {
827
+ onChange('');
828
+ }
829
+ }, [onChange]);
830
+ var onClickSearchIcon = React.useCallback(function () {
831
+ if (onClickIcon !== null) {
832
+ onClickIcon();
833
+ }
834
+ }, [onClickIcon]);
835
+ return /*#__PURE__*/React__default["default"].createElement("form", {
836
+ method: "post",
837
+ className: classNames__default["default"](['w-100', _defineProperty__default["default"]({}, className, className !== null)]),
838
+ onSubmit: function onSubmit(e) {
839
+ return e.preventDefault();
993
840
  }
994
-
995
- return items;
996
- }, [selectedFirst, selectedItem, items]);
997
- return /*#__PURE__*/React__default["default"].createElement("div", {
998
- className: classNames__default["default"]([styles$2.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
999
- ref: ref
1000
841
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1001
- className: classNames__default["default"](['row', 'mx-n1', 'row-cols-2', {
1002
- 'row-cols-md-3': !isSmall
1003
- }])
1004
- }, finalItems.map(function (item) {
1005
- return /*#__PURE__*/React__default["default"].createElement("div", {
1006
- className: "col px-1 py-1",
1007
- key: "gallery-item-".concat(item.id)
1008
- }, /*#__PURE__*/React__default["default"].createElement(GalleryItem, {
1009
- item: item,
1010
- width: width,
1011
- selected: selectedItem !== null && selectedItem.id === item.id,
1012
- onClick: onClickItem !== null ? function () {
1013
- return onClickItem(item);
1014
- } : null,
1015
- onClickInfo: onClickItemInfo !== null ? function () {
1016
- return onClickItemInfo(item);
1017
- } : null,
1018
- withInfoButton: withInfoButton
1019
- }));
1020
- })));
842
+ className: "input-group w-100"
843
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
844
+ type: "span",
845
+ className: "input-group-prepend"
846
+ }, /*#__PURE__*/React__default["default"].createElement("button", {
847
+ type: "button",
848
+ className: "input-group-text reset-button",
849
+ onClick: onClickSearchIcon
850
+ }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
851
+ icon: freeSolidSvgIcons.faSearch
852
+ }))), /*#__PURE__*/React__default["default"].createElement("input", {
853
+ className: classNames__default["default"](['form-control', {
854
+ 'bg-light': !!value,
855
+ 'text-dark': value
856
+ }]),
857
+ type: "text",
858
+ value: value || '',
859
+ placeholder: intl.formatMessage({
860
+ "id": "gprXiG",
861
+ "defaultMessage": [{
862
+ "type": 0,
863
+ "value": "Search..."
864
+ }]
865
+ }),
866
+ onChange: onSearchChange,
867
+ onFocus: onFocus,
868
+ onBlur: onBlur
869
+ }), null));
1021
870
  };
1022
871
 
1023
- Gallery.propTypes = propTypes$2;
1024
- Gallery.defaultProps = defaultProps$2;
872
+ Search.propTypes = propTypes$6;
873
+ Search.defaultProps = defaultProps$6;
1025
874
 
1026
- var styles$1 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
1027
-
1028
- var propTypes$1 = {
1029
- media: core.PropTypes.media,
875
+ var propTypes$5 = {
876
+ tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
877
+ label: PropTypes__default["default"].string,
878
+ value: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].node]),
879
+ active: PropTypes__default["default"].bool
880
+ })),
881
+ parent: PropTypes__default["default"].string,
882
+ onChange: PropTypes__default["default"].func,
1030
883
  className: PropTypes__default["default"].string
1031
884
  };
1032
- var defaultProps$1 = {
1033
- media: null,
885
+ var defaultProps$5 = {
886
+ tags: null,
887
+ parent: null,
888
+ onChange: null,
1034
889
  className: null
1035
890
  };
1036
891
 
1037
- var MediaMetadata = function MediaMetadata(_ref) {
1038
- var media = _ref.media,
892
+ var TagSection = function TagSection(_ref) {
893
+ var tags = _ref.tags,
894
+ parent = _ref.parent,
895
+ onChange = _ref.onChange,
1039
896
  className = _ref.className;
897
+ var onItemChange = React.useCallback(function (e) {
898
+ var val = e.target.dataset.value || null;
899
+ onChange(val, parent);
900
+ }, [onChange, parent]);
901
+ return /*#__PURE__*/React__default["default"].createElement("div", {
902
+ className: classNames__default["default"](['d-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
903
+ }, tags !== null ? tags.map(function (_ref3) {
904
+ var label = _ref3.label,
905
+ value = _ref3.value,
906
+ active = _ref3.active;
907
+ var itemClassNames = classNames__default["default"](['btn', 'btn-sm', 'mb-1', 'mr-1', 'btn-dark', {
908
+ 'btn-primary': active === true // 'btn-outline-light': active === false,
1040
909
 
1041
- var _ref2 = media || {},
1042
- mediaId = _ref2.id,
1043
- type = _ref2.type,
1044
- _ref2$url = _ref2.url,
1045
- url = _ref2$url === void 0 ? null : _ref2$url,
1046
- _ref2$thumbnail_url = _ref2.thumbnail_url,
1047
- thumbnail = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url,
1048
- _ref2$name = _ref2.name,
1049
- mediaName = _ref2$name === void 0 ? null : _ref2$name,
1050
- _ref2$metadata = _ref2.metadata,
1051
- metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
910
+ }]);
911
+ return /*#__PURE__*/React__default["default"].createElement("button", {
912
+ className: itemClassNames,
913
+ type: "button",
914
+ key: "tag-".concat(value),
915
+ onClick: onItemChange,
916
+ "data-value": value
917
+ }, label);
918
+ }) : null);
919
+ };
1052
920
 
1053
- var _ref3 = metadata || {},
1054
- _ref3$filename = _ref3.filename,
1055
- filename = _ref3$filename === void 0 ? null : _ref3$filename,
1056
- _ref3$size = _ref3.size,
1057
- size = _ref3$size === void 0 ? null : _ref3$size,
1058
- _ref3$width = _ref3.width,
1059
- width = _ref3$width === void 0 ? null : _ref3$width,
1060
- _ref3$height = _ref3.height,
1061
- height = _ref3$height === void 0 ? null : _ref3$height,
1062
- _ref3$duration = _ref3.duration,
1063
- duration = _ref3$duration === void 0 ? null : _ref3$duration,
1064
- _ref3$user = _ref3.user,
1065
- user = _ref3$user === void 0 ? null : _ref3$user,
1066
- _ref3$description = _ref3.description,
1067
- mediaDescription = _ref3$description === void 0 ? null : _ref3$description,
1068
- _ref3$tags = _ref3.tags,
1069
- mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags; // const api = useApi();
921
+ TagSection.propTypes = propTypes$5;
922
+ TagSection.defaultProps = defaultProps$5;
1070
923
 
924
+ var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
1071
925
 
1072
- var story = contexts.useStory();
926
+ var propTypes$4 = {
927
+ filters: PropTypes__default["default"].object,
928
+ // eslint-disable-line
929
+ sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
930
+ onChange: PropTypes__default["default"].func,
931
+ className: PropTypes__default["default"].string
932
+ };
933
+ var defaultProps$4 = {
934
+ filters: null,
935
+ sections: [],
936
+ onChange: null,
937
+ className: null
938
+ };
1073
939
 
1074
- var _ref4 = story || {},
1075
- _ref4$id = _ref4.id,
1076
- documentId = _ref4$id === void 0 ? null : _ref4$id;
940
+ var SearchFilters = function SearchFilters(_ref) {
941
+ var filters = _ref.filters,
942
+ sections = _ref.sections,
943
+ onChange = _ref.onChange,
944
+ className = _ref.className;
945
+ var getActive = React.useCallback(function (items, sectionFilters) {
946
+ return items !== null ? items.map(function (it) {
947
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
948
+ active: sectionFilters ? !!sectionFilters.find(function (f) {
949
+ return f === it.value;
950
+ }) : false
951
+ });
952
+ }) : [];
953
+ }, []);
954
+ var activeSections = React.useMemo(function () {
955
+ return sections.map(function (section) {
956
+ return _objectSpread__default["default"](_objectSpread__default["default"]({}, section), {}, {
957
+ items: getActive(section.items, filters[section.value])
958
+ });
959
+ });
960
+ }, [getActive, sections, filters]);
961
+ var onSectionChange = React.useCallback(function (data, section) {
962
+ var val = filters[section] ? filters[section] : [];
963
+ var found = !!val.find(function (f) {
964
+ return f === data;
965
+ });
1077
966
 
1078
- var _useMediaTags = data.useMediaTags(),
1079
- usedTags = _useMediaTags.tags; // const { authors: usedAuthors } = useMediaAuthors();
967
+ if (found) {
968
+ onChange(section, val.filter(function (f) {
969
+ return f !== data;
970
+ }));
971
+ } else if (data) {
972
+ if (section === 'recent') {
973
+ onChange('search', data);
974
+ } else if (section === 'usage') {
975
+ onChange(section, [data]);
976
+ } else {
977
+ onChange(section, [].concat(_toConsumableArray__default["default"](val), [data]));
978
+ }
979
+ }
980
+ }, [filters, onChange]);
981
+ return /*#__PURE__*/React__default["default"].createElement("div", {
982
+ className: classNames__default["default"]([styles$2.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
983
+ }, activeSections.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
984
+ className: classNames__default["default"](['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
985
+ }, activeSections.map(function (_ref3) {
986
+ var value = _ref3.value,
987
+ label = _ref3.label,
988
+ items = _ref3.items;
989
+ return items.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
990
+ key: "filter-".concat(value),
991
+ className: classNames__default["default"]([styles$2.section, 'py-2'])
992
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
993
+ className: classNames__default["default"]([styles$2.title, 'm-0'])
994
+ }, label), /*#__PURE__*/React__default["default"].createElement(TagSection, {
995
+ className: classNames__default["default"]([styles$2.tags]),
996
+ tags: items,
997
+ parent: value,
998
+ onChange: onSectionChange
999
+ })) : null;
1000
+ })) : null);
1001
+ };
1080
1002
 
1003
+ SearchFilters.propTypes = propTypes$4;
1004
+ SearchFilters.defaultProps = defaultProps$4;
1081
1005
 
1082
- var _useMediaUpdate = data.useMediaUpdate(),
1083
- update = _useMediaUpdate.update;
1006
+ var styles$1 = {"container":"micromag-media-gallery-buttons-close-container"};
1084
1007
 
1085
- console.log(story, documentId); // eslint-disable-line
1086
- // const loadTags = useCallback(
1087
- // (input) =>
1088
- // api.medias.getTags(
1089
- // {
1090
- // search: input,
1091
- // },
1092
- // 5,
1093
- // ),
1094
- // [api],
1095
- // );
1096
-
1097
- var getOptionLabel = React.useCallback(function (_ref5) {
1098
- var name = _ref5.name;
1099
- return name;
1100
- }, []);
1101
- var getOptionValue = React.useCallback(function (_ref6) {
1102
- var name = _ref6.name;
1103
- return name;
1104
- }, []);
1105
- var getNewOptionData = React.useCallback(function (inputValue) {
1106
- return {
1107
- name: inputValue
1108
- };
1109
- }, []);
1110
- var allTags = React.useMemo(function () {
1111
- return usedTags !== null ? uniqBy__default["default"](mediaTags.concat(usedTags), function (_ref7) {
1112
- var id = _ref7.id;
1113
- return id;
1114
- }) : mediaTags;
1115
- }, [mediaTags, usedTags]);
1008
+ var _excluded = ["className"];
1009
+ var propTypes$3 = {
1010
+ className: PropTypes__default["default"].string
1011
+ };
1012
+ var defaultProps$3 = {
1013
+ className: null
1014
+ };
1116
1015
 
1117
- var _useState = React.useState(mediaName),
1118
- _useState2 = _slicedToArray__default["default"](_useState, 2),
1119
- name = _useState2[0],
1120
- setName = _useState2[1];
1016
+ var CloseButton = function CloseButton(_ref) {
1017
+ var className = _ref.className,
1018
+ props = _objectWithoutProperties__default["default"](_ref, _excluded);
1121
1019
 
1122
- var _useState3 = React.useState(mediaDescription),
1123
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
1124
- description = _useState4[0],
1125
- setDescription = _useState4[1];
1020
+ return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
1021
+ className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)]),
1022
+ withoutStyle: true,
1023
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1024
+ icon: freeSolidSvgIcons.faTimes,
1025
+ className: styles$1.icon
1026
+ }),
1027
+ iconPosition: "right"
1028
+ }, props));
1029
+ };
1126
1030
 
1127
- var _useState5 = React.useState(mediaTags.map(getOptionValue)),
1128
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
1129
- tags = _useState6[0],
1130
- setTags = _useState6[1];
1031
+ CloseButton.propTypes = propTypes$3;
1032
+ CloseButton.defaultProps = defaultProps$3;
1131
1033
 
1132
- var _useState7 = React.useState(false),
1133
- _useState8 = _slicedToArray__default["default"](_useState7, 2),
1134
- changed = _useState8[0],
1135
- setChanged = _useState8[1];
1034
+ var styles = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
1136
1035
 
1137
- var onTagChange = React.useCallback(function (val) {
1138
- setTags(val);
1139
- setChanged(true);
1140
- }, [tags, setTags, setChanged]);
1141
- var onNameChange = React.useCallback(function (val) {
1142
- setName(val);
1143
- setChanged(true);
1144
- }, [tags, setName, setChanged]);
1145
- var onDescriptionChange = React.useCallback(function (val) {
1146
- setDescription(val);
1147
- setChanged(true);
1148
- }, [tags, setDescription, setChanged]);
1149
- var onSave = React.useCallback(function () {
1150
- return update(mediaId, {
1151
- name: name,
1152
- tags: tags,
1153
- description: description
1154
- }).then(function () {
1155
- setChanged(false);
1156
- });
1157
- }, [mediaId, name, tags, description, metadata, update]);
1158
- React.useEffect(function () {
1159
- if (media !== null) {
1160
- setTags(mediaTags);
1161
- setName(mediaName);
1162
- setDescription(mediaDescription);
1163
- } else {
1164
- setTags([]);
1165
- setName(null);
1166
- setDescription(null);
1036
+ var propTypes$2 = {
1037
+ filters: PropTypes__default["default"].shape({
1038
+ types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
1039
+ tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
1040
+ users: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
1041
+ usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
1042
+ }),
1043
+ onChange: PropTypes__default["default"].func,
1044
+ onReset: PropTypes__default["default"].func,
1045
+ sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
1046
+ className: PropTypes__default["default"].string
1047
+ };
1048
+ var defaultProps$2 = {
1049
+ filters: null,
1050
+ onChange: null,
1051
+ onReset: null,
1052
+ sections: [],
1053
+ className: null
1054
+ };
1055
+
1056
+ var ActiveFilters = function ActiveFilters(_ref) {
1057
+ var filters = _ref.filters,
1058
+ onChange = _ref.onChange,
1059
+ onReset = _ref.onReset,
1060
+ sections = _ref.sections,
1061
+ className = _ref.className;
1062
+ var handleReset = React.useCallback(function () {
1063
+ if (onReset !== null) {
1064
+ onReset();
1167
1065
  }
1066
+ }, [onReset]);
1067
+ var removeFilter = React.useCallback(function (key, activeValue) {
1068
+ var newFilterValue = filters[key].filter(function (it) {
1069
+ return it !== activeValue;
1070
+ });
1071
+ var newValue = newFilterValue.length > 0 ? newFilterValue : null;
1168
1072
 
1169
- setChanged(false);
1170
- }, [media, setTags, setName, setDescription, setChanged]);
1171
- var TextField = contexts.useFieldComponent('text');
1172
- var TokensField = contexts.useFieldComponent('tokens');
1073
+ if (onChange !== null) {
1074
+ onChange(key, newValue);
1075
+ }
1076
+ }, [onChange, filters]);
1077
+ var hasValue = Object.keys(filters).reduce(function (oneHasValue, key) {
1078
+ return oneHasValue || filters[key] !== null;
1079
+ }, false);
1173
1080
  return /*#__PURE__*/React__default["default"].createElement("div", {
1174
- className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className)])
1175
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1176
- className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({
1177
- 'bg-light': type === 'audio',
1178
- 'bg-black': type === 'image'
1179
- }, styles$1.video, type === 'video')])
1180
- }, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("video", {
1181
- className: styles$1.player,
1182
- controls: true,
1183
- src: url
1184
- })) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1185
- className: styles$1.audio
1186
- }, /*#__PURE__*/React__default["default"].createElement("audio", {
1187
- className: styles$1.player,
1188
- controls: true,
1189
- src: url
1190
- }))) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
1191
- src: thumbnail,
1192
- className: styles$1.image,
1193
- alt: filename
1194
- }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
1195
- className: "p-2"
1196
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1197
- className: "tags mb-4"
1198
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1199
- className: "form-group"
1200
- }, /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1201
- id: "kBz8vF",
1202
- defaultMessage: [{
1203
- "type": 0,
1204
- "value": "Name"
1205
- }]
1206
- })), /*#__PURE__*/React__default["default"].createElement(TextField, {
1207
- value: name,
1208
- onChange: onNameChange
1209
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1210
- className: "form-group"
1211
- }, /*#__PURE__*/React__default["default"].createElement("h6", {
1212
- className: "mb-0"
1213
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1214
- id: "YJZtWR",
1215
- defaultMessage: [{
1216
- "type": 0,
1217
- "value": "Description"
1218
- }]
1219
- })), /*#__PURE__*/React__default["default"].createElement("p", {
1220
- className: "mb-1"
1221
- }, /*#__PURE__*/React__default["default"].createElement("small", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1222
- id: "EDFyUp",
1223
- defaultMessage: [{
1224
- "type": 0,
1225
- "value": "Alternative text (accessibility)"
1226
- }]
1227
- }))), /*#__PURE__*/React__default["default"].createElement(TextField, {
1228
- value: description,
1229
- onChange: onDescriptionChange
1230
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1231
- className: "form-group"
1232
- }, /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1233
- id: "4fHMVj",
1234
- defaultMessage: [{
1235
- "type": 0,
1236
- "value": "Tags"
1237
- }]
1238
- })), /*#__PURE__*/React__default["default"].createElement(TokensField, {
1239
- value: tags,
1240
- options: allTags // loadOptions={loadTags}
1241
- ,
1242
- getOptionLabel: getOptionLabel,
1243
- getOptionValue: getOptionValue,
1244
- getNewOptionData: getNewOptionData,
1245
- onChange: onTagChange
1246
- })), changed ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1247
- theme: "primary",
1248
- onClick: onSave
1249
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1250
- id: "qIw1nW",
1251
- defaultMessage: [{
1252
- "type": 0,
1253
- "value": "Save"
1254
- }]
1255
- })) : null), /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1256
- id: "c9VwT/",
1257
- defaultMessage: [{
1258
- "type": 0,
1259
- "value": "Technical details"
1260
- }]
1261
- })), /*#__PURE__*/React__default["default"].createElement("ul", {
1262
- className: "list-group"
1263
- }, type !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1264
- className: "list-group-item py-2 px-2"
1265
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1266
- className: "row"
1267
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1268
- className: "col-4 text-muted"
1269
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1270
- id: "OkNUmk",
1271
- defaultMessage: [{
1272
- "type": 0,
1273
- "value": "Type"
1274
- }]
1275
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1276
- className: "col text-capitalize"
1277
- }, /*#__PURE__*/React__default["default"].createElement("small", null, type)))) : null, filename !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1278
- className: "list-group-item py-2 px-2"
1279
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1280
- className: "row"
1281
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1282
- className: "col-4 text-muted"
1283
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1284
- id: "aovRFH",
1285
- defaultMessage: [{
1286
- "type": 0,
1287
- "value": "Filename"
1288
- }]
1289
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1290
- className: "col"
1291
- }, /*#__PURE__*/React__default["default"].createElement("small", null, filename)))) : null, duration ? /*#__PURE__*/React__default["default"].createElement("li", {
1292
- className: "list-group-item py-2 px-2"
1293
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1294
- className: "row"
1295
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1296
- className: "col-4 text-muted"
1297
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1298
- id: "eoW0tZ",
1299
- defaultMessage: [{
1300
- "type": 0,
1301
- "value": "Duration"
1302
- }]
1303
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1304
- className: "col"
1305
- }, /*#__PURE__*/React__default["default"].createElement("small", null, duration)))) : null, width !== null || height !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1306
- className: "list-group-item py-2 px-2"
1307
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1308
- className: "row"
1081
+ className: classNames__default["default"](['w-100', styles.container, _defineProperty__default["default"]({}, className, className)])
1082
+ }, hasValue ? /*#__PURE__*/React__default["default"].createElement("div", {
1083
+ className: styles.heading
1309
1084
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1310
- className: "col-4 text-muted"
1085
+ className: styles.title
1311
1086
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1312
- id: "mv37oK",
1087
+ id: "t2cFdl",
1313
1088
  defaultMessage: [{
1314
1089
  "type": 0,
1315
- "value": "Dimension"
1090
+ "value": "Active filters"
1316
1091
  }]
1317
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1318
- className: "col"
1319
- }, /*#__PURE__*/React__default["default"].createElement("small", null, width, "x", height)))) : null, size !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1320
- className: "list-group-item py-2 px-2"
1321
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1322
- className: "row"
1323
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1324
- className: "col-4 text-muted"
1325
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1326
- id: "liyV7Y",
1092
+ })), /*#__PURE__*/React__default["default"].createElement(CloseButton, {
1093
+ className: styles.resetButton,
1094
+ onClick: handleReset
1095
+ }, /*#__PURE__*/React__default["default"].createElement("u", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1096
+ id: "/T/UDH",
1327
1097
  defaultMessage: [{
1328
1098
  "type": 0,
1329
- "value": "Size"
1099
+ "value": "Remove all"
1330
1100
  }]
1331
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1332
- className: "col"
1333
- }, /*#__PURE__*/React__default["default"].createElement("small", null, prettyBytes__default["default"](size))))) : null, description !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1334
- className: "list-group-item py-2 px-2"
1335
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1336
- className: "row"
1337
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1338
- className: "col-4 text-muted"
1339
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1340
- id: "7uyslu",
1101
+ })))) : null, filters !== null ? Object.keys(filters).map(function (key) {
1102
+ var section = sections.find(function (s) {
1103
+ return s.value === key;
1104
+ });
1105
+ return section && filters[key] !== null ? filters[key].map(function (activeValue) {
1106
+ var current = section.items.find(function (s) {
1107
+ return s.value === activeValue;
1108
+ });
1109
+
1110
+ var _ref3 = current || {},
1111
+ _ref3$label = _ref3.label,
1112
+ label = _ref3$label === void 0 ? '' : _ref3$label;
1113
+
1114
+ return /*#__PURE__*/React__default["default"].createElement(components.Button, {
1115
+ className: styles.activeTag,
1116
+ key: "filter-button-".concat(activeValue),
1117
+ type: "submit",
1118
+ size: "sm",
1119
+ label: /*#__PURE__*/React__default["default"].createElement("span", null, section.label, " : ", label),
1120
+ theme: "secondary",
1121
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1122
+ icon: freeSolidSvgIcons.faTimes
1123
+ }),
1124
+ iconPosition: "right",
1125
+ onClick: function onClick() {
1126
+ return removeFilter(key, activeValue);
1127
+ }
1128
+ });
1129
+ }) : null;
1130
+ }) : null);
1131
+ };
1132
+
1133
+ ActiveFilters.propTypes = propTypes$2;
1134
+ ActiveFilters.defaultProps = defaultProps$2;
1135
+
1136
+ var propTypes$1 = {
1137
+ filters: filtersValue,
1138
+ media: core.PropTypes.media,
1139
+ storyId: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
1140
+ tags: core.PropTypes.tags,
1141
+ authors: core.PropTypes.authors,
1142
+ withoutTitle: PropTypes__default["default"].bool,
1143
+ withoutSource: PropTypes__default["default"].bool,
1144
+ withoutType: PropTypes__default["default"].bool,
1145
+ onClickAdd: PropTypes__default["default"].func,
1146
+ // onClickCancel: PropTypes.func,
1147
+ onFocusSearch: PropTypes__default["default"].func,
1148
+ onFiltersChange: PropTypes__default["default"].func,
1149
+ onClickBack: PropTypes__default["default"].func,
1150
+ className: PropTypes__default["default"].string
1151
+ };
1152
+ var defaultProps$1 = {
1153
+ filters: null,
1154
+ media: null,
1155
+ storyId: null,
1156
+ tags: [],
1157
+ authors: [],
1158
+ withoutTitle: false,
1159
+ withoutSource: false,
1160
+ withoutType: true,
1161
+ onClickAdd: null,
1162
+ // onClickCancel: null,
1163
+ onFocusSearch: null,
1164
+ onFiltersChange: null,
1165
+ onClickBack: null,
1166
+ className: null
1167
+ };
1168
+
1169
+ var Navbar = function Navbar(_ref) {
1170
+ var filters = _ref.filters,
1171
+ media = _ref.media,
1172
+ storyId = _ref.storyId,
1173
+ tags = _ref.tags,
1174
+ authors = _ref.authors,
1175
+ withoutTitle = _ref.withoutTitle,
1176
+ withoutSource = _ref.withoutSource,
1177
+ withoutType = _ref.withoutType,
1178
+ className = _ref.className,
1179
+ onClickAdd = _ref.onClickAdd,
1180
+ onFocusSearch = _ref.onFocusSearch,
1181
+ onFiltersChange = _ref.onFiltersChange,
1182
+ onClickBack = _ref.onClickBack;
1183
+ var throttle = React.useRef(null);
1184
+
1185
+ var _useState = React.useState(false),
1186
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
1187
+ open = _useState2[0],
1188
+ setOpen = _useState2[1]; // TODO: get data from api for real testing
1189
+
1190
+
1191
+ var _useMediasRecentSearc = data.useMediasRecentSearches(),
1192
+ getSearches = _useMediasRecentSearc.getSearches,
1193
+ createSearch = _useMediasRecentSearc.createSearch;
1194
+
1195
+ var recent = React.useMemo(function () {
1196
+ return getSearches();
1197
+ }, [getSearches]);
1198
+
1199
+ var _useSearchFilters = useSearchFilters({
1200
+ recent: recent.map(function (val) {
1201
+ return {
1202
+ value: val,
1203
+ label: val
1204
+ };
1205
+ }),
1206
+ tags: tags !== null ? tags.map(function (t) {
1207
+ return {
1208
+ value: t.name,
1209
+ label: t.name
1210
+ };
1211
+ }) : [],
1212
+ team: authors || [],
1213
+ withType: !withoutType,
1214
+ storyId: storyId
1215
+ }),
1216
+ sources = _useSearchFilters.sources,
1217
+ sections = _useSearchFilters.sections;
1218
+
1219
+ var searchValue = filters !== null ? filters.search || null : null;
1220
+ var hasFilter = filters !== null ? Object.keys(filters).reduce(function (acc, val) {
1221
+ if (val !== 'type' && val !== 'search' && val !== 'source' && filters[val] !== null && filters[val].length > 0) {
1222
+ return true;
1223
+ }
1224
+
1225
+ return acc;
1226
+ }, false) : false;
1227
+ var onFilterChange = React.useCallback(function (type, value) {
1228
+ var isOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
1229
+
1230
+ var newFiltersValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, filters), {}, _defineProperty__default["default"]({}, type, value));
1231
+
1232
+ if (onFiltersChange !== null) {
1233
+ onFiltersChange(newFiltersValue);
1234
+ }
1235
+
1236
+ setOpen(isOpen);
1237
+ }, [filters, onFiltersChange, setOpen]);
1238
+ var onFiltersReset = React.useCallback(function () {
1239
+ onFiltersChange({
1240
+ type: filters.type || null,
1241
+ search: filters.search || null,
1242
+ source: filters.source || null
1243
+ });
1244
+ setOpen(false);
1245
+ }, [filters, onFiltersChange]);
1246
+ var onSearchChange = React.useCallback(function (value) {
1247
+ if (throttle.current !== null) {
1248
+ clearTimeout(throttle.current);
1249
+ }
1250
+
1251
+ throttle.current = setTimeout(function () {
1252
+ createSearch(value);
1253
+ throttle.current = null;
1254
+ }, 5000);
1255
+ onFilterChange('search', value, !!value);
1256
+ setOpen(false);
1257
+ }, [onFilterChange, createSearch, setOpen, throttle]);
1258
+ var onSourceChange = React.useCallback(function (value) {
1259
+ onFilterChange('source', value);
1260
+ }, [onFilterChange]);
1261
+ var onSearchFocus = React.useCallback(function () {
1262
+ if (onFocusSearch !== null) {
1263
+ onFocusSearch();
1264
+ }
1265
+
1266
+ setOpen(true);
1267
+ });
1268
+ var onClear = React.useCallback(function () {
1269
+ setOpen(false);
1270
+ }, [setOpen]);
1271
+ var onToggleMenu = React.useCallback(function () {
1272
+ setOpen(!open);
1273
+ }, [open, setOpen]);
1274
+ var title = !withoutTitle ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1275
+ id: "JV5hRr",
1341
1276
  defaultMessage: [{
1342
1277
  "type": 0,
1343
- "value": "Description"
1278
+ "value": "Media gallery"
1344
1279
  }]
1345
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1346
- className: "col"
1347
- }, /*#__PURE__*/React__default["default"].createElement("small", null, description)))) : null, user !== null && user.name ? /*#__PURE__*/React__default["default"].createElement("li", {
1348
- className: "list-group-item py-2 px-2"
1349
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1350
- className: "row"
1280
+ }) : null;
1281
+ return /*#__PURE__*/React__default["default"].createElement("nav", {
1282
+ className: classNames__default["default"]([styles$4.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
1351
1283
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1352
- className: "col-4 text-muted"
1284
+ className: styles$4.inner
1285
+ }, !withoutSource ? /*#__PURE__*/React__default["default"].createElement("div", {
1286
+ className: "d-flex w-100 flex-nowrap justify-content-center"
1287
+ }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
1288
+ items: sources,
1289
+ value: filters.source || null,
1290
+ onChange: onSourceChange
1291
+ })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
1292
+ className: "w-100 d-flex flex-nowrap justify-content-between"
1293
+ }, media !== null ? /*#__PURE__*/React__default["default"].createElement("form", {
1294
+ className: classNames__default["default"](['form-inline', 'mr-2'])
1295
+ }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
1296
+ theme: "secondary",
1297
+ outline: true,
1298
+ size: "sm",
1299
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1300
+ icon: freeSolidSvgIcons.faChevronLeft
1301
+ }),
1302
+ onClick: onClickBack
1303
+ })) : null, /*#__PURE__*/React__default["default"].createElement("strong", {
1304
+ className: "navbar-text mr-auto w-100 d-flex align-items-center justify-content-between"
1305
+ }, media !== null ? media.name : title, media === null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1306
+ theme: "primary",
1307
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1308
+ icon: freeSolidSvgIcons.faPlus
1309
+ }),
1310
+ onClick: onClickAdd
1353
1311
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1354
- id: "sUR1xV",
1312
+ id: "Tt4jN1",
1355
1313
  defaultMessage: [{
1356
1314
  "type": 0,
1357
- "value": "Author"
1315
+ "value": "Add"
1358
1316
  }]
1359
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1360
- className: "col"
1361
- }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null)));
1317
+ })) : null)), media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1318
+ className: "d-flex w-100 flex-nowrap justify-content-between"
1319
+ }, /*#__PURE__*/React__default["default"].createElement(Search, {
1320
+ value: searchValue,
1321
+ onChange: onSearchChange,
1322
+ onFocus: onSearchFocus,
1323
+ onClickIcon: onToggleMenu,
1324
+ className: classNames__default["default"](['form-inline'])
1325
+ }), /*#__PURE__*/React__default["default"].createElement("form", {
1326
+ className: classNames__default["default"](['form-inline'])
1327
+ }, open ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1328
+ className: "ml-2",
1329
+ theme: "primary",
1330
+ icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1331
+ icon: freeSolidSvgIcons.faTimes
1332
+ }),
1333
+ onClick: onClear
1334
+ }) : null)), open ? /*#__PURE__*/React__default["default"].createElement("div", {
1335
+ className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
1336
+ }, /*#__PURE__*/React__default["default"].createElement(SearchFilters, {
1337
+ filters: filters,
1338
+ sections: sections,
1339
+ onChange: onFilterChange
1340
+ })) : null) : null, hasFilter && !open && media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
1341
+ className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
1342
+ }, /*#__PURE__*/React__default["default"].createElement(ActiveFilters, {
1343
+ filters: filters,
1344
+ sections: sections,
1345
+ onChange: onFilterChange,
1346
+ onReset: onFiltersReset
1347
+ })) : null));
1362
1348
  };
1363
1349
 
1364
- MediaMetadata.propTypes = propTypes$1;
1365
- MediaMetadata.defaultProps = defaultProps$1;
1366
-
1367
- var styles = {"container":"micromag-media-gallery-container","mediaMetadata":"micromag-media-gallery-mediaMetadata","metadataOpened":"micromag-media-gallery-metadataOpened","gallery":"micromag-media-gallery-gallery","content":"micromag-media-gallery-content","loading":"micromag-media-gallery-loading"};
1350
+ Navbar.propTypes = propTypes$1;
1351
+ Navbar.defaultProps = defaultProps$1;
1368
1352
 
1369
1353
  var propTypes = {
1370
1354
  type: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array]),
@@ -1396,15 +1380,15 @@ var defaultProps = {
1396
1380
  };
1397
1381
 
1398
1382
  var MediaGallery = function MediaGallery(_ref) {
1399
- var _ref2;
1383
+ var _ref3;
1400
1384
 
1401
1385
  var type = _ref.type,
1402
1386
  source = _ref.source,
1403
1387
  isPicker = _ref.isPicker,
1404
1388
  isSmall = _ref.isSmall,
1405
- withoutTitle = _ref.withoutTitle;
1406
- _ref.withoutSource;
1407
- var withoutType = _ref.withoutType,
1389
+ withoutTitle = _ref.withoutTitle,
1390
+ withoutSource = _ref.withoutSource,
1391
+ withoutType = _ref.withoutType,
1408
1392
  initialMedias = _ref.medias,
1409
1393
  selectedMedia = _ref.selectedMedia,
1410
1394
  className = _ref.className,
@@ -1428,6 +1412,18 @@ var MediaGallery = function MediaGallery(_ref) {
1428
1412
  filtersValue = _useState4[0],
1429
1413
  setFiltersValue = _useState4[1];
1430
1414
 
1415
+ var story = contexts.useStory();
1416
+
1417
+ var _ref2 = story || {},
1418
+ _ref2$id = _ref2.id,
1419
+ storyId = _ref2$id === void 0 ? null : _ref2$id;
1420
+
1421
+ var _useMediaTags = data.useMediaTags(),
1422
+ tags = _useMediaTags.tags;
1423
+
1424
+ var _useMediaAuthors = data.useMediaAuthors(),
1425
+ authors = _useMediaAuthors.authors;
1426
+
1431
1427
  var onFiltersChange = React.useCallback(function (value) {
1432
1428
  if (throttle.current !== null) {
1433
1429
  clearTimeout(throttle.current);
@@ -1514,7 +1510,7 @@ var MediaGallery = function MediaGallery(_ref) {
1514
1510
  return setUploadModalOpened(false);
1515
1511
  }, [setUploadModalOpened]);
1516
1512
  return /*#__PURE__*/React__default["default"].createElement("div", {
1517
- className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref2, className, className), _ref2)])
1513
+ className: classNames__default["default"]([styles$8.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$8.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref3, className, className), _ref3)])
1518
1514
  }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
1519
1515
  filters: filtersValue,
1520
1516
  media: metadataMedia !== null ? metadataMedia : null,
@@ -1522,14 +1518,17 @@ var MediaGallery = function MediaGallery(_ref) {
1522
1518
  onClickAdd: onClickAdd,
1523
1519
  onClickBack: onClickBack,
1524
1520
  onClickCancel: onClickCancel,
1525
- withoutTitle: withoutTitle // withoutSource={withoutSource}
1526
- ,
1521
+ withoutTitle: withoutTitle,
1522
+ withoutSource: withoutSource,
1527
1523
  withoutType: withoutType,
1524
+ storyId: storyId,
1525
+ authors: authors,
1526
+ tags: tags,
1528
1527
  className: navbarClassName
1529
1528
  }), /*#__PURE__*/React__default["default"].createElement("div", {
1530
- className: styles.content
1529
+ className: styles$8.content
1531
1530
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1532
- className: styles.gallery
1531
+ className: styles$8.gallery
1533
1532
  }, medias !== null && !uploading ? /*#__PURE__*/React__default["default"].createElement(Gallery, {
1534
1533
  items: medias,
1535
1534
  selectedItem: selectedMedia,
@@ -1539,11 +1538,12 @@ var MediaGallery = function MediaGallery(_ref) {
1539
1538
  onClickItem: onClickItem,
1540
1539
  onClickItemInfo: onClickItemInfo
1541
1540
  }) : null, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
1542
- className: styles.loading
1541
+ className: styles$8.loading
1543
1542
  }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
1544
- className: styles.mediaMetadata
1543
+ className: styles$8.mediaMetadata
1545
1544
  }, /*#__PURE__*/React__default["default"].createElement(MediaMetadata, {
1546
1545
  media: metadataMedia,
1546
+ tags: tags,
1547
1547
  onClickClose: onMetadataClickClose
1548
1548
  }))), /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
1549
1549
  type: type === 'video' ? ['video', 'image/gif'] : type,