Loëck Vézien
7 years ago
committed by
GitHub
GitHub
25 changed files with 129 additions and 163 deletions
@ -0,0 +1,22 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { number } from '@storybook/addon-knobs' |
|||
import { translate } from 'react-i18next' |
|||
|
|||
import BalanceInfos from './BalanceInfos' |
|||
|
|||
const stories = storiesOf('Components', module) |
|||
|
|||
const BalanceInfosComp = translate()(BalanceInfos) |
|||
|
|||
stories.add('BalanceInfos', () => ( |
|||
<BalanceInfosComp |
|||
since="month" |
|||
counterValue="USD" |
|||
totalBalance={number('totalBalance', 1000, { min: 0 })} |
|||
sinceBalance={number('sinceBalance', 500, { min: 0 })} |
|||
refBalance={number('refBalance', 200, { min: 0 })} |
|||
/> |
|||
)) |
|||
@ -1,79 +0,0 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { text, boolean } from '@storybook/addon-knobs' |
|||
|
|||
import Search from 'components/base/Search' |
|||
|
|||
const stories = storiesOf('Components/Search', module) |
|||
|
|||
const items = [ |
|||
{ key: 'aleksandr-grichtchouk', name: 'Aleksandr Grichtchouk' }, |
|||
{ key: 'fabiano-caruana', name: 'Fabiano Caruana' }, |
|||
{ key: 'garry-kasparov', name: 'Garry Kasparov' }, |
|||
{ key: 'hikaru-nakamura', name: 'Hikaru Nakamura' }, |
|||
{ key: 'levon-aronian', name: 'Levon Aronian' }, |
|||
{ key: 'magnus-carlsen', name: 'Magnus Carlsen' }, |
|||
{ key: 'maxime-vachier-lagrave', name: 'Maxime Vachier-Lagrave' }, |
|||
{ key: 'shakhriyar-mamedyarov', name: 'Shakhriyar Mamedyarov' }, |
|||
{ key: 'veselin-topalov', name: 'Veselin Topalov' }, |
|||
{ key: 'viswanathan-anand', name: 'Viswanathan Anand' }, |
|||
{ key: 'vladimir-kramnik', name: 'Vladimir Kramnik' }, |
|||
] |
|||
|
|||
const Wrapper = ({ children }) => ( |
|||
<div> |
|||
<div style={{ opacity: 0.2 }}>{'(Change the search value in knobs)'}</div> |
|||
{children} |
|||
</div> |
|||
) |
|||
|
|||
Wrapper.propTypes = { |
|||
children: PropTypes.any.isRequired, |
|||
} |
|||
|
|||
stories.add('basic', () => { |
|||
const value = text('value', '') |
|||
const filterEmpty = boolean('filterEmpty', false) |
|||
return ( |
|||
<Wrapper> |
|||
<Search |
|||
value={value} |
|||
items={items} |
|||
filterEmpty={filterEmpty} |
|||
fuseOptions={{ |
|||
keys: ['name'], |
|||
}} |
|||
render={items => items.map(item => <div key={item.name}>{item.name}</div>)} |
|||
/> |
|||
</Wrapper> |
|||
) |
|||
}) |
|||
|
|||
stories.add('highlight matches', () => { |
|||
const value = text('value', '') |
|||
const filterEmpty = boolean('filterEmpty', false) |
|||
return ( |
|||
<Wrapper> |
|||
<Search |
|||
value={value} |
|||
items={items} |
|||
filterEmpty={filterEmpty} |
|||
highlight |
|||
fuseOptions={{ |
|||
keys: ['name'], |
|||
}} |
|||
renderHighlight={(text, key) => ( |
|||
<b key={key} style={{ textDecoration: 'underline', color: 'red' }}> |
|||
{text} |
|||
</b> |
|||
)} |
|||
render={items => |
|||
items.map(item => <div key={item.key}>{item.name_highlight || item.name}</div>) |
|||
} |
|||
/> |
|||
</Wrapper> |
|||
) |
|||
}) |
|||
Loading…
Reference in new issue