zepio/app/components/input.js

61 lines
1.2 KiB
JavaScript
Raw Normal View History

2018-12-06 07:42:30 -08:00
// @flow
import React from 'react';
import styled from 'styled-components';
// TODO: Missing styles
const defaultStyles = `
padding: 10px;
width: 100%;
outline: none;
2018-12-07 05:45:20 -08:00
font-family: ${
// $FlowFixMe
props => props.theme.fontFamily
}
2018-12-06 07:42:30 -08:00
`;
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 = {
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} />
),
dropdown: () => null,
};
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',
};