commit
d69d39bc56
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
name: Input
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
|
||||
import { InputComponent } from './input.js'
|
||||
import { DoczWrapper } from '../theme.js'
|
||||
|
||||
# Input
|
||||
|
||||
<PropsTable of={InputComponent} />
|
||||
|
||||
## Text Input
|
||||
|
||||
<Playground>
|
||||
<DoczWrapper>{() => <InputComponent inputType="input" value="Hello World!" onChange={console.log} />}</DoczWrapper>
|
||||
</Playground>
|
||||
|
||||
## Textarea
|
||||
|
||||
<Playground>
|
||||
<DoczWrapper>
|
||||
{() => <InputComponent inputType="textarea" value="I'm ZCash Electron Wallet" onChange={console.log} rows={10} />}
|
||||
</DoczWrapper>
|
||||
</Playground>
|
|
@ -0,0 +1,53 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
// TODO: Missing styles
|
||||
|
||||
const defaultStyles = `
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
font-family: ${props => props.theme.fontFamily}
|
||||
`;
|
||||
|
||||
const Input = styled.input.attrs({
|
||||
type: 'text',
|
||||
})`
|
||||
${defaultStyles};
|
||||
`;
|
||||
|
||||
const Textarea = styled.textarea`
|
||||
${defaultStyles};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
inputType?: 'input' | 'textarea' | 'dropdown',
|
||||
value: string,
|
||||
onChange: string => void,
|
||||
rows?: number,
|
||||
disabled?: boolean,
|
||||
type?: string,
|
||||
};
|
||||
|
||||
export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
|
||||
const inputTypes = {
|
||||
input: () => <Input onChange={evt => onChange(evt.target.value)} {...props} />,
|
||||
textarea: () => <Textarea onChange={evt => onChange(evt.target.value)} {...props} />,
|
||||
dropdown: () => null,
|
||||
};
|
||||
|
||||
if (!Object.keys(inputTypes).find(key => key === inputType)) {
|
||||
throw new Error(`Invalid input type: ${inputType}`);
|
||||
}
|
||||
|
||||
return inputTypes[inputType]();
|
||||
};
|
||||
|
||||
InputComponent.defaultProps = {
|
||||
inputType: 'input',
|
||||
rows: 4,
|
||||
disabled: false,
|
||||
type: 'text',
|
||||
};
|
Loading…
Reference in New Issue