@atlaskit/media-document-viewer 0.3.1 → 0.3.2

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 (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/page.compiled.css +5 -0
  3. package/dist/cjs/page.js +25 -5
  4. package/dist/es2019/page.compiled.css +5 -0
  5. package/dist/es2019/page.js +25 -5
  6. package/dist/es2019/utils/getDocumentRoot.js +1 -1
  7. package/dist/esm/page.compiled.css +5 -0
  8. package/dist/esm/page.js +25 -5
  9. package/dist/esm/utils/getDocumentRoot.js +1 -1
  10. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/media-document-viewer
2
2
 
3
+ ## 0.3.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#183808](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183808)
8
+ [`4436100210ca9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4436100210ca9) -
9
+ Added spinner to document viewer
10
+
3
11
  ## 0.3.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/page.compiled.css CHANGED
@@ -1,8 +1,13 @@
1
1
  ._154iidpf{top:0}
2
2
  ._18u01wug{margin-left:auto}
3
+ ._1bah1h6o{justify-content:center}
4
+ ._1bsb1osq{width:100%}
5
+ ._1e0c1txw{display:flex}
3
6
  ._1kemd8h4{image-rendering:pixelated}
4
7
  ._1ltvidpf{left:0}
5
8
  ._2hwx1wug{margin-right:auto}
9
+ ._4cvr1h6o{align-items:center}
10
+ ._4t3i1osq{height:100%}
6
11
  ._80om1kdv{cursor:text}
7
12
  ._bfhku67f{background-color:#fff}
8
13
  ._kqswh2mm{position:relative}
package/dist/cjs/page.js CHANGED
@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
16
  var _mediaCommon = require("@atlaskit/media-common");
17
+ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
17
18
  var _annotations = require("./annotations");
18
19
  var _documentLinks = require("./documentLinks");
19
20
  var _getDocumentRoot = require("./utils/getDocumentRoot");
@@ -66,7 +67,12 @@ var Line = function Line() {
66
67
  };
67
68
  var pageSvgStyles = null;
68
69
  var pageImageStyles = null;
70
+ var pageSpinnerStyles = null;
69
71
  var pageWrapperStyles = null;
72
+ var a4Dimensions = {
73
+ height: 595,
74
+ width: 842
75
+ };
70
76
  var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
71
77
  var dimensions = _ref4.dimensions,
72
78
  imageSrc = _ref4.imageSrc,
@@ -75,17 +81,31 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
75
81
  pageIndex = _ref4.pageIndex,
76
82
  zoom = _ref4.zoom,
77
83
  onImageLoad = _ref4.onImageLoad;
78
- var style = {
79
- width: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)") : 'initial',
80
- height: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)") : 'initial'
81
- };
84
+ var style = {};
85
+ if (dimensions) {
86
+ // contents endpoint has loaded so dimensions are available
87
+ style.width = "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)");
88
+ style.height = "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)");
89
+ } else if (imageSrc) {
90
+ // contents endpoint has not loaded dimensions but image is loaded so we can use the image dimensions
91
+ style.width = 'initial';
92
+ style.height = 'initial';
93
+ } else {
94
+ // contents endpoint has not loaded dimensions and image is not loaded so we can use the a4 dimensions
95
+ style.width = "calc(var(--document-viewer-zoom) * ".concat(a4Dimensions.width, "px)");
96
+ style.height = "calc(var(--document-viewer-zoom) * ".concat(a4Dimensions.height, "px)");
97
+ }
82
98
  return /*#__PURE__*/React.createElement("div", {
83
99
  ref: ref,
84
100
  style: style,
85
101
  "data-testid": "page-".concat(pageIndex),
86
102
  id: "page-".concat(pageIndex + 1),
87
103
  className: (0, _runtime.ax)(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
88
- }, imageSrc && /*#__PURE__*/React.createElement("img", {
104
+ }, !imageSrc && /*#__PURE__*/React.createElement("div", {
105
+ className: (0, _runtime.ax)(["_4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o"])
106
+ }, /*#__PURE__*/React.createElement(_spinner.default, {
107
+ size: "large"
108
+ })), imageSrc && /*#__PURE__*/React.createElement("img", {
89
109
  style: style,
90
110
  "data-testid": "page-".concat(pageIndex, "-image"),
91
111
  "data-zoom": zoom,
package/dist/es2019/page.compiled.css CHANGED
@@ -1,8 +1,13 @@
1
1
  ._154iidpf{top:0}
2
2
  ._18u01wug{margin-left:auto}
3
+ ._1bah1h6o{justify-content:center}
4
+ ._1bsb1osq{width:100%}
5
+ ._1e0c1txw{display:flex}
3
6
  ._1kemd8h4{image-rendering:pixelated}
4
7
  ._1ltvidpf{left:0}
5
8
  ._2hwx1wug{margin-right:auto}
9
+ ._4cvr1h6o{align-items:center}
10
+ ._4t3i1osq{height:100%}
6
11
  ._80om1kdv{cursor:text}
7
12
  ._bfhku67f{background-color:#fff}
8
13
  ._kqswh2mm{position:relative}
package/dist/es2019/page.js CHANGED
@@ -4,6 +4,7 @@ import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { forwardRef, useEffect, useState } from 'react';
6
6
  import { useStaticCallback } from '@atlaskit/media-common';
7
+ import Spinner from '@atlaskit/spinner';
7
8
  import { Annotations } from './annotations';
8
9
  import { DocumentLinks } from './documentLinks';
9
10
  import { getDocumentRoot } from './utils/getDocumentRoot';
@@ -55,7 +56,12 @@ const Line = ({
55
56
  })));
56
57
  const pageSvgStyles = null;
57
58
  const pageImageStyles = null;
59
+ const pageSpinnerStyles = null;
58
60
  const pageWrapperStyles = null;
61
+ const a4Dimensions = {
62
+ height: 595,
63
+ width: 842
64
+ };
59
65
  const PageView = /*#__PURE__*/forwardRef(({
60
66
  dimensions,
61
67
  imageSrc,
@@ -65,17 +71,31 @@ const PageView = /*#__PURE__*/forwardRef(({
65
71
  zoom,
66
72
  onImageLoad
67
73
  }, ref) => {
68
- const style = {
69
- width: dimensions ? `calc(var(--document-viewer-zoom) * ${dimensions.width}px)` : 'initial',
70
- height: dimensions ? `calc(var(--document-viewer-zoom) * ${dimensions.height}px)` : 'initial'
71
- };
74
+ const style = {};
75
+ if (dimensions) {
76
+ // contents endpoint has loaded so dimensions are available
77
+ style.width = `calc(var(--document-viewer-zoom) * ${dimensions.width}px)`;
78
+ style.height = `calc(var(--document-viewer-zoom) * ${dimensions.height}px)`;
79
+ } else if (imageSrc) {
80
+ // contents endpoint has not loaded dimensions but image is loaded so we can use the image dimensions
81
+ style.width = 'initial';
82
+ style.height = 'initial';
83
+ } else {
84
+ // contents endpoint has not loaded dimensions and image is not loaded so we can use the a4 dimensions
85
+ style.width = `calc(var(--document-viewer-zoom) * ${a4Dimensions.width}px)`;
86
+ style.height = `calc(var(--document-viewer-zoom) * ${a4Dimensions.height}px)`;
87
+ }
72
88
  return /*#__PURE__*/React.createElement("div", {
73
89
  ref: ref,
74
90
  style: style,
75
91
  "data-testid": `page-${pageIndex}`,
76
92
  id: `page-${pageIndex + 1}`,
77
93
  className: ax(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
78
- }, imageSrc && /*#__PURE__*/React.createElement("img", {
94
+ }, !imageSrc && /*#__PURE__*/React.createElement("div", {
95
+ className: ax(["_4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o"])
96
+ }, /*#__PURE__*/React.createElement(Spinner, {
97
+ size: "large"
98
+ })), imageSrc && /*#__PURE__*/React.createElement("img", {
79
99
  style: style,
80
100
  "data-testid": `page-${pageIndex}-image`,
81
101
  "data-zoom": zoom,
package/dist/es2019/utils/getDocumentRoot.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getDocument } from "@atlaskit/browser-apis";
1
+ import { getDocument } from '@atlaskit/browser-apis';
2
2
  export const DOCUMENT_SCROLL_ROOT_ID = 'document-scroll-root';
3
3
  export const getDocumentRoot = () => {
4
4
  const doc = getDocument();
package/dist/esm/page.compiled.css CHANGED
@@ -1,8 +1,13 @@
1
1
  ._154iidpf{top:0}
2
2
  ._18u01wug{margin-left:auto}
3
+ ._1bah1h6o{justify-content:center}
4
+ ._1bsb1osq{width:100%}
5
+ ._1e0c1txw{display:flex}
3
6
  ._1kemd8h4{image-rendering:pixelated}
4
7
  ._1ltvidpf{left:0}
5
8
  ._2hwx1wug{margin-right:auto}
9
+ ._4cvr1h6o{align-items:center}
10
+ ._4t3i1osq{height:100%}
6
11
  ._80om1kdv{cursor:text}
7
12
  ._bfhku67f{background-color:#fff}
8
13
  ._kqswh2mm{position:relative}
package/dist/esm/page.js CHANGED
@@ -6,6 +6,7 @@ import * as React from 'react';
6
6
  import { ax, ix } from "@compiled/react/runtime";
7
7
  import { forwardRef, useEffect, useState } from 'react';
8
8
  import { useStaticCallback } from '@atlaskit/media-common';
9
+ import Spinner from '@atlaskit/spinner';
9
10
  import { Annotations } from './annotations';
10
11
  import { DocumentLinks } from './documentLinks';
11
12
  import { getDocumentRoot } from './utils/getDocumentRoot';
@@ -57,7 +58,12 @@ var Line = function Line() {
57
58
  };
58
59
  var pageSvgStyles = null;
59
60
  var pageImageStyles = null;
61
+ var pageSpinnerStyles = null;
60
62
  var pageWrapperStyles = null;
63
+ var a4Dimensions = {
64
+ height: 595,
65
+ width: 842
66
+ };
61
67
  var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
62
68
  var dimensions = _ref4.dimensions,
63
69
  imageSrc = _ref4.imageSrc,
@@ -66,17 +72,31 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
66
72
  pageIndex = _ref4.pageIndex,
67
73
  zoom = _ref4.zoom,
68
74
  onImageLoad = _ref4.onImageLoad;
69
- var style = {
70
- width: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)") : 'initial',
71
- height: dimensions ? "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)") : 'initial'
72
- };
75
+ var style = {};
76
+ if (dimensions) {
77
+ // contents endpoint has loaded so dimensions are available
78
+ style.width = "calc(var(--document-viewer-zoom) * ".concat(dimensions.width, "px)");
79
+ style.height = "calc(var(--document-viewer-zoom) * ".concat(dimensions.height, "px)");
80
+ } else if (imageSrc) {
81
+ // contents endpoint has not loaded dimensions but image is loaded so we can use the image dimensions
82
+ style.width = 'initial';
83
+ style.height = 'initial';
84
+ } else {
85
+ // contents endpoint has not loaded dimensions and image is not loaded so we can use the a4 dimensions
86
+ style.width = "calc(var(--document-viewer-zoom) * ".concat(a4Dimensions.width, "px)");
87
+ style.height = "calc(var(--document-viewer-zoom) * ".concat(a4Dimensions.height, "px)");
88
+ }
73
89
  return /*#__PURE__*/React.createElement("div", {
74
90
  ref: ref,
75
91
  style: style,
76
92
  "data-testid": "page-".concat(pageIndex),
77
93
  id: "page-".concat(pageIndex + 1),
78
94
  className: ax(["_kqswh2mm _bfhku67f _18u01wug _2hwx1wug"])
79
- }, imageSrc && /*#__PURE__*/React.createElement("img", {
95
+ }, !imageSrc && /*#__PURE__*/React.createElement("div", {
96
+ className: ax(["_4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o"])
97
+ }, /*#__PURE__*/React.createElement(Spinner, {
98
+ size: "large"
99
+ })), imageSrc && /*#__PURE__*/React.createElement("img", {
80
100
  style: style,
81
101
  "data-testid": "page-".concat(pageIndex, "-image"),
82
102
  "data-zoom": zoom,
package/dist/esm/utils/getDocumentRoot.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getDocument } from "@atlaskit/browser-apis";
1
+ import { getDocument } from '@atlaskit/browser-apis';
2
2
  export var DOCUMENT_SCROLL_ROOT_ID = 'document-scroll-root';
3
3
  export var getDocumentRoot = function getDocumentRoot() {
4
4
  var doc = getDocument();
package/package.json CHANGED
@@ -29,9 +29,10 @@
29
29
  "dependencies": {
30
30
  "@atlaskit/browser-apis": "^0.0.1",
31
31
  "@atlaskit/css": "^0.12.0",
32
- "@atlaskit/icon": "^27.2.0",
32
+ "@atlaskit/icon": "^27.3.0",
33
33
  "@atlaskit/media-common": "^12.3.0",
34
34
  "@atlaskit/primitives": "^14.10.0",
35
+ "@atlaskit/spinner": "^18.0.0",
35
36
  "@atlaskit/tokens": "^5.4.0",
36
37
  "@babel/runtime": "^7.0.0",
37
38
  "@compiled/react": "^0.18.3"
@@ -85,7 +86,7 @@
85
86
  }
86
87
  },
87
88
  "name": "@atlaskit/media-document-viewer",
88
- "version": "0.3.1",
89
+ "version": "0.3.2",
89
90
  "description": "Modern and fast document viewer",
90
91
  "author": "Atlassian Pty Ltd",
91
92
  "license": "Apache-2.0",