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

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

import Nerv from "nervjs";
import Taro, { createSelectorQuery as _createSelectorQuery } from "@tarojs/taro-h5";
import { View } from "@tarojs/components";
import ClCard from "../card/index";
import ClFlex from "../flex/index";
import ClText from "../text/index";
import ClIcon from "../icon/index";
import "./index.scss";
import { classNames } from "../../lib/index";
let timer;
export default class ClMessage extends Taro.Component {
  render() {
    const props = this.props;

    let tempHeight = 500;
    const { bgColor, type, onClose, message, show, duration } = props;
    const [showMessage, setShowMessage] = Taro.useState(show);
    const [contentHeight, setContentHeight] = Taro.useState(tempHeight);
    const [tempMessage, setTempMessage] = Taro.useState("");
    const [tempType, setTempType] = Taro.useState();
    const durationTime = duration || 3;
    const mapColor = {
      success: "light-green",
      error: "light-red",
      warn: "light-yellow",
      info: "light-grey",
      custom: bgColor
    };
    const calculateHeight = () => {
      const view = _createSelectorQuery().in(this.$scope);
      const query = view.select("#content");
      return new Promise(resolve => {
        query.boundingClientRect().exec(res => {
          const data = res[0];
          resolve(data.height);
        });
      });
    };
    const clickClose = () => {
      new Promise(resolve => {
        resolve(calculateHeight());
      }).then(res => {
        const height = res;
        clearTimeout(timer);
        timer = null;
        setContentHeight(height);
        setShowMessage(false);
        onClose && onClose();
      });
    };
    Taro.useEffect(() => {
      (function () {
        if (!showMessage) {
          new Promise(resolve => {
            resolve(calculateHeight());
          }).then(res => {
            const height = res;
            tempHeight = height;
            setContentHeight(tempHeight);
            setShowMessage(false);
          });
        } else {
          tempHeight = 0;
          setTempType(type);
          setTempMessage(message || "");
          if (duration !== 0) {
            if (timer) {
              clickClose();
              clearTimeout(timer);
              timer = null;
              return;
            }
            timer = setTimeout(() => {
              clickClose();
              clearTimeout(timer);
              timer = null;
              props.message = "";
            }, durationTime * 1000);
          }
          setContentHeight(tempHeight);
          setShowMessage(true);
        }
      })();
    }, [showMessage]);
    Taro.useEffect(() => {
      show && setShowMessage(!!show);
      props.show = false;
    }, [show]);
    Taro.useEffect(() => {
      if (show) {
        clearTimeout(timer);
        timer = null;
        clickClose();
        setTimeout(() => {
          setShowMessage(true);
          setTempMessage(message || "");
          setTempType(type);
        }, 300);
      }
    }, [message, show]);
    return <View className={classNames("cu-cl-message", props.className)} style={Object.assign({
      transition: `all 0.2s linear`,
      top: `${showMessage ? "0" : "-" + contentHeight + "px"}`
    }, props.style)}>
      <View className="cu-cl-message__content" id="content">
        <ClCard bgColor={mapColor[tempType] || "light-grey"} shadow={false}>
          <ClFlex justify="between" align="center">
            <ClText text={tempMessage} />
            <View onClick={() => {
              clickClose();
            }}>
              <ClIcon iconName="close" size="xsmall" />
            </View>
          </ClFlex>
        </ClCard>
      </View>
    </View>;
  }

}
ClMessage.options = {
  addGlobalClass: true
};
ClMessage.defaultProps = {
  bgColor: "light-grey",
  type: "info",
  onClose: () => {},
  message: "",
  show: false,
  duration: 3
};