@micromag/core 0.3.115 → 0.3.117

package/es/hooks.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import isString from 'lodash/isString';
 import dayjs from 'dayjs';
 import { EventsManager, MediasParser, StoryParser, ThemeParser } from '@micromag/core';
-import { createUseEvent } from '@micromag/core/utils';
+import { createUseEvent, getMediaFilesAsArray } from '@micromag/core/utils';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useForm as useForm$1 } from '@folklore/forms';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -1053,6 +1053,29 @@ var useMediasParser = function useMediasParser() {
   };
 };
 
+function useMediaThumbnail(media) {
+  var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  var _ref = media || {},
+      _ref$thumbnail_url = _ref.thumbnail_url,
+      defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
+      _ref$files = _ref.files,
+      files = _ref$files === void 0 ? null : _ref$files;
+
+  var thumbnailUrl = useMemo(function () {
+    var filesArray = getMediaFilesAsArray(files) || [];
+
+    var _ref2 = (file !== null ? filesArray.find(function (_ref3) {
+      var handle = _ref3.handle;
+      return handle === file;
+    }) || null : null) || {},
+        url = _ref2.url;
+
+    return url || defaultThumbnailUrl;
+  }, [files, file, defaultThumbnailUrl]);
+  return thumbnailUrl;
+}
+
 var useParsedStory = function useParsedStory(story) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$disabled = _ref.disabled,
@@ -1566,4 +1589,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useAnimationFrame, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediasParser, useObserver, useParsedStory, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useAnimationFrame, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaThumbnail, useMediasParser, useObserver, useParsedStory, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/index.js

@@ -14,6 +14,8 @@ import _createSuper from '@babel/runtime/helpers/createSuper';
 import EventEmitter from 'wolfy87-eventemitter';
 import 'lodash/isNumber';
 import 'param-case';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
 import 'react';
 import isString from 'lodash/isString';
 import 'tinycolor2';

package/es/utils.js

@@ -1,5 +1,7 @@
 import isNumber from 'lodash/isNumber';
 import { paramCase } from 'param-case';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import isObject from 'lodash/isObject';
 import { useEffect } from 'react';
 import isString from 'lodash/isString';
@@ -20,6 +22,141 @@ var convertStyleToString = function convertStyleToString(style) {
   }).join('\n') : '';
 };
 
+/*! clipboard-copy. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
+// @todo vendoring this: https://github.com/feross/clipboard-copy/blob/master/index.js
+// we might want to add that to the npm deps and just use it?
+function makeError() {
+  return new DOMException('The request is not allowed', 'NotAllowedError');
+}
+
+function copyClipboardApi(_x) {
+  return _copyClipboardApi.apply(this, arguments);
+}
+
+function _copyClipboardApi() {
+  _copyClipboardApi = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (navigator.clipboard) {
+              _context.next = 2;
+              break;
+            }
+
+            throw makeError();
+
+          case 2:
+            return _context.abrupt("return", navigator.clipboard.writeText(text));
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _copyClipboardApi.apply(this, arguments);
+}
+
+function copyExecCommand(_x2) {
+  return _copyExecCommand.apply(this, arguments);
+}
+
+function _copyExecCommand() {
+  _copyExecCommand = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(text) {
+    var span, selection, range, success;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            // Put the text to copy into a <span>
+            span = document.createElement('span');
+            span.textContent = text; // Preserve consecutive spaces and newlines
+
+            span.style.whiteSpace = 'pre';
+            span.style.webkitUserSelect = 'auto';
+            span.style.userSelect = 'all'; // Add the <span> to the page
+
+            document.body.appendChild(span); // Make a selection object representing the range of text selected by the user
+
+            selection = window.getSelection();
+            range = window.document.createRange();
+            selection.removeAllRanges();
+            range.selectNode(span);
+            selection.addRange(range); // Copy text to the clipboard
+
+            success = false;
+
+            try {
+              success = window.document.execCommand('copy');
+            } finally {
+              // Cleanup
+              selection.removeAllRanges();
+              window.document.body.removeChild(span);
+            }
+
+            if (success) {
+              _context2.next = 15;
+              break;
+            }
+
+            throw makeError();
+
+          case 15:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _copyExecCommand.apply(this, arguments);
+}
+
+function copyToClipboard(_x3) {
+  return _copyToClipboard.apply(this, arguments);
+}
+
+function _copyToClipboard() {
+  _copyToClipboard = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(text) {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            _context3.next = 3;
+            return copyClipboardApi(text);
+
+          case 3:
+            _context3.next = 15;
+            break;
+
+          case 5:
+            _context3.prev = 5;
+            _context3.t0 = _context3["catch"](0);
+            _context3.prev = 7;
+            _context3.next = 10;
+            return copyExecCommand(text);
+
+          case 10:
+            _context3.next = 15;
+            break;
+
+          case 12:
+            _context3.prev = 12;
+            _context3.t1 = _context3["catch"](7);
+            throw _context3.t1 || _context3.t0 || makeError();
+
+          case 15:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3, null, [[0, 5], [7, 12]]);
+  }));
+  return _copyToClipboard.apply(this, arguments);
+}
+
 var createNullableOnChange = function createNullableOnChange() {
   var onChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   return function (newValue) {
@@ -852,4 +989,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { convertStyleToString, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/hooks.js

@@ -1089,6 +1089,29 @@ var useMediasParser = function useMediasParser() {
   };
 };
 
+function useMediaThumbnail(media) {
+  var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  var _ref = media || {},
+      _ref$thumbnail_url = _ref.thumbnail_url,
+      defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
+      _ref$files = _ref.files,
+      files = _ref$files === void 0 ? null : _ref$files;
+
+  var thumbnailUrl = react.useMemo(function () {
+    var filesArray = utils.getMediaFilesAsArray(files) || [];
+
+    var _ref2 = (file !== null ? filesArray.find(function (_ref3) {
+      var handle = _ref3.handle;
+      return handle === file;
+    }) || null : null) || {},
+        url = _ref2.url;
+
+    return url || defaultThumbnailUrl;
+  }, [files, file, defaultThumbnailUrl]);
+  return thumbnailUrl;
+}
+
 var useParsedStory = function useParsedStory(story) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$disabled = _ref.disabled,
@@ -1615,6 +1638,7 @@ exports.useIsVisible = useIsVisible;
 exports.useLoadedFonts = useLoadedFonts;
 exports.useLongPress = useLongPress;
 exports.useMediaApi = useMediaApi;
+exports.useMediaThumbnail = useMediaThumbnail;
 exports.useMediasParser = useMediasParser;
 exports.useObserver = useObserver;
 exports.useParsedStory = useParsedStory;

package/lib/index.js

@@ -18,6 +18,8 @@ var _createSuper = require('@babel/runtime/helpers/createSuper');
 var EventEmitter = require('wolfy87-eventemitter');
 require('lodash/isNumber');
 require('param-case');
+require('@babel/runtime/helpers/asyncToGenerator');
+require('@babel/runtime/regenerator');
 require('react');
 var isString = require('lodash/isString');
 require('tinycolor2');

package/lib/utils.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var isNumber = require('lodash/isNumber');
 var paramCase = require('param-case');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var isObject = require('lodash/isObject');
 var react = require('react');
 var isString = require('lodash/isString');
@@ -20,6 +22,8 @@ var slugify = require('slugify');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var tinycolor__default = /*#__PURE__*/_interopDefaultLegacy(tinycolor);
@@ -37,6 +41,141 @@ var convertStyleToString = function convertStyleToString(style) {
   }).join('\n') : '';
 };
 
+/*! clipboard-copy. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
+// @todo vendoring this: https://github.com/feross/clipboard-copy/blob/master/index.js
+// we might want to add that to the npm deps and just use it?
+function makeError() {
+  return new DOMException('The request is not allowed', 'NotAllowedError');
+}
+
+function copyClipboardApi(_x) {
+  return _copyClipboardApi.apply(this, arguments);
+}
+
+function _copyClipboardApi() {
+  _copyClipboardApi = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(text) {
+    return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (navigator.clipboard) {
+              _context.next = 2;
+              break;
+            }
+
+            throw makeError();
+
+          case 2:
+            return _context.abrupt("return", navigator.clipboard.writeText(text));
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _copyClipboardApi.apply(this, arguments);
+}
+
+function copyExecCommand(_x2) {
+  return _copyExecCommand.apply(this, arguments);
+}
+
+function _copyExecCommand() {
+  _copyExecCommand = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2(text) {
+    var span, selection, range, success;
+    return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            // Put the text to copy into a <span>
+            span = document.createElement('span');
+            span.textContent = text; // Preserve consecutive spaces and newlines
+
+            span.style.whiteSpace = 'pre';
+            span.style.webkitUserSelect = 'auto';
+            span.style.userSelect = 'all'; // Add the <span> to the page
+
+            document.body.appendChild(span); // Make a selection object representing the range of text selected by the user
+
+            selection = window.getSelection();
+            range = window.document.createRange();
+            selection.removeAllRanges();
+            range.selectNode(span);
+            selection.addRange(range); // Copy text to the clipboard
+
+            success = false;
+
+            try {
+              success = window.document.execCommand('copy');
+            } finally {
+              // Cleanup
+              selection.removeAllRanges();
+              window.document.body.removeChild(span);
+            }
+
+            if (success) {
+              _context2.next = 15;
+              break;
+            }
+
+            throw makeError();
+
+          case 15:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _copyExecCommand.apply(this, arguments);
+}
+
+function copyToClipboard(_x3) {
+  return _copyToClipboard.apply(this, arguments);
+}
+
+function _copyToClipboard() {
+  _copyToClipboard = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3(text) {
+    return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            _context3.next = 3;
+            return copyClipboardApi(text);
+
+          case 3:
+            _context3.next = 15;
+            break;
+
+          case 5:
+            _context3.prev = 5;
+            _context3.t0 = _context3["catch"](0);
+            _context3.prev = 7;
+            _context3.next = 10;
+            return copyExecCommand(text);
+
+          case 10:
+            _context3.next = 15;
+            break;
+
+          case 12:
+            _context3.prev = 12;
+            _context3.t1 = _context3["catch"](7);
+            throw _context3.t1 || _context3.t0 || makeError();
+
+          case 15:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3, null, [[0, 5], [7, 12]]);
+  }));
+  return _copyToClipboard.apply(this, arguments);
+}
+
 var createNullableOnChange = function createNullableOnChange() {
   var onChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   return function (newValue) {
@@ -878,6 +1017,7 @@ Object.defineProperty(exports, 'snakeCase', {
     get: function () { return changeCase.snakeCase; }
 });
 exports.convertStyleToString = convertStyleToString;
+exports.copyToClipboard = copyToClipboard;
 exports.createNullableOnChange = createNullableOnChange;
 exports.createUseEvent = createUseEvent;
 exports.getColorAsString = getColorAsString;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.115",
+    "version": "0.3.117",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "47c269c5f0b4b423cb5bb187f12ec821479b89dc"
+    "gitHead": "eab1c9a0b8c19d747fee6472158779f33b1f18d3"
 }