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);