From c78745ee960f5b9f838237727f30bc709a569aed Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Sat, 17 Oct 2015 16:05:58 -0300 Subject: [PATCH] [Ivan Diaz] - Add Checkbox component and update form component --- src/app/demo/components-demo-page.js | 7 ++ .../main-home/main-home-page-login-widget.js | 5 +- .../main-home-page-login-widget.scss | 1 + src/core-components/checkbox.js | 98 +++++++++++++++++++ src/core-components/checkbox.scss | 32 ++++++ src/core-components/form.js | 19 +++- src/lib/get-icon.js | 14 +++ src/stores/user-store.js | 4 +- 8 files changed, 172 insertions(+), 8 deletions(-) create mode 100644 src/core-components/checkbox.js create mode 100644 src/core-components/checkbox.scss create mode 100644 src/lib/get-icon.js diff --git a/src/app/demo/components-demo-page.js b/src/app/demo/components-demo-page.js index 89a65d8a..1c3e49ab 100644 --- a/src/app/demo/components-demo-page.js +++ b/src/app/demo/components-demo-page.js @@ -6,6 +6,7 @@ import DocumentTitle from 'react-document-title'; import Button from 'core-components/button'; import Input from 'core-components/input'; +import Checkbox from 'core-components/checkbox'; import Widget from 'core-components/widget'; var DemoPage = React.createClass({ @@ -33,6 +34,12 @@ var DemoPage = React.createClass({ ) }, + { + title: 'Checkbox', + render: ( + + ) + }, { title: 'Widget', render: ( diff --git a/src/app/main/main-home/main-home-page-login-widget.js b/src/app/main/main-home/main-home-page-login-widget.js index 0caea47c..9d3cf9fe 100644 --- a/src/app/main/main-home/main-home-page-login-widget.js +++ b/src/app/main/main-home/main-home-page-login-widget.js @@ -7,6 +7,7 @@ import UserStore from 'stores/user-store'; import Button from 'core-components/button'; import Form from 'core-components/form'; import Input from 'core-components/input'; +import Checkbox from 'core-components/checkbox'; import Widget from 'core-components/widget'; import WidgetTransition from 'core-components/widget-transition'; @@ -34,6 +35,7 @@ var MainHomePageLoginWidget = React.createClass({
+
@@ -61,7 +63,8 @@ var MainHomePageLoginWidget = React.createClass({ }, handleLoginFormSubmit(formState) { - UserActions.login(formState.email, formState.password); + console.log(formState); + UserActions.login(formState); }, handleForgetPasswordClick() { diff --git a/src/app/main/main-home/main-home-page-login-widget.scss b/src/app/main/main-home/main-home-page-login-widget.scss index da881748..cec67b80 100644 --- a/src/app/main/main-home/main-home-page-login-widget.scss +++ b/src/app/main/main-home/main-home-page-login-widget.scss @@ -12,6 +12,7 @@ &--inputs { display: inline-block; margin: 0 auto 20px; + text-align: left; } &--forgot-password { diff --git a/src/core-components/checkbox.js b/src/core-components/checkbox.js new file mode 100644 index 00000000..2295415f --- /dev/null +++ b/src/core-components/checkbox.js @@ -0,0 +1,98 @@ +import React from 'react'; +import classNames from 'classnames'; +import _ from 'lodash'; + +import callback from 'lib/callback'; +import getIcon from 'lib/get-icon'; + +var CheckBox = React.createClass({ + + propTypes: { + alignment: React.PropTypes.string, + label: React.PropTypes.string, + value: React.PropTypes.bool + }, + + getDefaultProps() { + return { + alignment: 'right' + }; + }, + + getInitialState() { + return { + checked: false + }; + }, + + render() { + return ( + + ); + }, + + getProps() { + var props = _.clone(this.props); + + props.type = 'checkbox'; + + props['aria-hidden'] = true; + props.className = 'checkbox--box'; + props.checked = this.getValue(); + props.onChange = callback(this.handleChange, this.props.onChange); + props.value = null; + + return props; + }, + + getClass() { + var classes = { + 'checkbox': true, + 'checkbox_checked': this.state.checked, + + [this.props.className]: (this.props.className) + }; + + return classNames(classes); + }, + + getIconProps() { + return { + 'aria-checked': this.getValue(), + className: 'checkbox--icon', + onKeyDown: callback(this.handleIconKeyDown, this.props.onKeyDown), + role: "checkbox", + tabIndex: 0 + }; + }, + + getValue() { + return (this.props.value === undefined) ? this.state.checked : this.props.value; + }, + + handleChange: function (event) { + this.setState({ + checked: event.target.checked + }); + }, + + handleIconKeyDown: function (event) { + if (event.keyCode == 32) { + event.preventDefault(); + + callback(this.handleChange, this.props.onChange)({ + target: { + checked: !this.state.checked + } + }); + } + } +}); + +export default CheckBox; \ No newline at end of file diff --git a/src/core-components/checkbox.scss b/src/core-components/checkbox.scss new file mode 100644 index 00000000..3213846f --- /dev/null +++ b/src/core-components/checkbox.scss @@ -0,0 +1,32 @@ +@import "../scss/vars"; + +.checkbox { + color: $primary-black; + border-radius: 5px; + display: inline-block; + + &--box { + display: none; + } + + &--icon { + color: $light-grey; + outline: none; + + &:focus { + color: $grey; + } + } + + &--label { + margin-left: 10px; + font-size: 14px; + user-select: none; + } + + &_checked { + .checkbox--icon { + color: $primary-red; + } + } +} \ No newline at end of file diff --git a/src/core-components/form.js b/src/core-components/form.js index 45435374..b67a1536 100644 --- a/src/core-components/form.js +++ b/src/core-components/form.js @@ -1,9 +1,11 @@ import React from 'react/addons'; import _ from 'lodash'; -import Input from 'core-components/input'; import {reactDFS, renderChildrenWithProps} from 'lib/react-dfs'; +import Input from 'core-components/input'; +import Checkbox from 'core-components/checkbox'; + var Form = React.createClass({ validations: {}, @@ -19,7 +21,10 @@ var Form = React.createClass({ reactDFS(this.props.children, (child) => { if (child.type === Input) { - formState[child.props.name] = child.props.value; + formState[child.props.name] = child.props.value || ''; + } + else if (child.type === Checkbox) { + formState[child.props.name] = child.props.checked || false; } }); @@ -47,13 +52,13 @@ var Form = React.createClass({ getInputProps({props, type}) { var additionalProps = {}; - if(type === Input) { + if (type === Input || type === Checkbox) { let inputName = props.name; this.validations[inputName] = props.validation; additionalProps = { - onChange: this.handleInputChange.bind(this, inputName), + onChange: this.handleInputChange.bind(this, inputName, type), value: this.state.form[inputName] || props.value } } @@ -69,11 +74,15 @@ var Form = React.createClass({ } }, - handleInputChange(inputName, event) { + handleInputChange(inputName, type, event) { var form = _.clone(this.state.form); form[inputName] = event.target.value; + if (type === Checkbox) { + form[inputName] = event.target.checked || false; + } + this.setState({ form: form }); diff --git a/src/lib/get-icon.js b/src/lib/get-icon.js new file mode 100644 index 00000000..f3a0e331 --- /dev/null +++ b/src/lib/get-icon.js @@ -0,0 +1,14 @@ +import React from 'react'; +import _ from 'lodash'; + +export default function () { + var className = 'fa'; + + _.each(arguments, (arg) => { + className += ' fa-' + arg; + }); + + return ( + + ); +}; \ No newline at end of file diff --git a/src/stores/user-store.js b/src/stores/user-store.js index 904c63c2..77f38e74 100644 --- a/src/stores/user-store.js +++ b/src/stores/user-store.js @@ -13,8 +13,8 @@ var UserStore = Reflux.createStore({ this.listenTo(UserActions.logout, this.logoutUser); }, - loginUser(email, password) { - console.log(email + ':' + password); + loginUser({email, password, remember}) { + console.log(`${email}:${password} (${remember})`); } });