react-component-lib/example/dist/chunk/3.2974c3a8.js

a full base ui library to reactjs

webpackJsonp([3],{48:function(e,t,n){var a=React.createClass({displayName:"CheckboxItemRender",getInitialState:function(){return{selected:this.props.selected||0}},componentWillReceiveProps:function(e){"undefined"!=typeof e.selected&&this.setState({selected:!!e.selected})},setData:function(e,t){this.setState(e)},changeHandler:function(){this.props.onClick&&this.props.onClick(this.state)},render:function(){return React.createElement(RUI.Checkbox,{selected:this.state.selected,onChange:this.changeHandler})}}),l=React.createClass({displayName:"OperationItemRender",setData:function(e){this.setState(e)},clickHandler:function(){this.props.onClick&&this.props.onClick(this.state)},render:function(){return React.createElement(RUI.Button,{onClick:this.clickHandler},this.props.children)}}),i=React.createClass({displayName:"SortTitleRender",setData:function(e){this.setState(e)},render:function(){return React.createElement("a",this.props,"排序")}}),c=React.createClass({displayName:"Example",getInitialState:function(){return{ajaxData:[],fullData:[{id:1,name:"张三",phone:"13312341234",prov:"北京",role:"管理员",desc:{tag:"影视 娱乐"}},{id:2,name:"李四",phone:"18912341234",prov:"四川",role:"超级管理员",desc:{tag:"IT 编程"}},{id:3,name:"王五",phone:"13512341234",prov:"杭州",role:"编辑",desc:{tag:"数码 科技"}},{id:4,name:"张三",phone:"13312341234",prov:"北京",role:"管理员",desc:{tag:"影视 娱乐"}},{id:5,name:"李四",phone:"18912341234",prov:"四川",role:"超级管理员",desc:{tag:"IT 编程"}},{id:6,name:"王五",phone:"13512341234",prov:"杭州",role:"编辑",desc:{tag:"数码 科技"}},{id:7,name:"张三",phone:"13312341234",prov:"北京",role:"管理员",desc:{tag:"影视 娱乐"}},{id:8,name:"李四",phone:"18912341234",prov:"四川",role:"超级管理员",desc:{tag:"IT 编程"}},{id:9,name:"王五",phone:"13512341234",prov:"杭州",role:"编辑",desc:{tag:"数码 科技"}},{id:10,name:"张三",phone:"13312341234",prov:"北京",role:"管理员",desc:{tag:"影视 娱乐"}},{id:11,name:"李四",phone:"18912341234",prov:"四川",role:"超级管理员",desc:{tag:"IT 编程"}},{id:12,name:"王五",phone:"13512341234",prov:"杭州",role:"编辑",desc:{tag:"数码 科技"}}],data:this.getData().map(function(e){return e.selected=!0,e})}},componentDidMount:function(){this.setState({ajaxData:this.state.data.concat({id:4,name:"张三44444",phone:"13312341234",prov:"北京",role:"管理员",desc:{tag:"影视 娱乐"}})}),setTimeout(function(){var e=this.state.ajaxData;e.splice(0,3),this.setState({ajaxData:e.concat({id:5,name:"张三5555",phone:"13312341234",prov:"北京",role:"管理员",desc:{tag:"影视 娱乐"}})})}.bind(this),2e3)},columnsFilter:function(e){var t=e.findIndex(function(e){return"selected"==e});return t>-1&&e.splice(t,1),e},getData:function(){return[{id:1,name:"张三",phone:"1331234123413312341234133123412341331234123413312341234",prov:"北京",role:"管理员超级管理员超级管理员",desc:{tag:"影视 娱乐"}},{id:3,name:"李四",phone:"18912341234133123412341331234123413312341234",prov:"四川",role:"超级管理员超级管理员超级管理员超级管理员",desc:{tag:"IT 编程"}},{id:2,name:"王五",phone:"13512341234133123412341331234123413312341234133123412341331234123413312341234",prov:"杭州",role:"编辑超级管理员超级管理员",desc:{tag:"数码 科技"}}]},sortData:function(){var e=Array.prototype.slice.call(this.state.data);e.sort(function(e,t){return e.id-t.id}),this.setState({data:e})},tableDelete:function(e){RUI.DialogManager.alert(JSON.stringify(e))},fieldFormat:function(e,t){return(e+"").replace(/(\d{3})(\d{4})(\d{4})/g,function(e,t,n,a){return t+"-"+n+"-"+a})},allCheck:function(){var e=this.isAllCheck();this.setState({data:this.state.data.map(function(t){return t.selected=!e,t})})},isAllCheck:function(){return!this.state.data.some(function(e){return!e.selected})},checkItem:function(e){this.setState({data:this.state.data.map(function(t){return t.id==e.id&&(t.selected=!t.selected),t})})},render:function(){var e=this.state.data;return React.createElement("div",{className:"example-input"},React.createElement("h2",{className:"title"},"表格",React.createElement("span",null,"Table")),React.createElement("h3",{className:"sub-title"},"演示"),React.createElement("div",{className:"example"},React.createElement("h4",{className:"final-title"},"默认表格"),React.createElement("div",null,React.createElement(RUI.Table,{dataSource:e})),React.createElement("h4",{className:"final-title"},"动态渲染-过滤列名"),React.createElement("div",null,React.createElement(RUI.Table,{dataSource:this.state.ajaxData,columnsFilter:this.columnsFilter})),React.createElement("h4",{className:"final-title"},"自定义标题格"),React.createElement("div",null,React.createElement(RUI.Table,{dataSource:e},React.createElement(RUI.Column,{dataField:"id",width:80},React.createElement(RUI.Table.TitleRender,null,React.createElement(i,{onClick:this.sortData}))),React.createElement(RUI.Column,{title:"头像"},React.createElement(RUI.Table.ItemRender,null,React.createElement("img",{src:"http://5doe.com/custom/demo/images/wave_photo_1.jpg",style:{height:80}}))),React.createElement(RUI.Column,{title:"用户名",dataField:"name"}),React.createElement(RUI.Column,{title:"手机号",dataField:"phone",fieldFunction:this.fieldFormat}),React.createElement(RUI.Column,{title:"描述标签",dataField:"desc.tag"}),React.createElement(RUI.Column,{title:"角色",dataField:"role"}))),React.createElement("h4",{className:"final-title"},"自定义单元格"),React.createElement("div",null,React.createElement(RUI.Table,{dataSource:e},React.createElement(RUI.Column,{width:75},React.createElement(RUI.Table.TitleRender,null,React.createElement(a,{onClick:this.allCheck,selected:this.isAllCheck()})),React.createElement(RUI.Table.ItemRender,null,React.createElement(a,{onClick:this.checkItem}))),React.createElement(RUI.Column,{title:"用户名",dataField:"name"}),React.createElement(RUI.Column,{title:"手机号",dataField:"phone"}),React.createElement(RUI.Column,{title:"省份",dataField:"prov",width:75}),React.createElement(RUI.Column,{title:"角色",dataField:"role",width:75}),React.createElement(RUI.Column,{title:"操作"},React.createElement(RUI.Table.ItemRender,null,React.createElement(l,{onClick:this.tableDelete},"删除"))))),React.createElement("h4",{className:"final-title"},"固定高度-滚动条"),React.createElement("div",null,React.createElement(RUI.Table,{height:200,dataSource:this.state.fullData}))),React.createElement("h3",{className:"sub-title"},"源码"),React.createElement("div",{className:"source"},React.createElement("textarea",{defaultValue:n(96)})))}});e.exports=c},96:function(e,t){e.exports='var CheckboxItemRender = React.createClass({\n    getInitialState:function() {\n        return {\n            selected:this.props.selected || 0\n        };\n    },\n    componentWillReceiveProps:function(nextProps) {\n        if(typeof nextProps.selected != \'undefined\') {\n            this.setState({\n                selected:!!nextProps.selected\n            });\n        }\n    },\n    setData:function(data, field) {\n        this.setState(data);\n    },\n    changeHandler:function() {\n        this.props.onClick && this.props.onClick(this.state);\n    },\n    render:function() {\n        return <RUI.Checkbox selected={this.state.selected} onChange={this.changeHandler} />\n    }\n});\n\nvar OperationItemRender = React.createClass({\n    setData:function(data) {\n        this.setState(data);\n    },\n    clickHandler:function() {\n        this.props.onClick && this.props.onClick(this.state);\n    },\n    render:function() {\n        return <RUI.Button onClick={this.clickHandler}>{this.props.children}</RUI.Button>;\n    }\n});\n\nvar SortTitleRender = React.createClass({\n    setData:function(data) {\n        this.setState(data);\n    },\n    render:function() {\n        return <a {...this.props}>排序</a>;\n    }\n});\n\nvar Example = React.createClass({\n    getInitialState:function() {\n        return {\n            ajaxData:[],\n            fullData:[\n                {id:1,name:"张三",phone:"13312341234", prov:"北京", role:"管理员", desc:{tag:\'影视 娱乐\'}},\n                {id:2,name:"李四",phone:"18912341234", prov:"四川", role:"超级管理员", desc:{tag:\'IT 编程\'}},\n                {id:3,name:"王五",phone:"13512341234", prov:"杭州", role:"编辑", desc:{tag:\'数码 科技\'}},\n                {id:4,name:"张三",phone:"13312341234", prov:"北京", role:"管理员", desc:{tag:\'影视 娱乐\'}},\n                {id:5,name:"李四",phone:"18912341234", prov:"四川", role:"超级管理员", desc:{tag:\'IT 编程\'}},\n                {id:6,name:"王五",phone:"13512341234", prov:"杭州", role:"编辑", desc:{tag:\'数码 科技\'}},\n                {id:7,name:"张三",phone:"13312341234", prov:"北京", role:"管理员", desc:{tag:\'影视 娱乐\'}},\n                {id:8,name:"李四",phone:"18912341234", prov:"四川", role:"超级管理员", desc:{tag:\'IT 编程\'}},\n                {id:9,name:"王五",phone:"13512341234", prov:"杭州", role:"编辑", desc:{tag:\'数码 科技\'}},\n                {id:10,name:"张三",phone:"13312341234", prov:"北京", role:"管理员", desc:{tag:\'影视 娱乐\'}},\n                {id:11,name:"李四",phone:"18912341234", prov:"四川", role:"超级管理员", desc:{tag:\'IT 编程\'}},\n                {id:12,name:"王五",phone:"13512341234", prov:"杭州", role:"编辑", desc:{tag:\'数码 科技\'}}\n            ],\n            data:this.getData().map(function(item) {\n                item.selected = true;\n                return item;\n            })\n        };\n    },\n    componentDidMount:function() {\n        // 你就假设这儿有一个ajax请求吧\n        this.setState({\n            ajaxData:this.state.data.concat({\n                id:4,name:"张三44444",phone:"13312341234", prov:"北京", role:"管理员", desc:{tag:\'影视 娱乐\'}\n            })\n        });\n\n        setTimeout(function() {\n            var list = this.state.ajaxData;\n            list.splice(0, 3);\n            this.setState({\n                ajaxData:list.concat({\n                    id:5,name:"张三5555",phone:"13312341234", prov:"北京", role:"管理员", desc:{tag:\'影视 娱乐\'}\n                })\n            });\n        }.bind(this), 2000);\n    },\n    columnsFilter:function(keys) {\n        var index = keys.findIndex(function(item) {\n            return item == \'selected\';\n        });\n        if(index > -1) {\n            keys.splice(index, 1);\n        }\n        return keys;\n    },\n    getData:function() {\n        return [\n            {id:1,name:"张三",phone:"1331234123413312341234133123412341331234123413312341234", prov:"北京", role:"管理员超级管理员超级管理员", desc:{tag:\'影视 娱乐\'}},\n            {id:3,name:"李四",phone:"18912341234133123412341331234123413312341234", prov:"四川", role:"超级管理员超级管理员超级管理员超级管理员", desc:{tag:\'IT 编程\'}},\n            {id:2,name:"王五",phone:"13512341234133123412341331234123413312341234133123412341331234123413312341234", prov:"杭州", role:"编辑超级管理员超级管理员", desc:{tag:\'数码 科技\'}}\n        ];\n    },\n    sortData:function() {\n        var array = Array.prototype.slice.call(this.state.data);\n        array.sort(function(a, b) {\n            return a.id - b.id;\n        });\n        this.setState({\n            data:array\n        });\n    },\n    tableDelete:function(data) {\n        RUI.DialogManager.alert(JSON.stringify(data));\n    },\n    fieldFormat:function(data, source) {\n        return (data+"").replace(/(\\d{3})(\\d{4})(\\d{4})/g, function(match, a1, a2, a3) {\n            return a1 + \'-\' + a2 + \'-\' + a3;\n        });\n    },\n    allCheck:function() {\n        var isAllCheck = this.isAllCheck();\n        this.setState({\n            data:this.state.data.map(function(item) {\n                item.selected = isAllCheck ? false : true;\n                return item;\n            })\n        });\n    },\n    isAllCheck:function() {\n        return !this.state.data.some(function(item) {\n            return !item.selected;\n        });\n    },\n    checkItem:function(data) {\n        this.setState({\n            data:this.state.data.map(function(item) {\n                if(item.id == data.id) {\n                    item.selected = !item.selected;\n                }\n                return item;\n            })\n        });\n    },\n    render:function() {\n        var sourceData = this.state.data;\n\n        return <div className="example-input">\n            <h2 className="title">表格<span>Table</span></h2>\n            <h3 className="sub-title">演示</h3>\n            <div className="example">\n                <h4 className="final-title">默认表格</h4>\n                <div>\n                    <RUI.Table dataSource={sourceData}/>\n                </div>\n                <h4 className="final-title">动态渲染-过滤列名</h4>\n                <div>\n                    <RUI.Table dataSource={this.state.ajaxData} columnsFilter={this.columnsFilter} />\n                </div>\n                <h4 className="final-title">自定义标题格</h4>\n                <div>\n                    <RUI.Table dataSource={sourceData}>\n                        <RUI.Column dataField={"id"} width={80}>\n                            <RUI.Table.TitleRender>\n                                <SortTitleRender onClick={this.sortData} />\n                            </RUI.Table.TitleRender>\n                        </RUI.Column>\n                        <RUI.Column title={"头像"}>\n                            <RUI.Table.ItemRender>\n                                <img src="http://5doe.com/custom/demo/images/wave_photo_1.jpg" style={{height:80}} />\n                            </RUI.Table.ItemRender>\n                        </RUI.Column>\n                        <RUI.Column title={"用户名"} dataField={"name"} />\n                        <RUI.Column title={"手机号"} dataField={"phone"} fieldFunction={this.fieldFormat} />\n                        <RUI.Column title={"描述标签"} dataField={"desc.tag"} />\n                        <RUI.Column title={"角色"} dataField={"role"} />\n                    </RUI.Table>\n                </div>\n                <h4 className="final-title">自定义单元格</h4>\n                <div>\n                    <RUI.Table dataSource={sourceData}>\n                        <RUI.Column width={75}>\n                            <RUI.Table.TitleRender>\n                                <CheckboxItemRender onClick={this.allCheck} selected={this.isAllCheck()} />\n                            </RUI.Table.TitleRender>\n                            <RUI.Table.ItemRender>\n                                <CheckboxItemRender onClick={this.checkItem} />\n                            </RUI.Table.ItemRender>\n                        </RUI.Column>\n                        <RUI.Column title={"用户名"} dataField={"name"}/>\n                        <RUI.Column title={"手机号"} dataField={"phone"} />\n                        <RUI.Column title={"省份"} dataField={"prov"} width={75} />\n                        <RUI.Column title={"角色"} dataField={"role"} width={75} />\n                        <RUI.Column title={"操作"}>\n                            <RUI.Table.ItemRender>\n                                <OperationItemRender onClick={this.tableDelete}>删除</OperationItemRender>\n                            </RUI.Table.ItemRender>\n                        </RUI.Column>\n                    </RUI.Table>\n                </div>\n                <h4 className="final-title">固定高度-滚动条</h4>\n                <div>\n                    <RUI.Table height={200} dataSource={this.state.fullData}/>\n                </div>\n            </div>\n            <h3 className="sub-title">源码</h3>\n            <div className="source">\n                <textarea defaultValue={require(\'raw!./table.js\')} />\n            </div>\n        </div>;\n    }\n});\n\nmodule.exports = Example;'}});