ui-soxo-bootstrap-core 2.6.5 → 2.6.6

package/core/lib/components/spotlight-search/spotlight-search.component.scss

@@ -1,78 +1,78 @@
-.spotlight-modal {
-    .spotlight-menu-list {
-        padding: 0px;
-
-        .list-group {
-            margin-bottom: 0px;
-
-            .list-group-item {
-                padding: 12px 16px;
-            }
-        }
-    }
-
-    .skeleton-effect {
-        margin: 0px 10px;
-    }
-
-    .ant-modal-content {
-        background: transparent;
-        .ant-modal-body {
-            border-radius: 4px;
-            padding: 0px;
-            padding-top: 0px !important;
-            background: transparent;
-            .input-group {
-                height: 50px;
-                .input-group-prepend {
-                    position: absolute;
-                    top: 15px;
-                    margin: 0px 15px;
-
-                    .input-group-text {
-                        border: none;
-                        background: white;
-                    }
-                }
-                input.form-control {
-                    border-radius: 4px;
-
-                    outline: none;
-                    border: none;
-                    border-left: none;
-                    width: 100%;
-                    height: 50px;
-                    padding: 20px 50px;
-                }
-            }
-        }
-        .card {
-            margin-top: 4px;
-            background-color: white;
-            .list-group {
-                list-style-type: none;
-                // margin-left: -40px;
-                .list-group-item {
-                    // padding: 3px 0px;
-                    cursor: pointer;
-                    &:hover {
-                        background: #e7e7e7;
-                        color: black;
-                    }
-                    &:focus {
-                        background: #e7e7e7;
-                        color: black;
-                    }
-                    &.hovered {
-                        background: #e7e7e7;
-                        color: black;
-                    }
-                    &:active {
-                        background: #e7e7e7;
-                        color: black;
-                    }
-                }
-            }
-        }
-    }
-}
+.spotlight-modal {
+    .spotlight-menu-list {
+        padding: 0px;
+
+        .list-group {
+            margin-bottom: 0px;
+
+            .list-group-item {
+                padding: 12px 16px;
+            }
+        }
+    }
+
+    .skeleton-effect {
+        margin: 0px 10px;
+    }
+
+    .ant-modal-content {
+        background: transparent;
+        .ant-modal-body {
+            border-radius: 4px;
+            padding: 0px;
+            padding-top: 0px !important;
+            background: transparent;
+            .input-group {
+                height: 50px;
+                .input-group-prepend {
+                    position: absolute;
+                    top: 15px;
+                    margin: 0px 15px;
+
+                    .input-group-text {
+                        border: none;
+                        background: white;
+                    }
+                }
+                input.form-control {
+                    border-radius: 4px;
+
+                    outline: none;
+                    border: none;
+                    border-left: none;
+                    width: 100%;
+                    height: 50px;
+                    padding: 20px 50px;
+                }
+            }
+        }
+        .card {
+            margin-top: 4px;
+            background-color: white;
+            .list-group {
+                list-style-type: none;
+                // margin-left: -40px;
+                .list-group-item {
+                    // padding: 3px 0px;
+                    cursor: pointer;
+                    &:hover {
+                        background: #e7e7e7;
+                        color: black;
+                    }
+                    &:focus {
+                        background: #e7e7e7;
+                        color: black;
+                    }
+                    &.hovered {
+                        background: #e7e7e7;
+                        color: black;
+                    }
+                    &:active {
+                        background: #e7e7e7;
+                        color: black;
+                    }
+                }
+            }
+        }
+    }
+}

package/core/lib/components/table-wrapper/table-wrapper.js

@@ -1,136 +1,136 @@
-/**
- * Component used for Table 
- * 
- * @author Ashique
- * 
- * Ensure to follow a minimal standard
- */
-
-import React, { useState, useEffect,useContext } from 'react';
-
-import { GlobalContext } from '../../Store';
-
-import './table-wrapper.scss';
-
-
-import { getExportData } from './../../utils/generic/generic.utils';
-
-import { ExportReactCSV } from './../../modules/generic/generic-list/ExportReactCSV';
-
-export default function TableWrapper({ columns = [], records = [] }) {
-
-    // Get the export data 
-    let exportData = getExportData(records, columns);
-
-      const { state } = useContext(GlobalContext);
-
-       useEffect(() => {
-         
-         }, [state.theme]);
-
-    return (<div className='table-wrapper'>
-
-        <div className='page-header' >
-
-            {/*table data export to csc component*/}
-            {/* {records && <ExportReactCSV csvData={exportData} />} */}
-
-        </div>
-
-
-        <table className="styled-table">
-
-            <TableHeader columns={columns}  />
-
-            <tbody>
-
-                {
-                    records.map((row, index) => {
-
-                        return (<TableRow index={index} key={index} row={row} columns={columns} />)
-
-                    })
-                }
-
-            </tbody>
-        </table>
-    </div>)
-
-}
-
-/**
- * The Table Header Element
- * 
- * @param {*} param0 
- * @returns 
- */
-function TableHeader({ columns }) {
-    
-      const { state } = useContext(GlobalContext)
-
-    return (
-        <thead style= {{ background: state.theme.colors.headerBg, color: state.theme.colors.headerText }}>
-            <tr>
-                {columns.map((column, key) => {
-
-                    return (<TableHeaderColumn key={key} column={column} />)
-                })}
-
-            </tr>
-        </thead>
-    )
-}
-
-
-function TableHeaderColumn({ column }) {
-
-
-    return (<th>
-        {column.title}
-    </th>
-    )
-}
-
-
-
-
-/**
- * Table Row Element
- * 
- * @param {*} param0 
- * @returns 
- */
-function TableRow({ row, columns, index: rowIndex }) {
-
-    console.log(row, columns);
-    return (<tr>
-
-        {
-            columns.map((column, index) => {
-
-                return (<TableField rowIndex={rowIndex} key={index} row={row} column={column} />)
-
-            })
-        }
-
-    </tr>)
-}
-
-
-/**
- * 
- * 
- * @param {*} param0 
- * @returns 
- */
-function TableField({ row, column, rowIndex }) {
-
-    console.log(row[column.field]);
-
-    return (<td className={`${rowIndex}-${rowIndex}`}>
-
-        {column.render ? column.render(row, column, rowIndex) : row[column.field]}
-
-    </td>)
-
+/**
+ * Component used for Table 
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect,useContext } from 'react';
+
+import { GlobalContext } from '../../Store';
+
+import './table-wrapper.scss';
+
+
+import { getExportData } from './../../utils/generic/generic.utils';
+
+import { ExportReactCSV } from './../../modules/generic/generic-list/ExportReactCSV';
+
+export default function TableWrapper({ columns = [], records = [] }) {
+
+    // Get the export data 
+    let exportData = getExportData(records, columns);
+
+      const { state } = useContext(GlobalContext);
+
+       useEffect(() => {
+         
+         }, [state.theme]);
+
+    return (<div className='table-wrapper'>
+
+        <div className='page-header' >
+
+            {/*table data export to csc component*/}
+            {/* {records && <ExportReactCSV csvData={exportData} />} */}
+
+        </div>
+
+
+        <table className="styled-table">
+
+            <TableHeader columns={columns}  />
+
+            <tbody>
+
+                {
+                    records.map((row, index) => {
+
+                        return (<TableRow index={index} key={index} row={row} columns={columns} />)
+
+                    })
+                }
+
+            </tbody>
+        </table>
+    </div>)
+
+}
+
+/**
+ * The Table Header Element
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function TableHeader({ columns }) {
+    
+      const { state } = useContext(GlobalContext)
+
+    return (
+        <thead style= {{ background: state.theme.colors.headerBg, color: state.theme.colors.headerText }}>
+            <tr>
+                {columns.map((column, key) => {
+
+                    return (<TableHeaderColumn key={key} column={column} />)
+                })}
+
+            </tr>
+        </thead>
+    )
+}
+
+
+function TableHeaderColumn({ column }) {
+
+
+    return (<th>
+        {column.title}
+    </th>
+    )
+}
+
+
+
+
+/**
+ * Table Row Element
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function TableRow({ row, columns, index: rowIndex }) {
+
+    console.log(row, columns);
+    return (<tr>
+
+        {
+            columns.map((column, index) => {
+
+                return (<TableField rowIndex={rowIndex} key={index} row={row} column={column} />)
+
+            })
+        }
+
+    </tr>)
+}
+
+
+/**
+ * 
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function TableField({ row, column, rowIndex }) {
+
+    console.log(row[column.field]);
+
+    return (<td className={`${rowIndex}-${rowIndex}`}>
+
+        {column.render ? column.render(row, column, rowIndex) : row[column.field]}
+
+    </td>)
+
 }

package/core/lib/components/table-wrapper/table-wrapper.scss

@@ -1,72 +1,72 @@
-.table-wrapper {
-    .page-header {
-        justify-content: flex-end;
-
-        margin: 5px;
-    }
-}
-
-table {
-    width: 100%;
-
-    &.styled-table {
-        border-collapse: collapse;
-        // margin: 25px 0;
-        font-size: 0.9em;
-        font-family: sans-serif;
-        min-width: 400px;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-        overflow: scroll;
-
-        thead tr {
-            background-color: #009879;
-            color: #ffffff;
-            text-align: left;
-            position: sticky;
-            top: 0;
-            z-index: 99;
-            position: -webkit-sticky;
-        }
-
-        th,
-        td {
-            padding: 6px;
-            font-size: 10px;
-        }
-
-        tbody tr {
-            // height: 60px;
-
-            cursor: pointer;
-            border-bottom: 1px solid #dddddd;
-            &:hover {
-                background-color: #f1faff;
-            }
-            &:nth-of-type(even) {
-                background-color: #f3f3f3;
-            }
-            &:last-of-type {
-                border-bottom: 2px solid #009879;
-            }
-            &.active-row {
-                font-weight: bold;
-                color: #009879;
-            }
-            td {
-                &.quantity {
-                    width: 100px;
-                }
-            }
-        }
-
-        &.cart {
-            thead tr {
-                background-color: #003d98;
-            }
-            th,
-            td {
-                padding: 8px 12px;
-            }
-        }
-    }
-}
+.table-wrapper {
+    .page-header {
+        justify-content: flex-end;
+
+        margin: 5px;
+    }
+}
+
+table {
+    width: 100%;
+
+    &.styled-table {
+        border-collapse: collapse;
+        // margin: 25px 0;
+        font-size: 0.9em;
+        font-family: sans-serif;
+        min-width: 400px;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+        overflow: scroll;
+
+        thead tr {
+            background-color: #009879;
+            color: #ffffff;
+            text-align: left;
+            position: sticky;
+            top: 0;
+            z-index: 99;
+            position: -webkit-sticky;
+        }
+
+        th,
+        td {
+            padding: 6px;
+            font-size: 10px;
+        }
+
+        tbody tr {
+            // height: 60px;
+
+            cursor: pointer;
+            border-bottom: 1px solid #dddddd;
+            &:hover {
+                background-color: #f1faff;
+            }
+            &:nth-of-type(even) {
+                background-color: #f3f3f3;
+            }
+            &:last-of-type {
+                border-bottom: 2px solid #009879;
+            }
+            &.active-row {
+                font-weight: bold;
+                color: #009879;
+            }
+            td {
+                &.quantity {
+                    width: 100px;
+                }
+            }
+        }
+
+        &.cart {
+            thead tr {
+                background-color: #003d98;
+            }
+            th,
+            td {
+                padding: 8px 12px;
+            }
+        }
+    }
+}

package/core/lib/components/ui_elements/Loader.js

@@ -1,13 +1,13 @@
-import React from 'react'
-import { Spin, Icon } from 'antd';
-import { LoadingOutlined } from '@ant-design/icons'
-const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
-
-export default function Loader(props){
-    return(
-        <div className='loader-wrapper'>
-            {props.scanFlag ? <Spin indicator={antIcon} /> : <Spin tip="Loading..."/> }
-            {/* <Spin tip="Loading..."/>  */}
-        </div>
-    )
+import React from 'react'
+import { Spin, Icon } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons'
+const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+
+export default function Loader(props){
+    return(
+        <div className='loader-wrapper'>
+            {props.scanFlag ? <Spin indicator={antIcon} /> : <Spin tip="Loading..."/> }
+            {/* <Spin tip="Loading..."/>  */}
+        </div>
+    )
 }

package/core/lib/components/ui_elements/Notify.js

@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react';
-
-
-import { notification } from 'antd';
-
-const Notify = (type, msg, description = '') => {
-  notification[type]({
-    message: msg,
-    description: description
-  });
-};
-
+import React, { useState, useEffect } from 'react';
+
+
+import { notification } from 'antd';
+
+const Notify = (type, msg, description = '') => {
+  notification[type]({
+    message: msg,
+    description: description
+  });
+};
+
 export default Notify