@atlaskit/media-document-viewer 0.2.3 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/media-document-viewer
 
+## 0.3.0
+
+### Minor Changes
+
+- [#179532](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179532)
+  [`3102656e971a4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3102656e971a4) -
+  Fixed form view by removing unnecessary div and replacing with fragment and added a new
+  `onSuccess` callback to enable success analytics
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/cjs/annotations.js

@@ -2,18 +2,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextInputFormField = exports.ComboBoxFormField = exports.Annotations = void 0;
 require("./annotations.compiled.css");
-var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
 var formInputBaseStyles = null;
 var textInputStyles = null;
@@ -23,13 +21,13 @@ var foreignObjectProps = {
 var TextInputFormField = exports.TextInputFormField = function TextInputFormField(_ref) {
   var field = _ref.field,
     dataTestId = _ref.dataTestId;
-  return /*#__PURE__*/React.createElement("foreignObject", {
+  return /*#__PURE__*/_react.default.createElement("foreignObject", {
     x: field.x,
     y: -field.y,
     width: field.w,
     height: field.h,
     "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, foreignObjectProps, {
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, foreignObjectProps, {
     style: (0, _defineProperty2.default)({}, 'fontSize', "".concat(field.f, "px")),
     type: "text",
     value: field.text,
@@ -42,35 +40,35 @@ var comboBoxInputStyles = null;
 var ComboBoxFormField = exports.ComboBoxFormField = function ComboBoxFormField(_ref3) {
   var field = _ref3.field,
     dataTestId = _ref3.dataTestId;
-  return /*#__PURE__*/React.createElement("foreignObject", {
+  return /*#__PURE__*/_react.default.createElement("foreignObject", {
     x: field.x,
     y: -field.y,
     width: field.w,
     height: field.h,
     "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, foreignObjectProps, {
+  }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, foreignObjectProps, {
     className: (0, _runtime.ax)(["_1e0c11p5 _yv0e1ghl _4cvr1h6o _1bah1yb4 _kqswstnw _4t3i1osq _1bsb1osq"])
-  }), /*#__PURE__*/React.createElement("input", {
+  }), /*#__PURE__*/_react.default.createElement("input", {
     style: (0, _defineProperty2.default)({}, 'fontSize', "".concat(field.f, "px")),
     type: "text",
     value: field.text,
     readOnly: true,
     className: (0, _runtime.ax)(["_19itglyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _r06hglyw", "_1bsb1osq"])
-  }), /*#__PURE__*/React.createElement(_chevronDown.default, {
+  }), /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
     label: "",
     size: "small"
   })));
 };
 var Annotations = exports.Annotations = function Annotations(_ref5) {
   var annotations = _ref5.annotations;
-  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map(function (field, i) {
-    return /*#__PURE__*/React.createElement(TextInputFormField, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, annotations.text_form_fields.map(function (field, i) {
+    return /*#__PURE__*/_react.default.createElement(TextInputFormField, {
       field: field,
       dataTestId: "text-form-field-".concat(i),
       key: i
     });
   }), annotations.combobox_form_fields.map(function (field, i) {
-    return /*#__PURE__*/React.createElement(ComboBoxFormField, {
+    return /*#__PURE__*/_react.default.createElement(ComboBoxFormField, {
       field: field,
       dataTestId: "combobox-form-field-".concat(i),
       key: i

package/dist/cjs/documentViewer.js

@@ -19,7 +19,8 @@ var documentViewerStyles = null;
 var DEFAULT_PAGINATION_SIZE = 50;
 var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
   var _documentMetadata$pag;
-  var getContent = _ref.getContent,
+  var onSuccess = _ref.onSuccess,
+    getContent = _ref.getContent,
     getPageImageUrl = _ref.getPageImageUrl,
     _ref$paginationSize = _ref.paginationSize,
     paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
@@ -49,6 +50,7 @@ var DocumentViewer = exports.DocumentViewer = function DocumentViewer(_ref) {
       onVisible: function onVisible() {
         return loadPageContent(i);
       },
+      onLoad: i === 0 ? onSuccess : undefined,
       fonts: fonts,
       content: page
     });

package/dist/cjs/page.js

@@ -120,7 +120,8 @@ var Page = exports.Page = function Page(_ref5) {
     pageIndex = _ref5.pageIndex,
     zoom = _ref5.zoom,
     defaultDimensions = _ref5.defaultDimensions,
-    onVisible = _ref5.onVisible;
+    onVisible = _ref5.onVisible,
+    onLoad = _ref5.onLoad;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     imageSrc = _useState2[0],
@@ -143,6 +144,7 @@ var Page = exports.Page = function Page(_ref5) {
     setDimensions = _useState4[1];
   var onImageLoad = (0, _mediaCommon.useStaticCallback)(function (event) {
     var image = event.currentTarget;
+    onLoad === null || onLoad === void 0 || onLoad();
     if (!content) {
       var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
       setDimensions({

package/dist/es2019/annotations.js

@@ -1,10 +1,10 @@
 /* annotations.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./annotations.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
 
+import React from 'react';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 const formInputBaseStyles = null;
 const textInputStyles = null;
@@ -61,7 +61,7 @@ export const ComboBoxFormField = ({
 export const Annotations = ({
   annotations
 }) => {
-  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map((field, i) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, annotations.text_form_fields.map((field, i) => {
     return /*#__PURE__*/React.createElement(TextInputFormField, {
       field: field,
       dataTestId: `text-form-field-${i}`,

package/dist/es2019/documentViewer.js

@@ -8,6 +8,7 @@ import { useCachedGetImage } from './utils/useCachedGetImage';
 const documentViewerStyles = null;
 const DEFAULT_PAGINATION_SIZE = 50;
 export const DocumentViewer = ({
+  onSuccess,
   getContent,
   getPageImageUrl,
   paginationSize = DEFAULT_PAGINATION_SIZE,
@@ -39,6 +40,7 @@ export const DocumentViewer = ({
       zoom: zoom,
       defaultDimensions: documentMetadata.defaultDimensions,
       onVisible: () => loadPageContent(i),
+      onLoad: i === 0 ? onSuccess : undefined,
       fonts: fonts,
       content: page
     });

package/dist/es2019/page.js

@@ -107,7 +107,8 @@ export const Page = ({
   pageIndex,
   zoom,
   defaultDimensions,
-  onVisible
+  onVisible,
+  onLoad
 }) => {
   var _ref;
   const [imageSrc, setImageSrc] = useState();
@@ -127,6 +128,7 @@ export const Page = ({
   const [dimensions, setDimensions] = useState();
   const onImageLoad = useStaticCallback(event => {
     const image = event.currentTarget;
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad();
     if (!content) {
       const zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
       setDimensions({

package/dist/esm/annotations.js

@@ -2,10 +2,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./annotations.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
 
+import React from 'react';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 var formInputBaseStyles = null;
 var textInputStyles = null;
@@ -55,7 +55,7 @@ export var ComboBoxFormField = function ComboBoxFormField(_ref3) {
 };
 export var Annotations = function Annotations(_ref5) {
   var annotations = _ref5.annotations;
-  return /*#__PURE__*/React.createElement("div", null, annotations.text_form_fields.map(function (field, i) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, annotations.text_form_fields.map(function (field, i) {
     return /*#__PURE__*/React.createElement(TextInputFormField, {
       field: field,
       dataTestId: "text-form-field-".concat(i),

package/dist/esm/documentViewer.js

@@ -10,7 +10,8 @@ var documentViewerStyles = null;
 var DEFAULT_PAGINATION_SIZE = 50;
 export var DocumentViewer = function DocumentViewer(_ref) {
   var _documentMetadata$pag;
-  var getContent = _ref.getContent,
+  var onSuccess = _ref.onSuccess,
+    getContent = _ref.getContent,
     getPageImageUrl = _ref.getPageImageUrl,
     _ref$paginationSize = _ref.paginationSize,
     paginationSize = _ref$paginationSize === void 0 ? DEFAULT_PAGINATION_SIZE : _ref$paginationSize,
@@ -40,6 +41,7 @@ export var DocumentViewer = function DocumentViewer(_ref) {
       onVisible: function onVisible() {
         return loadPageContent(i);
       },
+      onLoad: i === 0 ? onSuccess : undefined,
       fonts: fonts,
       content: page
     });

package/dist/esm/page.js

@@ -111,7 +111,8 @@ export var Page = function Page(_ref5) {
     pageIndex = _ref5.pageIndex,
     zoom = _ref5.zoom,
     defaultDimensions = _ref5.defaultDimensions,
-    onVisible = _ref5.onVisible;
+    onVisible = _ref5.onVisible,
+    onLoad = _ref5.onLoad;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     imageSrc = _useState2[0],
@@ -134,6 +135,7 @@ export var Page = function Page(_ref5) {
     setDimensions = _useState4[1];
   var onImageLoad = useStaticCallback(function (event) {
     var image = event.currentTarget;
+    onLoad === null || onLoad === void 0 || onLoad();
     if (!content) {
       var _zoom = image.dataset.zoom ? Number(image.dataset.zoom) : 1;
       setDimensions({

package/dist/types/documentViewer.d.ts

@@ -5,6 +5,7 @@ type DocumentViewerProps = {
     getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>;
     paginationSize?: number;
     zoom: number;
+    onSuccess?: () => void;
 };
-export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
+export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
 export {};

package/dist/types/page.d.ts

@@ -11,6 +11,7 @@ type PageProps = {
         height: number;
     };
     onVisible: () => void;
+    onLoad?: () => void;
 };
-export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/documentViewer.d.ts

@@ -5,6 +5,7 @@ type DocumentViewerProps = {
     getPageImageUrl: (pageNumber: number, zoom: number) => Promise<string>;
     paginationSize?: number;
     zoom: number;
+    onSuccess?: () => void;
 };
-export declare const DocumentViewer: ({ getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
+export declare const DocumentViewer: ({ onSuccess, getContent, getPageImageUrl, paginationSize, zoom, }: DocumentViewerProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/page.d.ts

@@ -11,6 +11,7 @@ type PageProps = {
         height: number;
     };
     onVisible: () => void;
+    onLoad?: () => void;
 };
-export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, }: PageProps) => JSX.Element;
+export declare const Page: ({ getPageSrc, content, fonts, pageIndex, zoom, defaultDimensions, onVisible, onLoad, }: PageProps) => JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,6 @@
 {
 	"atlassian": {
 		"team": "Media Exif",
-		"runReact18": true,
 		"website": {
 			"name": "MediaDocumentViewer",
 			"category": "Layout and structure"
@@ -84,7 +83,7 @@
 		}
 	},
 	"name": "@atlaskit/media-document-viewer",
-	"version": "0.2.3",
+	"version": "0.3.0",
 	"description": "Modern and fast document viewer",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",