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

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, computed, reactive, watch, mergeProps} from "vue";
import {Text, View} from "@tarojs/components";
import AtButton from "../button/index";
const MIN_MAXPAGE = 1;
const getMaxPage = (maxPage = 0) => {
  if (maxPage <= 0)
    return MIN_MAXPAGE;
  return maxPage;
};
const createPickerRange = (max) => {
  const range = new Array(max).fill(0).map((_val, index) => index + 1);
  return range;
};
const AtPagination = defineComponent({
  name: "AtPagination",
  props: {
    total: {type: Number, default: 0},
    current: {type: Number, default: 1},
    pageSize: {type: Number, default: 20},
    icon: {type: Boolean, default: false},
    onPageChange: Function
  },
  setup(props, {attrs, slots}) {
    const maxPage = computed(() => getMaxPage(Math.ceil(props.total / props.pageSize)));
    const state = reactive({
      currentPage: props.current || 1,
      maxPage: maxPage.value,
      pickerRange: createPickerRange(maxPage.value)
    });
    const prevDisabled = computed(() => state.maxPage === MIN_MAXPAGE || state.currentPage === 1);
    const nextDisabled = computed(() => state.maxPage === MIN_MAXPAGE || state.currentPage === state.maxPage);
    const rootClass = computed(() => ({
      "at-pagination": true,
      "at-pagination--icon": props.icon
    }));
    function onPrev() {
      let {currentPage} = state;
      const originCur = currentPage;
      currentPage -= 1;
      currentPage = Math.max(1, currentPage);
      if (originCur === currentPage)
        return;
      props.onPageChange && props.onPageChange({type: "prev", current: currentPage});
      state.currentPage = currentPage;
    }
    function onNext() {
      let {currentPage} = state;
      const originCur = currentPage;
      const {maxPage: maxPage2} = state;
      currentPage += 1;
      currentPage = Math.min(maxPage2, currentPage);
      if (originCur === currentPage)
        return;
      props.onPageChange && props.onPageChange({type: "next", current: currentPage});
      state.currentPage = currentPage;
    }
    watch(() => [
      props.total,
      props.pageSize,
      props.current
    ], ([total, pageSize, current]) => {
      const maxPage2 = getMaxPage(Math.ceil(total / pageSize));
      if (maxPage2 !== state.maxPage) {
        state.maxPage = maxPage2;
        state.pickerRange = createPickerRange(maxPage2);
      }
      if (typeof current === "number" && current !== state.currentPage) {
        state.currentPage = current;
      }
    });
    return () => h(View, mergeProps(attrs, {
      class: rootClass.value
    }), {
      default: () => [
        h(View, {
          class: "at-pagination__btn-prev"
        }, {
          default: () => [
            props.icon && h(AtButton, {
              size: "small",
              disabled: prevDisabled.value,
              onClick: onPrev
            }, {
              default: () => [
                h(Text, {class: "at-icon at-icon-chevron-left"})
              ]
            }),
            !props.icon && h(AtButton, {
              size: "small",
              disabled: prevDisabled.value,
              onClick: onPrev
            }, {default: () => "\u4E0A\u4E00\u9875"})
          ]
        }),
        h(View, {
          class: "at-pagination__number"
        }, {
          default: () => [
            h(Text, {
              class: "at-pagination__number-current"
            }, {default: () => state.currentPage}),
            h(Text, null, {default: () => `/${state.maxPage}`})
          ]
        }),
        h(View, {
          class: "at-pagination__btn-next"
        }, {
          default: () => [
            props.icon && h(AtButton, {
              size: "small",
              disabled: nextDisabled.value,
              onClick: onNext
            }, {
              default: () => [
                h(Text, {class: "at-icon at-icon-chevron-right"})
              ]
            }),
            !props.icon && h(AtButton, {
              size: "small",
              disabled: nextDisabled.value,
              onClick: onNext
            }, {default: () => "\u4E0B\u4E00\u9875"})
          ]
        })
      ]
    });
  }
});
var pagination_default = AtPagination;
export {
  pagination_default as default
};