File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-14
File name
Commit message
Commit date
"use client";
import type { ReactNode } from "react";
import { cx } from "../../utils";
export type FoxTableCellAlign = "start" | "center" | "end";
export interface FoxTableCellProps {
children?: ReactNode;
/** 참이면 `<th>`가 된다. 머리행 안에서는 주지 않아도 행이 채운다. */
head?: boolean;
align?: FoxTableCellAlign;
/**
* 그 줄을 대표하는 칸. 글자가 굵고 커진다 — 시안 list 표의 제목 열이다.
* 누를 수 있게 하려면 안에 링크나 버튼을 넣는다.
*/
emphasis?: boolean;
colSpan?: number;
rowSpan?: number;
/** 열 너비. `<col>` 없이 한 칸만 잡을 때 쓴다. */
width?: string | number;
/**
* 모바일에서 칸 앞에 붙는 열 이름. `list` 표가 카드로 접히면 머리행이 사라져서,
* 이 값이 없으면 무슨 값인지 알 수 없다.
*/
label?: string;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
/** FoxTableRow가 채운다 — 머리행인지. 직접 넘기지 않는다. */
inHead?: boolean;
}
const ALIGN_CLASS: Record<FoxTableCellAlign, string> = {
start: "fox-table-cell--start",
center: "fox-table-cell--center",
end: "fox-table-cell--end",
};
/**
* @fox 표의 칸. 머리칸이면 `<th>`, 아니면 `<td>`다.
*
* 본문 행에 놓인 머리칸은 그 줄의 이름이라 `scope="row"`가 붙는다 — 시안 basic 표의 첫
* 열이 그렇다. 머리행 안이면 열 이름이라 `scope="col"`이다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxTableCell({
children,
head,
align,
emphasis = false,
colSpan,
rowSpan,
width,
label,
hidden = false,
className,
inHead = false,
}: FoxTableCellProps) {
if (hidden) {
return null;
}
const isHead = head ?? inHead;
const Tag = isHead ? "th" : "td";
return (
<Tag
className={cx(
"fox-table-cell",
isHead ? "fox-table-cell--head" : "fox-table-cell--body",
emphasis && "fox-table-cell--emphasis",
align && ALIGN_CLASS[align],
className
)}
scope={isHead ? (inHead ? "col" : "row") : undefined}
colSpan={colSpan}
rowSpan={rowSpan}
style={width === undefined ? undefined : { inlineSize: width }}
>
{/* 카드로 접혔을 때만 보인다 — 표로 있을 때는 머리행이 이미 같은 말을 한다. */}
{label && <span className="fox-table-cell__label">{label}</span>}
<span className="fox-table-cell__content">{children}</span>
</Tag>
);
}