129 lines
3.5 KiB
JavaScript
129 lines
3.5 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 { View } from 'react-native';
|
|
|
|
import * as HeaderButton from '../../app/containers/HeaderButton';
|
|
import Header from '../../app/containers/Header';
|
|
import { ThemeContext } from '../../app/theme';
|
|
|
|
const stories = storiesOf('Header Buttons', module);
|
|
|
|
const HeaderExample = ({ left, right }) => (
|
|
<Header headerLeft={left} headerTitle={() => <View style={{ flex: 1 }} />} headerRight={right} />
|
|
);
|
|
|
|
stories.add('title', () => (
|
|
<>
|
|
<HeaderExample
|
|
left={() => (
|
|
<HeaderButton.Container left>
|
|
<HeaderButton.Item title='threads' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
right={() => (
|
|
<HeaderButton.Container>
|
|
<HeaderButton.Item title='threads' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
/>
|
|
<HeaderExample
|
|
left={() => (
|
|
<HeaderButton.Container left>
|
|
<HeaderButton.Item title='threads' />
|
|
<HeaderButton.Item title='search' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
right={() => (
|
|
<HeaderButton.Container>
|
|
<HeaderButton.Item title='threads' />
|
|
<HeaderButton.Item title='search' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
/>
|
|
</>
|
|
));
|
|
|
|
stories.add('icons', () => (
|
|
<>
|
|
<HeaderExample
|
|
left={() => (
|
|
<HeaderButton.Container left>
|
|
<HeaderButton.Item iconName='threads' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
right={() => (
|
|
<HeaderButton.Container>
|
|
<HeaderButton.Item iconName='threads' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
/>
|
|
<HeaderExample
|
|
left={() => (
|
|
<HeaderButton.Container left>
|
|
<HeaderButton.Item iconName='threads' />
|
|
<HeaderButton.Item iconName='search' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
right={() => (
|
|
<HeaderButton.Container>
|
|
<HeaderButton.Item iconName='threads' />
|
|
<HeaderButton.Item iconName='search' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
/>
|
|
</>
|
|
));
|
|
|
|
stories.add('badge', () => (
|
|
<>
|
|
<HeaderExample
|
|
left={() => (
|
|
<HeaderButton.Container left>
|
|
<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.Badge tunread={[1]} />} />
|
|
<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.Badge tunread={[1]} tunreadUser={[1]} />} />
|
|
<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.Badge tunread={[1]} tunreadGroup={[1]} />} />
|
|
</HeaderButton.Container>
|
|
)}
|
|
/>
|
|
</>
|
|
));
|
|
|
|
const ThemeStory = ({ theme }) => (
|
|
<ThemeContext.Provider value={{ theme }}>
|
|
<HeaderExample
|
|
left={() => (
|
|
<HeaderButton.Container left>
|
|
<HeaderButton.Item iconName='threads' />
|
|
</HeaderButton.Container>
|
|
)}
|
|
right={() => (
|
|
<HeaderButton.Container>
|
|
<HeaderButton.Item title='Threads' />
|
|
<HeaderButton.Item iconName='threads' badge={() => <HeaderButton.Badge tunread={[1]} />} />
|
|
</HeaderButton.Container>
|
|
)}
|
|
/>
|
|
</ThemeContext.Provider>
|
|
);
|
|
|
|
stories.add('themes', () => (
|
|
<>
|
|
<ThemeStory theme='light' />
|
|
<ThemeStory theme='dark' />
|
|
<ThemeStory theme='black' />
|
|
</>
|
|
));
|
|
|
|
stories.add('common', () => (
|
|
<>
|
|
<HeaderExample left={() => <HeaderButton.Drawer />} />
|
|
<HeaderExample left={() => <HeaderButton.CloseModal />} />
|
|
<HeaderExample left={() => <HeaderButton.CancelModal />} />
|
|
<HeaderExample right={() => <HeaderButton.More />} />
|
|
<HeaderExample right={() => <HeaderButton.Download />} />
|
|
<HeaderExample right={() => <HeaderButton.Preferences />} />
|
|
<HeaderExample right={() => <HeaderButton.Legal />} />
|
|
</>
|
|
));
|