empower-container 0.1.4 → 0.1.7

package/README.md

@@ -5,132 +5,134 @@
 
 
 ## 1) Menubar
-#### Implementation
-```
+###  Implementation
+```js
 import { MenuBar } from 'empoower-container';
 ```
-#### Options
-    config: {
-        title: 'Test Title',
-        icon: SVG_REQUEST,
-        showInfo: true,
-        iconType: ['check', "back", 'standard']
-    },
-            
-___
-    button {
-        show: true
-        actions: [{
+### Options
+
+```js 
+config: {
+    title: 'Test Title',
+    icon: SVG_REQUEST,
+    showInfo: true,
+    iconType: ['check', "back", 'standard']
+}
+```
+```js
+button {
+    show: true
+    actions: [{
+        class: 'button',
+        label: "Submit",
+        action: "readytosubmit",       // string optional
+        icon: SVG_SUBMIT
+    }]
+}
+```
+```js
+buttonFooter: { 
+    show: true,
+    actions: [{
             class: 'button',
             label: "Submit",
-            action: "readytosubmit",       // string optional
-            icon: SVG_SUBMIT
-        }]
-    }
- 
-___
-
-    buttonFooter: { 
-        show: true,
-        actions: [{
-                class: 'button',
-                label: "Submit",
-                action: "footer-submit",       // string optional
-                icon: SVG_SUBMIT,
-                show: true
-        }]
+            action: "footer-submit",       // string optional
+            icon: SVG_SUBMIT,
+            show: true
+    }]
+}
+```
+```js
+pagination: {
+    show: true,
+    hideSummary: false,
+    counter: 10,
+    perPage: 10,
+    page: 1,
+    total: 35,
+}
+```
+```js 
+pivot: {
+    show: true,
+    selected: 'all',
+    actions: [
+        {
+            label: "All",
+            value: "all",       // string optional
+        },
+        {
+            label: "Pending",
+            value: "pending",       // string optional
+        },
+        {
+            label: "Approved",
+            value: "approved",       // string optional
+        },
+        {
+            label: "Rejected",
+            value: "rejected",       // string optional
+        },
+        {
+            label: "Cancelled",
+            value: "cancelled",    // string optional
+        },
+    ]
+}
+```
+```js
+dropdown: {
+    show: true,
+    title: 'File Test',
+    type: 'date-picker-monthly',
+    selection: {
+        startDate: "Feb 2021",
+        endDate: "Feb 2021",
     },
-
-___
-
-    pagination: {
-        show: true,
-        hideSummary: false,
-        counter: 10,
-        perPage: 10,
-        page: 1,
-        total: 35,
-    }
-___
-
-    pivot: {
-        show: true,
-        selected: 'all',
-        actions: [
-            {
-                label: "All",
-                value: "all",       // string optional
-            },
-            {
-                label: "Pending",
-                value: "pending",       // string optional
-            },
-            {
-                label: "Approved",
-                value: "approved",       // string optional
-            },
-            {
-                label: "Rejected",
-                value: "rejected",       // string optional
-            },
-            {
-                label: "Cancelled",
-                value: "cancelled",    // string optional
-            },
-        ]
-    }
-___
-
-    dropdown: {
-        show: true,
-        title: 'File Test',
-        type: 'date-picker-monthly',
-        selection: {
-            startDate: "Feb 2021",
-            endDate: "Feb 2021",
+}
+```
+```js
+search: {
+    show: true,
+    value: ''
+}
+```
+```js 
+undoButton: {
+    show: false,
+    isFooter: true,
+    actions: [
+        {
+            class: 'button disabled',
+            show: true,
+            label: "Submit",
+            action: "submit",        
+            icon: SVG_SUBMIT,
+            timer: 3,
+            disabled: true
         },
-    }
-___
-
-    search: {
-        show: true,
-        value: ''
-    }
-    
-___
-    undoButton: {
-        show: false,
-        isFooter: true,
-        actions: [
-            {
-                class: 'button disabled',
-                show: true,
-                label: "Submit",
-                action: "submit",       // string optional
-                icon: SVG_SUBMIT,
-                timer: 3,
-                disabled: true
-            },
-            {
-                show: true,
-                label: "Undo Request",
-                action: "undo-request",       // string optional
-                icon: SVG_UNDO
-            },
-        ]
-    }
-            
-___
-    check: {
-        disabled: false,
-        selected: 0,
-        total: 1
-    }
-___
-    info: 'Sample Information'
+        {
+            show: true,
+            label: "Undo Request",
+            action: "undo-request",        
+            icon: SVG_UNDO
+        },
+    ]
+}
+```
+```js 
+check: {
+    disabled: false,
+    selected: 0,
+    total: 1
+}
+```
+```js 
+info: 'Sample Information'
+```
 ### Usage
 
-```
+```html
  <MenuBar
     config={menubar.config}
     button={menubar.button}
@@ -152,135 +154,137 @@ ___
 
 
 ## 2) Modal
-#### Implementation
-```
+### Implementation
+```js
 import { Modal } from 'empoower-container';
 ```
 ### Options
+
     show: false,
     hideMenuBar: false, //optional
     
-     config: {
-            title: 'Test Title',
-            icon: SVG_REQUEST,
-            showInfo: true,
-            iconType: ['standard', 'close'],
-            modalSize: 'lg'
-        },
-    
-    button {
-        show: true
-        actions: [{
+```js
+config: {
+    title: 'Test Title',
+    icon: SVG_REQUEST,
+    showInfo: true,
+    iconType: ['standard', 'close'],
+    modalSize: 'lg'
+}
+```
+```js    
+button {
+    show: true
+    actions: [{
+        class: 'button',
+        label: "Submit",
+        action: "readytosubmit",       // string optional
+        icon: SVG_SUBMIT
+    }]
+}
+```
+```js
+buttonFooter: { 
+    show: true,
+    actions: [{
             class: 'button',
             label: "Submit",
-            action: "readytosubmit",       // string optional
-            icon: SVG_SUBMIT
-        }]
-    }
- 
-___
-
-    buttonFooter: { 
-        show: true,
-        actions: [{
-                class: 'button',
-                label: "Submit",
-                action: "footer-submit",       // string optional
-                icon: SVG_SUBMIT,
-                show: true
-        }]
+            action: "footer-submit",       // string optional
+            icon: SVG_SUBMIT,
+            show: true
+    }]
+},
+```
+```js
+pagination: {
+    show: true,
+    hideSummary: false,
+    counter: 10,
+    perPage: 10,
+    page: 1,
+    total: 35,
+}
+```
+```js
+pivot: {
+    show: true,
+    selected: 'all',
+    actions: [
+        {
+            label: "All",
+            value: "all",       // string optional
+        },
+        {
+            label: "Pending",
+            value: "pending",       // string optional
+        },
+        {
+            label: "Approved",
+            value: "approved",       // string optional
+        },
+        {
+            label: "Rejected",
+            value: "rejected",       // string optional
+        },
+        {
+            label: "Cancelled",
+            value: "cancelled",    // string optional
+        },
+    ]
+}
+```
+```js
+dropdown: {
+    show: true,
+    title: 'File Test',
+    type: 'date-picker-monthly',
+    selection: {
+        startDate: "Feb 2021",
+        endDate: "Feb 2021",
     },
-
-___
-
-    pagination: {
-        show: true,
-        hideSummary: false,
-        counter: 10,
-        perPage: 10,
-        page: 1,
-        total: 35,
-    }
-___
-
-    pivot: {
-        show: true,
-        selected: 'all',
-        actions: [
-            {
-                label: "All",
-                value: "all",       // string optional
-            },
-            {
-                label: "Pending",
-                value: "pending",       // string optional
-            },
-            {
-                label: "Approved",
-                value: "approved",       // string optional
-            },
-            {
-                label: "Rejected",
-                value: "rejected",       // string optional
-            },
-            {
-                label: "Cancelled",
-                value: "cancelled",    // string optional
-            },
-        ]
-    }
-___
-
-    dropdown: {
-        show: true,
-        title: 'File Test',
-        type: 'date-picker-monthly',
-        selection: {
-            startDate: "Feb 2021",
-            endDate: "Feb 2021",
+}
+```
+```js
+search: {
+    show: true,
+    value: ''
+}
+```
+```js
+undoButton: {
+    show: false,
+    isFooter: true,
+    actions: [
+        {
+            class: 'button disabled',
+            show: true,
+            label: "Submit",
+            action: "submit",       // string optional
+            icon: SVG_SUBMIT,
+            timer: 3,
+            disabled: true
         },
-    }
-___
-
-    search: {
-        show: true,
-        value: ''
-    }
-    
-___
-    undoButton: {
-        show: false,
-        isFooter: true,
-        actions: [
-            {
-                class: 'button disabled',
-                show: true,
-                label: "Submit",
-                action: "submit",       // string optional
-                icon: SVG_SUBMIT,
-                timer: 3,
-                disabled: true
-            },
-            {
-                show: true,
-                label: "Undo Request",
-                action: "undo-request",       // string optional
-                icon: SVG_UNDO
-            },
-        ]
-    }
-            
-___
-    check: {
-        disabled: false,
-        selected: 0,
-        total: 1
-    }
-___
-    info: 'Sample Information'
-    
-### Usage
+        {
+            show: true,
+            label: "Undo Request",
+            action: "undo-request",       // string optional
+            icon: SVG_UNDO
+        },
+    ]
+}
 ```
+```js
+check: {
+    disabled: false,
+    selected: 0,
+    total: 1
+}
+```
+```js
+info: 'Sample Information'
+```
+### Usage
+```html
 <Modal
     config={menubar.config}
     button={menubar.button}

package/dist/cjs/DatetimeFormatter.js

@@ -135,6 +135,8 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         newFormat = dayName + ", " + dayDate + " " + monthName + " " + year;
                         break;
                     case "momentsAgo":
+                        var diff = 0;
+                        var diffMinute = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -143,28 +145,28 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                             else {
                                 //check if hour has been passed
                                 if (todayTS >= dateTS + 3600) {
-                                    var diff = todayTS - dateTS;
+                                    diff = todayTS - dateTS;
                                     if (diff === 0) {
                                         newFormat = "An hour ago";
                                     }
-                                    var diffHour = diff / 3600;
-                                    diffHour = ~~diffHour;
-                                    newFormat = diffHour === 1 ? "An hour ago" : diffHour + " hours ago";
+                                    var diffHour_1 = diff / 3600;
+                                    diffHour_1 = ~~diffHour_1;
+                                    newFormat = diffHour_1 === 1 ? "An hour ago" : diffHour_1 + " hours ago";
                                 }
                                 else {
                                     //check if a minute has been passed
                                     if (todayTS >= dateTS + 60) {
-                                        var diff = todayTS - dateTS;
+                                        diff = todayTS - dateTS;
                                         if (diff === 0) {
                                             newFormat = "A minute ago";
                                         }
-                                        var diffMinute = diff / 60;
+                                        diffMinute = diff / 60;
                                         diffMinute = ~~diffMinute;
                                         newFormat = diffMinute === 1 ? "A minute ago" : diffMinute + " minutes ago";
                                     }
                                     else {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0 || diff <= 10) {
+                                        var diff_1 = todayTS - dateTS;
+                                        if (diff_1 === 0 || diff_1 <= 10) {
                                             newFormat = "Few seconds ago";
                                         }
                                         else {
@@ -179,6 +181,7 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         }
                         break;
                     case "momentsAgoConvo":
+                        var diffHour = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -187,28 +190,28 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                             else {
                                 //check if hour has been passed
                                 if (todayTS >= dateTS + 3600) {
-                                    var diff = todayTS - dateTS;
-                                    if (diff === 0) {
+                                    var diff_2 = todayTS - dateTS;
+                                    if (diff_2 === 0) {
                                         newFormat = "An hour ago";
                                     }
-                                    var diffHour = diff / 3600;
+                                    diffHour = diff_2 / 3600;
                                     diffHour = ~~diffHour;
                                     newFormat = diffHour === 1 ? "An hour ago" : diffHour + " hours ago";
                                 }
                                 else {
                                     //check if a minute has been passed
                                     if (todayTS >= dateTS + 60) {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0) {
+                                        var diff_3 = todayTS - dateTS;
+                                        if (diff_3 === 0) {
                                             newFormat = "A minute ago";
                                         }
-                                        var diffMinute = diff / 60;
-                                        diffMinute = ~~diffMinute;
-                                        newFormat = diffMinute === 1 ? "A minute ago" : diffMinute + " minutes ago";
+                                        var diffMinute_1 = diff_3 / 60;
+                                        diffMinute_1 = ~~diffMinute_1;
+                                        newFormat = diffMinute_1 === 1 ? "A minute ago" : diffMinute_1 + " minutes ago";
                                     }
                                     else {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0 || diff <= 10) {
+                                        var diff_4 = todayTS - dateTS;
+                                        if (diff_4 === 0 || diff_4 <= 10) {
                                             newFormat = "Few moments ago";
                                         }
                                         else {
@@ -227,11 +230,11 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
-                                var diff = todayTS - dateTS;
-                                if (diff === 0) {
+                                var diff_5 = todayTS - dateTS;
+                                if (diff_5 === 0) {
                                     newFormat = "1 day";
                                 }
-                                var diffDay = diff / 86400;
+                                var diffDay = diff_5 / 86400;
                                 diffDay = ~~diffDay;
                                 newFormat = diffDay === 1 ? "1 day" : diffDay + " days";
                             }

package/dist/cjs/Information.js

@@ -33,16 +33,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importStar(require("react"));
-var react_render_html_1 = __importDefault(require("react-render-html"));
 var Information = function (_a) {
     var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
     var _b = (0, react_1.useState)(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
+    var renderHtml = function (html) {
+        return (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: html } });
+    };
     var showRowDetails = function (e, idx) {
         e && e.preventDefault();
         if (rowAnchorEl === idx) {
@@ -54,9 +53,9 @@ var Information = function (_a) {
         setRowAnchorEl(rowAnchorEl);
     };
     var View = function () {
-        return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "popover popover-i" }, { children: typeof desc != 'undefined' && desc ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "popover-i-close", onClick: hide })] })), (0, jsx_runtime_1.jsx)("div", { children: typeof items != 'undefined' && items ? (0, react_render_html_1.default)(items) : '' })] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover-i-content" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "popover-i-title" }, { children: [(0, jsx_runtime_1.jsx)("h6", { children: title }), (0, jsx_runtime_1.jsx)("div", { className: "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: "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 ? ((0, jsx_runtime_1.jsx)("img", { src: "/images/icons/icon-arrowup-gray.svg", alt: "" })) : ((0, jsx_runtime_1.jsx)("img", { src: "/images/icons/icon-arrowdown-gray.svg", alt: "" }))] })), rowAnchorEl === key ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? (0, react_render_html_1.default)(items.companyPolicy) : '') :
-                                        (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? (0, react_render_html_1.default)(items.systemPolicy) : '') :
-                                            (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? (0, react_render_html_1.default)(items.instruction) : '')) }))) : null] }, key)); })) : null) : null] }))) })) });
+        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 ? ((0, jsx_runtime_1.jsx)("img", { src: "/images/icons/icon-arrowup-gray.svg", alt: "" })) : ((0, jsx_runtime_1.jsx)("img", { src: "/images/icons/icon-arrowdown-gray.svg", alt: "" }))] })), 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) : '') :
+                                        (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
+                                            (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')) }))) : null] }, key)); })) : null) : null] }))) })) });
     };
     return View();
 };

package/dist/cjs/MenuBar.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../scss/style.scss';
-import '../scss/library/menubar.scss';
 interface IMenuBarProps {
     config?: any;
     info?: any;