oa-componentbook 0.18.352 → 0.18.354
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.
|
@@ -11,6 +11,7 @@ require("react-pdf/dist/esm/Page/AnnotationLayer.css");
|
|
|
11
11
|
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
12
12
|
var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
|
|
13
13
|
var _CustomDocumentViewer = _interopRequireDefault(require("../oa-component-document-viewer/CustomDocumentViewer"));
|
|
14
|
+
var _CustomTabs = _interopRequireDefault(require("../../components/oa-component-tabs/CustomTabs"));
|
|
14
15
|
var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
|
|
15
16
|
var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
|
|
16
17
|
var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
|
|
@@ -24,6 +25,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
24
25
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
26
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
26
27
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
28
|
+
/**
|
|
29
|
+
* DocumentSideDrawer Component
|
|
30
|
+
*
|
|
31
|
+
* A side drawer component that displays documents with optional metadata.
|
|
32
|
+
* Supports both single document (backward compatibility) and multiple documents (new feature).
|
|
33
|
+
*
|
|
34
|
+
* @param {Object} props - Component props
|
|
35
|
+
* @param {string} props.title - Drawer title
|
|
36
|
+
* @param {Function} props.handleCloseDrawer - Function to close the drawer
|
|
37
|
+
* @param {Object|Array} props.documentConfig - Single document config or array of document configs
|
|
38
|
+
* @param {string} props.drawerWidth - Custom drawer width
|
|
39
|
+
* @param {Object} props.drawerButtonConfig - Button configuration for the drawer
|
|
40
|
+
* @param {Object} props.drawerTagConfig - Tag configuration (heading, tag, viewDetails)
|
|
41
|
+
* @param {boolean} props.onlyDocumentView - Whether to show only document viewer
|
|
42
|
+
* @param {React.ReactNode} props.children - Additional content to render
|
|
43
|
+
*/
|
|
27
44
|
function DocumentSideDrawer(_ref) {
|
|
28
45
|
var _drawerTagConfig$view;
|
|
29
46
|
let {
|
|
@@ -38,6 +55,83 @@ function DocumentSideDrawer(_ref) {
|
|
|
38
55
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
39
56
|
// Calculate the drawer width based on documentConfig or fallback to 480
|
|
40
57
|
const calculatedWidth = drawerWidth !== null && drawerWidth !== void 0 ? drawerWidth : documentConfig ? 1200 : 480;
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Determines if documentConfig contains multiple documents
|
|
61
|
+
* @returns {boolean} True if documentConfig is an array with multiple items
|
|
62
|
+
*/
|
|
63
|
+
const isMultipleDocuments = Array.isArray(documentConfig) && documentConfig.length > 1;
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Renders the document viewer(s) based on configuration
|
|
67
|
+
* @returns {React.ReactNode} Document viewer component(s)
|
|
68
|
+
*/
|
|
69
|
+
const renderDocumentViewer = () => {
|
|
70
|
+
if (!documentConfig) return null;
|
|
71
|
+
|
|
72
|
+
// Handle multiple documents with tabs
|
|
73
|
+
if (isMultipleDocuments) {
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement(_CustomTabs.default, {
|
|
75
|
+
data: {
|
|
76
|
+
tabs: documentConfig.map((doc, index) => ({
|
|
77
|
+
body: /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, _extends({}, doc, {
|
|
78
|
+
onlyDocumentView: onlyDocumentView
|
|
79
|
+
})),
|
|
80
|
+
key: String(index + 1),
|
|
81
|
+
label: doc.label || "Document ".concat(index + 1)
|
|
82
|
+
}))
|
|
83
|
+
},
|
|
84
|
+
"data-test": "tabs",
|
|
85
|
+
type: "card"
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Handle single document (backward compatibility)
|
|
90
|
+
const singleDocument = Array.isArray(documentConfig) ? documentConfig[0] : documentConfig;
|
|
91
|
+
return /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, _extends({}, singleDocument, {
|
|
92
|
+
onlyDocumentView: onlyDocumentView
|
|
93
|
+
}));
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Renders the tooltip content for view details
|
|
98
|
+
* @param {Array} items - Array of detail items
|
|
99
|
+
* @param {string} title - Tooltip title
|
|
100
|
+
* @returns {React.ReactNode} Tooltip content
|
|
101
|
+
*
|
|
102
|
+
*/
|
|
103
|
+
|
|
104
|
+
const renderTooltipContent = (items, title) => {
|
|
105
|
+
const totalItems = (items === null || items === void 0 ? void 0 : items.length) || 0;
|
|
106
|
+
if (totalItems === 0) return null;
|
|
107
|
+
const numColumns = totalItems === 1 ? 1 : 2;
|
|
108
|
+
const col1Size = Math.ceil(totalItems / numColumns);
|
|
109
|
+
const col2Size = totalItems - col1Size;
|
|
110
|
+
const columns = [items.slice(0, col1Size),
|
|
111
|
+
// First column
|
|
112
|
+
items.slice(col1Size) // Second column
|
|
113
|
+
];
|
|
114
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
115
|
+
typography: "type-sl1-700",
|
|
116
|
+
color: "secondary-content"
|
|
117
|
+
}, title), /*#__PURE__*/_react.default.createElement("div", {
|
|
118
|
+
className: "tooltip-grid",
|
|
119
|
+
style: {
|
|
120
|
+
flexDirection: totalItems === 1 ? "column" : "row",
|
|
121
|
+
width: totalItems === 1 ? "100%" : "auto"
|
|
122
|
+
}
|
|
123
|
+
}, columns.map((columnItems, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
|
|
124
|
+
key: "col-".concat(colIndex),
|
|
125
|
+
className: "tooltip-column"
|
|
126
|
+
}, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
|
|
127
|
+
key: item.title,
|
|
128
|
+
className: "tooltip-item"
|
|
129
|
+
}, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
130
|
+
size: 20,
|
|
131
|
+
icon: item.type === "positive" ? _Check.default : _Close.default,
|
|
132
|
+
color: item.type === "positive" ? "positive" : "negative"
|
|
133
|
+
}), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
|
|
134
|
+
};
|
|
41
135
|
return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
|
|
42
136
|
buttonConfig: drawerButtonConfig,
|
|
43
137
|
"data-test": "document-side-drawer",
|
|
@@ -47,9 +141,7 @@ function DocumentSideDrawer(_ref) {
|
|
|
47
141
|
title: title
|
|
48
142
|
}, /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
49
143
|
className: "viewerContainer"
|
|
50
|
-
},
|
|
51
|
-
onlyDocumentView: onlyDocumentView
|
|
52
|
-
})), !onlyDocumentView && /*#__PURE__*/_react.default.createElement("div", {
|
|
144
|
+
}, renderDocumentViewer(), !onlyDocumentView && /*#__PURE__*/_react.default.createElement("div", {
|
|
53
145
|
className: "rightContSection"
|
|
54
146
|
}, drawerTagConfig && /*#__PURE__*/_react.default.createElement("div", {
|
|
55
147
|
className: "grayBoxSec"
|
|
@@ -70,38 +162,7 @@ function DocumentSideDrawer(_ref) {
|
|
|
70
162
|
overlayClassName: "multipleDocumentTooltip",
|
|
71
163
|
isDisplayed: true,
|
|
72
164
|
placement: "bottomRight",
|
|
73
|
-
title: (
|
|
74
|
-
const totalItems = (_drawerTagConfig$view2 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view2 === void 0 ? void 0 : _drawerTagConfig$view2.items.length;
|
|
75
|
-
const numColumns = totalItems === 1 ? 1 : 2; // 1 column if only 1 item, else 2 columns
|
|
76
|
-
|
|
77
|
-
const col1Size = Math.ceil(totalItems / numColumns); // First column gets extra if odd
|
|
78
|
-
const col2Size = totalItems - col1Size; // Remaining items go to second column
|
|
79
|
-
|
|
80
|
-
const columns = [(_drawerTagConfig$view3 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view3 === void 0 ? void 0 : _drawerTagConfig$view3.items.slice(0, col1Size), // First column
|
|
81
|
-
(_drawerTagConfig$view4 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view4 === void 0 ? void 0 : _drawerTagConfig$view4.items.slice(col1Size) // Second column
|
|
82
|
-
];
|
|
83
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_drawerTagConfig$view5 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view5 === void 0 ? void 0 : _drawerTagConfig$view5.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
84
|
-
typography: "type-sl1-700",
|
|
85
|
-
color: "secondary-content"
|
|
86
|
-
}, drawerTagConfig.viewDetails.title), /*#__PURE__*/_react.default.createElement("div", {
|
|
87
|
-
className: "tooltip-grid",
|
|
88
|
-
style: {
|
|
89
|
-
flexDirection: totalItems === 1 ? "column" : "row",
|
|
90
|
-
// Single column if only 1 item
|
|
91
|
-
width: totalItems === 1 ? "100%" : "auto" // Full width if only 1 item
|
|
92
|
-
}
|
|
93
|
-
}, columns.map((columnItems, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
|
|
94
|
-
key: "col-".concat(colIndex),
|
|
95
|
-
className: "tooltip-column"
|
|
96
|
-
}, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
|
|
97
|
-
key: item.title,
|
|
98
|
-
className: "tooltip-item"
|
|
99
|
-
}, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
100
|
-
size: 20,
|
|
101
|
-
icon: item.type === "positive" ? _Check.default : _Close.default,
|
|
102
|
-
color: item.type === "positive" ? "positive" : "negative"
|
|
103
|
-
}), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
|
|
104
|
-
})()
|
|
165
|
+
title: renderTooltipContent(drawerTagConfig.viewDetails.items, drawerTagConfig.viewDetails.title)
|
|
105
166
|
}, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
106
167
|
type: "text-only",
|
|
107
168
|
label: drawerTagConfig.viewDetails.label
|
|
@@ -112,15 +173,14 @@ function DocumentSideDrawer(_ref) {
|
|
|
112
173
|
DocumentSideDrawer.propTypes = {
|
|
113
174
|
title: _propTypes.default.string,
|
|
114
175
|
handleCloseDrawer: _propTypes.default.func,
|
|
115
|
-
documentConfig: _propTypes.default.object,
|
|
116
|
-
//
|
|
176
|
+
documentConfig: _propTypes.default.oneOfType([_propTypes.default.object,
|
|
177
|
+
// Single document configuration
|
|
178
|
+
_propTypes.default.arrayOf(_propTypes.default.object) // Array of document configurations
|
|
179
|
+
]),
|
|
117
180
|
drawerWidth: _propTypes.default.string,
|
|
118
|
-
// Optional custom drawer width
|
|
119
181
|
drawerButtonConfig: _propTypes.default.object,
|
|
120
|
-
// Button configuration for the drawer
|
|
121
182
|
drawerTagConfig: _propTypes.default.object,
|
|
122
|
-
|
|
123
|
-
onlyDocumentView: _propTypes.default.bool // Optional prop to render only document viewer
|
|
183
|
+
onlyDocumentView: _propTypes.default.bool
|
|
124
184
|
};
|
|
125
185
|
|
|
126
186
|
// Default props to provide fallback values for optional props
|
|
@@ -8,5 +8,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const ViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .viewerContainer > div {\n flex: 1;\n box-sizing: border-box;\n }\n .viewerContainer {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n }\n .rightContSection {\n display: flex;\n flex-direction: column;\n padding: 24px;\n }\n .grayBoxSec {\n border-radius: 8px;\n background: #f6f6f6;\n padding: 12px 16px;\n }\n .statusSec {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n .statusSec button {\n margin-left: 8px;\n }\n"])));
|
|
11
|
+
const ViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs-nav{\n margin: 0;\n}\n .ant-tabs-top>.ant-tabs-nav::before {\n border: none;\n border-right: 1px solid #E0E0E0;\n }\n .ant-tabs-content-holder .customDocumentViewerOverlayHeader{\n bottom: 60px;\n }\n .ant-tabs-tab{\n border-radius: 0px !important;\n border: none !important;\n border-bottom: 2px solid transparent !important;\n }\n .ant-tabs-tab-active{\n border-bottom: 2px solid var(--color-primary) !important;\n }\n .viewerContainer > div {\n flex: 1;\n box-sizing: border-box;\n }\n .viewerContainer {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n }\n .rightContSection {\n display: flex;\n flex-direction: column;\n padding: 24px;\n }\n .grayBoxSec {\n border-radius: 8px;\n background: #f6f6f6;\n padding: 12px 16px;\n }\n .statusSec {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n .statusSec button {\n margin-left: 8px;\n }\n"])));
|
|
12
12
|
var _default = exports.default = ViewerContainer;
|
|
@@ -833,10 +833,10 @@ function GenricLayOut(_ref) {
|
|
|
833
833
|
*
|
|
834
834
|
* If an error occurs during any action, an error notification is shown.
|
|
835
835
|
*/
|
|
836
|
-
const customTableSelectFooterClick = async
|
|
836
|
+
const customTableSelectFooterClick = async configData => {
|
|
837
837
|
var _state$modal;
|
|
838
838
|
const modalContent = state === null || state === void 0 || (_state$modal = state.modal) === null || _state$modal === void 0 ? void 0 : _state$modal.modalContent;
|
|
839
|
-
if ((
|
|
839
|
+
if ((configData === null || configData === void 0 ? void 0 : configData.action) === "OPEN_MODAL") {
|
|
840
840
|
if (handleModalDataSet) {
|
|
841
841
|
const {
|
|
842
842
|
error,
|
|
@@ -845,7 +845,7 @@ function GenricLayOut(_ref) {
|
|
|
845
845
|
if (error) {
|
|
846
846
|
showErrorNotification(error);
|
|
847
847
|
} else {
|
|
848
|
-
const updatedModalContent = (0, _staticConfigResolver.default)(modal, data);
|
|
848
|
+
const updatedModalContent = (0, _staticConfigResolver.default)(config === null || config === void 0 ? void 0 : config.modal, data);
|
|
849
849
|
dispatch({
|
|
850
850
|
type: _layoutReducer.actionTypes.SET_MODAL,
|
|
851
851
|
payload: {
|