// Copyright 2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only import React, { useState } from 'react'; import { action } from '@storybook/addon-actions'; import type { Props } from './MessageBodyReadMore'; import { MessageBodyReadMore } from './MessageBodyReadMore'; import { setupI18n } from '../../util/setupI18n'; import enMessages from '../../../_locales/en/messages.json'; import type { HydratedBodyRangesType } from '../../types/BodyRange'; import { BodyRange } from '../../types/BodyRange'; import { generateAci } from '../../types/ServiceId'; import { RenderLocation } from './MessageTextRenderer'; const i18n = setupI18n('en', enMessages); export default { title: 'Components/Conversation/MessageBodyReadMore', }; const createProps = (overrideProps: Partial = {}): Props => ({ bodyRanges: overrideProps.bodyRanges, direction: 'incoming', displayLimit: overrideProps.displayLimit, i18n, id: 'some-id', isSpoilerExpanded: overrideProps.isSpoilerExpanded || {}, messageExpanded: action('messageExpanded'), onExpandSpoiler: overrideProps.onExpandSpoiler || action('onExpandSpoiler'), renderLocation: RenderLocation.Timeline, text: overrideProps.text || '', }); function MessageBodyReadMoreTest({ bodyRanges, isSpoilerExpanded, onExpandSpoiler, text: messageBodyText, }: { bodyRanges?: HydratedBodyRangesType; isSpoilerExpanded?: Record; onExpandSpoiler?: (data: Record) => void; text: string; }): JSX.Element { const [displayLimit, setDisplayLimit] = useState(); return ( setDisplayLimit(newDisplayLimit)} /> ); } export function LongText100More(): JSX.Element { return ( ); } LongText100More.story = { name: 'Long text + 100 more', }; export function LotsOfCakeWithSomeCherriesOnTop(): JSX.Element { return ( ); } LotsOfCakeWithSomeCherriesOnTop.story = { name: 'Lots of cake with some cherries on top', }; export function LeafyNotBuffered(): JSX.Element { return ; } export function LongTextWithMention(): JSX.Element { const bodyRanges = [ // This is right at boundary for better testing { start: 800, length: 1, mentionAci: generateAci(), conversationID: 'x', replacementText: 'Alice', }, ]; const text = `${'x '.repeat(400)}\uFFFC woo!${'y '.repeat(100)}`; return ; } export function LongTextWithFormatting(): JSX.Element { const bodyRanges = [ { start: 0, length: 5, style: BodyRange.Style.ITALIC, }, { start: 7, length: 3, style: BodyRange.Style.BOLD, }, { start: 1019, length: 4, style: BodyRange.Style.BOLD, }, { start: 1024, length: 6, style: BodyRange.Style.ITALIC, }, ]; const text = `ready? set... g${'o'.repeat(1000)}al! bold italic`; return ; } export function LongTextMostlySpoiler(): JSX.Element { const [isSpoilerExpanded, setIsSpoilerExpanded] = React.useState({}); const bodyRanges = [ { start: 7, length: 1010, style: BodyRange.Style.SPOILER, }, ]; const text = `ready? set... g${'o'.repeat(1000)}al! bold italic`; return ( setIsSpoilerExpanded(data)} /> ); } LeafyNotBuffered.story = { name: 'Leafy not buffered', }; export function Links(): JSX.Element { return ( ); } export function ExcessiveAmountsOfCake(): JSX.Element { return ; } ExcessiveAmountsOfCake.story = { name: 'Excessive amounts of cake', }; export function LongText(): JSX.Element { return ( ); } LongText.story = { name: 'Long text', };