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!