taro-ui-vue3/lib/float-layout/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, ref, nextTick, watch, mergeProps} from "vue";
import {handleTouchScroll} from "../utils/common";
import {ScrollView, Text, View} from "@tarojs/components";
const AtFloatLayout = defineComponent({
  name: "AtFloatLayout",
  props: {
    isOpened: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    scrollX: Boolean,
    scrollY: {
      type: Boolean,
      default: true
    },
    scrollTop: Number,
    scrollLeft: Number,
    upperThreshold: Number,
    lowerThreshold: Number,
    scrollWithAnimation: Boolean,
    onClose: Function,
    onScroll: Function,
    onScrollToUpper: Function,
    onScrollToLower: Function
  },
  setup(props, {attrs, slots}) {
    const _isOpened = ref(props.isOpened);
    const rootClass = computed(() => ({
      "at-float-layout": true,
      "at-float-layout--active": _isOpened.value
    }));
    watch(() => props.isOpened, (val, oldVal) => {
      if (val === oldVal) {
        handleTouchScroll(val);
      }
      if (val !== _isOpened.value) {
        _isOpened.value = val;
      }
    });
    function handleClose() {
      if (typeof props.onClose === "function") {
        props.onClose();
      }
    }
    function close() {
      _isOpened.value = false;
      nextTick(handleClose);
    }
    function handleTouchMove(e) {
      e.stopPropagation();
    }
    return () => {
      const disableScroll = process.env.TARO_ENV === "alipay" ? {disableScroll: true} : {};
      const trapScroll = process.env.TARO_ENV === "alipay" ? {trapScroll: true} : {};
      return h(View, mergeProps(attrs, {
        class: rootClass.value,
        catchMove: true,
        onTouchmove: handleTouchMove
      }), {
        default: () => [
          h(View, mergeProps(disableScroll, {
            class: "at-float-layout__overlay",
            onTap: close
          })),
          h(View, {
            class: "at-float-layout__container layout"
          }, {
            default: () => [
              props.title && h(View, {class: "layout-header"}, {
                default: () => [
                  h(Text, {
                    class: "layout-header__title"
                  }, {default: () => props.title}),
                  h(View, {
                    class: "layout-header__btn-close",
                    onTap: close
                  })
                ]
              }),
              h(View, {
                class: "layout-body"
              }, {
                default: () => [
                  h(ScrollView, mergeProps(trapScroll, {
                    class: "layout-body__content",
                    scrollX: props.scrollX,
                    scrollY: props.scrollY,
                    scrollTop: props.scrollTop,
                    scrollLeft: props.scrollLeft,
                    upperThreshold: props.upperThreshold,
                    lowerThreshold: props.lowerThreshold,
                    scrollWithAnimation: props.scrollWithAnimation,
                    onScroll: props.onScroll,
                    onScrolltolower: props.onScrollToLower,
                    onScrolltoupper: props.onScrollToUpper
                  }), {default: () => slots.default && slots.default()})
                ]
              })
            ]
          })
        ]
      });
    };
  }
});
var float_layout_default = AtFloatLayout;
export {
  float_layout_default as default
};