@firedesktop/react-base 2.1.25 → 3.0.0

package/src/lib/components/AppInput.tsx

@@ -1,66 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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, minWidth: 27, width: '100%' }}>
-                            {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

@@ -1,31 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,392 +0,0 @@
-: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

@@ -1,10 +0,0 @@
-/* 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;
-}