mp-colorui/dist/h5/components/modal/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";
import { Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { BG_COLOR_LIST, SIZE, TEXT_COLOR_LIST } from "../../lib/model";
import { classNames } from "../../lib/index";
export default class ClModal extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      showModal: this.props.show
    };
  }
  componentWillReceiveProps(nextProps) {
    const show = nextProps.show;
    if (show !== this.state.showModal) {
      this.setState({
        showModal: show
      });
    }
  }
  render() {
    const titleBgColorClassName = this.props.titleBgColor ? BG_COLOR_LIST[this.props.titleBgColor] : "";
    const actionColor = this.props.actionColor ? BG_COLOR_LIST[this.props.actionColor] : "";
    const title = this.props.title;
    const actions = this.props.actions || [];
    const onClick = index => {
      this.props.onClick && this.props.onClick(index);
    };
    const actionsComponent = actions.map((item, index) => <View className={`${index > 0 ? "solid-left" : ""} action margin-0 flex-sub`} key={"key-" + item.text} onClick={() => {
      onClick(index);
    }}>
        <Text className={`${item.color ? TEXT_COLOR_LIST[item.color] : ""}`}>
          {item.text}
        </Text>
      </View>);
    const dealSize = size => {
      if (!size || size === "normal") return "";else return `-${SIZE[size]}`;
    };
    return <View className={classNames(`cu-modal ${this.state.showModal ? "show" : ""}`, this.props.className)} style={Object.assign({}, this.props.style)} onClick={() => {
      this.props.closeWithShadow && this.setState({
        showModal: false
      });
      this.props.onCancel && this.props.onCancel();
    }}>
        <View className="cu-dialog" onClick={e => {
        e.stopPropagation();
      }}>
          {this.props.custom ? this.props.renderTitle : <View className={`cu-bar justify-end ${titleBgColorClassName}`}>
              <View className="content">{title}</View>
              {this.props.close ? <View className="action" onClick={() => {
            this.setState({
              showModal: false
            });
            this.props.onClose && this.props.onClose();
          }}>
                  <Text className="cuIcon-close text-black" />
                </View> : ""}
            </View>}

          <View className={`padding${dealSize(this.props.padding)}`}>
            {this.props.children}
          </View>
          {this.props.custom ? this.props.renderAction : <View className={`cu-bar ${actionColor}`}>{actionsComponent}</View>}
        </View>
      </View>;
  }
}
ClModal.options = {
  addGlobalClass: true
};