Pull To Refresh

import "./styles";

import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "@/components/ui/pull-to-refresh";
import { PARAGRAPH, useRefreshObservation } from "./use-refresh-observation";

export default function Example() {
  const { refreshCount, lastEvent, callbacks } = useRefreshObservation();

  return (
    <view className="ptr-preview">
      <text className="ptr-preview__title">Pull To Refresh</text>
      <text className="ptr-preview__hint">
        최상단에서 아래로 당겨보세요. 짧게 당기면 취소되고, 충분히 당긴 뒤 놓으면 1초 동안
        새로고침합니다.
      </text>
      <text className="ptr-preview__status">
        {`refresh 횟수: ${refreshCount} · 마지막 이벤트: ${lastEvent}`}
      </text>
      <PullToRefreshRoot className="ptr-preview__frame" {...callbacks}>
        <PullToRefreshIndicator />
        <PullToRefreshContent>
          <view className="ptr-preview__body">
            {Array.from({ length: 8 }, (_, index) => (
              <view key={index} className="ptr-preview__item">
                <text className="ptr-preview__paragraph">{`${index + 1}. ${PARAGRAPH}`}</text>
              </view>
            ))}
          </view>
        </PullToRefreshContent>
      </PullToRefreshRoot>
    </view>
  );
}

import "./styles";

import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "@/components/ui/pull-to-refresh";
import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "@/components/ui/tabs";
import { PARAGRAPH, useRefreshObservation } from "./use-refresh-observation";

export default function Example() {
  const { refreshCount, lastEvent, callbacks } = useRefreshObservation();

  return (
    <view className="ptr-preview">
      <text className="ptr-preview__title">Pull To Refresh</text>
      <text className="ptr-preview__status">
        {`Tab 1 refresh 횟수: ${refreshCount} · 마지막 이벤트: ${lastEvent}`}
      </text>
      <TabsRoot
        defaultValue="1"
        contentLayout="fill"
        className="ptr-preview__tabs"
        style={{ width: "100%" }}
      >
        <TabsList>
          <TabsTrigger value="1">Tab 1</TabsTrigger>
          <TabsTrigger value="2">Tab 2</TabsTrigger>
        </TabsList>
        <TabsCarousel swipeable className="ptr-preview__carousel">
          <TabsContent value="1" className="ptr-preview__tab">
            <PullToRefreshRoot className="ptr-preview__frame" {...callbacks}>
              <PullToRefreshIndicator />
              <PullToRefreshContent>
                <view className="ptr-preview__body">
                  <text className="ptr-preview__paragraph">{PARAGRAPH}</text>
                </view>
              </PullToRefreshContent>
            </PullToRefreshRoot>
          </TabsContent>
          <TabsContent value="2" className="ptr-preview__tab">
            <view className="ptr-preview__body">
              <text className="ptr-preview__paragraph">PTR is not available in this tab.</text>
            </view>
          </TabsContent>
        </TabsCarousel>
      </TabsRoot>
    </view>
  );
}

import "./styles";

import { useState } from "@lynx-js/react";

import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "@/components/ui/pull-to-refresh";
import { Switch } from "@/components/ui/switch";
import { useRefreshObservation } from "./use-refresh-observation";

export default function Example() {
  const [disabled, setDisabled] = useState(false);
  const { refreshCount, lastEvent, callbacks } = useRefreshObservation();

  function onCheckedChange(checked: boolean) {
    "background only";
    setDisabled(checked);
  }

  return (
    <view className="ptr-preview">
      <text className="ptr-preview__title">Disabled</text>
      <text className="ptr-preview__status">
        {`disabled: ${JSON.stringify(disabled)} · refresh 횟수: ${refreshCount} · 마지막 이벤트: ${lastEvent}`}
      </text>
      <PullToRefreshRoot className="ptr-preview__frame" disabled={disabled} {...callbacks}>
        <PullToRefreshIndicator />
        <PullToRefreshContent>
          <view className="ptr-preview__body">
            <view className="ptr-preview__disabled-row">
              <text className="ptr-preview__label">Disabled</text>
              <Switch
                checked={disabled}
                onCheckedChange={onCheckedChange}
                accessibility-label="Disabled"
              />
            </view>
          </view>
        </PullToRefreshContent>
      </PullToRefreshRoot>
    </view>
  );
}

import "./styles";

import { usePullToRefreshPreventPull } from "@seed-design/lynx-react";
import {
  PullToRefreshContent,
  PullToRefreshIndicator,
  PullToRefreshRoot,
} from "@/components/ui/pull-to-refresh";
import { useRefreshObservation } from "./use-refresh-observation";

function ProtectedRegion() {
  const preventPullProps = usePullToRefreshPreventPull();

  return (
    <view className="ptr-preview__protected" {...preventPullProps}>
      <text className="ptr-preview__paragraph">
        이 영역은 당겨서 새로고침이 불가능합니다. Aliquip ad amet eu dolore id enim excepteur
        laboris officia anim in. Irure irure nulla sit eiusmod aliqua sint excepteur amet laboris.
      </text>
    </view>
  );
}

function PullableRegion() {
  return (
    <view className="ptr-preview__item">
      <text className="ptr-preview__paragraph">
        이 영역은 당겨서 새로고침이 가능합니다. Amet in laborum proident fugiat mollit quis aute
        mollit esse nostrud. Excepteur ea proident ipsum duis. Nulla Lorem pariatur exercitation
        velit anim.
      </text>
    </view>
  );
}

export default function Example() {
  const { refreshCount, lastEvent, callbacks } = useRefreshObservation();

  return (
    <view className="ptr-preview">
      <text className="ptr-preview__title">Prevent Pull</text>
      <text className="ptr-preview__status">
        {`refresh 횟수: ${refreshCount} · 마지막 이벤트: ${lastEvent}`}
      </text>
      <PullToRefreshRoot className="ptr-preview__frame" {...callbacks}>
        <PullToRefreshIndicator />
        <PullToRefreshContent>
          <view className="ptr-preview__body">
            <PullableRegion />
            <ProtectedRegion />
            <PullableRegion />
            <ProtectedRegion />
          </view>
        </PullToRefreshContent>
      </PullToRefreshRoot>
    </view>
  );
}