fcui2/src/TextBox.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
119
120
121
122
/**
 * 文本输入框
 * @author Brian Li
 * @email lbxxlht@163.com
 * @version 0.0.2.1
 */
define(function (require) {


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


    return React.createClass({
        /**
         * @properties
         *
         * @param {Import|Properties} src\core\componentTools.js skin className style disabled
         * @param {String} placeholder 文本框中无内容时显示的提示文字
         * @param {String} count 文本框右侧显示的输入长度统计信息，此信息由外界配入
         * @param {Function} onFocus 输入框获取焦点后的回调
         * @param {Function} onBlur 输入框失去焦点后的回调
         * @param {Import|Properties} src\mixins\InputWidget.js
         *      value onChange name validations customErrorTemplates valueTemplate
         */
        /**
         * @fire Import src\mixins\InputWidget.js XXX onChange
         */
        // @override
        contextTypes: {
            appSkin: React.PropTypes.string
        },
        // @override
        mixins: [InputWidget, InputWidgetImeFixed],
        // @override
        getDefaultProps: function () {
            return {
                // base
                skin: '',
                className: '',
                style: {},
                disabled: false,
                // self
                placeholder: '',
                count: '',
                // mixin
                valueTemplate: ''
            };
        },
        // @override
        getInitialState: function () {
            return {
                hasFocus: false,
                countLabelWidth: 0
            };
        },
        componentDidMount: function () {
            var me = this;
            this.___countLabelTimer___ = setInterval(function () {
                if (!me.refs.countLabel) {
                    clearInterval(me.___countLabelTimer___);
                    return;
                }
                if (me.refs.countLabel.offsetWidth - 15 === me.state.countLabelWidth) {
                    return;
                }
                me.setState({countLabelWidth: me.refs.countLabel.offsetWidth - 15});
            }, 100);
        },
        componentWillUnmount: function () {
            clearInterval(this.___countLabelTimer___);
        },
        /**
         * 让输入框获得焦点
         * @interface focus
         */
        focus: function () {
            this.refs.inputbox.focus();
            this.setState({hasFocus: true});
        },
        render: function () {
            var value = this.___getValue___();
            value = value === undefined || value == null ? '' : (value + '');
            var width = cTools.getValueFromPropsAndStyle(this.props, 'width', 200);
            width = isNaN(width) ? 200 : +width;
            var containerProp = cTools.containerBaseProps('textbox', this, {
                style: {width: width}
            });
            var placeholderProp = {
                style: {
                    visibility: ((value && value.length) || this.state.hasFocus) ? 'hidden' : 'visible'
                }
            };
            var inputProp = {
                ref: 'inputbox',
                disabled: this.props.disabled,
                type: this.props.type || 'text',
                style: {
                    width: width - 22 - this.state.countLabelWidth,
                    paddingRight: this.state.countLabelWidth + 10
                },
                onCompositionStart: this.___onCompositionStart___,
                onCompositionEnd: this.___onCompositionEnd___,
                onFocus: this.___onFocus___,
                onBlur: this.___onBlur___,
                onKeyUp: this.___onKeyUp___,
                onInput: this.___onInput___
            };
            return (
                <div {...containerProp}>
                    <div {...placeholderProp}>{this.props.placeholder}</div>
                    {this.props.count ? <div className="count-label" ref="countLabel">{this.props.count}</div> : null}
                    <input {...inputProp}/>
                </div>
            );
        }
    });


});