@micromag/media-gallery 0.3.23 → 0.3.27
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.
- package/assets/css/styles.css +4 -3
- package/es/index.js +53 -53
- package/lib/index.js +53 -53
- package/package.json +4 -4
package/assets/css/styles.css
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
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
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{
|
|
3
|
+
.micromag-media-gallery-items-gallery-item-container{position:relative;overflow:hidden;border:0;cursor:pointer}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{border:0;-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:100%;background-color:#1c1c1c;background-repeat:no-repeat;background-position:50%;background-size:contain}.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:.75rem}.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
|
-
.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:
|
|
5
|
+
.micromag-media-gallery-partials-navbar-container{position:relative;max-width:100%;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{display:block;width:100px;padding-right:5px}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{display:block;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaLabel{display:block;min-width:0}
|
|
6
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
|
-
.micromag-media-gallery-forms-search-filters-container{position:absolute;z-index:1;right:0;left:0;width:100%;padding:0
|
|
7
|
+
.micromag-media-gallery-forms-search-filters-container{position:absolute;z-index:1;right:0;left:0;width:100%;padding:0 10px;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-forms-tag-section-container .micromag-media-gallery-forms-tag-section-tag{font-size:.75rem;line-height:1.1}
|
|
8
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}
|
|
9
10
|
.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
|
@@ -17,9 +17,9 @@ import prettyBytes from 'pretty-bytes';
|
|
|
17
17
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
18
18
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
19
19
|
|
|
20
|
-
var styles$
|
|
20
|
+
var styles$9 = {"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$
|
|
22
|
+
var styles$8 = {};
|
|
23
23
|
|
|
24
24
|
var middleEllipsis = function middleEllipsis(string, maxLength) {
|
|
25
25
|
if (!string) return string;
|
|
@@ -33,7 +33,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
|
|
|
33
33
|
return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
|
|
34
34
|
};
|
|
35
35
|
|
|
36
|
-
var styles$
|
|
36
|
+
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"};
|
|
37
37
|
|
|
38
38
|
var propTypes$a = {
|
|
39
39
|
item: PropTypes.media,
|
|
@@ -78,43 +78,43 @@ var GalleryItem = function GalleryItem(_ref) {
|
|
|
78
78
|
return /*#__PURE__*/React.createElement(Card, {
|
|
79
79
|
image: /*#__PURE__*/React.createElement("button", {
|
|
80
80
|
type: "button",
|
|
81
|
-
className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$
|
|
81
|
+
className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$7.imageButton]),
|
|
82
82
|
onClick: onClick
|
|
83
83
|
}, /*#__PURE__*/React.createElement("div", {
|
|
84
|
-
className: classNames(['card-img-top', styles$
|
|
84
|
+
className: classNames(['card-img-top', styles$7.image]),
|
|
85
85
|
style: {
|
|
86
86
|
backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
|
|
87
87
|
}
|
|
88
88
|
})),
|
|
89
89
|
beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
|
|
90
|
-
className: styles$
|
|
90
|
+
className: styles$7.infoButton,
|
|
91
91
|
onClick: onClickInfo,
|
|
92
92
|
withoutStyle: true
|
|
93
93
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
94
94
|
icon: faInfoCircle,
|
|
95
|
-
className: styles$
|
|
95
|
+
className: styles$7.icon
|
|
96
96
|
})) : null, selected ? /*#__PURE__*/React.createElement("div", {
|
|
97
|
-
className: classNames(['text-danger', styles$
|
|
97
|
+
className: classNames(['text-danger', styles$7.closeIcon])
|
|
98
98
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
99
99
|
icon: faTimesCircle,
|
|
100
|
-
className: styles$
|
|
100
|
+
className: styles$7.icon
|
|
101
101
|
})) : null),
|
|
102
102
|
footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
103
|
-
className: styles$
|
|
103
|
+
className: styles$7.icon,
|
|
104
104
|
icon: faPlayCircle
|
|
105
105
|
}) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
106
|
-
className: styles$
|
|
106
|
+
className: styles$7.icon,
|
|
107
107
|
icon: faHeadphonesAlt
|
|
108
108
|
}) : null, /*#__PURE__*/React.createElement("div", {
|
|
109
|
-
className: classNames(['text-truncate', styles$
|
|
109
|
+
className: classNames(['text-truncate', styles$7.label])
|
|
110
110
|
}, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
|
|
111
111
|
className: "text-muted ms-1"
|
|
112
112
|
}, size) : null)),
|
|
113
113
|
theme: selected ? 'primary' : null,
|
|
114
|
-
className: classNames([styles$
|
|
114
|
+
className: classNames([styles$7.container, _defineProperty({
|
|
115
115
|
'border-primary': selected
|
|
116
116
|
}, className, className !== null)]),
|
|
117
|
-
footerClassName: classNames(['p-
|
|
117
|
+
footerClassName: classNames(['p-1', styles$7.footer]),
|
|
118
118
|
onClickFooter: onClick
|
|
119
119
|
});
|
|
120
120
|
};
|
|
@@ -171,7 +171,7 @@ function Gallery(_ref) {
|
|
|
171
171
|
return items;
|
|
172
172
|
}, [selectedFirst, selectedItem, items]);
|
|
173
173
|
return /*#__PURE__*/React.createElement("div", {
|
|
174
|
-
className: classNames([styles$
|
|
174
|
+
className: classNames([styles$8.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', {
|
|
@@ -199,7 +199,7 @@ function Gallery(_ref) {
|
|
|
199
199
|
Gallery.propTypes = propTypes$9;
|
|
200
200
|
Gallery.defaultProps = defaultProps$9;
|
|
201
201
|
|
|
202
|
-
var styles$
|
|
202
|
+
var styles$6 = {"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"};
|
|
203
203
|
|
|
204
204
|
var propTypes$8 = {
|
|
205
205
|
media: PropTypes.media,
|
|
@@ -327,25 +327,25 @@ function MediaMetadata(_ref) {
|
|
|
327
327
|
var TextField = useFieldComponent('text');
|
|
328
328
|
var TokensField = useFieldComponent('tokens');
|
|
329
329
|
return /*#__PURE__*/React.createElement("div", {
|
|
330
|
-
className: classNames([styles$
|
|
330
|
+
className: classNames([styles$6.container, _defineProperty({}, className, className)])
|
|
331
331
|
}, /*#__PURE__*/React.createElement("div", {
|
|
332
332
|
className: classNames(['position-relative', _defineProperty({
|
|
333
333
|
'bg-light': type === 'audio',
|
|
334
334
|
'bg-black': type === 'image'
|
|
335
|
-
}, styles$
|
|
335
|
+
}, styles$6.video, type === 'video')])
|
|
336
336
|
}, type === 'video' ? /*#__PURE__*/React.createElement("video", {
|
|
337
|
-
className: styles$
|
|
337
|
+
className: styles$6.player,
|
|
338
338
|
controls: true,
|
|
339
339
|
src: url
|
|
340
340
|
}) : null, type === 'audio' ? /*#__PURE__*/React.createElement("div", {
|
|
341
|
-
className: styles$
|
|
341
|
+
className: styles$6.audio
|
|
342
342
|
}, /*#__PURE__*/React.createElement("audio", {
|
|
343
|
-
className: styles$
|
|
343
|
+
className: styles$6.player,
|
|
344
344
|
controls: true,
|
|
345
345
|
src: url
|
|
346
346
|
})) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
|
|
347
347
|
src: thumbnail,
|
|
348
|
-
className: styles$
|
|
348
|
+
className: styles$6.image,
|
|
349
349
|
alt: filename
|
|
350
350
|
}) : null), /*#__PURE__*/React.createElement("div", {
|
|
351
351
|
className: "p-2"
|
|
@@ -541,7 +541,7 @@ var useSearchFilters = function useSearchFilters(_ref) {
|
|
|
541
541
|
"value": "This Micromag"
|
|
542
542
|
}]
|
|
543
543
|
}),
|
|
544
|
-
value: "document
|
|
544
|
+
value: "document-".concat(storyId)
|
|
545
545
|
}] : []), [{
|
|
546
546
|
label: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
547
547
|
id: "xAzv6g",
|
|
@@ -680,9 +680,9 @@ PropTypes$1.shape({
|
|
|
680
680
|
usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
|
|
681
681
|
});
|
|
682
682
|
|
|
683
|
-
var styles$
|
|
683
|
+
var styles$5 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
|
|
684
684
|
|
|
685
|
-
var styles$
|
|
685
|
+
var styles$4 = {"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,
|
|
@@ -730,9 +730,9 @@ function DropdownSection(_ref) {
|
|
|
730
730
|
onChange(val);
|
|
731
731
|
}, [setOpen]);
|
|
732
732
|
return items !== null && items.length > 1 ? /*#__PURE__*/React.createElement("div", {
|
|
733
|
-
className: classNames([styles$
|
|
733
|
+
className: classNames([styles$4.container, 'dropdown', _defineProperty({}, className, className !== null)])
|
|
734
734
|
}, /*#__PURE__*/React.createElement("span", {
|
|
735
|
-
className: styles$
|
|
735
|
+
className: styles$4.label
|
|
736
736
|
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
737
737
|
id: "9ZdD+Q",
|
|
738
738
|
defaultMessage: [{
|
|
@@ -740,7 +740,7 @@ function DropdownSection(_ref) {
|
|
|
740
740
|
"value": "Library for"
|
|
741
741
|
}]
|
|
742
742
|
})), /*#__PURE__*/React.createElement("button", {
|
|
743
|
-
className: classNames([styles$
|
|
743
|
+
className: classNames([styles$4.dropdownToggle, 'dropdown-toggle', {
|
|
744
744
|
open: open === true
|
|
745
745
|
}]),
|
|
746
746
|
type: "button",
|
|
@@ -753,7 +753,7 @@ function DropdownSection(_ref) {
|
|
|
753
753
|
"value": "All"
|
|
754
754
|
}]
|
|
755
755
|
})), /*#__PURE__*/React.createElement("div", {
|
|
756
|
-
className: classNames([styles$
|
|
756
|
+
className: classNames([styles$4.dropdown, 'dropdown-menu', {
|
|
757
757
|
show: open === true
|
|
758
758
|
}])
|
|
759
759
|
}, items.map(function (_ref3) {
|
|
@@ -854,6 +854,10 @@ var Search = function Search(_ref) {
|
|
|
854
854
|
Search.propTypes = propTypes$6;
|
|
855
855
|
Search.defaultProps = defaultProps$6;
|
|
856
856
|
|
|
857
|
+
var styles$3 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
|
|
858
|
+
|
|
859
|
+
var styles$2 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
|
|
860
|
+
|
|
857
861
|
var propTypes$5 = {
|
|
858
862
|
tags: PropTypes$1.arrayOf(PropTypes$1.shape({
|
|
859
863
|
label: PropTypes$1.string,
|
|
@@ -881,12 +885,12 @@ var TagSection = function TagSection(_ref) {
|
|
|
881
885
|
onChange(val, parent);
|
|
882
886
|
}, [onChange, parent]);
|
|
883
887
|
return /*#__PURE__*/React.createElement("div", {
|
|
884
|
-
className: classNames(['d-flex', 'mt-1', _defineProperty({}, className, className !== null)])
|
|
888
|
+
className: classNames([styles$2.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
|
|
885
889
|
}, tags !== null ? tags.map(function (_ref3) {
|
|
886
890
|
var label = _ref3.label,
|
|
887
891
|
value = _ref3.value,
|
|
888
892
|
active = _ref3.active;
|
|
889
|
-
var itemClassNames = classNames(['btn', 'btn-sm', 'mb-1', 'me-1', 'btn-dark', {
|
|
893
|
+
var itemClassNames = classNames([styles$2.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
|
|
890
894
|
'btn-primary': active === true // 'btn-outline-light': active === false,
|
|
891
895
|
|
|
892
896
|
}]);
|
|
@@ -903,8 +907,6 @@ var TagSection = function TagSection(_ref) {
|
|
|
903
907
|
TagSection.propTypes = propTypes$5;
|
|
904
908
|
TagSection.defaultProps = defaultProps$5;
|
|
905
909
|
|
|
906
|
-
var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
|
|
907
|
-
|
|
908
910
|
var propTypes$4 = {
|
|
909
911
|
filters: PropTypes$1.object,
|
|
910
912
|
// eslint-disable-line
|
|
@@ -965,11 +967,11 @@ var SearchFilters = function SearchFilters(_ref) {
|
|
|
965
967
|
}
|
|
966
968
|
}, [filters, onChange]);
|
|
967
969
|
return /*#__PURE__*/React.createElement("div", {
|
|
968
|
-
className: classNames([styles$
|
|
970
|
+
className: classNames([styles$3.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
|
|
969
971
|
}, activeSections.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
970
972
|
className: classNames(['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
|
|
971
973
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
972
|
-
className: classNames([styles$
|
|
974
|
+
className: classNames([styles$3.closeBtn, 'py-1', 'px-1', 'text-dark']),
|
|
973
975
|
icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
974
976
|
icon: faTimes
|
|
975
977
|
}),
|
|
@@ -987,11 +989,11 @@ var SearchFilters = function SearchFilters(_ref) {
|
|
|
987
989
|
items = _ref3.items;
|
|
988
990
|
return items.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
989
991
|
key: "filter-".concat(value),
|
|
990
|
-
className: classNames([styles$
|
|
992
|
+
className: classNames([styles$3.section, 'py-2'])
|
|
991
993
|
}, /*#__PURE__*/React.createElement("p", {
|
|
992
|
-
className: classNames([styles$
|
|
994
|
+
className: classNames([styles$3.title, 'm-0'])
|
|
993
995
|
}, label), /*#__PURE__*/React.createElement(TagSection, {
|
|
994
|
-
className: classNames([styles$
|
|
996
|
+
className: classNames([styles$3.tags]),
|
|
995
997
|
tags: items,
|
|
996
998
|
parent: value,
|
|
997
999
|
onChange: onSectionChange
|
|
@@ -1268,9 +1270,7 @@ function Navbar(_ref) {
|
|
|
1268
1270
|
if (onFocusSearch !== null) {
|
|
1269
1271
|
onFocusSearch();
|
|
1270
1272
|
}
|
|
1271
|
-
|
|
1272
|
-
setOpen(true);
|
|
1273
|
-
});
|
|
1273
|
+
}, [onFocusSearch]);
|
|
1274
1274
|
var onCloseFilters = useCallback(function () {
|
|
1275
1275
|
setOpen(false);
|
|
1276
1276
|
}, [setOpen]);
|
|
@@ -1278,21 +1278,21 @@ function Navbar(_ref) {
|
|
|
1278
1278
|
setOpen(!open);
|
|
1279
1279
|
}, [open, setOpen]);
|
|
1280
1280
|
return /*#__PURE__*/React.createElement("nav", {
|
|
1281
|
-
className: classNames([styles$
|
|
1281
|
+
className: classNames([styles$5.container, 'navbar', _defineProperty({}, className, className !== null)])
|
|
1282
1282
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1283
|
-
className: classNames([styles$
|
|
1284
|
-
}, media === null ? /*#__PURE__*/React.createElement("
|
|
1285
|
-
className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
|
|
1283
|
+
className: classNames([styles$5.inner])
|
|
1284
|
+
}, media === null ? /*#__PURE__*/React.createElement("div", {
|
|
1285
|
+
className: "list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
|
|
1286
1286
|
}, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
|
|
1287
|
-
className:
|
|
1287
|
+
className: classNames([styles$5.mediaLabel, 'd-flex px-0 py-0 align-items-center']),
|
|
1288
1288
|
onClick: function onClick() {
|
|
1289
1289
|
return onClickItemInfo(selectedMedia);
|
|
1290
1290
|
}
|
|
1291
1291
|
}, /*#__PURE__*/React.createElement(Media, {
|
|
1292
|
-
className: styles$
|
|
1292
|
+
className: styles$5.mediaPreview,
|
|
1293
1293
|
thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
|
|
1294
1294
|
}), /*#__PURE__*/React.createElement("span", {
|
|
1295
|
-
className:
|
|
1295
|
+
className: classNames([styles$5.mediaLabel, 'd-inline-block', 'text-truncate'])
|
|
1296
1296
|
}, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
1297
1297
|
id: "fVqgfl",
|
|
1298
1298
|
defaultMessage: [{
|
|
@@ -1543,7 +1543,7 @@ function MediaGallery(_ref) {
|
|
|
1543
1543
|
return setUploadModalOpened(false);
|
|
1544
1544
|
}, [setUploadModalOpened]);
|
|
1545
1545
|
return /*#__PURE__*/React.createElement("div", {
|
|
1546
|
-
className: classNames([styles$
|
|
1546
|
+
className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, styles$9.metadataOpened, metadataMedia !== null), _defineProperty(_ref3, className, className), _ref3)])
|
|
1547
1547
|
}, /*#__PURE__*/React.createElement(Navbar, {
|
|
1548
1548
|
filters: filtersValue,
|
|
1549
1549
|
media: metadataMedia !== null ? metadataMedia : null,
|
|
@@ -1562,9 +1562,9 @@ function MediaGallery(_ref) {
|
|
|
1562
1562
|
tags: tags,
|
|
1563
1563
|
className: navbarClassName
|
|
1564
1564
|
}), /*#__PURE__*/React.createElement("div", {
|
|
1565
|
-
className: styles$
|
|
1565
|
+
className: styles$9.content
|
|
1566
1566
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1567
|
-
className: styles$
|
|
1567
|
+
className: styles$9.gallery
|
|
1568
1568
|
}, medias !== null && !uploading ? /*#__PURE__*/React.createElement(Gallery, {
|
|
1569
1569
|
items: medias,
|
|
1570
1570
|
selectedItem: selectedMedia,
|
|
@@ -1574,9 +1574,9 @@ function MediaGallery(_ref) {
|
|
|
1574
1574
|
onClickItem: onClickItem,
|
|
1575
1575
|
onClickItemInfo: onClickItemInfo
|
|
1576
1576
|
}) : null, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
|
|
1577
|
-
className: styles$
|
|
1577
|
+
className: styles$9.loading
|
|
1578
1578
|
}) : null), /*#__PURE__*/React.createElement("div", {
|
|
1579
|
-
className: styles$
|
|
1579
|
+
className: styles$9.mediaMetadata
|
|
1580
1580
|
}, /*#__PURE__*/React.createElement(MediaMetadata, {
|
|
1581
1581
|
media: metadataMedia,
|
|
1582
1582
|
tags: tags,
|
package/lib/index.js
CHANGED
|
@@ -32,9 +32,9 @@ var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
|
|
|
32
32
|
var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
|
|
33
33
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
34
34
|
|
|
35
|
-
var styles$
|
|
35
|
+
var styles$9 = {"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$
|
|
37
|
+
var styles$8 = {};
|
|
38
38
|
|
|
39
39
|
var middleEllipsis = function middleEllipsis(string, maxLength) {
|
|
40
40
|
if (!string) return string;
|
|
@@ -48,7 +48,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
|
|
|
48
48
|
return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
var styles$
|
|
51
|
+
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"};
|
|
52
52
|
|
|
53
53
|
var propTypes$a = {
|
|
54
54
|
item: core.PropTypes.media,
|
|
@@ -93,43 +93,43 @@ var GalleryItem = function GalleryItem(_ref) {
|
|
|
93
93
|
return /*#__PURE__*/React__default["default"].createElement(components.Card, {
|
|
94
94
|
image: /*#__PURE__*/React__default["default"].createElement("button", {
|
|
95
95
|
type: "button",
|
|
96
|
-
className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$
|
|
96
|
+
className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$7.imageButton]),
|
|
97
97
|
onClick: onClick
|
|
98
98
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
99
|
-
className: classNames__default["default"](['card-img-top', styles$
|
|
99
|
+
className: classNames__default["default"](['card-img-top', styles$7.image]),
|
|
100
100
|
style: {
|
|
101
101
|
backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
|
|
102
102
|
}
|
|
103
103
|
})),
|
|
104
104
|
beforeBody: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withInfoButton ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
|
|
105
|
-
className: styles$
|
|
105
|
+
className: styles$7.infoButton,
|
|
106
106
|
onClick: onClickInfo,
|
|
107
107
|
withoutStyle: true
|
|
108
108
|
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
109
109
|
icon: freeSolidSvgIcons.faInfoCircle,
|
|
110
|
-
className: styles$
|
|
110
|
+
className: styles$7.icon
|
|
111
111
|
})) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
112
|
-
className: classNames__default["default"](['text-danger', styles$
|
|
112
|
+
className: classNames__default["default"](['text-danger', styles$7.closeIcon])
|
|
113
113
|
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
114
114
|
icon: freeSolidSvgIcons.faTimesCircle,
|
|
115
|
-
className: styles$
|
|
115
|
+
className: styles$7.icon
|
|
116
116
|
})) : null),
|
|
117
117
|
footer: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
118
|
-
className: styles$
|
|
118
|
+
className: styles$7.icon,
|
|
119
119
|
icon: freeSolidSvgIcons.faPlayCircle
|
|
120
120
|
}) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
121
|
-
className: styles$
|
|
121
|
+
className: styles$7.icon,
|
|
122
122
|
icon: freeSolidSvgIcons.faHeadphonesAlt
|
|
123
123
|
}) : null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
124
|
-
className: classNames__default["default"](['text-truncate', styles$
|
|
124
|
+
className: classNames__default["default"](['text-truncate', styles$7.label])
|
|
125
125
|
}, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
|
|
126
126
|
className: "text-muted ms-1"
|
|
127
127
|
}, size) : null)),
|
|
128
128
|
theme: selected ? 'primary' : null,
|
|
129
|
-
className: classNames__default["default"]([styles$
|
|
129
|
+
className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({
|
|
130
130
|
'border-primary': selected
|
|
131
131
|
}, className, className !== null)]),
|
|
132
|
-
footerClassName: classNames__default["default"](['p-
|
|
132
|
+
footerClassName: classNames__default["default"](['p-1', styles$7.footer]),
|
|
133
133
|
onClickFooter: onClick
|
|
134
134
|
});
|
|
135
135
|
};
|
|
@@ -186,7 +186,7 @@ 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$
|
|
189
|
+
className: classNames__default["default"]([styles$8.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', {
|
|
@@ -214,7 +214,7 @@ function Gallery(_ref) {
|
|
|
214
214
|
Gallery.propTypes = propTypes$9;
|
|
215
215
|
Gallery.defaultProps = defaultProps$9;
|
|
216
216
|
|
|
217
|
-
var styles$
|
|
217
|
+
var styles$6 = {"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
218
|
|
|
219
219
|
var propTypes$8 = {
|
|
220
220
|
media: core.PropTypes.media,
|
|
@@ -342,25 +342,25 @@ function MediaMetadata(_ref) {
|
|
|
342
342
|
var TextField = contexts.useFieldComponent('text');
|
|
343
343
|
var TokensField = contexts.useFieldComponent('tokens');
|
|
344
344
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
345
|
-
className: classNames__default["default"]([styles$
|
|
345
|
+
className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({}, className, className)])
|
|
346
346
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
347
347
|
className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({
|
|
348
348
|
'bg-light': type === 'audio',
|
|
349
349
|
'bg-black': type === 'image'
|
|
350
|
-
}, styles$
|
|
350
|
+
}, styles$6.video, type === 'video')])
|
|
351
351
|
}, type === 'video' ? /*#__PURE__*/React__default["default"].createElement("video", {
|
|
352
|
-
className: styles$
|
|
352
|
+
className: styles$6.player,
|
|
353
353
|
controls: true,
|
|
354
354
|
src: url
|
|
355
355
|
}) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
356
|
-
className: styles$
|
|
356
|
+
className: styles$6.audio
|
|
357
357
|
}, /*#__PURE__*/React__default["default"].createElement("audio", {
|
|
358
|
-
className: styles$
|
|
358
|
+
className: styles$6.player,
|
|
359
359
|
controls: true,
|
|
360
360
|
src: url
|
|
361
361
|
})) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
|
|
362
362
|
src: thumbnail,
|
|
363
|
-
className: styles$
|
|
363
|
+
className: styles$6.image,
|
|
364
364
|
alt: filename
|
|
365
365
|
}) : null), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
366
366
|
className: "p-2"
|
|
@@ -556,7 +556,7 @@ var useSearchFilters = function useSearchFilters(_ref) {
|
|
|
556
556
|
"value": "This Micromag"
|
|
557
557
|
}]
|
|
558
558
|
}),
|
|
559
|
-
value: "document
|
|
559
|
+
value: "document-".concat(storyId)
|
|
560
560
|
}] : []), [{
|
|
561
561
|
label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
562
562
|
id: "xAzv6g",
|
|
@@ -695,9 +695,9 @@ PropTypes__default["default"].shape({
|
|
|
695
695
|
usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
|
|
696
696
|
});
|
|
697
697
|
|
|
698
|
-
var styles$
|
|
698
|
+
var styles$5 = {"container":"micromag-media-gallery-partials-navbar-container","inner":"micromag-media-gallery-partials-navbar-inner","mediaPreview":"micromag-media-gallery-partials-navbar-mediaPreview","mediaLabel":"micromag-media-gallery-partials-navbar-mediaLabel"};
|
|
699
699
|
|
|
700
|
-
var styles$
|
|
700
|
+
var styles$4 = {"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,
|
|
@@ -745,9 +745,9 @@ function DropdownSection(_ref) {
|
|
|
745
745
|
onChange(val);
|
|
746
746
|
}, [setOpen]);
|
|
747
747
|
return items !== null && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
748
|
-
className: classNames__default["default"]([styles$
|
|
748
|
+
className: classNames__default["default"]([styles$4.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
|
|
749
749
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
750
|
-
className: styles$
|
|
750
|
+
className: styles$4.label
|
|
751
751
|
}, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
752
752
|
id: "9ZdD+Q",
|
|
753
753
|
defaultMessage: [{
|
|
@@ -755,7 +755,7 @@ function DropdownSection(_ref) {
|
|
|
755
755
|
"value": "Library for"
|
|
756
756
|
}]
|
|
757
757
|
})), /*#__PURE__*/React__default["default"].createElement("button", {
|
|
758
|
-
className: classNames__default["default"]([styles$
|
|
758
|
+
className: classNames__default["default"]([styles$4.dropdownToggle, 'dropdown-toggle', {
|
|
759
759
|
open: open === true
|
|
760
760
|
}]),
|
|
761
761
|
type: "button",
|
|
@@ -768,7 +768,7 @@ function DropdownSection(_ref) {
|
|
|
768
768
|
"value": "All"
|
|
769
769
|
}]
|
|
770
770
|
})), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
771
|
-
className: classNames__default["default"]([styles$
|
|
771
|
+
className: classNames__default["default"]([styles$4.dropdown, 'dropdown-menu', {
|
|
772
772
|
show: open === true
|
|
773
773
|
}])
|
|
774
774
|
}, items.map(function (_ref3) {
|
|
@@ -869,6 +869,10 @@ var Search = function Search(_ref) {
|
|
|
869
869
|
Search.propTypes = propTypes$6;
|
|
870
870
|
Search.defaultProps = defaultProps$6;
|
|
871
871
|
|
|
872
|
+
var styles$3 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
|
|
873
|
+
|
|
874
|
+
var styles$2 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
|
|
875
|
+
|
|
872
876
|
var propTypes$5 = {
|
|
873
877
|
tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
|
|
874
878
|
label: PropTypes__default["default"].string,
|
|
@@ -896,12 +900,12 @@ var TagSection = function TagSection(_ref) {
|
|
|
896
900
|
onChange(val, parent);
|
|
897
901
|
}, [onChange, parent]);
|
|
898
902
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
899
|
-
className: classNames__default["default"](['d-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
|
|
903
|
+
className: classNames__default["default"]([styles$2.container, 'd-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
|
|
900
904
|
}, tags !== null ? tags.map(function (_ref3) {
|
|
901
905
|
var label = _ref3.label,
|
|
902
906
|
value = _ref3.value,
|
|
903
907
|
active = _ref3.active;
|
|
904
|
-
var itemClassNames = classNames__default["default"](['btn', 'btn-sm', 'mb-1', 'me-1', 'btn-dark', {
|
|
908
|
+
var itemClassNames = classNames__default["default"]([styles$2.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
|
|
905
909
|
'btn-primary': active === true // 'btn-outline-light': active === false,
|
|
906
910
|
|
|
907
911
|
}]);
|
|
@@ -918,8 +922,6 @@ var TagSection = function TagSection(_ref) {
|
|
|
918
922
|
TagSection.propTypes = propTypes$5;
|
|
919
923
|
TagSection.defaultProps = defaultProps$5;
|
|
920
924
|
|
|
921
|
-
var styles$2 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
|
|
922
|
-
|
|
923
925
|
var propTypes$4 = {
|
|
924
926
|
filters: PropTypes__default["default"].object,
|
|
925
927
|
// eslint-disable-line
|
|
@@ -980,11 +982,11 @@ var SearchFilters = function SearchFilters(_ref) {
|
|
|
980
982
|
}
|
|
981
983
|
}, [filters, onChange]);
|
|
982
984
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
983
|
-
className: classNames__default["default"]([styles$
|
|
985
|
+
className: classNames__default["default"]([styles$3.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
|
|
984
986
|
}, activeSections.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
985
987
|
className: classNames__default["default"](['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
|
|
986
988
|
}, /*#__PURE__*/React__default["default"].createElement(components.Button, {
|
|
987
|
-
className: classNames__default["default"]([styles$
|
|
989
|
+
className: classNames__default["default"]([styles$3.closeBtn, 'py-1', 'px-1', 'text-dark']),
|
|
988
990
|
icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
989
991
|
icon: freeSolidSvgIcons.faTimes
|
|
990
992
|
}),
|
|
@@ -1002,11 +1004,11 @@ var SearchFilters = function SearchFilters(_ref) {
|
|
|
1002
1004
|
items = _ref3.items;
|
|
1003
1005
|
return items.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1004
1006
|
key: "filter-".concat(value),
|
|
1005
|
-
className: classNames__default["default"]([styles$
|
|
1007
|
+
className: classNames__default["default"]([styles$3.section, 'py-2'])
|
|
1006
1008
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
1007
|
-
className: classNames__default["default"]([styles$
|
|
1009
|
+
className: classNames__default["default"]([styles$3.title, 'm-0'])
|
|
1008
1010
|
}, label), /*#__PURE__*/React__default["default"].createElement(TagSection, {
|
|
1009
|
-
className: classNames__default["default"]([styles$
|
|
1011
|
+
className: classNames__default["default"]([styles$3.tags]),
|
|
1010
1012
|
tags: items,
|
|
1011
1013
|
parent: value,
|
|
1012
1014
|
onChange: onSectionChange
|
|
@@ -1283,9 +1285,7 @@ function Navbar(_ref) {
|
|
|
1283
1285
|
if (onFocusSearch !== null) {
|
|
1284
1286
|
onFocusSearch();
|
|
1285
1287
|
}
|
|
1286
|
-
|
|
1287
|
-
setOpen(true);
|
|
1288
|
-
});
|
|
1288
|
+
}, [onFocusSearch]);
|
|
1289
1289
|
var onCloseFilters = React.useCallback(function () {
|
|
1290
1290
|
setOpen(false);
|
|
1291
1291
|
}, [setOpen]);
|
|
@@ -1293,21 +1293,21 @@ function Navbar(_ref) {
|
|
|
1293
1293
|
setOpen(!open);
|
|
1294
1294
|
}, [open, setOpen]);
|
|
1295
1295
|
return /*#__PURE__*/React__default["default"].createElement("nav", {
|
|
1296
|
-
className: classNames__default["default"]([styles$
|
|
1296
|
+
className: classNames__default["default"]([styles$5.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
|
|
1297
1297
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1298
|
-
className: classNames__default["default"]([styles$
|
|
1299
|
-
}, media === null ? /*#__PURE__*/React__default["default"].createElement("
|
|
1300
|
-
className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
|
|
1298
|
+
className: classNames__default["default"]([styles$5.inner])
|
|
1299
|
+
}, media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1300
|
+
className: "list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
|
|
1301
1301
|
}, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
|
|
1302
|
-
className: "d-flex px-0 py-0 align-items-center
|
|
1302
|
+
className: classNames__default["default"]([styles$5.mediaLabel, 'd-flex px-0 py-0 align-items-center']),
|
|
1303
1303
|
onClick: function onClick() {
|
|
1304
1304
|
return onClickItemInfo(selectedMedia);
|
|
1305
1305
|
}
|
|
1306
1306
|
}, /*#__PURE__*/React__default["default"].createElement(components.Media, {
|
|
1307
|
-
className: styles$
|
|
1307
|
+
className: styles$5.mediaPreview,
|
|
1308
1308
|
thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
|
|
1309
1309
|
}), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
1310
|
-
className: "
|
|
1310
|
+
className: classNames__default["default"]([styles$5.mediaLabel, 'd-inline-block', 'text-truncate'])
|
|
1311
1311
|
}, selectedMedia.name || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
1312
1312
|
id: "fVqgfl",
|
|
1313
1313
|
defaultMessage: [{
|
|
@@ -1558,7 +1558,7 @@ function MediaGallery(_ref) {
|
|
|
1558
1558
|
return setUploadModalOpened(false);
|
|
1559
1559
|
}, [setUploadModalOpened]);
|
|
1560
1560
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1561
|
-
className: classNames__default["default"]([styles$
|
|
1561
|
+
className: classNames__default["default"]([styles$9.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$9.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref3, className, className), _ref3)])
|
|
1562
1562
|
}, /*#__PURE__*/React__default["default"].createElement(Navbar, {
|
|
1563
1563
|
filters: filtersValue,
|
|
1564
1564
|
media: metadataMedia !== null ? metadataMedia : null,
|
|
@@ -1577,9 +1577,9 @@ function MediaGallery(_ref) {
|
|
|
1577
1577
|
tags: tags,
|
|
1578
1578
|
className: navbarClassName
|
|
1579
1579
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1580
|
-
className: styles$
|
|
1580
|
+
className: styles$9.content
|
|
1581
1581
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1582
|
-
className: styles$
|
|
1582
|
+
className: styles$9.gallery
|
|
1583
1583
|
}, medias !== null && !uploading ? /*#__PURE__*/React__default["default"].createElement(Gallery, {
|
|
1584
1584
|
items: medias,
|
|
1585
1585
|
selectedItem: selectedMedia,
|
|
@@ -1589,9 +1589,9 @@ function MediaGallery(_ref) {
|
|
|
1589
1589
|
onClickItem: onClickItem,
|
|
1590
1590
|
onClickItemInfo: onClickItemInfo
|
|
1591
1591
|
}) : null, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
|
|
1592
|
-
className: styles$
|
|
1592
|
+
className: styles$9.loading
|
|
1593
1593
|
}) : null), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1594
|
-
className: styles$
|
|
1594
|
+
className: styles$9.mediaMetadata
|
|
1595
1595
|
}, /*#__PURE__*/React__default["default"].createElement(MediaMetadata, {
|
|
1596
1596
|
media: metadataMedia,
|
|
1597
1597
|
tags: tags,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/media-gallery",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.27",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
"@fortawesome/fontawesome-svg-core": "^1.2.32",
|
|
60
60
|
"@fortawesome/free-solid-svg-icons": "^5.15.1",
|
|
61
61
|
"@fortawesome/react-fontawesome": "^0.1.13",
|
|
62
|
-
"@micromag/core": "^0.3.
|
|
63
|
-
"@micromag/data": "^0.3.
|
|
62
|
+
"@micromag/core": "^0.3.27",
|
|
63
|
+
"@micromag/data": "^0.3.27",
|
|
64
64
|
"bootstrap": "^5.1.0",
|
|
65
65
|
"change-case": "^4.1.2",
|
|
66
66
|
"classnames": "^2.2.6",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "18798c7cbbab4d9a702e7070950394f05c1170cb"
|
|
77
77
|
}
|