Pull To Refresh

import { AppBar, AppScreen } from "@seed-design/stackflow";
import { type StaticActivityComponentType } 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 {
    ActivityPullToRefreshPreview: {};
  }
}

const ActivityPullToRefreshPreview: StaticActivityComponentType<
  "ActivityPullToRefreshPreview"
> = () => {
  // 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>
        <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 ActivityPullToRefreshPreview;

import { VStack } from "@seed-design/react";
import { type StaticActivityComponentType } 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 {
    ActivityPullToRefreshTabs: {};
  }
}

const ActivityPullToRefreshTabs: StaticActivityComponentType<"ActivityPullToRefreshTabs"> = () => {
  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 ActivityPullToRefreshTabs;

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;

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

declare module "@stackflow/config" {
  interface Register {
    ActivityPullToRefreshPreventPull: {};
  }
}

const ActivityPullToRefreshPreventPull: StaticActivityComponentType<
  "ActivityPullToRefreshPreventPull"
> = () => {
  // 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>
        <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" gap="x4">
              <Box p="x4" bg="bg.neutralWeak" color="fg.neutral" borderRadius="r2">
                이 영역은 당겨서 새로고침이 가능합니다. Amet in laborum proident fugiat mollit quis
                aute mollit esse nostrud. Excepteur ea proident ipsum duis. Nulla Lorem pariatur
                exercitation velit anim.
              </Box>
              <Box
                p="x4"
                bg="bg.criticalWeak"
                color="fg.criticalContrast"
                borderRadius="r2"
                {...PullToRefresh.preventPull}
              >
                이 영역은 당겨서 새로고침이 불가능합니다. Aliquip ad amet eu dolore id enim
                excepteur laboris officia anim in. Irure irure nulla sit eiusmod aliqua sint
                excepteur amet laboris.
              </Box>
              <Box p="x4" bg="bg.neutralWeak" color="fg.neutral" borderRadius="r2">
                이 영역은 당겨서 새로고침이 가능합니다. Amet in laborum proident fugiat mollit quis
                aute mollit esse nostrud. Excepteur ea proident ipsum duis. Nulla Lorem pariatur
                exercitation velit anim.
              </Box>
              <Box
                p="x4"
                bg="bg.criticalWeak"
                color="fg.criticalContrast"
                borderRadius="r2"
                {...PullToRefresh.preventPull}
              >
                이 영역은 당겨서 새로고침이 불가능합니다. Aliquip ad amet eu dolore id enim
                excepteur laboris officia anim in. Irure irure nulla sit eiusmod aliqua sint
                excepteur amet laboris.
              </Box>
            </VStack>
          </PullToRefreshContent>
        </AppScreen.Layer>
      </PullToRefreshRoot>
    </AppScreen.Root>
  );
};

export default ActivityPullToRefreshPreventPull;