empower-container 0.1.12 → 0.1.13

package/src/main/Modal.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var MenuBar_1 = __importDefault(require("./MenuBar"));
+require("../scss/style.scss");
+var Modal = function (_a) {
+    var id = _a.id, show = _a.show, hideMenuBar = _a.hideMenuBar, config = _a.config, getActions = _a.getActions, children = _a.children, button = _a.button, dropdown = _a.dropdown, search = _a.search, pagination = _a.pagination, pivot = _a.pivot, check = _a.check, toggle = _a.toggle, undoButton = _a.undoButton, mainButton = _a.mainButton, buttonFooter = _a.buttonFooter, info = _a.info, customClass = _a.customClass;
+    var sendActions = function (actions, data) {
+        returnValues(actions, data);
+    };
+    var returnValues = function (action, data, addedParam) {
+        if (addedParam === void 0) { addedParam = null; }
+        return getActions ? getActions(action, data, addedParam) : false;
+    };
+    return (show ? react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "em-modal " + customClass },
+        react_1.default.createElement("div", { className: "em-modal-container", "data-testid": id ? id : 'default-modal-test' },
+            react_1.default.createElement("div", { className: "em-card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, !hideMenuBar ? (react_1.default.createElement(MenuBar_1.default, { config: config, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } },
+                react_1.default.createElement("div", { className: "em-card-content" }, children))) : react_1.default.createElement("div", { className: "em-card-content card-content" }, children)))), document.getElementById('root')) : null);
+};
+exports.default = Modal;

package/src/main/Modal.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import MenuBar from "./MenuBar";
+import '../scss/style.scss';
+
+
+interface IModalProps {
+    id?:string,
+    show: boolean,
+    hideMenuBar?:boolean,
+    config: {
+      title: string,
+      icon: any,
+      showInfo: boolean,
+      iconType: Array<string>,
+      modalSize:string
+    },
+    getActions:any
+    children?: any
+    button?: {
+        show: boolean
+        actions?: Array<object>
+    },
+    
+    dropdown?: any,
+    search?: any,
+    pagination?: any,
+    pivot?: any,
+    check?: any,
+    toggle?: any,
+    mainButton?: any,
+    buttonFooter?: any,
+    undoButton?:any,
+    info?:any,
+    customClass?: string,
+   
+}
+
+
+
+const Modal: React.FunctionComponent<IModalProps> = ({id, show,hideMenuBar, config, getActions, children, button, dropdown, search, pagination, pivot, check,toggle, undoButton, mainButton, buttonFooter, info, customClass  }) => {
+    const sendActions = (actions:string,data:string) => {
+        returnValues(actions,data)
+    }
+
+    let returnValues = (action:string, data:string, addedParam:any = null) => {
+        return getActions ? getActions(action, data, addedParam) : false;
+    }
+
+    return (
+        show ? ReactDOM.createPortal(
+            <div className={"em-modal "+ customClass }>
+                <div className="em-modal-container" data-testid={id ? id : 'default-modal-test'}>
+                     <div className={`em-card card-modal modal-${config.modalSize ? config.modalSize :   'md'}`}>
+                        {
+                            !hideMenuBar ? (
+                                <MenuBar 
+                                    config={config}
+                                    button={button}
+                                    pagination={pagination}
+                                    pivot={pivot}
+                                    dropdown={dropdown}
+                                    search={search}
+                                    toggle={toggle}
+                                    undoButton={undoButton}
+                                    buttonFooter={buttonFooter}
+                                    check={check}
+                                    info={info}
+                                    getActions={(actions:any,data:any) => sendActions(actions,data)}
+                                >
+                                    <div className="em-card-content">{ children }</div>
+                                </MenuBar>
+                            ) : <div className="em-card-content card-content">{ children }</div>
+                        }
+                    </div>
+                </div>
+            </div>,
+            document.getElementById('root')!
+        ) : null
+    )
+}
+
+export default Modal;

package/{dist/esm → src/main}/constants/Constant.js

@@ -1,12 +1,21 @@
 import { SVG_CHECK_ACTIVE, SVG_CHECK_INACTIVE, SVG_CHECK_NEUTRAL } from '../assets/Asset';
+
 // Constant svg of checkbox
-export var CHECKBOX = {
-    ALL: (SVG_CHECK_ACTIVE),
-    FEW: (SVG_CHECK_NEUTRAL),
-    NONE: (SVG_CHECK_INACTIVE)
-};
+export const CHECKBOX= {
+    ALL: (
+        SVG_CHECK_ACTIVE
+    ),
+    FEW: (
+        SVG_CHECK_NEUTRAL
+    ),
+    NONE: (
+        SVG_CHECK_INACTIVE
+    )
+}
+
+
 // Constant list of months
-export var MONTH_LIST = [
+export const MONTH_LIST = [
     { label: "Jan", value: "January" },
     { label: "Feb", value: "February" },
     { label: "Mar", value: "March" },
@@ -20,13 +29,16 @@ export var MONTH_LIST = [
     { label: "Nov", value: "November" },
     { label: "Dec", value: "December" },
 ];
+
 // Default per-page-options
-export var PAGE_OPTION = [
+export const PAGE_OPTION = [
     { value: '10', label: '10' },
     { value: '20', label: '20' },
     { value: '30', label: '30' },
     { value: '40', label: '40' },
     { value: '50', label: '50' }
 ];
-export var MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-export var INFO_LOADER = '<div className="l-info-content l-shine-container">  <div className="l-shine"></div><div className="l-stats-text"><div className="l-text"><span className="w-40"></span><span className="w-20"></span></div><div className="l-text-h"><span className="w-30"></span><span className="w-60"></span><span className="w-40"></span></div></div></div >';
+
+export const MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+export const INFO_LOADER = '<div className="l-info-content l-shine-container">  <div className="l-shine"></div><div className="l-stats-text"><div className="l-text"><span className="w-40"></span><span className="w-20"></span></div><div className="l-text-h"><span className="w-30"></span><span className="w-60"></span><span className="w-40"></span></div></div></div >';

package/{dist/esm/index.d.ts → src/main/index.tsx}

@@ -1,3 +1,5 @@
+
 import MenuBar from "./MenuBar";
 import Modal from "./Modal";
-export { MenuBar, Modal };
+
+export {MenuBar, Modal};

package/{dist/cjs → src/main}/inputs/Input.js

@@ -10,9 +10,31 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 require("../../scss/style.scss");
 var sanitizeValue = function (txt, props) {
     var pattern = null;
@@ -97,10 +119,17 @@ var Input = function (_a) {
             return null;
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-input " + customClass }, { children: config.type === 'time' ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'e-input e-input-time ' + (config.disabled ? 'input-disabled' : ""), "data-testid": "component-input" }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, config, { onChange: onChangeHandler })), config.disabled || !config.value ? null : ((0, jsx_runtime_1.jsx)("div", __assign({ className: 'e-input-icon', onClick: clearValuesHandler }, { children: (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: "M3.00005 14.7895L5.21058 17L10 12.2106L14.7895 17.0001L17 14.7895L12.2105 10.0001L17.0001 5.21053L14.7895 3L10 7.78953L5.21053 3.00005L3 5.21058L7.78948 10.0001L3.00005 14.7895Z", fill: "#A0AEC0" }) })) })))] }))) : allowedTypes.includes(config.type) ? config.label && config.label !== '' ?
-            ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { children: config.label }), (0, jsx_runtime_1.jsx)("input", __assign({ "data-testid": "component-input" }, config, { onChange: function (event) { return onChangeHandler(event); }, onKeyPress: function (event) { return onKeypressHandler(event); } }))] }))
-            :
-                ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)("input", __assign({}, config, { className: "em-input-field", "data-testid": "component-input", onChange: function (event) { return onChangeHandler(event); }, onKeyPress: function (event) { return onKeypressHandler(event); } })) }))
-            : null })));
+    return (react_1.default.createElement("div", { className: "em-input " + customClass }, config.type === 'time' ? (react_1.default.createElement("div", { className: 'e-input e-input-time ' + (config.disabled ? 'input-disabled' : ""), "data-testid": "component-input" },
+        react_1.default.createElement("input", __assign({}, config, { onChange: onChangeHandler })),
+        config.disabled || !config.value ? null : (react_1.default.createElement("div", { className: 'e-input-icon', onClick: clearValuesHandler },
+            react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.00005 14.7895L5.21058 17L10 12.2106L14.7895 17.0001L17 14.7895L12.2105 10.0001L17.0001 5.21053L14.7895 3L10 7.78953L5.21053 3.00005L3 5.21058L7.78948 10.0001L3.00005 14.7895Z", fill: "#A0AEC0" })))))) : allowedTypes.includes(config.type) ? config.label && config.label !== '' ?
+        (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement("label", null, config.label),
+            react_1.default.createElement("input", __assign({ "data-testid": "component-input" }, config, { onChange: function (event) { return onChangeHandler(event); }, onKeyPress: function (event) { return onKeypressHandler(event); } }))))
+        :
+            (react_1.default.createElement(react_1.Fragment, null,
+                react_1.default.createElement("input", __assign({}, config, { className: "em-input-field", "data-testid": "component-input", onChange: function (event) { return onChangeHandler(event); }, onKeyPress: function (event) { return onKeypressHandler(event); } }))))
+        : null));
 };
 exports.default = Input;

package/src/main/inputs/Input.tsx

@@ -0,0 +1,193 @@
+import React, { Fragment } from "react";
+import '../../scss/style.scss';
+
+
+interface IProps {
+    config: {
+        id: string | keyof Object,
+        type: string,
+        value: string | number,
+        placeholder?: string,
+        label?: string,
+        maxLength?: number,
+        readOnly?: boolean,
+        disabled?: boolean,
+       
+
+    },
+    allowedChar?: {
+        alphabet?: boolean,
+        numeric?: boolean,
+        space?: boolean,
+        allowedSymbols?: Array<string>
+    },
+    customClass?: string
+    onChanged?: (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLDivElement, MouseEvent>, data?:string) => void,
+    keyPressed?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+
+    
+}
+
+
+const sanitizeValue = (txt: string, props: IProps['allowedChar']) => {
+    let pattern = null;
+    let newTxt = txt;
+
+    if (props && props.constructor === Object) {
+        if (props.allowedSymbols && props.allowedSymbols.constructor === Array && props.allowedSymbols.length > 0) {
+            pattern = `^a-zA-Z0-9`
+            pattern = new RegExp(`[${pattern}${props.allowedSymbols.join('')} ]`, 'gi')
+            newTxt = newTxt.replace(pattern, "");
+
+        } else {
+            pattern = `^a-zA-Z0-9`
+            pattern = new RegExp(`[${pattern} ]`, 'gi')
+            newTxt = newTxt.replace(pattern, "");
+
+        }
+
+        if (props.alphabet === false) {
+            pattern = /[a-z]/gi
+            newTxt = newTxt.replace(pattern, "");
+
+        }
+
+        if (props.numeric === false) {
+            pattern = /[0-9]+$/gi
+            newTxt = newTxt.replace(pattern, "");
+
+        }
+
+        if (props.space === false) {
+            pattern = /\s/gi
+            newTxt = newTxt.replace(pattern, "");
+
+        }
+
+    }
+    return newTxt;
+
+}
+
+const Input: React.FC<IProps> = ({ config, allowedChar, customClass, onChanged, keyPressed }) => {
+
+    customClass = customClass ? customClass : ''
+
+
+    let allowedTypes = [
+        'text', 'number', 'password', 'submit', 'reset', 'radio', 'checkbox', 'button',
+        'file', 'image', 'color', 'date', 'datetime-local', 'email', 'month', 'url', 'week',
+        'search', 'tel']
+
+
+
+    /**
+    * onChangeHandler
+    * get the current value from the input field
+    * @param {*} event - event which will be used to get the changed value
+    */
+    let onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+
+        if (config.type === 'text' && allowedChar && allowedChar.constructor === Object && Object.keys(allowedChar).length > 0) {
+            event.target.value = sanitizeValue(event.target.value, allowedChar);
+        }
+
+        if (onChanged) {
+            if (event.target.value && config.maxLength) {
+
+                if (event.target.value.toString().length <= config.maxLength) {
+                    return onChanged(event);
+                }
+            } else {
+                return onChanged(event);
+            }
+        } else {
+            console.error("No onChanged property");
+        }
+    }
+
+    /**
+   * onKeypressHandler
+   * get the current value from the input field
+   * @param {*} event - event which will be used to get the changed value
+   */
+    let onKeypressHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter') {
+            if (keyPressed) {
+                return keyPressed(event);
+            }
+        }
+    }
+
+    /**
+    * clearValuesHandler
+    * reset value into null and return it to parent
+    * @param {*} event - event
+    */
+    let clearValuesHandler = (event: React.MouseEvent<HTMLDivElement>): any => {
+       
+        if (event) {
+            event.preventDefault();
+            return null;
+        }
+
+    }
+
+
+
+
+
+    return (
+        <div className={"em-input " + customClass  }>
+            {
+                config.type === 'time' ? (
+                    <div className={'e-input e-input-time ' + (config.disabled ? 'input-disabled' : "")} data-testid="component-input">
+                        <input
+                            {...config}
+                            onChange={onChangeHandler}
+                        />
+                        {
+                            config.disabled || !config.value ? null : (
+                                <div className='e-input-icon' onClick={clearValuesHandler}>
+                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path fillRule="evenodd" clipRule="evenodd" d="M3.00005 14.7895L5.21058 17L10 12.2106L14.7895 17.0001L17 14.7895L12.2105 10.0001L17.0001 5.21053L14.7895 3L10 7.78953L5.21053 3.00005L3 5.21058L7.78948 10.0001L3.00005 14.7895Z" fill="#A0AEC0" />
+                                    </svg>
+                                </div>
+                            )
+
+
+                        }
+                    </div>
+                ) : allowedTypes.includes(config.type) ? config.label && config.label !== '' ?
+                    (
+                        <Fragment>
+
+                            <label>{config.label}</label>
+                            <input data-testid="component-input" {...config}
+                                onChange={event => onChangeHandler(event)}
+                                onKeyPress={event => onKeypressHandler(event)}
+                            />
+                        </Fragment>
+                    )
+                    :
+                    (
+                        <Fragment>
+
+                            <input
+                                {...config}
+                                className="em-input-field"
+                                data-testid="component-input"
+                                onChange={event => onChangeHandler(event)}
+                                onKeyPress={event => onKeypressHandler(event)}
+                            />
+
+                        </Fragment>
+                    )
+                        : null
+            }
+        </div>
+    );
+
+}
+
+export default Input;

package/{dist/cjs → src/main}/inputs/InputSelectionHandler.js

@@ -14,7 +14,7 @@ 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 = __importDefault(require("react"));
 var Input_1 = __importDefault(require("./Input"));
 var Select_1 = __importDefault(require("./Select"));
 var InputSelectionHandler = function (props) {
@@ -23,10 +23,10 @@ var InputSelectionHandler = function (props) {
         case "number":
         case "time":
         case "password":
-            return (0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, props));
+            return react_1.default.createElement(Input_1.default, __assign({}, props));
         case "select":
         case "multi-select":
-            return (0, jsx_runtime_1.jsx)(Select_1.default, __assign({}, props));
+            return react_1.default.createElement(Select_1.default, __assign({}, props));
         case "toggle-button":
         default:
             console.error("Invalid Input Type");

package/src/main/inputs/InputSelectionHandler.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Input from './Input';
+import Select from './Select';
+
+const InputSelectionHandler = (props:any) => {
+    switch (props.config.type) {
+        case "text":
+        case "number":
+        case "time":
+        case "password":
+            return <Input  {...props} />;
+        case "select":
+        case "multi-select":
+            return <Select {...props} />;
+        case "toggle-button":
+        default:
+            console.error("Invalid Input Type");
+            return null;
+    }
+}
+export default InputSelectionHandler;