Sha256: 6a261540bdc4390338b745a4c49444e4344f5821f4c8c25974e8c096e72728ef
Contents?: true
Size: 1.99 KB
Versions: 21
Compression:
Stored size: 1.99 KB
Contents
import React from "react";
import classnames from "classnames";
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
import { globalProps } from "../utilities/globalProps";
type ListProps = {
aria?: { [key: string]: string };
borderless?: boolean;
className?: string;
children: React.ReactNode[] | React.ReactNode;
dark?: boolean;
data?: object;
id?: string;
layout: "" | "left" | "right";
ordered?: boolean;
role?: string;
tabIndex?: number;
text?: string;
size?: string;
variant?: string;
xpadding: boolean;
};
const List = (props: ListProps) => {
const {
aria = {},
borderless = false,
children,
className,
dark = false,
data = {},
id,
layout = "",
ordered = false,
role,
size = "",
tabIndex,
xpadding = false,
variant,
text,
} = props;
const layoutClass: { [key: string]: string } = {
left: "layout_left",
right: "layout_right",
default: "",
};
const childrenWithProps = React.Children.map(
children,
(child: React.ReactElement) => {
return React.cloneElement(child, { text, variant });
}
);
const ariaProps = buildAriaProps(aria);
const dataProps = buildDataProps(data);
const classes = classnames(
buildCss("pb_list_kit", layoutClass[layout], size, {
dark: dark,
borderless: borderless,
ordered: ordered,
xpadding: xpadding,
}),
globalProps(props),
className
);
return (
<div className={classes}>
{ordered ? (
<ol
{...ariaProps}
{...dataProps}
className={className}
id={id}
role={role}
tabIndex={tabIndex}
>
{childrenWithProps}
</ol>
) : (
<ul
{...ariaProps}
{...dataProps}
className={className}
id={id}
role={role}
tabIndex={tabIndex}
>
{childrenWithProps}
</ul>
)}
</div>
);
};
export default List;
Version data entries
21 entries across 21 versions & 1 rubygems