oa-componentbook 1.0.1-stage.384 → 1.0.1-stage.386
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.
- package/build/components/oa-component-accordion/Accordion.js +5 -3
- package/build/components/oa-component-table/CustomTableV1.js +87 -10
- package/build/components/oa-component-table/stylesV1.js +2 -2
- package/build/widgets/oa-widget-approval/ApprovalWidget.js +1 -0
- package/build/widgets/oa-widget-key-value/KeyValueWidget.js +7 -3
- package/build/widgets/oa-widget-key-value/styles.js +1 -1
- package/build/widgets/oa-widget-notes/NotesWidget.js +3 -2
- package/build/widgets/oa-widget-notes/styles.js +5 -3
- package/package.json +1 -1
|
@@ -31,7 +31,7 @@ function CollapseIcon(_ref) {
|
|
|
31
31
|
function renderCustomBody(customBody, onActionClick) {
|
|
32
32
|
if (!customBody || !customBody.items) return null;
|
|
33
33
|
return customBody.items.map((item, index) => {
|
|
34
|
-
var _item$dataConfig;
|
|
34
|
+
var _item$dataConfig, _item$dataConfig2, _item$dataConfig3, _item$dataConfig4;
|
|
35
35
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
36
36
|
key: index,
|
|
37
37
|
className: "custom-body-item"
|
|
@@ -43,11 +43,13 @@ function renderCustomBody(customBody, onActionClick) {
|
|
|
43
43
|
}, item.heading.label)), item.dataConfig && item.dataConfig.type === "keyvalue" && /*#__PURE__*/_react.default.createElement("div", {
|
|
44
44
|
className: "custom-body-content"
|
|
45
45
|
}, /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
|
|
46
|
-
|
|
46
|
+
fullWidth: item === null || item === void 0 || (_item$dataConfig = item.dataConfig) === null || _item$dataConfig === void 0 ? void 0 : _item$dataConfig.fullWidth,
|
|
47
|
+
columnLayout: item === null || item === void 0 || (_item$dataConfig2 = item.dataConfig) === null || _item$dataConfig2 === void 0 ? void 0 : _item$dataConfig2.columnLayout,
|
|
48
|
+
data: item === null || item === void 0 || (_item$dataConfig3 = item.dataConfig) === null || _item$dataConfig3 === void 0 ? void 0 : _item$dataConfig3.data,
|
|
47
49
|
customClassName: "gst-details-keyvalue"
|
|
48
50
|
})), item.dataConfig && item.dataConfig.type === "titleSubtitle" && /*#__PURE__*/_react.default.createElement("div", {
|
|
49
51
|
className: "custom-body-content-titleSubtitle"
|
|
50
|
-
}, (item === null || item === void 0 || (_item$
|
|
52
|
+
}, (item === null || item === void 0 || (_item$dataConfig4 = item.dataConfig) === null || _item$dataConfig4 === void 0 || (_item$dataConfig4 = _item$dataConfig4.data) === null || _item$dataConfig4 === void 0 ? void 0 : _item$dataConfig4.length) > 0 && item.dataConfig.data.map((field, index) => /*#__PURE__*/_react.default.createElement("div", {
|
|
51
53
|
key: index,
|
|
52
54
|
className: "title-subtitle-item"
|
|
53
55
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
});
|
|
9
9
|
exports.default = void 0;
|
|
10
10
|
require("core-js/modules/web.dom-collections.iterator.js");
|
|
11
|
+
require("core-js/modules/es.json.stringify.js");
|
|
12
|
+
require("core-js/modules/es.array.sort.js");
|
|
11
13
|
require("core-js/modules/es.array.reduce.js");
|
|
12
14
|
require("core-js/modules/es.array.includes.js");
|
|
13
15
|
require("core-js/modules/es.string.includes.js");
|
|
@@ -29,8 +31,9 @@ var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/Materi
|
|
|
29
31
|
var _CustomDropdown = _interopRequireDefault(require("../oa-component-dropdown/CustomDropdown"));
|
|
30
32
|
var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
|
|
31
33
|
var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
|
|
34
|
+
var _checkbox = _interopRequireDefault(require("antd/lib/checkbox"));
|
|
32
35
|
const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "ellipsisConfig", "multiItemConfig", "defaultCardShow", "setConfig", "customTableChange", "selectedRows", "onMobilePageChange", "emptyStateCard"],
|
|
33
|
-
_excluded2 = ["title", "dataIndex", "jsxConfig", "render", "ellipsisConfig", "multiItemConfig"];
|
|
36
|
+
_excluded2 = ["title", "dataIndex", "jsxConfig", "render", "ellipsisConfig", "multiItemConfig", "filterDropdown", "filterDropdownProps", "filters"];
|
|
34
37
|
/* eslint-disable */
|
|
35
38
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
36
39
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -43,7 +46,69 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
|
|
|
43
46
|
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
44
47
|
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; }
|
|
45
48
|
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; }
|
|
46
|
-
|
|
49
|
+
// Custom Filter Dropdown Component
|
|
50
|
+
const CustomFilterDropdown = _ref => {
|
|
51
|
+
let {
|
|
52
|
+
setSelectedKeys,
|
|
53
|
+
selectedKeys,
|
|
54
|
+
confirm,
|
|
55
|
+
clearFilters,
|
|
56
|
+
filters,
|
|
57
|
+
filterDropdownProps
|
|
58
|
+
} = _ref;
|
|
59
|
+
// Initialize with empty array - local state should start clean
|
|
60
|
+
const [localSelectedKeys, setLocalSelectedKeys] = (0, _react.useState)([]);
|
|
61
|
+
|
|
62
|
+
// Update local state when selectedKeys prop changes (when filters are applied)
|
|
63
|
+
(0, _react.useEffect)(() => {
|
|
64
|
+
// Only update if selectedKeys actually changed (when filters are applied)
|
|
65
|
+
setLocalSelectedKeys(selectedKeys || []);
|
|
66
|
+
}, [selectedKeys]);
|
|
67
|
+
const handleFilterChange = checkedValues => {
|
|
68
|
+
setLocalSelectedKeys(checkedValues);
|
|
69
|
+
};
|
|
70
|
+
const handleFilterConfirm = () => {
|
|
71
|
+
setSelectedKeys(localSelectedKeys);
|
|
72
|
+
confirm();
|
|
73
|
+
};
|
|
74
|
+
const handleFilterReset = () => {
|
|
75
|
+
// Clear the local state
|
|
76
|
+
setLocalSelectedKeys([]);
|
|
77
|
+
// Clear the applied filters
|
|
78
|
+
setSelectedKeys([]);
|
|
79
|
+
// Clear filters and close popup
|
|
80
|
+
clearFilters();
|
|
81
|
+
// Confirm the changes to close the popup
|
|
82
|
+
confirm();
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
// Check if current local state is different from applied state
|
|
86
|
+
const hasChanges = JSON.stringify([...localSelectedKeys].sort()) !== JSON.stringify([...(selectedKeys || [])].sort());
|
|
87
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
88
|
+
className: "statusBox"
|
|
89
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
90
|
+
color: "secondary-content",
|
|
91
|
+
className: "type-sl1-700"
|
|
92
|
+
}, filterDropdownProps.filterTitle || "FILTER"), /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
|
|
93
|
+
options: filters.map(filter => ({
|
|
94
|
+
label: filter.text,
|
|
95
|
+
value: filter.value
|
|
96
|
+
})),
|
|
97
|
+
value: localSelectedKeys,
|
|
98
|
+
onChange: handleFilterChange
|
|
99
|
+
}), /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
100
|
+
type: "secondary",
|
|
101
|
+
onClick: handleFilterReset,
|
|
102
|
+
size: "small",
|
|
103
|
+
label: filterDropdownProps.filterReset || "Clear All"
|
|
104
|
+
}), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
105
|
+
onClick: handleFilterConfirm,
|
|
106
|
+
size: "small",
|
|
107
|
+
disabled: !hasChanges,
|
|
108
|
+
label: filterDropdownProps.filterConfirm || "Submit"
|
|
109
|
+
})));
|
|
110
|
+
};
|
|
111
|
+
function CustomTableV1(_ref2) {
|
|
47
112
|
let {
|
|
48
113
|
columns,
|
|
49
114
|
dataSource,
|
|
@@ -61,10 +126,9 @@ function CustomTableV1(_ref) {
|
|
|
61
126
|
selectedRows = [],
|
|
62
127
|
onMobilePageChange,
|
|
63
128
|
emptyStateCard
|
|
64
|
-
} =
|
|
65
|
-
antDesignProps = _objectWithoutProperties(
|
|
129
|
+
} = _ref2,
|
|
130
|
+
antDesignProps = _objectWithoutProperties(_ref2, _excluded);
|
|
66
131
|
// State to manage card vs table view and expanded cards
|
|
67
|
-
|
|
68
132
|
const [viewMore, setViewMore] = (0, _react.useState)([]);
|
|
69
133
|
const [ctaColumnsSorted, setCtaColumnsSorted] = (0, _react.useState)(null);
|
|
70
134
|
const [cardShow, setCardShow] = (0, _react.useState)(false);
|
|
@@ -88,7 +152,6 @@ function CustomTableV1(_ref) {
|
|
|
88
152
|
return isSelected;
|
|
89
153
|
};
|
|
90
154
|
|
|
91
|
-
// Process columns: wrap titles in Typography, handle jsxConfig and custom renderers
|
|
92
155
|
// Process columns: wrap titles in Typography, handle jsxConfig and custom renderers
|
|
93
156
|
const finalColumns = (0, _react.useMemo)(() => {
|
|
94
157
|
// Check if any column has non-array filters (like '{{branchDetails}}')
|
|
@@ -107,12 +170,22 @@ function CustomTableV1(_ref) {
|
|
|
107
170
|
jsxConfig,
|
|
108
171
|
render: userRender,
|
|
109
172
|
ellipsisConfig: colEllipsisConfig,
|
|
110
|
-
multiItemConfig: colMultiItemConfig
|
|
173
|
+
multiItemConfig: colMultiItemConfig,
|
|
174
|
+
filterDropdown,
|
|
175
|
+
filterDropdownProps,
|
|
176
|
+
filters
|
|
111
177
|
} = col,
|
|
112
178
|
rest = _objectWithoutProperties(col, _excluded2);
|
|
113
179
|
const titleNode = (0, _utils.isString)(title) || (0, _utils.isNumber)(title) ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
114
180
|
typography: "type-sl1-700"
|
|
115
181
|
}, title) : title;
|
|
182
|
+
let finalFilterDropdown = filterDropdown;
|
|
183
|
+
if (filterDropdownProps && filters && Array.isArray(filters)) {
|
|
184
|
+
finalFilterDropdown = props => /*#__PURE__*/_react.default.createElement(CustomFilterDropdown, _extends({}, props, {
|
|
185
|
+
filters: filters,
|
|
186
|
+
filterDropdownProps: filterDropdownProps
|
|
187
|
+
}));
|
|
188
|
+
}
|
|
116
189
|
|
|
117
190
|
// Handle jsxConfig for columns - now supports array
|
|
118
191
|
if (jsxConfig) {
|
|
@@ -246,6 +319,8 @@ function CustomTableV1(_ref) {
|
|
|
246
319
|
isCTA: !hasCustomRenderers,
|
|
247
320
|
position,
|
|
248
321
|
render: ctaRender
|
|
322
|
+
}, finalFilterDropdown && {
|
|
323
|
+
filterDropdown: finalFilterDropdown
|
|
249
324
|
});
|
|
250
325
|
}
|
|
251
326
|
|
|
@@ -271,9 +346,12 @@ function CustomTableV1(_ref) {
|
|
|
271
346
|
enabled: false
|
|
272
347
|
});
|
|
273
348
|
}
|
|
274
|
-
return _objectSpread(_objectSpread({}, rest), {}, {
|
|
349
|
+
return _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
|
|
275
350
|
dataIndex,
|
|
276
|
-
title: titleNode
|
|
351
|
+
title: titleNode
|
|
352
|
+
}, finalFilterDropdown && {
|
|
353
|
+
filterDropdown: finalFilterDropdown
|
|
354
|
+
}), {}, {
|
|
277
355
|
render: (value, record) => {
|
|
278
356
|
let items = [];
|
|
279
357
|
if (Array.isArray(value)) {
|
|
@@ -372,7 +450,6 @@ function CustomTableV1(_ref) {
|
|
|
372
450
|
};
|
|
373
451
|
|
|
374
452
|
// Helper to get cell content (uses column render or dataIndex)
|
|
375
|
-
// Updated getContentToBeRender to handle array dataIndex
|
|
376
453
|
const getContentToBeRender = (col, row) => {
|
|
377
454
|
if (typeof col.render === "function") {
|
|
378
455
|
const value = Array.isArray(col.dataIndex) ? getByPath(row, col.dataIndex.join(".")) : col.dataIndex ? row[col.dataIndex] : undefined;
|
|
@@ -14,6 +14,6 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
14
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
16
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
|
-
const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-dropdown .ant-table-filter-dropdown .ant-dropdown-menu
|
|
17
|
+
const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-dropdown .ant-table-filter-dropdown .ant-dropdown-menu {padding: 0; top: 0;}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {border-radius: 0; padding: 12px !important;}\n.ant-dropdown .ant-table-filter-dropdown {border-radius: 8px;background: #FFF;box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n.ant-dropdown .ant-table-filter-dropdown .ant-table-filter-dropdown-btns {padding: 12px; border: none;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link, .ant-dropdown .ant-table-filter-dropdown .ant-btn-primary {border-radius: 4px; min-width: 100px; padding: 7px 16px;\n border: 1px solid #014FC5; height: auto;text-align: center;font-size: 14px;font-style: normal;font-weight: 500;line-height: 20px; }\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link {color: #014FC5; background: #fff;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-primary {background: #014FC5; color: #fff;}\n.ant-checkbox .ant-checkbox-inner {width: 18px; height: 18px; border: 1px solid #717171; border-radius: 2px;}\n.ant-checkbox-checked .ant-checkbox-inner {background-color: #014FC5; border-color: #014FC5;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-primary:hover {background:#82a9e2; border: 1px solid #82a9e2;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link:hover {border: 1px solid #82a9e2; color: #82a9e2;}\n.ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected >.ant-table-cell {background: #DEF1FB;}\n.ant-table-wrapper .ant-table-pagination.ant-pagination {\n padding: 16px; margin: 0;\n border-top: solid 1px #E0E0E0;\n}\n\n/* Custom filter dropdown styles */\n.statusBox {\n padding: 20px 12px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.statusBox .ant-checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.statusBox aside {\n display: flex;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 0 0;\n}\n\n.statusBox aside button {\n width: 100% !important;\n}\n\n.statusBox .type-sl1-700 {\n margin-bottom: 0;\n color: var(--color-secondary-content);\n font-weight: 700;\n font-size: 14px;\n line-height: 20px;\n}\n"])));
|
|
18
18
|
const StyledTable = exports.StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n tr > td {\n vertical-align: top;\n }\n .ant-table-row:last-child td {\n border: none;\n }\n .ant-table-row .ant-table-cell,\n .ant-table-thead .ant-table-cell {\n padding: 16px !important;\n }\n .ant-table-measure-row > td {\n padding: 0 !important;\n }\n"])));
|
|
19
|
-
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .fullWidthBtn button {\n width: 100%;\n }\n .fullWidthBtn {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #fff;\n padding: 16px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n .secondary:hover {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n .cardStyles {\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n margin: 0 0 24px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n\n .srDetails .srValue span {\n white-space: break-spaces;\n}\n\n .showHideBtn {\n padding: 8px 0 16px;\n }\n .keyValue {\n display: flex;\n gap: 12px;\n margin: 0 0 16px;\n }\n .keyValue:last-child {\n margin: 0;\n }\n .keyValue strong,\n .keyValue span {\n width: 100%;\n }\n .keyValue strong {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .keyValue span {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .srDetails {\n padding: 0 0 12px;\n margin: 0 0 16px;\n border-bottom: 1px solid var(--color-divider);\n }\n\n .srDetails > span {\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: flex-start;\n white-space: nowrap;\n }\n\n .srDetails .ctaContainer{display: flex;\n gap: 8px;\n align-items: center;\n word-break: break-word;\n white-space: normal
|
|
19
|
+
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .fullWidthBtn button {\n width: 100%;\n }\n .fullWidthBtn {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #fff;\n padding: 16px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n .secondary:hover {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n .cardStyles {\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n margin: 0 0 24px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n\n .srDetails .srValue span {\n white-space: break-spaces;\n }\n\n .showHideBtn {\n padding: 8px 0 16px;\n }\n .keyValue {\n display: flex;\n gap: 12px;\n margin: 0 0 16px;\n }\n .keyValue:last-child {\n margin: 0;\n }\n .keyValue strong,\n .keyValue span {\n width: 100%;\n }\n .keyValue strong {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .keyValue span {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .srDetails {\n padding: 0 0 12px;\n margin: 0 0 16px;\n border-bottom: 1px solid var(--color-divider);\n }\n\n .srDetails > span {\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: flex-start;\n white-space: nowrap;\n }\n\n .srDetails .ctaContainer {\n display: flex;\n gap: 8px;\n align-items: center;\n word-break: break-word;\n white-space: normal;\n }\n\n .srDetails > span > div {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .srDetails > span > .type-sl1-700 {\n font-size: initial;\n }\n .footerCta {\n display: flex;\n justify-content: end;\n gap: 16px;\n padding: 16px 0 0 0;\n border-top: 1px solid var(--color-divider);\n width: 100%;\n align-items: center;\n }\n\n .footerCta .ant-dropdown-trigger {\n margin-bottom: 0;\n }\n\n .flexEnd {\n display: flex;\n justify-content: end;\n margin: 0 0 12px;\n }\n\n @media only screen and (max-width: 600px) {\n .keyValue span {\n word-break: break-word;\n overflow-wrap: break-word;\n }\n .keyValue strong {\n word-break: break-word;\n overflow-wrap: break-word;\n }\n .mobileViewPagination {\n display: flex;\n justify-content: flex-end;\n margin: 16px 0px;\n }\n\n .mobileViewPagination .ant-pagination {\n padding: 0;\n }\n }\n"])));
|
|
@@ -17,6 +17,7 @@ var _CustomRadio = _interopRequireDefault(require("../../components/oa-component
|
|
|
17
17
|
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
18
18
|
var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
|
|
19
19
|
const _excluded = ["children", "description", "docDetails", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "data-test", "maxLength"];
|
|
20
|
+
/* eslint-disable */
|
|
20
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
22
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -20,6 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
20
20
|
* @param {Object} props.data - An object containing key-value pairs to be displayed.
|
|
21
21
|
* @param {Array<number>} [props.columnLayout] - An array defining the number of items per column.
|
|
22
22
|
* @param {Object} [props.info] - An object containing information about a key-value pair.
|
|
23
|
+
* @param {boolean} [props.fullWidth] - If true, uses 30%/70% width distribution, otherwise uses previous layout.
|
|
23
24
|
*
|
|
24
25
|
* @returns {JSX.Element} A component that renders key-value pairs in a grid layout.
|
|
25
26
|
*/
|
|
@@ -29,7 +30,8 @@ function KeyValueDataView(_ref) {
|
|
|
29
30
|
columnLayout,
|
|
30
31
|
info,
|
|
31
32
|
tagStatus,
|
|
32
|
-
customClassName
|
|
33
|
+
customClassName,
|
|
34
|
+
fullWidth = false
|
|
33
35
|
} = _ref;
|
|
34
36
|
let actualColumnLayout = [];
|
|
35
37
|
if (columnLayout.length === 0) {
|
|
@@ -50,7 +52,7 @@ function KeyValueDataView(_ref) {
|
|
|
50
52
|
}, Object.entries(data).splice(entryIdx, element).map(_ref2 => {
|
|
51
53
|
let [key, value] = _ref2;
|
|
52
54
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
-
className: "valuestyle",
|
|
55
|
+
className: "valuestyle ".concat(fullWidth ? "full-width" : null),
|
|
54
56
|
key: (0, _utils.getUUID)()
|
|
55
57
|
}, (info === null || info === void 0 ? void 0 : info.infoKey) === key ? /*#__PURE__*/_react.default.createElement("b", {
|
|
56
58
|
className: "type-b2-400"
|
|
@@ -101,7 +103,9 @@ KeyValueDataView.propTypes = {
|
|
|
101
103
|
label: _propTypes.default.string,
|
|
102
104
|
size: _propTypes.default.string
|
|
103
105
|
})
|
|
104
|
-
})
|
|
106
|
+
}),
|
|
107
|
+
customClassName: _propTypes.default.string,
|
|
108
|
+
fullWidth: _propTypes.default.bool
|
|
105
109
|
};
|
|
106
110
|
KeyValueDataView.defaultProps = {
|
|
107
111
|
columnLayout: [],
|
|
@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueWidgetStyles.js
|
|
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 KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child {\n padding: 0;\n }\n \n .valuestyle {\n display: flex;\n gap: 16px;\n padding: 0 0 8px;\n }\n\n .valuestyle b {\n width: 38.734%;\n font-style: normal;\n color: var(--color-primary-content); \n }\n\n .valuestyle span {\n width: 180px;\n word-wrap: break-word;\n font-style: normal;\n color: var(--color-secondary-content); }\n\n .valuestyle span + span{\n color: var(--color-primary-content);\n font-size: 14px;\n padding: 0 4px 0 0;\n }\n"])));
|
|
11
|
+
const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child {\n padding: 0;\n }\n \n .valuestyle {\n display: flex;\n gap: 16px;\n padding: 0 0 8px;\n }\n\n .valuestyle b {\n width: 38.734%;\n font-style: normal;\n color: var(--color-primary-content); \n }\n\n .valuestyle span {\n width: 180px;\n word-wrap: break-word;\n font-style: normal;\n color: var(--color-secondary-content); }\n\n .valuestyle span + span{\n color: var(--color-primary-content);\n font-size: 14px;\n padding: 0 4px 0 0;\n }\n\n /* Add these CSS rules for full-width */\n .valuestyle.full-width {\n display: flex;\n gap: 16px;\n padding: 0 0 8px;\n }\n\n .valuestyle.full-width b {\n width: 30%;\n }\n\n .valuestyle.full-width span {\n width: 100%;\n }\n\n"])));
|
|
12
12
|
const KeyValueGroups = exports.KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n.container-fluid{\n width: 100%;\n padding: 0 16px;\n}\n.row {\n display: flex;\n flex-direction: column;\n}\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n}\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n .col-sm-7 {\n width: 58.33333%;\n }\n .col-sm-8 {\n width: 66.66667%;\n }\n .col-sm-9 {\n width: 75%;\n }\n .col-sm-10 {\n width: 83.33333%;\n }\n .col-sm-11 {\n width: 91.66667%;\n }\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n .col-md-2 {\n width: 16.66667%;\n }\n .col-md-3 {\n width: 25%;\n }\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n\n}\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter{\n padding: 0 24px 0 0;\n }\n .col-lg-1 {\n width: 8.33333%;\n }\n .col-lg-2 {\n width: 16.66667%;\n }\n .col-lg-3 {\n width: 25%;\n float: left;\n }\n .col-lg-4 {\n width: 33.33333%;\n float: left;\n }\n .col-lg-5 {\n width: 41.66667%;\n }\n .col-lg-6 {\n width: 50%;\n }\n .col-lg-7 {\n width: 58.33333%;\n }\n .col-lg-8 {\n width: 66.66667%;\n }\n .col-lg-9 {\n width: 75%;\n }\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .gutter{\n padding: 0 32px 0 0;\n }\n .col-xl-1 {\n width: 8.33333%;\n }\n\n \n}\n@media (max-width: 767px) {\n .gutter{\n padding: 0;\n }\n}\n"])));
|
|
13
13
|
const StyledBold = exports.StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--color-primary-content);\n font-weight: 400;\n"])));
|
|
14
14
|
const StyledSpan = exports.StyledSpan = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n /* vertical-align: bottom; */\n color: var(--color-secondary-content);\n font-weight: 400;\n word-break: break-word;\n"])));
|
|
@@ -14,6 +14,7 @@ var _CustomTable = _interopRequireDefault(require("../../components/oa-component
|
|
|
14
14
|
var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
|
|
15
15
|
var _styles = require("./styles");
|
|
16
16
|
const _excluded = ["data-test", "disabled", "records", "tableBorder", "onBlur", "extraColumnData"];
|
|
17
|
+
/* eslint-disable */
|
|
17
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
19
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -105,7 +106,7 @@ function NotesWidget(_ref) {
|
|
|
105
106
|
borderRadius: tableBorder ? '4px' : '0'
|
|
106
107
|
// visibility: (!(records.length > 0) && disabled) ? 'hidden' : undefined,
|
|
107
108
|
};
|
|
108
|
-
return /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
|
|
109
|
+
return /*#__PURE__*/_react.default.createElement(_styles.NotesTable, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
|
|
109
110
|
style: tableStyle,
|
|
110
111
|
columns: columns,
|
|
111
112
|
dataSource: mutatedRecords,
|
|
@@ -113,7 +114,7 @@ function NotesWidget(_ref) {
|
|
|
113
114
|
size: "small",
|
|
114
115
|
emptyText: "No Notes Available",
|
|
115
116
|
tableBorder: tableBorder
|
|
116
|
-
}, antDesignTableProps));
|
|
117
|
+
}, antDesignTableProps)));
|
|
117
118
|
}
|
|
118
119
|
NotesWidget.propTypes = {
|
|
119
120
|
'data-test': _propTypes.default.string,
|
|
@@ -3,10 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.NoNotesMessage = void 0;
|
|
6
|
+
exports.default = exports.NotesTable = exports.NoNotesMessage = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
8
|
+
var _templateObject, _templateObject2;
|
|
9
|
+
/* eslint-disable */
|
|
9
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
11
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
12
|
var _default = exports.default = {};
|
|
12
|
-
const NoNotesMessage = exports.NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n input{\n height: 30px;\n }\n"])));
|
|
13
|
+
const NoNotesMessage = exports.NoNotesMessage = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n input{\n height: 30px;\n }\n"])));
|
|
14
|
+
const NotesTable = exports.NotesTable = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ntable{\n width: auto !important;\n }\n"])));
|