mirajs v2.2.10

Version 2.2.0 (by Daniel SAKOU)

Added FilterClass component

// Usage
<FilterClass
    lang={{
      btn: "Ajouter un critère",
      titleOptions: "Paramètres du critère",
      labelVariable: "Sélectionner une variable",
      labelValeur: "Sélectionner une valeur",
      btnSubmit: "Ajouter"
    }}
    criteres={[
      {
          title: "Pays",
          value: "pays",
          indicator: "P",
          tab: [
              {title: "Cameroun", value: "CM"},
              {title: "France", value: "FR"},
              {title: "United States", value: "USA"},
          ]
      },
      {
          title: "Âge",
          value: "age",
          indicator: "Â",
          tab: [
              {title: "18 - 24 ans", value: "18-24"},
              {title: "25 - 35 ans", value: "25-35"},
              {title: "36 - 40 ans", value: "36-40"},
          ]
      }
    ]}/>

// Validator
propTypes = {
    lang: PropTypes.object,
    criteres: PropTypes.array,
    onAddFilter: PropTypes.func,
    // + Added this event
    onCloseItem: PropTypes.func,
};

// Methods
getFilters();

Version 2.1.0 (by Daniel SAKOU)

Added MSidemenu component

<div className="app-container">
  <div className="app-section">
      <MSidemenu
          ref={sidemenu}
          menu={[
              {
                  icon: "DGfi-user",
                  title: "Username",
                  subtitle: "Votre nom ici..."
              },
              {
                  icon: "DGfi-grouppeople",
                  title: "Comptes",
                  active: true
              },
              {
                  icon: "DGfi-file-text2",
                  title: "Demandes",
              },
              {
                  icon: "DGfi-message",
                  title: "Messages",
              },
              {
                  icon: "DGfi-notifications",
                  title: "Notifications",
              },
              {
                  icon: "DGfi-settings",
                  title: "Paramètres",
              },
              {
                  icon: "DGfi-exit_to_app",
                  title: "Se déconnecter",
                  bottom: true
              },
          ]}/>
      <div className="app-article __reduced-sidemenu">
          <Bouton
              title="Welcom to Globus"
              onClick={()=>{
                  DCAlert({
                      title: "This is title",
                      content: "This is content of the alert modal",
                      btn: "Get Started"
                  });
                  sidemenu.current?.reduce(Constantes.app_article_id);
              }}/>
          <Bouton
              title="Sidemenu"
              onClick={()=>{
                  sidemenu.current?.reduce(Constantes.app_article_id);
              }}/>
          <Bouton
              title="Open SM"
              className="cp-theme"
              onClick={()=>{
                  sidemenu.current?.open(Constantes.app_article_id);
              }}/>
      </div>
  </div>
</div>

Version 2.0.0 (by Daniel SAKOU)

Changing migrated compiler from babel to swc

Version 1.5.0 (by Daniel SAKOU)

Added Countdown component

usage:

// import Countdown
import { Countdown, CountdownItem } from 'mirajs/dist/react';

// using in render
<Countdown
    startDate="2021-09-15"
    endDate="2021-10-25"/>

// You can also use one item of Countdown component like this
<CountdownItem
    max={30} // required : max value of item
    text={"place(s)"} // optional : text to display
    size={"big"} // optional : default big
    value={5} // required : value of item
    reverse={true} // optional : default undefined
    color="cp-theme"/> // optional : Color of stroke, default theme color

Version 1.4.8 (by Ronald Tchuekou)

Added Expander react component

description:

usage:

// import Expander
import { Expander } from "mirajs/dist/react";

// All object will respect structure.
const OBJECT = {
        title: 'Title',
        subList: [
            {title: 'Sub Title 1', subList: []},
            {title: 'Sub Title 2', subList: []},
            {title: 'Sub Title 3', subList: [
                {title: 'Sub Sub Title 1', subList: []},
                {title: 'Sub Sub Title 2', subList: []},
                {title: 'Sub Sub Title 3', subList: []},
            ]},
            {title: 'Sub Title 4', subList: []},
            {title: 'Sub Title 5', subList: []},
        ]
    }

    // When item click.
    function onItemClick(item){
        ...
    }

    //When delete icon click.
    function onDelete(item){
        ...
    }

    // When edit icon click.
    function onEdit(item){
        ...
    }

    // Component
    <Expander
        object={OBJECT}
        handleClick={onItemClick}
        handleDelete={onDelete}// Enabled delete button.
        handleEdit={onEdit} // Enabled edit button.
    />

Version 1.4.0 (by Daniel SAKOU)

Added notification component

usage:

// import DCNotify
import { DCNotify } from "mirajs/dist/js";

// using
DCNotify({
    // required, specify icon item. You can specify img instead, like that: img: "https://url_image" 
    iconName: "DGfi-person",
    // required, specify the notification title
    title: "Notification",
    // optional, notification item quantity
    nb: 1,
    // optional, more about the notification
    descript: "Test notification...",
    // optional, callback function when clicking on notification
    handler: () => console.log("Clicked on notification..."),
    // optional, Need when notification refer to another website
    href: "http://dc-corp.cm"
});

Version 1.3.2 (by Ronald Tchuekou)

Addition of new functionnality: DrawerContent (2-07-2021)

Added to the js side.

usage:

// JS **************************
import { DrawerContent } from "mirajs/dist/js";

// Element that will holde the drawer items.
let element = document.querySelector('#drawer');

// Buttons to navigate between drawer items.
let btn1 = document.querySelector('#btn1'),
btn2 = document.querySelector('#btn2')

// Set the drawer content.
let drawer = new DrawerContent(element);

// Set the events.
btn1.addEventListener('click', () => drawer.previous());
btn2.addEventListener('click', () => drawer.next());

// Styles of elemnets.
const styles = {
    container:{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
        width: '100vw'
    },
    drawerViewer: {
        width: '500px',
        height: '500px',
        padding: '0',
        margin: '0',
        overflow: 'hidden'
    },
    title: {
        color: 'gray',
        fontSize: '20px',
        fontWeight: 'bold'
    },
    headerContent: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: '50px',
        background: 'white',
        padding: '0 10px',
    },
    contentDrawer: {
        height: '440px',
        width: '100%'
    },
    cube: {
        height: '100%',
        background: 'blue',
        color: 'white',
        fontSize: '50px',
        fontWeight: 'bold',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        border: "4px solid white"
    }
}

// Html ************************
<div style={styles.container}>
    <div style={styles.drawerViewer}>
        <!-- Header that content the navigation buttons. -->
        <div style={styles.headerContent}>
            <button id="btn1" class="dcx-btn__icon dcx-ripple">
                <i class="DGfi-arrow-left2"></>
            </button>
            <p style={styles.title}>Drawer content management</p>
            <button id="btn2" class="dcx-btn__icon dcx-ripple">
                <i class="DGfi-arrow-right2"></>
            </button>
        </div>
        <!-- Drawer container. -->
        <div id="drawer" style={styles.contentDrawer}>
            <div style={styles.cube}>1</div>
            <div style={styles.cube}>2</div>
            <div style={styles.cube}>3</div>
            <div style={styles.cube}>4</div>
            <div style={styles.cube}>5</div>
            <div style={styles.cube}>6</div>
            <div style={styles.cube}>7</div>
            <div style={styles.cube}>8</div>
            <div style={styles.cube}>9</div>
            <div style={styles.cube}>10</div>
        </div>
    </div>
</div>

#Version 1.2.8 (by Ronald Tchuekou)

Addition of new functionality : Injection loader. (16-05-2021)

Added to the js side.

usage :

import {InjectLoarder} from 'mirajs/dist/js';

let element = document.querySelector('#element');

// indeternate loader.
let loader = new InjectLoarder(element);
setTimeout(() => {
    loader.dismiss();
}, 5000);

// Determinate loader.
let loader = new InjectLoarder(element, {
    indeterminate: false,
    value: 0, // initial value.
    background: 'white', // ['white': default, 'dark'].
    loaderColor: 'red' // ['blue': default, 'green', 'red', 'gray']
});
setTimeout(() => {
    loader.dismiss();
}, 5000);

Note: The loader tha we are set in your element is circular loader

<div style="width: 300px height: 300px font-size: 2rem" id="element">
    This is my element !
</div>

Version 1.2.6 (bu Ronald Tchuekou)

Simple carousel are now touchable. We can wipe to set the next or previous slide on carousel (SimpleCarousel);

Version 1.2.5 (by Ronald Tchuekou)

Addition of new functionality : SlideUp, SlideDown and SlideToggle Animations. (21-03-2021)

Added to the js side.

usage :

import {SlideAnimations} from "mirajs/dist/js";

let element = document.querySelector("#element");

// To use the default duration (500 ms)
SlideAnimations.slideUp(element);

SlideAnimations.slideDown(element);

SlideAnimations.slideToggle(element);

// With 1000 ms;
SlideAnimations.slideUp(element, 1000);

SlideAnimations.slideDown(element, 1000);

SlideAnimations.slideToggle(element, 1000);