@micromag/media-gallery 0.3.330 → 0.3.331
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 +1 -1
- package/es/index.js +66 -24
- package/lib/index.js +66 -24
- package/package.json +2 -2
package/assets/css/styles.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.micromag-media-gallery-items-gallery-item-container{border:1px solid #343434;cursor:pointer;overflow:hidden;position:relative}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{background-color:#1c1c1c;background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:0;padding-bottom:100%;width:100%}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{height:16px;margin-right:5px;width:16px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-top:1px solid #343434;color:inherit;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;text-align:inherit}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-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-
|
|
1
|
+
.micromag-media-gallery-items-gallery-item-container{border:1px solid #343434;cursor:pointer;overflow:hidden;position:relative}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{background-color:#1c1c1c;background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:0;padding-bottom:100%;width:100%}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{height:16px;margin-right:5px;width:16px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-top:1px solid #343434;color:inherit;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;text-align:inherit}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-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-closeButton,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C);padding:.5rem;position:absolute;top:0;-webkit-transition:opacity .15s ease-out;-o-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeButton .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{height:1rem;margin-right:0;width:1rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeButton:hover,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton:hover{opacity:.8}.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-closeButton{right:0}
|
|
2
2
|
|
|
3
3
|
.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;margin:0 auto;max-height:40vh;max-width:100%;min-height:200px}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{background-color:#1c1c1c;height:40vh;min-height:200px;position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{bottom:0;position:absolute;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}
|
|
4
4
|
.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-media-gallery-forms-dropdown-section-container{padding-top:5px;position:relative}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;font-weight:400;padding-right:5px}.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}
|
package/es/index.js
CHANGED
|
@@ -39,7 +39,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
|
|
|
39
39
|
return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
|
|
40
40
|
};
|
|
41
41
|
|
|
42
|
-
var styles$b = {"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","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","
|
|
42
|
+
var styles$b = {"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","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
|
|
43
43
|
|
|
44
44
|
var propTypes$b = {
|
|
45
45
|
item: PropTypes.media,
|
|
@@ -48,7 +48,8 @@ var propTypes$b = {
|
|
|
48
48
|
withInfoButton: PropTypes$1.bool,
|
|
49
49
|
className: PropTypes$1.string,
|
|
50
50
|
onClick: PropTypes$1.func,
|
|
51
|
-
onClickInfo: PropTypes$1.func
|
|
51
|
+
onClickInfo: PropTypes$1.func,
|
|
52
|
+
onClickRemove: PropTypes$1.func
|
|
52
53
|
};
|
|
53
54
|
var defaultProps$b = {
|
|
54
55
|
item: null,
|
|
@@ -57,7 +58,8 @@ var defaultProps$b = {
|
|
|
57
58
|
withInfoButton: false,
|
|
58
59
|
className: null,
|
|
59
60
|
onClick: null,
|
|
60
|
-
onClickInfo: null
|
|
61
|
+
onClickInfo: null,
|
|
62
|
+
onClickRemove: null
|
|
61
63
|
};
|
|
62
64
|
var GalleryItem = function GalleryItem(_ref) {
|
|
63
65
|
var item = _ref.item,
|
|
@@ -66,7 +68,8 @@ var GalleryItem = function GalleryItem(_ref) {
|
|
|
66
68
|
withInfoButton = _ref.withInfoButton,
|
|
67
69
|
className = _ref.className,
|
|
68
70
|
onClick = _ref.onClick,
|
|
69
|
-
onClickInfo = _ref.onClickInfo
|
|
71
|
+
onClickInfo = _ref.onClickInfo,
|
|
72
|
+
onClickRemove = _ref.onClickRemove;
|
|
70
73
|
var type = item.type,
|
|
71
74
|
_item$thumbnail_url = item.thumbnail_url,
|
|
72
75
|
thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
|
|
@@ -80,8 +83,8 @@ var GalleryItem = function GalleryItem(_ref) {
|
|
|
80
83
|
}
|
|
81
84
|
return /*#__PURE__*/React.createElement(Card, {
|
|
82
85
|
image: /*#__PURE__*/React.createElement("button", {
|
|
83
|
-
type: "button",
|
|
84
86
|
className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
|
|
87
|
+
type: "button",
|
|
85
88
|
onClick: onClick
|
|
86
89
|
}, /*#__PURE__*/React.createElement("div", {
|
|
87
90
|
className: classNames(['card-img-top', styles$b.image]),
|
|
@@ -96,8 +99,10 @@ var GalleryItem = function GalleryItem(_ref) {
|
|
|
96
99
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
97
100
|
icon: faInfoCircle,
|
|
98
101
|
className: styles$b.icon
|
|
99
|
-
})) : null, selected ? /*#__PURE__*/React.createElement(
|
|
100
|
-
className: classNames(['text-danger', styles$b.
|
|
102
|
+
})) : null, selected ? /*#__PURE__*/React.createElement(Button, {
|
|
103
|
+
className: classNames(['text-danger', styles$b.closeButton]),
|
|
104
|
+
onClick: onClickRemove,
|
|
105
|
+
withoutStyle: true
|
|
101
106
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
102
107
|
icon: faTimesCircle,
|
|
103
108
|
className: styles$b.icon
|
|
@@ -132,7 +137,8 @@ var propTypes$a = {
|
|
|
132
137
|
selectedFirst: PropTypes$1.bool,
|
|
133
138
|
className: PropTypes$1.string,
|
|
134
139
|
onClickItem: PropTypes$1.func,
|
|
135
|
-
onClickItemInfo: PropTypes$1.func
|
|
140
|
+
onClickItemInfo: PropTypes$1.func,
|
|
141
|
+
onClickRemoveItem: PropTypes$1.func
|
|
136
142
|
};
|
|
137
143
|
var defaultProps$a = {
|
|
138
144
|
items: null,
|
|
@@ -142,7 +148,8 @@ var defaultProps$a = {
|
|
|
142
148
|
selectedFirst: false,
|
|
143
149
|
className: null,
|
|
144
150
|
onClickItem: null,
|
|
145
|
-
onClickItemInfo: null
|
|
151
|
+
onClickItemInfo: null,
|
|
152
|
+
onClickRemoveItem: null
|
|
146
153
|
};
|
|
147
154
|
function Gallery(_ref) {
|
|
148
155
|
var items = _ref.items,
|
|
@@ -152,7 +159,8 @@ function Gallery(_ref) {
|
|
|
152
159
|
selectedFirst = _ref.selectedFirst,
|
|
153
160
|
className = _ref.className,
|
|
154
161
|
onClickItem = _ref.onClickItem,
|
|
155
|
-
onClickItemInfo = _ref.onClickItemInfo
|
|
162
|
+
onClickItemInfo = _ref.onClickItemInfo,
|
|
163
|
+
onClickRemoveItem = _ref.onClickRemoveItem;
|
|
156
164
|
var _useDimensionObserver = useDimensionObserver(),
|
|
157
165
|
ref = _useDimensionObserver.ref,
|
|
158
166
|
width = _useDimensionObserver.width;
|
|
@@ -186,6 +194,9 @@ function Gallery(_ref) {
|
|
|
186
194
|
onClickInfo: onClickItemInfo !== null ? function () {
|
|
187
195
|
return onClickItemInfo(item);
|
|
188
196
|
} : null,
|
|
197
|
+
onClickRemove: onClickRemoveItem !== null ? function () {
|
|
198
|
+
onClickRemoveItem();
|
|
199
|
+
} : null,
|
|
189
200
|
withInfoButton: withInfoButton
|
|
190
201
|
}));
|
|
191
202
|
})));
|
|
@@ -294,6 +305,10 @@ function MediaMetadata(_ref) {
|
|
|
294
305
|
setDescription(val);
|
|
295
306
|
setChanged(true);
|
|
296
307
|
}, [tags, setDescription, setChanged]);
|
|
308
|
+
var _useState9 = useState(null),
|
|
309
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
310
|
+
saveState = _useState10[0],
|
|
311
|
+
setSaveState = _useState10[1];
|
|
297
312
|
var onSave = useCallback(function () {
|
|
298
313
|
return update(mediaId, {
|
|
299
314
|
name: name,
|
|
@@ -301,15 +316,18 @@ function MediaMetadata(_ref) {
|
|
|
301
316
|
description: description
|
|
302
317
|
}).then(function () {
|
|
303
318
|
setChanged(false);
|
|
319
|
+
setSaveState(null);
|
|
304
320
|
if (onClickClose !== null) {
|
|
305
321
|
onClickClose();
|
|
306
322
|
}
|
|
323
|
+
})["catch"](function () {
|
|
324
|
+
setSaveState(false);
|
|
307
325
|
});
|
|
308
|
-
}, [mediaId, name, tags, description, metadata, update, onClickClose]);
|
|
309
|
-
var
|
|
310
|
-
|
|
311
|
-
deletedState =
|
|
312
|
-
setDeletedState =
|
|
326
|
+
}, [mediaId, name, tags, description, metadata, update, onClickClose, setChanged, setSaveState]);
|
|
327
|
+
var _useState11 = useState(null),
|
|
328
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
329
|
+
deletedState = _useState12[0],
|
|
330
|
+
setDeletedState = _useState12[1];
|
|
313
331
|
useEffect(function () {
|
|
314
332
|
setDeletedState(null);
|
|
315
333
|
}, [mediaId]);
|
|
@@ -421,6 +439,14 @@ function MediaMetadata(_ref) {
|
|
|
421
439
|
"type": 0,
|
|
422
440
|
"value": "Save"
|
|
423
441
|
}]
|
|
442
|
+
})) : null, saveState === false ? /*#__PURE__*/React.createElement("p", {
|
|
443
|
+
className: "pt-1 text-danger"
|
|
444
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
445
|
+
id: "DYjRd/",
|
|
446
|
+
defaultMessage: [{
|
|
447
|
+
"type": 0,
|
|
448
|
+
"value": "Sorry, this media could not be saved."
|
|
449
|
+
}]
|
|
424
450
|
})) : null), /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
425
451
|
id: "c9VwT/",
|
|
426
452
|
defaultMessage: [{
|
|
@@ -870,10 +896,10 @@ var Search = function Search(_ref) {
|
|
|
870
896
|
type: "text",
|
|
871
897
|
value: value || '',
|
|
872
898
|
placeholder: intl.formatMessage({
|
|
873
|
-
id: "
|
|
899
|
+
id: "n/SxMs",
|
|
874
900
|
defaultMessage: [{
|
|
875
901
|
"type": 0,
|
|
876
|
-
"value": "Search medias
|
|
902
|
+
"value": "Search medias"
|
|
877
903
|
}]
|
|
878
904
|
}),
|
|
879
905
|
onChange: onSearchChange,
|
|
@@ -1551,7 +1577,7 @@ var defaultProps = {
|
|
|
1551
1577
|
onClearMedia: null
|
|
1552
1578
|
};
|
|
1553
1579
|
function MediaGallery(_ref) {
|
|
1554
|
-
var
|
|
1580
|
+
var _ref6;
|
|
1555
1581
|
var type = _ref.type,
|
|
1556
1582
|
source = _ref.source,
|
|
1557
1583
|
isPicker = _ref.isPicker,
|
|
@@ -1629,10 +1655,25 @@ function MediaGallery(_ref) {
|
|
|
1629
1655
|
metadataMedia = _useState8[0],
|
|
1630
1656
|
setMetadataMedia = _useState8[1];
|
|
1631
1657
|
var onClickItem = useCallback(function (media) {
|
|
1658
|
+
var _ref3 = media || {},
|
|
1659
|
+
_ref3$id = _ref3.id,
|
|
1660
|
+
mediaId = _ref3$id === void 0 ? null : _ref3$id;
|
|
1661
|
+
var _ref4 = selectedMedia || {},
|
|
1662
|
+
_ref4$id = _ref4.id,
|
|
1663
|
+
selectedId = _ref4$id === void 0 ? null : _ref4$id;
|
|
1664
|
+
var different = mediaId !== selectedId;
|
|
1632
1665
|
if (!isPicker) {
|
|
1633
1666
|
setMetadataMedia(media);
|
|
1634
1667
|
} else if (onClickMedia !== null) {
|
|
1635
|
-
|
|
1668
|
+
if (different) {
|
|
1669
|
+
onClickMedia(media);
|
|
1670
|
+
}
|
|
1671
|
+
}
|
|
1672
|
+
}, [isPicker, setMetadataMedia, onClickMedia, selectedMedia]);
|
|
1673
|
+
var onClickRemoveItem = useCallback(function () {
|
|
1674
|
+
setMetadataMedia(null);
|
|
1675
|
+
if (onClickMedia !== null) {
|
|
1676
|
+
onClickMedia(null);
|
|
1636
1677
|
}
|
|
1637
1678
|
}, [isPicker, setMetadataMedia, onClickMedia]);
|
|
1638
1679
|
var refresh = useCallback(function () {
|
|
@@ -1649,9 +1690,9 @@ function MediaGallery(_ref) {
|
|
|
1649
1690
|
}, [refresh, setMetadataMedia]);
|
|
1650
1691
|
var onMetadataClickDelete = useCallback(function () {
|
|
1651
1692
|
var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1652
|
-
var
|
|
1653
|
-
|
|
1654
|
-
selectedId =
|
|
1693
|
+
var _ref5 = selectedMedia || {},
|
|
1694
|
+
_ref5$id = _ref5.id,
|
|
1695
|
+
selectedId = _ref5$id === void 0 ? null : _ref5$id;
|
|
1655
1696
|
if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
|
|
1656
1697
|
onClickMedia(null);
|
|
1657
1698
|
} else {
|
|
@@ -1697,7 +1738,7 @@ function MediaGallery(_ref) {
|
|
|
1697
1738
|
return setUploadModalOpened(false);
|
|
1698
1739
|
}, [setUploadModalOpened]);
|
|
1699
1740
|
return /*#__PURE__*/React.createElement("div", {
|
|
1700
|
-
className: classNames([styles.container, (
|
|
1741
|
+
className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, styles.metadataOpened, metadataMedia !== null), _defineProperty(_ref6, className, className), _ref6)])
|
|
1701
1742
|
}, /*#__PURE__*/React.createElement(Navbar, {
|
|
1702
1743
|
types: isArray(type) ? type : [type],
|
|
1703
1744
|
filters: filtersValue,
|
|
@@ -1728,7 +1769,8 @@ function MediaGallery(_ref) {
|
|
|
1728
1769
|
withInfoButton: isPicker,
|
|
1729
1770
|
isSmall: isSmall,
|
|
1730
1771
|
onClickItem: onClickItem,
|
|
1731
|
-
onClickItemInfo: onClickItemInfo
|
|
1772
|
+
onClickItemInfo: onClickItemInfo,
|
|
1773
|
+
onClickRemoveItem: onClickRemoveItem
|
|
1732
1774
|
}) : null, !allLoaded ? /*#__PURE__*/React.createElement("div", {
|
|
1733
1775
|
className: "w-100 mb-2"
|
|
1734
1776
|
}, loading || uploading ? /*#__PURE__*/React.createElement(Spinner, {
|
package/lib/index.js
CHANGED
|
@@ -55,7 +55,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
|
|
|
55
55
|
return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
|
|
56
56
|
};
|
|
57
57
|
|
|
58
|
-
var styles$b = {"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","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","
|
|
58
|
+
var styles$b = {"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","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeButton":"micromag-media-gallery-items-gallery-item-closeButton"};
|
|
59
59
|
|
|
60
60
|
var propTypes$b = {
|
|
61
61
|
item: core.PropTypes.media,
|
|
@@ -64,7 +64,8 @@ var propTypes$b = {
|
|
|
64
64
|
withInfoButton: PropTypes__default["default"].bool,
|
|
65
65
|
className: PropTypes__default["default"].string,
|
|
66
66
|
onClick: PropTypes__default["default"].func,
|
|
67
|
-
onClickInfo: PropTypes__default["default"].func
|
|
67
|
+
onClickInfo: PropTypes__default["default"].func,
|
|
68
|
+
onClickRemove: PropTypes__default["default"].func
|
|
68
69
|
};
|
|
69
70
|
var defaultProps$b = {
|
|
70
71
|
item: null,
|
|
@@ -73,7 +74,8 @@ var defaultProps$b = {
|
|
|
73
74
|
withInfoButton: false,
|
|
74
75
|
className: null,
|
|
75
76
|
onClick: null,
|
|
76
|
-
onClickInfo: null
|
|
77
|
+
onClickInfo: null,
|
|
78
|
+
onClickRemove: null
|
|
77
79
|
};
|
|
78
80
|
var GalleryItem = function GalleryItem(_ref) {
|
|
79
81
|
var item = _ref.item,
|
|
@@ -82,7 +84,8 @@ var GalleryItem = function GalleryItem(_ref) {
|
|
|
82
84
|
withInfoButton = _ref.withInfoButton,
|
|
83
85
|
className = _ref.className,
|
|
84
86
|
onClick = _ref.onClick,
|
|
85
|
-
onClickInfo = _ref.onClickInfo
|
|
87
|
+
onClickInfo = _ref.onClickInfo,
|
|
88
|
+
onClickRemove = _ref.onClickRemove;
|
|
86
89
|
var type = item.type,
|
|
87
90
|
_item$thumbnail_url = item.thumbnail_url,
|
|
88
91
|
thumbnail = _item$thumbnail_url === void 0 ? null : _item$thumbnail_url,
|
|
@@ -96,8 +99,8 @@ var GalleryItem = function GalleryItem(_ref) {
|
|
|
96
99
|
}
|
|
97
100
|
return /*#__PURE__*/React__default["default"].createElement(components.Card, {
|
|
98
101
|
image: /*#__PURE__*/React__default["default"].createElement("button", {
|
|
99
|
-
type: "button",
|
|
100
102
|
className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$b.imageButton]),
|
|
103
|
+
type: "button",
|
|
101
104
|
onClick: onClick
|
|
102
105
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
103
106
|
className: classNames__default["default"](['card-img-top', styles$b.image]),
|
|
@@ -112,8 +115,10 @@ var GalleryItem = function GalleryItem(_ref) {
|
|
|
112
115
|
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
113
116
|
icon: faInfoCircle.faInfoCircle,
|
|
114
117
|
className: styles$b.icon
|
|
115
|
-
})) : null, selected ? /*#__PURE__*/React__default["default"].createElement(
|
|
116
|
-
className: classNames__default["default"](['text-danger', styles$b.
|
|
118
|
+
})) : null, selected ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
|
|
119
|
+
className: classNames__default["default"](['text-danger', styles$b.closeButton]),
|
|
120
|
+
onClick: onClickRemove,
|
|
121
|
+
withoutStyle: true
|
|
117
122
|
}, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
|
|
118
123
|
icon: faTimesCircle.faTimesCircle,
|
|
119
124
|
className: styles$b.icon
|
|
@@ -148,7 +153,8 @@ var propTypes$a = {
|
|
|
148
153
|
selectedFirst: PropTypes__default["default"].bool,
|
|
149
154
|
className: PropTypes__default["default"].string,
|
|
150
155
|
onClickItem: PropTypes__default["default"].func,
|
|
151
|
-
onClickItemInfo: PropTypes__default["default"].func
|
|
156
|
+
onClickItemInfo: PropTypes__default["default"].func,
|
|
157
|
+
onClickRemoveItem: PropTypes__default["default"].func
|
|
152
158
|
};
|
|
153
159
|
var defaultProps$a = {
|
|
154
160
|
items: null,
|
|
@@ -158,7 +164,8 @@ var defaultProps$a = {
|
|
|
158
164
|
selectedFirst: false,
|
|
159
165
|
className: null,
|
|
160
166
|
onClickItem: null,
|
|
161
|
-
onClickItemInfo: null
|
|
167
|
+
onClickItemInfo: null,
|
|
168
|
+
onClickRemoveItem: null
|
|
162
169
|
};
|
|
163
170
|
function Gallery(_ref) {
|
|
164
171
|
var items = _ref.items,
|
|
@@ -168,7 +175,8 @@ function Gallery(_ref) {
|
|
|
168
175
|
selectedFirst = _ref.selectedFirst,
|
|
169
176
|
className = _ref.className,
|
|
170
177
|
onClickItem = _ref.onClickItem,
|
|
171
|
-
onClickItemInfo = _ref.onClickItemInfo
|
|
178
|
+
onClickItemInfo = _ref.onClickItemInfo,
|
|
179
|
+
onClickRemoveItem = _ref.onClickRemoveItem;
|
|
172
180
|
var _useDimensionObserver = hooks.useDimensionObserver(),
|
|
173
181
|
ref = _useDimensionObserver.ref,
|
|
174
182
|
width = _useDimensionObserver.width;
|
|
@@ -202,6 +210,9 @@ function Gallery(_ref) {
|
|
|
202
210
|
onClickInfo: onClickItemInfo !== null ? function () {
|
|
203
211
|
return onClickItemInfo(item);
|
|
204
212
|
} : null,
|
|
213
|
+
onClickRemove: onClickRemoveItem !== null ? function () {
|
|
214
|
+
onClickRemoveItem();
|
|
215
|
+
} : null,
|
|
205
216
|
withInfoButton: withInfoButton
|
|
206
217
|
}));
|
|
207
218
|
})));
|
|
@@ -310,6 +321,10 @@ function MediaMetadata(_ref) {
|
|
|
310
321
|
setDescription(val);
|
|
311
322
|
setChanged(true);
|
|
312
323
|
}, [tags, setDescription, setChanged]);
|
|
324
|
+
var _useState9 = React.useState(null),
|
|
325
|
+
_useState10 = _slicedToArray__default["default"](_useState9, 2),
|
|
326
|
+
saveState = _useState10[0],
|
|
327
|
+
setSaveState = _useState10[1];
|
|
313
328
|
var onSave = React.useCallback(function () {
|
|
314
329
|
return update(mediaId, {
|
|
315
330
|
name: name,
|
|
@@ -317,15 +332,18 @@ function MediaMetadata(_ref) {
|
|
|
317
332
|
description: description
|
|
318
333
|
}).then(function () {
|
|
319
334
|
setChanged(false);
|
|
335
|
+
setSaveState(null);
|
|
320
336
|
if (onClickClose !== null) {
|
|
321
337
|
onClickClose();
|
|
322
338
|
}
|
|
339
|
+
})["catch"](function () {
|
|
340
|
+
setSaveState(false);
|
|
323
341
|
});
|
|
324
|
-
}, [mediaId, name, tags, description, metadata, update, onClickClose]);
|
|
325
|
-
var
|
|
326
|
-
|
|
327
|
-
deletedState =
|
|
328
|
-
setDeletedState =
|
|
342
|
+
}, [mediaId, name, tags, description, metadata, update, onClickClose, setChanged, setSaveState]);
|
|
343
|
+
var _useState11 = React.useState(null),
|
|
344
|
+
_useState12 = _slicedToArray__default["default"](_useState11, 2),
|
|
345
|
+
deletedState = _useState12[0],
|
|
346
|
+
setDeletedState = _useState12[1];
|
|
329
347
|
React.useEffect(function () {
|
|
330
348
|
setDeletedState(null);
|
|
331
349
|
}, [mediaId]);
|
|
@@ -437,6 +455,14 @@ function MediaMetadata(_ref) {
|
|
|
437
455
|
"type": 0,
|
|
438
456
|
"value": "Save"
|
|
439
457
|
}]
|
|
458
|
+
})) : null, saveState === false ? /*#__PURE__*/React__default["default"].createElement("p", {
|
|
459
|
+
className: "pt-1 text-danger"
|
|
460
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
461
|
+
id: "DYjRd/",
|
|
462
|
+
defaultMessage: [{
|
|
463
|
+
"type": 0,
|
|
464
|
+
"value": "Sorry, this media could not be saved."
|
|
465
|
+
}]
|
|
440
466
|
})) : null), /*#__PURE__*/React__default["default"].createElement("h6", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
441
467
|
id: "c9VwT/",
|
|
442
468
|
defaultMessage: [{
|
|
@@ -886,10 +912,10 @@ var Search = function Search(_ref) {
|
|
|
886
912
|
type: "text",
|
|
887
913
|
value: value || '',
|
|
888
914
|
placeholder: intl.formatMessage({
|
|
889
|
-
id: "
|
|
915
|
+
id: "n/SxMs",
|
|
890
916
|
defaultMessage: [{
|
|
891
917
|
"type": 0,
|
|
892
|
-
"value": "Search medias
|
|
918
|
+
"value": "Search medias"
|
|
893
919
|
}]
|
|
894
920
|
}),
|
|
895
921
|
onChange: onSearchChange,
|
|
@@ -1567,7 +1593,7 @@ var defaultProps = {
|
|
|
1567
1593
|
onClearMedia: null
|
|
1568
1594
|
};
|
|
1569
1595
|
function MediaGallery(_ref) {
|
|
1570
|
-
var
|
|
1596
|
+
var _ref6;
|
|
1571
1597
|
var type = _ref.type,
|
|
1572
1598
|
source = _ref.source,
|
|
1573
1599
|
isPicker = _ref.isPicker,
|
|
@@ -1645,10 +1671,25 @@ function MediaGallery(_ref) {
|
|
|
1645
1671
|
metadataMedia = _useState8[0],
|
|
1646
1672
|
setMetadataMedia = _useState8[1];
|
|
1647
1673
|
var onClickItem = React.useCallback(function (media) {
|
|
1674
|
+
var _ref3 = media || {},
|
|
1675
|
+
_ref3$id = _ref3.id,
|
|
1676
|
+
mediaId = _ref3$id === void 0 ? null : _ref3$id;
|
|
1677
|
+
var _ref4 = selectedMedia || {},
|
|
1678
|
+
_ref4$id = _ref4.id,
|
|
1679
|
+
selectedId = _ref4$id === void 0 ? null : _ref4$id;
|
|
1680
|
+
var different = mediaId !== selectedId;
|
|
1648
1681
|
if (!isPicker) {
|
|
1649
1682
|
setMetadataMedia(media);
|
|
1650
1683
|
} else if (onClickMedia !== null) {
|
|
1651
|
-
|
|
1684
|
+
if (different) {
|
|
1685
|
+
onClickMedia(media);
|
|
1686
|
+
}
|
|
1687
|
+
}
|
|
1688
|
+
}, [isPicker, setMetadataMedia, onClickMedia, selectedMedia]);
|
|
1689
|
+
var onClickRemoveItem = React.useCallback(function () {
|
|
1690
|
+
setMetadataMedia(null);
|
|
1691
|
+
if (onClickMedia !== null) {
|
|
1692
|
+
onClickMedia(null);
|
|
1652
1693
|
}
|
|
1653
1694
|
}, [isPicker, setMetadataMedia, onClickMedia]);
|
|
1654
1695
|
var refresh = React.useCallback(function () {
|
|
@@ -1665,9 +1706,9 @@ function MediaGallery(_ref) {
|
|
|
1665
1706
|
}, [refresh, setMetadataMedia]);
|
|
1666
1707
|
var onMetadataClickDelete = React.useCallback(function () {
|
|
1667
1708
|
var mediaId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
1668
|
-
var
|
|
1669
|
-
|
|
1670
|
-
selectedId =
|
|
1709
|
+
var _ref5 = selectedMedia || {},
|
|
1710
|
+
_ref5$id = _ref5.id,
|
|
1711
|
+
selectedId = _ref5$id === void 0 ? null : _ref5$id;
|
|
1671
1712
|
if (mediaId !== null && mediaId === selectedId && onClickMedia !== null) {
|
|
1672
1713
|
onClickMedia(null);
|
|
1673
1714
|
} else {
|
|
@@ -1713,7 +1754,7 @@ function MediaGallery(_ref) {
|
|
|
1713
1754
|
return setUploadModalOpened(false);
|
|
1714
1755
|
}, [setUploadModalOpened]);
|
|
1715
1756
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1716
|
-
className: classNames__default["default"]([styles.container, (
|
|
1757
|
+
className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, styles.metadataOpened, metadataMedia !== null), _defineProperty__default["default"](_ref6, className, className), _ref6)])
|
|
1717
1758
|
}, /*#__PURE__*/React__default["default"].createElement(Navbar, {
|
|
1718
1759
|
types: isArray__default["default"](type) ? type : [type],
|
|
1719
1760
|
filters: filtersValue,
|
|
@@ -1744,7 +1785,8 @@ function MediaGallery(_ref) {
|
|
|
1744
1785
|
withInfoButton: isPicker,
|
|
1745
1786
|
isSmall: isSmall,
|
|
1746
1787
|
onClickItem: onClickItem,
|
|
1747
|
-
onClickItemInfo: onClickItemInfo
|
|
1788
|
+
onClickItemInfo: onClickItemInfo,
|
|
1789
|
+
onClickRemoveItem: onClickRemoveItem
|
|
1748
1790
|
}) : null, !allLoaded ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1749
1791
|
className: "w-100 mb-2"
|
|
1750
1792
|
}, loading || uploading ? /*#__PURE__*/React__default["default"].createElement(components.Spinner, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/media-gallery",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.331",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "9207986f3af466a62c38ecc9e79cd88f8616668f"
|
|
77
77
|
}
|