Attachment Display Field

import "@seed-design/lynx-css/base.css";

import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { useRef } from "@lynx-js/react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
const FIXTURE_ENTRIES: AttachmentDisplayEntry[] = [
  {
    id: "fixture-1",
    thumbnailUrl: "https://picsum.photos/seed/seed1/200/200",
    status: "success",
  },
  {
    id: "fixture-2",
    thumbnailUrl: "https://picsum.photos/seed/seed2/200/200",
    status: "success",
  },
];

export default function AttachmentDisplayPreview() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const nextFixtureId = useRef(0);

  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentDisplayField defaultEntries={FIXTURE_ENTRIES} maxEntries={5}>
          <AttachmentDisplay
            onTriggerTap={({ addEntries }) => {
              // 문서 고정 fixture입니다. 실제 앱에서는 호스트 미디어 picker adapter를 전달하세요.
              const id = `fixture-added-${nextFixtureId.current++}`;
              addEntries([
                {
                  id,
                  thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`,
                  status: "success",
                },
              ]);
            }}
          />
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef } from "@lynx-js/react";
import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";

const INITIAL_ENTRY: AttachmentDisplayEntry = {
  id: "trigger-1",
  thumbnailUrl: "https://picsum.photos/seed/trigger1/200/200",
  status: "success",
};

export default function AttachmentDisplayTrigger() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const nextId = useRef(0);

  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentDisplayField defaultEntries={[INITIAL_ENTRY]} maxEntries={3}>
          <AttachmentDisplay
            onTriggerTap={({ addEntries }) => {
              // 문서 고정 fixture입니다. 실제 앱에서는 호스트 media picker 결과를 전달하세요.
              const id = `trigger-added-${nextId.current++}`;
              addEntries([
                { id, thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`, status: "success" },
              ]);
            }}
          />
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef, useState } from "@lynx-js/react";
import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { Text, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";

export default function AttachmentDisplayValueChanges() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [entries, setEntries] = useState<AttachmentDisplayEntry[]>([]);
  const entriesRef = useRef(entries);
  const [logs, setLogs] = useState<string[]>([]);
  const nextId = useRef(0);
  entriesRef.current = entries;

  const handleEntriesChange = (next: AttachmentDisplayEntry[]) => {
    const previous = entriesRef.current;
    const added = next.filter((entry) => !previous.some((oldEntry) => oldEntry.id === entry.id));
    const removed = previous.filter((entry) => !next.some((newEntry) => newEntry.id === entry.id));
    setLogs((current) => [
      ...current,
      ...(added.length > 0 ? [`added: ${added.map((entry) => entry.id).join(", ")}`] : []),
      ...(removed.length > 0 ? [`removed: ${removed.map((entry) => entry.id).join(", ")}`] : []),
    ]);
    entriesRef.current = next;
    setEntries(next);
  };

  return (
    <view className={seedClassName}>
      <VStack gap="x4" width="100%" align="center">
        <VStack gap="x1">
          {logs.length === 0 ? (
            <Text color="fg.neutralMuted">아이템을 추가하거나 삭제하면 로그가 표시됩니다.</Text>
          ) : null}
          {logs.map((log, index) => (
            <Text key={`${log}-${index}`}>{log}</Text>
          ))}
        </VStack>
        <AttachmentDisplayField
          entries={entries}
          onEntriesChange={handleEntriesChange}
          maxEntries={3}
        >
          <AttachmentDisplay
            onTriggerTap={({ addEntries }) => {
              // 문서 고정 fixture입니다. 실제 앱에서는 호스트 picker adapter가 반환한 entries를 전달하세요.
              const id = `value-change-${nextId.current++}`;
              addEntries([
                { id, thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`, status: "success" },
              ]);
            }}
          />
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef } from "@lynx-js/react";
import type {
  AttachmentDisplayEntry,
  AttachmentDisplayStatusDetails,
} from "@seed-design/lynx-react";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";

const INITIAL_ENTRIES: AttachmentDisplayEntry[] = [
  {
    id: "upload-1",
    thumbnailUrl: "https://picsum.photos/seed/upload1/200/200",
    status: "uploading",
    progress: 30,
  },
  { id: "upload-2", thumbnailUrl: "https://picsum.photos/seed/upload2/200/200", status: "success" },
  { id: "upload-3", thumbnailUrl: "https://picsum.photos/seed/upload3/200/200", status: "error" },
];

function runFixtureUpload(
  id: string,
  updateEntryStatus: (id: string, details: AttachmentDisplayStatusDetails) => void,
) {
  "background only";

  updateEntryStatus(id, { status: "uploading", progress: 0 });
  setTimeout(() => updateEntryStatus(id, { status: "uploading", progress: 25 }), 250);
  setTimeout(() => updateEntryStatus(id, { status: "uploading", progress: 60 }), 500);
  setTimeout(() => updateEntryStatus(id, { status: "success" }), 750);
}

export default function AttachmentDisplayStatus() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const nextId = useRef(0);

  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentDisplayField defaultEntries={INITIAL_ENTRIES} maxEntries={5}>
          <AttachmentDisplay
            onTriggerTap={({ addEntries, updateEntryStatus }) => {
              // 문서 고정 fixture입니다. 실제 앱에서는 host upload operation을 시작하세요.
              const id = `upload-added-${nextId.current++}`;
              addEntries([
                {
                  id,
                  thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`,
                  status: "uploading",
                },
              ]);
              runFixtureUpload(id, updateEntryStatus);
            }}
            onRetry={(entry, { updateEntryStatus }) =>
              runFixtureUpload(entry.id, updateEntryStatus)
            }
          />
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import IconXmarkFill from "@karrotmarket/lynx-monochrome-icon/IconXmarkFill";
import { useRef, useState } from "@lynx-js/react";
import {
  AttachmentDisplay as SeedAttachmentDisplay,
  Icon,
  VStack,
  useSeedClassName,
} from "@seed-design/lynx-react";
import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { AttachmentDisplayField } from "@/components/ui/attachment-display-field";
import {
  AttachmentDisplayReorderable,
  SortableAttachmentDisplayItem,
} from "@/components/ui/attachment-display-field-reorderable";

const INITIAL_ENTRIES: AttachmentDisplayEntry[] = [
  {
    id: "reorder-1",
    thumbnailUrl: "https://picsum.photos/seed/reorder1/200/200",
    status: "success",
  },
  {
    id: "reorder-2",
    thumbnailUrl: "https://picsum.photos/seed/reorder2/200/200",
    status: "success",
  },
  {
    id: "reorder-3",
    thumbnailUrl: "https://picsum.photos/seed/reorder3/200/200",
    status: "success",
  },
];

export default function AttachmentDisplayReorderableExample() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [entries, setEntries] = useState(INITIAL_ENTRIES);
  const nextId = useRef(0);
  return (
    <view className={seedClassName}>
      <VStack p="x6" width="100%">
        <AttachmentDisplayField entries={entries} onEntriesChange={setEntries} maxEntries={5}>
          <AttachmentDisplayReorderable
            onTriggerTap={({ addEntries }) => {
              // 문서 고정 fixture입니다. 실제 앱에서는 호스트 picker 결과를 전달하세요.
              const id = `reorder-added-${nextId.current++}`;
              addEntries([
                { id, thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`, status: "success" },
              ]);
            }}
          >
            {({ entries: currentEntries }) =>
              currentEntries.map((entry, index) => (
                <SortableAttachmentDisplayItem key={entry.id} entry={entry} index={index}>
                  <SeedAttachmentDisplay.ItemSurface>
                    <SeedAttachmentDisplay.ItemImage />
                    {index === 0 ? (
                      <SeedAttachmentDisplay.ItemBadge>대표사진</SeedAttachmentDisplay.ItemBadge>
                    ) : null}
                  </SeedAttachmentDisplay.ItemSurface>
                  <SeedAttachmentDisplay.ItemRemoveButton accessibility-label="파일 제거">
                    <Icon icon={<IconXmarkFill />} />
                  </SeedAttachmentDisplay.ItemRemoveButton>
                </SortableAttachmentDisplayItem>
              ))
            }
          </AttachmentDisplayReorderable>
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";

const INITIAL_ENTRIES: AttachmentDisplayEntry[] = [
  {
    id: "disabled-1",
    thumbnailUrl: "https://picsum.photos/seed/disabled1/200/200",
    status: "success",
  },
];

export default function AttachmentDisplayDisabled() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentDisplayField defaultEntries={INITIAL_ENTRIES} maxEntries={5} disabled>
          <AttachmentDisplay onTriggerTap={() => {}} />
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";

const INITIAL_ENTRIES: AttachmentDisplayEntry[] = [
  {
    id: "readonly-1",
    thumbnailUrl: "https://picsum.photos/seed/readonly1/200/200",
    status: "success",
  },
  {
    id: "readonly-2",
    thumbnailUrl: "https://picsum.photos/seed/readonly2/200/200",
    status: "success",
  },
];

export default function AttachmentDisplayReadOnly() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentDisplayField defaultEntries={INITIAL_ENTRIES} maxEntries={5} readOnly>
          <AttachmentDisplay onTriggerTap={() => {}} />
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef, useState } from "@lynx-js/react";
import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { ActionButton, HStack, Text, VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";

export default function AttachmentDisplayControlled() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [entries, setEntries] = useState<AttachmentDisplayEntry[]>([]);
  const nextId = useRef(0);

  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentDisplayField entries={entries} onEntriesChange={setEntries} maxEntries={5}>
          <AttachmentDisplay
            onTriggerTap={({ addEntries }) => {
              // 문서 고정 fixture입니다. 실제 앱에서는 호스트 picker 결과를 전달하세요.
              const id = `controlled-${nextId.current++}`;
              addEntries([
                { id, thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`, status: "success" },
              ]);
            }}
          />
        </AttachmentDisplayField>
        <Text>현재 아이템: {entries.length}개</Text>
        <HStack gap="x2">
          <ActionButton bindtap={() => setEntries([])}>전체 삭제</ActionButton>
        </HStack>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import * as React from "@lynx-js/react";
import { useRef } from "@lynx-js/react";
import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { useSeedClassName, VStack } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";
import { TextField, TextFieldInput } from "@/components/ui/text-field";

type AttachmentDisplayFieldStyle = NonNullable<
  React.ComponentProps<typeof AttachmentDisplayField>["style"]
> & {
  "--seed-attachment-input-extend-x": string;
};

const INSET_STYLE: AttachmentDisplayFieldStyle = {
  "--seed-attachment-input-extend-x": "var(--seed-dimension-spacing-x-global-gutter)",
};

const INITIAL_ENTRIES: AttachmentDisplayEntry[] = Array.from({ length: 8 }, (_, index) => ({
  id: `inset-${index + 1}`,
  thumbnailUrl: `https://picsum.photos/seed/inset${index + 1}/200/200`,
  status: "success",
}));

export default function AttachmentDisplayCustomInset() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const nextId = useRef(0);
  return (
    <view className={seedClassName}>
      <VStack
        px="x6"
        width="400px"
        maxWidth="full"
        bg="palette.gray300"
        borderWidth={1}
        borderColor="stroke.neutralMuted"
      >
        <VStack gap="spacingY.componentDefault" bg="bg.layerDefault">
          <TextField label="이름">
            <TextFieldInput placeholder="홍길동" />
          </TextField>
          <AttachmentDisplayField
            defaultEntries={INITIAL_ENTRIES}
            maxEntries={10}
            style={INSET_STYLE}
          >
            <AttachmentDisplay
              onTriggerTap={({ addEntries }) => {
                // 문서 고정 fixture입니다. 실제 앱에서는 호스트 picker 결과를 전달하세요.
                const id = `inset-added-${nextId.current++}`;
                addEntries([
                  {
                    id,
                    thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`,
                    status: "success",
                  },
                ]);
              }}
            />
          </AttachmentDisplayField>
        </VStack>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import { useRef, useState } from "@lynx-js/react";
import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";

const INITIAL_ENTRY: AttachmentDisplayEntry = {
  id: "field-1",
  thumbnailUrl: "https://picsum.photos/seed/field1/200/200",
  status: "success",
};

export default function AttachmentDisplayFieldExample() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [entries, setEntries] = useState<AttachmentDisplayEntry[]>([INITIAL_ENTRY]);
  const nextId = useRef(0);
  const invalid = entries.length < 1;

  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentDisplayField
          entries={entries}
          onEntriesChange={setEntries}
          maxEntries={5}
          invalid={invalid}
          label="프로필 사진"
          description="최대 5장까지 첨부할 수 있어요"
          errorMessage="최소 1장은 첨부해야 해요"
          required
          showRequiredIndicator
        >
          <AttachmentDisplay
            onTriggerTap={({ addEntries }) => {
              // 문서 고정 fixture입니다. 실제 앱에서는 호스트 picker 결과를 전달하세요.
              const id = `field-added-${nextId.current++}`;
              addEntries([
                { id, thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`, status: "success" },
              ]);
            }}
          />
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

import "@seed-design/lynx-css/base.css";

import IconArrowClockwiseCircularFill from "@karrotmarket/lynx-monochrome-icon/IconArrowClockwiseCircularFill";
import IconXmarkFill from "@karrotmarket/lynx-monochrome-icon/IconXmarkFill";
import { useRef, useState } from "@lynx-js/react";
import {
  AttachmentDisplay as SeedAttachmentDisplay,
  Icon,
  VStack,
  useSeedClassName,
} from "@seed-design/lynx-react";
import type { AttachmentDisplayEntry } from "@seed-design/lynx-react";
import {
  AttachmentDisplay,
  AttachmentDisplayField,
} from "@/components/ui/attachment-display-field";
import { ProgressCircle } from "@/components/ui/progress-circle";

const INITIAL_ENTRIES: AttachmentDisplayEntry[] = [
  {
    id: "customizing-1",
    thumbnailUrl: "https://picsum.photos/seed/customizing1/200/200",
    status: "success",
  },
  {
    id: "customizing-2",
    thumbnailUrl: "https://picsum.photos/seed/customizing2/200/200",
    status: "success",
  },
  {
    id: "customizing-3",
    thumbnailUrl: "https://picsum.photos/seed/customizing3/200/200",
    status: "success",
  },
];

export default function AttachmentDisplayCustomizingItems() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [entries, setEntries] = useState(INITIAL_ENTRIES);
  const nextId = useRef(0);
  return (
    <view className={seedClassName}>
      <VStack gap="x4" p="x6" width="100%">
        <AttachmentDisplayField entries={entries} onEntriesChange={setEntries} maxEntries={10}>
          <AttachmentDisplay
            onTriggerTap={({ addEntries }) => {
              // 문서 고정 fixture입니다. 실제 앱에서는 호스트 picker 결과를 전달하세요.
              const id = `customizing-added-${nextId.current++}`;
              addEntries([
                { id, thumbnailUrl: `https://picsum.photos/seed/${id}/200/200`, status: "success" },
              ]);
            }}
          >
            {({ entries: currentEntries }) =>
              currentEntries.map((entry, index) => (
                <CustomImageItem key={entry.id} entry={entry} isCover={index === 0} />
              ))
            }
          </AttachmentDisplay>
        </AttachmentDisplayField>
      </VStack>
    </view>
  );
}

function CustomImageItem({ entry, isCover }: { entry: AttachmentDisplayEntry; isCover: boolean }) {
  return (
    <SeedAttachmentDisplay.Item entry={entry}>
      <SeedAttachmentDisplay.ItemSurface>
        <SeedAttachmentDisplay.ItemImage />
        {isCover ? (
          <SeedAttachmentDisplay.ItemBadge>대표사진</SeedAttachmentDisplay.ItemBadge>
        ) : null}
        <SeedAttachmentDisplay.ItemBackdrop status="uploading">
          {(item) => (
            <ProgressCircle
              size="24"
              tone="staticWhite"
              {...("progress" in item ? { value: item.progress } : {})}
            />
          )}
        </SeedAttachmentDisplay.ItemBackdrop>
        <SeedAttachmentDisplay.ItemBackdrop status="error">
          <SeedAttachmentDisplay.ItemActionButton bindtap={() => {}}>
            <Icon icon={<IconArrowClockwiseCircularFill />} />
            재시도
          </SeedAttachmentDisplay.ItemActionButton>
        </SeedAttachmentDisplay.ItemBackdrop>
      </SeedAttachmentDisplay.ItemSurface>
      <SeedAttachmentDisplay.ItemRemoveButton accessibility-label="파일 제거">
        <Icon icon={<IconXmarkFill />} />
      </SeedAttachmentDisplay.ItemRemoveButton>
    </SeedAttachmentDisplay.Item>
  );
}