@firedesktop/react-base 1.49.0 → 1.51.0

package/src/lib/components/AppInput.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+
+type AppInputType_Type =
+  'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'search'
+  | 'submit'
+  | 'tel'
+  | 'text'
+  | 'url'
+  | 'week';
+
+type Proptype = {
+  appIcon: any;
+  ariadescribedby?: string;
+  autoComplete?: boolean,
+  autoFocus?: boolean,
+  className?: string;
+  classNameWrapper?: string,
+  id?: string;
+  name?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  ref?: React.LegacyRef<HTMLInputElement>
+  type?: AppInputType_Type;
+  value?: string | number;
+};
+
+function AppInput({ appIcon, ariadescribedby, autoComplete = true, autoFocus = false, className, classNameWrapper, id, name, onChange, onKeyUp, placeholder, ref, type = 'text', value }: Proptype) {
+  const classWrap = classNameWrapper ? `form-group AppInput_form ${classNameWrapper}` : 'form-group AppInput_form';
+  return (
+    <div className={classWrap}>
+      <input
+        autoComplete={autoComplete ? 'on' : 'off'}
+        autoFocus={autoFocus}
+        aria-describedby={ariadescribedby}
+        className={`form-control ${className ?? ''}`}
+        id={id}
+        name={name}
+        onChange={onChange}
+        onKeyUp={onKeyUp}
+        placeholder={placeholder}
+        ref={ref}
+        type={type}
+        value={value} />
+      {appIcon}
+    </div>
+  );
+}
+
+export default AppInput;

package/src/lib/components/AppPagination.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { AppIcon } from '.';
+
+type PropType = {
+    activePage: number,
+    className?: string
+    itemsPerPage: number,
+    maxSize?: number,
+    onPageChange: (page: number) => void,
+    pageFontSize?: number,
+    totalItems: number
+};
+function AppPagination({ activePage, className, 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;
+        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" className={className ? className : ''}>
+            <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>
+                {/* Middle */}
+                {paginationArray.map((page: number, index: number) => (
+                    <li key={index}
+                        className={`page-item ${page === activePage ? 'active' : ''}`}
+                        onClick={() => {
+                            if (activePage !== page)
+                                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/Spin.tsx

@@ -0,0 +1,31 @@
+import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+import React, { useEffect } from 'react';
+
+type Spin_TYPE = {
+    spinning: boolean,
+    targetId?: string
+}
+
+/**
+ * Based on this: https://ej2.syncfusion.com/react/documentation/spinner/getting-started/
+ * @param param0 
+ */
+const Spin = ({ spinning, targetId = 'root' }: Spin_TYPE) => {
+    useEffect(() => {
+        createSpinner({
+            target: document.getElementById(targetId) as HTMLElement
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (spinning)
+        showSpinner(document.getElementById(targetId) as HTMLElement);
+    else
+        hideSpinner(document.getElementById(targetId) as HTMLElement);
+
+    return (
+        <React.Fragment />
+    );
+};
+
+export default Spin;

package/src/lib/components/Toaster/Toaster.tsx

@@ -0,0 +1,50 @@
+import { ToastComponent } from '@syncfusion/ej2-react-notifications';
+import { PositionDataModel } from '@syncfusion/ej2-popups';
+import React, { createRef, useEffect } from 'react';
+
+import '../../styles/toaster.css';
+import * as Types from './Types';
+
+
+type Toaster_Props = {
+    propertiesObject: Types.Toaster_Prop_Type
+}
+
+/**
+ * https://ej2.syncfusion.com/react/demos/?_ga=2.216203862.1349101002.1605820787-2080297629.1605485687#/material/toast/default
+ */
+const Toaster = ({ propertiesObject }: Toaster_Props) => {
+    const toastObj = createRef<any>();
+    const position: PositionDataModel = { X: 'Right' };
+
+    useEffect(() => {
+        if (propertiesObject && propertiesObject.title && propertiesObject.title !== '') {
+            toastObj.current.showCloseButton = true;
+            toastObj.current.showProgressBar = true;
+
+            if (propertiesObject.type === 'Information')
+                toastObj.current.show({ title: propertiesObject.title, content: propertiesObject.content ?? '', cssClass: 'e-toast-info', icon: 'e-info toast-icons' });
+            else if (propertiesObject.type === 'Error')
+                toastObj.current.show({
+                    title: propertiesObject.title, content: propertiesObject.content ?? '', cssClass: 'e-toast-danger', icon: 'e-error toast-icons',
+                    timeOut: 4000
+                });
+            else if (propertiesObject.type === 'Success')
+                toastObj.current.show({ title: propertiesObject.title, content: propertiesObject.content ?? '', cssClass: 'e-toast-success', icon: 'e-success toast-icons' });
+            else if (propertiesObject.type === 'Warning')
+                toastObj.current.show({ title: propertiesObject.title, content: propertiesObject.content ?? '', cssClass: 'e-toast-warning', icon: 'e-warning toast-icons' });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [propertiesObject]);
+
+    return (
+        <React.Fragment>
+            <ToastComponent
+                ref={toastObj}
+                id='toast_default'
+                position={position}></ToastComponent>
+        </React.Fragment>
+    );
+};
+
+export default Toaster;

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

@@ -0,0 +1,11 @@
+export type Toaster_Type =
+    | 'Error'
+    | 'Information'
+    | 'Success'
+    | 'Warning';
+
+export type Toaster_Prop_Type = {
+    content?: string,
+    title: string,
+    type: Toaster_Type
+}

package/src/lib/components/index.ts

@@ -0,0 +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, AppPagination, Spin, Toaster, Toaster_Types };

package/src/lib/index.ts

@@ -0,0 +1,15 @@
+import ConfigurationLoader from './utils/configuration/ConfigurationLoader';
+import ConfigurationReturner from './utils/configuration/ConfigurationReturner';
+import LanguageLoader from './utils/labels/LanguageLoader';
+import LanguageReturner from './utils/labels/LanguageReturner';
+import * as Components from './components';
+import * as Utils from './utils';
+
+export {
+    Components,
+    ConfigurationLoader,
+    ConfigurationReturner,
+    LanguageLoader,
+    LanguageReturner,
+    Utils
+};

package/src/lib/styles/base.css

@@ -0,0 +1,392 @@
+:root {
+    --background-color: linear-gradient(
+      180deg,
+      #0057ff 0%,
+      rgba(0, 87, 255, 0.7) 100%,
+      rgba(0, 87, 255, 0.7) 100%
+    );
+    --background-gradient-active: linear-gradient(
+      270deg,
+      rgba(0, 87, 255, 0.7) 0%,
+      #0057ff 100%
+    );
+  
+    --background-progress-circle: linear-gradient(
+      270deg,
+      rgba(0, 87, 255, 0.7) 0%,
+      #0057ff 78.42%
+    );
+  
+    --background-progress-fill: linear-gradient(
+      270deg,
+      rgba(106, 157, 255, 0.7) 0%,
+      #6a9dff 50.95%
+    );
+    --background-progress: linear-gradient(
+      270deg,
+      rgba(106, 157, 255, 0.7) 0%,
+      #6a9dff 100%
+    );
+    --font-Josefin-sans: "Josefin Sans", sans-serif !important;
+    --font-Roboto: "Roboto", sans-serif !important;
+    --primary-color: #0057ff;
+    --warning-color: #ffc14e;
+    --danger-color: #e80026;
+    --tertiary-color: #b1aeae;
+    --success-color: #00854d;
+    --light-color: #c0c0c0;
+    --white-color: #ffffff;
+    --dark-pink-color: #de31d2;
+    --menu-dropdown-background: rgba(238, 238, 238, 0.9);
+  }
+  
+  body {
+    background: #f7f7f7;
+    font-family: var(--font-Roboto);
+    overflow-x: hidden;
+  }
+
+  p {
+    color: var(--para-color);
+  }
+
+  .tertiary-text {
+    color: var(--tertiary-color);
+  }
+  
+  .primary-text {
+    color: var(--primary-color);
+  }
+  
+  .white-text {
+    color: var(--white-color);
+  }
+  
+  .light-text {
+    color: var(--light-color);
+  }
+  
+  .danger-text {
+    color: var(--danger-color);
+  }
+  
+  .success-text {
+    color: var(--success-color);
+  }
+  
+  .dark-pink-text {
+    color: var(--dark-pink-color);
+  }
+  
+  /* SVG  Start */
+  .warning-svg {
+    fill: var(--warning-color);
+  }
+  
+  .tertiary-svg {
+    fill: var(--tertiary-color);
+  }
+  
+  .primary-svg {
+    fill: var(--primary-color);
+  }
+  
+  .white-svg {
+    fill: var(--white-color);
+  }
+  
+  .light-svg {
+    fill: var(--light-color);
+  }
+  
+  .danger-svg {
+    fill: var(--danger-color);
+  }
+  
+  .success-svg {
+    fill: var(--success-color);
+  }
+  
+  .dark-pink-svg {
+    fill: var(--dark-pink-color);
+  }
+  
+  .warning-svg-stroke {
+    stroke: var(--warning-color);
+  }
+  
+  .tertiary-svg-stroke {
+    stroke: var(--tertiary-color);
+  }
+  
+  .primary-svg-stroke {
+    stroke: var(--primary-color);
+  }
+  
+  .white-svg-stroke {
+    stroke: var(--white-color);
+  }
+  
+  .light-svg-stroke {
+    stroke: var(--light-color);
+  }
+  
+  .danger-svg-stroke {
+    stroke: var(--danger-color);
+  }
+  
+  .success-svg-stroke {
+    stroke: var(--success-color);
+  }
+  
+  .dark-pink-svg-stroke {
+    stroke: var(--dark-pink-color);
+  }
+  /* SVG  End */ 
+  
+  /* Fonts Start */
+  .fz10 {
+    font-size: 10px;
+  }
+  
+  .fz11 {
+    font-size: 11px;
+  }
+  
+  .fz12 {
+    font-size: 12px;
+  }
+  
+  .fz13 {
+    font-size: 13px;
+  }
+  
+  .fz14 {
+    font-size: 14px;
+  }
+  
+  .fz15 {
+    font-size: 15px;
+  }
+  
+  .fz16 {
+    font-size: 16px;
+  }
+  
+  .fz17 {
+    font-size: 17px;
+  }
+  
+  .fz18 {
+    font-size: 18px;
+  }
+  
+  .fz19 {
+    font-size: 19px;
+  }
+  
+  .fz20 {
+    font-size: 20px;
+  }
+  
+  .fz21 {
+    font-size: 21px;
+  }
+  
+  .fz22 {
+    font-size: 22px;
+  }
+  
+  .fz24 {
+    font-size: 24px;
+  }
+  
+  .fz25 {
+    font-size: 25px;
+  }
+  
+  .fz26 {
+    font-size: 26px;
+  }
+  
+  .fz28 {
+    font-size: 28px;
+  }
+  
+  .fz30 {
+    font-size: 30px;
+  }
+  
+  .fz32 {
+    font-size: 32px;
+  }
+  
+  .fz34 {
+    font-size: 34px;
+  }
+  
+  .fz36 {
+    font-size: 36px;
+  }
+  
+  .fz38 {
+    font-size: 38px;
+  }
+  
+  .fz40 {
+    font-size: 40px;
+  }
+  
+  .fz45 {
+    font-size: 45px;
+  }
+  
+  .fz50 {
+    font-size: 50px;
+  }
+  
+  .fz60 {
+    font-size: 60px;
+  }
+  
+  .fz70 {
+    font-size: 70px;
+  } 
+  /* Fonts End */
+
+
+   /* breadcrumb */
+   .breadcrumb_text {
+    position: relative;
+    color: var(--primary-color);
+  }
+  
+  .breadcrumb_text::after {
+    content: "";
+    width: 100%;
+    height: 5px;
+    background: var(--primary-color);
+    position: absolute;
+    left: 0;
+    bottom: -16px;
+    border-radius: 2px;
+  }
+
+  .warning-text {
+    color: var(--warning-color);
+  }
+
+  .success-border {
+    border: 2px solid var(--success-color);
+  }
+  
+  .danger-border {
+    border: 2px solid var(--danger-color);
+  }
+  
+  .warning-border {
+    border: 2px solid var(--warning-color);
+  }
+  .white-border {
+    border: 2px solid var(--primary-color);
+  }
+  .success-background {
+    background: var(--success-color);
+    color: var(--white-color);
+  }
+  
+  .white-background {
+    background: var(--primary-color);
+    color: var(--white-color);
+  }
+  .danger-background {
+    background: var(--danger-color);
+    color: var(--white-color);
+  }
+  
+  .warning-background {
+    background: var(--warning-color);
+    color: var(--white-color);
+  }
+  .rounded10 {
+    border-radius: 10px;
+  }
+  .custom-control-label::before {
+    border-color: var(--primary-color) !important;
+  }
+  .custom-control-input:checked ~ .custom-control-label::before {
+    color: #fff;
+    border-color: var(--primary-color) !important;
+    background-color: #fff !important;
+  }
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+    background-color: var(--primary-color) !important;
+    background-image: none !important;
+  }
+  .custom-control-label::after {
+    position: absolute;
+    top: 0.4rem !important;
+    left: -1.35rem !important;
+    display: block;
+    width: 0.7rem !important;
+    height: 0.7rem !important;
+    content: "";
+    background: no-repeat 50% / 50% 50%;
+    border-radius: 100%;
+  }
+  
+  .MuiAutocomplete-proper *{
+    transition: none !important;
+  }
+
+  /*******************************************************************************/
+  /*  AppInput    */
+  .AppInput_form {
+    position: relative;
+  }
+  
+  .AppInput_form input {
+    padding: 10px 0px 10px 10px;
+    border: 2px solid var(--primary-color);
+    box-sizing: border-box;
+    border-radius: 15px;
+    font-size: 17px;
+    height: 34px;
+    width: 100%;
+  }
+  
+  .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/styles/syncfusion_bootstrap4.css

@@ -0,0 +1,10 @@
+/* Spinner */
+.e-spinner-pane {
+  background-color: rgba(0, 0, 0, 0.15);
+  z-index: 10000;
+  height: 10000px;
+}
+
+.e-spinner-pane .e-spinner-inner {
+  top: 250px;
+}