Line data    Source code

       1              : import * as React from "react";
       2              : 
       3              : import * as styles from "./action_list.module.css";
       4              : import { classNames } from '../../utils/classnames.js';
       5              : 
       6              : export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
       7              :     children?: React.ReactElement | React.ReactElement[];
       8              :     leading?: boolean;
       9              :     trailing?: boolean;
      10              : }
      11              : 
      12            1 : export function List(props: ListProps) {
      13            1 :     const { children, className, leading: _leading, trailing: _trailing, ...rest } = props;
      14            1 :     return (
      15            1 :         <div {...rest} className={classNames(styles.list_container, className)}>
      16            1 :             {children}
      17            1 :         </div>
      18              :     );
      19            1 : }
      20              : 
      21              : export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      22              :     children?: React.ReactElement | React.ReactElement[];
      23              :     selected?: boolean;
      24              :     'data-item'?: string;
      25              : }
      26              : 
      27            1 : export const ListItem = React.forwardRef<HTMLButtonElement, ListItemProps>((props, ref) => {
      28            1 :     const { children, className, selected, ...rest } = props;
      29            1 :     return (
      30            1 :         <button
      31            1 :             {...rest}
      32            1 :             ref={ref}
      33            1 :             type="button"
      34            1 :             className={classNames(styles.item_container, className, {
      35            1 :                 [styles.disabled]: props.disabled,
      36            1 :                 [styles.selected]: selected
      37            1 :             })}
      38            1 :             aria-selected={selected}
      39              :         >
      40            1 :             {children}
      41            1 :         </button>
      42              :     );
      43            1 : });
      44              : 
      45              : export interface LeadingProps {
      46              :     children?: React.ReactElement | string;
      47              : }
      48              : 
      49            1 : export function Leading(props: LeadingProps) {
      50            1 :     return (
      51            1 :         <span className={styles.leading_container}>
      52            1 :             {props.children}
      53            1 :         </span>
      54              :     );
      55            1 : }
      56              : 
      57              : export interface TrailingProps {
      58              :     children?: React.ReactElement | string;
      59              : }
      60              : 
      61            1 : export function Trailing(props: TrailingProps) {
      62            1 :     return (
      63            1 :         <span className={styles.trailing_container}>
      64            1 :             {props.children}
      65            1 :         </span>
      66              :     );
      67            1 : }
      68              : 
      69              : export interface GroupHeadingProps {
      70              :     children?: string;
      71              : }
      72              : 
      73            1 : export function GroupHeading(props: GroupHeadingProps) {
      74            1 :     return (
      75            1 :         <span className={styles.group_heading_container}>
      76            1 :             {props.children}
      77            1 :         </span>
      78              :     );
      79            1 : }
      80              : 
      81              : export interface ItemTextProps {
      82              :     children?: undefined | string | React.ReactElement | (undefined | string | React.ReactElement)[];
      83              : }
      84              : 
      85            1 : export function ItemText(props: ItemTextProps) {
      86            1 :     return <span className={styles.text_container}>{props.children}</span>;
      87            1 : }
      88            1 : export function ItemTextTitle(props: ItemTextProps) {
      89            1 :     return <span className={styles.text_title}>{props.children}</span>;
      90            1 : }
      91            1 : export function ItemTextDescription(props: ItemTextProps) {
      92            1 :     return <span className={styles.text_description}>{props.children}</span>;
      93            1 : }
      94              : 
      95              : export function Divider() {
      96              :     return <div className={styles.divider} />;
      97              : }