使用react hook和react context创建dialog组件

Posted 2022-02-21 微个日光日

​

创建modal

1.创建context文件夹

mkdir src/context

2.创建context文件
touch src/context/modal-context.js

3.modal-context.js代码如下：

import React,  useCallback, useEffect, useState  from 'react'
const ModalContext = React.createContext()
const Modal = ( modal, unSetModal ) => 
  useEffect(() => 
    const bind = e => 
      if (e.keyCode !== 27) 
        return
      

      if (document.activeElement && ['INPUT', 'SELECT'].includes(document.activeElement.tagName)) 
        return
      

      unSetModal()
    

    document.addEventListener('keyup', bind)
    return () => document.removeEventListener('keyup', bind)
  , [modal, unSetModal])

  return (
    <div className="modal">
      <button className="modal__close" onClick=unSetModal />
      <div className="modal__inner">
        <button className="modal__close-btn" onClick=unSetModal>
          <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false">
            <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
          </svg>
        </button>
        modal
      </div>
    </div>
  )

const ModalProvider = props => 
  const [modal, setModal] = useState()
  const unSetModal = useCallback(() => 
    setModal()
  , [setModal])

  return (
    <ModalContext.Provider value= unSetModal, setModal  ...props >
      props.children
      modal && <Modal modal=modal unSetModal=unSetModal />
    </ModalContext.Provider>
  )

const useModal = () => 
  const context = React.useContext(ModalContext)
  if (context === undefined) 
    throw new Error('useModal must be used within a UserProvider')
  

  return context


export  ModalProvider, useModal 

创建index.js

代码如下：

import  ModalProvider  from './context/modal-context'
ReactDOM.render(
  <ModalProvider>
    <App />
  </ModalProvider>,
  document.getElementById('root')
)

创建App.js

代码如下：

import  useModal  from './context/modal-context'
const  setModal  = useModal()
​<label
  className="App-link"
  onClick=() => 
    setModal(<h1>Hola senora!</h1>)
  
>
  Start a dialogue
</label>

Finally 创建App.css

代码如下：

.modal 
  --spacing: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;


.modal__close 
  display: block;
  position: fixed;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;


.modal__inner 
  position: relative;
  width: calc(var(--spacing) * 36);
  max-width: 100%;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 1.5);
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 20px 32px -8px;


.modal__close-btn 
  position: absolute;
  top: var(--spacing);
  right: var(--spacing);
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;


.modal__close-btn svg 
  width: var(--spacing);
  height: var(--spacing);
  fill: currentColor;
  opacity: 0.5;


.modal__close-btn:hover svg 
  opacity: 1;