Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from './text_input_action.module.css';
       3              : 
       4              : import { Tooltip } from './tooltip.js';
       5              : import { CopyToClipboardButton } from './clipboard.js';
       6              : import { ButtonSize, ButtonVariant, IconButton } from './button.js';
       7              : 
       8              : interface TextInputActionProps {
       9              :     children?: React.ReactElement;
      10              :     /// Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies.
      11              :     ['aria-label']: string;
      12              :     ['aria-labelledby']: string;
      13              :     /// Position of tooltip. If no position is passed or defaults to "n"
      14              :     tooltipDirection?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
      15              :     /// The test id of the button
      16              :     ['data-testid']?: string;
      17              : }
      18              : type Props = TextInputActionProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
      19              : 
      20            1 : export function TextInputAction(props: Props) {
      21            1 :     const ariaLabel = props['aria-label'];
      22            1 :     const ariaLabelledBy = props['aria-labelledby'];
      23              : 
      24            1 :     return (
      25            1 :         <IconButton
      26            1 :             className={styles.input_action}
      27            1 :             variant={ButtonVariant.Invisible}
      28            1 :             size={ButtonSize.Small}
      29            1 :             aria-labelledby={ariaLabelledBy}
      30            1 :             aria-label={ariaLabel}
      31            1 :             data-testid={props['data-testid']}
      32            1 :             onClick={props.onClick}
      33              :         >
      34            1 :             {props.children}
      35            1 :         </IconButton>
      36              :     );
      37            1 : }
      38              : 
      39              : interface CopyToClipboardActionProps {
      40              :     value: string;
      41              :     timeoutMs?: number;
      42              :     logContext: string;
      43              :     ariaLabel: string;
      44              : }
      45              : 
      46            1 : export function CopyToClipboardAction(props: CopyToClipboardActionProps): React.ReactElement {
      47            1 :     return (
      48            1 :         <CopyToClipboardButton
      49            1 :             className={styles.input_action}
      50            1 :             aria-label={props.ariaLabel}
      51            1 :             aria-labelledby={''}
      52            1 :             timeoutMs={props.timeoutMs}
      53            1 :             logContext={props.logContext}
      54            1 :             value={props.value}
      55            1 :             variant={ButtonVariant.Invisible}
      56            1 :             size={ButtonSize.Small}
      57            1 :         />
      58              :     );
      59            1 : }