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;
|