Storybook: Basic messages and messages with reactions

This commit is contained in:
Ken Powers 2020-02-07 14:07:22 -05:00 committed by GitHub
parent 43b5a9b5a4
commit 38c7fa3da6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 1449 additions and 33 deletions

View file

@ -1,12 +1,12 @@
import * as React from 'react';
const makeApi = (themes?: Array<string>) => ({
const makeApi = (classes?: Array<string>) => ({
createRoot: () => {
const div = document.createElement('div');
if (themes) {
themes.forEach(theme => {
div.classList.add(`${theme}-theme`);
if (classes) {
classes.forEach(theme => {
div.classList.add(theme);
});
}
@ -21,16 +21,16 @@ const makeApi = (themes?: Array<string>) => ({
export const PopperRootContext = React.createContext(makeApi());
export type ThemedProviderProps = {
themes?: Array<string>;
export type ClassyProviderProps = {
classes?: Array<string>;
children?: React.ReactChildren;
};
export const ThemedProvider: React.FunctionComponent<ThemedProviderProps> = ({
themes,
export const ClassyProvider: React.FunctionComponent<ClassyProviderProps> = ({
classes,
children,
}) => {
const api = React.useMemo(() => makeApi(themes), [themes]);
const api = React.useMemo(() => makeApi(classes), [classes]);
return (
<PopperRootContext.Provider value={api}>

File diff suppressed because it is too large Load diff

View file

@ -65,9 +65,9 @@ export type PropsData = {
conversationId: string;
text?: string;
textPending?: boolean;
isSticker: boolean;
isSelected: boolean;
isSelectedCounter: number;
isSticker?: boolean;
isSelected?: boolean;
isSelectedCounter?: number;
interactionMode: 'mouse' | 'keyboard';
direction: 'incoming' | 'outgoing';
timestamp: number;
@ -94,7 +94,7 @@ export type PropsData = {
};
previews: Array<LinkPreviewType>;
authorAvatarPath?: string;
isExpired: boolean;
isExpired?: boolean;
isTapToView?: boolean;
isTapToViewExpired?: boolean;
@ -107,7 +107,7 @@ export type PropsData = {
selectedReaction?: string;
};
type PropsHousekeeping = {
export type PropsHousekeeping = {
i18n: LocalizerType;
disableMenu?: boolean;
disableScroll?: boolean;
@ -158,8 +158,8 @@ interface State {
expired: boolean;
imageBroken: boolean;
isSelected: boolean;
prevSelectedCounter: number;
isSelected?: boolean;
prevSelectedCounter?: number;
pickedReaction?: string;
reactionViewerRoot: HTMLDivElement | null;

View file

@ -101,7 +101,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
return (
<div {...rest} ref={ref} className="module-reaction-viewer">
<header className="module-reaction-viewer__header">
{...renderedEmojis
{renderedEmojis
.filter(e => e === 'all' || Boolean(grouped[e]))
.map((cat, index) => {
const re = grouped[cat] || reactions;