ZP-UI Effect

ZaloPay UI Effect is a common's Reat components library to serve some features like: Loading, show Toast, etc,....

Repositories:

Private repository is located at the Webapps project

Tech

ZP Ui Effect uses a number of open source projects to work properly:

• Webpack - use to run a development server as a local styleguild
• Styleguidist - Isolated React component development environment with a living style guide
• React - Main library technology
• Sass/Css - Stylesheet language
• PostCss - a tool for transforming css with javascript
• Rollup - a module bundler to build library's distrubuted files
• Babel - Javascript converter for running script on old browsers ....

Installation

Install the dependencies and devDependencies and start the server.

$ npm install --save zp-ui-effect

or

$ yarn add zp-ui-effect

Components

1. ZPLoading:

A Loading component with ZaloPay Logo inside | Props | Type | Description | InitialValue| | ------ | ------ | ------ | ------ | | className | string | React className for container div | '' | | onClick | function | function that will be triggered on click loading component | ()=>{} |

Example: You will want to change your isLoading variable to show or hide ZPLoading component.

import {ZPLoading} from 'zp-ui-effect';
...
{isLoading &&  (<ZPLoading />)}

2. MessageToast:

A Message Toast with Check icon uppon by default | Props | Type | Description | InitialValue| | ------ | ------ | ------ | ------ | | toggle | bool | a trigger variable to show toast, when it true, set it false and reverse | false | | message | string | content of displayed message on toast | '' | | icon | any | Upper icon of toast, by default it is a Check icon | <span className="check-icon"/> | | duration | number | duration while a toast show (miliseconds) | 2000 | | onShow | function | a callback function when a toast show | ()=>{} | | onHide | function | a callback function when a toast hide | ()=>{} | | onVisibleChange | function | a callback function when a toast hide or show | ()=>{} |

Example: Call showToast function to trigger show the MessageToast

import {MessageToast} from 'zp-ui-effect';
...
const [toggle, setToggle]=useState(false);

function showToast() {
    setToggle(prev=> !prev);
}
...
<MessageToast message="Le Hoang Nam" toggle={toggle}/>

3. Spinner:

Three bouncing dots | Props | Type | Description | InitialValue| | ------ | ------ | ------ | ------ | |className| string | style for container of three animating dots | '' | Example: Call showToast function to trigger show the MessageToast

import {Spinner} from 'zp-ui-effect'; 
<Spinner/>

2. BottomModal:

A Modal that have animation sliding up from bottom | Props | Type | Description | InitialValue| | ------ | ------ | ------ | ------ | | children | any | content of the modals |null | | className | string | className of Content 's container | '' | | isOpen | bool | a variable rules modal'state is open or not | false | | duration | number | duration while a toast show (miliseconds) | 2000 | | onOpen | function | a callback function when a modal open | ()=>{} | | onClose | function | a callback function when a modal 's backdrop | ()=>{} | | ...otherProps | props |other props that pass again to content's container| ()=>{} |

Example: Call showToast function to trigger show the MessageToast

import {BottomModal} from 'zp-ui-effect';
...
const [open,setOpen]=useState(false);
 
<button onClick={()=> setState({isOpen:true})}>Click here to open Modal</button>
<BottomModal  isOpen={state.isOpen}
              onClose={()=>setOpen(false)}
              style={{backgroundColor:'yellow'}}>
        <button onClick={()=> setOpen(false)}>Close Modal</button>
        <p>This is a bottom modal</p> 
</BottomModal>

Usage with Redux and other middlewares

Add to reducer

import {ZPEffectReducer} from 'zp-ui-effect'

combineReducers({
     ...other reducer,
     uiEffectReducer: ZPEffectReducer, 
   });

** Add Components to Views **

import {ZPLoading, MessageToast, BottomModal,openModal} from 'zp-ui-effect'
const { isLoading, toast, isOpenModal } = useSelector(state => state.uiEffectReducer);
 
<BottomModal isOpen={isOpenModal} handlClose={()=>dispatch(openModal())}>
    <SomeContent/>
</BottomModal>
<MessageToast {...toast} /> 
{isLoading && <ZPLoading />}

*** Usage ***

import {showLoading, hideLoading, triggerToastWithMessage} from "zp-ui-effect"; 
...
dispatch(showLoading()); 
dispatch(hideLoading());
dispatch(triggerToastWithMessage("Toast here"));

Usage with Saga

yield put(showLoading())
yield put(triggerToastWithMessage("Toast from Saga"))

Development

• Config build script at rollup.config.js
• Config styleguide server as styleguide.config.js
• Build files located at ./build To show styleguide, run:

$ yarn start

To build files, run:

$ yarn prePublishOnly

To publish project, run:

$ yarn publish

Todos

• Create more components

License

MIT

Free Software, Hell Yeah!