zepio/app/components/input.js

60 lines
1.3 KiB
JavaScript
Raw Normal View History

2018-12-06 07:42:30 -08:00
// @flow
import React from 'react';
import styled from 'styled-components';
const getDefaultStyles = t => styled[t]`
border-radius: ${// $FlowFixMe
props => props.theme.boxBorderRadius};
border: none;
background-color: ${// $FlowFixMe
props => props.theme.colors.inputBackground};
color: ${// $FlowFixMe
props => props.theme.colors.text};
padding: 15px;
2018-12-06 07:42:30 -08:00
width: 100%;
outline: none;
font-family: ${// $FlowFixMe
props => props.theme.fontFamily};
2018-12-06 07:42:30 -08:00
::placeholder {
opacity: 0.5;
}
2018-12-06 07:42:30 -08:00
`;
const Input = getDefaultStyles('input');
const Textarea = getDefaultStyles('textarea');
2018-12-06 07:42:30 -08:00
type Props = {
inputType?: 'input' | 'textarea',
2018-12-06 07:42:30 -08:00
value: string,
onChange: string => void,
rows?: number,
disabled?: boolean,
type?: string,
};
export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
const inputTypes = {
2018-12-15 07:10:39 -08:00
input: () => (
<Input onChange={evt => onChange(evt.target.value)} {...props} />
),
textarea: () => (
<Textarea onChange={evt => onChange(evt.target.value)} {...props} />
),
};
if (!Object.keys(inputTypes).find(key => key === inputType)) {
2018-12-07 05:45:20 -08:00
throw new Error(`Invalid input type: ${String(inputType)}`);
2018-12-06 07:42:30 -08:00
}
2018-12-07 05:45:20 -08:00
return inputTypes[inputType || 'input']();
2018-12-06 07:42:30 -08:00
};
InputComponent.defaultProps = {
inputType: 'input',
rows: 4,
disabled: false,
type: 'text',
};