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-18
08-14
08-18
08-18
08-18
File name
Commit message
Commit date
"use client";
import {
Children,
Fragment,
cloneElement,
isValidElement,
type ReactElement,
type ReactNode,
} from "react";
import { cx } from "../../utils";
import type { FoxBadgeSize } from "../fox-badge";
export interface FoxBadgeGroupProps {
children?: ReactNode;
/** 자식 배지의 `size`를 전부 이 값으로 덮어쓴다. 자식이 따로 준 값은 무시된다. */
size?: FoxBadgeSize;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
}
/**
* 자식 배지에 그룹 크기를 강제로 덮어쓴다. FoxButtonGroup과 같은 사정이라 같은 방식이다 —
* 호스트 요소는 건드리지 않고, `Children.map`이 들어가지 않는 프래그먼트는 직접 내려간다.
*/
function overrideChildren(children: ReactNode, size: FoxBadgeSize): ReactNode {
return Children.map(children, (child) => {
if (!isValidElement(child)) {
return child;
}
if (child.type === Fragment) {
const fragment = child as ReactElement<{ children?: ReactNode }>;
return overrideChildren(fragment.props.children, size);
}
if (typeof child.type === "string") {
return child;
}
return cloneElement(child as ReactElement<Record<string, unknown>>, { size });
});
}
/**
* @fox 배지 묶음. 배지를 가로로 늘어놓고 폭이 모자라면 줄을 넘긴다.
*
* `size`를 주면 안의 배지 크기가 그 값으로 통일된다. 주지 않으면 배지가 각자 정한다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxBadgeGroup({ children, size, hidden = false, className }: FoxBadgeGroupProps) {
if (hidden) {
return null;
}
return (
<div className={cx("fox-badge-group", className)}>
{size ? overrideChildren(children, size) : children}
</div>
);
}