Extended Action Sheet (Deprecated)

더 이상 사용되지 않습니다. Swipeable Menu Sheet을 사용하세요.

import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
import { PrefixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  ExtendedActionSheetContent,
  ExtendedActionSheetGroup,
  ExtendedActionSheetItem,
  ExtendedActionSheetRoot,
  ExtendedActionSheetTrigger,
} from "seed-design/ui/extended-action-sheet";

const ExtendedActionSheetPreview = () => {
  return (
    <ExtendedActionSheetRoot>
      <ExtendedActionSheetTrigger asChild>
        <ActionButton>Open</ActionButton>
      </ExtendedActionSheetTrigger>
      <ExtendedActionSheetContent aria-label="Extended Action Sheet">
        <ExtendedActionSheetGroup>
          <ExtendedActionSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 1
          </ExtendedActionSheetItem>
          <ExtendedActionSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 2
          </ExtendedActionSheetItem>
          <ExtendedActionSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 3
          </ExtendedActionSheetItem>
        </ExtendedActionSheetGroup>
        <ExtendedActionSheetGroup>
          <ExtendedActionSheetItem>
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 4
          </ExtendedActionSheetItem>
          <ExtendedActionSheetItem tone="critical">
            <PrefixIcon svg={<IconEyeSlashLine />} />
            Action 5
          </ExtendedActionSheetItem>
        </ExtendedActionSheetGroup>
      </ExtendedActionSheetContent>
    </ExtendedActionSheetRoot>
  );
};

export default ExtendedActionSheetPreview;

Installation

npx @seed-design/cli@latest add ui:extended-action-sheet

pnpm dlx @seed-design/cli@latest add ui:extended-action-sheet

yarn dlx @seed-design/cli@latest add ui:extended-action-sheet

bun x @seed-design/cli@latest add ui:extended-action-sheet

의존성 설치

npm install @seed-design/react

yarn add @seed-design/react

pnpm add @seed-design/react

bun add @seed-design/react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:extended-action-sheet
 * @requires @seed-design/react@^2.0.0
 * @requires @seed-design/css@^2.0.0
 **/

"use client";

import { ExtendedActionSheet as SeedExtendedActionSheet } from "@seed-design/react";
import { forwardRef } from "react";
import type * as React from "react";

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export interface ExtendedActionSheetRootProps extends SeedExtendedActionSheet.RootProps {}

/**
 * @see https://seed-design.io/react/components/extended-action-sheet
 * @deprecated Use swipeable-menu-sheet instead.
 */
export const ExtendedActionSheetRoot = (props: ExtendedActionSheetRootProps) => {
  const { children, ...otherProps } = props;
  return (
    <SeedExtendedActionSheet.Root closeOnInteractOutside={true} {...otherProps}>
      {children}
    </SeedExtendedActionSheet.Root>
  );
};

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export interface ExtendedActionSheetTriggerProps extends SeedExtendedActionSheet.TriggerProps {}

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export const ExtendedActionSheetTrigger = SeedExtendedActionSheet.Trigger;

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export interface ExtendedActionSheetContentProps
  extends Omit<SeedExtendedActionSheet.ContentProps, "title"> {
  title?: React.ReactNode;

  layerIndex?: number;
}

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export const ExtendedActionSheetContent = forwardRef<
  HTMLDivElement,
  ExtendedActionSheetContentProps
>(({ children, title, layerIndex, ...otherProps }, ref) => {
  if (
    !title &&
    !otherProps["aria-labelledby"] &&
    !otherProps["aria-label"] &&
    process.env.NODE_ENV !== "production"
  ) {
    console.warn(
      "ExtendedActionSheetContent: aria-labelledby or aria-label should be provided if title is not provided.",
    );
  }

  return (
    <SeedExtendedActionSheet.Positioner
      style={{ "--layer-index": layerIndex } as React.CSSProperties}
    >
      <SeedExtendedActionSheet.Backdrop />
      <SeedExtendedActionSheet.Content ref={ref} {...otherProps}>
        {title && (
          <SeedExtendedActionSheet.Header>
            <SeedExtendedActionSheet.Title>{title}</SeedExtendedActionSheet.Title>
          </SeedExtendedActionSheet.Header>
        )}
        <SeedExtendedActionSheet.List>{children}</SeedExtendedActionSheet.List>
        <SeedExtendedActionSheet.Footer>
          {/* You may implement your own i18n for dismiss label */}
          <SeedExtendedActionSheet.CloseButton>취소</SeedExtendedActionSheet.CloseButton>
        </SeedExtendedActionSheet.Footer>
      </SeedExtendedActionSheet.Content>
    </SeedExtendedActionSheet.Positioner>
  );
});

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export interface ExtendedActionSheetGroupProps extends SeedExtendedActionSheet.GroupProps {}

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export const ExtendedActionSheetGroup = SeedExtendedActionSheet.Group;

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export interface ExtendedActionSheetItemProps extends SeedExtendedActionSheet.ItemProps {}

/**
 * @deprecated Use swipeable-menu-sheet instead.
 */
export const ExtendedActionSheetItem = SeedExtendedActionSheet.Item;

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */