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 { storiesOf } from '@storybook/react' |
|||
import { boolean } from '@storybook/addon-knobs' |
|||
|
|||
import Box from 'components/base/Box' |
|||
import GrowScroll from 'components/base/GrowScroll' |
|||
|
|||
const stories = storiesOf('GrowScroll', module) |
|||
|
|||
stories.add('basic', () => ( |
|||
<Box style={{ height: 400, border: '1px solid black' }}> |
|||
<GrowScroll>{[...Array(1000).keys()].map(v => <div key={v}>{v}</div>)}</GrowScroll> |
|||
</Box> |
|||
)) |
|||
stories.add('basic', () => { |
|||
const reverseColor = boolean('reverseColor', false) |
|||
|
|||
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