@atlaskit/media-ui 22.3.0 → 22.3.2

package/dist/es2019/mediaImage/index.js

@@ -7,12 +7,10 @@ import { getCssFromImageOrientation, isRotated } from '../imageMetaData';
 export class MediaImage extends Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "onImageLoad", e => {
       if (!this.imageRef || !this.imageRef.current) {
         return;
       }
-
       const {
         onImageLoad
       } = this.props;
@@ -21,12 +19,10 @@ export class MediaImage extends Component {
         imgWidth: this.imageRef.current.naturalWidth,
         imgHeight: this.imageRef.current.naturalHeight
       });
-
       if (onImageLoad) {
         onImageLoad(e.currentTarget);
       }
     });
-
     this.imageRef = /*#__PURE__*/React.createRef();
     this.state = {
       isImageLoaded: false,
@@ -35,17 +31,16 @@ export class MediaImage extends Component {
       parentWidth: Infinity,
       parentHeight: Infinity
     };
-  } // TODO FIL-4060 we need to check whether the dataURI changes in UNSAFE_componentWillReceiveProps()
-  // and if it does recalculate the image height and width
+  }
 
+  // TODO FIL-4060 we need to check whether the dataURI changes in UNSAFE_componentWillReceiveProps()
+  // and if it does recalculate the image height and width
 
   componentDidMount() {
     const parent = ReactDOM.findDOMNode(this).parentElement;
-
     if (!parent) {
       return;
     }
-
     const {
       width,
       height
@@ -55,7 +50,6 @@ export class MediaImage extends Component {
       parentHeight: height
     });
   }
-
   render() {
     const {
       crop,
@@ -78,6 +72,7 @@ export class MediaImage extends Component {
     const parentRatio = parentWidth / parentHeight;
     let imgRatio = imgWidth / imgHeight;
     let percentSize = '100%';
+
     /*
       Cover strategy means we want to full entire screen with an image. Here is an example:
           Image           Container   Result (░ - is what cropped out)
@@ -88,8 +83,8 @@ export class MediaImage extends Component {
      │▓▓▓▓▓▓▓▓▓▓▓▓▓▓│    └──────┘    └───┴──────┴───┘
      └──────────────┘
     */
-
     const isCoverStrategy = crop;
+
     /*
       Fit strategy means image is fully inside container even if there is empty space left.
       Here is an example:
@@ -101,9 +96,9 @@ export class MediaImage extends Component {
      │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│    │      │    ├──────┤
      └────────────────────┘    └──────┘    └──────┘
      */
-
     const isFitStrategy = !crop;
     const isImageRotated = previewOrientation !== 'from-image' && isRotated(previewOrientation);
+
     /*
       When photo has orientation of 90deg or 270deg (stored in EXIF meta data)
       things get very tricky. Let me go through an two examples to explain how we deal with that:
@@ -225,11 +220,11 @@ export class MediaImage extends Component {
       750px             -> (750x134) / 1000 = 100px
        So, 100x134 image in 100x200 container.
      */
-
     if (isImageRotated) {
       imgRatio = 1 / imgRatio;
       percentSize = `${Math.ceil(imgRatio * 100)}%`;
     }
+
     /*
       Here is an example of when isImageMoreLandscapyThanContainer is true:
          Image      Container   OR   Image      Container
@@ -241,27 +236,25 @@ export class MediaImage extends Component {
                                    |____|         |__|
        For false just swap "Image" and "Container" in the example above.
      */
-
-
     const isImageMoreLandscapyThanContainer = imgRatio > parentRatio;
     const isImgLandscape = imgWidth > imgHeight;
+
     /*
     This is two cases we need to cover as described in Example #2 above, but only for rotated landscape images.
      */
-
     if (isImageRotated && isImgLandscape) {
       if (isFitStrategy || isImageMoreLandscapyThanContainer || isCoverStrategy && !isImageMoreLandscapyThanContainer) {
         percentSize = `${Math.ceil(1 / imgRatio * 100)}%`;
       }
     }
+
     /*
       When isStretchingAllowed is false image is as big as it is, but as small as container
       (according to strategy - cover or fit).
       isStretchingAllowed is true if image is bigger then container.
      */
-
-
     const isStretchingAllowed = stretch;
+
     /*
       We do not want to show image until we finish deciding on sizing strategy.
       Though if it is a "fit" strategy (and image hasn't been rotated) we can display it right away,
@@ -270,12 +263,10 @@ export class MediaImage extends Component {
       The reason for exclude isImageRotated is that we need to calculate percentSize variable
       and we can do that only when image is loaded (and we have image size)
      */
-
     const showImage = forceSyncDisplay || isImageLoaded || isFitStrategy && !isImageRotated;
     const style = {
       transform: 'translate(-50%, -50%)'
     };
-
     if (isStretchingAllowed) {
       if (isFitStrategy && isImageMoreLandscapyThanContainer) {
         /*
@@ -351,18 +342,15 @@ export class MediaImage extends Component {
         style.maxWidth = percentSize;
       }
     }
-
     if (!showImage) {
       style.display = 'none';
     }
-
     if (previewOrientation === 'from-image') {
       style.imageOrientation = 'from-image';
     } else if (previewOrientation > 1) {
       const transform = getCssFromImageOrientation(previewOrientation);
       style.transform += ` ${transform}`;
     }
-
     return /*#__PURE__*/React.createElement(ImageComponent, {
       loading: loading,
       "data-testid": "media-image",
@@ -376,9 +364,7 @@ export class MediaImage extends Component {
       crossOrigin: crossOrigin
     });
   }
-
 }
-
 _defineProperty(MediaImage, "defaultProps", {
   crop: true,
   stretch: false,

package/dist/es2019/mediaImage/styled.js

@@ -15,7 +15,8 @@ export const ImageComponent = props => {
   } = props;
   return /*#__PURE__*/React.createElement("img", _extends({}, otherProps, {
     ref: imageRef,
-    style: { ...imgStyle,
+    style: {
+      ...imgStyle,
       ...style
     }
   }));

package/dist/es2019/mime-type-icon.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { getMimeIcon } from './util';
 import { MediaTypeIcon } from './media-type-icon';
 import { IconWrapper } from './media-type-icon';
-
 /*
  * Renders an icon. First, check if the mimeType corresponds to any of the special mimeType icons (.gif, .sketch, .exe, ect). If so, render that icon.
  * Else, render an icon corresponding to its mediaType (doc/audio/image/video/unknown)
@@ -15,8 +14,9 @@ export const MimeTypeIcon = ({
   size = 'large'
 }) => {
   // retrieve mimetype icon and label
-  const iconInfo = getMimeIcon(mimeType, name); // a corresponding mimetype icon and label was found.
+  const iconInfo = getMimeIcon(mimeType, name);
 
+  // a corresponding mimetype icon and label was found.
   if (iconInfo) {
     const Icon = iconInfo.icon;
     return /*#__PURE__*/React.createElement(IconWrapper, {
@@ -26,10 +26,10 @@ export const MimeTypeIcon = ({
     }, /*#__PURE__*/React.createElement(Icon, {
       label: iconInfo.label
     }));
-  } // no corresponding mimetype icon/label was found.
-  // Hence, return a mediatype (image/doc/audio/video/unknown) icon
-
+  }
 
+  // no corresponding mimetype icon/label was found.
+  // Hence, return a mediatype (image/doc/audio/video/unknown) icon
   return /*#__PURE__*/React.createElement(MediaTypeIcon, {
     testId: testId,
     type: mediaType,

package/dist/es2019/shortcut.js

@@ -9,42 +9,33 @@ export const keyCodes = {
 export class Shortcut extends Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "keyHandler", e => {
       const {
         handler,
         code,
         keyCode
       } = this.props;
-
       if (keyCode !== undefined && e.keyCode === keyCode) {
         handler();
       }
-
       if (code !== undefined && e.code === code) {
         handler();
       }
     });
-
     _defineProperty(this, "init", () => {
       document.addEventListener('keydown', this.keyHandler);
     });
-
     _defineProperty(this, "release", () => {
       document.removeEventListener('keydown', this.keyHandler);
     });
   }
-
   componentDidMount() {
     this.init();
   }
-
   componentWillUnmount() {
     this.release();
   }
-
   render() {
     return null;
   }
-
 }

package/dist/es2019/truncateText.js

@@ -28,7 +28,6 @@ export const TruncateRight = styled.span`
 `;
 export const calculateTruncation = (text, startFixedChars, endFixedChars) => {
   const minAllowedLength = endFixedChars + startFixedChars;
-
   if (text.length <= minAllowedLength) {
     // if no truncation return same value for left and right
     return {
@@ -36,7 +35,6 @@ export const calculateTruncation = (text, startFixedChars, endFixedChars) => {
       right: text
     };
   }
-
   const splitAt = text.length - endFixedChars;
   const left = text.substr(0, splitAt);
   const right = text.substr(splitAt);
@@ -45,10 +43,7 @@ export const calculateTruncation = (text, startFixedChars, endFixedChars) => {
     right
   };
 };
-
-const fontFaceScaleFactor = fontSizePX => fontSizePX / 11 * 0.46;
-/* factor for fontSize of 11px */
-
+const fontFaceScaleFactor = fontSizePX => fontSizePX / 11 * 0.46; /* factor for fontSize of 11px */
 
 export const Truncate = ({
   text,
@@ -57,17 +52,14 @@ export const Truncate = ({
   startFixedChars = 4,
   // 1 char + 3 dots
   endFixedChars = 7 // file extension 3/4 chars + a fraction of the name
-
 }) => {
   const {
     left: leftStr,
     right: rightStr
   } = calculateTruncation(text, startFixedChars, endFixedChars);
-
   if (leftStr === rightStr) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, text);
   }
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TruncateLeft, {
     fontSizePX: fontSizePX,
     startFixedChars: startFixedChars,

package/dist/es2019/util.js

@@ -17,32 +17,29 @@ import { isCodeViewerItem } from './codeViewer';
 export function dataURItoFile(dataURI, filename = 'untitled') {
   if (dataURI.length === 0) {
     throw new Error('dataURI not found');
-  } // convert base64/URLEncoded data component to raw binary data held in a string
-
+  }
 
+  // convert base64/URLEncoded data component to raw binary data held in a string
   const dataURIParts = dataURI.split(',');
-  const byteString = dataURIParts[0].indexOf('base64') >= 0 ? atob(dataURIParts[1]) : decodeURIComponent(dataURIParts[1]); // separate out the mime component
+  const byteString = dataURIParts[0].indexOf('base64') >= 0 ? atob(dataURIParts[1]) : decodeURIComponent(dataURIParts[1]);
 
+  // separate out the mime component
   let mimeString;
-
   try {
     mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
   } catch (e) {
     // https://stackoverflow.com/questions/1176022/unknown-file-type-mime
     mimeString = 'application/octet-stream';
-  } // write the bytes of the string to a typed array
-
+  }
 
+  // write the bytes of the string to a typed array
   const intArray = new Uint8Array(byteString.length);
-
   for (let i = 0; i < byteString.length; i++) {
     intArray[i] = byteString.charCodeAt(i);
   }
-
   const blob = new Blob([intArray], {
     type: mimeString
   });
-
   try {
     return new File([blob], filename, {
       type: mimeString
@@ -65,7 +62,6 @@ export function fileToDataURI(blob) {
     const reader = new FileReader();
     reader.addEventListener('load', () => {
       const result = reader.result;
-
       if (typeof result === 'string') {
         resolve(result);
       } else if (result === null) {
@@ -103,11 +99,9 @@ export function loadImage(src) {
   return new Promise((resolve, reject) => {
     const img = new Image();
     img.src = src;
-
     img.onload = () => {
       resolve(img);
     };
-
     img.onerror = reject;
   });
 }
@@ -129,13 +123,10 @@ export const findParentByClassname = (element, className, maxParentElement = doc
   if (element.classList.contains(className)) {
     return element;
   }
-
   let currentElement = element;
-
   while (currentElement.parentElement !== maxParentElement) {
     if (currentElement.parentElement) {
       currentElement = currentElement.parentElement;
-
       if (currentElement.classList.contains(className)) {
         return currentElement;
       }
@@ -143,7 +134,6 @@ export const findParentByClassname = (element, className, maxParentElement = doc
       return undefined;
     }
   }
-
   return undefined;
 };
 const mimeTypes = [{
@@ -195,48 +185,46 @@ const mimeTypes = [{
   mimeTypes: ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel', 'application/x-iwork-keynote-sffnumbers'],
   icon: ExcelSpreadsheetIcon
 }];
+
 /*
  * Returns a label and icon
  */
-
 export function getMimeIcon(mimeType, fileName) {
   // based on the mimeType, determine the corresponding icon and label
-  const iconInfo = mimeTypes.find(file => file.mimeTypes.indexOf(mimeType) > -1); //return the appropriate icon and its label if we have it
+  const iconInfo = mimeTypes.find(file => file.mimeTypes.indexOf(mimeType) > -1);
 
+  //return the appropriate icon and its label if we have it
   if (iconInfo) {
     return iconInfo;
   }
-
   if (isCodeViewerItem(fileName, mimeType)) {
     return {
       label: 'source-code',
       icon: SourceCodeIcon
     };
-  } // we are not able to determine what icon to render based on the mimeType
-  // hence we render the icon based on the filename
-
+  }
 
+  // we are not able to determine what icon to render based on the mimeType
+  // hence we render the icon based on the filename
   if (fileName.match(/.*\.sketch$/)) {
     return {
       label: 'sketch',
       icon: SketchIcon
     };
   }
-
   if (fileName.match(/.*\.fig$/)) {
     return {
       label: 'figma',
       icon: FigmaIcon
     };
   }
-
   if (fileName.match(/.*\.exe$/) || fileName.match(/.*\.dmg$/)) {
     return {
       label: 'executable',
       icon: ExecutableIcon
     };
-  } // cannot find a corresponding mimeType icon.
-
+  }
 
+  // cannot find a corresponding mimeType icon.
   return undefined;
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "22.3.0",
+	"version": "22.3.2",
 	"sideEffects": false
 }

package/dist/esm/MediaButton.js

@@ -3,12 +3,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/typeof";
 var _excluded = ["appearance", "buttonRef"],
-    _excluded2 = ["buttonStyles"];
-
+  _excluded2 = ["buttonStyles"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // Keep Media buttons to use static colors from the new color palette to support the hybrid
 // theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
@@ -84,18 +81,15 @@ var buttonTheme = {
     }
   }
 };
-
 function extract(newTheme, _ref) {
   var appearance = _ref.appearance,
-      state = _ref.state,
-      mode = _ref.mode;
-
+    state = _ref.state,
+    mode = _ref.mode;
   // @ts-ignore
   if (!newTheme[appearance]) {
     return;
-  } // @ts-ignore
-
-
+  }
+  // @ts-ignore
   var root = newTheme[appearance];
   return Object.keys(root).reduce(function (acc, val) {
     var node = root;
@@ -103,34 +97,30 @@ function extract(newTheme, _ref) {
       if (!node[item]) {
         return;
       }
-
       if (_typeof(node[item]) !== 'object') {
         acc[val] = node[item];
         return;
       }
-
       node = node[item];
       return;
     });
     return acc;
   }, {});
 }
-
 export default function MediaButton(_ref2) {
   var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
-      buttonRef = _ref2.buttonRef,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    buttonRef = _ref2.buttonRef,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
-    ref: buttonRef // Giving button the 'default' appearance so it can calculate the base styles
+    ref: buttonRef
+    // Giving button the 'default' appearance so it can calculate the base styles
     ,
     appearance: appearance,
     theme: function theme(currentTheme, themeProps) {
       var _currentTheme = currentTheme(themeProps),
-          buttonStyles = _currentTheme.buttonStyles,
-          rest = _objectWithoutProperties(_currentTheme, _excluded2);
-
+        buttonStyles = _currentTheme.buttonStyles,
+        rest = _objectWithoutProperties(_currentTheme, _excluded2);
       return _objectSpread({
         buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(buttonTheme, _objectSpread(_objectSpread({}, themeProps), {}, {
           appearance: appearance

package/dist/esm/MediaInlineCard/ErroredView/index.js

@@ -5,11 +5,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
@@ -19,38 +16,30 @@ import { AKIconWrapper } from '../Icon';
 import { NoLinkAppearance } from '../styled';
 export var MediaInlineCardErroredView = /*#__PURE__*/function (_React$Component) {
   _inherits(MediaInlineCardErroredView, _React$Component);
-
   var _super = _createSuper(MediaInlineCardErroredView);
-
   function MediaInlineCardErroredView() {
     var _this;
-
     _classCallCheck(this, MediaInlineCardErroredView);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "renderMessage", function () {
       var message = _this.props.message;
       var errorMessage = /*#__PURE__*/React.createElement(NoLinkAppearance, null, message);
       return /*#__PURE__*/React.createElement(React.Fragment, null, errorMessage);
     });
-
     return _this;
   }
-
   _createClass(MediaInlineCardErroredView, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          onClick = _this$props.onClick,
-          isSelected = _this$props.isSelected,
-          _this$props$testId = _this$props.testId,
-          testId = _this$props$testId === void 0 ? 'media-inline-card-errored-view' : _this$props$testId,
-          icon = _this$props.icon;
+        onClick = _this$props.onClick,
+        isSelected = _this$props.isSelected,
+        _this$props$testId = _this$props.testId,
+        testId = _this$props$testId === void 0 ? 'media-inline-card-errored-view' : _this$props$testId,
+        icon = _this$props.icon;
       return /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         onClick: onClick,
@@ -65,6 +54,5 @@ export var MediaInlineCardErroredView = /*#__PURE__*/function (_React$Component)
       }));
     }
   }]);
-
   return MediaInlineCardErroredView;
 }(React.Component);

package/dist/esm/MediaInlineCard/Frame/index.js

@@ -5,68 +5,52 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import { Wrapper } from './styled';
 export var Frame = /*#__PURE__*/function (_React$Component) {
   _inherits(Frame, _React$Component);
-
   var _super = _createSuper(Frame);
-
   function Frame() {
     var _this;
-
     _classCallCheck(this, Frame);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
       var onClick = _this.props.onClick;
-
       if (onClick) {
         event.preventDefault();
         event.stopPropagation();
         onClick(event);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleKeyPress", function (event) {
       if (event.key !== ' ' && event.key !== 'Enter') {
         return;
       }
-
       var onClick = _this.props.onClick;
-
       if (onClick) {
         event.preventDefault();
         event.stopPropagation();
         onClick(event);
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
       e.preventDefault();
     });
-
     return _this;
   }
-
   _createClass(Frame, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          isSelected = _this$props.isSelected,
-          children = _this$props.children,
-          onClick = _this$props.onClick,
-          testId = _this$props.testId;
+        isSelected = _this$props.isSelected,
+        children = _this$props.children,
+        onClick = _this$props.onClick,
+        testId = _this$props.testId;
       var isInteractive = Boolean(onClick);
       return /*#__PURE__*/React.createElement(Wrapper, {
         isSelected: isSelected,
@@ -79,6 +63,5 @@ export var Frame = /*#__PURE__*/function (_React$Component) {
       }, children);
     }
   }]);
-
   return Frame;
 }(React.Component);