1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Motion, spring, presets } from 'react-motion';

import './modal.scss';

class Modal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isOpen: props.isOpen || false
    };
    util.bindMethods(['onCancelClick', 'onOkClick', 'close', 'onRest'], this);
  }

  Modal.propTypes = {
    isOpen: PropTypes.bool.isRequired,
    title: PropTypes.string.isRequired,
    children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
    className: PropTypes.string,
    maskClosable: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    okText: PropTypes.string,
    cancelText: PropTypes.string,
    onRest: PropTypes.func
    // 动画接口
  };

  Modal.defaultProps = {
    className: '',
    maskClosable: true,
    onCancel: () => {},
    onOk: () => {},
    okText: 'OK',
    cancelText: 'Cancel',
    onRest: () => {}
    // 接口默认值为空函数
  };

  // 回调函数
  onRest = () => {
    const { isOpen } = this.state;
    if (!isOpen) {
      this.props.onClose();
    }
    this.props.onRest();
  }

  onClose = () => {
    setState({
      isOpen: false
    });
  }

  componentWillReceiveProps(nextProps) {
    if ('isOpen' in nextProps) {
      this.setState({
        isOpen: nextProps.isOpen
      });
    }
  }

  render() {
    const { title, children, className, okText, cancelText, onOk, onCancel, maskClosable } = this.props;
    return (
      <div className={`mocal-container ${className}`}>
        <div className={`modal-title ${type}`}>{title}</div>
        <div className="modal-body">
          <div className="modal-content">{children}</div>
        <div className="modal-footer">
          <button className="ok-btn" onClick={onOk}>{okText}</button>
          <button className="cancel-btn" onClick={onCancel}>{cancelText}</button>
        </div>
        </div>
        <Motion
          defaultStyle={{opacity: 0.8, scale: 0.8}}
          style={{opacity: spring(isOpen ? 1 : 0, presets.stiff), scale: spring(isOpen ? 1 : 0.8, presets.stiff)}}
          onRest={this.onRest}>
          {
           ({opacity, scale}) => (
            <div className={`modal-container ${className}`} style={{opacity}} onClick={maskClosable ? this.close : () => {} } >
            <div className="modal-body" style={{opacity, transform: `translate3d(-50%, -50%, 0) scale(${scale})`}}>
              <div className={`modal-title ${type}`}>{title}</div>
              <div className="modal-content">{children}</div>
              <div className="modal-footer">
              <button className="ok-btn" onClick={this.onOkClick}>{okText}</button>
              <button className="cancel-btn" onClick={this.onCancelClick}>{cancelText}</button>
              </div>
            </div>
            </div>
            )
          }
        </Motion>
    );
  }
}

export default Modal;