yylib-quick-mobile/dist/yylib/modal/YYModal.js

yylib-quick-mobile

import React, {Component} from 'react';
import { Modal } from 'antd-mobile';
import './YYModal.less';
import classnames from 'classnames';
function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    }
    el = el.parentElement;
  }
  return null;
}
class YYModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  onWrapTouchStart = (e) => {
    // fix touch to scroll background page on iOS
    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
      return;
    }
    const pNode = closest(e.target, '.am-modal-content');
    if (!pNode) {
      e.preventDefault();
    }
  }
  componentDidUpdate (prevProps, prevState){
  	if(!prevProps.visible){
  		 /****如果已经打开****/
  		  if(this.props.onOpen){
  		  	 this.props.onOpen();//调用打开事件
  		  }
  	}
  }
  onClose(){
  	 this.props.onClose&&this.props.onClose();
  }
  render() {
    let {fill,RunInDesign,modalContent,popup,children,visible,animationType,maskClosable,title,style,...restProps} = this.props;
    var  child=children?children:modalContent;
    let wrapClz = classnames('yy-modal', this.props.className);
    wrapClz=fill?classnames(" yy-modal yy-modal-fill "):wrapClz;
    if(RunInDesign){
    	/*****设计期*****/
    	if(window.ModelID&&this.props.nid==window.ModelID){
    	   	visible=true;
    	}
    }
    return (
      <div>
        {popup?
          <Modal
            {...restProps}
            style={{backgroundColor:"black"}}
            className={wrapClz}
            visible={visible}
            popup={true}
            animationType={animationType}
            title={title}
            maskClosable={true}
            onClose={this.onClose.bind(this)}
          >
          {child}
          </Modal>:
          <Modal
            {...restProps}
            className={wrapClz}
            wrapProps={{ onTouchStart: this.onWrapTouchStart }}
          >
          {modalContent}
          </Modal>
        }
      </div>
    );
  }
}
YYModal.defaultProps = {
	popup:true
}

YYModal.alert=Modal.alert;
YYModal.confirm=Modal.confirm;
YYModal.prompt=Modal.prompt;
YYModal.operation=Modal.operation;
export default YYModal;