diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index be60eff..fc05678 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { connectTheme } from '../../utils'; +import Radio from './Type/Radio'; class Input extends PureComponent { static get propTypes() { @@ -14,42 +15,48 @@ class Input extends PureComponent { style: PropTypes.object, theme: PropTypes.object, type: PropTypes.string, - value: PropTypes.string + value: PropTypes.string, }; } static get defaultProps() { return { onChange: () => {}, - type: 'text' + type: 'text', }; } render() { const { - type, children, name, onChange, placeholder, - theme, style, + theme, + type, value, ...otherProps } = this.props; - return ( - - ); + switch (type) { + case 'radio': + return {children}; + + default: + return ( + + ); + } } } diff --git a/src/components/Input/Type/Radio.js b/src/components/Input/Type/Radio.js new file mode 100644 index 0000000..2af0e40 --- /dev/null +++ b/src/components/Input/Type/Radio.js @@ -0,0 +1,102 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; + +import { connectTheme } from '../../../utils'; + +const isLimPrim = function(input) { + return { string: '', number: '' }.hasOwnProperty(typeof input); +}; + +const optTypeCheck = function(option) { + if (Array.isArray(option)) return isLimPrim(option[0]) ? 'array' : false; + else return isLimPrim(option) ? 'lim-prim' : false; +}; + +const radioPropCheck = function(options, idx) { + if (!optTypeCheck(options[idx])) { + throw new Error( + `Invalid type [ ${typeof options[idx]} ] of option + Label in Radio. Validation failed.` + ); + } +}; + +class Radio extends PureComponent { + constructor(props) { + super(props); + this.state = { checked: this.props.checked || 0 }; + this.handleChecked = this.handleChecked.bind(this); + } + + handleChecked(i) { + this.setState({ checked: i }); + } + + static get propTypes() { + return { + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string), + PropTypes.arrayOf((children, key) => radioPropCheck(children, key)), + ]), + name: PropTypes.string.isRequired, + onChange: PropTypes.func, + placeholder: PropTypes.string, + style: PropTypes.object, + theme: PropTypes.object, + type: PropTypes.string, + value: PropTypes.string, + }; + } + + static get defaultProps() { + return { + onChange: function() {}, + type: 'text', + }; + } + + render() { + const { + children, + className, + name, + onChange, + placeholder, + style, + theme, + type, + value, + ...otherProps + } = this.props; + + return children.map((option, idx) => { + const radioType = optTypeCheck(option); + const optLabel = radioType === 'lim-prim' ? option : option[0]; + const optValue = radioType === 'lim-prim' ? option : option[1]; + + return ( +
+ +
+ ); + }); + } +} + +export default connectTheme(Radio);