@zextras/carbonio-ui-preview 0.1.3 → 0.2.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 (107) hide show
  1. package/README.md +5 -5
  2. package/lib/index.d.ts +6 -0
  3. package/lib/index.js +28 -0
  4. package/lib/index.js.map +1 -0
  5. package/lib/preview/FocusWithin.d.ts +7 -0
  6. package/lib/preview/FocusWithin.js +87 -0
  7. package/lib/preview/FocusWithin.js.map +1 -0
  8. package/lib/preview/Header.d.ts +29 -0
  9. package/lib/preview/Header.js +44 -0
  10. package/lib/preview/Header.js.map +1 -0
  11. package/lib/preview/Header.test.d.ts +1 -0
  12. package/lib/preview/Header.test.js +143 -0
  13. package/lib/preview/Header.test.js.map +1 -0
  14. package/lib/preview/ImagePreview.d.ts +42 -0
  15. package/lib/preview/ImagePreview.js +116 -0
  16. package/lib/preview/ImagePreview.js.map +1 -0
  17. package/lib/preview/ImagePreview.test.d.ts +1 -0
  18. package/lib/preview/ImagePreview.test.js +161 -0
  19. package/lib/preview/ImagePreview.test.js.map +1 -0
  20. package/lib/preview/PdfPreview.d.ts +63 -0
  21. package/lib/preview/PdfPreview.js +235 -0
  22. package/lib/preview/PdfPreview.js.map +1 -0
  23. package/lib/preview/PdfPreview.test.d.ts +1 -0
  24. package/lib/preview/PdfPreview.test.js +718 -0
  25. package/lib/preview/PdfPreview.test.js.map +1 -0
  26. package/lib/preview/PreviewCriteriaAlternativeContent.d.ts +12 -0
  27. package/lib/preview/PreviewCriteriaAlternativeContent.js +72 -0
  28. package/lib/preview/PreviewCriteriaAlternativeContent.js.map +1 -0
  29. package/lib/preview/PreviewManager.d.ts +13 -0
  30. package/lib/preview/PreviewManager.js +102 -0
  31. package/lib/preview/PreviewManager.js.map +1 -0
  32. package/lib/preview/PreviewManager.test.d.ts +1 -0
  33. package/lib/preview/PreviewManager.test.js +162 -0
  34. package/lib/preview/PreviewManager.test.js.map +1 -0
  35. package/lib/preview/PreviewWrapper.d.ts +9 -0
  36. package/lib/preview/PreviewWrapper.js +42 -0
  37. package/lib/preview/PreviewWrapper.js.map +1 -0
  38. package/lib/preview/PreviewWrapper.test.d.ts +1 -0
  39. package/lib/preview/PreviewWrapper.test.js +85 -0
  40. package/lib/preview/PreviewWrapper.test.js.map +1 -0
  41. package/lib/preview/constants.d.ts +1 -0
  42. package/lib/preview/constants.js +10 -0
  43. package/lib/preview/constants.js.map +1 -0
  44. package/lib/utils/test-utils.d.ts +20 -0
  45. package/lib/utils/test-utils.js +86 -0
  46. package/lib/utils/test-utils.js.map +1 -0
  47. package/lib/utils/utils.d.ts +3 -0
  48. package/lib/utils/utils.js +8 -0
  49. package/lib/utils/utils.js.map +1 -0
  50. package/lib-esm/index.d.ts +6 -0
  51. package/{src/index.ts → lib-esm/index.js} +1 -1
  52. package/lib-esm/index.js.map +1 -0
  53. package/lib-esm/preview/FocusWithin.d.ts +7 -0
  54. package/lib-esm/preview/FocusWithin.js +59 -0
  55. package/lib-esm/preview/FocusWithin.js.map +1 -0
  56. package/lib-esm/preview/Header.d.ts +29 -0
  57. package/lib-esm/preview/Header.js +39 -0
  58. package/lib-esm/preview/Header.js.map +1 -0
  59. package/lib-esm/preview/Header.test.d.ts +1 -0
  60. package/lib-esm/preview/Header.test.js +138 -0
  61. package/lib-esm/preview/Header.test.js.map +1 -0
  62. package/lib-esm/preview/ImagePreview.d.ts +42 -0
  63. package/lib-esm/preview/ImagePreview.js +87 -0
  64. package/lib-esm/preview/ImagePreview.js.map +1 -0
  65. package/lib-esm/preview/ImagePreview.test.d.ts +1 -0
  66. package/lib-esm/preview/ImagePreview.test.js +156 -0
  67. package/lib-esm/preview/ImagePreview.test.js.map +1 -0
  68. package/lib-esm/preview/PdfPreview.d.ts +63 -0
  69. package/lib-esm/preview/PdfPreview.js +206 -0
  70. package/lib-esm/preview/PdfPreview.js.map +1 -0
  71. package/lib-esm/preview/PdfPreview.test.d.ts +1 -0
  72. package/lib-esm/preview/PdfPreview.test.js +713 -0
  73. package/lib-esm/preview/PdfPreview.test.js.map +1 -0
  74. package/lib-esm/preview/PreviewCriteriaAlternativeContent.d.ts +12 -0
  75. package/lib-esm/preview/PreviewCriteriaAlternativeContent.js +42 -0
  76. package/lib-esm/preview/PreviewCriteriaAlternativeContent.js.map +1 -0
  77. package/lib-esm/preview/PreviewManager.d.ts +13 -0
  78. package/lib-esm/preview/PreviewManager.js +75 -0
  79. package/lib-esm/preview/PreviewManager.js.map +1 -0
  80. package/lib-esm/preview/PreviewManager.test.d.ts +1 -0
  81. package/lib-esm/preview/PreviewManager.test.js +137 -0
  82. package/lib-esm/preview/PreviewManager.test.js.map +1 -0
  83. package/lib-esm/preview/PreviewWrapper.d.ts +9 -0
  84. package/lib-esm/preview/PreviewWrapper.js +36 -0
  85. package/lib-esm/preview/PreviewWrapper.js.map +1 -0
  86. package/lib-esm/preview/PreviewWrapper.test.d.ts +1 -0
  87. package/lib-esm/preview/PreviewWrapper.test.js +80 -0
  88. package/lib-esm/preview/PreviewWrapper.test.js.map +1 -0
  89. package/lib-esm/preview/constants.d.ts +1 -0
  90. package/{src/utils.ts → lib-esm/preview/constants.js} +2 -2
  91. package/lib-esm/preview/constants.js.map +1 -0
  92. package/lib-esm/utils/test-utils.d.ts +20 -0
  93. package/lib-esm/utils/test-utils.js +55 -0
  94. package/lib-esm/utils/test-utils.js.map +1 -0
  95. package/lib-esm/utils/utils.d.ts +3 -0
  96. package/{src/types/carbonio-design-system.d.ts → lib-esm/utils/utils.js} +2 -2
  97. package/lib-esm/utils/utils.js.map +1 -0
  98. package/package.json +49 -20
  99. package/babel.config.js +0 -13
  100. package/src/preview/ContainerWithGap.tsx +0 -11
  101. package/src/preview/FocusWithin.tsx +0 -76
  102. package/src/preview/Header.tsx +0 -122
  103. package/src/preview/ImagePreview.tsx +0 -194
  104. package/src/preview/PdfPreview.tsx +0 -398
  105. package/src/preview/PreviewCriteriaAlternativeContent.tsx +0 -94
  106. package/src/preview/PreviewManager.tsx +0 -75
  107. package/src/preview/PreviewWrapper.tsx +0 -20
@@ -0,0 +1,86 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.loadPDF = exports.setup = void 0;
41
+ /*
42
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
43
+ *
44
+ * SPDX-License-Identifier: AGPL-3.0-only
45
+ */
46
+ var react_1 = __importDefault(require("react"));
47
+ var react_2 = require("@testing-library/react");
48
+ var user_event_1 = __importDefault(require("@testing-library/user-event"));
49
+ var carbonio_design_system_1 = require("@zextras/carbonio-design-system");
50
+ var fs = __importStar(require("fs"));
51
+ var ProvidersWrapper = function (_a) {
52
+ var children = _a.children;
53
+ return (react_1.default.createElement(carbonio_design_system_1.ThemeProvider, null, children));
54
+ };
55
+ function customRender(ui, options) {
56
+ return (0, react_2.render)(ui, __assign({ wrapper: ProvidersWrapper }, options));
57
+ }
58
+ function setup(ui, options) {
59
+ return __assign({ user: user_event_1.default.setup(__assign({ advanceTimers: jest.advanceTimersByTime }, options === null || options === void 0 ? void 0 : options.setupOptions)) }, customRender(ui, options === null || options === void 0 ? void 0 : options.renderOptions));
60
+ }
61
+ exports.setup = setup;
62
+ /*
63
+ * Copied from https://github.com/wojtekmaj/react-pdf/blob/main/test-utils.js
64
+ */
65
+ var loadPDF = function (path) {
66
+ var raw = fs.readFileSync(path);
67
+ var arrayBuffer = raw.buffer;
68
+ return {
69
+ raw: raw,
70
+ arrayBuffer: arrayBuffer,
71
+ get blob() {
72
+ return new Blob([arrayBuffer], { type: 'application/pdf' });
73
+ },
74
+ get data() {
75
+ return new Uint8Array(raw);
76
+ },
77
+ get dataURI() {
78
+ return "data:application/pdf;base64,".concat(raw.toString('base64'));
79
+ },
80
+ get file() {
81
+ return new File([arrayBuffer], 'test.pdf', { type: 'application/pdf' });
82
+ }
83
+ };
84
+ };
85
+ exports.loadPDF = loadPDF;
86
+ //# sourceMappingURL=test-utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"test-utils.js","sourceRoot":"","sources":["../../src/utils/test-utils.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;GAIG;AACH,gDAA0B;AAE1B,gDAA6E;AAC7E,2EAAoD;AACpD,0EAAgE;AAChE,qCAAyB;AAMzB,IAAM,gBAAgB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IAA2C,OAAA,CAC9E,8BAAC,sCAAa,QAAE,QAAQ,CAAiB,CACzC;AAF8E,CAE9E,CAAC;AAEF,SAAS,YAAY,CACpB,EAAsB,EACtB,OAAwC;IAExC,OAAO,IAAA,cAAM,EAAC,EAAE,aACf,OAAO,EAAE,gBAAgB,IACtB,OAAO,EACT,CAAC;AACJ,CAAC;AAED,SAAgB,KAAK,CACpB,EAAsC,EACtC,OAGC;IAED,kBACC,IAAI,EAAE,oBAAS,CAAC,KAAK,YAAG,aAAa,EAAE,IAAI,CAAC,mBAAmB,IAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,EAAG,IACzF,YAAY,CAAC,EAAE,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,EAC1C;AACH,CAAC;AAXD,sBAWC;AAED;;GAEG;AACI,IAAM,OAAO,GAAG,UACtB,IAAY;IASZ,IAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAClC,IAAM,WAAW,GAAG,GAAG,CAAC,MAAM,CAAC;IAE/B,OAAO;QACN,GAAG,KAAA;QACH,WAAW,aAAA;QACX,IAAI,IAAI;YACP,OAAO,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAC;QAC7D,CAAC;QACD,IAAI,IAAI;YACP,OAAO,IAAI,UAAU,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC;QACD,IAAI,OAAO;YACV,OAAO,sCAA+B,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAE,CAAC;QAChE,CAAC;QACD,IAAI,IAAI;YACP,OAAO,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAC;QACzE,CAAC;KACD,CAAC;AACH,CAAC,CAAC;AA7BW,QAAA,OAAO,WA6BlB"}
@@ -0,0 +1,3 @@
1
+ export declare type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
2
+ [SubKey in K]?: T[SubKey];
3
+ };
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ /*
3
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
4
+ *
5
+ * SPDX-License-Identifier: AGPL-3.0-only
6
+ */
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":";AAAA;;;;GAIG"}
@@ -0,0 +1,6 @@
1
+ /** Base components */
2
+ export * from './preview/ImagePreview';
3
+ export * from './preview/PdfPreview';
4
+ /** Utils */
5
+ export * from './preview/PreviewManager';
6
+ export * from './preview/PreviewWrapper';
@@ -3,10 +3,10 @@
3
3
  *
4
4
  * SPDX-License-Identifier: AGPL-3.0-only
5
5
  */
6
-
7
6
  /** Base components */
8
7
  export * from './preview/ImagePreview';
9
8
  export * from './preview/PdfPreview';
10
9
  /** Utils */
11
10
  export * from './preview/PreviewManager';
12
11
  export * from './preview/PreviewWrapper';
12
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,sBAAsB;AACtB,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,YAAY;AACZ,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ interface FocusContainerProps {
3
+ returnFocus?: boolean;
4
+ children: React.ReactChild | React.ReactChildren;
5
+ }
6
+ declare const FocusWithin: ({ children, returnFocus }: FocusContainerProps) => JSX.Element;
7
+ export default FocusWithin;
@@ -0,0 +1,59 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
6
+ /*
7
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
8
+ *
9
+ * SPDX-License-Identifier: AGPL-3.0-only
10
+ */
11
+ import React, { useCallback, useEffect, useRef } from 'react';
12
+ import last from 'lodash/last';
13
+ import styled from 'styled-components';
14
+ var FocusContainer = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\toutline: none;\n\t& > * {\n\t\toutline: none;\n\t}\n"], ["\n\toutline: none;\n\t& > * {\n\t\toutline: none;\n\t}\n"])));
15
+ var FocusWithin = function (_a) {
16
+ var children = _a.children, _b = _a.returnFocus, returnFocus = _b === void 0 ? true : _b;
17
+ var contentRef = useRef(null);
18
+ var startSentinelRef = useRef(null);
19
+ var endSentinelRef = useRef(null);
20
+ var onStartSentinelFocus = useCallback(function () {
21
+ if (contentRef.current) {
22
+ var node = last(contentRef.current.querySelectorAll('[tabindex]'));
23
+ node && node.focus();
24
+ }
25
+ }, []);
26
+ var onEndSentinelFocus = useCallback(function () {
27
+ if (contentRef.current) {
28
+ var node = contentRef.current.querySelector('[tabindex]');
29
+ node && node.focus();
30
+ }
31
+ }, []);
32
+ useEffect(function () {
33
+ var _a;
34
+ var documentElement = ((_a = window.top) === null || _a === void 0 ? void 0 : _a.document) || document;
35
+ var focusedElement = documentElement.activeElement;
36
+ contentRef.current && contentRef.current.focus();
37
+ startSentinelRef.current &&
38
+ startSentinelRef.current.addEventListener('focus', onStartSentinelFocus);
39
+ endSentinelRef.current && endSentinelRef.current.addEventListener('focus', onEndSentinelFocus);
40
+ var startSentinelRefSave = startSentinelRef.current;
41
+ var endSentinelRefSave = endSentinelRef.current;
42
+ return function () {
43
+ startSentinelRefSave &&
44
+ startSentinelRefSave.removeEventListener('focus', onStartSentinelFocus);
45
+ endSentinelRefSave && endSentinelRefSave.removeEventListener('focus', onEndSentinelFocus);
46
+ // return focus to previous initial element
47
+ if (focusedElement && returnFocus) {
48
+ focusedElement.focus();
49
+ }
50
+ };
51
+ }, [onStartSentinelFocus, onEndSentinelFocus, returnFocus]);
52
+ return (React.createElement(FocusContainer, null,
53
+ React.createElement("span", { tabIndex: 0, ref: startSentinelRef }),
54
+ React.createElement("div", { tabIndex: -1, ref: contentRef }, children),
55
+ React.createElement("span", { tabIndex: 0, ref: endSentinelRef })));
56
+ };
57
+ export default FocusWithin;
58
+ var templateObject_1;
59
+ //# sourceMappingURL=FocusWithin.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FocusWithin.js","sourceRoot":"","sources":["../../src/preview/FocusWithin.tsx"],"names":[],"mappings":";;;;AAAA,wDAAwD;AACxD;;;;GAIG;AACH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,IAAM,cAAc,GAAG,MAAM,CAAC,IAAI,6HAAA,0DAKjC,IAAA,CAAC;AAOF,IAAM,WAAW,GAAG,UAAC,EAAqD;QAAnD,QAAQ,cAAA,EAAE,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA;IAClD,IAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,IAAM,gBAAgB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC7D,IAAM,cAAc,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAE3D,IAAM,oBAAoB,GAAG,WAAW,CAAC;QACxC,IAAI,UAAU,CAAC,OAAO,EAAE;YACvB,IAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAc,YAAY,CAAC,CAAC,CAAC;YAClF,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;SACrB;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,kBAAkB,GAAG,WAAW,CAAC;QACtC,IAAI,UAAU,CAAC,OAAO,EAAE;YACvB,IAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAc,YAAY,CAAC,CAAC;YACzE,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;SACrB;IACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC;;QACT,IAAM,eAAe,GAAG,CAAA,MAAA,MAAM,CAAC,GAAG,0CAAE,QAAQ,KAAI,QAAQ,CAAC;QACzD,IAAM,cAAc,GAAG,eAAe,CAAC,aAA4B,CAAC;QAEpE,UAAU,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACjD,gBAAgB,CAAC,OAAO;YACvB,gBAAgB,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;QAC1E,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC/F,IAAM,oBAAoB,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACtD,IAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,CAAC;QAElD,OAAO;YACN,oBAAoB;gBACnB,oBAAoB,CAAC,mBAAmB,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC;YACzE,kBAAkB,IAAI,kBAAkB,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;YAC1F,2CAA2C;YAC3C,IAAI,cAAc,IAAI,WAAW,EAAE;gBAClC,cAAc,CAAC,KAAK,EAAE,CAAC;aACvB;QACF,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5D,OAAO,CACN,oBAAC,cAAc;QACd,8BAAM,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,gBAAgB,GAAI;QAC5C,6BAAK,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,IAChC,QAAQ,CACJ;QACN,8BAAM,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,cAAc,GAAI,CAC1B,CACjB,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { Tooltip } from '@zextras/carbonio-design-system';
3
+ export interface HeaderAction {
4
+ /** id used as key */
5
+ id: string;
6
+ /** Action called on click */
7
+ onClick: (ev: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
8
+ /** Icon from the theme */
9
+ icon: string;
10
+ /** Label to show as tooltip for the action */
11
+ tooltipLabel?: string;
12
+ tooltipPlacement?: React.ComponentPropsWithRef<typeof Tooltip>['placement'];
13
+ /** Disabled status for the action */
14
+ disabled?: boolean;
15
+ }
16
+ export interface HeaderProps {
17
+ /** Left Action for the preview */
18
+ closeAction?: HeaderAction;
19
+ /** Actions for the preview */
20
+ actions: HeaderAction[];
21
+ /** Extension of the file, shown as info */
22
+ extension: string;
23
+ /** Name of the file, shown as info */
24
+ filename: string;
25
+ /** Size of the file, shown as info */
26
+ size: string;
27
+ }
28
+ declare const Header: React.VFC<HeaderProps>;
29
+ export default Header;
@@ -0,0 +1,39 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ /*
6
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
7
+ *
8
+ * SPDX-License-Identifier: AGPL-3.0-only
9
+ */
10
+ import React from 'react';
11
+ import { IconButton, Text, Tooltip } from '@zextras/carbonio-design-system';
12
+ import map from 'lodash/map';
13
+ import styled from 'styled-components';
14
+ var HeaderContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tpadding: 16px;\n"], ["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tpadding: 16px;\n"])));
15
+ var LeftContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 8px;\n"], ["\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 8px;\n"])));
16
+ var RightContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tgap: 8px;\n"], ["\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tgap: 8px;\n"])));
17
+ var InfoContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\twidth: fit-content;\n\t& div {\n\t\tline-height: 1.5;\n\t}\n"], ["\n\twidth: fit-content;\n\t& div {\n\t\tline-height: 1.5;\n\t}\n"])));
18
+ var UpperCaseText = styled(Text)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\ttext-transform: uppercase;\n"], ["\n\ttext-transform: uppercase;\n"])));
19
+ var Header = function (_a) {
20
+ var closeAction = _a.closeAction, actions = _a.actions, filename = _a.filename, extension = _a.extension, size = _a.size;
21
+ return (React.createElement(HeaderContainer, null,
22
+ React.createElement(LeftContainer, null,
23
+ closeAction && (React.createElement(Tooltip, { label: closeAction.tooltipLabel, disabled: !closeAction.tooltipLabel, key: closeAction.id, placement: closeAction.tooltipPlacement },
24
+ React.createElement(IconButton, { onClick: closeAction.onClick, icon: closeAction.icon, size: "medium", backgroundColor: "transparent", iconColor: "gray6" }))),
25
+ React.createElement(InfoContainer, null,
26
+ React.createElement(Text, { size: "small", color: "gray6" }, filename),
27
+ React.createElement(UpperCaseText, { size: "small", color: "gray6" },
28
+ extension,
29
+ extension && size && React.createElement(React.Fragment, null, " \u00B7 "),
30
+ size))),
31
+ React.createElement(RightContainer, null, map(actions, function (_a) {
32
+ var id = _a.id, onClick = _a.onClick, disabled = _a.disabled, icon = _a.icon, tooltipLabel = _a.tooltipLabel, tooltipPlacement = _a.tooltipPlacement;
33
+ return (React.createElement(Tooltip, { label: tooltipLabel, disabled: !tooltipLabel, key: id, placement: tooltipPlacement },
34
+ React.createElement(IconButton, { onClick: onClick, disabled: disabled, icon: icon, size: "medium", backgroundColor: "transparent", iconColor: "gray6" })));
35
+ }))));
36
+ };
37
+ export default Header;
38
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
39
+ //# sourceMappingURL=Header.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/preview/Header.tsx"],"names":[],"mappings":";;;;AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,8IAAA,2EAIjC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,8JAAA,2FAK/B,IAAA,CAAC;AAEF,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,4JAAA,yFAKhC,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,qIAAA,kEAK/B,IAAA,CAAC;AAEF,IAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,qGAAA,kCAEjC,IAAA,CAAC;AA6BF,IAAM,MAAM,GAA2B,UAAC,EAAmD;QAAjD,WAAW,iBAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA;IAAO,OAAA,CAC/F,oBAAC,eAAe;QACf,oBAAC,aAAa;YACZ,WAAW,IAAI,CACf,oBAAC,OAAO,IACP,KAAK,EAAE,WAAW,CAAC,YAAY,EAC/B,QAAQ,EAAE,CAAC,WAAW,CAAC,YAAY,EACnC,GAAG,EAAE,WAAW,CAAC,EAAE,EACnB,SAAS,EAAE,WAAW,CAAC,gBAAgB;gBAEvC,oBAAC,UAAU,IACV,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,IAAI,EAAE,WAAW,CAAC,IAAI,EACtB,IAAI,EAAC,QAAQ,EACb,eAAe,EAAC,aAAa,EAC7B,SAAS,EAAC,OAAO,GAChB,CACO,CACV;YACD,oBAAC,aAAa;gBACb,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,IAC9B,QAAQ,CACH;gBACP,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO;oBACvC,SAAS;oBACT,SAAS,IAAI,IAAI,IAAI,qDAAe;oBACpC,IAAI,CACU,CACD,CACD;QAChB,oBAAC,cAAc,QACb,GAAG,CAAC,OAAO,EAAE,UAAC,EAA+D;gBAA7D,EAAE,QAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAA,EAAE,gBAAgB,sBAAA;YAAO,OAAA,CAClF,oBAAC,OAAO,IACP,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,YAAY,EACvB,GAAG,EAAE,EAAE,EACP,SAAS,EAAE,gBAAgB;gBAE3B,oBAAC,UAAU,IACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACb,eAAe,EAAC,aAAa,EAC7B,SAAS,EAAC,OAAO,GAChB,CACO,CACV;QAhBkF,CAgBlF,CAAC,CACc,CACA,CAClB;AAlD+F,CAkD/F,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,138 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ var __generator = (this && this.__generator) || function (thisArg, body) {
11
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
12
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
13
+ function verb(n) { return function (v) { return step([n, v]); }; }
14
+ function step(op) {
15
+ if (f) throw new TypeError("Generator is already executing.");
16
+ while (_) try {
17
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
18
+ if (y = 0, t) op = [op[0] & 2, t.value];
19
+ switch (op[0]) {
20
+ case 0: case 1: t = op; break;
21
+ case 4: _.label++; return { value: op[1], done: false };
22
+ case 5: _.label++; y = op[1]; op = [0]; continue;
23
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
24
+ default:
25
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
26
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
27
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
28
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
29
+ if (t[2]) _.ops.pop();
30
+ _.trys.pop(); continue;
31
+ }
32
+ op = body.call(thisArg, _);
33
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
34
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
35
+ }
36
+ };
37
+ /*
38
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
39
+ *
40
+ * SPDX-License-Identifier: AGPL-3.0-only
41
+ */
42
+ import React from 'react';
43
+ import { screen } from '@testing-library/react';
44
+ import { setup } from '../utils/test-utils';
45
+ import Header from './Header';
46
+ describe('Header', function () {
47
+ test('Render a header with all information', function () {
48
+ var actions = [
49
+ {
50
+ id: 'action1',
51
+ icon: 'ActivityOutline',
52
+ onClick: jest.fn()
53
+ }
54
+ ];
55
+ var closeAction = {
56
+ id: 'closeAction',
57
+ icon: 'CloseOutline',
58
+ onClick: jest.fn()
59
+ };
60
+ setup(React.createElement(Header, { actions: actions, extension: "ext", filename: "some file name", size: "85 GB", closeAction: closeAction }));
61
+ expect(screen.getByText(/some file name/i)).toBeVisible();
62
+ expect(screen.getByText(/ext/i)).toBeVisible();
63
+ expect(screen.getByText(/85 GB/i)).toBeVisible();
64
+ expect(screen.getByTestId('icon: ActivityOutline')).toBeVisible();
65
+ expect(screen.getByTestId('icon: CloseOutline')).toBeVisible();
66
+ });
67
+ test('Tooltip is shown for actions when provided', function () { return __awaiter(void 0, void 0, void 0, function () {
68
+ var actions, closeAction, user, action1, action2, action3, actionClose;
69
+ return __generator(this, function (_a) {
70
+ switch (_a.label) {
71
+ case 0:
72
+ actions = [
73
+ {
74
+ id: 'action1',
75
+ icon: 'ActivityOutline',
76
+ onClick: jest.fn(),
77
+ tooltipLabel: 'Activity One'
78
+ },
79
+ {
80
+ id: 'action2',
81
+ icon: 'PeopleOutline',
82
+ onClick: jest.fn(),
83
+ tooltipLabel: ''
84
+ },
85
+ {
86
+ id: 'action3',
87
+ icon: 'Airplane',
88
+ onClick: jest.fn(),
89
+ disabled: true,
90
+ tooltipLabel: 'Airplane tooltip action'
91
+ }
92
+ ];
93
+ closeAction = {
94
+ id: 'closeAction',
95
+ icon: 'CloseOutline',
96
+ onClick: jest.fn(),
97
+ tooltipLabel: 'Close'
98
+ };
99
+ user = setup(React.createElement(Header, { actions: actions, extension: "ext", filename: "some file name", size: "85 GB", closeAction: closeAction })).user;
100
+ action1 = screen.getByTestId("icon: ".concat(actions[0].icon));
101
+ action2 = screen.getByTestId("icon: ".concat(actions[1].icon));
102
+ action3 = screen.getByTestId("icon: ".concat(actions[2].icon));
103
+ actionClose = screen.getByTestId("icon: ".concat(closeAction.icon));
104
+ // register listeners
105
+ jest.runOnlyPendingTimers();
106
+ expect(screen.queryByText(/activity one/i)).not.toBeInTheDocument();
107
+ return [4 /*yield*/, user.hover(action1)];
108
+ case 1:
109
+ _a.sent();
110
+ return [4 /*yield*/, screen.findByText(/activity one/i)];
111
+ case 2:
112
+ _a.sent();
113
+ expect(screen.getByText(/activity one/i)).toBeVisible();
114
+ return [4 /*yield*/, user.hover(action2)];
115
+ case 3:
116
+ _a.sent();
117
+ expect(screen.queryByText(/activity one/i)).not.toBeInTheDocument();
118
+ return [4 /*yield*/, user.hover(action3)];
119
+ case 4:
120
+ _a.sent();
121
+ return [4 /*yield*/, screen.findByText(/airplane tooltip action/i)];
122
+ case 5:
123
+ _a.sent();
124
+ expect(screen.getByText(/airplane tooltip action/i)).toBeVisible();
125
+ return [4 /*yield*/, user.hover(actionClose)];
126
+ case 6:
127
+ _a.sent();
128
+ return [4 /*yield*/, screen.findByText(/close/i)];
129
+ case 7:
130
+ _a.sent();
131
+ expect(screen.queryByText(/airplane tooltip action/i)).not.toBeInTheDocument();
132
+ expect(screen.getByText(/close/i)).toBeVisible();
133
+ return [2 /*return*/];
134
+ }
135
+ });
136
+ }); });
137
+ });
138
+ //# sourceMappingURL=Header.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.test.js","sourceRoot":"","sources":["../../src/preview/Header.test.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,42 @@
1
+ import React from 'react';
2
+ import { MakeOptional } from '../utils/utils';
3
+ import { HeaderAction, HeaderProps } from './Header';
4
+ declare type ImagePreviewProps = Partial<Omit<HeaderProps, 'closeAction'>> & {
5
+ /** Left Action for the preview */
6
+ closeAction?: MakeOptional<HeaderAction, 'onClick'>;
7
+ /**
8
+ * HTML node where to insert the Portal's children.
9
+ * The default value is 'window.top.document'.
10
+ * */
11
+ container?: Element;
12
+ /** Flag to disable the Portal implementation */
13
+ disablePortal?: boolean;
14
+ /** Flag to show or hide Portal's content */
15
+ show: boolean;
16
+ /** preview img source */
17
+ src: string;
18
+ /** Callback to hide the preview */
19
+ onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
20
+ /** Alternative text for image */
21
+ alt?: string;
22
+ };
23
+ declare const ImagePreview: React.ForwardRefExoticComponent<Partial<Omit<HeaderProps, "closeAction">> & {
24
+ /** Left Action for the preview */
25
+ closeAction?: MakeOptional<HeaderAction, "onClick"> | undefined;
26
+ /**
27
+ * HTML node where to insert the Portal's children.
28
+ * The default value is 'window.top.document'.
29
+ * */
30
+ container?: Element | undefined;
31
+ /** Flag to disable the Portal implementation */
32
+ disablePortal?: boolean | undefined;
33
+ /** Flag to show or hide Portal's content */
34
+ show: boolean;
35
+ /** preview img source */
36
+ src: string;
37
+ /** Callback to hide the preview */
38
+ onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
39
+ /** Alternative text for image */
40
+ alt?: string | undefined;
41
+ } & React.RefAttributes<HTMLDivElement>>;
42
+ export { ImagePreview, ImagePreviewProps };
@@ -0,0 +1,87 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ var __assign = (this && this.__assign) || function () {
6
+ __assign = Object.assign || function(t) {
7
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
8
+ s = arguments[i];
9
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
10
+ t[p] = s[p];
11
+ }
12
+ return t;
13
+ };
14
+ return __assign.apply(this, arguments);
15
+ };
16
+ /*
17
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
18
+ *
19
+ * SPDX-License-Identifier: AGPL-3.0-only
20
+ */
21
+ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
22
+ import { Container, Portal, useCombinedRefs } from '@zextras/carbonio-design-system';
23
+ import styled from 'styled-components';
24
+ import FocusWithin from './FocusWithin';
25
+ import Header from './Header';
26
+ var Overlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\theight: 100vh;\n\tmax-height: 100vh;\n\twidth: 100%;\n\tmax-width: 100%;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tz-index: 1003;\n"], ["\n\theight: 100vh;\n\tmax-height: 100vh;\n\twidth: 100%;\n\tmax-width: 100%;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.8);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tz-index: 1003;\n"])));
27
+ var ExternalContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\theight: 100vh;\n\tmax-height: 100vh;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tdisplay: flex;\n\tflex-direction: column;\n\tposition: relative;\n"], ["\n\theight: 100vh;\n\tmax-height: 100vh;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tdisplay: flex;\n\tflex-direction: column;\n\tposition: relative;\n"])));
28
+ var MiddleContainer = styled(Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tflex-grow: 1;\n"], ["\n\tflex-grow: 1;\n"])));
29
+ var Image = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tmax-height: 100%;\n\tmax-width: 100%;\n\tmin-height: 0;\n\tmin-width: 0;\n\talign-self: center;\n\tfilter: drop-shadow(0px 5px 14px rgba(0, 0, 0, 0.35));\n\tborder-radius: 4px;\n"], ["\n\tmax-height: 100%;\n\tmax-width: 100%;\n\tmin-height: 0;\n\tmin-width: 0;\n\talign-self: center;\n\tfilter: drop-shadow(0px 5px 14px rgba(0, 0, 0, 0.35));\n\tborder-radius: 4px;\n"])));
30
+ var PreviewContainer = styled.div.attrs({
31
+ $paddingVertical: '32px',
32
+ $paddingHorizontal: '16px',
33
+ $gap: '8px'
34
+ })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tdisplay: flex;\n\tmax-width: 100%;\n\tmax-height: calc(100vh - ", " * 2);\n\tflex-direction: column;\n\tgap: ", ";\n\tjustify-content: center;\n\talign-items: center;\n\toverflow: hidden;\n\tpadding: ", ";\n\toutline: none;\n\tflex-grow: 1;\n"], ["\n\tdisplay: flex;\n\tmax-width: 100%;\n\tmax-height: calc(100vh - ", " * 2);\n\tflex-direction: column;\n\tgap: ", ";\n\tjustify-content: center;\n\talign-items: center;\n\toverflow: hidden;\n\tpadding: ", ";\n\toutline: none;\n\tflex-grow: 1;\n"])), function (_a) {
35
+ var $paddingVertical = _a.$paddingVertical;
36
+ return $paddingVertical;
37
+ }, function (_a) {
38
+ var $gap = _a.$gap;
39
+ return $gap;
40
+ }, function (_a) {
41
+ var $paddingVertical = _a.$paddingVertical, $paddingHorizontal = _a.$paddingHorizontal;
42
+ return "".concat($paddingVertical, " ").concat($paddingHorizontal);
43
+ });
44
+ var ImagePreview = React.forwardRef(function PreviewFn(_a, ref) {
45
+ var src = _a.src, show = _a.show, container = _a.container, disablePortal = _a.disablePortal, _b = _a.extension, extension = _b === void 0 ? '' : _b, _c = _a.filename, filename = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? '' : _d, _e = _a.actions, actions = _e === void 0 ? [] : _e, closeAction = _a.closeAction, onClose = _a.onClose, alt = _a.alt;
46
+ var previewRef = useCombinedRefs(ref);
47
+ var imageRef = useRef(null);
48
+ var $closeAction = useMemo(function () {
49
+ if (closeAction) {
50
+ return __assign({ onClick: onClose }, closeAction);
51
+ }
52
+ return closeAction;
53
+ }, [closeAction, onClose]);
54
+ var escapeEvent = useCallback(function (event) {
55
+ if (event.key === 'Escape') {
56
+ onClose(event);
57
+ }
58
+ }, [onClose]);
59
+ useEffect(function () {
60
+ if (show) {
61
+ document.addEventListener('keyup', escapeEvent);
62
+ }
63
+ return function () {
64
+ document.removeEventListener('keyup', escapeEvent);
65
+ };
66
+ }, [escapeEvent, show]);
67
+ var onOverlayClick = useCallback(function (event) {
68
+ // TODO: stop propagation or not?
69
+ event.stopPropagation();
70
+ previewRef.current &&
71
+ !event.isDefaultPrevented() &&
72
+ (previewRef.current === event.target ||
73
+ !previewRef.current.contains(event.target)) &&
74
+ onClose(event);
75
+ }, [onClose, previewRef]);
76
+ return (React.createElement(Portal, { show: show, disablePortal: disablePortal, container: container },
77
+ React.createElement(Overlay, { onClick: onOverlayClick },
78
+ React.createElement(FocusWithin, null,
79
+ React.createElement(ExternalContainer, null,
80
+ React.createElement(Header, { actions: actions, filename: filename, extension: extension, size: size, closeAction: $closeAction }),
81
+ React.createElement(MiddleContainer, { orientation: "horizontal", crossAlignment: "unset", minHeight: 0 },
82
+ React.createElement(PreviewContainer, { ref: previewRef },
83
+ React.createElement(Image, { alt: alt !== null && alt !== void 0 ? alt : filename, src: src, onError: function (error) { return console.error('TODO handle error', error); }, ref: imageRef }))))))));
84
+ });
85
+ export { ImagePreview };
86
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
87
+ //# sourceMappingURL=ImagePreview.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../src/preview/ImagePreview.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1 @@
1
+ export {};