empower-container 0.1.6 → 0.1.9
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -2
- package/dist/cjs/Information.js +2 -1
- package/dist/cjs/assets/Asset.d.ts +1 -0
- package/dist/cjs/assets/Asset.js +3 -2
- package/dist/esm/Information.js +2 -1
- package/dist/esm/assets/Asset.d.ts +1 -0
- package/dist/esm/assets/Asset.js +2 -1
- package/package.json +1 -1
- package/src/main/Information.js +2 -1
- package/src/main/Information.tsx +3 -1
- package/src/main/assets/Asset.d.ts +1 -0
- package/src/main/assets/Asset.js +5 -3
- package/src/main/assets/Asset.tsx +8 -2
- package/src/main/inputs/InputSelectionHandler.d.ts +0 -1
- package/src/sample/TestMenuBar.d.ts +0 -1
- package/src/sample/TestMenuBar.js +10 -2
- package/src/sample/TestMenuBar.tsx +43 -24
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
## 1) Menubar
|
|
8
8
|
### Implementation
|
|
9
9
|
```js
|
|
10
|
-
import { MenuBar } from '
|
|
10
|
+
import { MenuBar } from 'empower-container';
|
|
11
11
|
```
|
|
12
12
|
### Options
|
|
13
13
|
|
|
@@ -156,7 +156,7 @@ info: 'Sample Information'
|
|
|
156
156
|
## 2) Modal
|
|
157
157
|
### Implementation
|
|
158
158
|
```js
|
|
159
|
-
import { Modal } from '
|
|
159
|
+
import { Modal } from 'empower-container';
|
|
160
160
|
```
|
|
161
161
|
### Options
|
|
162
162
|
|
package/dist/cjs/Information.js
CHANGED
|
@@ -36,6 +36,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var react_1 = __importStar(require("react"));
|
|
39
|
+
var Asset_1 = require("./assets/Asset");
|
|
39
40
|
var Information = function (_a) {
|
|
40
41
|
var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
|
|
41
42
|
var _b = (0, react_1.useState)(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
|
|
@@ -53,7 +54,7 @@ var Information = function (_a) {
|
|
|
53
54
|
setRowAnchorEl(rowAnchorEl);
|
|
54
55
|
};
|
|
55
56
|
var View = function () {
|
|
56
|
-
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "em-popover-i-close", onClick: hide })] })), (0, jsx_runtime_1.jsx)("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "em-popover-i-close", onClick: hide })] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h6", { children: item }) }), rowAnchorEl === key ? (
|
|
57
|
+
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "em-popover-i-close", onClick: hide })] })), (0, jsx_runtime_1.jsx)("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "em-popover-i-close", onClick: hide })] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h6", { children: item }) }), rowAnchorEl === key ? (Asset_1.SVG_ARROW_UP) : (Asset_1.SVG_ARROWDOWN)] })), rowAnchorEl === key ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
|
|
57
58
|
(item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
|
|
58
59
|
(typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')) }))) : null] }, key)); })) : null) : null] }))) })) });
|
|
59
60
|
};
|
|
@@ -10,6 +10,7 @@ export declare const SVG_UNDO: JSX.Element;
|
|
|
10
10
|
export declare const SVG_ARROWRIGHT: JSX.Element;
|
|
11
11
|
export declare const SVG_ARROWLEFT: JSX.Element;
|
|
12
12
|
export declare const SVG_ARROWDOWN: JSX.Element;
|
|
13
|
+
export declare const SVG_ARROW_UP: JSX.Element;
|
|
13
14
|
export declare const SVG_REQUEST: JSX.Element;
|
|
14
15
|
export declare const SVG_ADD: JSX.Element;
|
|
15
16
|
export declare const SVG_INFORMATION: JSX.Element;
|
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_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;
|
|
14
|
+
exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROW_UP = 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" }) }));
|
|
@@ -23,7 +23,8 @@ exports.SVG_SUBMIT = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", heig
|
|
|
23
23
|
exports.SVG_UNDO = (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 1.29289C8.08664 1.68342 8.08664 2.31658 7.69612 2.70711L3.40323 7L7.69612 11.2929C8.08664 11.6834 8.08664 12.3166 7.69612 12.7071C7.3056 13.0976 6.67243 13.0976 6.28191 12.7071L1.28191 7.70711C0.891382 7.31658 0.891382 6.68342 1.28191 6.29289L6.28191 1.29289C6.67243 0.902369 7.3056 0.902369 7.69612 1.29289Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 7C2 6.44772 2.44772 6 3 6H13C16.3137 6 19 8.68629 19 12C19 15.3137 16.3137 18 13 18H2C1.44772 18 1 17.5523 1 17C1 16.4477 1.44772 16 2 16H13C15.2091 16 17 14.2091 17 12C17 9.79086 15.2091 8 13 8H3C2.44772 8 2 7.55228 2 7Z", fill: "#393F5A" })] }));
|
|
24
24
|
exports.SVG_ARROWRIGHT = (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: "M7.79289 16.2071C7.40237 15.8166 7.40237 15.1834 7.79289 14.7929L12.0858 10.5L7.79289 6.20711C7.40237 5.81658 7.40237 5.18342 7.79289 4.79289C8.18342 4.40237 8.81658 4.40237 9.20711 4.79289L14.2071 9.79289C14.5976 10.1834 14.5976 10.8166 14.2071 11.2071L9.20711 16.2071C8.81658 16.5976 8.18342 16.5976 7.79289 16.2071Z", fill: "#9FA5B7" }) }));
|
|
25
25
|
exports.SVG_ARROWLEFT = (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: "M13.2071 4.79289C13.5976 5.18342 13.5976 5.81658 13.2071 6.20711L8.91421 10.5L13.2071 14.7929C13.5976 15.1834 13.5976 15.8166 13.2071 16.2071C12.8166 16.5976 12.1834 16.5976 11.7929 16.2071L6.79289 11.2071C6.40237 10.8166 6.40237 10.1834 6.79289 9.79289L11.7929 4.79289C12.1834 4.40237 12.8166 4.40237 13.2071 4.79289Z", fill: "#9FA5B7" }) }));
|
|
26
|
-
exports.SVG_ARROWDOWN = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "
|
|
26
|
+
exports.SVG_ARROWDOWN = (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", "clip-rule": "evenodd", d: "M4.29289 7.29289C4.68342 6.90237 5.31658 6.90237 5.70711 7.29289L10 11.5858L14.2929 7.29289C14.6834 6.90237 15.3166 6.90237 15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L10.7071 13.7071C10.3166 14.0976 9.68342 14.0976 9.29289 13.7071L4.29289 8.70711C3.90237 8.31658 3.90237 7.68342 4.29289 7.29289Z", fill: "#9FA5B7" }) }));
|
|
27
|
+
exports.SVG_ARROW_UP = (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: "M4.29289 13.7071C4.68342 14.0976 5.31658 14.0976 5.70711 13.7071L10 9.41421L14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929L10.7071 7.29289C10.3166 6.90237 9.68342 6.90237 9.29289 7.29289L4.29289 12.2929C3.90237 12.6834 3.90237 13.3166 4.29289 13.7071Z", fill: "#9FA5B7" }) }));
|
|
27
28
|
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
29
|
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
30
|
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)("rect", { x: "1", y: "1", width: "18", height: "18", rx: "9", stroke: "#9FA5B7", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 9V14", stroke: "#9FA5B7", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "6", r: "1", fill: "#9FA5B7" })] }));
|
package/dist/esm/Information.js
CHANGED
|
@@ -11,6 +11,7 @@ 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
|
+
import { SVG_ARROWDOWN, SVG_ARROW_UP } from './assets/Asset';
|
|
14
15
|
var Information = function (_a) {
|
|
15
16
|
var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
|
|
16
17
|
var _b = useState(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
|
|
@@ -28,7 +29,7 @@ var Information = function (_a) {
|
|
|
28
29
|
setRowAnchorEl(rowAnchorEl);
|
|
29
30
|
};
|
|
30
31
|
var View = function () {
|
|
31
|
-
return _jsx(React.Fragment, { children: _jsx("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), _jsx("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [_jsx("div", { children: _jsx("h6", { children: item }) }), rowAnchorEl === key ? (
|
|
32
|
+
return _jsx(React.Fragment, { children: _jsx("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), _jsx("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [_jsx("div", { children: _jsx("h6", { children: item }) }), rowAnchorEl === key ? (SVG_ARROW_UP) : (SVG_ARROWDOWN)] })), rowAnchorEl === key ? (_jsx("div", __assign({ className: "em-popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
|
|
32
33
|
(item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
|
|
33
34
|
(typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')) }))) : null] }, key)); })) : null) : null] }))) })) });
|
|
34
35
|
};
|
|
@@ -10,6 +10,7 @@ export declare const SVG_UNDO: JSX.Element;
|
|
|
10
10
|
export declare const SVG_ARROWRIGHT: JSX.Element;
|
|
11
11
|
export declare const SVG_ARROWLEFT: JSX.Element;
|
|
12
12
|
export declare const SVG_ARROWDOWN: JSX.Element;
|
|
13
|
+
export declare const SVG_ARROW_UP: JSX.Element;
|
|
13
14
|
export declare const SVG_REQUEST: JSX.Element;
|
|
14
15
|
export declare const SVG_ADD: JSX.Element;
|
|
15
16
|
export declare const SVG_INFORMATION: JSX.Element;
|
package/dist/esm/assets/Asset.js
CHANGED
|
@@ -20,7 +20,8 @@ export var SVG_SUBMIT = _jsxs("svg", __assign({ width: "20", height: "20", viewB
|
|
|
20
20
|
export var SVG_UNDO = _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: "M7.69612 1.29289C8.08664 1.68342 8.08664 2.31658 7.69612 2.70711L3.40323 7L7.69612 11.2929C8.08664 11.6834 8.08664 12.3166 7.69612 12.7071C7.3056 13.0976 6.67243 13.0976 6.28191 12.7071L1.28191 7.70711C0.891382 7.31658 0.891382 6.68342 1.28191 6.29289L6.28191 1.29289C6.67243 0.902369 7.3056 0.902369 7.69612 1.29289Z", fill: "#393F5A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 7C2 6.44772 2.44772 6 3 6H13C16.3137 6 19 8.68629 19 12C19 15.3137 16.3137 18 13 18H2C1.44772 18 1 17.5523 1 17C1 16.4477 1.44772 16 2 16H13C15.2091 16 17 14.2091 17 12C17 9.79086 15.2091 8 13 8H3C2.44772 8 2 7.55228 2 7Z", fill: "#393F5A" })] }));
|
|
21
21
|
export var SVG_ARROWRIGHT = _jsx("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: "M7.79289 16.2071C7.40237 15.8166 7.40237 15.1834 7.79289 14.7929L12.0858 10.5L7.79289 6.20711C7.40237 5.81658 7.40237 5.18342 7.79289 4.79289C8.18342 4.40237 8.81658 4.40237 9.20711 4.79289L14.2071 9.79289C14.5976 10.1834 14.5976 10.8166 14.2071 11.2071L9.20711 16.2071C8.81658 16.5976 8.18342 16.5976 7.79289 16.2071Z", fill: "#9FA5B7" }) }));
|
|
22
22
|
export var SVG_ARROWLEFT = _jsx("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: "M13.2071 4.79289C13.5976 5.18342 13.5976 5.81658 13.2071 6.20711L8.91421 10.5L13.2071 14.7929C13.5976 15.1834 13.5976 15.8166 13.2071 16.2071C12.8166 16.5976 12.1834 16.5976 11.7929 16.2071L6.79289 11.2071C6.40237 10.8166 6.40237 10.1834 6.79289 9.79289L11.7929 4.79289C12.1834 4.40237 12.8166 4.40237 13.2071 4.79289Z", fill: "#9FA5B7" }) }));
|
|
23
|
-
export var SVG_ARROWDOWN = _jsx("svg", __assign({ width: "
|
|
23
|
+
export var SVG_ARROWDOWN = _jsx("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", "clip-rule": "evenodd", d: "M4.29289 7.29289C4.68342 6.90237 5.31658 6.90237 5.70711 7.29289L10 11.5858L14.2929 7.29289C14.6834 6.90237 15.3166 6.90237 15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L10.7071 13.7071C10.3166 14.0976 9.68342 14.0976 9.29289 13.7071L4.29289 8.70711C3.90237 8.31658 3.90237 7.68342 4.29289 7.29289Z", fill: "#9FA5B7" }) }));
|
|
24
|
+
export var SVG_ARROW_UP = _jsx("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: "M4.29289 13.7071C4.68342 14.0976 5.31658 14.0976 5.70711 13.7071L10 9.41421L14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929L10.7071 7.29289C10.3166 6.90237 9.68342 6.90237 9.29289 7.29289L4.29289 12.2929C3.90237 12.6834 3.90237 13.3166 4.29289 13.7071Z", fill: "#9FA5B7" }) }));
|
|
24
25
|
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
26
|
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
27
|
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("rect", { x: "1", y: "1", width: "18", height: "18", rx: "9", stroke: "#9FA5B7", strokeWidth: "2" }), _jsx("path", { d: "M10 9V14", stroke: "#9FA5B7", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "1", fill: "#9FA5B7" })] }));
|
package/package.json
CHANGED
package/src/main/Information.js
CHANGED
|
@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
var react_1 = __importStar(require("react"));
|
|
27
|
+
var Asset_1 = require("./assets/Asset");
|
|
27
28
|
var Information = function (_a) {
|
|
28
29
|
var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
|
|
29
30
|
var _b = (0, react_1.useState)(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
|
|
@@ -54,7 +55,7 @@ var Information = function (_a) {
|
|
|
54
55
|
react_1.default.createElement("div", { className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } },
|
|
55
56
|
react_1.default.createElement("div", null,
|
|
56
57
|
react_1.default.createElement("h6", null, item)),
|
|
57
|
-
rowAnchorEl === key ? (
|
|
58
|
+
rowAnchorEl === key ? (Asset_1.SVG_ARROW_UP) : (Asset_1.SVG_ARROWDOWN)),
|
|
58
59
|
rowAnchorEl === key ? (react_1.default.createElement("div", { className: "em-popover-i-details" }, item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
|
|
59
60
|
(item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
|
|
60
61
|
(typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')))) : null)); })) : null) : null))));
|
package/src/main/Information.tsx
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
import React, { useState } from 'react';
|
|
3
|
+
import {SVG_ARROWDOWN, SVG_ARROW_UP} from './assets/Asset';
|
|
4
|
+
|
|
3
5
|
// @ts-ignore
|
|
4
6
|
// import renderHtml from 'react-render-html';
|
|
5
7
|
|
|
@@ -69,7 +71,7 @@ const Information: React.FunctionComponent<IInformationProps> = ({ items, listRo
|
|
|
69
71
|
</div>
|
|
70
72
|
|
|
71
73
|
{
|
|
72
|
-
rowAnchorEl === key ? (
|
|
74
|
+
rowAnchorEl === key ? (SVG_ARROW_UP ) : (SVG_ARROWDOWN)
|
|
73
75
|
}
|
|
74
76
|
</div>
|
|
75
77
|
{
|
|
@@ -10,6 +10,7 @@ export declare const SVG_UNDO: JSX.Element;
|
|
|
10
10
|
export declare const SVG_ARROWRIGHT: JSX.Element;
|
|
11
11
|
export declare const SVG_ARROWLEFT: JSX.Element;
|
|
12
12
|
export declare const SVG_ARROWDOWN: JSX.Element;
|
|
13
|
+
export declare const SVG_ARROW_UP: JSX.Element;
|
|
13
14
|
export declare const SVG_REQUEST: JSX.Element;
|
|
14
15
|
export declare const SVG_ADD: JSX.Element;
|
|
15
16
|
export declare const SVG_INFORMATION: JSX.Element;
|
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_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;
|
|
6
|
+
exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROW_UP = 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" }),
|
|
@@ -31,8 +31,10 @@ exports.SVG_ARROWRIGHT = react_1.default.createElement("svg", { width: "20", hei
|
|
|
31
31
|
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.79289 16.2071C7.40237 15.8166 7.40237 15.1834 7.79289 14.7929L12.0858 10.5L7.79289 6.20711C7.40237 5.81658 7.40237 5.18342 7.79289 4.79289C8.18342 4.40237 8.81658 4.40237 9.20711 4.79289L14.2071 9.79289C14.5976 10.1834 14.5976 10.8166 14.2071 11.2071L9.20711 16.2071C8.81658 16.5976 8.18342 16.5976 7.79289 16.2071Z", fill: "#9FA5B7" }));
|
|
32
32
|
exports.SVG_ARROWLEFT = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
33
33
|
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2071 4.79289C13.5976 5.18342 13.5976 5.81658 13.2071 6.20711L8.91421 10.5L13.2071 14.7929C13.5976 15.1834 13.5976 15.8166 13.2071 16.2071C12.8166 16.5976 12.1834 16.5976 11.7929 16.2071L6.79289 11.2071C6.40237 10.8166 6.40237 10.1834 6.79289 9.79289L11.7929 4.79289C12.1834 4.40237 12.8166 4.40237 13.2071 4.79289Z", fill: "#9FA5B7" }));
|
|
34
|
-
exports.SVG_ARROWDOWN = react_1.default.createElement("svg", { width: "
|
|
35
|
-
react_1.default.createElement("path", { fillRule: "evenodd",
|
|
34
|
+
exports.SVG_ARROWDOWN = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
35
|
+
react_1.default.createElement("path", { fillRule: "evenodd", "clip-rule": "evenodd", d: "M4.29289 7.29289C4.68342 6.90237 5.31658 6.90237 5.70711 7.29289L10 11.5858L14.2929 7.29289C14.6834 6.90237 15.3166 6.90237 15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L10.7071 13.7071C10.3166 14.0976 9.68342 14.0976 9.29289 13.7071L4.29289 8.70711C3.90237 8.31658 3.90237 7.68342 4.29289 7.29289Z", fill: "#9FA5B7" }));
|
|
36
|
+
exports.SVG_ARROW_UP = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
37
|
+
react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.29289 13.7071C4.68342 14.0976 5.31658 14.0976 5.70711 13.7071L10 9.41421L14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929L10.7071 7.29289C10.3166 6.90237 9.68342 6.90237 9.29289 7.29289L4.29289 12.2929C3.90237 12.6834 3.90237 13.3166 4.29289 13.7071Z", fill: "#9FA5B7" }));
|
|
36
38
|
exports.SVG_REQUEST = react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
37
39
|
react_1.default.createElement("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" }),
|
|
38
40
|
react_1.default.createElement("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" }),
|
|
@@ -49,10 +49,16 @@ export const SVG_ARROWLEFT = <svg width="20" height="20" viewBox="0 0 20 20" fil
|
|
|
49
49
|
<path fillRule="evenodd" clipRule="evenodd" d="M13.2071 4.79289C13.5976 5.18342 13.5976 5.81658 13.2071 6.20711L8.91421 10.5L13.2071 14.7929C13.5976 15.1834 13.5976 15.8166 13.2071 16.2071C12.8166 16.5976 12.1834 16.5976 11.7929 16.2071L6.79289 11.2071C6.40237 10.8166 6.40237 10.1834 6.79289 9.79289L11.7929 4.79289C12.1834 4.40237 12.8166 4.40237 13.2071 4.79289Z" fill="#9FA5B7"/>
|
|
50
50
|
</svg>
|
|
51
51
|
|
|
52
|
-
export const SVG_ARROWDOWN = <svg width="
|
|
53
|
-
<path fillRule="evenodd"
|
|
52
|
+
export const SVG_ARROWDOWN = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
53
|
+
<path fillRule="evenodd" clip-rule="evenodd" d="M4.29289 7.29289C4.68342 6.90237 5.31658 6.90237 5.70711 7.29289L10 11.5858L14.2929 7.29289C14.6834 6.90237 15.3166 6.90237 15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L10.7071 13.7071C10.3166 14.0976 9.68342 14.0976 9.29289 13.7071L4.29289 8.70711C3.90237 8.31658 3.90237 7.68342 4.29289 7.29289Z" fill="#9FA5B7"/>
|
|
54
54
|
</svg>
|
|
55
55
|
|
|
56
|
+
|
|
57
|
+
export const SVG_ARROW_UP = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
58
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M4.29289 13.7071C4.68342 14.0976 5.31658 14.0976 5.70711 13.7071L10 9.41421L14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929L10.7071 7.29289C10.3166 6.90237 9.68342 6.90237 9.29289 7.29289L4.29289 12.2929C3.90237 12.6834 3.90237 13.3166 4.29289 13.7071Z" fill="#9FA5B7" />
|
|
59
|
+
</svg>
|
|
60
|
+
|
|
61
|
+
|
|
56
62
|
export const SVG_REQUEST = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
57
63
|
<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"/>
|
|
58
64
|
<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"/>
|
|
@@ -87,6 +87,7 @@ var TestMenuBar = function () {
|
|
|
87
87
|
}
|
|
88
88
|
]
|
|
89
89
|
},
|
|
90
|
+
info: null
|
|
90
91
|
},
|
|
91
92
|
menubar: {
|
|
92
93
|
config: {
|
|
@@ -260,7 +261,14 @@ var TestMenuBar = function () {
|
|
|
260
261
|
console.log(action, data, 'action modal');
|
|
261
262
|
switch (action) {
|
|
262
263
|
case 'icon':
|
|
263
|
-
|
|
264
|
+
switch (data) {
|
|
265
|
+
case 'close':
|
|
266
|
+
modal.show = false;
|
|
267
|
+
break;
|
|
268
|
+
case 'info':
|
|
269
|
+
modal.info = 'Hello menubar info';
|
|
270
|
+
break;
|
|
271
|
+
}
|
|
264
272
|
break;
|
|
265
273
|
default: break;
|
|
266
274
|
}
|
|
@@ -294,7 +302,7 @@ var TestMenuBar = function () {
|
|
|
294
302
|
value: "view-shift-schedule", // string optional
|
|
295
303
|
},
|
|
296
304
|
]
|
|
297
|
-
}, getActions: function (action, data) { return getActions(action, data); } },
|
|
305
|
+
}, info: menubar.info, getActions: function (action, data) { return getActions(action, data); } },
|
|
298
306
|
react_1.default.createElement("h2", null, "CHILDREN AGAIN")),
|
|
299
307
|
react_1.default.createElement("div", null,
|
|
300
308
|
react_1.default.createElement("button", { className: "button", onClick: function (event) { return displayModal(event); } },
|
|
@@ -62,6 +62,7 @@ const TestMenuBar = () => {
|
|
|
62
62
|
}
|
|
63
63
|
]
|
|
64
64
|
},
|
|
65
|
+
info: null
|
|
65
66
|
},
|
|
66
67
|
menubar: {
|
|
67
68
|
config: {
|
|
@@ -169,7 +170,7 @@ const TestMenuBar = () => {
|
|
|
169
170
|
info: null
|
|
170
171
|
}
|
|
171
172
|
|
|
172
|
-
|
|
173
|
+
|
|
173
174
|
|
|
174
175
|
})
|
|
175
176
|
|
|
@@ -210,25 +211,31 @@ const TestMenuBar = () => {
|
|
|
210
211
|
break;
|
|
211
212
|
|
|
212
213
|
case 'icon':
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
214
|
+
switch (data) {
|
|
215
|
+
case 'info':
|
|
216
|
+
// 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>';
|
|
217
|
+
const infoMenuBar = {
|
|
218
|
+
infoDetails: {
|
|
219
|
+
"companyPolicy": "<p><strong>Certifying Daily Time Records (DTR) </strong></p>\n<p>All Employees are expected to certify all DTRs covering a pay period as true, correct, accurate and final that will serve as basis to compute their pay.</p>\n<p><strong>Failure</strong> to certify DTRs shall result to an Auto-Certification at the end of the pay cutoff. Uncertified DTRs will be deemed true, correct, accurate and final, except for Absences incurred on the day of the cutoff itself, either on the 10th or 26th of the month.</p>\n<p>For these absences, either of the following will apply:</p>\n<p>1. The employee is given until the 12th or the 27th to amend the DTR and seek approval;</p>\n<p>2. The Timekeeping & Benefits department will verify the details of the absence incurred and amend the DTR appropriately.</p>\n<p>The Company has two (2) pay cutoff periods:</p>\n<p>1. Payroll for the 15th -- 26th of the previous month to the 10th of the current month 2. Payroll for the 30th -- 11th to the 25th of the current month.</p>\n<p><strong>Clock In</strong></p>\n<p>When an employee clocks into work, the Company’s online system shall provide the applicable status:</p>\n<p><strong> ON TIME</strong> - Clock In before the start of shift and/ or before the grace period (if any) ends</p>\n<p>TARDY - Clock In within the first four (4) hours after the shift has started</p>\n<p>ABSENT (1ST HALF and TARDY) - Clock In beyond the first four (4) hours after the shift has started will be tagged as Tardy. The first four (4) hours after the shift has started will be tagged as Absent - 1st Half.</p>\n<p><strong> Tardiness</strong></p>\n<p>1. Failure to come ON TIME six (6) times or accumulation of at least 60 minutes of TARDINESS (whichever comes first) within the 11th of the current month to the 10th of the following month, shall constitute an offense of TARDINESS.</p>\n<p>Employees are expected to time in upon arriving at their respective office. However, due to unforeseen circumstances preventing the employee to timely Clock In within the Company’s online system, employees are allowed to amend their Clock In time, subject to the approval of their respective Department Head / Immediate Superior. Amendments to Clock In within the Company’s online system can be done on or before the payroll cutoff.</p>\n<p>2. Employee reporting to work after the official start of the assigned work shift and, if any, after the grace period. Applicable only to Time-bounded Work Shifts.</p>\n<p>Tardiness computed in payroll is equivalent to length of time computed as the difference between the clock in time and the grace period. If no Grace Period allowed, it will be the difference between the clock in time and the start of the shift.</p>\n<p>Example:</p>\n<p>Start Time - 6:00 AM</p>\n<p>Grace Period - 6:10 AM (10 minutes from the start of the shift)</p>\n<p>Clock In - 6:15 AM</p>\n<p>Tardiness = 5 minutes (time in excess of the end of the Grace Period)</p>\n<p>Computed Tardiness will be the basis of payroll deductions.</p>\n<p><strong>Clock Out</strong></p>\n<p>When an employee clocks out of work, the Company’s online system shall provide the applicable status:</p>\n<p><strong> SHIFT ENDED</strong> - Clock out on or beyond the end of shift will be tagged as Shift Ended</p>\n<p><strong>UNDERTIME</strong> - Clock out before the expected end of shift will tag the talent as Undertime</p>\n<p><strong>ABSENT (2ND HALF and Undertime)</strong> - Clock out within the first four (4) hours after the shift has started will be tagged as Undertime. The last four (4) hours before the shift ends will be tagged as Absent - 2nd Half.</p>\n<p><strong> Undertime </strong></p>\n<p>An employee leaving work earlier than the required end of a Work Shift. Undertime computed in payroll is equivalent to length of time computed as the difference between the end of shift and the clock out time.</p>\n<p>Example:</p>\n<p>End Time - 3:00 PM</p>\n<p>Clock In - 2:55 PM</p>\n<p>Undertime = 5 minutes (time out short of the end of the Grace Period)</p>\n<p>Computed Undertime will be the basis of payroll deductions.</p>",
|
|
220
|
+
"systemPolicy": "<p><strong>Certify </strong></p>\n<p>1. Certification of DTR can only be done<strong> within the cutoff. </strong></p>\n<p>2. You cannot certify an <strong>incomplete DTR, current day</strong> and <strong>an ongoing shift. </strong></p>\n<p>3. Failure to certify DTRs shall result to an Auto-Certification at the end of the pay cutoff.</p>\n<p><strong>What you can do:</strong></p>\n<p>1. If with time logged (whether complete or incomplete), allows <strong>DTR amendment</strong> or <strong>Certify</strong>.</p>\n<p>2. If registered Absent, allows DTR amendment, File a Leave or Certify.</p>\n<p><strong>Amendment can be done in the following ways: </strong></p>\n<p>1. Time Recorder - Previous Shift</p>\n<p>2. Requests - File Request / DTR amendment</p>\n<p>3. Express Button - Amendment</p>\n<p><strong>Filing of leave can be done in the following ways:</strong></p>\n<p>1. Time Recorder - Previous Shift</p>\n<p>2. Requests - File Request / File Leave</p>\n<p>3. Express Button - File Leave</p>\n<p><strong>Amend DTR</strong></p>\n<p>1. You cannot amend an<strong> Ongoing / Current Shift.</strong> Filing of DTR amendment is allowed the next day after you have Clocked In.</p>\n<p>2. Amendments are disallowed by the end of the cutoff (10th or 25th).</p>\n<p>3. You are expected to amend your DTR within <strong>twenty-four (24) hours upon return to work</strong> in the succeeding Work Shift.</p>\n<p>4. You can only adjust your CLOCK IN DATE one (1) day prior your Chosen Work Date.</p>\n<p><strong>E.g</strong></p>\n<p>Work Date: November 08, 2019 - 12:00am to 09:00am</p>\n<p>Clock in Date: November 07, 2019 Clock In Time:11:00pm</p>\n<p>Clock out Date: November 08, 2019 Clock out Time:09:00am</p>\n<p>5. You can only adjust your CLOCK OUT DATE one (1) day after your Chosen Work Date.</p>\n<p><strong>E.g</strong></p>\n<p>Work Date: November 08, 2019 - 8:00am to 05:00pm</p>\n<p>Clock in Date: November 08, 2019 Clock In Time:08:00am</p>\n<p>Clock out Date: November 09, 2019 Clock out Time:02:00am</p>\n<p>6. DTR amendment request can be canceled / edited provided the request is still pending.</p>\n<p>7. DTR amendment requests that have already passed or requests that have already been denied cannot be canceled.</p>\n<p>8. DTRs that have been previously certified <strong>CANNOT</strong> be amended.</p>\n<p><strong> File Leave </strong></p>\n<p>1. Filing of Sick / Emergency Leave is allowed the next day after you have Clocked In.</p>\n<p>2. You cannot file a backdated Vacation Leave.</p>\n<p>3. You cannot file a future - dated Sick / Emergency Leave.</p>\n<p>4. The employee is expected to file a Sick or Emergency Leave within the Company online system within <strong>twenty-four (24) hours upon return to work</strong> in the succeeding Work Shift.</p>\n<p>5. Leave request can be edited provided the request is still pending.</p>\n<p>6. Approved leave request can be canceled before the effectivity date.</p>\n<p>7. Reporting to work on a day with a pre-approved SIL.</p>\n<p>- Will cancel the leave</p>\n<p>- Credit back the approved SIL to the Leave balance</p>\n<p>- Record the DTR for the day</p>",
|
|
221
|
+
"instruction": "<p><strong>What you can do:</strong></p>\n<p>1. If with time logged (whether complete or incomplete), allows DTR amendment or Certify.</p>\n<p>2. If without time logged, allows DTR Amemdment.</p>\n<p>3. If registered Absent, allows DTR amendment, File a Leave or Certify.</p>\n<p><strong>Amendment can be done in the following ways:</strong></p>\n<p>1. Time Recorder - Previous Shift</p>\n<p>2. Requests - File Request / DTR amendment</p>\n<p>3. Express Button - Amendment</p>\n<p><strong>Filing of leave can be done in the following ways:</strong></p>\n<p>1. Time Recorder - Previous Shift</p>\n<p>2. Requests - File Request / File Leave</p>\n<p>3. Express Button - File Leave</p>"
|
|
222
|
+
},
|
|
223
|
+
listRow: [
|
|
224
|
+
"COMPANY POLICY",
|
|
225
|
+
"SYSTEM POLICY",
|
|
226
|
+
"INSTRUCTION"
|
|
227
|
+
],
|
|
228
|
+
"loaded": false,
|
|
229
|
+
"cardIconDesc": false
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
menubar.info = infoMenuBar
|
|
233
|
+
break;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
232
239
|
break;
|
|
233
240
|
|
|
234
241
|
default: break;
|
|
@@ -236,14 +243,14 @@ const TestMenuBar = () => {
|
|
|
236
243
|
statedata.menubar = menubar;
|
|
237
244
|
statedata.modal = modal;
|
|
238
245
|
|
|
239
|
-
setStateData({...statedata});
|
|
246
|
+
setStateData({ ...statedata });
|
|
240
247
|
}
|
|
241
248
|
|
|
242
249
|
const displayModal = (event) => {
|
|
243
250
|
event.preventDefault();
|
|
244
251
|
modal.show = true;
|
|
245
252
|
statedata.modal = modal
|
|
246
|
-
setStateData({...statedata});
|
|
253
|
+
setStateData({ ...statedata });
|
|
247
254
|
}
|
|
248
255
|
|
|
249
256
|
const getModalActions = (action, data) => {
|
|
@@ -251,13 +258,24 @@ const TestMenuBar = () => {
|
|
|
251
258
|
console.log(action, data, 'action modal');
|
|
252
259
|
switch (action) {
|
|
253
260
|
case 'icon':
|
|
254
|
-
|
|
261
|
+
|
|
262
|
+
switch (data) {
|
|
263
|
+
case 'close':
|
|
264
|
+
modal.show = false;
|
|
265
|
+
break;
|
|
266
|
+
|
|
267
|
+
case 'info':
|
|
268
|
+
modal.info = 'Hello menubar info';
|
|
269
|
+
break;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
|
|
255
273
|
break;
|
|
256
274
|
default: break;
|
|
257
275
|
}
|
|
258
276
|
|
|
259
277
|
statedata.modal = modal
|
|
260
|
-
setStateData({...statedata});
|
|
278
|
+
setStateData({ ...statedata });
|
|
261
279
|
}
|
|
262
280
|
|
|
263
281
|
const View = () => {
|
|
@@ -309,6 +327,7 @@ const TestMenuBar = () => {
|
|
|
309
327
|
},
|
|
310
328
|
]
|
|
311
329
|
}}
|
|
330
|
+
info={menubar.info}
|
|
312
331
|
getActions={(action, data) => getActions(action, data)}
|
|
313
332
|
>
|
|
314
333
|
<h2>CHILDREN AGAIN</h2>
|