Hands-on implementation of react modal components

Modal components

Not much to say, next let's start implementing a react modal component.

Let's take a look at the actual effect.

Layout of the modal

First, let's think about the layout of the next modal component.

Let's take a basic sample of modal to analyze.

As shown, a modal component can be divided into mask, header, body and footer four parts, mask is needless to say, the header is mainly the display title and Close button, body is the user's own content, footer is mainly a button control.

Parameters of the modal component (props)

After we have identified the layout of the modal component, let's consider the parameters that the modal component can support for passing.

As a modal component, you always have to have a title? To have user-defined incoming content (children), there is also a callback function that determines the button copy (Oktext) and a Cancel button copy (Canceltext), and allows the user to pass in the Click OK button (onOk) and click the Cancel button (OnCancel )。 Also need to have a control modal whether the display of the flag bar (visible). Therefore, the following 7 variables are generally available.

The style of the modal

First, based on the layout and parameters of the modal component, we can determine the react modal's render function as follows:

As we all know, modal is covered by other elements, and is mainly divided into two parts, part of the mask shaded part, part of the body content, and the body part will be covered by the shadow part. Let's take a step-by-step effort to achieve this effect.

2. Implement Mask Effect

   .modal-mask {
   //Let mask cover the whole screen
   position: fixed;
   Top: 0;
   Left: 0;
   Right: 0;
   Bottom: 0;
   background: black;
   opacity: 0.6;
   //Let mask over other elements
   z-index: 1000;
   }
   

4. Implement the style of the body content so that it covers the other elements (including mask), and the function of each part can be viewed in comments

   .modal-container {
   //Center the main content of modal globally, center the upper left corner of the main content through position: fix and 50% of top and left, and then center the main content correctly through transform: translate (- 50%, - 50%).
   position: fixed;
   Top: 50%;
   Left: 50%;
   transform: translate(-50%, -50%);
   background: white;
   min-width: 500px;
   border-radius: 4px;
   //Set the Z-index of the main content higher than that of the mask, so that the mask can be overwritten
   z-index: 1001;
   }
   

6. Next comes the implementation of the body, footer, and header styles, which are directly affixed to the code.

   .modal-title {
     padding: 30px;
     color: black;
     font-size: 20px;
     border-bottom: 1px solid #e8e8e8;
   }
   
   .modal-body {
     padding: 30px;
     font-size: 14px;
     border-bottom: 1px solid #e8e8e8;
   }
   
   .modal-footer {
     text-align: center;
     padding: 30px;
     display: flex;
   }
   
   .modal-footer .btn {
     flex: 1;
     height: 32px;
     text-align: center;
   }
   
   .modal-footer .modal-cancel-btn {
     background: white;
     margin-right: 30px;
     border-color: #d9d9d9;
     border-radius: 4px;
   }
   
   .modal-footer .modal-confirm-btn {
     background: #1890ff;
     color: white; 
   }
   

The realization of modal's interactive logic

In fact, the modal interaction is very simple, the general method of invocation is as follows:

Externally passed custom body content as well as some custom attributes (such as title, click on the button's callback and modal title)

1. Let's first define the props in the modal component.

   
   

2. Set some default props to use the default props when the user does not pass in the parameter

   
   

3. Implement the Render function, render the modal node based on the parameters passed in by the user and default parameters, or return NULL if the user passes in the Visible property false (modal not visible), or return the modal node.

   
   

In this way, a simple react modal component is completed, the code above can be viewed in Github.com/chenjigeng/empty, and a demo example can be seen directly.

As follows:

Finally, put the complete modal component code

// Modal.tsx
import * as React from 'react';
import './Modal.css';

interface IModalProps {
  children: React.ReactChild | React.ReactChildren |  React.ReactElement<any>[],
  title?: React.ReactChild,
  visible: boolean,
  onOk?: () => void,
  onCancel?: () => void,
  okText?: string,
  cancelText?: string,
} 

export default class Modal extends React.Component<IModalProps> {

  public static defaultProps = {
    cancelText: '取消',
    okText: '确定',
    visible: false,
  }
  
  public render() {
    const { title, visible, okText, cancelText, children, onOk, onCancel } = this.props;
    if (!visible)  {
      return null;
    };
    return (
      <div>
        <div className="modal-mask" onClick={onCancel}/>
        <div className="modal-container">
          <div className="modal-header">
            <div className="modal-title">{title}</div>
          </div>
          <div className="modal-body">
            {children}
          </div>
          <div className="modal-footer">
            <button className="modal-cancel-btn btn" onClick={onCancel}>{cancelText}</button>
            <button className="modal-confirm-btn btn" onClick={onOk}>{okText}</button>
          </div>
        </div>
      </div>
    )
  }
}
// Moda.css
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  opacity: 0.6;
  z-index: 1000;
}

.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  min-width: 500px;
  border-radius: 4px;
  z-index: 1001;
}

.modal-title {
  padding: 30px;
  color: black;
  font-size: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-body {
  padding: 30px;
  font-size: 14px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-footer {
  text-align: center;
  padding: 30px;
  display: flex;
}

.modal-footer .btn {
  flex: 1;
  height: 32px;
  text-align: center;
}

.modal-footer .modal-cancel-btn {
  background: white;
  margin-right: 30px;
  border-color: #d9d9d9;
  border-radius: 4px;
}

.modal-footer .modal-confirm-btn {
  background: #1890ff;
  color: white; 
}