@madeja-studio/telar/lib/module/component/Pager/Pager.js

UI component library by Madeja Studio

"use strict";

import React, { useState } from 'react';
import { View } from 'react-native';
import PagerView from 'react-native-pager-view';
import tw from "../../tailwind/index.js";
import { useTheme } from "../../theme/ThemeContextProvider.js";
import { AnimatedSwitch } from "../AnimatedSwitch/index.js";
import PageIndicator from "./PageIndicator.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Pager = ({
  children,
  lastPageButton,
  style,
  ...props
}) => {
  const {
    theme
  } = useTheme();
  const [page, setPage] = useState(0);
  const numberOfPages = React.Children.count(children);
  return /*#__PURE__*/_jsxs(View, {
    style: [tw`flex-1 w-full`, theme.pager.default.style.root, style],
    ...props,
    children: [/*#__PURE__*/_jsx(PagerView, {
      onPageSelected: event => setPage(event.nativeEvent.position),
      style: tw`flex-1 mt-4`,
      children: children
    }), /*#__PURE__*/_jsxs(AnimatedSwitch, {
      visibleComponent: lastPageButton && page === numberOfPages - 1 ? 1 : 0,
      children: [/*#__PURE__*/_jsx(View, {
        style: tw`rounded-xl self-center center p-2 mb-2 shadow-md`,
        children: /*#__PURE__*/_jsx(PageIndicator, {
          numberOfPages: numberOfPages,
          page: page
        })
      }), lastPageButton || /*#__PURE__*/_jsx(View, {})]
    })]
  });
};
export default Pager;
//# sourceMappingURL=Pager.js.map