@micromag/media-gallery 0.2.397 → 0.2.403

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 (5) hide show
  1. package/assets/css/styles.css +4 -4
  2. package/es/index.js +84 -70
  3. package/lib/index.js +84 -70
  4. package/package.json +5 -6
  5. package/scss/styles.scss +1 -1
package/assets/css/styles.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .micromag-media-gallery-container .micromag-media-gallery-mediaMetadata,.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{position:absolute;top:0;left:0;width:100%}.micromag-media-gallery-container{position:relative}.micromag-media-gallery-container .micromag-media-gallery-content{position:relative;width:100%;overflow:hidden}.micromag-media-gallery-container .micromag-media-gallery-gallery,.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-media-gallery-container .micromag-media-gallery-loading{margin:.5rem 1rem}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-mediaMetadata{position:static;width:auto;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}
2
- .micromag-media-gallery-items-gallery-item-container{position:relative;overflow:hidden;cursor:pointer}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{display:block;width:100%;height:0;padding-bottom:75%;background-repeat:no-repeat;background-position:50%;background-size:cover}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{width:16px;height:16px;margin-right:5px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:0;background:rgba(0,0,0,0);color:inherit;text-align:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.8rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{position:absolute;top:0;padding:.5rem;color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C)}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon .micromag-media-gallery-items-gallery-item-icon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton .micromag-media-gallery-items-gallery-item-icon{width:1rem;height:1rem;margin-right:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon{right:0;pointer-events:none}
3
2
 
3
+ .micromag-media-gallery-items-gallery-item-container{position:relative;overflow:hidden;cursor:pointer}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{display:block;width:100%;height:0;padding-bottom:75%;background-repeat:no-repeat;background-position:50%;background-size:cover}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{width:16px;height:16px;margin-right:5px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:0;background:rgba(0,0,0,0);color:inherit;text-align:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.8rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{position:absolute;top:0;padding:.5rem;color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C)}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon .micromag-media-gallery-items-gallery-item-icon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton .micromag-media-gallery-items-gallery-item-icon{width:1rem;height:1rem;margin-right:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon{right:0;pointer-events:none}
4
4
  .micromag-media-gallery-partials-media-metadata-container{position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-image{display:block;max-width:100%;min-height:200px;max-height:40vh;margin:0 auto}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{position:relative;height:40vh;min-height:200px;background-color:#1c1c1c}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{position:absolute;bottom:0;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio .micromag-media-gallery-partials-media-metadata-player{display:block;margin:0 auto}
5
5
  .micromag-media-gallery-partials-navbar-container{position:relative;padding:.5rem}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{width:25%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{width:100%}
6
- .micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-forms-dropdown-section-container{position:relative;padding-top:5px}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;padding-right:5px;font-weight:400}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{font-weight:700}
6
+ .micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-forms-dropdown-section-container{position:relative;padding-top:5px}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;padding-right:5px;font-weight:400}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{font-weight:700}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdown{left:auto;right:0}
7
7
  .micromag-media-gallery-forms-search-filters-container{position:absolute;z-index:1;right:0;left:0;width:100%;padding:0 15px;overflow:hidden}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn{position:absolute;right:24px}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section{border-bottom:1px solid #adadad}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section:last-child{border-bottom:0}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-tags{overflow-x:auto}
8
- .micromag-media-gallery-buttons-close-container{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}
9
- .micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-heading{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-resetButton{margin-left:5px;outline:none;font-size:.7875rem}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-activeTag{margin-top:5px;margin-right:5px}
8
+ .micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-heading{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-resetButton{margin-left:5px;outline:none;font-size:.7875rem}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-activeTag{margin-top:5px;margin-right:5px}
9
+ .micromag-media-gallery-buttons-close-container{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}
package/es/index.js CHANGED
@@ -19,6 +19,8 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
19
19
 
20
20
  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"};
21
21
 
22
+ var styles$7 = {};
23
+
22
24
  var middleEllipsis = function middleEllipsis(string, maxLength) {
23
25
  if (!string) return string;
24
26
  if (maxLength < 1) return string;
@@ -31,7 +33,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
31
33
  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
32
34
  };
33
35
 
34
- 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
+ var styles$6 = {"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"};
35
37
 
36
38
  var propTypes$a = {
37
39
  item: PropTypes.media,
@@ -76,43 +78,43 @@ var GalleryItem = function GalleryItem(_ref) {
76
78
  return /*#__PURE__*/React.createElement(Card, {
77
79
  image: /*#__PURE__*/React.createElement("button", {
78
80
  type: "button",
79
- className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$7.imageButton]),
81
+ className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$6.imageButton]),
80
82
  onClick: onClick
81
83
  }, /*#__PURE__*/React.createElement("div", {
82
- className: classNames(['card-img-top', styles$7.image]),
84
+ className: classNames(['card-img-top', styles$6.image]),
83
85
  style: {
84
86
  backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
85
87
  }
86
88
  })),
87
89
  beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
88
- className: styles$7.infoButton,
90
+ className: styles$6.infoButton,
89
91
  onClick: onClickInfo,
90
92
  withoutStyle: true
91
93
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
92
94
  icon: faInfoCircle,
93
- className: styles$7.icon
95
+ className: styles$6.icon
94
96
  })) : null, selected ? /*#__PURE__*/React.createElement("div", {
95
- className: classNames(['text-danger', styles$7.closeIcon])
97
+ className: classNames(['text-danger', styles$6.closeIcon])
96
98
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
97
99
  icon: faTimesCircle,
98
- className: styles$7.icon
100
+ className: styles$6.icon
99
101
  })) : null),
100
102
  footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
101
- className: styles$7.icon,
103
+ className: styles$6.icon,
102
104
  icon: faPlayCircle
103
105
  }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
104
- className: styles$7.icon,
106
+ className: styles$6.icon,
105
107
  icon: faHeadphonesAlt
106
108
  }) : null, /*#__PURE__*/React.createElement("div", {
107
- className: classNames(['text-truncate', styles$7.label])
109
+ className: classNames(['text-truncate', styles$6.label])
108
110
  }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
109
111
  className: "text-muted ml-1"
110
112
  }, size) : null)),
111
113
  theme: selected ? 'primary' : null,
112
- className: classNames([styles$7.container, _defineProperty({
114
+ className: classNames([styles$6.container, _defineProperty({
113
115
  'border-primary': selected
114
116
  }, className, className !== null)]),
115
- footerClassName: classNames(['p-2', styles$7.footer]),
117
+ footerClassName: classNames(['p-2', styles$6.footer]),
116
118
  onClickFooter: onClick
117
119
  });
118
120
  };
@@ -120,8 +122,6 @@ var GalleryItem = function GalleryItem(_ref) {
120
122
  GalleryItem.propTypes = propTypes$a;
121
123
  GalleryItem.defaultProps = defaultProps$a;
122
124
 
123
- var styles$6 = {};
124
-
125
125
  var propTypes$9 = {
126
126
  items: PropTypes.medias,
127
127
  selectedItem: PropTypes.media,
@@ -143,7 +143,7 @@ var defaultProps$9 = {
143
143
  onClickItemInfo: null
144
144
  };
145
145
 
146
- var Gallery = function Gallery(_ref) {
146
+ function Gallery(_ref) {
147
147
  var items = _ref.items,
148
148
  selectedItem = _ref.selectedItem,
149
149
  withInfoButton = _ref.withInfoButton,
@@ -171,7 +171,7 @@ var Gallery = function Gallery(_ref) {
171
171
  return items;
172
172
  }, [selectedFirst, selectedItem, items]);
173
173
  return /*#__PURE__*/React.createElement("div", {
174
- className: classNames([styles$6.container, 'p-2', _defineProperty({}, className, className !== null)]),
174
+ className: classNames([styles$7.container, 'p-2', _defineProperty({}, className, className !== null)]),
175
175
  ref: ref
176
176
  }, /*#__PURE__*/React.createElement("div", {
177
177
  className: classNames(['row', 'mx-n1', 'row-cols-2', {
@@ -194,7 +194,7 @@ var Gallery = function Gallery(_ref) {
194
194
  withInfoButton: withInfoButton
195
195
  }));
196
196
  })));
197
- };
197
+ }
198
198
 
199
199
  Gallery.propTypes = propTypes$9;
200
200
  Gallery.defaultProps = defaultProps$9;
@@ -212,7 +212,7 @@ var defaultProps$8 = {
212
212
  className: null
213
213
  };
214
214
 
215
- var MediaMetadata = function MediaMetadata(_ref) {
215
+ function MediaMetadata(_ref) {
216
216
  var media = _ref.media,
217
217
  allTags = _ref.tags,
218
218
  className = _ref.className;
@@ -333,17 +333,17 @@ var MediaMetadata = function MediaMetadata(_ref) {
333
333
  'bg-light': type === 'audio',
334
334
  'bg-black': type === 'image'
335
335
  }, styles$5.video, type === 'video')])
336
- }, type === 'video' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("video", {
336
+ }, type === 'video' ? /*#__PURE__*/React.createElement("video", {
337
337
  className: styles$5.player,
338
338
  controls: true,
339
339
  src: url
340
- })) : null, type === 'audio' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
340
+ }) : null, type === 'audio' ? /*#__PURE__*/React.createElement("div", {
341
341
  className: styles$5.audio
342
342
  }, /*#__PURE__*/React.createElement("audio", {
343
343
  className: styles$5.player,
344
344
  controls: true,
345
345
  src: url
346
- }))) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
346
+ })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
347
347
  src: thumbnail,
348
348
  className: styles$5.image,
349
349
  alt: filename
@@ -515,7 +515,7 @@ var MediaMetadata = function MediaMetadata(_ref) {
515
515
  })), /*#__PURE__*/React.createElement("div", {
516
516
  className: "col"
517
517
  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null)));
518
- };
518
+ }
519
519
 
520
520
  MediaMetadata.propTypes = propTypes$8;
521
521
  MediaMetadata.defaultProps = defaultProps$8;
@@ -541,7 +541,7 @@ var useSearchFilters = function useSearchFilters(_ref) {
541
541
  "value": "This Micromag"
542
542
  }]
543
543
  }),
544
- value: storyId
544
+ value: "document:".concat(storyId)
545
545
  }] : []), [{
546
546
  label: /*#__PURE__*/React.createElement(FormattedMessage, {
547
547
  id: "xAzv6g",
@@ -682,7 +682,7 @@ PropTypes$1.shape({
682
682
 
683
683
  var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
684
684
 
685
- 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"};
685
+ 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","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
686
686
 
687
687
  var propTypes$7 = {
688
688
  value: PropTypes$1.string,
@@ -701,7 +701,7 @@ var defaultProps$7 = {
701
701
  className: null
702
702
  };
703
703
 
704
- var DropdownSection = function DropdownSection(_ref) {
704
+ function DropdownSection(_ref) {
705
705
  var value = _ref.value,
706
706
  items = _ref.items,
707
707
  onChange = _ref.onChange,
@@ -770,7 +770,7 @@ var DropdownSection = function DropdownSection(_ref) {
770
770
  "data-value": itemValue
771
771
  }, label);
772
772
  }))) : null;
773
- };
773
+ }
774
774
 
775
775
  DropdownSection.propTypes = propTypes$7;
776
776
  DropdownSection.defaultProps = defaultProps$7;
@@ -842,8 +842,8 @@ var Search = function Search(_ref) {
842
842
  type: "text",
843
843
  value: value || '',
844
844
  placeholder: intl.formatMessage({
845
- "id": "gprXiG",
846
- "defaultMessage": [{
845
+ id: "gprXiG",
846
+ defaultMessage: [{
847
847
  "type": 0,
848
848
  "value": "Search..."
849
849
  }]
@@ -978,8 +978,8 @@ var SearchFilters = function SearchFilters(_ref) {
978
978
  }),
979
979
  onClick: onClose,
980
980
  title: intl.formatMessage({
981
- "id": "yCXMzz",
982
- "defaultMessage": [{
981
+ id: "yCXMzz",
982
+ defaultMessage: [{
983
983
  "type": 0,
984
984
  "value": "Close"
985
985
  }]
@@ -1005,7 +1005,9 @@ var SearchFilters = function SearchFilters(_ref) {
1005
1005
  SearchFilters.propTypes = propTypes$4;
1006
1006
  SearchFilters.defaultProps = defaultProps$4;
1007
1007
 
1008
- var styles$1 = {"container":"micromag-media-gallery-buttons-close-container"};
1008
+ var styles$1 = {"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"};
1009
+
1010
+ var styles = {"container":"micromag-media-gallery-buttons-close-container"};
1009
1011
 
1010
1012
  var _excluded = ["className"];
1011
1013
  var propTypes$3 = {
@@ -1020,11 +1022,11 @@ var CloseButton = function CloseButton(_ref) {
1020
1022
  props = _objectWithoutProperties(_ref, _excluded);
1021
1023
 
1022
1024
  return /*#__PURE__*/React.createElement(Button, Object.assign({
1023
- className: classNames([styles$1.container, _defineProperty({}, className, className !== null)]),
1025
+ className: classNames([styles.container, _defineProperty({}, className, className !== null)]),
1024
1026
  withoutStyle: true,
1025
1027
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
1026
1028
  icon: faTimes,
1027
- className: styles$1.icon
1029
+ className: styles.icon
1028
1030
  }),
1029
1031
  iconPosition: "right"
1030
1032
  }, props));
@@ -1033,8 +1035,6 @@ var CloseButton = function CloseButton(_ref) {
1033
1035
  CloseButton.propTypes = propTypes$3;
1034
1036
  CloseButton.defaultProps = defaultProps$3;
1035
1037
 
1036
- 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"};
1037
-
1038
1038
  var propTypes$2 = {
1039
1039
  filters: PropTypes$1.shape({
1040
1040
  types: PropTypes$1.arrayOf(PropTypes$1.string),
@@ -1055,7 +1055,7 @@ var defaultProps$2 = {
1055
1055
  className: null
1056
1056
  };
1057
1057
 
1058
- var ActiveFilters = function ActiveFilters(_ref) {
1058
+ function ActiveFilters(_ref) {
1059
1059
  var filters = _ref.filters,
1060
1060
  onChange = _ref.onChange,
1061
1061
  onReset = _ref.onReset,
@@ -1080,11 +1080,11 @@ var ActiveFilters = function ActiveFilters(_ref) {
1080
1080
  return oneHasValue || filters[key] !== null;
1081
1081
  }, false);
1082
1082
  return /*#__PURE__*/React.createElement("div", {
1083
- className: classNames(['w-100', styles.container, _defineProperty({}, className, className)])
1083
+ className: classNames(['w-100', styles$1.container, _defineProperty({}, className, className)])
1084
1084
  }, hasValue ? /*#__PURE__*/React.createElement("div", {
1085
- className: styles.heading
1085
+ className: styles$1.heading
1086
1086
  }, /*#__PURE__*/React.createElement("div", {
1087
- className: styles.title
1087
+ className: styles$1.title
1088
1088
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
1089
1089
  id: "t2cFdl",
1090
1090
  defaultMessage: [{
@@ -1092,7 +1092,7 @@ var ActiveFilters = function ActiveFilters(_ref) {
1092
1092
  "value": "Active filters"
1093
1093
  }]
1094
1094
  })), /*#__PURE__*/React.createElement(CloseButton, {
1095
- className: styles.resetButton,
1095
+ className: styles$1.resetButton,
1096
1096
  onClick: handleReset
1097
1097
  }, /*#__PURE__*/React.createElement("u", null, /*#__PURE__*/React.createElement(FormattedMessage, {
1098
1098
  id: "/T/UDH",
@@ -1114,7 +1114,7 @@ var ActiveFilters = function ActiveFilters(_ref) {
1114
1114
  label = _ref3$label === void 0 ? '' : _ref3$label;
1115
1115
 
1116
1116
  return /*#__PURE__*/React.createElement(Button, {
1117
- className: styles.activeTag,
1117
+ className: styles$1.activeTag,
1118
1118
  key: "filter-button-".concat(activeValue),
1119
1119
  type: "submit",
1120
1120
  size: "sm",
@@ -1130,7 +1130,7 @@ var ActiveFilters = function ActiveFilters(_ref) {
1130
1130
  });
1131
1131
  }) : null;
1132
1132
  }) : null);
1133
- };
1133
+ }
1134
1134
 
1135
1135
  ActiveFilters.propTypes = propTypes$2;
1136
1136
  ActiveFilters.defaultProps = defaultProps$2;
@@ -1146,6 +1146,7 @@ var propTypes$1 = {
1146
1146
  withoutType: PropTypes$1.bool,
1147
1147
  onClickAdd: PropTypes$1.func,
1148
1148
  onClickItem: PropTypes$1.func,
1149
+ onClickItemInfo: PropTypes$1.func,
1149
1150
  // onClickCancel: PropTypes.func, // TODO: still needed?
1150
1151
  onFocusSearch: PropTypes$1.func,
1151
1152
  onFiltersChange: PropTypes$1.func,
@@ -1163,6 +1164,7 @@ var defaultProps$1 = {
1163
1164
  withoutType: true,
1164
1165
  onClickAdd: null,
1165
1166
  onClickItem: null,
1167
+ onClickItemInfo: null,
1166
1168
  // onClickCancel: null,
1167
1169
  onFocusSearch: null,
1168
1170
  onFiltersChange: null,
@@ -1170,7 +1172,7 @@ var defaultProps$1 = {
1170
1172
  className: null
1171
1173
  };
1172
1174
 
1173
- var Navbar = function Navbar(_ref) {
1175
+ function Navbar(_ref) {
1174
1176
  var filters = _ref.filters,
1175
1177
  media = _ref.media,
1176
1178
  selectedMedia = _ref.selectedMedia,
@@ -1182,6 +1184,7 @@ var Navbar = function Navbar(_ref) {
1182
1184
  className = _ref.className,
1183
1185
  onClickAdd = _ref.onClickAdd,
1184
1186
  onClickItem = _ref.onClickItem,
1187
+ onClickItemInfo = _ref.onClickItemInfo,
1185
1188
  onFocusSearch = _ref.onFocusSearch,
1186
1189
  onFiltersChange = _ref.onFiltersChange,
1187
1190
  onClickBack = _ref.onClickBack;
@@ -1281,20 +1284,31 @@ var Navbar = function Navbar(_ref) {
1281
1284
  className: classNames([styles$4.container, 'navbar', _defineProperty({}, className, className !== null)])
1282
1285
  }, /*#__PURE__*/React.createElement("div", {
1283
1286
  className: styles$4.inner
1284
- }, /*#__PURE__*/React.createElement("strong", {
1285
- className: "list-group-item rounded py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
1286
- }, /*#__PURE__*/React.createElement("div", {
1287
- className: "d-flex align-items-center"
1288
- }, selectedMedia !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Media, {
1287
+ }, media === null ? /*#__PURE__*/React.createElement("strong", {
1288
+ className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
1289
+ }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
1290
+ className: "d-flex px-0 py-0 align-items-center",
1291
+ onClick: function onClick() {
1292
+ return onClickItemInfo(selectedMedia);
1293
+ }
1294
+ }, /*#__PURE__*/React.createElement(Media, {
1289
1295
  className: styles$4.mediaPreview,
1290
1296
  thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
1291
1297
  }), /*#__PURE__*/React.createElement("span", {
1292
1298
  className: "ml-2"
1293
- }, selectedMedia.name || 'untitled')) : /*#__PURE__*/React.createElement(FormattedMessage, {
1294
- id: "t9KqNo",
1299
+ }, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
1300
+ id: "fVqgfl",
1301
+ defaultMessage: [{
1302
+ "type": 0,
1303
+ "value": "[no title]"
1304
+ }]
1305
+ }))) : /*#__PURE__*/React.createElement("span", {
1306
+ className: "pl-2"
1307
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
1308
+ id: "VspZp9",
1295
1309
  defaultMessage: [{
1296
1310
  "type": 0,
1297
- "value": "Upload a new image"
1311
+ "value": "Upload an image"
1298
1312
  }]
1299
1313
  })), selectedMedia === null ? /*#__PURE__*/React.createElement(Button, {
1300
1314
  theme: "primary",
@@ -1303,8 +1317,8 @@ var Navbar = function Navbar(_ref) {
1303
1317
  }),
1304
1318
  onClick: onClickAdd,
1305
1319
  title: intl.formatMessage({
1306
- "id": "Tt4jN1",
1307
- "defaultMessage": [{
1320
+ id: "Tt4jN1",
1321
+ defaultMessage: [{
1308
1322
  "type": 0,
1309
1323
  "value": "Add"
1310
1324
  }]
@@ -1318,21 +1332,21 @@ var Navbar = function Navbar(_ref) {
1318
1332
  return onClickItem(selectedMedia);
1319
1333
  },
1320
1334
  title: intl.formatMessage({
1321
- "id": "UG3SXh",
1322
- "defaultMessage": [{
1335
+ id: "UG3SXh",
1336
+ defaultMessage: [{
1323
1337
  "type": 0,
1324
1338
  "value": "Remove"
1325
1339
  }]
1326
1340
  })
1327
- })), !withoutSource ? /*#__PURE__*/React.createElement("div", {
1328
- className: "py-2 d-flex w-100 flex-nowrap"
1341
+ })) : null, !withoutSource && media === null ? /*#__PURE__*/React.createElement("div", {
1342
+ className: "mt-1 py-2 d-flex w-100 align-items-center flex-nowrap"
1329
1343
  }, /*#__PURE__*/React.createElement(DropdownSection, {
1330
1344
  items: sources,
1331
1345
  value: filters.source || null,
1332
1346
  onChange: onSourceChange
1333
- })) : null, /*#__PURE__*/React.createElement("div", {
1347
+ })) : null, media !== null ? /*#__PURE__*/React.createElement("div", {
1334
1348
  className: "w-100 d-flex flex-nowrap justify-content-between"
1335
- }, media !== null ? /*#__PURE__*/React.createElement("form", {
1349
+ }, /*#__PURE__*/React.createElement("form", {
1336
1350
  className: classNames(['form-inline', 'mr-2'])
1337
1351
  }, /*#__PURE__*/React.createElement(Button, {
1338
1352
  theme: "secondary",
@@ -1342,9 +1356,9 @@ var Navbar = function Navbar(_ref) {
1342
1356
  icon: faChevronLeft
1343
1357
  }),
1344
1358
  onClick: onClickBack
1345
- })) : null, /*#__PURE__*/React.createElement("strong", {
1359
+ })), /*#__PURE__*/React.createElement("strong", {
1346
1360
  className: "navbar-text mr-auto w-100"
1347
- }, media !== null ? media.name : null)), media === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
1361
+ }, media !== null ? media.name : null)) : null, media === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
1348
1362
  className: "d-flex w-100 flex-nowrap justify-content-between"
1349
1363
  }, /*#__PURE__*/React.createElement(Search, {
1350
1364
  value: searchValue,
@@ -1367,7 +1381,7 @@ var Navbar = function Navbar(_ref) {
1367
1381
  onChange: onFilterChange,
1368
1382
  onReset: onFiltersReset
1369
1383
  })) : null));
1370
- };
1384
+ }
1371
1385
 
1372
1386
  Navbar.propTypes = propTypes$1;
1373
1387
  Navbar.defaultProps = defaultProps$1;
@@ -1401,16 +1415,16 @@ var defaultProps = {
1401
1415
  onClickMedia: null
1402
1416
  };
1403
1417
 
1404
- var MediaGallery = function MediaGallery(_ref) {
1418
+ function MediaGallery(_ref) {
1405
1419
  var _ref3;
1406
1420
 
1407
1421
  var type = _ref.type,
1408
1422
  source = _ref.source,
1409
1423
  isPicker = _ref.isPicker,
1410
1424
  isSmall = _ref.isSmall,
1411
- withoutTitle = _ref.withoutTitle;
1412
- _ref.withoutSource;
1413
- var withoutType = _ref.withoutType,
1425
+ withoutTitle = _ref.withoutTitle,
1426
+ withoutSource = _ref.withoutSource,
1427
+ withoutType = _ref.withoutType,
1414
1428
  initialMedias = _ref.medias,
1415
1429
  selectedMedia = _ref.selectedMedia,
1416
1430
  className = _ref.className,
@@ -1540,11 +1554,11 @@ var MediaGallery = function MediaGallery(_ref) {
1540
1554
  onFiltersChange: onFiltersChange,
1541
1555
  onClickAdd: onClickAdd,
1542
1556
  onClickItem: onClickItem,
1557
+ onClickItemInfo: onClickItemInfo,
1543
1558
  onClickBack: onClickBack,
1544
1559
  onClickCancel: onClickCancel,
1545
- withoutTitle: withoutTitle // withoutSource={withoutSource}
1546
- ,
1547
- withoutSource: false,
1560
+ withoutTitle: withoutTitle,
1561
+ withoutSource: withoutSource,
1548
1562
  withoutType: withoutType,
1549
1563
  storyId: storyId,
1550
1564
  authors: authors,
@@ -1576,7 +1590,7 @@ var MediaGallery = function MediaGallery(_ref) {
1576
1590
  onUploaded: onUploadCompleted,
1577
1591
  onRequestClose: onUploadRequestClose
1578
1592
  }));
1579
- };
1593
+ }
1580
1594
 
1581
1595
  MediaGallery.propTypes = propTypes;
1582
1596
  MediaGallery.defaultProps = defaultProps;
package/lib/index.js CHANGED
@@ -34,6 +34,8 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
34
34
 
35
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
36
 
37
+ var styles$7 = {};
38
+
37
39
  var middleEllipsis = function middleEllipsis(string, maxLength) {
38
40
  if (!string) return string;
39
41
  if (maxLength < 1) return string;
@@ -46,7 +48,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
46
48
  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
47
49
  };
48
50
 
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"};
51
+ var styles$6 = {"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"};
50
52
 
51
53
  var propTypes$a = {
52
54
  item: core.PropTypes.media,
@@ -91,43 +93,43 @@ var GalleryItem = function GalleryItem(_ref) {
91
93
  return /*#__PURE__*/React__default["default"].createElement(components.Card, {
92
94
  image: /*#__PURE__*/React__default["default"].createElement("button", {
93
95
  type: "button",
94
- className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$7.imageButton]),
96
+ className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$6.imageButton]),
95
97
  onClick: onClick
96
98
  }, /*#__PURE__*/React__default["default"].createElement("div", {
97
- className: classNames__default["default"](['card-img-top', styles$7.image]),
99
+ className: classNames__default["default"](['card-img-top', styles$6.image]),
98
100
  style: {
99
101
  backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
100
102
  }
101
103
  })),
102
104
  beforeBody: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withInfoButton ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
103
- className: styles$7.infoButton,
105
+ className: styles$6.infoButton,
104
106
  onClick: onClickInfo,
105
107
  withoutStyle: true
106
108
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
107
109
  icon: freeSolidSvgIcons.faInfoCircle,
108
- className: styles$7.icon
110
+ className: styles$6.icon
109
111
  })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
110
- className: classNames__default["default"](['text-danger', styles$7.closeIcon])
112
+ className: classNames__default["default"](['text-danger', styles$6.closeIcon])
111
113
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
112
114
  icon: freeSolidSvgIcons.faTimesCircle,
113
- className: styles$7.icon
115
+ className: styles$6.icon
114
116
  })) : null),
115
117
  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,
118
+ className: styles$6.icon,
117
119
  icon: freeSolidSvgIcons.faPlayCircle
118
120
  }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
119
- className: styles$7.icon,
121
+ className: styles$6.icon,
120
122
  icon: freeSolidSvgIcons.faHeadphonesAlt
121
123
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
122
- className: classNames__default["default"](['text-truncate', styles$7.label])
124
+ className: classNames__default["default"](['text-truncate', styles$6.label])
123
125
  }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
124
126
  className: "text-muted ml-1"
125
127
  }, size) : null)),
126
128
  theme: selected ? 'primary' : null,
127
- className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({
129
+ className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({
128
130
  'border-primary': selected
129
131
  }, className, className !== null)]),
130
- footerClassName: classNames__default["default"](['p-2', styles$7.footer]),
132
+ footerClassName: classNames__default["default"](['p-2', styles$6.footer]),
131
133
  onClickFooter: onClick
132
134
  });
133
135
  };
@@ -135,8 +137,6 @@ var GalleryItem = function GalleryItem(_ref) {
135
137
  GalleryItem.propTypes = propTypes$a;
136
138
  GalleryItem.defaultProps = defaultProps$a;
137
139
 
138
- var styles$6 = {};
139
-
140
140
  var propTypes$9 = {
141
141
  items: core.PropTypes.medias,
142
142
  selectedItem: core.PropTypes.media,
@@ -158,7 +158,7 @@ var defaultProps$9 = {
158
158
  onClickItemInfo: null
159
159
  };
160
160
 
161
- var Gallery = function Gallery(_ref) {
161
+ function Gallery(_ref) {
162
162
  var items = _ref.items,
163
163
  selectedItem = _ref.selectedItem,
164
164
  withInfoButton = _ref.withInfoButton,
@@ -186,7 +186,7 @@ var Gallery = function Gallery(_ref) {
186
186
  return items;
187
187
  }, [selectedFirst, selectedItem, items]);
188
188
  return /*#__PURE__*/React__default["default"].createElement("div", {
189
- className: classNames__default["default"]([styles$6.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
189
+ className: classNames__default["default"]([styles$7.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
190
190
  ref: ref
191
191
  }, /*#__PURE__*/React__default["default"].createElement("div", {
192
192
  className: classNames__default["default"](['row', 'mx-n1', 'row-cols-2', {
@@ -209,7 +209,7 @@ var Gallery = function Gallery(_ref) {
209
209
  withInfoButton: withInfoButton
210
210
  }));
211
211
  })));
212
- };
212
+ }
213
213
 
214
214
  Gallery.propTypes = propTypes$9;
215
215
  Gallery.defaultProps = defaultProps$9;
@@ -227,7 +227,7 @@ var defaultProps$8 = {
227
227
  className: null
228
228
  };
229
229
 
230
- var MediaMetadata = function MediaMetadata(_ref) {
230
+ function MediaMetadata(_ref) {
231
231
  var media = _ref.media,
232
232
  allTags = _ref.tags,
233
233
  className = _ref.className;
@@ -348,17 +348,17 @@ var MediaMetadata = function MediaMetadata(_ref) {
348
348
  'bg-light': type === 'audio',
349
349
  'bg-black': type === 'image'
350
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", {
351
+ }, type === 'video' ? /*#__PURE__*/React__default["default"].createElement("video", {
352
352
  className: styles$5.player,
353
353
  controls: true,
354
354
  src: url
355
- })) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
355
+ }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement("div", {
356
356
  className: styles$5.audio
357
357
  }, /*#__PURE__*/React__default["default"].createElement("audio", {
358
358
  className: styles$5.player,
359
359
  controls: true,
360
360
  src: url
361
- }))) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
361
+ })) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
362
362
  src: thumbnail,
363
363
  className: styles$5.image,
364
364
  alt: filename
@@ -530,7 +530,7 @@ var MediaMetadata = function MediaMetadata(_ref) {
530
530
  })), /*#__PURE__*/React__default["default"].createElement("div", {
531
531
  className: "col"
532
532
  }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null)));
533
- };
533
+ }
534
534
 
535
535
  MediaMetadata.propTypes = propTypes$8;
536
536
  MediaMetadata.defaultProps = defaultProps$8;
@@ -556,7 +556,7 @@ var useSearchFilters = function useSearchFilters(_ref) {
556
556
  "value": "This Micromag"
557
557
  }]
558
558
  }),
559
- value: storyId
559
+ value: "document:".concat(storyId)
560
560
  }] : []), [{
561
561
  label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
562
562
  id: "xAzv6g",
@@ -697,7 +697,7 @@ PropTypes__default["default"].shape({
697
697
 
698
698
  var styles$4 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview"};
699
699
 
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"};
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","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
701
701
 
702
702
  var propTypes$7 = {
703
703
  value: PropTypes__default["default"].string,
@@ -716,7 +716,7 @@ var defaultProps$7 = {
716
716
  className: null
717
717
  };
718
718
 
719
- var DropdownSection = function DropdownSection(_ref) {
719
+ function DropdownSection(_ref) {
720
720
  var value = _ref.value,
721
721
  items = _ref.items,
722
722
  onChange = _ref.onChange,
@@ -785,7 +785,7 @@ var DropdownSection = function DropdownSection(_ref) {
785
785
  "data-value": itemValue
786
786
  }, label);
787
787
  }))) : null;
788
- };
788
+ }
789
789
 
790
790
  DropdownSection.propTypes = propTypes$7;
791
791
  DropdownSection.defaultProps = defaultProps$7;
@@ -857,8 +857,8 @@ var Search = function Search(_ref) {
857
857
  type: "text",
858
858
  value: value || '',
859
859
  placeholder: intl.formatMessage({
860
- "id": "gprXiG",
861
- "defaultMessage": [{
860
+ id: "gprXiG",
861
+ defaultMessage: [{
862
862
  "type": 0,
863
863
  "value": "Search..."
864
864
  }]
@@ -993,8 +993,8 @@ var SearchFilters = function SearchFilters(_ref) {
993
993
  }),
994
994
  onClick: onClose,
995
995
  title: intl.formatMessage({
996
- "id": "yCXMzz",
997
- "defaultMessage": [{
996
+ id: "yCXMzz",
997
+ defaultMessage: [{
998
998
  "type": 0,
999
999
  "value": "Close"
1000
1000
  }]
@@ -1020,7 +1020,9 @@ var SearchFilters = function SearchFilters(_ref) {
1020
1020
  SearchFilters.propTypes = propTypes$4;
1021
1021
  SearchFilters.defaultProps = defaultProps$4;
1022
1022
 
1023
- var styles$1 = {"container":"micromag-media-gallery-buttons-close-container"};
1023
+ var styles$1 = {"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"};
1024
+
1025
+ var styles = {"container":"micromag-media-gallery-buttons-close-container"};
1024
1026
 
1025
1027
  var _excluded = ["className"];
1026
1028
  var propTypes$3 = {
@@ -1035,11 +1037,11 @@ var CloseButton = function CloseButton(_ref) {
1035
1037
  props = _objectWithoutProperties__default["default"](_ref, _excluded);
1036
1038
 
1037
1039
  return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
1038
- className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className !== null)]),
1040
+ className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)]),
1039
1041
  withoutStyle: true,
1040
1042
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1041
1043
  icon: freeSolidSvgIcons.faTimes,
1042
- className: styles$1.icon
1044
+ className: styles.icon
1043
1045
  }),
1044
1046
  iconPosition: "right"
1045
1047
  }, props));
@@ -1048,8 +1050,6 @@ var CloseButton = function CloseButton(_ref) {
1048
1050
  CloseButton.propTypes = propTypes$3;
1049
1051
  CloseButton.defaultProps = defaultProps$3;
1050
1052
 
1051
- 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"};
1052
-
1053
1053
  var propTypes$2 = {
1054
1054
  filters: PropTypes__default["default"].shape({
1055
1055
  types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
@@ -1070,7 +1070,7 @@ var defaultProps$2 = {
1070
1070
  className: null
1071
1071
  };
1072
1072
 
1073
- var ActiveFilters = function ActiveFilters(_ref) {
1073
+ function ActiveFilters(_ref) {
1074
1074
  var filters = _ref.filters,
1075
1075
  onChange = _ref.onChange,
1076
1076
  onReset = _ref.onReset,
@@ -1095,11 +1095,11 @@ var ActiveFilters = function ActiveFilters(_ref) {
1095
1095
  return oneHasValue || filters[key] !== null;
1096
1096
  }, false);
1097
1097
  return /*#__PURE__*/React__default["default"].createElement("div", {
1098
- className: classNames__default["default"](['w-100', styles.container, _defineProperty__default["default"]({}, className, className)])
1098
+ className: classNames__default["default"](['w-100', styles$1.container, _defineProperty__default["default"]({}, className, className)])
1099
1099
  }, hasValue ? /*#__PURE__*/React__default["default"].createElement("div", {
1100
- className: styles.heading
1100
+ className: styles$1.heading
1101
1101
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1102
- className: styles.title
1102
+ className: styles$1.title
1103
1103
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1104
1104
  id: "t2cFdl",
1105
1105
  defaultMessage: [{
@@ -1107,7 +1107,7 @@ var ActiveFilters = function ActiveFilters(_ref) {
1107
1107
  "value": "Active filters"
1108
1108
  }]
1109
1109
  })), /*#__PURE__*/React__default["default"].createElement(CloseButton, {
1110
- className: styles.resetButton,
1110
+ className: styles$1.resetButton,
1111
1111
  onClick: handleReset
1112
1112
  }, /*#__PURE__*/React__default["default"].createElement("u", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1113
1113
  id: "/T/UDH",
@@ -1129,7 +1129,7 @@ var ActiveFilters = function ActiveFilters(_ref) {
1129
1129
  label = _ref3$label === void 0 ? '' : _ref3$label;
1130
1130
 
1131
1131
  return /*#__PURE__*/React__default["default"].createElement(components.Button, {
1132
- className: styles.activeTag,
1132
+ className: styles$1.activeTag,
1133
1133
  key: "filter-button-".concat(activeValue),
1134
1134
  type: "submit",
1135
1135
  size: "sm",
@@ -1145,7 +1145,7 @@ var ActiveFilters = function ActiveFilters(_ref) {
1145
1145
  });
1146
1146
  }) : null;
1147
1147
  }) : null);
1148
- };
1148
+ }
1149
1149
 
1150
1150
  ActiveFilters.propTypes = propTypes$2;
1151
1151
  ActiveFilters.defaultProps = defaultProps$2;
@@ -1161,6 +1161,7 @@ var propTypes$1 = {
1161
1161
  withoutType: PropTypes__default["default"].bool,
1162
1162
  onClickAdd: PropTypes__default["default"].func,
1163
1163
  onClickItem: PropTypes__default["default"].func,
1164
+ onClickItemInfo: PropTypes__default["default"].func,
1164
1165
  // onClickCancel: PropTypes.func, // TODO: still needed?
1165
1166
  onFocusSearch: PropTypes__default["default"].func,
1166
1167
  onFiltersChange: PropTypes__default["default"].func,
@@ -1178,6 +1179,7 @@ var defaultProps$1 = {
1178
1179
  withoutType: true,
1179
1180
  onClickAdd: null,
1180
1181
  onClickItem: null,
1182
+ onClickItemInfo: null,
1181
1183
  // onClickCancel: null,
1182
1184
  onFocusSearch: null,
1183
1185
  onFiltersChange: null,
@@ -1185,7 +1187,7 @@ var defaultProps$1 = {
1185
1187
  className: null
1186
1188
  };
1187
1189
 
1188
- var Navbar = function Navbar(_ref) {
1190
+ function Navbar(_ref) {
1189
1191
  var filters = _ref.filters,
1190
1192
  media = _ref.media,
1191
1193
  selectedMedia = _ref.selectedMedia,
@@ -1197,6 +1199,7 @@ var Navbar = function Navbar(_ref) {
1197
1199
  className = _ref.className,
1198
1200
  onClickAdd = _ref.onClickAdd,
1199
1201
  onClickItem = _ref.onClickItem,
1202
+ onClickItemInfo = _ref.onClickItemInfo,
1200
1203
  onFocusSearch = _ref.onFocusSearch,
1201
1204
  onFiltersChange = _ref.onFiltersChange,
1202
1205
  onClickBack = _ref.onClickBack;
@@ -1296,20 +1299,31 @@ var Navbar = function Navbar(_ref) {
1296
1299
  className: classNames__default["default"]([styles$4.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
1297
1300
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1298
1301
  className: styles$4.inner
1299
- }, /*#__PURE__*/React__default["default"].createElement("strong", {
1300
- className: "list-group-item rounded py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
1301
- }, /*#__PURE__*/React__default["default"].createElement("div", {
1302
- className: "d-flex align-items-center"
1303
- }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(components.Media, {
1302
+ }, media === null ? /*#__PURE__*/React__default["default"].createElement("strong", {
1303
+ className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
1304
+ }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1305
+ className: "d-flex px-0 py-0 align-items-center",
1306
+ onClick: function onClick() {
1307
+ return onClickItemInfo(selectedMedia);
1308
+ }
1309
+ }, /*#__PURE__*/React__default["default"].createElement(components.Media, {
1304
1310
  className: styles$4.mediaPreview,
1305
1311
  thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
1306
1312
  }), /*#__PURE__*/React__default["default"].createElement("span", {
1307
1313
  className: "ml-2"
1308
- }, selectedMedia.name || 'untitled')) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1309
- id: "t9KqNo",
1314
+ }, selectedMedia.name || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1315
+ id: "fVqgfl",
1316
+ defaultMessage: [{
1317
+ "type": 0,
1318
+ "value": "[no title]"
1319
+ }]
1320
+ }))) : /*#__PURE__*/React__default["default"].createElement("span", {
1321
+ className: "pl-2"
1322
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1323
+ id: "VspZp9",
1310
1324
  defaultMessage: [{
1311
1325
  "type": 0,
1312
- "value": "Upload a new image"
1326
+ "value": "Upload an image"
1313
1327
  }]
1314
1328
  })), selectedMedia === null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1315
1329
  theme: "primary",
@@ -1318,8 +1332,8 @@ var Navbar = function Navbar(_ref) {
1318
1332
  }),
1319
1333
  onClick: onClickAdd,
1320
1334
  title: intl.formatMessage({
1321
- "id": "Tt4jN1",
1322
- "defaultMessage": [{
1335
+ id: "Tt4jN1",
1336
+ defaultMessage: [{
1323
1337
  "type": 0,
1324
1338
  "value": "Add"
1325
1339
  }]
@@ -1333,21 +1347,21 @@ var Navbar = function Navbar(_ref) {
1333
1347
  return onClickItem(selectedMedia);
1334
1348
  },
1335
1349
  title: intl.formatMessage({
1336
- "id": "UG3SXh",
1337
- "defaultMessage": [{
1350
+ id: "UG3SXh",
1351
+ defaultMessage: [{
1338
1352
  "type": 0,
1339
1353
  "value": "Remove"
1340
1354
  }]
1341
1355
  })
1342
- })), !withoutSource ? /*#__PURE__*/React__default["default"].createElement("div", {
1343
- className: "py-2 d-flex w-100 flex-nowrap"
1356
+ })) : null, !withoutSource && media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
1357
+ className: "mt-1 py-2 d-flex w-100 align-items-center flex-nowrap"
1344
1358
  }, /*#__PURE__*/React__default["default"].createElement(DropdownSection, {
1345
1359
  items: sources,
1346
1360
  value: filters.source || null,
1347
1361
  onChange: onSourceChange
1348
- })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
1362
+ })) : null, media !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
1349
1363
  className: "w-100 d-flex flex-nowrap justify-content-between"
1350
- }, media !== null ? /*#__PURE__*/React__default["default"].createElement("form", {
1364
+ }, /*#__PURE__*/React__default["default"].createElement("form", {
1351
1365
  className: classNames__default["default"](['form-inline', 'mr-2'])
1352
1366
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
1353
1367
  theme: "secondary",
@@ -1357,9 +1371,9 @@ var Navbar = function Navbar(_ref) {
1357
1371
  icon: freeSolidSvgIcons.faChevronLeft
1358
1372
  }),
1359
1373
  onClick: onClickBack
1360
- })) : null, /*#__PURE__*/React__default["default"].createElement("strong", {
1374
+ })), /*#__PURE__*/React__default["default"].createElement("strong", {
1361
1375
  className: "navbar-text mr-auto w-100"
1362
- }, media !== null ? media.name : null)), media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1376
+ }, media !== null ? media.name : null)) : null, media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1363
1377
  className: "d-flex w-100 flex-nowrap justify-content-between"
1364
1378
  }, /*#__PURE__*/React__default["default"].createElement(Search, {
1365
1379
  value: searchValue,
@@ -1382,7 +1396,7 @@ var Navbar = function Navbar(_ref) {
1382
1396
  onChange: onFilterChange,
1383
1397
  onReset: onFiltersReset
1384
1398
  })) : null));
1385
- };
1399
+ }
1386
1400
 
1387
1401
  Navbar.propTypes = propTypes$1;
1388
1402
  Navbar.defaultProps = defaultProps$1;
@@ -1416,16 +1430,16 @@ var defaultProps = {
1416
1430
  onClickMedia: null
1417
1431
  };
1418
1432
 
1419
- var MediaGallery = function MediaGallery(_ref) {
1433
+ function MediaGallery(_ref) {
1420
1434
  var _ref3;
1421
1435
 
1422
1436
  var type = _ref.type,
1423
1437
  source = _ref.source,
1424
1438
  isPicker = _ref.isPicker,
1425
1439
  isSmall = _ref.isSmall,
1426
- withoutTitle = _ref.withoutTitle;
1427
- _ref.withoutSource;
1428
- var withoutType = _ref.withoutType,
1440
+ withoutTitle = _ref.withoutTitle,
1441
+ withoutSource = _ref.withoutSource,
1442
+ withoutType = _ref.withoutType,
1429
1443
  initialMedias = _ref.medias,
1430
1444
  selectedMedia = _ref.selectedMedia,
1431
1445
  className = _ref.className,
@@ -1555,11 +1569,11 @@ var MediaGallery = function MediaGallery(_ref) {
1555
1569
  onFiltersChange: onFiltersChange,
1556
1570
  onClickAdd: onClickAdd,
1557
1571
  onClickItem: onClickItem,
1572
+ onClickItemInfo: onClickItemInfo,
1558
1573
  onClickBack: onClickBack,
1559
1574
  onClickCancel: onClickCancel,
1560
- withoutTitle: withoutTitle // withoutSource={withoutSource}
1561
- ,
1562
- withoutSource: false,
1575
+ withoutTitle: withoutTitle,
1576
+ withoutSource: withoutSource,
1563
1577
  withoutType: withoutType,
1564
1578
  storyId: storyId,
1565
1579
  authors: authors,
@@ -1591,7 +1605,7 @@ var MediaGallery = function MediaGallery(_ref) {
1591
1605
  onUploaded: onUploadCompleted,
1592
1606
  onRequestClose: onUploadRequestClose
1593
1607
  }));
1594
- };
1608
+ }
1595
1609
 
1596
1610
  MediaGallery.propTypes = propTypes;
1597
1611
  MediaGallery.defaultProps = defaultProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/media-gallery",
3
- "version": "0.2.397",
3
+ "version": "0.2.403",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -38,8 +38,7 @@
38
38
  "scss"
39
39
  ],
40
40
  "scripts": {
41
- "prepare": "../../scripts/prepare-package.sh --scss",
42
- "start": "PUBLIC_URL=http://localhost/ react-scripts start"
41
+ "prepare": "../../scripts/prepare-package.sh --scss"
43
42
  },
44
43
  "devDependencies": {
45
44
  "react": "^16.8.0 || ^17.0.0",
@@ -54,8 +53,8 @@
54
53
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
55
54
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
56
55
  "@fortawesome/react-fontawesome": "^0.1.13",
57
- "@micromag/core": "^0.2.396",
58
- "@micromag/data": "^0.2.396",
56
+ "@micromag/core": "^0.2.403",
57
+ "@micromag/data": "^0.2.403",
59
58
  "bootstrap": "^4.5.3",
60
59
  "bootstrap.native": "^3.0.14",
61
60
  "change-case": "^4.1.2",
@@ -69,5 +68,5 @@
69
68
  "publishConfig": {
70
69
  "access": "public"
71
70
  },
72
- "gitHead": "23893b7baf6d53990e52f2a6cb9431c7f53113b5"
71
+ "gitHead": "7a6604651c990286e594350ef730d40772937195"
73
72
  }
package/scss/styles.scss CHANGED
@@ -1 +1 @@
1
- @import '~@micromag/media-gallery/assets/css/styles.css';
1
+ @import '../assets/css/styles.css';