Pull To Refresh

import { AppBar, AppScreen } from "@seed-design/stackflow";
import { ActivityComponentType } from "@stackflow/react/future";
import { VStack } from "@seed-design/react";
import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "seed-design/ui/pull-to-refresh";

declare module "@stackflow/config" {
  interface Register {
    "pull-to-refresh-preview": unknown;
  }
}

const PullToRefreshPreview: ActivityComponentType<"pull-to-refresh-preview"> = () => {
  // AppScreen is imported from @seed-design/stackflow instead of snippet for demo purpose.
  // AppScreen snippet is integrating PullToRefresh, so it's not necessary to use it here.
  return (
    <AppScreen.Root>
      <AppBar.Root divider>
        <AppBar.Main>
          <AppBar.Title>Pull To Refresh</AppBar.Title>
        </AppBar.Main>
      </AppBar.Root>
      <PullToRefreshRoot
        asChild
        onPtrReady={() => {}}
        onPtrRefresh={async () => {
          await new Promise((resolve) => setTimeout(resolve, 1000));
        }}
      >
        <AppScreen.Layer>
          <PullToRefreshIndicator />
          <PullToRefreshContent asChild>
            <VStack px="spacingX.globalGutter">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam autem deserunt
              reprehenderit ducimus sunt. Quod laudantium excepturi tempora fuga repellendus
              accusantium nam maiores? Quas debitis, neque ullam eligendi minus sit?
            </VStack>
          </PullToRefreshContent>
        </AppScreen.Layer>
      </PullToRefreshRoot>
    </AppScreen.Root>
  );
};

export default PullToRefreshPreview;

import { VStack } from "@seed-design/react";
import { ActivityComponentType } from "@stackflow/react/future";
import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "seed-design/ui/pull-to-refresh";
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

declare module "@stackflow/config" {
  interface Register {
    "pull-to-refresh-tabs": unknown;
  }
}

const PullToRefreshTabs: ActivityComponentType<"pull-to-refresh-tabs"> = () => {
  return (
    <AppScreen>
      <AppBar>
        <AppBarMain>Pull To Refresh</AppBarMain>
      </AppBar>
      <AppScreenContent>
        <TabsRoot defaultValue="1" contentLayout="fill">
          <TabsList>
            <TabsTrigger value="1">Tab 1</TabsTrigger>
            <TabsTrigger value="2">Tab 2</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <PullToRefreshRoot
              onPtrReady={() => {}}
              onPtrRefresh={async () => {
                await new Promise((resolve) => setTimeout(resolve, 1000));
              }}
            >
              <PullToRefreshIndicator />
              <PullToRefreshContent asChild>
                <VStack px="spacingX.globalGutter">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam autem deserunt
                  reprehenderit ducimus sunt. Quod laudantium excepturi tempora fuga repellendus
                  accusantium nam maiores? Quas debitis, neque ullam eligendi minus sit?
                </VStack>
              </PullToRefreshContent>
            </PullToRefreshRoot>
          </TabsContent>
          <TabsContent value="2">
            <VStack px="spacingX.globalGutter">PTR is not available in this tab.</VStack>
          </TabsContent>
        </TabsRoot>
      </AppScreenContent>
    </AppScreen>
  );
};

export default PullToRefreshTabs;

import { Box, HStack, Text } from "@seed-design/react";
import { useState } from "react";
import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "seed-design/ui/pull-to-refresh";
import { Switch } from "seed-design/ui/switch";

const PullToRefreshDisabled = () => {
  const [disabled, setDisabled] = useState(false);

  return (
    <Box width="300px" height="500px" borderColor="stroke.neutralMuted" borderWidth={1}>
      <PullToRefreshRoot
        onPtrReady={() => {}}
        onPtrRefresh={async () => {
          await new Promise((resolve) => setTimeout(resolve, 1000));
        }}
        disabled={disabled}
      >
        <PullToRefreshIndicator />
        <PullToRefreshContent asChild>
          <HStack px="spacingX.globalGutter" py="x4" align="center" justify="space-between">
            <Text>Disabled</Text>
            <Switch checked={disabled} onCheckedChange={setDisabled} />
          </HStack>
        </PullToRefreshContent>
      </PullToRefreshRoot>
    </Box>
  );
};

export default PullToRefreshDisabled;