Pull To Refresh
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
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;
Installation
npx @seed-design/cli@latest add pull-to-refresh
pnpm dlx @seed-design/cli@latest add pull-to-refresh
yarn dlx @seed-design/cli@latest add pull-to-refresh
bun x @seed-design/cli@latest add pull-to-refresh
Props
PullToRefreshRoot
Prop | Type | Default |
---|---|---|
asChild? | boolean | false |
disabled? | boolean | false |
onPtrRefresh? | (() => Promise<void>) | - |
onPtrReady? | (() => void) | - |
onPtrPullEnd? | ((ctx: PullToRefreshContext) => void) | - |
onPtrPullMove? | ((ctx: PullToRefreshContext) => void) | - |
onPtrPullStart? | ((ctx: PullToRefreshContext) => void) | - |
displacementMultiplier? | number | 0.5 |
threshold? | number | 44 |
PullToRefreshIndicator
Prop | Type | Default |
---|
PullToRefreshContent
Prop | Type | Default |
---|---|---|
asChild? | boolean | false |
Examples
PTR in Tabs
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;
Disabled
disabled
속성을 사용하여 PTR를 비활성화할 수 있습니다.
Disabled
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.neutral" 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;
Last updated on