react-modal-supervisor

v1.5.2

Published

2 years ago

react modal supervisor based-on Array! & promise

Downloads

127

0High
0Medium
0Low

bhbh1226

react modal supervisor react-modal ContextAPI react-modal-supervisor

React-Modal-Supervisor

react-modal-supervisor_version LICENSE

Preview Image

:gift_heart: Modal Supervisor Based-on React Context API & JS Array

Demo

$ git clone https://github.com/bhbh1226/react-modal-supervisor.git
$ cd react-modal-supervisor
$ npm install
$ npm run dev-server

Installation

Using npm:

$ npm install --save-dev react-modal-supervisor

This packages based on 'React Context API'. So ModalSupervisor.js is Context Provider.

You have to set and initalize Supervising.

Basic Usage

Supervisor Setup

Initializing in App.js

First, Because ModalSupervisor based on Context API's Provider, It should be placed on root.

// App.js
// import modules
import React from 'react'
import ModalSupervisor from 'react-modal-supervisor'
import MainPage from './MainPage.js'


// App components
function App() {
	return (
		<div id='app'>
			<ModalSupervisor>
				<MainPage/>
			</ModalSupervisor>
		</div>
	)
}

export default App

Create Modal

in HOC

Second, MUST Wrap component by ModalSupervisorHOC to use createModal Function.

third, you can use props.modalActions.createModal function to create Modal

// MainPage.js
import React from 'react'
import { ModalSupervisorHOC } from 'react-modal-supervisor'

function MainPage(props) {
	return (
		<div id='main-page'>
			<button onClick={() => {
        		props.modalActions.createModal('MODAL_TYPE_ALERT', {
					title: 'Hello World!', 
					content: 'nothing better'
				})}}/>
		</div>
	)
}

export default ModalSupervisorHOC(MainPage)

in useContext

after react supports useContext, our library can use useContext since 1.5.0

this way is more pretty and more comfortable than using HOC

import React, { useContext } from 'react'
import { ModalContext } from 'react-modal-supervisor'

function MainPage(props) {
  const { modalActions } = useContext(ModalContext)
  
  return (
		<div id='main-page'>
			<button onClick={() => {
          modalActions.createModal('MODAL_TYPE_ALERT', {
					title: 'Hello World!', 
					content: 'nothing better'
				})}}/>
		</div>
	)
}

export default MainPage

with callback function

const msg = {
    title: "Hello, World!",
    content: "Hello World1!!!!1!"
}

this.props.modalActions.createModal("MODAL_TYPE_CONFIRM", msg, {}, () => {console.log("onConfirm")}, () => {console.log("onDismiss")})
this.props.modalActions.createModal("MODAL_TYPE_PROMPT", msg, {}, (param) => {console.log(param + "is typed")}, () => {console.log("onDismiss")})

with promise

const msg = {
    title: "Hello, World!",
    content: "Hello World1!!!!1!"
}

this.props.modalActions.createModal("MODAL_TYPE_CONFIRM", msg)
    .then(result => {
        if (result === true) {
        	console.log("onConfirm")
        } else {
            console.log("onDismiss")
        }
})

this.props.modalActions.createModal("MODAL_TYPE_PROMPT", msg)
    .then(result => {
        if (result !== false) {
        	console.log(result)
        } else {
            console.log("onDismiss")
        }
})

with async/await

const msg = {
    title: "Hello, World!",
    content: "Hello World1!!!!1!"
}

// you can wait until value will return
const confirm_result = await this.props.modalActions.createModal("MODAL_TYPE_CONFIRM", msg)
const prompt_result = await this.props.modalActions.createModal("MODAL_TYPE_PROMPT", msg) 

// you can also use alert with await for waiting result
const alert_result = await this.props.modalActions.createModal("MODAL_TYPE_ALERT", msg)

Passing Props

CreateModal General

modalActions.createModal(MODAL_TYPE: String, TEXT_JSON?: Object, PROPS_JSON?: Object, confirmCallback?: function, dismissCallback?: function)

MODAL_TYPE

| type name | required types | Examples | Returns | | :----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------ | | MODAL_TYPE_ALERT | type(String), text(JSON) | createModal (MODAL_TYPE_ALERT , "Hello" ) | true | | MODAL_TYPE_CONFIRM | type(String), text(JSON), props(object), confirm(Callback), dismiss(Callback) | createModal (MODAL_TYPE_CONFIRM , "What do you want") | (confirm)true, (dismiss)false | | MODAL_TYPE_LOADING | type(String) | createModal (MODAL_TYPE_LOADING ) Please use this .props .modalActions .popModal () to Close your modal. | | | MODAL_TYPE_PROMPT | type(String), text(JSON), props(object), confirm(param) (Callback), dismiss(Callback) | createModal(MODAL_TYPE_PROMPT, "prompt") | (confirm)value, (dismiss)false |

TEXT_JSON

| name | type | descriptions | | ----------- | ------ | ------------------------------ | | title | String | Title wrapped by h1 tag | | content | String | inner Content wrapped by p tag | | placeholder | String | prompt modal's placeholdera |

PROPS_JSON

this props is extra props passed to Modal Component.

ADVANCE Usage

standard modal's style override

Create NewCustomStyle Component

in NewCustomStyle.js

// NewCustomStyle.js
// with new file named 'NewCustomStyle.js'
import { StyleManager } from 'react-modal-supervisor';
const { STYLE_BACKGROUND, styleOverride } = StyleManager
// you should import StyleManager from react-modal-supervisor
// and you will destructuring STYLE_BACKGROUND enum and styleOverride function.

const CustomBackground = styled.div`
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background-color: rgba(12, 243, 123, 0.4);
    position: fixed;

    top: 0;
    left: 0;

    height: 100vh;
    width: 100%;

    z-index: 9000;
`

const NewCustomStyle = () => {
    styleOverride(STYLE_BACKGROUND, CustomBackground)
})

export default NewCustomStyle

!!! you can use styled-component for new Style.

Apply Custom Style

in App.js

//App.js
import NewCustomStyle from './NewCustomStyle';

NewCustomStyle()

CUSTOM_STYLE_TYPES

| type name | descriptions | when | | --------------------------- | ------------------------------------ | --------------- | | STYLE_BACKGROUND | background blackout | ALL | | STYLE_INNER | modal inner white thing (relative) | ALL | | STYLE_ACTION_CONTAINER | buttons container | CONFIRM, PROMPT | | STYLE_INPUT_TEXT | PromptModal's input | PROMPT | | STYLE_CONFIRM_BUTTON | Confirm Button | CONFIRM, PROMPT | | STYLE_DISMISS_BUTTON | Dismiss Button | CONFIRM, PROMPT | | STYLE_CLOSE_BUTTON_ABSOLUTE | AlertModal's Close Button (absolute) | ALERT | | STYLE_SPINNER | LoadingModal's Spinner (relative) | LOADING |

Add Custom Modal

Create CustomModal

in NewCustomModal.js

// NewCustomModal.js
// your modal will receive props like (children, onClose, onConfirm, onDismiss)
const NewCustomModal = ({children, onClose}) => {
    return (
        <div
      		style={{
       			position: "fixed",
        		top: 0,
        		left: 0,
        		width: "100%",
        		height: "100vh",
        		backgroundColor: "rgba(0, 0, 0, 0.1)",
        		zIndex: 10000
      		}}
      		onClose={onClose}
    	>
      	<div
      		style={{
          		position: "fixed",
          		top: "50%",
          		left: "50%",
          		transform: "translate(-50%, -50%)",
          		backgroundColor: "white"
        	}}
      	>
        <h1>{text.title} Is Title!</h1>
        <h1>{text.content} Is Content!</h1>
        <h1>really?</h1>
      </div>
    </div>
    )
}

export default NewCustomModal

you can use props for close modal, confirm modal, dismiss modal.

props text is passed JSON text object.

if you call props.onDismiss(), modal will return false and closed.

if you call props.onConfirm("wow"), modal will return "wow" and closed.

Add Custom Modal to Supervisor

// App.js
import { addCustomModal } from 'react-modal-supervisor'
import NewCustomModal from './NewCustomModal.js'

addCustomModal("MODAL_TYPE_NEW", NewCustomModal)

Use in MainPage.js

// MainPage.js
this.props.modalActions.createModal("MODAL_TYPE_WOW", "안녕")

Documents

Modal Context Provider's Actions List

| Name | Params | descriptions | | -------------- | ----------------------------------- | ------------------------------------ | | createModal | type, text, props, confirm, dismiss | create Modal by params | | addCustomModal | type, component | create Custom Modal | | popModal | | pop pre-floating modal. | | closeModalIdx | idx | close modal by idx. | | setModalResult | idx, result | set result and close modal which idx |