Migrate ExpireTimer to Storybook
This commit is contained in:
Chris Svenningsen
Josh Perez
parent
6494818f76
commit
ac28f9f13c
3 changed files with 110 additions and 223 deletions
|
|
@ -1,222 +0,0 @@
|
|||
### Countdown at different rates
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="10 second timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 10 * 1000}
|
||||
expirationLength={10 * 1000}
|
||||
expirationTimestamp={Date.now() + 10 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
authorColor="blue"
|
||||
text="30 second timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 30 * 1000}
|
||||
expirationLength={30 * 1000}
|
||||
expirationTimestamp={Date.now() + 30 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="1 minute timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 55 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 55 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="5 minute timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 5 * 60 * 1000}
|
||||
expirationLength={5 * 60 * 1000}
|
||||
expirationTimestamp={Date.now() + 5 * 60 * 1000}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### Timer calculations
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="incoming"
|
||||
text="Full timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 60 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 60 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="Full timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 60 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 60 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="incoming"
|
||||
text="55 timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 55 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 55 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="55 timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 55 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 55 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="incoming"
|
||||
text="30 timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 30 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 30 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="30 timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 30 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 30 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="incoming"
|
||||
text="5 timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 5 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 5 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="5 timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 5 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 5 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="incoming"
|
||||
text="Expired timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now()}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="Expired timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now()}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="incoming"
|
||||
text="Expiration is too far away"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 120 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 120 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="Expiration is too far away"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 120 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() + 120 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="incoming"
|
||||
text="Already expired"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() - 20 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() - 20 * 1000}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
authorColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="Already expired"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() - 20 * 1000}
|
||||
expirationLength={60 * 1000}
|
||||
expirationTimestamp={Date.now() - 20 * 1000}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
109
ts/components/conversation/ExpireTimer.stories.tsx
Normal file
109
ts/components/conversation/ExpireTimer.stories.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { boolean, number } from '@storybook/addon-knobs';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
import { ExpireTimer, Props } from './ExpireTimer';
|
||||
|
||||
const story = storiesOf('Components/Conversation/ExpireTimer', module);
|
||||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
direction: overrideProps.direction || 'outgoing',
|
||||
expirationLength: number(
|
||||
'expirationLength',
|
||||
overrideProps.expirationLength || 30 * 1000
|
||||
),
|
||||
expirationTimestamp: number(
|
||||
'expirationTimestamp',
|
||||
overrideProps.expirationTimestamp || Date.now() + 30 * 1000
|
||||
),
|
||||
withImageNoCaption: boolean(
|
||||
'withImageNoCaption',
|
||||
overrideProps.withImageNoCaption || false
|
||||
),
|
||||
withSticker: boolean('withSticker', overrideProps.withSticker || false),
|
||||
withTapToViewExpired: boolean(
|
||||
'withTapToViewExpired',
|
||||
overrideProps.withTapToViewExpired || false
|
||||
),
|
||||
});
|
||||
|
||||
story.add('30 seconds', () => {
|
||||
const props = createProps();
|
||||
|
||||
return <ExpireTimer {...props} />;
|
||||
});
|
||||
|
||||
story.add('2 minutes', () => {
|
||||
const twoMinutes = 60 * 1000 * 2;
|
||||
const props = createProps({
|
||||
expirationTimestamp: Date.now() + twoMinutes,
|
||||
expirationLength: twoMinutes,
|
||||
});
|
||||
|
||||
return <ExpireTimer {...props} />;
|
||||
});
|
||||
|
||||
story.add('In Progress', () => {
|
||||
const props = createProps({
|
||||
expirationTimestamp: Date.now() + 15 * 1000,
|
||||
});
|
||||
|
||||
return <ExpireTimer {...props} />;
|
||||
});
|
||||
|
||||
story.add('Expired', () => {
|
||||
const props = createProps({
|
||||
expirationTimestamp: Date.now() - 30 * 1000,
|
||||
});
|
||||
|
||||
return <ExpireTimer {...props} />;
|
||||
});
|
||||
|
||||
story.add('Sticker', () => {
|
||||
const props = createProps({
|
||||
withSticker: true,
|
||||
});
|
||||
|
||||
return <ExpireTimer {...props} />;
|
||||
});
|
||||
|
||||
story.add('Tap To View Expired', () => {
|
||||
const props = createProps({
|
||||
withTapToViewExpired: true,
|
||||
});
|
||||
|
||||
return <ExpireTimer {...props} />;
|
||||
});
|
||||
|
||||
story.add('Image No Caption', () => {
|
||||
const props = createProps({
|
||||
withImageNoCaption: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: 'darkgreen' }}>
|
||||
<ExpireTimer {...props} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
story.add('Incoming', () => {
|
||||
const props = createProps({
|
||||
direction: 'incoming',
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={{ backgroundColor: 'darkgreen' }}>
|
||||
<ExpireTimer {...props} />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
story.add('Expiration Too Far Out', () => {
|
||||
const props = createProps({
|
||||
expirationTimestamp: Date.now() + 150 * 1000,
|
||||
});
|
||||
|
||||
return <ExpireTimer {...props} />;
|
||||
});
|
||||
|
|
@ -3,7 +3,7 @@ import classNames from 'classnames';
|
|||
|
||||
import { getIncrement, getTimerBucket } from '../../util/timer';
|
||||
|
||||
interface Props {
|
||||
export interface Props {
|
||||
withImageNoCaption?: boolean;
|
||||
withSticker?: boolean;
|
||||
withTapToViewExpired?: boolean;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue