@micromag/media-gallery 0.3.333 → 0.3.334

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +26 -21
  3. package/lib/index.js +25 -20
  4. package/package.json +3 -3
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-selected{border:1px solid #a13dff}.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}
1
+ .micromag-media-gallery-items-gallery-item-container{border:1px solid #343434;cursor:pointer;overflow:hidden;position:relative;-webkit-transition:border .15s ease-out;-o-transition:border .15s ease-out;transition:border .15s ease-out}.micromag-media-gallery-items-gallery-item-container:hover{border:1px solid #6c6c6c}.micromag-media-gallery-items-gallery-item-container:hover.micromag-media-gallery-items-gallery-item-selected{border:1px solid #a13dff}.micromag-media-gallery-items-gallery-item-container.micromag-media-gallery-items-gallery-item-selected{border:1px solid #a13dff}.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:260px;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{background-color:#1c1c1c;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}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-placeholder{background-color:#1c1c1c;height:60px}
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
@@ -10,7 +10,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
10
10
  import { PropTypes } from '@micromag/core';
11
11
  import { Card, Button, Media, Spinner, UploadModal } from '@micromag/core/components';
12
12
  import { useFieldComponent, useStory } from '@micromag/core/contexts';
13
- import { useMediaUpdate, useMediaDelete, useMediasRecentSearches, useMediaTags, useMediaAuthors, useMedias, useMediaCreate } from '@micromag/data';
13
+ import { useMediaUpdate, useMediaRequestDelete, useMediaDelete, useMediasRecentSearches, useMediaTags, useMediaAuthors, useMedias, useMediaCreate } from '@micromag/data';
14
14
  import { useDimensionObserver } from '@micromag/core/hooks';
15
15
  import { faHeadphonesAlt } from '@fortawesome/free-solid-svg-icons/faHeadphonesAlt';
16
16
  import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
@@ -260,6 +260,8 @@ function MediaMetadata(_ref) {
260
260
  mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
261
261
  var _useMediaUpdate = useMediaUpdate(),
262
262
  update = _useMediaUpdate.update;
263
+ var _useMediaRequestDelet = useMediaRequestDelete(),
264
+ requestDeleteMedia = _useMediaRequestDelet.requestDeleteMedia;
263
265
  var _useMediaDelete = useMediaDelete(),
264
266
  deleteMedia = _useMediaDelete.deleteMedia;
265
267
  var getOptionLabel = useCallback(function (_ref4) {
@@ -340,26 +342,34 @@ function MediaMetadata(_ref) {
340
342
  setDeletedState(null);
341
343
  setConfirmation(null);
342
344
  }, [mediaId, setDeletedState, setConfirmation]);
343
- var onDelete = useCallback(function () {
344
- return deleteMedia(mediaId, confirmation !== null).then(function (response) {
345
+ var onConfirm = useCallback(function () {
346
+ requestDeleteMedia(mediaId).then(function (response) {
345
347
  var _ref7 = response || {},
346
348
  state = _ref7.state,
347
349
  _ref7$items = _ref7.items,
348
350
  items = _ref7$items === void 0 ? [] : _ref7$items;
349
351
  if (state === 'needs_confirmation') {
350
- setConfirmation(items);
352
+ setConfirmation(items || []);
351
353
  } else {
352
- setChanged(false);
353
- setDeletedState(true);
354
354
  setConfirmation(null);
355
- if (onClickDelete !== null) {
356
- onClickDelete(mediaId);
357
- }
355
+ }
356
+ })["catch"](function () {
357
+ setConfirmation(null);
358
+ });
359
+ }, [mediaId, requestDeleteMedia, setConfirmation]);
360
+ var onDelete = useCallback(function () {
361
+ deleteMedia(mediaId).then(function () {
362
+ setChanged(false);
363
+ setDeletedState(true);
364
+ setConfirmation(null);
365
+ if (onClickDelete !== null) {
366
+ onClickDelete(mediaId);
358
367
  }
359
368
  })["catch"](function () {
360
369
  setDeletedState(false);
370
+ setConfirmation(null);
361
371
  });
362
- }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
372
+ }, [mediaId, deleteMedia, onClickDelete, setChanged, setDeletedState, setConfirmation]);
363
373
  var onCancelDelete = useCallback(function () {
364
374
  setConfirmation(null);
365
375
  setDeletedState(null);
@@ -579,7 +589,7 @@ function MediaMetadata(_ref) {
579
589
  className: "col"
580
590
  }, /*#__PURE__*/React.createElement("small", null, user.name)))) : null), /*#__PURE__*/React.createElement("div", {
581
591
  className: "py-3"
582
- }, confirmation !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
592
+ }, confirmation !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, confirmation.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
583
593
  className: "pt-1 text-danger"
584
594
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
585
595
  id: "2FD6tj",
@@ -587,11 +597,12 @@ function MediaMetadata(_ref) {
587
597
  "type": 0,
588
598
  "value": "This media is used by the following documents:"
589
599
  }]
590
- })), /*#__PURE__*/React.createElement("ul", null, confirmation.map(function (it) {
600
+ })), /*#__PURE__*/React.createElement("ul", null, confirmation.map(function (it, i) {
591
601
  return /*#__PURE__*/React.createElement("li", {
602
+ key: "".concat(it, "-").concat(i + 1),
592
603
  className: "text-danger"
593
604
  }, it);
594
- })), /*#__PURE__*/React.createElement("p", {
605
+ }))) : null, /*#__PURE__*/React.createElement("p", {
595
606
  className: "pt-1 text-danger"
596
607
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
597
608
  id: "wy2g+x",
@@ -605,14 +616,8 @@ function MediaMetadata(_ref) {
605
616
  className: "me-2",
606
617
  theme: "danger",
607
618
  outline: true,
608
- onClick: onDelete
609
- }, confirmation !== null ? /*#__PURE__*/React.createElement(FormattedMessage, {
610
- id: "/KQ87r",
611
- defaultMessage: [{
612
- "type": 0,
613
- "value": "Delete media"
614
- }]
615
- }) : /*#__PURE__*/React.createElement(FormattedMessage, {
619
+ onClick: confirmation === null ? onConfirm : onDelete
620
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
616
621
  id: "/KQ87r",
617
622
  defaultMessage: [{
618
623
  "type": 0,
package/lib/index.js CHANGED
@@ -276,6 +276,8 @@ function MediaMetadata(_ref) {
276
276
  mediaTags = _ref3$tags === void 0 ? [] : _ref3$tags;
277
277
  var _useMediaUpdate = data.useMediaUpdate(),
278
278
  update = _useMediaUpdate.update;
279
+ var _useMediaRequestDelet = data.useMediaRequestDelete(),
280
+ requestDeleteMedia = _useMediaRequestDelet.requestDeleteMedia;
279
281
  var _useMediaDelete = data.useMediaDelete(),
280
282
  deleteMedia = _useMediaDelete.deleteMedia;
281
283
  var getOptionLabel = React.useCallback(function (_ref4) {
@@ -356,26 +358,34 @@ function MediaMetadata(_ref) {
356
358
  setDeletedState(null);
357
359
  setConfirmation(null);
358
360
  }, [mediaId, setDeletedState, setConfirmation]);
359
- var onDelete = React.useCallback(function () {
360
- return deleteMedia(mediaId, confirmation !== null).then(function (response) {
361
+ var onConfirm = React.useCallback(function () {
362
+ requestDeleteMedia(mediaId).then(function (response) {
361
363
  var _ref7 = response || {},
362
364
  state = _ref7.state,
363
365
  _ref7$items = _ref7.items,
364
366
  items = _ref7$items === void 0 ? [] : _ref7$items;
365
367
  if (state === 'needs_confirmation') {
366
- setConfirmation(items);
368
+ setConfirmation(items || []);
367
369
  } else {
368
- setChanged(false);
369
- setDeletedState(true);
370
370
  setConfirmation(null);
371
- if (onClickDelete !== null) {
372
- onClickDelete(mediaId);
373
- }
371
+ }
372
+ })["catch"](function () {
373
+ setConfirmation(null);
374
+ });
375
+ }, [mediaId, requestDeleteMedia, setConfirmation]);
376
+ var onDelete = React.useCallback(function () {
377
+ deleteMedia(mediaId).then(function () {
378
+ setChanged(false);
379
+ setDeletedState(true);
380
+ setConfirmation(null);
381
+ if (onClickDelete !== null) {
382
+ onClickDelete(mediaId);
374
383
  }
375
384
  })["catch"](function () {
376
385
  setDeletedState(false);
386
+ setConfirmation(null);
377
387
  });
378
- }, [mediaId, confirmation, deleteMedia, onClickClose, setDeletedState, setConfirmation]);
388
+ }, [mediaId, deleteMedia, onClickDelete, setChanged, setDeletedState, setConfirmation]);
379
389
  var onCancelDelete = React.useCallback(function () {
380
390
  setConfirmation(null);
381
391
  setDeletedState(null);
@@ -595,7 +605,7 @@ function MediaMetadata(_ref) {
595
605
  className: "col"
596
606
  }, /*#__PURE__*/React__default["default"].createElement("small", null, user.name)))) : null), /*#__PURE__*/React__default["default"].createElement("div", {
597
607
  className: "py-3"
598
- }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
608
+ }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, confirmation.length > 0 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
599
609
  className: "pt-1 text-danger"
600
610
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
601
611
  id: "2FD6tj",
@@ -603,11 +613,12 @@ function MediaMetadata(_ref) {
603
613
  "type": 0,
604
614
  "value": "This media is used by the following documents:"
605
615
  }]
606
- })), /*#__PURE__*/React__default["default"].createElement("ul", null, confirmation.map(function (it) {
616
+ })), /*#__PURE__*/React__default["default"].createElement("ul", null, confirmation.map(function (it, i) {
607
617
  return /*#__PURE__*/React__default["default"].createElement("li", {
618
+ key: "".concat(it, "-").concat(i + 1),
608
619
  className: "text-danger"
609
620
  }, it);
610
- })), /*#__PURE__*/React__default["default"].createElement("p", {
621
+ }))) : null, /*#__PURE__*/React__default["default"].createElement("p", {
611
622
  className: "pt-1 text-danger"
612
623
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
613
624
  id: "wy2g+x",
@@ -621,14 +632,8 @@ function MediaMetadata(_ref) {
621
632
  className: "me-2",
622
633
  theme: "danger",
623
634
  outline: true,
624
- onClick: onDelete
625
- }, confirmation !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
626
- id: "/KQ87r",
627
- defaultMessage: [{
628
- "type": 0,
629
- "value": "Delete media"
630
- }]
631
- }) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
635
+ onClick: confirmation === null ? onConfirm : onDelete
636
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
632
637
  id: "/KQ87r",
633
638
  defaultMessage: [{
634
639
  "type": 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/media-gallery",
3
- "version": "0.3.333",
3
+ "version": "0.3.334",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -60,7 +60,7 @@
60
60
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
61
61
  "@fortawesome/react-fontawesome": "^0.1.13",
62
62
  "@micromag/core": "^0.3.332",
63
- "@micromag/data": "^0.3.332",
63
+ "@micromag/data": "^0.3.334",
64
64
  "bootstrap": "5.2.0-beta1",
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": "2623c05c1b9db8f5d547b39636cee5782e9bc881"
76
+ "gitHead": "aecd5e405aff415fe8d1a627f03d1e74ccd9ef95"
77
77
  }