empower-container 0.1.1 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/Asset.d.ts +1 -0
- package/dist/assets/Asset.js +5 -1
- package/dist/assets/Asset.tsx +9 -0
- package/dist/cjs/Information.js +0 -1
- package/dist/cjs/MenuBar.js +1 -1
- package/dist/cjs/assets/Asset.d.ts +1 -0
- package/dist/cjs/assets/Asset.js +2 -1
- package/dist/cjs/inputs/InputSelectionHandler.d.ts +1 -1
- package/dist/cjs/inputs/Select.js +5 -4
- package/dist/esm/Information.js +0 -1
- package/dist/esm/MenuBar.js +2 -2
- package/dist/esm/assets/Asset.d.ts +1 -0
- package/dist/esm/assets/Asset.js +1 -0
- package/dist/esm/inputs/InputSelectionHandler.d.ts +1 -1
- package/dist/esm/inputs/Select.js +5 -4
- package/package.json +1 -1
- package/src/main/Information.js +0 -1
- package/src/main/Information.tsx +0 -1
- package/src/main/MenuBar.js +3 -4
- package/src/main/MenuBar.tsx +3 -3
- package/src/main/assets/Asset.d.ts +1 -0
- package/src/main/assets/Asset.js +5 -1
- package/src/main/assets/Asset.tsx +9 -0
- package/src/main/index.d.ts +3 -0
- package/src/main/index.js +10 -0
- package/src/main/inputs/Select.js +6 -5
- package/src/main/inputs/Select.tsx +3 -2
- package/src/main/tsconfig.common.json +1 -1
- package/src/main/tsconfig.json +1 -1
- package/src/sample/TestMenuBar.js +7 -4
- package/src/sample/TestMenuBar.tsx +19 -8
package/dist/assets/Asset.d.ts
CHANGED
package/dist/assets/Asset.js
CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
-
exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
|
6
|
+
exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
|
7
7
|
var react_1 = __importDefault(require("react"));
|
8
8
|
exports.SVG_BACK = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
9
9
|
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.69612 4.29289C8.08664 4.68342 8.08664 5.31658 7.69612 5.70711L3.40323 10L7.69612 14.2929C8.08664 14.6834 8.08664 15.3166 7.69612 15.7071C7.3056 16.0976 6.67243 16.0976 6.28191 15.7071L1.28191 10.7071C0.891382 10.3166 0.891382 9.68342 1.28191 9.29289L6.28191 4.29289C6.67243 3.90237 7.3056 3.90237 7.69612 4.29289Z", fill: "#393F5A" }),
|
@@ -41,3 +41,7 @@ exports.SVG_REQUEST = react_1.default.createElement("svg", { width: "20", height
|
|
41
41
|
exports.SVG_ADD = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
42
42
|
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z", fill: "#393F5A" }),
|
43
43
|
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z", fill: "#393F5A" }));
|
44
|
+
exports.SVG_INFORMATION = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
45
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z", fill: "#393F5A" }),
|
46
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V9C9 8.44772 9.44772 8 10 8Z", fill: "#393F5A" }),
|
47
|
+
react_1.default.createElement("path", { d: "M11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6Z", fill: "#393F5A" }));
|
package/dist/assets/Asset.tsx
CHANGED
@@ -64,3 +64,12 @@ export const SVG_ADD = <svg width="20" height="20" viewBox="0 0 20 20" fill="non
|
|
64
64
|
<path fillRule="evenodd" clipRule="evenodd" d="M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z" fill="#393F5A"/>
|
65
65
|
<path fillRule="evenodd" clipRule="evenodd" d="M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z" fill="#393F5A"/>
|
66
66
|
</svg>
|
67
|
+
|
68
|
+
|
69
|
+
|
70
|
+
export const SVG_INFORMATION = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
71
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z" fill="#393F5A" />
|
72
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V9C9 8.44772 9.44772 8 10 8Z" fill="#393F5A" />
|
73
|
+
<path d="M11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6Z" fill="#393F5A" />
|
74
|
+
</svg>
|
75
|
+
|
package/dist/cjs/Information.js
CHANGED
@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
40
40
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
41
41
|
var react_1 = __importStar(require("react"));
|
42
|
-
// @ts-ignore
|
43
42
|
var react_render_html_1 = __importDefault(require("react-render-html"));
|
44
43
|
var Information = function (_a) {
|
45
44
|
var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
|
package/dist/cjs/MenuBar.js
CHANGED
@@ -451,7 +451,7 @@ var MenuBar = function (_a) {
|
|
451
451
|
// Title Information Configuration
|
452
452
|
config && config.titleDescription ? ((0, jsx_runtime_1.jsx)("p", { children: config.titleDescription })) : null] })),
|
453
453
|
// Information Configuration
|
454
|
-
config && config.
|
454
|
+
config && config.showInfo.constructor === Boolean && config.showInfo === true ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: "belt-info", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: Asset_1.SVG_INFORMATION })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: (0, jsx_runtime_1.jsx)(Information_1.default, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } }) }))] })) : null,
|
455
455
|
// Additional title on the modal
|
456
456
|
config && config.addedTitle ? ((0, jsx_runtime_1.jsx)("p", { children: config.addedTitle })) : null] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-beltleft-cta" }, { children: [mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ className: "belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: mainButton.icon ? mainButton.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: mainButton.label ? mainButton.label : 'File a Request' })] })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "popover em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
|
457
457
|
return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: btn.label }), idx);
|
package/dist/cjs/assets/Asset.js
CHANGED
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
|
|
11
11
|
return __assign.apply(this, arguments);
|
12
12
|
};
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
14
|
-
exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
|
14
|
+
exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
|
15
15
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
16
16
|
exports.SVG_BACK = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.69612 4.29289C8.08664 4.68342 8.08664 5.31658 7.69612 5.70711L3.40323 10L7.69612 14.2929C8.08664 14.6834 8.08664 15.3166 7.69612 15.7071C7.3056 16.0976 6.67243 16.0976 6.28191 15.7071L1.28191 10.7071C0.891382 10.3166 0.891382 9.68342 1.28191 9.29289L6.28191 4.29289C6.67243 3.90237 7.3056 3.90237 7.69612 4.29289Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.989014 10C0.989014 9.44772 1.43673 9 1.98901 9H17.989C18.5413 9 18.989 9.44772 18.989 10C18.989 10.5523 18.5413 11 17.989 11H1.98901C1.43673 11 0.989014 10.5523 0.989014 10Z", fill: "#5C7FF3" })] }));
|
17
17
|
exports.SVG_CHECK = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.6823 4.26895C18.0861 4.64578 18.1079 5.27857 17.7311 5.68232L8.39773 15.6823C8.2086 15.885 7.94385 16 7.66667 16C7.38949 16 7.12474 15.885 6.93562 15.6823L2.26895 10.6823C1.89211 10.2786 1.91393 9.64578 2.31769 9.26895C2.72144 8.89211 3.35423 8.91393 3.73106 9.31769L7.66667 13.5344L16.2689 4.31769C16.6458 3.91393 17.2786 3.89211 17.6823 4.26895Z", fill: "#393F5A" }) }));
|
@@ -26,3 +26,4 @@ exports.SVG_ARROWLEFT = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "20", he
|
|
26
26
|
exports.SVG_ARROWDOWN = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L6.70711 6.70711C6.31658 7.09763 5.68342 7.09763 5.29289 6.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z", fill: "#9FA5B7" }) }));
|
27
27
|
exports.SVG_REQUEST = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2L6 4L14 4L14 2L6 2ZM4 4C4 5.10457 4.89543 6 6 6L14 6C15.1046 6 16 5.10457 16 4L16 2C16 0.895431 15.1046 -8.55899e-09 14 3.97233e-08L6 3.89414e-07C4.89543 4.37697e-07 4 0.895431 4 2L4 4Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 10C16 10.5523 15.5523 11 15 11L5 11C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9L15 9C15.5523 9 16 9.44771 16 10Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 14C12 14.5523 11.5523 15 11 15L5 15C4.44772 15 4 14.5523 4 14C4 13.4477 4.44772 13 5 13L11 13C11.5523 13 12 13.4477 12 14Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 4H18V18H2V4H6L6 2H2C0.895431 2 0 2.89543 0 4V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V4C20 2.89543 19.1046 2 18 2H14V4Z", fill: "#393F5A" })] }));
|
28
28
|
exports.SVG_ADD = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z", fill: "#393F5A" })] }));
|
29
|
+
exports.SVG_INFORMATION = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V9C9 8.44772 9.44772 8 10 8Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { d: "M11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6Z", fill: "#393F5A" })] }));
|
@@ -306,6 +306,7 @@ var Dropdown = function (_a) {
|
|
306
306
|
}
|
307
307
|
}
|
308
308
|
function handleKeyPress(event) {
|
309
|
+
var updatedKey;
|
309
310
|
if (Boolean(dropdownPopover)) {
|
310
311
|
if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
|
311
312
|
if (event.key === 'ArrowDown') {
|
@@ -313,7 +314,7 @@ var Dropdown = function (_a) {
|
|
313
314
|
setKeyOption(0);
|
314
315
|
}
|
315
316
|
else {
|
316
|
-
|
317
|
+
updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
|
317
318
|
setKeyOption(updatedKey);
|
318
319
|
}
|
319
320
|
}
|
@@ -322,7 +323,7 @@ var Dropdown = function (_a) {
|
|
322
323
|
setKeyOption(0);
|
323
324
|
}
|
324
325
|
else {
|
325
|
-
|
326
|
+
updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
|
326
327
|
setKeyOption(updatedKey);
|
327
328
|
}
|
328
329
|
}
|
@@ -362,8 +363,8 @@ var Dropdown = function (_a) {
|
|
362
363
|
}
|
363
364
|
else {
|
364
365
|
if (objectKeyOption > 0) {
|
365
|
-
var
|
366
|
-
setKeyOption(
|
366
|
+
var updatedKey_1 = optionsArray[optionsKeyArray[objectKeyOption - 1]].options.length - 1;
|
367
|
+
setKeyOption(updatedKey_1);
|
367
368
|
setObjectKeyOption(objectKeyOption - 1);
|
368
369
|
}
|
369
370
|
}
|
package/dist/esm/Information.js
CHANGED
@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
|
|
11
11
|
};
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
13
13
|
import React, { useState } from 'react';
|
14
|
-
// @ts-ignore
|
15
14
|
import renderHtml from 'react-render-html';
|
16
15
|
var Information = function (_a) {
|
17
16
|
var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
|
package/dist/esm/MenuBar.js
CHANGED
@@ -25,7 +25,7 @@ import { useState, Fragment, useEffect } from "react";
|
|
25
25
|
import '../scss/style.scss';
|
26
26
|
import '../scss/library/menubar.scss';
|
27
27
|
// Imports
|
28
|
-
import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN } from './assets/Asset';
|
28
|
+
import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN, SVG_INFORMATION } from './assets/Asset';
|
29
29
|
import { CHECKBOX, MONTH_LIST, INFO_LOADER, PAGE_OPTION } from "./constants/Constant";
|
30
30
|
import Information from './Information';
|
31
31
|
import Input from './inputs/InputSelectionHandler';
|
@@ -446,7 +446,7 @@ var MenuBar = function (_a) {
|
|
446
446
|
// Title Information Configuration
|
447
447
|
config && config.titleDescription ? (_jsx("p", { children: config.titleDescription })) : null] })),
|
448
448
|
// Information Configuration
|
449
|
-
config && config.
|
449
|
+
config && config.showInfo.constructor === Boolean && config.showInfo === true ? (_jsxs(Fragment, { children: [_jsx("a", __assign({ href: "#", className: "belt-info", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: SVG_INFORMATION })), _jsx(Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: _jsx(Information, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } }) }))] })) : null,
|
450
450
|
// Additional title on the modal
|
451
451
|
config && config.addedTitle ? (_jsx("p", { children: config.addedTitle })) : null] })), _jsxs("div", __assign({ className: "em-beltleft-cta" }, { children: [mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? (_jsxs(Fragment, { children: [_jsxs("a", __assign({ className: "belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } }, { children: [_jsx("div", __assign({ className: "belt-icon" }, { children: mainButton.icon ? mainButton.icon : '' })), _jsx("span", { children: mainButton.label ? mainButton.label : 'File a Request' })] })), _jsx(Popover, __assign({ id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' }, { children: _jsx("div", __assign({ className: "popover em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
|
452
452
|
return _jsx("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: btn.label }), idx);
|
package/dist/esm/assets/Asset.js
CHANGED
@@ -23,3 +23,4 @@ export var SVG_ARROWLEFT = _jsx("svg", __assign({ width: "20", height: "20", vie
|
|
23
23
|
export var SVG_ARROWDOWN = _jsx("svg", __assign({ width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L6.70711 6.70711C6.31658 7.09763 5.68342 7.09763 5.29289 6.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z", fill: "#9FA5B7" }) }));
|
24
24
|
export var SVG_REQUEST = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2L6 4L14 4L14 2L6 2ZM4 4C4 5.10457 4.89543 6 6 6L14 6C15.1046 6 16 5.10457 16 4L16 2C16 0.895431 15.1046 -8.55899e-09 14 3.97233e-08L6 3.89414e-07C4.89543 4.37697e-07 4 0.895431 4 2L4 4Z", fill: "#393F5A" }), _jsx("path", { d: "M16 10C16 10.5523 15.5523 11 15 11L5 11C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9L15 9C15.5523 9 16 9.44771 16 10Z", fill: "#393F5A" }), _jsx("path", { d: "M12 14C12 14.5523 11.5523 15 11 15L5 15C4.44772 15 4 14.5523 4 14C4 13.4477 4.44772 13 5 13L11 13C11.5523 13 12 13.4477 12 14Z", fill: "#393F5A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 4H18V18H2V4H6L6 2H2C0.895431 2 0 2.89543 0 4V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V4C20 2.89543 19.1046 2 18 2H14V4Z", fill: "#393F5A" })] }));
|
25
25
|
export var SVG_ADD = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z", fill: "#393F5A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z", fill: "#393F5A" })] }));
|
26
|
+
export var SVG_INFORMATION = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z", fill: "#393F5A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V9C9 8.44772 9.44772 8 10 8Z", fill: "#393F5A" }), _jsx("path", { d: "M11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6Z", fill: "#393F5A" })] }));
|
@@ -302,6 +302,7 @@ var Dropdown = function (_a) {
|
|
302
302
|
}
|
303
303
|
}
|
304
304
|
function handleKeyPress(event) {
|
305
|
+
var updatedKey;
|
305
306
|
if (Boolean(dropdownPopover)) {
|
306
307
|
if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
|
307
308
|
if (event.key === 'ArrowDown') {
|
@@ -309,7 +310,7 @@ var Dropdown = function (_a) {
|
|
309
310
|
setKeyOption(0);
|
310
311
|
}
|
311
312
|
else {
|
312
|
-
|
313
|
+
updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
|
313
314
|
setKeyOption(updatedKey);
|
314
315
|
}
|
315
316
|
}
|
@@ -318,7 +319,7 @@ var Dropdown = function (_a) {
|
|
318
319
|
setKeyOption(0);
|
319
320
|
}
|
320
321
|
else {
|
321
|
-
|
322
|
+
updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
|
322
323
|
setKeyOption(updatedKey);
|
323
324
|
}
|
324
325
|
}
|
@@ -358,8 +359,8 @@ var Dropdown = function (_a) {
|
|
358
359
|
}
|
359
360
|
else {
|
360
361
|
if (objectKeyOption > 0) {
|
361
|
-
var
|
362
|
-
setKeyOption(
|
362
|
+
var updatedKey_1 = optionsArray[optionsKeyArray[objectKeyOption - 1]].options.length - 1;
|
363
|
+
setKeyOption(updatedKey_1);
|
363
364
|
setObjectKeyOption(objectKeyOption - 1);
|
364
365
|
}
|
365
366
|
}
|
package/package.json
CHANGED
package/src/main/Information.js
CHANGED
@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
27
|
};
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
29
29
|
var react_1 = __importStar(require("react"));
|
30
|
-
// @ts-ignore
|
31
30
|
var react_render_html_1 = __importDefault(require("react-render-html"));
|
32
31
|
var Information = function (_a) {
|
33
32
|
var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
|
package/src/main/Information.tsx
CHANGED
package/src/main/MenuBar.js
CHANGED
@@ -52,7 +52,7 @@ var react_1 = __importStar(require("react"));
|
|
52
52
|
require("../scss/style.scss");
|
53
53
|
require("../scss/library/menubar.scss");
|
54
54
|
// Imports
|
55
|
-
var Asset_1 = require("
|
55
|
+
var Asset_1 = require("./assets/Asset");
|
56
56
|
var Constant_1 = require("./constants/Constant");
|
57
57
|
var Information_1 = __importDefault(require("./Information"));
|
58
58
|
var InputSelectionHandler_1 = __importDefault(require("./inputs/InputSelectionHandler"));
|
@@ -477,9 +477,8 @@ var MenuBar = function (_a) {
|
|
477
477
|
// Title Information Configuration
|
478
478
|
config && config.titleDescription ? (react_1.default.createElement("p", null, config.titleDescription)) : null),
|
479
479
|
// Information Configuration
|
480
|
-
config && config.
|
481
|
-
react_1.default.createElement("a", { href: "#", className: "belt-info", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" },
|
482
|
-
react_1.default.createElement("i", { className: "belt-icon" })),
|
480
|
+
config && config.showInfo.constructor === Boolean && config.showInfo === true ? (react_1.default.createElement(react_1.Fragment, null,
|
481
|
+
react_1.default.createElement("a", { href: "#", className: "belt-info", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, Asset_1.SVG_INFORMATION),
|
483
482
|
react_1.default.createElement(Select_1.Popover, { id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } },
|
484
483
|
react_1.default.createElement(Information_1.default, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } })))) : null,
|
485
484
|
// Additional title on the modal
|
package/src/main/MenuBar.tsx
CHANGED
@@ -6,7 +6,7 @@ import '../scss/style.scss';
|
|
6
6
|
import '../scss/library/menubar.scss';
|
7
7
|
|
8
8
|
// Imports
|
9
|
-
import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN } from './assets/Asset';
|
9
|
+
import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN, SVG_INFORMATION } from './assets/Asset';
|
10
10
|
import { CHECKBOX, MONTH_LIST, INFO_LOADER, PAGE_OPTION } from "./constants/Constant";
|
11
11
|
import Information from './Information';
|
12
12
|
import Input from './inputs/InputSelectionHandler';
|
@@ -565,11 +565,11 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
|
|
565
565
|
|
566
566
|
{
|
567
567
|
// Information Configuration
|
568
|
-
config && config.
|
568
|
+
config && config.showInfo.constructor === Boolean && config.showInfo===true ? (
|
569
569
|
<Fragment>
|
570
570
|
<a href="#" className="belt-info" onClick={event => popoverRequestHandler(event, 'info')}
|
571
571
|
data-testid="menubar-information">
|
572
|
-
|
572
|
+
{SVG_INFORMATION}
|
573
573
|
</a>
|
574
574
|
<Popover
|
575
575
|
id="InfoPopOver"
|
package/src/main/assets/Asset.js
CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
-
exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
|
6
|
+
exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
|
7
7
|
var react_1 = __importDefault(require("react"));
|
8
8
|
exports.SVG_BACK = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
9
9
|
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.69612 4.29289C8.08664 4.68342 8.08664 5.31658 7.69612 5.70711L3.40323 10L7.69612 14.2929C8.08664 14.6834 8.08664 15.3166 7.69612 15.7071C7.3056 16.0976 6.67243 16.0976 6.28191 15.7071L1.28191 10.7071C0.891382 10.3166 0.891382 9.68342 1.28191 9.29289L6.28191 4.29289C6.67243 3.90237 7.3056 3.90237 7.69612 4.29289Z", fill: "#393F5A" }),
|
@@ -41,3 +41,7 @@ exports.SVG_REQUEST = react_1.default.createElement("svg", { width: "20", height
|
|
41
41
|
exports.SVG_ADD = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
42
42
|
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z", fill: "#393F5A" }),
|
43
43
|
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z", fill: "#393F5A" }));
|
44
|
+
exports.SVG_INFORMATION = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
45
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z", fill: "#393F5A" }),
|
46
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V9C9 8.44772 9.44772 8 10 8Z", fill: "#393F5A" }),
|
47
|
+
react_1.default.createElement("path", { d: "M11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6Z", fill: "#393F5A" }));
|
@@ -64,3 +64,12 @@ export const SVG_ADD = <svg width="20" height="20" viewBox="0 0 20 20" fill="non
|
|
64
64
|
<path fillRule="evenodd" clipRule="evenodd" d="M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z" fill="#393F5A"/>
|
65
65
|
<path fillRule="evenodd" clipRule="evenodd" d="M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z" fill="#393F5A"/>
|
66
66
|
</svg>
|
67
|
+
|
68
|
+
|
69
|
+
|
70
|
+
export const SVG_INFORMATION = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
71
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0Z" fill="#393F5A" />
|
72
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M10 8C10.5523 8 11 8.44772 11 9V14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14V9C9 8.44772 9.44772 8 10 8Z" fill="#393F5A" />
|
73
|
+
<path d="M11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6Z" fill="#393F5A" />
|
74
|
+
</svg>
|
75
|
+
|
@@ -0,0 +1,10 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.Modal = exports.MenuBar = void 0;
|
7
|
+
var MenuBar_1 = __importDefault(require("./MenuBar"));
|
8
|
+
exports.MenuBar = MenuBar_1.default;
|
9
|
+
var Modal_1 = __importDefault(require("./Modal"));
|
10
|
+
exports.Modal = Modal_1.default;
|
@@ -48,7 +48,7 @@ var react_1 = __importStar(require("react"));
|
|
48
48
|
require("../../scss/style.scss");
|
49
49
|
require("../../scss/library/select.scss");
|
50
50
|
// Imports
|
51
|
-
var Asset_1 = require("
|
51
|
+
var Asset_1 = require("../assets/Asset");
|
52
52
|
var Popover = function (_a) {
|
53
53
|
var open = _a.open, origin = _a.origin, children = _a.children, onClick = _a.onClick;
|
54
54
|
return (react_1.default.createElement(react_1.Fragment, null, open &&
|
@@ -330,6 +330,7 @@ var Dropdown = function (_a) {
|
|
330
330
|
}
|
331
331
|
}
|
332
332
|
function handleKeyPress(event) {
|
333
|
+
var updatedKey;
|
333
334
|
if (Boolean(dropdownPopover)) {
|
334
335
|
if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
|
335
336
|
if (event.key === 'ArrowDown') {
|
@@ -337,7 +338,7 @@ var Dropdown = function (_a) {
|
|
337
338
|
setKeyOption(0);
|
338
339
|
}
|
339
340
|
else {
|
340
|
-
|
341
|
+
updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
|
341
342
|
setKeyOption(updatedKey);
|
342
343
|
}
|
343
344
|
}
|
@@ -346,7 +347,7 @@ var Dropdown = function (_a) {
|
|
346
347
|
setKeyOption(0);
|
347
348
|
}
|
348
349
|
else {
|
349
|
-
|
350
|
+
updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
|
350
351
|
setKeyOption(updatedKey);
|
351
352
|
}
|
352
353
|
}
|
@@ -386,8 +387,8 @@ var Dropdown = function (_a) {
|
|
386
387
|
}
|
387
388
|
else {
|
388
389
|
if (objectKeyOption > 0) {
|
389
|
-
var
|
390
|
-
setKeyOption(
|
390
|
+
var updatedKey_1 = optionsArray[optionsKeyArray[objectKeyOption - 1]].options.length - 1;
|
391
|
+
setKeyOption(updatedKey_1);
|
391
392
|
setObjectKeyOption(objectKeyOption - 1);
|
392
393
|
}
|
393
394
|
}
|
@@ -364,20 +364,21 @@ const Dropdown: React.FC<IPropsDropDown> = ({ config, customClass, onChanged, is
|
|
364
364
|
|
365
365
|
|
366
366
|
function handleKeyPress(event: React.KeyboardEvent<HTMLInputElement>) {
|
367
|
+
let updatedKey:any;
|
367
368
|
if (Boolean(dropdownPopover)) {
|
368
369
|
if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
|
369
370
|
if (event.key === 'ArrowDown') {
|
370
371
|
if (keyOption === null) {
|
371
372
|
setKeyOption(0);
|
372
373
|
} else {
|
373
|
-
|
374
|
+
updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
|
374
375
|
setKeyOption(updatedKey);
|
375
376
|
}
|
376
377
|
} else if (event.key === 'ArrowUp') {
|
377
378
|
if (keyOption === null) {
|
378
379
|
setKeyOption(0);
|
379
380
|
} else {
|
380
|
-
|
381
|
+
updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
|
381
382
|
setKeyOption(updatedKey);
|
382
383
|
}
|
383
384
|
} else if (event.key === 'Enter') {
|
package/src/main/tsconfig.json
CHANGED
@@ -35,8 +35,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
35
35
|
};
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
37
37
|
var react_1 = __importStar(require("react"));
|
38
|
-
var main_1 = require("../main
|
39
|
-
var Asset_1 = require("../assets/Asset");
|
38
|
+
var main_1 = require("../main");
|
39
|
+
var Asset_1 = require("../main/assets/Asset");
|
40
40
|
var TestMenuBar = function () {
|
41
41
|
var MENUBAR = {
|
42
42
|
dropdown: {
|
@@ -90,7 +90,7 @@ var TestMenuBar = function () {
|
|
90
90
|
},
|
91
91
|
menubar: {
|
92
92
|
config: {
|
93
|
-
title: 'Test
|
93
|
+
title: 'Test Title2',
|
94
94
|
icon: Asset_1.SVG_REQUEST,
|
95
95
|
showInfo: true,
|
96
96
|
iconType: ['check', "back", 'standard']
|
@@ -191,7 +191,7 @@ var TestMenuBar = function () {
|
|
191
191
|
selected: 0,
|
192
192
|
total: 1
|
193
193
|
},
|
194
|
-
info:
|
194
|
+
info: null
|
195
195
|
}
|
196
196
|
}), statedata = _a[0], setStateData = _a[1];
|
197
197
|
var _b = __assign({}, statedata), menubar = _b.menubar, modal = _b.modal;
|
@@ -226,6 +226,9 @@ var TestMenuBar = function () {
|
|
226
226
|
menubar.dropdown.selection.startDate = data;
|
227
227
|
menubar.dropdown.selection.endDate = data;
|
228
228
|
break;
|
229
|
+
case 'icon':
|
230
|
+
menubar.info = '<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is</p>';
|
231
|
+
break;
|
229
232
|
default: break;
|
230
233
|
}
|
231
234
|
statedata.menubar = menubar;
|
@@ -10,7 +10,7 @@ const TestMenuBar = () => {
|
|
10
10
|
|
11
11
|
|
12
12
|
const MENUBAR = {
|
13
|
-
|
13
|
+
|
14
14
|
dropdown: {
|
15
15
|
show: true,
|
16
16
|
icon: (<img src="/images/icons/icon-add-graydark.svg" alt="" />),
|
@@ -40,7 +40,7 @@ const TestMenuBar = () => {
|
|
40
40
|
},
|
41
41
|
]
|
42
42
|
},
|
43
|
-
|
43
|
+
|
44
44
|
}
|
45
45
|
|
46
46
|
let [statedata, setStateData] = useState({
|
@@ -68,7 +68,7 @@ const TestMenuBar = () => {
|
|
68
68
|
},
|
69
69
|
menubar: {
|
70
70
|
config: {
|
71
|
-
title: 'Test
|
71
|
+
title: 'Test Title2',
|
72
72
|
icon: SVG_REQUEST,
|
73
73
|
showInfo: true,
|
74
74
|
iconType: ['check', "back", 'standard']
|
@@ -169,7 +169,7 @@ const TestMenuBar = () => {
|
|
169
169
|
selected: 0,
|
170
170
|
total: 1
|
171
171
|
},
|
172
|
-
info:
|
172
|
+
info: null
|
173
173
|
}
|
174
174
|
|
175
175
|
})
|
@@ -209,18 +209,23 @@ const TestMenuBar = () => {
|
|
209
209
|
menubar.dropdown.selection.startDate = data;
|
210
210
|
menubar.dropdown.selection.endDate = data;
|
211
211
|
break;
|
212
|
+
|
213
|
+
case 'icon':
|
214
|
+
menubar.info = '<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is</p>';
|
215
|
+
break;
|
216
|
+
|
212
217
|
default: break;
|
213
218
|
}
|
214
219
|
statedata.menubar = menubar;
|
215
220
|
|
216
|
-
setStateData({...statedata, statedata})
|
221
|
+
setStateData({ ...statedata, statedata })
|
217
222
|
}
|
218
223
|
|
219
224
|
const displayModal = (event) => {
|
220
225
|
event.preventDefault();
|
221
226
|
modal.show = true;
|
222
227
|
statedata.modal = modal
|
223
|
-
setStateData({...statedata, statedata})
|
228
|
+
setStateData({ ...statedata, statedata })
|
224
229
|
}
|
225
230
|
|
226
231
|
const getModalActions = (action, data) => {
|
@@ -234,7 +239,7 @@ const TestMenuBar = () => {
|
|
234
239
|
}
|
235
240
|
|
236
241
|
statedata.modal = modal
|
237
|
-
setStateData({...statedata, statedata})
|
242
|
+
setStateData({ ...statedata, statedata })
|
238
243
|
}
|
239
244
|
|
240
245
|
const View = () => {
|
@@ -301,7 +306,13 @@ const TestMenuBar = () => {
|
|
301
306
|
{...modal}
|
302
307
|
getActions={(action, data) => getModalActions(action, data)}
|
303
308
|
>
|
304
|
-
<div className="card-grid card-grid-multiple"
|
309
|
+
<div className="card-grid card-grid-multiple">
|
310
|
+
<div className="card-grid-col">
|
311
|
+
<div className="card-grid-item">
|
312
|
+
<div className="card-grid-name">
|
313
|
+
<div>
|
314
|
+
<a href="#" className="thumb thumb-sm"><span>AU</span></a>
|
315
|
+
</div><div><h6>Alvin Uy</h6><label>Product Manager</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>KU</span></a></div><div><h6>Ken Uriarte</h6><label>Principal Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>JC</span></a></div><div><h6>Jacky Alexander Chan</h6><label>Ph Senior Software Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>KU</span></a></div><div><h6>Ken Uriarte</h6><label>Principal Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>KU</span></a></div><div><h6>Ken Uriarte</h6><label>Principal Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>KU</span></a></div><div><h6>Ken Uriarte</h6><label>Principal Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>KU</span></a></div><div><h6>Ken Uriarte</h6><label>Principal Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>KU</span></a></div><div><h6>Ken Uriarte</h6><label>Principal Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>AU</span></a></div><div><h6>Alvin Uy</h6><label>Product Manager</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>KU</span></a></div><div><h6>Ken Uriarte</h6><label>Principal Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>KU</span></a></div><div><h6>Ken Uriarte</h6><label>Principal Developer</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div><div className="card-grid-col"><div className="card-grid-item"><div className="card-grid-name"><div><a href="#" className="thumb thumb-sm"><span>AU</span></a></div><div><h6>Alvin Uy</h6><label>Product Manager</label></div></div><div className="card-grid-info"><div><div><div data-testid="badge-current" className="badge badge-approved"></div></div><span><b>Approved</b> - 17 Same Request(s)</span></div></div></div></div></div>
|
305
316
|
</Modal>
|
306
317
|
</React.Fragment>
|
307
318
|
)
|