fcui2/src/DropDownList.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.2
 */
define(function (require) {


    var React = require('react');
    var Layer = require('./Layer.jsx');
    var List = require('./List.jsx');
    var cTools = require('./core/componentTools');


    return React.createClass({
        /**
         * @properties
         *
         * @param {Import|Properties} src\core\componentTools.js skin className style disabled
         * @param {String} label 下拉按钮上显示的文字
         * @param {ReactClass} itemRenderer 列表项渲染器
         * @param {Array.<ListItemObject>} datasource 列表数据源
         * @param {String} openLayerType 控制浮层打开的动作，onMouseEnter或onClick
         * @param {Boolean} hideLayerScroll 是否隐藏下拉菜单的滚动条
         * @param {String} layerLocation 下拉框的展开方式，见layer.props.location
         * @param {Function} onClick 点击列表后的回调
         */
        /**
         * @structure Import src\List.jsx.js ListItemObject
         */
        /**
         * @fire Import src\components\list\NormalRenderer.jsx.js List onClick
         */
        // @override
        contextTypes: {
            appSkin: React.PropTypes.string
        },
        // @override
        getDefaultProps: function () {
            return {
                // base
                skin: '',
                className: '',
                style: {},
                layerListStyle: undefined,
                disabled: false,
                // self
                itemRenderer: undefined,
                label: 'DropDownList',
                openLayerType: 'onMouseEnter',
                layerLocation: '',
                hideLayerScroll: false,
                datasource: [],
                onClick: cTools.noop
            };
        },
        getInitialState: function () {
            return {
                layerOpen: false,
                mouseenter: false
            };
        },
        onMouseEnter: function () {
            this.setState({
                mouseenter: true,
                layerOpen: true
            });
        },
        onMouseLeave: function () {
            this.setState({mouseenter: false});
            cTools.closeLayerHandlerFactory(this, 'layerOpen')();
        },
        onListClick: function (e) {
            this.setState({layerOpen: false});
            this.props.onClick(e);
        },
        render: function () {
            var me = this;
            var containerProp = cTools.containerBaseProps('dropdownlist', this, {widthCorrect: -12});
            var skin = this.props.skin || 'normal';
            var layerProp = {
                ref: 'layer',
                onMouseLeave: cTools.closeLayerHandlerFactory(this, 'layerOpen'),
                isOpen: this.state.layerOpen && !this.props.disabled && !!this.props.datasource.length,
                anchor: this.refs.container,
                location: this.props.layerLocation,
                skin: this.context.appSkin ? (this.context.appSkin + '-' + skin) : skin
            };
            var listProp = {
                skin: this.props.skin,
                itemRenderer: this.props.itemRenderer,
                datasource: this.props.datasource,
                onClick: this.onListClick,
                parentComponent: this,
                style: this.props.layerListStyle
                    ? this.props.layerListStyle
                    : {
                        maxHeight: '242px',
                        overflowY: 'auto',
                        overflowX: 'hidden'
                    }
            };
            if (this.props.hideLayerScroll) {
                delete listProp.style;
            }
            containerProp[this.props.openLayerType] = this.onMouseEnter;
            containerProp.onMouseLeave = this.onMouseLeave;
            skin = this.context.appSkin ? (this.context.appSkin + '-' + skin) : skin;
            containerProp.className += layerProp.isOpen ? (' fcui2-dropdownlist-' + skin + '-hover') : '';
            return (
                <div {...containerProp}>
                    <div className="icon-right fcui2-icon fcui2-icon-arrow-down"></div>
                    <span className="label-container">{this.props.label}</span>
                    <Layer {...layerProp}>
                        <List {...listProp} />
                    </Layer>
                </div>
            );
        }
    });
});