Merge pull request #42 from BearJ/develop

add switch, fix bug

Author: n7best

example/component/page.less

@@ -1,13 +1,16 @@
 
 html, body, .container {
     height: 100%;
-    overflow: hidden;
 }
 
 body {
     background-color: #FBF9FE;
 }
 
+.container{
+    overflow: hidden;
+}
+
 .page {
     position: absolute;
     top: 0;
@@ -79,4 +82,4 @@ body {
         opacity: 0.01;
         transform: translate3d(100%, 0, 0);
     }
-}
+}

example/pages/cell/index.js

@@ -19,7 +19,8 @@ import { ButtonArea,
     Icon,
     Input,
     Label,
-    TextArea
+    TextArea,
+    Switch
 } from '../../../src/index';
 import Page from '../../component/page';
 import iconSrc from './images/icon.png';
@@ -114,6 +115,16 @@ export default class CellDemo extends React.Component {
                     </Cell>
                 </Cells>
 
+                <CellsTitle>开关</CellsTitle>
+                <Form>
+                    <FormCell switch>
+                        <CellBody>标题文字</CellBody>
+                        <CellFooter>
+                            <Switch/>
+                        </CellFooter>
+                    </FormCell>
+                </Form>
+
                 <Form>
                     <FormCell>
                         <CellHeader>

src/components/form/form_cell.js

@@ -19,11 +19,12 @@ export default class FormCell extends React.Component {
     };
 
     render() {
-        const { className, children, vcode, warn, ...others } = this.props;
+        const { className, children, ...others } = this.props;
         const cls = classNames({
             weui_cell: true,
-            weui_vcode: vcode,
-            weui_cell_warn: warn,
+            weui_vcode: this.props.vcode,
+            weui_cell_warn: this.props.warn,
+            weui_cell_switch: this.props.switch,
             [className]: className
         });
 

src/components/form/index.js

@@ -8,9 +8,13 @@
 import Form from './form';
 import FormCell from './form_cell';
 import TextArea from './textarea';
+import Input from './input';
+import Switch from './switch';
 
 export default {
     Form,
     FormCell,
-    TextArea
-};
+    TextArea,
+    Input,
+    Switch
+};

src/components/input/input.js renamed to src/components/form/input.js

@@ -0,0 +1,30 @@
+/**
+ * Created by BearJ on 16/2/18.
+ */
+
+
+
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+export default class Switch extends React.Component {
+    static propTypes = {
+        defaultValue: PropTypes.string
+    };
+
+    static defaultProps = {
+        defaultValue: undefined
+    };
+
+    render() {
+        const { className, ...others } = this.props;
+        const cls = classNames({
+            weui_switch: true,
+            [className]: className
+        });
+
+        return (
+            <input className={cls} type="checkbox" {...others}/>
+        );
+    }
+};

src/components/form/switch.js

@@ -5,8 +5,7 @@
 import {Button, ButtonArea} from './components/button/index';
 import {Cells, CellsTitle, CellsTips, Cell, CellHeader, CellBody, CellFooter} from './components/cell/index';
 import Mask from './components/mask/index';
-import {Form, FormCell, TextArea} from './components/form/index';
-import Input from './components/input/index';
+import {Form, FormCell, TextArea, Input, Switch} from './components/form/index';
 import Label from './components/label/index';
 import Toast from './components/toast/index';
 import Progress from './components/progress/index';
@@ -32,6 +31,7 @@ export default {
     FormCell,
     Input,
     TextArea,
+    Switch,
     Label,
     Toast,
     Progress,
@@ -44,4 +44,4 @@ export default {
     Grid,
     GridIcon,
     GridLabel
-};
+};