Storybook: Basic messages and messages with reactions
This commit is contained in:
parent
43b5a9b5a4
commit
38c7fa3da6
14 changed files with 1449 additions and 33 deletions
|
@ -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}>
|
||||
|
|
1302
ts/components/conversation/Message.stories.tsx
Normal file
1302
ts/components/conversation/Message.stories.tsx
Normal file
File diff suppressed because it is too large
Load diff
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue