|
| 1 | +import React, { CSSProperties, forwardRef, memo } from "react"; |
| 2 | +import { assert, Equals } from "tsafe"; |
| 3 | +import { symToStr } from "tsafe/symToStr"; |
| 4 | +import Tag, { TagProps } from "./Tag"; |
| 5 | +import { useAnalyticsId } from "./tools/useAnalyticsId"; |
| 6 | +import { cx } from "./tools/cx"; |
| 7 | + |
| 8 | +export type TagsGroupProps = TagsGroupProps.Common; |
| 9 | + |
| 10 | +//https://main--ds-gouv.netlify.app/example/component/tag/#:~:text=Groupe%20de%20tags |
| 11 | +export namespace TagsGroupProps { |
| 12 | + export type Common = { |
| 13 | + id?: string; |
| 14 | + className?: string; |
| 15 | + style?: CSSProperties; |
| 16 | + smallTags?: TagProps["small"]; |
| 17 | + /** 6 tags should be the maximum. */ |
| 18 | + tags: [TagProps, ...TagProps[]]; |
| 19 | + }; |
| 20 | +} |
| 21 | + |
| 22 | +export const TagsGroup = memo( |
| 23 | + forwardRef<HTMLUListElement, TagsGroupProps>((props, ref) => { |
| 24 | + const { id: props_id, className, tags, smallTags = false, style, ...rest } = props; |
| 25 | + |
| 26 | + assert<Equals<keyof typeof rest, never>>(); |
| 27 | + |
| 28 | + const id = useAnalyticsId({ |
| 29 | + "defaultIdPrefix": "fr-tags-group", |
| 30 | + "explicitlyProvidedId": props_id |
| 31 | + }); |
| 32 | + |
| 33 | + return ( |
| 34 | + <ul className={cx("fr-tags-group", className)} style={style} id={id} ref={ref}> |
| 35 | + {tags.map((tagProps, i) => ( |
| 36 | + <li key={i}> |
| 37 | + <Tag small={smallTags} {...tagProps} /> |
| 38 | + </li> |
| 39 | + ))} |
| 40 | + </ul> |
| 41 | + ); |
| 42 | + }) |
| 43 | +); |
| 44 | + |
| 45 | +TagsGroup.displayName = symToStr({ TagsGroup }); |
| 46 | + |
| 47 | +export default TagsGroup; |
0 commit comments