Loëck Vézien
7 years ago
committed by
GitHub
GitHub
19 changed files with 352 additions and 123 deletions
@ -0,0 +1,87 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent, Fragment } from 'react' |
||||
|
import styled from 'styled-components' |
||||
|
import QrReader from 'react-qr-reader' |
||||
|
import noop from 'lodash/noop' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import Icon from 'components/base/Icon' |
||||
|
import Input from 'components/base/Input' |
||||
|
|
||||
|
const IconQrCode = ({ onClick }: { onClick: Function }) => ( |
||||
|
<Box color="steel" style={{ position: 'absolute', right: 15 }}> |
||||
|
<Icon fontSize={30} name="qrcode" style={{ cursor: 'pointer' }} onClick={onClick} /> |
||||
|
</Box> |
||||
|
) |
||||
|
|
||||
|
const InputAddress = styled(Input).attrs({ |
||||
|
type: 'text', |
||||
|
})` |
||||
|
padding-right: ${p => p.withQrCode && '55px'}; |
||||
|
` |
||||
|
|
||||
|
const WrapperQrCode = styled(Box)` |
||||
|
margin-top: 10px; |
||||
|
position: absolute; |
||||
|
right: 15px; |
||||
|
top: 100%; |
||||
|
` |
||||
|
|
||||
|
type Props = { |
||||
|
value: string, |
||||
|
onChange: Function, |
||||
|
qrCodeSize: number, |
||||
|
withQrCode: boolean, |
||||
|
} |
||||
|
|
||||
|
type State = { |
||||
|
qrReaderOpened: boolean, |
||||
|
} |
||||
|
|
||||
|
class RecipientAddress extends PureComponent<Props, State> { |
||||
|
static defaultProps = { |
||||
|
value: '', |
||||
|
onChange: noop, |
||||
|
qrCodeSize: 200, |
||||
|
withQrCode: true, |
||||
|
} |
||||
|
|
||||
|
state = { |
||||
|
qrReaderOpened: false, |
||||
|
} |
||||
|
|
||||
|
handleClickQrCode = () => |
||||
|
this.setState(prev => ({ |
||||
|
qrReaderOpened: !prev.qrReaderOpened, |
||||
|
})) |
||||
|
|
||||
|
handleScanQrCode = (data: string) => data !== null && this.props.onChange(data) |
||||
|
|
||||
|
render() { |
||||
|
const { onChange, qrCodeSize, withQrCode, value } = this.props |
||||
|
const { qrReaderOpened } = this.state |
||||
|
|
||||
|
return ( |
||||
|
<Box relative justify="center"> |
||||
|
<InputAddress value={value} withQrCode={withQrCode} onChange={onChange} /> |
||||
|
{withQrCode && ( |
||||
|
<Fragment> |
||||
|
<IconQrCode onClick={this.handleClickQrCode} /> |
||||
|
{qrReaderOpened && ( |
||||
|
<WrapperQrCode> |
||||
|
<QrReader |
||||
|
onScan={this.handleScanQrCode} |
||||
|
onError={noop} |
||||
|
style={{ height: qrCodeSize, width: qrCodeSize }} |
||||
|
/> |
||||
|
</WrapperQrCode> |
||||
|
)} |
||||
|
</Fragment> |
||||
|
)} |
||||
|
</Box> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default RecipientAddress |
||||
@ -0,0 +1,40 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import { storiesOf } from '@storybook/react' |
||||
|
import { boolean } from '@storybook/addon-knobs' |
||||
|
|
||||
|
import RecipientAddress from 'components/RecipientAddress' |
||||
|
|
||||
|
const stories = storiesOf('RecipientAddress', module) |
||||
|
|
||||
|
type State = { |
||||
|
value: any, |
||||
|
} |
||||
|
|
||||
|
class Wrapper extends PureComponent<any, State> { |
||||
|
state = { |
||||
|
value: '', |
||||
|
} |
||||
|
|
||||
|
handleChange = item => this.setState({ value: item }) |
||||
|
|
||||
|
render() { |
||||
|
const { render } = this.props |
||||
|
const { value } = this.state |
||||
|
|
||||
|
return render({ onChange: this.handleChange, value }) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
stories.add('basic', () => ( |
||||
|
<Wrapper |
||||
|
render={({ onChange, value }) => ( |
||||
|
<RecipientAddress |
||||
|
withQrCode={boolean('withQrCode', true)} |
||||
|
onChange={onChange} |
||||
|
value={value} |
||||
|
/> |
||||
|
)} |
||||
|
/> |
||||
|
)) |
||||
@ -1,13 +1,25 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import { storiesOf } from '@storybook/react' |
import { storiesOf } from '@storybook/react' |
||||
|
import { boolean } from '@storybook/addon-knobs' |
||||
|
|
||||
import Box from 'components/base/Box' |
import Box from 'components/base/Box' |
||||
import GrowScroll from 'components/base/GrowScroll' |
import GrowScroll from 'components/base/GrowScroll' |
||||
|
|
||||
const stories = storiesOf('GrowScroll', module) |
const stories = storiesOf('GrowScroll', module) |
||||
|
|
||||
stories.add('basic', () => ( |
stories.add('basic', () => { |
||||
<Box style={{ height: 400, border: '1px solid black' }}> |
const reverseColor = boolean('reverseColor', false) |
||||
<GrowScroll>{[...Array(1000).keys()].map(v => <div key={v}>{v}</div>)}</GrowScroll> |
|
||||
</Box> |
return ( |
||||
)) |
<Box |
||||
|
borderWidth={1} |
||||
|
borderColor="night" |
||||
|
bg={reverseColor ? 'night' : 'white'} |
||||
|
color={reverseColor ? 'white' : 'night'} |
||||
|
> |
||||
|
<GrowScroll maxHeight={400}> |
||||
|
{[...Array(1000).keys()].map(v => <div key={v}>{v}</div>)} |
||||
|
</GrowScroll> |
||||
|
</Box> |
||||
|
) |
||||
|
}) |
||||
|
|||||
Loading…
Reference in new issue