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 69 70 | 23x 23x 23x 23x 23x 7x 7x 7x 14x 7x 7x 7x 14x 7x 7x 23x 23x | import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import { ComponentProps } from '../types';
export interface SpeechBubbleProps
extends ComponentProps,
HTMLProps<HTMLElement> {
/**
* Set the style `display: block;`.
*/
block?: boolean;
/**
* Display the tail on either the left or the right.
* @default 'left'
*/
tailPosition?: 'left' | 'right';
/**
* Elements to display above the speech bubble such as user name or time of post.
*/
header?: React.ReactChild;
/**
* Elements to display below the speech bubble such as user name or time of post.
*/
footer?: React.ReactChild;
}
/**
* Speech bubble component for displaying conversations / messages.
*/
export class SpeechBubble extends PureComponent<SpeechBubbleProps, {}> {
public render() {
const {
className,
children,
tailPosition = 'left',
block,
header,
footer,
component: Component = 'div',
...remainingProps
} = this.props;
return (
<Component
{...remainingProps}
className={classNames(
'speech-bubble',
tailPosition,
block && 'block',
className
)}
>
{typeof header !== 'undefined' && (
<span className="speech-bubble-header">{header}</span>
)}
<div className="bubble">
{children}
<div className="tail" />
</div>
{typeof footer !== 'undefined' && (
<span className="speech-bubble-footer">{footer}</span>
)}
</Component>
);
}
}
export default SpeechBubble;
|