add radio,checkbox,select w/o testand doc

weui · Feb 25, 2016 · 4a751f9 · 4a751f9
1 parent 03ae5b4
commit 4a751f9
Show file tree

Hide file tree

Showing 8 changed files with 230 additions and 12 deletions.
diff --git a/example/pages/cell/index.js b/example/pages/cell/index.js
@@ -20,7 +20,10 @@ import { ButtonArea,
     Input,
     Label,
     TextArea,
-    Switch
+    Switch,
+    Radio,
+    Checkbox,
+    Select
 } from '../../../src/index';
 import Page from '../../component/page';
 import iconSrc from './images/icon.png';
@@ -115,6 +118,38 @@ export default class CellDemo extends React.Component {
                     </Cell>
                 </Cells>
 
+                <CellsTitle>单选列表项</CellsTitle>
+                <Form radio>
+                    <FormCell radio>
+                        <CellBody>标题文字</CellBody>
+                        <CellFooter>
+                            <Radio name="radio1" value="1" defaultChecked/>
+                        </CellFooter>
+                    </FormCell>
+                    <FormCell radio>
+                        <CellBody>标题文字</CellBody>
+                        <CellFooter>
+                            <Radio name="radio1" value="2"/>
+                        </CellFooter>
+                    </FormCell>
+                </Form>
+
+                <CellsTitle>复选列表项</CellsTitle>
+                <Form checkbox>
+                    <FormCell checkbox>
+                        <CellHeader>
+                            <Checkbox name="checkbox1" value="1"/>
+                        </CellHeader>
+                        <CellBody>标题文字</CellBody>
+                    </FormCell>
+                    <FormCell checkbox>
+                        <CellHeader>
+                            <Checkbox name="checkbox2" value="2" defaultChecked/>
+                        </CellHeader>
+                        <CellBody>标题文字</CellBody>
+                    </FormCell>
+                </Form>
+
                 <CellsTitle>开关</CellsTitle>
                 <Form>
                     <FormCell switch>
@@ -180,6 +215,55 @@ export default class CellDemo extends React.Component {
                         </CellBody>
                     </FormCell>
                 </Form>
+
+                <CellsTitle>选择</CellsTitle>
+                <Form>
+                    <FormCell select selectPos="before">
+                        <CellHeader>
+                            <Select>
+                                <option value="1">+86</option>
+                                <option value="2">+80</option>
+                                <option value="3">+84</option>
+                                <option value="4">+87</option>
+                            </Select>
+                        </CellHeader>
+                        <CellBody>
+                            <Input type="tel" placeholder="请输入号码"/>
+                        </CellBody>
+                    </FormCell>
+                </Form>
+
+                <CellsTitle>选择</CellsTitle>
+                <Form>
+                    <FormCell select>
+                        <CellBody>
+                            <Select defaultValue="2">
+                                <option value="1">微信号</option>
+                                <option value="2">QQ号</option>
+                                <option value="3">Email</option>
+                            </Select>
+                        </CellBody>
+                    </FormCell>
+                    <FormCell select selectPos="after">
+                        <CellHeader>国家/地区</CellHeader>
+                        <CellBody>
+                            <Select data={[
+                                {
+                                    value: 1,
+                                    label: '中国'
+                                },
+                                {
+                                    value: 2,
+                                    label: '美国'
+                                },
+                                {
+                                    value: 3,
+                                    label: '英国'
+                                }
+                            ]} />
+                        </CellBody>
+                    </FormCell>
+                </Form>
             </Page>
         );
     }

diff --git a/src/components/form/checkbox.js b/src/components/form/checkbox.js
@@ -0,0 +1,26 @@
+/**
+ * Created by n7best on 16/2/25.
+ */
+
+
+
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+export default class Checkbox extends React.Component {
+
+    render() {
+        const { className, ...others } = this.props;
+        const cls = classNames({
+            weui_check: true,
+            [className]: className
+        });
+
+        return (
+            <div>
+                <input className={cls} type="checkbox" {...others}/>
+                <i className="weui_icon_checked"></i>
+            </div>
+        );
+    }
+};
diff --git a/src/components/form/form.js b/src/components/form/form.js
@@ -4,15 +4,27 @@
 
 
 
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 
 export default class Form extends Component {
+    static propTypes = {
+        radio: PropTypes.bool,
+        checkbox: PropTypes.bool
+    };
+
+    static defaultProps = {
+        radio: false,
+        checkbox: false
+    };
+
     render() {
-        const { children, className, ...others } = this.props;
+        const { children, className, radio, checkbox, ...others } = this.props;
         const cls = classNames({
             weui_cells: true,
-            weui_cells_form: true,
+            weui_cells_form: !radio && !checkbox,
+            weui_cells_radio: radio,
+            weui_cells_checkbox: checkbox,
             [className]: className
         });
 

diff --git a/src/components/form/form_cell.js b/src/components/form/form_cell.js
@@ -10,12 +10,20 @@ import classNames from 'classnames';
 export default class FormCell extends React.Component {
     static propTypes = {
         vcode: PropTypes.bool,
-        warn: PropTypes.bool
+        warn: PropTypes.bool,
+        radio: PropTypes.bool,
+        checkbox: PropTypes.bool,
+        select: PropTypes.bool,
+        selectPos: PropTypes.string,
     };
 
     static defaultProps = {
         vcode: false,
-        warn: false
+        warn: false,
+        radio: false,
+        checkbox: false,
+        select: false,
+        selectPos: undefined
     };
 
     render() {
@@ -25,11 +33,21 @@ export default class FormCell extends React.Component {
             weui_vcode: this.props.vcode,
             weui_cell_warn: this.props.warn,
             weui_cell_switch: this.props.switch,
+            weui_cell_select: this.props.select,
+            weui_select_before: this.props.selectPos == 'before',
+            weui_select_after: this.props.selectPos == 'after',
+            weui_check_label: this.props.radio || this.props.checkbox,
             [className]: className
         });
 
-        return (
-            <div className={cls} {...others}>{children}</div>
-        );
+        if(this.props.radio || this.props.checkbox) {
+            return (
+                <label className={cls} {...others}>{children}</label>
+            )
+        }else{
+            return (
+                <div className={cls} {...others}>{children}</div>
+            );
+        }
     }
 };
diff --git a/src/components/form/index.js b/src/components/form/index.js
@@ -1,6 +1,5 @@
 /**
  * Created by yjcxy12 on 16/1/22.
- * -textarea n7best 16/2/16
  */
 
 
@@ -10,11 +9,17 @@ import FormCell from './form_cell';
 import TextArea from './textarea';
 import Input from './input';
 import Switch from './switch';
+import Radio from './radio';
+import Checkbox from './checkbox';
+import Select from './select';
 
 export default {
     Form,
     FormCell,
     TextArea,
     Input,
-    Switch
+    Switch,
+    Radio,
+    Checkbox,
+    Select
 };
diff --git a/src/components/form/radio.js b/src/components/form/radio.js
@@ -0,0 +1,26 @@
+/**
+ * Created by n7best on 16/2/25.
+ */
+
+
+
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+export default class Radio extends React.Component {
+
+    render() {
+        const { className, ...others } = this.props;
+        const cls = classNames({
+            weui_check: true,
+            [className]: className
+        });
+
+        return (
+            <div>
+                <input className={cls} type="radio" {...others}/>
+                <span className="weui_icon_checked"></span>
+            </div>
+        );
+    }
+};
diff --git a/src/components/form/select.js b/src/components/form/select.js
@@ -0,0 +1,44 @@
+/**
+ * Created by n7best on 16/2/25.
+ */
+
+
+
+import React, { Component, PropTypes } from 'react';
+import classNames from 'classnames';
+
+export default class Select extends React.Component {
+    static propTypes = {
+      data: React.PropTypes.array
+    };
+
+    static defaultProps = {
+      data: []
+    };
+
+    renderData(data) {
+        return data.map((item,i) => {
+            return <option
+                    key={i}
+                    value={item.value}
+                    {...item}
+                    >
+                        {item.label}
+                   </option>;
+        });
+    }
+
+    render() {
+        const { className, data, children, ...others } = this.props;
+        const cls = classNames({
+            weui_select: true,
+            [className]: className
+        });
+
+        return (
+            <select className={cls} {...others}>
+                {data.length > 0 ? this.renderData(data) : children}
+            </select>
+        );
+    }
+};
diff --git a/src/index.js b/src/index.js
@@ -5,7 +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, Input, Switch} from './components/form/index';
+import {Form, FormCell, TextArea, Input, Switch, Radio, Checkbox, Select} from './components/form/index';
 import Label from './components/label/index';
 import Toast from './components/toast/index';
 import Progress from './components/progress/index';
@@ -29,9 +29,12 @@ export default {
     Mask,
     Form,
     FormCell,
+    Radio,
+    Checkbox,
     Input,
     TextArea,
     Switch,
+    Select,
     Label,
     Toast,
     Progress,