@firedesktop/react-base 1.19.1 → 1.20.0

package/src/App.tsx

@@ -6,10 +6,11 @@ import { Components, ConfigurationLoader, Utils, LanguageLoader } from './lib';
 
 import TestLabelFunction from './TestLabelFunction';
 
-import '../node_modules/@syncfusion/ej2-base/styles/bootstrap4.css';
-import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap4.css';
-import '../node_modules/@syncfusion/ej2-icons/styles/bootstrap4.css';
-import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap4.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '@syncfusion/ej2-base/styles/bootstrap4.css';
+import '@syncfusion/ej2-buttons/styles/bootstrap4.css';
+import '@syncfusion/ej2-icons/styles/bootstrap4.css';
+import '@syncfusion/ej2-popups/styles/bootstrap4.css';
 
 import './lib/styles/base.css';
 import './lib/styles/syncfusion_bootstrap4.css';
@@ -30,6 +31,7 @@ const appReducer = (state = {}, action: any) => {
 function App() {
   const [options, setOptions] = useState<{ value: string }[]>([]);
   const [spinning, setSpinning] = useState(false);
+  const [activePage, setActivePage] = useState(4);
 
 
   function onGenericServerError(status: number) {
@@ -49,7 +51,42 @@ function App() {
 
     const runner = new Utils.Fetch.FetchWrapper(null, labels, status_401, status_403);
 
+    // var req = new XMLHttpRequest();
+    // req.open('POST', 'https://192.168.12.164:656/flowbot/Authentication/LoginWithForm', true);
+    // req.setRequestHeader('Content-Type', 'application/json');
+    // req.setRequestHeader('X-Token', '');
+    // req.addEventListener('readystatechange', function (ev: Event) {
+    //   debugger;
+    //   console.log(ev);
+    //   // if (this.readyState === 4 && (this.status === 401 || this.status === 403)) {
+    //   //   window.location.href = '#/logoff';
+    //   // }
+    // }, false);
+    // req.onreadystatechange = function () {
+    //   if (req.readyState === 4) {
+    //     if (req.status >= 200 && req.status < 400) {
+    //       debugger;
+    //     } else if (req.status === 400) {
+    //       debugger;
+    //     } else if (req.status === 401 || req.status === 403) {
+    //       debugger;
+    //     } else {
+    //       debugger;
+    //     }
+    //   }
+    // };
+    // req.send();
+
     setSpinning(true);
+    // runner.post('https://192.168.12.164:656/flowbot/Authentication/LoginWithForm', undefined, undefined, { username: 'admin', password: 'a' })
+    //   .then((authentication: any) => {
+    //     console.log(authentication);
+    //     setSpinning(false);
+
+    //   }).catch((errorMessage: any) => {
+    //     console.log(errorMessage);
+    //     setSpinning(false);
+    //   });
     runner.get('https://my-json-server.typicode.com/typicode/demo/posts', null, onGenericServerError, null, false, false).then(response => {
       // @ts-ignore
       const values = response.map(x => {
@@ -75,12 +112,18 @@ function App() {
     };
   };
 
+
+  const onPageChange = (nextPage: number) => {
+    setActivePage(nextPage);
+  };
+
   // @ts-ignore 
   const store = createStore(appReducer);
 
   return (
 
     <Provider store={store}>
+      <Components.AppPagination activePage={activePage} itemsPerPage={10} onPageChange={onPageChange} totalItems={8} maxSize={9} />
       <Components.Spin spinning={spinning} />
       <Components.AppIcon name={'Pin'} className='dark-pink-svg' />
       <TestLabelFunction />

package/src/lib/components/AppPagination.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { AppIcon } from '.';
+
+type PropType = {
+    activePage: number,
+    itemsPerPage: number,
+    maxSize?: number,
+    onPageChange: (page: number) => void,
+    pageFontSize?: number,
+    totalItems: number
+};
+function AppPagination({ activePage, itemsPerPage, maxSize = 5, onPageChange, pageFontSize = 14, totalItems }: PropType) {
+    const calculatePagination = (activePage: number, itemsPerPage: number, maxSize: number, totalItems: number): { totalPages: number, paginationArray: Array<number> } => {
+        if (totalItems) {
+            return pagination(activePage, itemsPerPage, maxSize, totalItems);
+        } else {
+            return {
+                totalPages: 1,
+                paginationArray: [1]
+            };
+        }
+    };
+
+    const pagination = (activePage: number, itemsPerPage: number, maxSize: number, totalItems: number): { totalPages: number, paginationArray: Array<number> } => {
+        const totalPages = Math.ceil((totalItems || 1) / itemsPerPage);
+        const allPages = Array.from(Array(totalPages), (_, x) => x + 1);
+
+        if (maxSize >= allPages.length)
+            return { totalPages, paginationArray: Array.from(new Set(allPages)) };
+
+        const paginationArray = [];
+        const beforePages = Math.trunc(maxSize / 2);
+        let firstPageToShow = activePage;
+        while (true) {
+            if (firstPageToShow === 1 || firstPageToShow === activePage - beforePages)
+                break;
+            firstPageToShow--;
+        }
+
+        const delta = firstPageToShow + maxSize - 1 - totalPages;
+        const endPage = firstPageToShow + maxSize - 1 >= totalPages ? totalPages : firstPageToShow + maxSize - 1;
+        if (delta > 0)
+            firstPageToShow -= delta;
+        console.log(endPage);
+        for (let index = firstPageToShow; index <= endPage; index++)
+            paginationArray.push(index);
+
+        return { totalPages, paginationArray: Array.from(new Set(paginationArray)) };
+    };
+
+    const { paginationArray, totalPages } = calculatePagination(activePage, itemsPerPage, maxSize, totalItems);
+
+
+    const goToFirst = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        if (activePage !== 1)
+            onPageChange(1);
+    };
+
+    const goToLast = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        if (activePage !== totalPages)
+            onPageChange(totalPages);
+    };
+
+    const goToMext = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        if (activePage !== totalPages)
+            onPageChange(activePage + 1);
+    };
+
+    const goToPrev = (event: React.MouseEvent<HTMLLIElement>) => {
+        event.preventDefault();
+        if (activePage !== 1)
+            onPageChange(activePage - 1);
+    };
+
+    return (
+        <nav aria-label="Page navigation">
+            <ul className="pagination">
+                {/* First */}
+                <li className="page-item" onClick={goToFirst}>
+                    <span aria-hidden="true">
+                        <AppIcon name={'arrow-first'} />
+                    </span>
+                </li>
+                {/* Prev */}
+                <li className="page-item disabled" onClick={goToPrev}>
+                    <span aria-hidden="true">
+                        <AppIcon name={'arrow-prev'} />
+                    </span>
+                </li>
+
+
+                {paginationArray.map((page: number, index: number) => (
+                    <li key={index}
+                        className={`page-item ${page === activePage ? 'active' : ''}`}
+                        onClick={() => onPageChange(page)}
+                        style={{ borderRadius: 5 }} >
+                        <span aria-hidden="true" style={{ fontSize: pageFontSize }}>
+                            {page} <span className="sr-only">(current)</span>
+                        </span>
+                    </li>
+                ))}
+
+                {/* Next */}
+                <li className="page-item" onClick={goToMext}>
+                    <span aria-hidden="true">
+                        <AppIcon name={'arrow-next'} />
+                    </span>
+                </li>
+                {/* Last */}
+                <li className="page-item" onClick={goToLast}>
+                    <span aria-hidden="true">
+                        <AppIcon name={'arrow-last'} />
+                    </span>
+                </li>
+            </ul>
+        </nav>
+    );
+}
+
+export default AppPagination;

package/src/lib/components/Toaster/Types.ts

@@ -5,7 +5,7 @@ export type Toaster_Type =
     | 'Warning';
 
 export type Toaster_Prop_Type = {
-    content: string,
+    content?: string,
     title: string,
     type: Toaster_Type
 }

package/src/lib/components/index.ts

@@ -1,7 +1,8 @@
 import AppIcon from './AppIcon';
 import AppInput from './AppInput';
+import AppPagination from './AppPagination';
 import Spin from './Spin';
 import Toaster from './Toaster/Toaster';
 import * as Toaster_Types from './Toaster/Types';
 
-export { AppIcon, AppInput, Spin, Toaster, Toaster_Types };
+export { AppIcon, AppInput, AppPagination, Spin, Toaster, Toaster_Types };

package/src/lib/styles/base.css

@@ -365,4 +365,35 @@
   .AppInput_form svg{
     position: absolute;
   }
+
+  /*******************************************************************************/
+  /*  AppPagination    */
+.page-item {
+  cursor: pointer;
+   margin-left: 2px;
+   margin-right: 2px;
+}
+
+.page-item span {
+    width: 28px;
+    height: 27px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .page-item.active span {
+    background: var(--background-color);
+    border-radius: 5px;
+    width: 28px;
+    height: 27px;
+    padding: 0;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff !important;
+  }
+  
+
   

package/src/lib/utils/fetch/Types.ts

@@ -7,5 +7,5 @@ export interface ILabels {
 
 export type AdditionalParamsType = {
     name: string,
-    value: string
+    value: string | number
 }

package/src/lib/utils/fetch/fetchWrapper.ts

@@ -26,23 +26,25 @@ class FetchWrapper {
             this.labels = Constants.labels;
     }
 
-    get = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false) => {
-        return this.generic('GET', url, token, onGenericServerError, params, isFile, isBlob);
+    get = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlobInReturn = false) => {
+        return this.generic('GET', url, token, onGenericServerError, params, isFile, isBlobInReturn);
     }
 
-    post = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false, additionalParams: Types.AdditionalParamsType[] = []) => {
-        return this.generic('POST', url, token, onGenericServerError, params, isFile, isBlob, this.apiVersion, additionalParams);
+    post = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlobInReturn = false,
+        additionalParams: Types.AdditionalParamsType[] = []) => {
+        return this.generic('POST', url, token, onGenericServerError, params, isFile, isBlobInReturn, this.apiVersion, additionalParams);
     }
 
-    put = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false) => {
-        return this.generic('PUT', url, token, onGenericServerError, params, isFile, isBlob);
+    put = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlobInReturn = false) => {
+        return this.generic('PUT', url, token, onGenericServerError, params, isFile, isBlobInReturn);
     }
 
-    delete = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false) => {
-        return this.generic('DELETE', url, token, onGenericServerError, params, isFile, isBlob);
+    delete = (url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlobInReturn = false) => {
+        return this.generic('DELETE', url, token, onGenericServerError, params, isFile, isBlobInReturn);
     }
 
-    generic = (method: string, url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false, isBlob = false, version = this.apiVersion, additionalParams: Types.AdditionalParamsType[] = []) => {
+    generic = (method: string, url: string, token?: string, onGenericServerError?: (status: number) => void, params?: Blob | any, isFile = false,
+    isBlobInReturn = false, version = this.apiVersion, additionalParams: Types.AdditionalParamsType[] = []) => {
         // Headers & Body
         let body: BodyInit;
         const headers = new Headers();
@@ -62,7 +64,7 @@ class FetchWrapper {
                 if (additionalParams) {
                     for (let index = 0; index < additionalParams.length; index++) {
                         const element = additionalParams[index];
-                        formData.append(element.name, element.value);
+                        formData.append(element.name, '' + element.value);
                     }
                 }
             } else {
@@ -90,7 +92,7 @@ class FetchWrapper {
                 if (response.status < 200 || response.status >= 300)
                     throw response;
 
-                return isBlob ? response.blob() : response.json();
+                return isBlobInReturn ? response.blob() : response.json();
             })
             .then(json => {
                 return json;

package/src/lib/utils/labels/LanguageManager.ts

@@ -47,4 +47,3 @@ function LanguageManager() {
 }
 
 export default LanguageManager;
-

package/tsconfig.json

@@ -13,7 +13,7 @@
     "declaration": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
     "noFallthroughCasesInSwitch": true,
@@ -27,4 +27,4 @@
   "include": [
     "src/lib"
   ]
-}
+}