fcui2/src/CheckBox.jsx.js at master · fcfe/fcui2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/**
 * 复选框
 * @author Brian Li
 * @email lbxxlht@163.com
 * @version 0.0.2.2
 */
define(function (require) {


    var React = require('react');
    var InputWidget = require('./mixins/InputWidget');
    var cTools = require('./core/componentTools');


    return React.createClass({
        /**
         * @properties
         *
         * @param {Import|Properties} src\core\componentTools.js skin className style disabled
         * @param {String} label 复选框旁边显示的文字，点击文字也可以改变选中状态
         * @param {String} value 复选框的值，触发onChange时随事件对象返回，用于区分复选框的身份
         * @param {Boolean} checked 复选框是否被选中，触发onChange时随事件对象返回，用于表明复选框时候被选中
         * @param {Boolean} indeterminate 复选框时候处于半选状态，如果checked为false、indeterminate为true，复选框将呈现为半选状态
         * @param {String} labelPosition 文本标签显示的位置，'right'为复选框右侧，否则在左侧
         * @param {Import|Properties} src\mixins\InputWidget.js onChange name validations customErrorTemplates valueTemplate
         */
        /**
         * @fire CheckBox onChange
         * @param {SyntheticEvent} e React事件对象
         * @param {HtmlElement} e.target 组件实例的根容器
         * @param {Boolean} e.target.checked checkbox是否被选中
         * @param {String} e.target.value checkbox的值，用于区别身份，等于this.props.value
         */
        // @override
        contextTypes: {
            appSkin: React.PropTypes.string
        },
        // @override
        mixins: [InputWidget],
        // @override
        getDefaultProps: function () {
            return {
                ___uitype___: 'checkbox',
                // base
                skin: '',
                className: '',
                style: {},
                disabled: false,
                // self
                label: '',
                title: '',
                value: '',
                indeterminate: false,
                labelPosition: 'right',
                // mixin
                valueTemplate: false
            };
        },
        // @override
        getInitialState: function () {
            return {};
        },
        // @override
        componentDidMount: function () {
            var value = this.___getValue___();
            this.refs.inputbox.indeterminate = !value && this.props.indeterminate;
        },
        // @override
        componentDidUpdate: function () {
            var value = this.___getValue___();
            this.refs.inputbox.indeterminate = !value && this.props.indeterminate;
        },
        // 复选框label文字点击后触发
        onClick: function (e) {
            if (this.props.disabled) return;
            e = {target: this.refs.inputbox};
            e.target.checked = !e.target.checked;
            this.___dispatchChange___(e);
        },
        // 复选框点击后触发
        onChange: function (e) {
            if (this.props.disabled) return;
            this.___dispatchChange___(e);
        },
        render: function () {
            var containerProp = cTools.containerBaseProps('checkbox', this);
            if (this.props.title) {
                containerProp.title = this.props.title;
            }
            var checked = this.___getValue___();
            var labelProp = {
                className: 'fcui2-checkbox-label',
                onClick: this.onClick
            };
            var inputProp = {
                ref: 'inputbox',
                type: 'checkbox',
                disabled: this.props.disabled,
                value: this.props.value,
                checked: this.___getValue___(),
                onChange: this.onChange
            };
            var virtualCheckboxProp = {
                className: 'fcui2-icon fcui2-icon-checkbox'
                    + (!checked && this.props.indeterminate ? '-indeterminate' : (checked ? '-selected' : '-unselected')),
                onClick: this.onClick
            };
            return (
                <div {...containerProp}>
                    {this.props.labelPosition !== 'right' ? <span {...labelProp}>{this.props.label}</span> : null}
                    <input {...inputProp}/>
                    <span {...virtualCheckboxProp}></span>
                    {this.props.labelPosition === 'right' ? <span {...labelProp}>{this.props.label}</span> : null}
                </div>
            );
        }
    });
});