# All files / src/components ellipsis-reveal.tsx

76.47% Statements 13/17
69.23% Branches 9/13
50% Functions 2/4
76.47% Lines 13/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68

    8x

    8x

    8x

    8x

    2x

    2x
    2x
    2x
    1x

    1x

    1x
    1x

    8x

     import {
      useState,
      type HTMLAttributes,
      type PropsWithChildren,
      createContext,
      type FC,
      type SetStateAction,
      type Dispatch,
      useContext,
    } from 'react';
    import cn from 'classnames';

    import ButtonComponent from './button';

    import '../styles/components/ellipsis-reveal.scss';

    const Context = createContext<
      null | [Set<string>, Dispatch<SetStateAction<Set<string>>>]
    >(null);
    Context.displayName = 'EllipsisRevealContext';

    const Provider: FC<PropsWithChildren> = ({ children }) => {
      const state = useState(new Set<string>());

      return <Context.Provider value={state}>{children}</Context.Provider>;
    };

    const EllipsisReveal = ({
      children,
      className,
      title,
      contextKey,
      ...props
    }: PropsWithChildren<
      HTMLAttributes<HTMLButtonElement> & { contextKey?: string }
    >) => {
      const contextState = useContext(Context);
      const openFromContext =
        contextState && contextKey && contextState[0].has(contextKey);
      const [open, setOpen] = useState(false);
      if (open || openFromContext) {
        return <>{children}</>;
      }
      return (
        <ButtonComponent
          variant="tertiary"
          onClick={() => {
            setOpen(true);
            Iif (contextKey && contextState) {
              contextState[1](
                (previousSet) => new Set([...previousSet, contextKey])
              );
            }
          }}
          className={cn(className, 'ellipsis-reveal')}
          title={title || 'Show more'}
          aria-expanded="false"
          {...props}
        >
          [...]
        </ButtonComponent>
      );
    };

    EllipsisReveal.Provider = Provider;

    export default EllipsisReveal;