@tap-payments/os-micro-frontend-shared 0.1.109-test.5 → 0.1.109-test.7

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.
@@ -1,2 +1,2 @@
1
1
  import { ReceiptViewerProps } from './type';
2
- export default function ReceiptViewer({ index, json, requestJson, isWindowMinimized, windowOrder, onClose }: ReceiptViewerProps): import("react/jsx-runtime").JSX.Element;
2
+ export default function ReceiptViewer({ index, isWindowMinimized, windowOrder, onClose }: ReceiptViewerProps): import("react/jsx-runtime").JSX.Element;
@@ -1,27 +1,22 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect, useMemo, useRef, useState } from 'react';
2
+ import { useEffect, useRef, useState } from 'react';
3
3
  import { Box, Dialog } from '@mui/material';
4
- import { motion } from 'framer-motion';
4
+ import { motion, } from 'framer-motion';
5
5
  import { Resizable } from 're-resizable';
6
6
  import Draggable from 'react-draggable';
7
7
  import { APP_WINDOW_Z_INDEX } from '../../constants/index.js';
8
8
  import { useMouseState, useWindowDimensions } from '../../hooks/index.js';
9
9
  import { isSafariBrowser } from '../../utils/index.js';
10
10
  import JSONTitleBar from './components/ReceiptTitleBar';
11
- import { FooterWrapper, JSONContainer, TITLE_BAR_HEIGHT, VIEWER_HEIGHT, FOOTER_HEIGHT, } from './style';
11
+ import { JSONContainer, TITLE_BAR_HEIGHT, VIEWER_HEIGHT, FOOTER_HEIGHT, } from './style';
12
12
  const VIEWER_WIDTH = 400;
13
13
  const animationDuration = 0.5;
14
- export default function ReceiptViewer({ index, json, requestJson = {}, isWindowMinimized, windowOrder, onClose }) {
14
+ export default function ReceiptViewer({ index, isWindowMinimized, windowOrder, onClose }) {
15
15
  var _a, _b, _c, _d;
16
16
  const [isMaximized, setIsMaximized] = useState(false);
17
17
  const [isResized, setIsResized] = useState(false);
18
- const [isResponseCollapsed, setIsResponseCollapsed] = useState(true);
19
- const [isScrollingResponse, setIsScrollingResponse] = useState(false);
20
18
  const [newDimensions, setNewDimensions] = useState({ width: 0, height: 0 });
21
19
  const [isToolbarAnimationDisabled, setIsToolbarAnimationDisabled] = useState(true);
22
- const [isRequestShown, setIsRequestShown] = useState(false);
23
- const [isRequestCollapsed, setIsRequestCollapsed] = useState(true);
24
- const [isScrollingRequest, setIsScrollingRequest] = useState(false);
25
20
  const [viewerWidth, setViewerWidth] = useState(VIEWER_WIDTH);
26
21
  const requestTimerRef = useRef();
27
22
  const { onMouseEnter, onMouseLeave, isHovered } = useMouseState();
@@ -31,33 +26,14 @@ export default function ReceiptViewer({ index, json, requestJson = {}, isWindowM
31
26
  y: height / 2 - VIEWER_HEIGHT / 2 + index * 30,
32
27
  });
33
28
  const resizableRef = useRef();
34
- const objectPropertiesCount = useMemo(() => {
35
- var _a;
36
- return (_a = Object.keys(json)) === null || _a === void 0 ? void 0 : _a.length;
37
- }, [json]);
38
29
  const isSafari = isSafariBrowser();
39
30
  const currentRequestWidth = Number((_b = (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.width) || VIEWER_WIDTH;
40
- const onCopied = (text) => {
41
- setTimeout(() => {
42
- navigator.clipboard.writeText(text || '').then(() => { });
43
- }, 10);
44
- };
45
- const requestObjectPropertiesCount = useMemo(() => {
46
- var _a;
47
- return (_a = Object.keys(requestJson)) === null || _a === void 0 ? void 0 : _a.length;
48
- }, [requestJson]);
49
31
  useEffect(() => {
50
32
  if (requestTimerRef.current) {
51
33
  clearTimeout(requestTimerRef.current);
52
34
  }
53
- if (!isRequestShown) {
54
- requestTimerRef.current = setTimeout(() => {
55
- setViewerWidth(currentRequestWidth);
56
- }, animationDuration * 1000);
57
- return;
58
- }
59
35
  setViewerWidth(currentRequestWidth);
60
- }, [isRequestShown, currentRequestWidth]);
36
+ }, [currentRequestWidth]);
61
37
  return (_jsx(Draggable, Object.assign({ disabled: isMaximized, handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', defaultPosition: {
62
38
  x: width / 2 - VIEWER_WIDTH / 4,
63
39
  y: height / 2 - VIEWER_HEIGHT / 2,
@@ -119,29 +95,19 @@ export default function ReceiptViewer({ index, json, requestJson = {}, isWindowM
119
95
  height: TITLE_BAR_HEIGHT,
120
96
  position: 'fixed',
121
97
  zIndex: 1000,
122
- })), animate: Object.assign(Object.assign({ width: isRequestShown ? currentRequestWidth * 2 : currentRequestWidth }, (isMaximized && {
98
+ })), animate: Object.assign(Object.assign({ width: currentRequestWidth }, (isMaximized && {
123
99
  width: '100vw',
124
100
  })), (!isMaximized && {
125
- transform: `translateX(${isRequestShown ? -currentRequestWidth : 0}px)`,
101
+ transform: 'translateX(0)',
126
102
  })), transition: Object.assign({ duration: animationDuration }, (isToolbarAnimationDisabled && {
127
103
  duration: 0,
128
- })) }, { children: _jsx(JSONTitleBar, { title: isRequestShown ? 'JSON Request & Response' : 'JSON Response', onClose: () => onClose(), onMaximize: () => {
104
+ })) }, { children: _jsx(JSONTitleBar, { title: "Receipt", onClose: () => onClose(), onMaximize: () => {
129
105
  setIsMaximized((prev) => !prev);
130
106
  setIsToolbarAnimationDisabled(true);
131
107
  setTimeout(() => {
132
108
  setIsToolbarAnimationDisabled(false);
133
109
  }, animationDuration * 1000);
134
- }, isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "draggable-dialog-title", onRequestClick: () => {
135
- var _a;
136
- setIsRequestShown((prev) => !prev);
137
- setIsToolbarAnimationDisabled(false);
138
- if (!isRequestShown) {
139
- (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({
140
- width: VIEWER_WIDTH,
141
- height: VIEWER_HEIGHT,
142
- });
143
- }
144
- }, isRequestExpanded: isRequestShown, showRequestIcon: Boolean(requestObjectPropertiesCount) }) })), _jsxs(Box, Object.assign({ sx: {
110
+ }, isHovered: isHovered, onMouseHover: onMouseEnter, onMouseLeave: onMouseLeave, maximized: isMaximized, id: "draggable-dialog-title" }) })), _jsx(Box, Object.assign({ sx: {
145
111
  display: 'flex',
146
112
  flexDirection: 'row',
147
113
  justifyContent: 'space-between',
@@ -152,8 +118,5 @@ export default function ReceiptViewer({ index, json, requestJson = {}, isWindowM
152
118
  background: 'transparent',
153
119
  position: 'fixed',
154
120
  width: '100%',
155
- } }, { children: ["Here new Content", _jsx(FooterWrapper, { sx: {
156
- flex: 1,
157
- height: FOOTER_HEIGHT,
158
- } })] }))] }) })) })) })));
121
+ } }, { children: _jsx(Box, Object.assign({ sx: (theme) => ({ background: theme.palette.common.white, width: '100%', height: '100%' }) }, { children: "Here new Content" })) }))] }) })) })) })));
159
122
  }
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { ReceiptTitleBarProps } from './type';
3
- declare function ReceiptTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded, showRequestIcon, isHovered, }: ReceiptTitleBarProps): import("react/jsx-runtime").JSX.Element;
3
+ declare function ReceiptTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, isHovered }: ReceiptTitleBarProps): import("react/jsx-runtime").JSX.Element;
4
4
  declare const _default: import("react").MemoExoticComponent<typeof ReceiptTitleBar>;
5
5
  export default _default;
@@ -1,9 +1,9 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { memo } from 'react';
3
3
  import Toolbar, { StyledHeaderWrapperStyled } from '../../../Toolbar';
4
- import { CloseIcon, ExpandButton, MaximizeIcon } from '../../../ToolbarIcon';
4
+ import { CloseIcon, MaximizeIcon } from '../../../ToolbarIcon';
5
5
  import { jsonIcon } from '../../../../constants/index.js';
6
- function ReceiptTitleBar({ title, onClose, onMaximize, maximized = false, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded = false, showRequestIcon = false, isHovered = false, }) {
7
- return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
6
+ function ReceiptTitleBar({ title, onClose, onMaximize, maximized = false, id, onMouseHover, onMouseLeave, isHovered = false }) {
7
+ return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize })] }) }) })));
8
8
  }
9
9
  export default memo(ReceiptTitleBar);
@@ -5,10 +5,7 @@ export interface ReceiptTitleBarProps {
5
5
  onMaximize?: (e: SyntheticEvent) => void;
6
6
  maximized?: boolean;
7
7
  id?: string;
8
- onRequestClick?: (e: SyntheticEvent) => void;
9
- isRequestExpanded?: boolean;
10
8
  onMouseHover: (e: SyntheticEvent) => void;
11
9
  onMouseLeave: (e: SyntheticEvent) => void;
12
- showRequestIcon?: boolean;
13
10
  isHovered?: boolean;
14
11
  }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.109-test.5",
5
- "testVersion": 5,
4
+ "version": "0.1.109-test.7",
5
+ "testVersion": 7,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",