taro-ui-vue3/lib/modal/index.js

Taro UI Rewritten in Vue 3.0

import {defineComponent, reactive, nextTick, watch, h, computed, mergeProps} from "vue";
import {handleTouchScroll} from "../utils/common";
import Taro from "@tarojs/taro";
import {Button, Text, View} from "@tarojs/components";
import AtModalAction from "./action";
import AtModalContent from "./content";
import AtModalHeader from "./header";
const AtModal = defineComponent({
  name: "AtModal",
  props: {
    title: String,
    isOpened: {
      type: Boolean,
      default: false
    },
    content: String,
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    },
    cancelText: String,
    confirmText: String,
    onClose: Function,
    onConfirm: Function,
    onCancel: Function
  },
  setup(props, {attrs, slots}) {
    const state = reactive({
      _isOpened: props.isOpened,
      isWEB: Taro.getEnv() === Taro.ENV_TYPE.WEB
    });
    const rootClasses = computed(() => ({
      "at-modal": true,
      "at-modal--active": state._isOpened
    }));
    const h5ButtonStyle = computed(() => {
      return state.isWEB ? "margin-top: 0;" : null;
    });
    watch(() => props.isOpened, (val, oldVal) => {
      if (val !== oldVal) {
        handleTouchScroll(val);
      }
      if (val !== state._isOpened) {
        state._isOpened = val;
      }
    });
    function handleClickOverlay() {
      if (props.closeOnClickOverlay) {
        state._isOpened = false;
        nextTick((event) => handleClose(event));
      }
    }
    function handleClose(event) {
      if (typeof props.onClose === "function") {
        props.onClose(event);
      }
    }
    function handleCancel(event) {
      if (typeof props.onCancel === "function") {
        props.onCancel(event);
      }
    }
    function handleConfirm(event) {
      if (typeof props.onConfirm === "function") {
        props.onConfirm(event);
      }
    }
    function handleTouchMove(e) {
      e.stopPropagation();
    }
    return () => {
      const disableScroll = process.env.TARO_ENV === "alipay" ? {disableScroll: true} : {};
      if (props.title || props.content) {
        const isRenderAction = props.cancelText || props.confirmText;
        return h(View, mergeProps(attrs, disableScroll, {
          class: rootClasses.value,
          catchMove: true,
          onTouchmove: handleTouchMove
        }), {
          default: () => [
            h(View, {
              class: "at-modal__overlay",
              onTap: handleClickOverlay
            }),
            h(View, {
              class: "at-modal__container"
            }, {
              default: () => [
                props.title && h(AtModalHeader, null, {
                  default: () => [
                    h(Text, null, {default: () => props.title})
                  ]
                }),
                props.content && h(AtModalContent, null, {
                  default: () => [
                    h(View, {
                      class: "content-simple"
                    }, {
                      default: () => [
                        state.isWEB ? h(Text, {
                          innerHTML: props.content.replace(/\n/g, "<br>")
                        }) : h(Text, null, {default: () => props.content})
                      ]
                    })
                  ]
                }),
                isRenderAction && h(AtModalAction, {
                  isSimple: true
                }, {
                  default: () => [
                    props.cancelText && h(Button, {
                      onTap: handleCancel
                    }, {default: () => props.cancelText}),
                    props.confirmText && h(Button, {
                      style: h5ButtonStyle.value,
                      onTap: handleConfirm
                    }, {default: () => props.confirmText})
                  ]
                })
              ]
            })
          ]
        });
      }
      return h(View, mergeProps(attrs, disableScroll, {
        class: rootClasses.value,
        catchMove: true,
        onTouchmove: handleTouchMove
      }), {
        default: () => [
          h(View, {
            onTap: handleClickOverlay,
            class: "at-modal__overlay"
          }),
          h(View, {
            class: "at-modal__container"
          }, {default: () => slots.default && slots.default()})
        ]
      });
    };
  }
});
var modal_default = AtModal;
export {
  modal_default as default
};