@atlaskit/media-document-viewer 0.5.3 → 0.6.0

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 (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/documentViewer.compiled.css +1 -0
  3. package/dist/cjs/documentViewer.js +42 -1
  4. package/dist/cjs/page.compiled.css +0 -1
  5. package/dist/cjs/page.js +1 -1
  6. package/dist/es2019/documentViewer.compiled.css +1 -0
  7. package/dist/es2019/documentViewer.js +43 -2
  8. package/dist/es2019/page.compiled.css +0 -1
  9. package/dist/es2019/page.js +1 -1
  10. package/dist/esm/documentViewer.compiled.css +1 -0
  11. package/dist/esm/documentViewer.js +43 -2
  12. package/dist/esm/page.compiled.css +0 -1
  13. package/dist/esm/page.js +1 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/media-document-viewer
2
2
 
3
+ ## 0.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`48549f737bfcf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/48549f737bfcf) -
8
+ Added support for touch scrolling in PDF viewer
9
+
3
10
  ## 0.5.3
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/documentViewer.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  ._zulputpp{gap:var(--ds-space-150,9pt)}._18m91wug{overflow-y:auto}
3
3
  ._19pkxncg{margin-top:var(--ds-space-800,4pc)}
4
+ ._1bsb1ris{width:max-content}
4
5
  ._1e0c1txw{display:flex}
5
6
  ._1reo1wug{overflow-x:auto}
6
7
  ._1ul91osq{min-width:100%}
package/dist/cjs/documentViewer.js CHANGED
@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
15
+ var _mediaCommon = require("@atlaskit/media-common");
15
16
  var _page = require("./page");
16
17
  var _usePageContent2 = require("./usePageContent");
17
18
  var _getDocumentRoot = require("./utils/getDocumentRoot");
@@ -67,10 +68,50 @@ var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
67
68
  previousZoomRef.current = zoom;
68
69
  }
69
70
  }, [zoom]);
71
+ var touchStartRef = (0, _react.useRef)(null);
72
+ var onTouchStart = (0, _react.useCallback)(function (event) {
73
+ var touch = event.touches[0];
74
+ if (touch) {
75
+ touchStartRef.current = {
76
+ x: touch.clientX,
77
+ y: touch.clientY
78
+ };
79
+ }
80
+ }, []);
81
+ var onTouchMove = (0, _mediaCommon.useStaticCallback)(function (event) {
82
+ var container = (0, _getDocumentRoot.getScrollElement)();
83
+ if (!container || !touchStartRef.current) {
84
+ return;
85
+ }
86
+ var touch = event.touches[0];
87
+ if (!touch) {
88
+ return;
89
+ }
90
+
91
+ // Calculate the delta from the last touch position
92
+ var deltaX = touchStartRef.current.x - touch.clientX;
93
+ var deltaY = touchStartRef.current.y - touch.clientY;
94
+
95
+ // Apply the scroll
96
+ container.scrollLeft += deltaX;
97
+ container.scrollTop += deltaY;
98
+
99
+ // Update the reference position for the next move
100
+ touchStartRef.current = {
101
+ x: touch.clientX,
102
+ y: touch.clientY
103
+ };
104
+ });
105
+ var onTouchEnd = (0, _react.useCallback)(function () {
106
+ touchStartRef.current = null;
107
+ }, []);
70
108
  return /*#__PURE__*/React.createElement("div", {
71
109
  "data-testid": "document-viewer",
72
110
  style: style,
73
- className: (0, _runtime.ax)(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4"])
111
+ onTouchStart: onTouchStart,
112
+ onTouchMove: onTouchMove,
113
+ onTouchEnd: onTouchEnd,
114
+ className: (0, _runtime.ax)(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
74
115
  }, (0, _toConsumableArray2.default)(Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)).map(function (_, i) {
75
116
  var _getPageContent = getPageContent(i),
76
117
  page = _getPageContent.page,
package/dist/cjs/page.compiled.css CHANGED
@@ -8,7 +8,6 @@
8
8
  ._2hwx1wug{margin-right:auto}
9
9
  ._4cvr1h6o{align-items:center}
10
10
  ._4t3i1osq{height:100%}
11
- ._80om1kdv{cursor:text}
12
11
  ._bfhku67f{background-color:#fff}
13
12
  ._kqswh2mm{position:relative}
14
13
  ._kqswstnw{position:absolute}
package/dist/cjs/page.js CHANGED
@@ -120,7 +120,7 @@ var PageView = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
120
120
  "data-testid": "page-".concat(pageIndex, "-text-layer"),
121
121
  style: style,
122
122
  viewBox: "0 -".concat(content.height, " ").concat(content.width, " ").concat(content.height),
123
- className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _80om1kdv _lswu1j28"])
123
+ className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _lswu1j28"])
124
124
  }, content.lines.map(function (line, i) {
125
125
  return /*#__PURE__*/React.createElement(Line, {
126
126
  dataTestId: "page-".concat(pageIndex, "-line-").concat(i),
package/dist/es2019/documentViewer.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  ._zulputpp{gap:var(--ds-space-150,9pt)}._18m91wug{overflow-y:auto}
3
3
  ._19pkxncg{margin-top:var(--ds-space-800,4pc)}
4
+ ._1bsb1ris{width:max-content}
4
5
  ._1e0c1txw{display:flex}
5
6
  ._1reo1wug{overflow-x:auto}
6
7
  ._1ul91osq{min-width:100%}
package/dist/es2019/documentViewer.js CHANGED
@@ -2,7 +2,8 @@
2
2
  import "./documentViewer.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import { useLayoutEffect, useRef } from 'react';
5
+ import { useCallback, useLayoutEffect, useRef } from 'react';
6
+ import { useStaticCallback } from '@atlaskit/media-common';
6
7
  import { Page } from './page';
7
8
  import { usePageContent } from './usePageContent';
8
9
  import { getScrollElement } from './utils/getDocumentRoot';
@@ -57,10 +58,50 @@ export const DocumentViewer = ({
57
58
  previousZoomRef.current = zoom;
58
59
  }
59
60
  }, [zoom]);
61
+ const touchStartRef = useRef(null);
62
+ const onTouchStart = useCallback(event => {
63
+ const touch = event.touches[0];
64
+ if (touch) {
65
+ touchStartRef.current = {
66
+ x: touch.clientX,
67
+ y: touch.clientY
68
+ };
69
+ }
70
+ }, []);
71
+ const onTouchMove = useStaticCallback(event => {
72
+ const container = getScrollElement();
73
+ if (!container || !touchStartRef.current) {
74
+ return;
75
+ }
76
+ const touch = event.touches[0];
77
+ if (!touch) {
78
+ return;
79
+ }
80
+
81
+ // Calculate the delta from the last touch position
82
+ const deltaX = touchStartRef.current.x - touch.clientX;
83
+ const deltaY = touchStartRef.current.y - touch.clientY;
84
+
85
+ // Apply the scroll
86
+ container.scrollLeft += deltaX;
87
+ container.scrollTop += deltaY;
88
+
89
+ // Update the reference position for the next move
90
+ touchStartRef.current = {
91
+ x: touch.clientX,
92
+ y: touch.clientY
93
+ };
94
+ });
95
+ const onTouchEnd = useCallback(() => {
96
+ touchStartRef.current = null;
97
+ }, []);
60
98
  return /*#__PURE__*/React.createElement("div", {
61
99
  "data-testid": "document-viewer",
62
100
  style: style,
63
- className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4"])
101
+ onTouchStart: onTouchStart,
102
+ onTouchMove: onTouchMove,
103
+ onTouchEnd: onTouchEnd,
104
+ className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
64
105
  }, [...Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)].map((_, i) => {
65
106
  const {
66
107
  page,
package/dist/es2019/page.compiled.css CHANGED
@@ -8,7 +8,6 @@
8
8
  ._2hwx1wug{margin-right:auto}
9
9
  ._4cvr1h6o{align-items:center}
10
10
  ._4t3i1osq{height:100%}
11
- ._80om1kdv{cursor:text}
12
11
  ._bfhku67f{background-color:#fff}
13
12
  ._kqswh2mm{position:relative}
14
13
  ._kqswstnw{position:absolute}
package/dist/es2019/page.js CHANGED
@@ -110,7 +110,7 @@ const PageView = /*#__PURE__*/forwardRef(({
110
110
  "data-testid": `page-${pageIndex}-text-layer`,
111
111
  style: style,
112
112
  viewBox: `0 -${content.height} ${content.width} ${content.height}`,
113
- className: ax(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _80om1kdv _lswu1j28"])
113
+ className: ax(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _lswu1j28"])
114
114
  }, content.lines.map((line, i) => /*#__PURE__*/React.createElement(Line, {
115
115
  dataTestId: `page-${pageIndex}-line-${i}`,
116
116
  spans: line.spans,
package/dist/esm/documentViewer.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  ._zulputpp{gap:var(--ds-space-150,9pt)}._18m91wug{overflow-y:auto}
3
3
  ._19pkxncg{margin-top:var(--ds-space-800,4pc)}
4
+ ._1bsb1ris{width:max-content}
4
5
  ._1e0c1txw{display:flex}
5
6
  ._1reo1wug{overflow-x:auto}
6
7
  ._1ul91osq{min-width:100%}
package/dist/esm/documentViewer.js CHANGED
@@ -3,7 +3,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
3
  import "./documentViewer.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
- import { useLayoutEffect, useRef } from 'react';
6
+ import { useCallback, useLayoutEffect, useRef } from 'react';
7
+ import { useStaticCallback } from '@atlaskit/media-common';
7
8
  import { Page } from './page';
8
9
  import { usePageContent } from './usePageContent';
9
10
  import { getScrollElement } from './utils/getDocumentRoot';
@@ -58,10 +59,50 @@ export var DocumentViewer = function DocumentViewer(_ref) {
58
59
  previousZoomRef.current = zoom;
59
60
  }
60
61
  }, [zoom]);
62
+ var touchStartRef = useRef(null);
63
+ var onTouchStart = useCallback(function (event) {
64
+ var touch = event.touches[0];
65
+ if (touch) {
66
+ touchStartRef.current = {
67
+ x: touch.clientX,
68
+ y: touch.clientY
69
+ };
70
+ }
71
+ }, []);
72
+ var onTouchMove = useStaticCallback(function (event) {
73
+ var container = getScrollElement();
74
+ if (!container || !touchStartRef.current) {
75
+ return;
76
+ }
77
+ var touch = event.touches[0];
78
+ if (!touch) {
79
+ return;
80
+ }
81
+
82
+ // Calculate the delta from the last touch position
83
+ var deltaX = touchStartRef.current.x - touch.clientX;
84
+ var deltaY = touchStartRef.current.y - touch.clientY;
85
+
86
+ // Apply the scroll
87
+ container.scrollLeft += deltaX;
88
+ container.scrollTop += deltaY;
89
+
90
+ // Update the reference position for the next move
91
+ touchStartRef.current = {
92
+ x: touch.clientX,
93
+ y: touch.clientY
94
+ };
95
+ });
96
+ var onTouchEnd = useCallback(function () {
97
+ touchStartRef.current = null;
98
+ }, []);
61
99
  return /*#__PURE__*/React.createElement("div", {
62
100
  "data-testid": "document-viewer",
63
101
  style: style,
64
- className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4"])
102
+ onTouchStart: onTouchStart,
103
+ onTouchMove: onTouchMove,
104
+ onTouchEnd: onTouchEnd,
105
+ className: ax(["_zulputpp _1reo1wug _18m91wug _19pkxncg _1ul91osq _1e0c1txw _2lx21bp4 _1bsb1ris"])
65
106
  }, _toConsumableArray(Array((_documentMetadata$pag = documentMetadata.pageCount) !== null && _documentMetadata$pag !== void 0 ? _documentMetadata$pag : 4)).map(function (_, i) {
66
107
  var _getPageContent = getPageContent(i),
67
108
  page = _getPageContent.page,
package/dist/esm/page.compiled.css CHANGED
@@ -8,7 +8,6 @@
8
8
  ._2hwx1wug{margin-right:auto}
9
9
  ._4cvr1h6o{align-items:center}
10
10
  ._4t3i1osq{height:100%}
11
- ._80om1kdv{cursor:text}
12
11
  ._bfhku67f{background-color:#fff}
13
12
  ._kqswh2mm{position:relative}
14
13
  ._kqswstnw{position:absolute}
package/dist/esm/page.js CHANGED
@@ -111,7 +111,7 @@ var PageView = /*#__PURE__*/forwardRef(function (_ref4, ref) {
111
111
  "data-testid": "page-".concat(pageIndex, "-text-layer"),
112
112
  style: style,
113
113
  viewBox: "0 -".concat(content.height, " ").concat(content.width, " ").concat(content.height),
114
- className: ax(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _80om1kdv _lswu1j28"])
114
+ className: ax(["_kqswstnw _154iidpf _1ltvidpf _uizt1kdv _lswu1j28"])
115
115
  }, content.lines.map(function (line, i) {
116
116
  return /*#__PURE__*/React.createElement(Line, {
117
117
  dataTestId: "page-".concat(pageIndex, "-line-").concat(i),
package/package.json CHANGED
@@ -91,7 +91,7 @@
91
91
  }
92
92
  },
93
93
  "name": "@atlaskit/media-document-viewer",
94
- "version": "0.5.3",
94
+ "version": "0.6.0",
95
95
  "description": "Modern and fast document viewer",
96
96
  "author": "Atlassian Pty Ltd",
97
97
  "license": "Apache-2.0",