2023-01-03 19:55:46 +00:00
|
|
|
// Copyright 2021 Signal Messenger, LLC
|
2021-10-20 20:46:42 +00:00
|
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
2021-11-29 15:42:26 +00:00
|
|
|
import React, { useState } from 'react';
|
2021-10-20 20:46:42 +00:00
|
|
|
|
|
|
|
import { action } from '@storybook/addon-actions';
|
|
|
|
import { text } from '@storybook/addon-knobs';
|
|
|
|
|
2021-10-26 19:15:33 +00:00
|
|
|
import type { Props } from './MessageBodyReadMore';
|
|
|
|
import { MessageBodyReadMore } from './MessageBodyReadMore';
|
2021-10-20 20:46:42 +00:00
|
|
|
import { setupI18n } from '../../util/setupI18n';
|
|
|
|
import enMessages from '../../../_locales/en/messages.json';
|
|
|
|
|
|
|
|
const i18n = setupI18n('en', enMessages);
|
|
|
|
|
2022-06-07 00:48:02 +00:00
|
|
|
export default {
|
|
|
|
title: 'Components/Conversation/MessageBodyReadMore',
|
|
|
|
};
|
2021-10-20 20:46:42 +00:00
|
|
|
|
|
|
|
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|
|
|
bodyRanges: overrideProps.bodyRanges,
|
|
|
|
direction: 'incoming',
|
2021-11-11 23:45:47 +00:00
|
|
|
displayLimit: overrideProps.displayLimit,
|
2021-10-20 20:46:42 +00:00
|
|
|
i18n,
|
2021-11-11 23:45:47 +00:00
|
|
|
id: 'some-id',
|
|
|
|
messageExpanded: action('messageExpanded'),
|
2021-10-20 20:46:42 +00:00
|
|
|
text: text('text', overrideProps.text || ''),
|
|
|
|
});
|
|
|
|
|
2021-11-29 15:42:26 +00:00
|
|
|
function MessageBodyReadMoreTest({
|
|
|
|
text: messageBodyText,
|
|
|
|
}: {
|
|
|
|
text: string;
|
|
|
|
}): JSX.Element {
|
|
|
|
const [displayLimit, setDisplayLimit] = useState<number | undefined>();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<MessageBodyReadMore
|
|
|
|
{...createProps({ text: messageBodyText })}
|
|
|
|
displayLimit={displayLimit}
|
|
|
|
messageExpanded={(_, newDisplayLimit) => setDisplayLimit(newDisplayLimit)}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-11-18 00:45:19 +00:00
|
|
|
export function LongText100More(): JSX.Element {
|
|
|
|
return (
|
|
|
|
<MessageBodyReadMoreTest
|
|
|
|
text={`${'test '.repeat(160)}${'extra '.repeat(10)}`}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2021-10-20 20:46:42 +00:00
|
|
|
|
2022-06-07 00:48:02 +00:00
|
|
|
LongText100More.story = {
|
|
|
|
name: 'Long text + 100 more',
|
|
|
|
};
|
|
|
|
|
2022-11-18 00:45:19 +00:00
|
|
|
export function LotsOfCakeWithSomeCherriesOnTop(): JSX.Element {
|
|
|
|
return (
|
|
|
|
<MessageBodyReadMoreTest text={`x${'🍰'.repeat(399)}${'🍒'.repeat(100)}`} />
|
|
|
|
);
|
|
|
|
}
|
2022-06-07 00:48:02 +00:00
|
|
|
|
|
|
|
LotsOfCakeWithSomeCherriesOnTop.story = {
|
|
|
|
name: 'Lots of cake with some cherries on top',
|
|
|
|
};
|
2021-11-29 15:42:26 +00:00
|
|
|
|
2022-11-18 00:45:19 +00:00
|
|
|
export function LeafyNotBuffered(): JSX.Element {
|
|
|
|
return <MessageBodyReadMoreTest text={`x${'🌿'.repeat(450)}`} />;
|
|
|
|
}
|
2022-06-07 00:48:02 +00:00
|
|
|
|
|
|
|
LeafyNotBuffered.story = {
|
|
|
|
name: 'Leafy not buffered',
|
|
|
|
};
|
2021-11-29 15:42:26 +00:00
|
|
|
|
2022-11-18 00:45:19 +00:00
|
|
|
export function Links(): JSX.Element {
|
|
|
|
return (
|
|
|
|
<MessageBodyReadMoreTest
|
|
|
|
text={`${'test '.repeat(176)}https://www.signal.org`}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2021-10-20 20:46:42 +00:00
|
|
|
|
2022-11-18 00:45:19 +00:00
|
|
|
export function ExcessiveAmountsOfCake(): JSX.Element {
|
|
|
|
return <MessageBodyReadMoreTest text={`x${'🍰'.repeat(20000)}`} />;
|
|
|
|
}
|
2021-10-20 20:46:42 +00:00
|
|
|
|
2022-06-07 00:48:02 +00:00
|
|
|
ExcessiveAmountsOfCake.story = {
|
|
|
|
name: 'Excessive amounts of cake',
|
|
|
|
};
|
|
|
|
|
2022-11-18 00:45:19 +00:00
|
|
|
export function LongText(): JSX.Element {
|
|
|
|
return (
|
|
|
|
<MessageBodyReadMoreTest
|
|
|
|
text={`
|
2021-10-20 20:46:42 +00:00
|
|
|
SCENE I. Rome. A street.
|
|
|
|
Enter FLAVIUS, MARULLUS, and certain Commoners
|
|
|
|
FLAVIUS
|
|
|
|
Hence! home, you idle creatures get you home:
|
|
|
|
Is this a holiday? what! know you not,
|
|
|
|
Being mechanical, you ought not walk
|
|
|
|
Upon a labouring day without the sign
|
|
|
|
Of your profession? Speak, what trade art thou?
|
|
|
|
First Commoner
|
|
|
|
Why, sir, a carpenter.
|
|
|
|
MARULLUS
|
|
|
|
Where is thy leather apron and thy rule?
|
|
|
|
What dost thou with thy best apparel on?
|
|
|
|
You, sir, what trade are you?
|
|
|
|
Second Commoner
|
|
|
|
Truly, sir, in respect of a fine workman, I am but,
|
|
|
|
as you would say, a cobbler.
|
|
|
|
MARULLUS
|
|
|
|
But what trade art thou? answer me directly.
|
|
|
|
Second Commoner
|
|
|
|
A trade, sir, that, I hope, I may use with a safe
|
|
|
|
conscience; which is, indeed, sir, a mender of bad soles.
|
|
|
|
MARULLUS
|
|
|
|
What trade, thou knave? thou naughty knave, what trade?
|
|
|
|
Second Commoner
|
|
|
|
Nay, I beseech you, sir, be not out with me: yet,
|
|
|
|
if you be out, sir, I can mend you.
|
|
|
|
MARULLUS
|
|
|
|
What meanest thou by that? mend me, thou saucy fellow!
|
|
|
|
Second Commoner
|
|
|
|
Why, sir, cobble you.
|
|
|
|
FLAVIUS
|
|
|
|
Thou art a cobbler, art thou?
|
|
|
|
Second Commoner
|
|
|
|
Truly, sir, all that I live by is with the awl: I
|
|
|
|
meddle with no tradesman's matters, nor women's
|
|
|
|
matters, but with awl. I am, indeed, sir, a surgeon
|
|
|
|
to old shoes; when they are in great danger, I
|
|
|
|
recover them. As proper men as ever trod upon
|
|
|
|
neat's leather have gone upon my handiwork.
|
|
|
|
FLAVIUS
|
|
|
|
But wherefore art not in thy shop today?
|
|
|
|
Why dost thou lead these men about the streets?
|
|
|
|
Second Commoner
|
|
|
|
Truly, sir, to wear out their shoes, to get myself
|
|
|
|
into more work. But, indeed, sir, we make holiday,
|
|
|
|
to see Caesar and to rejoice in his triumph.
|
|
|
|
MARULLUS
|
|
|
|
Wherefore rejoice? What conquest brings he home?
|
|
|
|
What tributaries follow him to Rome,
|
|
|
|
To grace in captive bonds his chariot-wheels?
|
|
|
|
You blocks, you stones, you worse than senseless things!
|
|
|
|
O you hard hearts, you cruel men of Rome,
|
|
|
|
Knew you not Pompey? Many a time and oft
|
|
|
|
Have you climb'd up to walls and battlements,
|
|
|
|
To towers and windows, yea, to chimney-tops,
|
|
|
|
Your infants in your arms, and there have sat
|
|
|
|
The livelong day, with patient expectation,
|
|
|
|
To see great Pompey pass the streets of Rome:
|
|
|
|
And when you saw his chariot but appear,
|
|
|
|
Have you not made an universal shout,
|
|
|
|
That Tiber trembled underneath her banks,
|
|
|
|
To hear the replication of your sounds
|
|
|
|
Made in her concave shores?
|
|
|
|
And do you now put on your best attire?
|
|
|
|
And do you now cull out a holiday?
|
|
|
|
And do you now strew flowers in his way
|
|
|
|
That comes in triumph over Pompey's blood? Be gone!
|
|
|
|
Run to your houses, fall upon your knees,
|
|
|
|
Pray to the gods to intermit the plague
|
|
|
|
That needs must light on this ingratitude.
|
|
|
|
FLAVIUS
|
|
|
|
Go, go, good countrymen, and, for this fault,
|
|
|
|
Assemble all the poor men of your sort;
|
|
|
|
Draw them to Tiber banks, and weep your tears
|
|
|
|
Into the channel, till the lowest stream
|
|
|
|
Do kiss the most exalted shores of all.
|
|
|
|
Exeunt all the Commoners
|
|
|
|
See whether their basest metal be not moved;
|
|
|
|
They vanish tongue-tied in their guiltiness.
|
|
|
|
Go you down that way towards the Capitol;
|
|
|
|
This way will I
|
|
|
|
disrobe the images,
|
|
|
|
If you do find them deck'd with ceremonies.
|
|
|
|
MARULLUS
|
|
|
|
May we do so?
|
|
|
|
You know it is the feast of Lupercal.
|
|
|
|
FLAVIUS
|
|
|
|
It is no matter; let no images
|
|
|
|
Be hung with Caesar's trophies. I'll about,
|
|
|
|
And drive away the vulgar from the streets:
|
|
|
|
So do you too, where you perceive them thick.
|
|
|
|
These growing feathers pluck'd from Caesar's wing
|
|
|
|
Will make him fly an ordinary pitch,
|
|
|
|
Who else would soar above the view of men
|
|
|
|
And keep us all in servile fearfulness.
|
2021-11-29 15:42:26 +00:00
|
|
|
`}
|
2022-11-18 00:45:19 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2022-06-07 00:48:02 +00:00
|
|
|
|
|
|
|
LongText.story = {
|
|
|
|
name: 'Long text',
|
|
|
|
};
|