135 lines
2.8 KiB
JavaScript
135 lines
2.8 KiB
JavaScript
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
|
|
import React from 'react';
|
|
import { storiesOf } from '@storybook/react-native';
|
|
import { ScrollView } from 'react-native';
|
|
import { combineReducers, createStore } from 'redux';
|
|
import { Provider } from 'react-redux';
|
|
|
|
import * as List from '../../containers/List';
|
|
import { themes } from '../../constants/colors';
|
|
import { ThemeContext } from '../../theme';
|
|
import Item from './Item';
|
|
|
|
const author = {
|
|
_id: 'userid',
|
|
username: 'rocket.cat',
|
|
name: 'Rocket Cat'
|
|
};
|
|
const baseUrl = 'https://open.rocket.chat';
|
|
const date = new Date(2020, 10, 10, 10);
|
|
const longText =
|
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
|
|
const defaultItem = {
|
|
msg: 'Message content',
|
|
tcount: 1,
|
|
replies: [1],
|
|
ts: date,
|
|
tlm: date,
|
|
u: author,
|
|
attachments: []
|
|
};
|
|
|
|
const BaseItem = ({ item, ...props }) => (
|
|
<Item
|
|
baseUrl={baseUrl}
|
|
item={{
|
|
...defaultItem,
|
|
...item
|
|
}}
|
|
onPress={() => alert('pressed')}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
const listDecorator = story => (
|
|
<ScrollView>
|
|
<List.Separator />
|
|
{story()}
|
|
<List.Separator />
|
|
</ScrollView>
|
|
);
|
|
|
|
const reducers = combineReducers({
|
|
login: () => ({
|
|
user: {
|
|
id: 'abc',
|
|
username: 'rocket.cat',
|
|
name: 'Rocket Cat'
|
|
}
|
|
}),
|
|
server: () => ({
|
|
server: 'https://open.rocket.chat',
|
|
version: '3.7.0'
|
|
}),
|
|
share: () => ({
|
|
server: 'https://open.rocket.chat',
|
|
version: '3.7.0'
|
|
}),
|
|
settings: () => ({
|
|
blockUnauthenticatedAccess: false
|
|
})
|
|
});
|
|
const store = createStore(reducers);
|
|
|
|
const stories = storiesOf('Thread Messages.Item', module)
|
|
.addDecorator(listDecorator)
|
|
.addDecorator(story => <Provider store={store}>{story()}</Provider>);
|
|
|
|
stories.add('content', () => (
|
|
<>
|
|
<BaseItem />
|
|
<List.Separator />
|
|
<BaseItem
|
|
item={{
|
|
msg: longText
|
|
}}
|
|
/>
|
|
<List.Separator />
|
|
<BaseItem
|
|
item={{
|
|
tcount: 1000,
|
|
replies: [...new Array(1000)]
|
|
}}
|
|
/>
|
|
<List.Separator />
|
|
<BaseItem
|
|
item={{
|
|
msg: '',
|
|
attachments: [{ title: 'Attachment title' }]
|
|
}}
|
|
/>
|
|
<List.Separator />
|
|
<BaseItem useRealName />
|
|
</>
|
|
));
|
|
|
|
stories.add('badge', () => (
|
|
<>
|
|
<BaseItem badgeColor={themes.light.mentionMeColor} />
|
|
<List.Separator />
|
|
<BaseItem badgeColor={themes.light.mentionGroupColor} />
|
|
<List.Separator />
|
|
<BaseItem badgeColor={themes.light.tunreadColor} />
|
|
<BaseItem
|
|
item={{
|
|
msg: longText
|
|
}}
|
|
badgeColor={themes.light.tunreadColor}
|
|
/>
|
|
</>
|
|
));
|
|
|
|
const ThemeStory = ({ theme }) => (
|
|
<ThemeContext.Provider value={{ theme }}>
|
|
<BaseItem badgeColor={themes[theme].mentionMeColor} />
|
|
</ThemeContext.Provider>
|
|
);
|
|
|
|
stories.add('themes', () => (
|
|
<>
|
|
<ThemeStory theme='light' />
|
|
<ThemeStory theme='dark' />
|
|
<ThemeStory theme='black' />
|
|
</>
|
|
));
|