@micromag/media-gallery 0.2.391 → 0.2.396

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 +7 -7
  2. package/es/index.js +1101 -1102
  3. package/lib/index.js +1082 -1083
  4. package/package.json +4 -4
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,446 +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"};
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
- tags: items,
249
- parent: value,
250
- onChange: onSectionChange
251
- })) : null;
252
- })) : 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
+ })));
253
212
  };
254
213
 
255
- SearchFilters.propTypes = propTypes$8;
256
- SearchFilters.defaultProps = defaultProps$8;
214
+ Gallery.propTypes = propTypes$9;
215
+ Gallery.defaultProps = defaultProps$9;
257
216
 
258
- var propTypes$7 = {
259
- value: PropTypes__default["default"].string,
260
- onChange: PropTypes__default["default"].func,
261
- onFocus: PropTypes__default["default"].func,
262
- onBlur: PropTypes__default["default"].func,
263
- 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,
264
222
  className: PropTypes__default["default"].string
265
223
  };
266
- var defaultProps$7 = {
267
- value: null,
268
- onChange: null,
269
- onFocus: null,
270
- onBlur: null,
271
- onClickIcon: null,
224
+ var defaultProps$8 = {
225
+ media: null,
226
+ tags: [],
272
227
  className: null
273
228
  };
274
229
 
275
- var Search = function Search(_ref) {
276
- var value = _ref.value,
277
- onChange = _ref.onChange,
278
- onFocus = _ref.onFocus,
279
- onBlur = _ref.onBlur,
280
- onClickIcon = _ref.onClickIcon,
230
+ var MediaMetadata = function MediaMetadata(_ref) {
231
+ var media = _ref.media,
232
+ allTags = _ref.tags,
281
233
  className = _ref.className;
282
- var intl = reactIntl.useIntl();
283
- var onSearchChange = React.useCallback(function (e) {
284
- var newValue = e.currentTarget.value.length > 0 ? e.currentTarget.value : null;
285
234
 
286
- if (onChange !== null) {
287
- onChange(newValue);
288
- }
289
- }, [onChange]);
290
- React.useCallback(function () {
291
- if (onChange !== null) {
292
- onChange('');
293
- }
294
- }, [onChange]);
295
- var onClickSearchIcon = React.useCallback(function () {
296
- if (onClickIcon !== null) {
297
- onClickIcon();
298
- }
299
- }, [onClickIcon]);
300
- return /*#__PURE__*/React__default["default"].createElement("form", {
301
- method: "post",
302
- className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
303
- }, /*#__PURE__*/React__default["default"].createElement("div", {
304
- className: "input-group"
305
- }, /*#__PURE__*/React__default["default"].createElement("span", {
306
- type: "span",
307
- className: "input-group-prepend"
308
- }, /*#__PURE__*/React__default["default"].createElement("button", {
309
- type: "button",
310
- className: "input-group-text reset-button",
311
- onClick: onClickSearchIcon
312
- }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
313
- icon: freeSolidSvgIcons.faSearch
314
- }))), /*#__PURE__*/React__default["default"].createElement("input", {
315
- className: classNames__default["default"](['form-control', {
316
- 'bg-light': !!value,
317
- 'text-dark': value
318
- }]),
319
- type: "text",
320
- value: value || '',
321
- placeholder: intl.formatMessage({
322
- "id": "gprXiG",
323
- "defaultMessage": [{
324
- "type": 0,
325
- "value": "Search..."
326
- }]
327
- }),
328
- onChange: onSearchChange,
329
- onFocus: onFocus,
330
- onBlur: onBlur
331
- }), null));
332
- };
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;
333
246
 
334
- Search.propTypes = propTypes$7;
335
- 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;
336
264
 
337
- var styles$6 = {"container":"micromag-media-gallery-buttons-close-container"};
265
+ var _useMediaUpdate = data.useMediaUpdate(),
266
+ update = _useMediaUpdate.update;
338
267
 
339
- var _excluded = ["className"];
340
- var propTypes$6 = {
341
- className: PropTypes__default["default"].string
342
- };
343
- var defaultProps$6 = {
344
- className: null
345
- };
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]);
346
287
 
347
- var CloseButton = function CloseButton(_ref) {
348
- var className = _ref.className,
349
- 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];
350
292
 
351
- return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
352
- className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({}, className, className !== null)]),
353
- withoutStyle: true,
354
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
355
- icon: freeSolidSvgIcons.faTimes,
356
- className: styles$6.icon
357
- }),
358
- iconPosition: "right"
359
- }, props));
360
- };
293
+ var _useState3 = React.useState(mediaDescription),
294
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
295
+ description = _useState4[0],
296
+ setDescription = _useState4[1];
361
297
 
362
- CloseButton.propTypes = propTypes$6;
363
- 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];
364
302
 
365
- 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];
366
307
 
367
- var propTypes$5 = {
368
- filters: PropTypes__default["default"].shape({
369
- types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
370
- tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
371
- users: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
372
- usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
373
- }),
374
- onChange: PropTypes__default["default"].func,
375
- onReset: PropTypes__default["default"].func,
376
- sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
377
- className: PropTypes__default["default"].string
378
- };
379
- var defaultProps$5 = {
380
- filters: null,
381
- onChange: null,
382
- onReset: null,
383
- sections: [],
384
- className: null
385
- };
386
-
387
- var ActiveFilters = function ActiveFilters(_ref) {
388
- var filters = _ref.filters,
389
- onChange = _ref.onChange,
390
- onReset = _ref.onReset,
391
- sections = _ref.sections,
392
- className = _ref.className;
393
- var handleReset = React.useCallback(function () {
394
- if (onReset !== null) {
395
- onReset();
396
- }
397
- }, [onReset]);
398
- var removeFilter = React.useCallback(function (key, activeValue) {
399
- var newFilterValue = filters[key].filter(function (it) {
400
- 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);
401
327
  });
402
- var newValue = newFilterValue.length > 0 ? newFilterValue : null;
403
-
404
- if (onChange !== null) {
405
- 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);
406
338
  }
407
- }, [onChange, filters]);
408
- var hasValue = Object.keys(filters).reduce(function (oneHasValue, key) {
409
- return oneHasValue || filters[key] !== null;
410
- }, false);
339
+
340
+ setChanged(false);
341
+ }, [media, setTags, setName, setDescription, setChanged]);
342
+ var TextField = contexts.useFieldComponent('text');
343
+ var TokensField = contexts.useFieldComponent('tokens');
411
344
  return /*#__PURE__*/React__default["default"].createElement("div", {
412
345
  className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className)])
413
- }, hasValue ? /*#__PURE__*/React__default["default"].createElement("div", {
414
- className: styles$5.heading
415
346
  }, /*#__PURE__*/React__default["default"].createElement("div", {
416
- className: styles$5.title
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"
367
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
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"
417
384
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
418
- id: "t2cFdl",
385
+ id: "YJZtWR",
419
386
  defaultMessage: [{
420
387
  "type": 0,
421
- "value": "Active filters"
388
+ "value": "Description"
422
389
  }]
423
- })), /*#__PURE__*/React__default["default"].createElement(CloseButton, {
424
- className: styles$5.resetButton,
425
- onClick: handleReset
426
- }, /*#__PURE__*/React__default["default"].createElement("u", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
427
- 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",
428
394
  defaultMessage: [{
429
395
  "type": 0,
430
- "value": "Remove all"
396
+ "value": "Alternative text (accessibility)"
431
397
  }]
432
- })))) : null, filters !== null ? Object.keys(filters).map(function (key) {
433
- var section = sections.find(function (s) {
434
- return s.value === key;
435
- });
436
- return section && filters[key] !== null ? filters[key].map(function (activeValue) {
437
- var current = section.items.find(function (s) {
438
- return s.value === activeValue;
439
- });
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)));
533
+ };
440
534
 
441
- var _ref3 = current || {},
442
- _ref3$label = _ref3.label,
443
- label = _ref3$label === void 0 ? '' : _ref3$label;
535
+ MediaMetadata.propTypes = propTypes$8;
536
+ MediaMetadata.defaultProps = defaultProps$8;
444
537
 
445
- return /*#__PURE__*/React__default["default"].createElement(components.Button, {
446
- className: styles$5.activeTag,
447
- key: "filter-button-".concat(activeValue),
448
- type: "submit",
449
- size: "sm",
450
- label: /*#__PURE__*/React__default["default"].createElement("span", null, section.label, " : ", label),
451
- theme: "secondary",
452
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
453
- icon: freeSolidSvgIcons.faTimes
454
- }),
455
- iconPosition: "right",
456
- onClick: function onClick() {
457
- return removeFilter(key, activeValue);
458
- }
459
- });
460
- }) : null;
461
- }) : null);
462
- };
463
-
464
- ActiveFilters.propTypes = propTypes$5;
465
- ActiveFilters.defaultProps = defaultProps$5;
466
-
467
- var useSearchSections = function useSearchSections(_ref) {
538
+ var useSearchFilters = function useSearchFilters(_ref) {
468
539
  var _ref$recent = _ref.recent,
469
540
  recent = _ref$recent === void 0 ? [] : _ref$recent,
470
541
  _ref$tags = _ref.tags,
@@ -474,8 +545,19 @@ var useSearchSections = function useSearchSections(_ref) {
474
545
  _ref$sources = _ref.sources,
475
546
  upstreamSources = _ref$sources === void 0 ? [] : _ref$sources,
476
547
  _ref$withType = _ref.withType,
477
- withType = _ref$withType === void 0 ? false : _ref$withType;
478
- 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 ? [{
552
+ label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
553
+ id: "eiaIIB",
554
+ defaultMessage: [{
555
+ "type": 0,
556
+ "value": "This Micromag"
557
+ }]
558
+ }),
559
+ value: storyId
560
+ }] : []), [{
479
561
  label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
480
562
  id: "xAzv6g",
481
563
  defaultMessage: [{
@@ -484,7 +566,7 @@ var useSearchSections = function useSearchSections(_ref) {
484
566
  }]
485
567
  }),
486
568
  value: 'all'
487
- }].concat(_toConsumableArray__default["default"](team.length > 0 ? [{
569
+ }], _toConsumableArray__default["default"](team !== null && team.length > 0 ? [{
488
570
  label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
489
571
  id: "/62oe4",
490
572
  defaultMessage: [{
@@ -615,757 +697,658 @@ PropTypes__default["default"].shape({
615
697
 
616
698
  var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner"};
617
699
 
618
- var propTypes$4 = {
619
- filters: filtersValue,
620
- media: core.PropTypes.media,
621
- withoutTitle: PropTypes__default["default"].bool,
622
- withoutSource: PropTypes__default["default"].bool,
623
- withoutType: PropTypes__default["default"].bool,
624
- onClickAdd: PropTypes__default["default"].func,
625
- onClickCancel: PropTypes__default["default"].func,
626
- onFocusSearch: PropTypes__default["default"].func,
627
- onFiltersChange: PropTypes__default["default"].func,
628
- onClickBack: PropTypes__default["default"].func,
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"};
701
+
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,
629
710
  className: PropTypes__default["default"].string
630
711
  };
631
- var defaultProps$4 = {
632
- filters: null,
633
- media: null,
634
- withoutTitle: false,
635
- withoutSource: false,
636
- withoutType: true,
637
- onClickAdd: null,
638
- onClickCancel: null,
639
- onFocusSearch: null,
640
- onFiltersChange: null,
641
- onClickBack: null,
712
+ var defaultProps$7 = {
713
+ value: null,
714
+ items: null,
715
+ onChange: null,
642
716
  className: null
643
717
  };
644
718
 
645
- var Navbar = function Navbar(_ref) {
646
- var filters = _ref.filters,
647
- media = _ref.media,
648
- withoutTitle = _ref.withoutTitle,
649
- withoutSource = _ref.withoutSource,
650
- withoutType = _ref.withoutType,
651
- className = _ref.className,
652
- onClickAdd = _ref.onClickAdd,
653
- onClickCancel = _ref.onClickCancel,
654
- onFocusSearch = _ref.onFocusSearch,
655
- onFiltersChange = _ref.onFiltersChange,
656
- onClickBack = _ref.onClickBack;
657
- var throttle = React.useRef(null);
719
+ var DropdownSection = function DropdownSection(_ref) {
720
+ var value = _ref.value,
721
+ items = _ref.items,
722
+ onChange = _ref.onChange,
723
+ className = _ref.className;
658
724
 
659
725
  var _useState = React.useState(false),
660
726
  _useState2 = _slicedToArray__default["default"](_useState, 2),
661
727
  open = _useState2[0],
662
- setOpen = _useState2[1]; // TODO: get data from api for real testing
663
-
664
-
665
- var _useMediasRecentSearc = data.useMediasRecentSearches(),
666
- getSearches = _useMediasRecentSearc.getSearches,
667
- createSearch = _useMediasRecentSearc.createSearch;
668
-
669
- var recent = React.useMemo(function () {
670
- return getSearches();
671
- }, [getSearches]);
672
-
673
- var _useMediaTags = data.useMediaTags(),
674
- _useMediaTags$tags = _useMediaTags.tags,
675
- tags = _useMediaTags$tags === void 0 ? [] : _useMediaTags$tags; // const { team } = useOrganisationTeam();
676
-
677
-
678
- var team = [];
679
-
680
- var _useSearchFilters = useSearchSections({
681
- recent: recent.map(function (val) {
682
- return {
683
- value: val,
684
- label: val
685
- };
686
- }),
687
- tags: tags !== null ? tags.map(function (t) {
688
- return {
689
- value: t.name,
690
- label: t.name
691
- };
692
- }) : [],
693
- team: team,
694
- withType: !withoutType
695
- }),
696
- sources = _useSearchFilters.sources,
697
- sections = _useSearchFilters.sections;
698
-
699
- var searchValue = filters !== null ? filters.search || null : null;
700
- var hasFilter = filters !== null ? Object.keys(filters).reduce(function (acc, val) {
701
- if (val !== 'type' && val !== 'search' && val !== 'source' && filters[val] !== null && filters[val].length > 0) {
702
- return true;
703
- }
704
-
705
- return acc;
706
- }, false) : false;
707
- var onFilterChange = React.useCallback(function (type, value) {
708
- var isOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
709
-
710
- var newFiltersValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, filters), {}, _defineProperty__default["default"]({}, type, value));
711
-
712
- if (onFiltersChange !== null) {
713
- onFiltersChange(newFiltersValue);
714
- }
715
-
716
- setOpen(isOpen);
717
- }, [filters, onFiltersChange, setOpen]);
718
- var onFiltersReset = React.useCallback(function () {
719
- onFiltersChange({
720
- type: filters.type || null,
721
- search: filters.search || null,
722
- source: filters.source || null
723
- });
724
- setOpen(false);
725
- }, [filters, onFiltersChange]);
726
- var onSearchChange = React.useCallback(function (value) {
727
- if (throttle.current !== null) {
728
- clearTimeout(throttle.current);
729
- }
730
-
731
- throttle.current = setTimeout(function () {
732
- createSearch(value);
733
- throttle.current = null;
734
- }, 5000);
735
- onFilterChange('search', value, !!value);
736
- setOpen(false);
737
- }, [onFilterChange, createSearch, setOpen, throttle]);
738
- var onSourceChange = React.useCallback(function (value) {
739
- onFilterChange('source', value);
740
- }, [onFilterChange]);
741
- var onSearchFocus = React.useCallback(function () {
742
- if (onFocusSearch !== null) {
743
- onFocusSearch();
744
- }
728
+ setOpen = _useState2[1];
745
729
 
746
- setOpen(true);
730
+ var currentItem = items.find(function (i) {
731
+ return i.value === value;
747
732
  });
748
- var onClear = React.useCallback(function () {
749
- if (onClickCancel !== null) {
750
- onClickCancel();
751
- }
752
-
753
- setOpen(false);
754
- }, [onClickCancel]);
755
- var onToggleMenu = React.useCallback(function () {
733
+ var onOpen = React.useCallback(function () {
756
734
  setOpen(!open);
757
735
  }, [open, setOpen]);
758
- var title = !withoutTitle ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
759
- id: "JV5hRr",
760
- defaultMessage: [{
761
- "type": 0,
762
- "value": "Media gallery"
763
- }]
764
- }) : null;
765
- return /*#__PURE__*/React__default["default"].createElement("nav", {
766
- className: classNames__default["default"]([styles$4.container, 'navbar', 'small', _defineProperty__default["default"]({}, className, className !== null)])
767
- }, /*#__PURE__*/React__default["default"].createElement("div", {
768
- className: styles$4.inner
769
- }, /*#__PURE__*/React__default["default"].createElement("div", {
770
- className: "d-flex flex-nowrap justify-content-between"
771
- }, media !== null ? /*#__PURE__*/React__default["default"].createElement("form", {
772
- className: classNames__default["default"](['form-inline'])
773
- }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
774
- theme: "secondary",
775
- outline: true,
776
- size: "sm",
777
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
778
- icon: freeSolidSvgIcons.faChevronLeft
779
- }),
780
- onClick: onClickBack
781
- })) : null, /*#__PURE__*/React__default["default"].createElement("strong", {
782
- className: "navbar-text ml-2 mr-auto"
783
- }, media !== null ? media.name : title)), media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !withoutSource ? /*#__PURE__*/React__default["default"].createElement("div", {
784
- className: "d-flex w-100 flex-nowrap justify-content-center"
785
- }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
786
- items: sources,
787
- value: filters.source || null,
788
- onChange: onSourceChange
789
- })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
790
- className: "d-flex w-100 flex-nowrap justify-content-between"
791
- }, /*#__PURE__*/React__default["default"].createElement(Search, {
792
- value: searchValue,
793
- onChange: onSearchChange,
794
- onFocus: onSearchFocus,
795
- onClickIcon: onToggleMenu,
796
- className: classNames__default["default"](['form-inline', 'mr-2'])
797
- }), /*#__PURE__*/React__default["default"].createElement("form", {
798
- className: classNames__default["default"](['form-inline', 'ml-auto'])
799
- }, open || searchValue || hasFilter ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
800
- theme: "primary",
801
- outline: true,
802
- onClick: onClear
803
- }, searchValue || hasFilter ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
804
- id: "+TT1y6",
805
- defaultMessage: [{
806
- "type": 0,
807
- "value": "Clear"
808
- }]
809
- }) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
810
- id: "G31Yd0",
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",
811
753
  defaultMessage: [{
812
754
  "type": 0,
813
- "value": "Cancel"
755
+ "value": "Library for"
814
756
  }]
815
- })) : /*#__PURE__*/React__default["default"].createElement(components.Button, {
816
- theme: "primary",
817
- icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
818
- icon: freeSolidSvgIcons.faPlus
819
- }),
820
- onClick: onClickAdd
821
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
822
- id: "Tt4jN1",
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",
823
766
  defaultMessage: [{
824
767
  "type": 0,
825
- "value": "Add"
768
+ "value": "All"
826
769
  }]
827
- })))), 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,
837
- sections: sections,
838
- onChange: onFilterChange,
839
- onReset: onFiltersReset
840
- })) : null));
841
- };
842
-
843
- Navbar.propTypes = propTypes$4;
844
- Navbar.defaultProps = defaultProps$4;
845
-
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
- };
857
-
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"};
859
-
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
868
- };
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
877
- };
878
-
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;
893
-
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
- }
899
-
900
- return /*#__PURE__*/React__default["default"].createElement(components.Card, {
901
- image: /*#__PURE__*/React__default["default"].createElement("button", {
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,
902
782
  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
941
- });
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
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
958
800
  };
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
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;
1052
-
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();
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
+ };
1070
920
 
921
+ TagSection.propTypes = propTypes$5;
922
+ TagSection.defaultProps = defaultProps$5;
1071
923
 
1072
- var story = contexts.useStory();
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"};
1073
925
 
1074
- var _ref4 = story || {},
1075
- _ref4$id = _ref4.id,
1076
- documentId = _ref4$id === void 0 ? null : _ref4$id;
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
+ };
1077
939
 
1078
- var _useMediaTags = data.useMediaTags(),
1079
- usedTags = _useMediaTags.tags;
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
+ });
966
+
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
 
1081
- var _useMediaAuthors = data.useMediaAuthors();
1082
- _useMediaAuthors.authors;
1003
+ SearchFilters.propTypes = propTypes$4;
1004
+ SearchFilters.defaultProps = defaultProps$4;
1083
1005
 
1084
- var _useMediaUpdate = data.useMediaUpdate(),
1085
- update = _useMediaUpdate.update;
1006
+ var styles$1 = {"container":"micromag-media-gallery-buttons-close-container"};
1086
1007
 
1087
- console.log(story, documentId); // const loadTags = useCallback(
1088
- // (input) =>
1089
- // api.medias.getTags(
1090
- // {
1091
- // search: input,
1092
- // },
1093
- // 5,
1094
- // ),
1095
- // [api],
1096
- // );
1097
-
1098
- var getOptionLabel = React.useCallback(function (_ref5) {
1099
- var name = _ref5.name;
1100
- return name;
1101
- }, []);
1102
- var getOptionValue = React.useCallback(function (_ref6) {
1103
- var name = _ref6.name;
1104
- return name;
1105
- }, []);
1106
- var getNewOptionData = React.useCallback(function (inputValue) {
1107
- return {
1108
- name: inputValue
1109
- };
1110
- }, []);
1111
- var allTags = React.useMemo(function () {
1112
- return usedTags !== null ? uniqBy__default["default"](mediaTags.concat(usedTags), function (_ref7) {
1113
- var id = _ref7.id;
1114
- return id;
1115
- }) : mediaTags;
1116
- }, [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
+ };
1117
1015
 
1118
- var _useState = React.useState(mediaName),
1119
- _useState2 = _slicedToArray__default["default"](_useState, 2),
1120
- name = _useState2[0],
1121
- setName = _useState2[1];
1016
+ var CloseButton = function CloseButton(_ref) {
1017
+ var className = _ref.className,
1018
+ props = _objectWithoutProperties__default["default"](_ref, _excluded);
1122
1019
 
1123
- var _useState3 = React.useState(mediaDescription),
1124
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
1125
- description = _useState4[0],
1126
- 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
+ };
1127
1030
 
1128
- var _useState5 = React.useState(mediaTags.map(getOptionValue)),
1129
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
1130
- tags = _useState6[0],
1131
- setTags = _useState6[1];
1031
+ CloseButton.propTypes = propTypes$3;
1032
+ CloseButton.defaultProps = defaultProps$3;
1132
1033
 
1133
- var _useState7 = React.useState(false),
1134
- _useState8 = _slicedToArray__default["default"](_useState7, 2),
1135
- changed = _useState8[0],
1136
- 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"};
1137
1035
 
1138
- var onTagChange = React.useCallback(function (val) {
1139
- setTags(val);
1140
- setChanged(true);
1141
- }, [tags, setTags, setChanged]);
1142
- var onNameChange = React.useCallback(function (val) {
1143
- setName(val);
1144
- setChanged(true);
1145
- }, [tags, setName, setChanged]);
1146
- var onDescriptionChange = React.useCallback(function (val) {
1147
- setDescription(val);
1148
- setChanged(true);
1149
- }, [tags, setDescription, setChanged]);
1150
- var onSave = React.useCallback(function () {
1151
- return update(mediaId, {
1152
- name: name,
1153
- tags: tags,
1154
- description: description
1155
- }).then(function () {
1156
- setChanged(false);
1157
- });
1158
- }, [mediaId, name, tags, description, metadata, update]);
1159
- React.useEffect(function () {
1160
- if (media !== null) {
1161
- setTags(mediaTags);
1162
- setName(mediaName);
1163
- setDescription(mediaDescription);
1164
- } else {
1165
- setTags([]);
1166
- setName(null);
1167
- 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();
1168
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;
1169
1072
 
1170
- setChanged(false);
1171
- }, [media, setTags, setName, setDescription, setChanged]);
1172
- var TextField = contexts.useFieldComponent('text');
1173
- var TokensField = contexts.useFieldComponent('tokens');
1174
- return /*#__PURE__*/React__default["default"].createElement("div", {
1175
- className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className)])
1176
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1177
- className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({
1178
- 'bg-light': type === 'audio',
1179
- 'bg-black': type === 'image'
1180
- }, styles$1.video, type === 'video')])
1181
- }, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("video", {
1182
- className: styles$1.player,
1183
- controls: true,
1184
- src: url
1185
- })) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1186
- className: styles$1.audio
1187
- }, /*#__PURE__*/React__default["default"].createElement("audio", {
1188
- className: styles$1.player,
1189
- controls: true,
1190
- src: url
1191
- }))) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
1192
- src: thumbnail,
1193
- className: styles$1.image,
1194
- alt: filename
1195
- }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
1196
- className: "p-2"
1197
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1198
- className: "tags mb-4"
1199
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1200
- className: "form-group"
1201
- }, /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1202
- id: "kBz8vF",
1203
- defaultMessage: [{
1204
- "type": 0,
1205
- "value": "Name"
1206
- }]
1207
- })), /*#__PURE__*/React__default["default"].createElement(TextField, {
1208
- value: name,
1209
- onChange: onNameChange
1210
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1211
- className: "form-group"
1212
- }, /*#__PURE__*/React__default["default"].createElement("h6", {
1213
- className: "mb-0"
1214
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1215
- id: "YJZtWR",
1216
- defaultMessage: [{
1217
- "type": 0,
1218
- "value": "Description"
1219
- }]
1220
- })), /*#__PURE__*/React__default["default"].createElement("p", {
1221
- className: "mb-1"
1222
- }, /*#__PURE__*/React__default["default"].createElement("small", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1223
- id: "EDFyUp",
1224
- defaultMessage: [{
1225
- "type": 0,
1226
- "value": "Alternative text (accessibility)"
1227
- }]
1228
- }))), /*#__PURE__*/React__default["default"].createElement(TextField, {
1229
- value: description,
1230
- onChange: onDescriptionChange
1231
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1232
- className: "form-group"
1233
- }, /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1234
- id: "4fHMVj",
1235
- defaultMessage: [{
1236
- "type": 0,
1237
- "value": "Tags"
1238
- }]
1239
- })), /*#__PURE__*/React__default["default"].createElement(TokensField, {
1240
- value: tags,
1241
- options: allTags // loadOptions={loadTags}
1242
- ,
1243
- getOptionLabel: getOptionLabel,
1244
- getOptionValue: getOptionValue,
1245
- getNewOptionData: getNewOptionData,
1246
- onChange: onTagChange
1247
- })), changed ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1248
- theme: "primary",
1249
- onClick: onSave
1250
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1251
- id: "qIw1nW",
1252
- defaultMessage: [{
1253
- "type": 0,
1254
- "value": "Save"
1255
- }]
1256
- })) : null), /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1257
- id: "c9VwT/",
1258
- defaultMessage: [{
1259
- "type": 0,
1260
- "value": "Technical details"
1261
- }]
1262
- })), /*#__PURE__*/React__default["default"].createElement("ul", {
1263
- className: "list-group"
1264
- }, type !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1265
- className: "list-group-item py-2 px-2"
1266
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1267
- className: "row"
1268
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1269
- className: "col-4 text-muted"
1270
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1271
- id: "OkNUmk",
1272
- defaultMessage: [{
1273
- "type": 0,
1274
- "value": "Type"
1275
- }]
1276
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1277
- className: "col text-capitalize"
1278
- }, /*#__PURE__*/React__default["default"].createElement("small", null, type)))) : null, filename !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1279
- className: "list-group-item py-2 px-2"
1280
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1281
- className: "row"
1282
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1283
- className: "col-4 text-muted"
1284
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1285
- id: "aovRFH",
1286
- defaultMessage: [{
1287
- "type": 0,
1288
- "value": "Filename"
1289
- }]
1290
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1291
- className: "col"
1292
- }, /*#__PURE__*/React__default["default"].createElement("small", null, filename)))) : null, duration ? /*#__PURE__*/React__default["default"].createElement("li", {
1293
- className: "list-group-item py-2 px-2"
1294
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1295
- className: "row"
1296
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1297
- className: "col-4 text-muted"
1298
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1299
- id: "eoW0tZ",
1300
- defaultMessage: [{
1301
- "type": 0,
1302
- "value": "Duration"
1303
- }]
1304
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1305
- className: "col"
1306
- }, /*#__PURE__*/React__default["default"].createElement("small", null, duration)))) : null, width !== null || height !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1307
- className: "list-group-item py-2 px-2"
1308
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1309
- className: "row"
1310
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1311
- className: "col-4 text-muted"
1312
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1313
- id: "mv37oK",
1314
- defaultMessage: [{
1315
- "type": 0,
1316
- "value": "Dimension"
1317
- }]
1318
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1319
- className: "col"
1320
- }, /*#__PURE__*/React__default["default"].createElement("small", null, width, "x", height)))) : null, size !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1321
- className: "list-group-item py-2 px-2"
1322
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1323
- className: "row"
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);
1080
+ return /*#__PURE__*/React__default["default"].createElement("div", {
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
1324
1084
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1325
- className: "col-4 text-muted"
1085
+ className: styles.title
1326
1086
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1327
- id: "liyV7Y",
1087
+ id: "t2cFdl",
1328
1088
  defaultMessage: [{
1329
1089
  "type": 0,
1330
- "value": "Size"
1090
+ "value": "Active filters"
1331
1091
  }]
1332
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1333
- className: "col"
1334
- }, /*#__PURE__*/React__default["default"].createElement("small", null, prettyBytes__default["default"](size))))) : null, description !== null ? /*#__PURE__*/React__default["default"].createElement("li", {
1335
- className: "list-group-item py-2 px-2"
1336
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1337
- className: "row"
1338
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1339
- className: "col-4 text-muted"
1340
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1341
- id: "7uyslu",
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",
1342
1097
  defaultMessage: [{
1343
1098
  "type": 0,
1344
- "value": "Description"
1099
+ "value": "Remove all"
1345
1100
  }]
1346
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1347
- className: "col"
1348
- }, /*#__PURE__*/React__default["default"].createElement("small", null, description)))) : null, user !== null && user.name ? /*#__PURE__*/React__default["default"].createElement("li", {
1349
- className: "list-group-item py-2 px-2"
1350
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1351
- className: "row"
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",
1276
+ defaultMessage: [{
1277
+ "type": 0,
1278
+ "value": "Media gallery"
1279
+ }]
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)])
1352
1283
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1353
- 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
1354
1311
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1355
- id: "sUR1xV",
1312
+ id: "Tt4jN1",
1356
1313
  defaultMessage: [{
1357
1314
  "type": 0,
1358
- "value": "Author"
1315
+ "value": "Add"
1359
1316
  }]
1360
- })), /*#__PURE__*/React__default["default"].createElement("div", {
1361
- className: "col"
1362
- }, /*#__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));
1363
1348
  };
1364
1349
 
1365
- MediaMetadata.propTypes = propTypes$1;
1366
- MediaMetadata.defaultProps = defaultProps$1;
1367
-
1368
- 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;
1369
1352
 
1370
1353
  var propTypes = {
1371
1354
  type: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array]),
@@ -1397,7 +1380,7 @@ var defaultProps = {
1397
1380
  };
1398
1381
 
1399
1382
  var MediaGallery = function MediaGallery(_ref) {
1400
- var _ref2;
1383
+ var _ref3;
1401
1384
 
1402
1385
  var type = _ref.type,
1403
1386
  source = _ref.source,
@@ -1429,6 +1412,18 @@ var MediaGallery = function MediaGallery(_ref) {
1429
1412
  filtersValue = _useState4[0],
1430
1413
  setFiltersValue = _useState4[1];
1431
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
+
1432
1427
  var onFiltersChange = React.useCallback(function (value) {
1433
1428
  if (throttle.current !== null) {
1434
1429
  clearTimeout(throttle.current);
@@ -1515,7 +1510,7 @@ var MediaGallery = function MediaGallery(_ref) {
1515
1510
  return setUploadModalOpened(false);
1516
1511
  }, [setUploadModalOpened]);
1517
1512
  return /*#__PURE__*/React__default["default"].createElement("div", {
1518
- 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)])
1519
1514
  }, /*#__PURE__*/React__default["default"].createElement(Navbar, {
1520
1515
  filters: filtersValue,
1521
1516
  media: metadataMedia !== null ? metadataMedia : null,
@@ -1526,11 +1521,14 @@ var MediaGallery = function MediaGallery(_ref) {
1526
1521
  withoutTitle: withoutTitle,
1527
1522
  withoutSource: withoutSource,
1528
1523
  withoutType: withoutType,
1524
+ storyId: storyId,
1525
+ authors: authors,
1526
+ tags: tags,
1529
1527
  className: navbarClassName
1530
1528
  }), /*#__PURE__*/React__default["default"].createElement("div", {
1531
- className: styles.content
1529
+ className: styles$8.content
1532
1530
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1533
- className: styles.gallery
1531
+ className: styles$8.gallery
1534
1532
  }, medias !== null && !uploading ? /*#__PURE__*/React__default["default"].createElement(Gallery, {
1535
1533
  items: medias,
1536
1534
  selectedItem: selectedMedia,
@@ -1540,11 +1538,12 @@ var MediaGallery = function MediaGallery(_ref) {
1540
1538
  onClickItem: onClickItem,
1541
1539
  onClickItemInfo: onClickItemInfo
1542
1540
  }) : null, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
1543
- className: styles.loading
1541
+ className: styles$8.loading
1544
1542
  }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
1545
- className: styles.mediaMetadata
1543
+ className: styles$8.mediaMetadata
1546
1544
  }, /*#__PURE__*/React__default["default"].createElement(MediaMetadata, {
1547
1545
  media: metadataMedia,
1546
+ tags: tags,
1548
1547
  onClickClose: onMetadataClickClose
1549
1548
  }))), /*#__PURE__*/React__default["default"].createElement(components.UploadModal, {
1550
1549
  type: type === 'video' ? ['video', 'image/gif'] : type,