\n );\n }\n}\n\n", "desc": " 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）" }, { "example": _react2['default'].createElement(Demo13, null), "title": " 多列排序、全选功能、合计", "code": "/**\n *\n * @title 多列排序、全选功能、合计\n * @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Icon, Button, Checkbox } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200\n },\n {\n title: \"功力指数\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"成绩\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\n];\n\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data13: data13,\n selectedRow: this.selectedRow,\n selectDisabled: this.selectDisabled\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n selectDisabled = (record, index) => {\n // console.log(record);\n if (index === 1) {\n return true;\n }\n return false;\n };\n selectedRow = (record, index) => {\n // console.log(record);\n if (index === 0) {\n return true;\n }\n return false;\n };\n onClick = () => {\n this.setState({\n selectedRow: function() {}\n });\n };\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let sortObj = {\n mode:'multiple'\n }\n \n return (\n \n \n \n
\n );\n }\n}\n\n", "desc": " 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)" }, { "example": _react2['default'].createElement(Demo14, null), "title": " 编辑态表格", "code": "/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\n*\n*/\n\nimport React from \"react\";\nimport { Table, Select, Datepicker, Checkbox, Input, Icon, Form, Button, Tooltip, Animate } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, Input, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo14 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n />\n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n reg={/^[0-9]+$/}\n />\n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n 添加一行\n \n \n 获取数据\n \n \n \n );\n }\n}\n\n\n\n", "desc": " 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。" }, { "example": _react2['default'].createElement(Demo16, null), "title": " 嵌套子表格", "code": "/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns16 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列，内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst columns17 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列，内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\n \n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo17, null), "title": " loading属性指定表格是否加载中", "code": "/**\n*\n* @title loading属性指定表格是否加载中\n* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\n\nconst columns17 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n {\n alert('这是第'+index+'列，内容为:'+text);\n }}\n >\n 一些操作\n \n );\n }\n }\n];\n\nconst data17 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo17 extends Component {\n constructor(props){\n super(props);\n this.state = {\n loading : true\n }\n }\n changeLoading = () => {\n this.setState({\n loading : !this.state.loading\n })\n }\n render() {\n return (\n \n
\n 切换loading\n \n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n // loading={this.state.loading}或者是boolean\n loading={{show:this.state.loading,loadingType:\"line\"}}\n />\n \n \n\n \n
\n );\n }\n}\n\n", "desc": " 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）" }, { "example": _react2['default'].createElement(Demo19, null), "title": " 编辑态表格", "code": "/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\n*\n*/\n\nimport React from \"react\";\nimport { Table, Select, Form, Input, Icon, Tooltip, Animate, Button } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, Input, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst Option = Select.Option;\n\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo19 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [ \n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n reg={/^[0-9]+$/}\n />\n )\n },\n \n {\n title:(下拉框的div
),\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n handFocus = (value,e) => {\n console.log(value+` 获取焦点事件`);\n };\n onBlur = (value,e) => {\n console.log(value+` onBlur`);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n 添加一行\n \n \n 获取数据\n \n \n \n {editable ? (\n
\n \n \n
\n ) : (\n
\n {value || \" \"}\n \n
\n )}\n
标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n /> \n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo21, null), "title": " 根据列进行过滤", "code": "/**\n*\n* @title 根据列进行过滤\n* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Popover, Checkbox, Icon } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data21 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\n];\n\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n constructor(props) {\n super(props);\n this.state ={\n columns21: [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\"\n // width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n // width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n ifshow:false,\n // width: 200,\n // sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n render(text, record, index){\n return (\n \n );\n }\n }\n ]};\n }\n afterFilter = (optData,columns)=>{\n if(optData.key == 'b'){\n if(optData.ifshow){\n columns[2].ifshow = false;\n }else{\n columns[2].ifshow = true;\n }\n this.setState({\n columns21 :columns,\n showFilterPopover:true\n });\n }\n \n }\n \n render() {\n \n return ;\n }\n}\nDemo21.defaultProps = defaultProps21;\n\n\n", "desc": " 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数" }, { "example": _react2['default'].createElement(Demo22, null), "title": " 列的拖拽，交换表头的顺序", "code": "/**\n*\n* @title 列的拖拽，交换表头的顺序\n* @description 点击列的表头，进行左右拖拽\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\n\nconst columns22 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200,\n }\n];\n\nconst data22 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return ;\n }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n", "desc": " 点击列的表头，进行左右拖拽" }, { "example": _react2['default'].createElement(Demo23, null), "title": " 拖拽调整列的宽度", "code": "/**\n*\n* @title 拖拽调整列的宽度\n* @description 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】\n*/\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '100'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n fixed:'right',\n width: 200,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return ;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注：不支持tree结构的表头、合并表头的table【目前支持表头拖拽宽度、交互列一起使用】" }, { "example": _react2['default'].createElement(Demo24, null), "title": " 动态设置固、取消固定列", "code": "/**\n*\n* @title 动态设置固、取消固定列\n* @description 动态设置固、取消固定列\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\"，fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport { Table, Dropdown, Menu, Icon } from 'tinper-bee';\n\n\nconst { Item } = Menu;\n// const columns24 = [\n// {\n// title: \"Full Name\",\n// width: 100,\n// dataIndex: \"name\",\n// key: \"name\",\n// fixed: \"left\",\n// },\n// { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n// { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n// { title: \"Column 2\", dataIndex: \"address2\", key: \"2\" },\n// { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n// { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n// { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\n// { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n// { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n// { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n// ];\n\n\nconst columns24 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100, \n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 150 \n },\n {\n title: \"对手\",\n dataIndex: \"e\",\n key: \"e\",\n width: 100 \n },\n {\n title: \"帮派\",\n dataIndex: \"f\",\n key: \"f\",\n width: 100 \n },\n {\n title: \"武功类型\",\n dataIndex: \"g\",\n key: \"g\",\n width: 100 \n },\n {\n title: \"师傅\",\n dataIndex: \"k\",\n key: \"k\",\n // width: 100 \n },\n {\n title: \"攻击系数\",\n dataIndex: \"h\",\n key: \"h\",\n width: 100 \n }\n];\n\n\nconst data24 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\n]; \n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n // let columns = [];\n // Object.assign(columns,columns24);\n // columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);\n this.state = {\n columns:columns24\n }\n }\n\n \n onSelect = ({key,item})=>{ \n console.log(`${key} selected`); //获取key\n let currentObject = item.props.data; //获取选中对象的数据\n let {columns} = this.state;\n let fixedCols = [];\n let nonColums = [];\n columns.find(da=>{\n if(da.key == key){\n da.fixed?delete da.fixed:da.fixed = 'left';\n }\n da.fixed?fixedCols.push(da):nonColums.push(da);\n });\n \n columns = [...fixedCols,...nonColums]\n\n this.setState({\n columns\n });\n }\n //表头增加下拉菜单\n renderColumnsDropdown(columns) {\n const icon ='uf-arrow-down';\n \n return columns.map((originColumn,index) => {\n let column = Object.assign({}, originColumn);\n let menuInfo = [], title='锁定';\n if(originColumn.fixed){\n title = '解锁'\n }\n menuInfo.push({\n info:title,\n key:originColumn.key,\n index:index\n });\n const menu = (\n )\n column.title = (\n \n {column.title}\n \n \n \n \n \n );\n return column;\n });\n \n }\n\n render() {\n let {columns} = this.state;\n columns = this.renderColumnsDropdown(columns);\n return ;\n }\n}\n\n", "desc": " 动态设置固、取消固定列", "scss_code": "th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n" }, { "example": _react2['default'].createElement(Demo25, null), "title": " 根据列进行过滤、拖拽交换列综合使用案例", "code": "/**\n* @title 根据列进行过滤、拖拽交换列综合使用案例\n* @description 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。\n*/\n\n/**注：\n * 在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。 \n * 必须有个别列不设置width属性，即可避免此问题。\n */\nimport React, { Component } from 'react';\nimport { Table, Popover, Checkbox, Icon } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nimport sum from \"tinper-bee/lib/sum\";;\n\n //Cloumns1\nfunction getCloumns(){\n const column = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 100,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:100,\n fixed: \"right\",\n render(text, record, index) {\n return (\n \n )\n }\n }\n ];\n return column;\n}\n\nconst dataList = [ \n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n d:\"操作\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"2操作\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"3操作\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"4操作\",\n key: \"4\"\n },\n]\n\nconst DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);\n\nconst defaultProps25 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo25 extends Component {\n constructor(props) {\n super(props);\n }\n\n getSelectedDataFunc=(data)=>{\n console.log(\"data\",data);\n }\n \n getCloumnsScroll=(columns)=>{\n let sum = 0;\n columns.forEach((da)=>{\n sum += da.width;\n })\n console.log(\"sum\",sum);\n return (sum);\n }\n\n selectedRow=(record, index)=>{\n\n }\n\n render() {\n let columns = getCloumns();\n \n return \n \n
\n }\n}\nDemo25.defaultProps = defaultProps25;\n\n\n", "desc": " 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。" }, { "example": _react2['default'].createElement(Demo26, null), "title": " 按条件和值过滤", "code": "/**\n*\n* @title 按条件和值过滤\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns26 = [\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data26 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo26 extends Component {\n handlerFilterChange = (key, val, condition) => {\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n render() {\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数，默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns26}\n data={data26} />;\n }\n}\n\n", "desc": " 可以根据输入项目以及判断条件对表格内的数据进行过滤" }, { "example": _react2['default'].createElement(Demo27, null), "title": " 组合过滤和其他功能使用", "code": "/**\n*\n* @title 组合过滤和其他功能使用\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport { Table, Dropdown, Menu, Icon, Checkbox } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/MultiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\n\nconst { Item } = Menu;\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\n\nconst dataList = [\n { \"key\": \"1\", value: \"库存明细\", id: \"a\" },\n { \"key\": \"2\", value: \"订单明细\", id: \"v\" },\n { \"key\": \"3\", value: \"发货明细\", id: \"c\" }\n]\n\nconst data27 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo27 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n dropdownvalue: []\n }\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onClick = (item) => {\n console.log(item);\n }\n\n render() {\n const menu1 = (\n )\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\n {\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n return \n \n \n }\n },\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"年龄\",\n width: 180,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"日期\",\n width: 190,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"时间范围\",\n width: 290,\n dataIndex: \"mark\",\n key: \"mark\",\n filterType: \"daterange\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"地址\",\n width: 100,\n dataIndex: \"address\",\n key: \"address\",\n filterType: \"dropdown\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n }\n ];\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数，默认500ms\n filterable={true}//是否开启过滤数据功能\n getSelectedDataFunc={this.getSelectedDataFunc}\n bordered\n multiSelect={multiObj}\n columns={columns27}\n data={data27} />;\n }\n}\n\n", "desc": " 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等" }, { "example": _react2['default'].createElement(Demo28, null), "title": " 列排序,后端排序", "code": "/**\n*\n* @title 列排序,后端排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"分数\",\n dataIndex: \"e\",\n key: \"e\",\n sorter: (a, b) => a.c - b.c\n },\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n /**\n * 后端获取数据\n */\n sortFun = (sortParam)=>{\n console.info(sortParam);\n //将参数传递给后端排序\n }\n render() {\n let sortObj = {\n mode:'multiple',\n backSource:true,\n sortFun:this.sortFun\n }\n return ;\n }\n}\nDemo28.defaultProps = defaultProps;\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo29, null), "title": " 从弹出框内显示过滤行并且设置可选下拉条件", "code": "/**\n*\n* @title 从弹出框内显示过滤行并且设置可选下拉条件\n* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table, Button, Modal } from 'tinper-bee';\n\n\nconst columns29 = [\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",\n filterDropdown: \"show\",\n filterDropdownIncludeKeys: ['LIKE', 'EQ']\n },\n {\n title: \"年龄\",\n width: 170,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",\n filterDropdown: \"show\",\n filterDropdownType: \"number\",\n filterDropdownIncludeKeys: ['EQ'],\n filterInputNumberOptions: {\n max: 200,\n min: 0,\n step: 1,\n precision: 0\n }\n },\n {\n title: \"日期\",\n width: 200,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",\n filterDropdown: \"show\",\n format: \"YYYY-MM-DD\"\n }\n];\n\nconst data29 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo29 extends Component {\n constructor() {\n super();\n this.state = {\n show: false\n }\n this.close = this.close.bind(this);\n this.open = this.open.bind(this);\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n close() {\n this.setState({\n show: false\n });\n }\n open() {\n this.setState({\n show: true\n });\n }\n render() {\n return (\n \n 过滤行\n \n \n ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数，默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns29}\n data={data29} />\n \n \n \n )\n }\n}\n\n", "desc": " 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件" }, { "example": _react2['default'].createElement(Demo3, null), "title": " 表头分组并自定义表头高度", "code": "/**\n *\n * @title 表头分组并自定义表头高度\n * @description columns[n] 可以内嵌 children，以渲染分组表头。\n * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\n\nconst { ColumnGroup, Column } = Table;\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 100,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n width:600,\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n width: 100\n }\n ]\n }\n ]\n }\n ]\n },\n {\n title: \"Company\",\n width:400,\n children: [\n {\n title: \"Company Address\",\n dataIndex: \"companyAddress\",\n key: \"companyAddress\",\n width:200,\n },\n {\n title: \"Company Name\",\n dataIndex: \"companyName\",\n key: \"companyName\",\n width:200,\n }\n ]\n },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 60,\n fixed: \"right\"\n }\n];\n\nconst data = [];\nfor (let i = 0; i < 20; i++) {\n data.push({\n key: i,\n name: \"John Brown\",\n age: i + 1,\n street: \"Lake Park\",\n building: \"C\",\n number: 2035,\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n}\n\nclass Demo3 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " columns[n] 可以内嵌 children，以渲染分组表头。", "scss_code": ".demo3{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}" }, { "example": _react2['default'].createElement(Demo30, null), "title": " 大数据加载", "code": "/**\n*\n* @title 大数据加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport { Table, Tooltip } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n render:(text,record,index)=>{\n return index\n },\n fixed:'left'\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n fixed:'right',\n render(text, record, index) {\n return (\n \n
{\n alert('这是第' + index + '列，内容为:' + text);\n }}\n >\n 一些操作\n \n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo4, null), "title": " 树形数据展示", "code": "/**\n*\n* @title 树形数据展示\n* @description 通过在data中配置children数据，来自动生成树形数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data4,\n factoryValue: 0,\n selectedRow: new Array(data4.length)//状态同步\n }\n }\n\n render() {\n return {\n if (this.state.selectedRow[index]) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n let selectedRow = new Array(this.state.data.length);\n selectedRow[index] = true;\n this.setState({\n factoryValue: record,\n selectedRow: selectedRow\n });\n }}\n \n columns={columns4} data={data4} />;\n }\n}\n\n\n", "desc": " 通过在data中配置children数据，来自动生成树形数据" }, { "example": _react2['default'].createElement(Demo5, null), "title": " 固定列", "code": "/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"Column 1\", dataIndex: \"key\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo5 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的某侧" }, { "example": _react2['default'].createElement(Demo6, null), "title": " 固定表头", "code": "/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;;\nconst DragColumnTable = dragColumn(Table);\n\nconst columns6 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data6 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo6 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)" }, { "example": _react2['default'].createElement(Demo7, null), "title": " 主子表", "code": "/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns7 = [\n { title: \"班级\", dataIndex: \"a\", key: \"a\" },\n { title: \"人数\", dataIndex: \"b\", key: \"b\" },\n { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data7 = [\n { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\n { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\n { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\n];\n\nconst columns7_1 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\n { title: \"班级\", dataIndex: \"b\", key: \"b\" },\n { title: \"系别\", dataIndex: \"c\", key: \"c\" }\n];\n\nclass Demo7 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n children_data: []\n };\n }\n\n rowclick = (record, index) => {\n if (record.a === \"02级一班\") {\n this.setState({\n children_data: [\n { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\n { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\n ]\n });\n } else if (record.a === \"03级二班\") {\n this.setState({\n children_data: [\n { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\n { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\n { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\n ]\n });\n } else if (record.a === \"05级三班\") {\n this.setState({\n children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }]\n });\n }\n };\n\n render() {\n return (\n \n
标题: 我是主表
}\n />\n 标题: 我是子表
}\n />\n
_utils2['default'].offset(source, {
left: newElRegion.left,
top: newElRegion.top
}, {
useCssRight: align.useCssRight,
useCssBottom: align.useCssBottom,
useCssTransform: align.useCssTransform,
ignoreShake: align.ignoreShake
});
return {
points: points,
offset: offset,
targetOffset: targetOffset,
overflow: newOverflowCfg
};
}
exports['default'] = doAlign;
/**
* 2012-04-26 yiminghe@gmail.com
* - 优化智能对齐算法
* - 慎用 resizeXX
*
* 2011-07-13 yiminghe@gmail.com note:
* - 增加智能对齐，以及大小调整选项
**/
module.exports = exports['default'];
/***/ }),
/* 53 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _propertyUtils = __webpack_require__(54);
var RE_NUM = /[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source;
var getComputedStyleX = void 0;
// https://stackoverflow.com/a/3485654/3040605
function forceRelayout(elem) {
var originalStyle = elem.style.display;
elem.style.display = 'none';
elem.offsetHeight; // eslint-disable-line
elem.style.display = originalStyle;
}
function css(el, name, v) {
var value = v;
if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') {
for (var i in name) {
if (name.hasOwnProperty(i)) {
css(el, i, name[i]);
}
}
return undefined;
}
if (typeof value !== 'undefined') {
if (typeof value === 'number') {
value = value + 'px';
}
el.style[name] = value;
return undefined;
}
return getComputedStyleX(el, name);
}
function getClientPosition(elem) {
var box = void 0;
var x = void 0;
var y = void 0;
var doc = elem.ownerDocument;
var body = doc.body;
var docElem = doc && doc.documentElement;
// 根据 GBS 最新数据，A-Grade Browsers 都已支持 getBoundingClientRect 方法，不用再考虑传统的实现方式
box = elem.getBoundingClientRect();
// 注：jQuery 还考虑减去 docElem.clientLeft/clientTop
// 但测试发现，这样反而会导致当 html 和 body 有边距/边框样式时，获取的值不正确
// 此外，ie6 会忽略 html 的 margin 值，幸运地是没有谁会去设置 html 的 margin
x = box.left;
y = box.top;
// In IE, most of the time, 2 extra pixels are added to the top and left
// due to the implicit 2-pixel inset border. In IE6/7 quirks mode and
// IE6 standards mode, this border can be overridden by setting the
// document element's border to zero -- thus, we cannot rely on the
// offset always being 2 pixels.
// In quirks mode, the offset can be determined by querying the body's
// clientLeft/clientTop, but in standards mode, it is found by querying
// the document element's clientLeft/clientTop. Since we already called
// getClientBoundingRect we have already forced a reflow, so it is not
// too expensive just to query them all.
// ie 下应该减去窗口的边框吧，毕竟默认 absolute 都是相对窗口定位的
// 窗口边框标准是设 documentElement ,quirks 时设置 body
// 最好禁止在 body 和 html 上边框 ，但 ie < 9 html 默认有 2px ，减去
// 但是非 ie 不可能设置窗口边框，body html 也不是窗口 ,ie 可以通过 html,body 设置
// 标准 ie 下 docElem.clientTop 就是 border-top
// ie7 html 即窗口边框改变不了。永远为 2
// 但标准 firefox/chrome/ie9 下 docElem.clientTop 是窗口边框，即使设了 border-top 也为 0
x -= docElem.clientLeft || body.clientLeft || 0;
y -= docElem.clientTop || body.clientTop || 0;
return {
left: x,
top: y
};
}
function getScroll(w, top) {
var ret = w['page' + (top ? 'Y' : 'X') + 'Offset'];
var method = 'scroll' + (top ? 'Top' : 'Left');
if (typeof ret !== 'number') {
var d = w.document;
// ie6,7,8 standard mode
ret = d.documentElement[method];
if (typeof ret !== 'number') {
// quirks mode
ret = d.body[method];
}
}
return ret;
}
function getScrollLeft(w) {
return getScroll(w);
}
function getScrollTop(w) {
return getScroll(w, true);
}
function getOffset(el) {
var pos = getClientPosition(el);
var doc = el.ownerDocument;
var w = doc.defaultView || doc.parentWindow;
pos.left += getScrollLeft(w);
pos.top += getScrollTop(w);
return pos;
}
/**
* A crude way of determining if an object is a window
* @member util
*/
function isWindow(obj) {
// must use == for ie8
/* eslint eqeqeq:0 */
return obj !== null && obj !== undefined && obj == obj.window;
}
function getDocument(node) {
if (isWindow(node)) {
return node.document;
}
if (node.nodeType === 9) {
return node;
}
return node.ownerDocument;
}
function _getComputedStyle(elem, name, cs) {
var computedStyle = cs;
var val = '';
var d = getDocument(elem);
computedStyle = computedStyle || d.defaultView.getComputedStyle(elem, null);
// https://github.com/kissyteam/kissy/issues/61
if (computedStyle) {
val = computedStyle.getPropertyValue(name) || computedStyle[name];
}
return val;
}
var _RE_NUM_NO_PX = new RegExp('^(' + RE_NUM + ')(?!px)[a-z%]+$', 'i');
var RE_POS = /^(top|right|bottom|left)$/;
var CURRENT_STYLE = 'currentStyle';
var RUNTIME_STYLE = 'runtimeStyle';
var LEFT = 'left';
var PX = 'px';
function _getComputedStyleIE(elem, name) {
// currentStyle maybe null
// http://msdn.microsoft.com/en-us/library/ms535231.aspx
var ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name];
// 当 width/height 设置为百分比时，通过 pixelLeft 方式转换的 width/height 值
// 一开始就处理了! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook 解决@2011-08-19
// 在 ie 下不对，需要直接用 offset 方式
// borderWidth 等值也有问题，但考虑到 borderWidth 设为百分比的概率很小，这里就不考虑了
// From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
// If we're not dealing with a regular pixel number
// but a number that has a weird ending, we need to convert it to pixels
// exclude left right for relativity
if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) {
// Remember the original values
var style = elem.style;
var left = style[LEFT];
var rsLeft = elem[RUNTIME_STYLE][LEFT];
// prevent flashing of content
elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT];
// Put in the new values to get a computed value out
style[LEFT] = name === 'fontSize' ? '1em' : ret || 0;
ret = style.pixelLeft + PX;
// Revert the changed values
style[LEFT] = left;
elem[RUNTIME_STYLE][LEFT] = rsLeft;
}
return ret === '' ? 'auto' : ret;
}
if (typeof window !== 'undefined') {
getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE;
}
function getOffsetDirection(dir, option) {
if (dir === 'left') {
return option.useCssRight ? 'right' : dir;
}
return option.useCssBottom ? 'bottom' : dir;
}
function oppositeOffsetDirection(dir) {
if (dir === 'left') {
return 'right';
} else if (dir === 'right') {
return 'left';
} else if (dir === 'top') {
return 'bottom';
} else if (dir === 'bottom') {
return 'top';
}
}
// 设置 elem 相对 elem.ownerDocument 的坐标
function setLeftTop(elem, offset, option) {
// set position first, in-case top/left are set even on static elem
if (css(elem, 'position') === 'static') {
elem.style.position = 'relative';
}
var presetH = -999;
var presetV = -999;
var horizontalProperty = getOffsetDirection('left', option);
var verticalProperty = getOffsetDirection('top', option);
var oppositeHorizontalProperty = oppositeOffsetDirection(horizontalProperty);
var oppositeVerticalProperty = oppositeOffsetDirection(verticalProperty);
if (horizontalProperty !== 'left') {
presetH = 999;
}
if (verticalProperty !== 'top') {
presetV = 999;
}
var originalTransition = '';
var originalOffset = getOffset(elem);
if ('left' in offset || 'top' in offset) {
originalTransition = (0, _propertyUtils.getTransitionProperty)(elem) || '';
(0, _propertyUtils.setTransitionProperty)(elem, 'none');
}
if ('left' in offset) {
elem.style[oppositeHorizontalProperty] = '';
elem.style[horizontalProperty] = presetH + 'px';
}
if ('top' in offset) {
elem.style[oppositeVerticalProperty] = '';
elem.style[verticalProperty] = presetV + 'px';
}
// force relayout
forceRelayout(elem);
var old = getOffset(elem);
var originalStyle = {};
for (var key in offset) {
if (offset.hasOwnProperty(key)) {
var dir = getOffsetDirection(key, option);
var preset = key === 'left' ? presetH : presetV;
var off = originalOffset[key] - old[key];
if (dir === key) {
originalStyle[dir] = preset + off;
} else {
originalStyle[dir] = preset - off;
}
}
}
css(elem, originalStyle);
// force relayout
forceRelayout(elem);
if ('left' in offset || 'top' in offset) {
(0, _propertyUtils.setTransitionProperty)(elem, originalTransition);
}
var ret = {};
for (var _key in offset) {
if (offset.hasOwnProperty(_key)) {
var _dir = getOffsetDirection(_key, option);
var _off = offset[_key] - originalOffset[_key];
if (_key === _dir) {
ret[_dir] = originalStyle[_dir] + _off;
} else {
ret[_dir] = originalStyle[_dir] - _off;
}
}
}
css(elem, ret);
}
function setTransform(elem, offset) {
var originalOffset = getOffset(elem);
var originalXY = (0, _propertyUtils.getTransformXY)(elem);
var resultXY = { x: originalXY.x, y: originalXY.y };
if ('left' in offset) {
resultXY.x = originalXY.x + offset.left - originalOffset.left;
}
if ('top' in offset) {
resultXY.y = originalXY.y + offset.top - originalOffset.top;
}
(0, _propertyUtils.setTransformXY)(elem, resultXY);
}
function setOffset(elem, offset, option) {
if (option.ignoreShake) {
var oriOffset = getOffset(elem);
var oLeft = oriOffset.left.toFixed(0);
var oTop = oriOffset.top.toFixed(0);
var tLeft = offset.left.toFixed(0);
var tTop = offset.top.toFixed(0);
if (oLeft === tLeft && oTop === tTop) {
return;
}
}
if (option.useCssRight || option.useCssBottom) {
setLeftTop(elem, offset, option);
} else if (option.useCssTransform && (0, _propertyUtils.getTransformName)() in document.body.style) {
setTransform(elem, offset, option);
} else {
setLeftTop(elem, offset, option);
}
}
function each(arr, fn) {
for (var i = 0; i < arr.length; i++) {
fn(arr[i]);
}
}
function isBorderBoxFn(elem) {
return getComputedStyleX(elem, 'boxSizing') === 'border-box';
}
var BOX_MODELS = ['margin', 'border', 'padding'];
var CONTENT_INDEX = -1;
var PADDING_INDEX = 2;
var BORDER_INDEX = 1;
var MARGIN_INDEX = 0;
function swap(elem, options, callback) {
var old = {};
var style = elem.style;
var name = void 0;
// Remember the old values, and insert the new ones
for (name in options) {
if (options.hasOwnProperty(name)) {
old[name] = style[name];
style[name] = options[name];
}
}
callback.call(elem);
// Revert the old values
for (name in options) {
if (options.hasOwnProperty(name)) {
style[name] = old[name];
}
}
}
function getPBMWidth(elem, props, which) {
var value = 0;
var prop = void 0;
var j = void 0;
var i = void 0;
for (j = 0; j < props.length; j++) {
prop = props[j];
if (prop) {
for (i = 0; i < which.length; i++) {
var cssProp = void 0;
if (prop === 'border') {
cssProp = '' + prop + which[i] + 'Width';
} else {
cssProp = prop + which[i];
}
value += parseFloat(getComputedStyleX(elem, cssProp)) || 0;
}
}
}
return value;
}
var domUtils = {};
each(['Width', 'Height'], function (name) {
domUtils['doc' + name] = function (refWin) {
var d = refWin.document;
return Math.max(
// firefox chrome documentElement.scrollHeight< body.scrollHeight
// ie standard mode : documentElement.scrollHeight> body.scrollHeight
d.documentElement['scroll' + name],
// quirks : documentElement.scrollHeight 最大等于可视窗口多一点？
d.body['scroll' + name], domUtils['viewport' + name](d));
};
domUtils['viewport' + name] = function (win) {
// pc browser includes scrollbar in window.innerWidth
var prop = 'client' + name;
var doc = win.document;
var body = doc.body;
var documentElement = doc.documentElement;
var documentElementProp = documentElement[prop];
// 标准模式取 documentElement
// backcompat 取 body
return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp;
};
});
/*
得到元素的大小信息
@param elem
@param name
@param {String} [extra] 'padding' : (css width) + padding
'border' : (css width) + padding + border
'margin' : (css width) + padding + border + margin
*/
function getWH(elem, name, ex) {
var extra = ex;
if (isWindow(elem)) {
return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHeight(elem);
} else if (elem.nodeType === 9) {
return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem);
}
var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
var borderBoxValue = name === 'width' ? elem.getBoundingClientRect().width : elem.getBoundingClientRect().height;
var computedStyle = getComputedStyleX(elem);
var isBorderBox = isBorderBoxFn(elem, computedStyle);
var cssBoxValue = 0;
if (borderBoxValue === null || borderBoxValue === undefined || borderBoxValue <= 0) {
borderBoxValue = undefined;
// Fall back to computed then un computed css if necessary
cssBoxValue = getComputedStyleX(elem, name);
if (cssBoxValue === null || cssBoxValue === undefined || Number(cssBoxValue) < 0) {
cssBoxValue = elem.style[name] || 0;
}
// Normalize '', auto, and prepare for extra
cssBoxValue = parseFloat(cssBoxValue) || 0;
}
if (extra === undefined) {
extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX;
}
var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox;
var val = borderBoxValue || cssBoxValue;
if (extra === CONTENT_INDEX) {
if (borderBoxValueOrIsBorderBox) {
return val - getPBMWidth(elem, ['border', 'padding'], which, computedStyle);
}
return cssBoxValue;
} else if (borderBoxValueOrIsBorderBox) {
if (extra === BORDER_INDEX) {
return val;
}
return val + (extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which, computedStyle) : getPBMWidth(elem, ['margin'], which, computedStyle));
}
return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which, computedStyle);
}
var cssShow = {
position: 'absolute',
visibility: 'hidden',
display: 'block'
};
// fix #119 : https://github.com/kissyteam/kissy/issues/119
function getWHIgnoreDisplay() {
for (var _len = arguments.length, args = Array(_len), _key2 = 0; _key2 < _len; _key2++) {
args[_key2] = arguments[_key2];
}
var val = void 0;
var elem = args[0];
// in case elem is window
// elem.offsetWidth === undefined
if (elem.offsetWidth !== 0) {
val = getWH.apply(undefined, args);
} else {
swap(elem, cssShow, function () {
val = getWH.apply(undefined, args);
});
}
return val;
}
each(['width', 'height'], function (name) {
var first = name.charAt(0).toUpperCase() + name.slice(1);
domUtils['outer' + first] = function (el, includeMargin) {
return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX);
};
var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];
domUtils[name] = function (elem, v) {
var val = v;
if (val !== undefined) {
if (elem) {
var computedStyle = getComputedStyleX(elem);
var isBorderBox = isBorderBoxFn(elem);
if (isBorderBox) {
val += getPBMWidth(elem, ['padding', 'border'], which, computedStyle);
}
return css(elem, name, val);
}
return undefined;
}
return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX);
};
});
function mix(to, from) {
for (var i in from) {
if (from.hasOwnProperty(i)) {
to[i] = from[i];
}
}
return to;
}
var utils = {
getWindow: function getWindow(node) {
if (node && node.document && node.setTimeout) {
return node;
}
var doc = node.ownerDocument || node;
return doc.defaultView || doc.parentWindow;
},
getDocument: getDocument,
offset: function offset(el, value, option) {
if (typeof value !== 'undefined') {
setOffset(el, value, option || {});
} else {
return getOffset(el);
}
},
isWindow: isWindow,
each: each,
css: css,
clone: function clone(obj) {
var i = void 0;
var ret = {};
for (i in obj) {
if (obj.hasOwnProperty(i)) {
ret[i] = obj[i];
}
}
var overflow = obj.overflow;
if (overflow) {
for (i in obj) {
if (obj.hasOwnProperty(i)) {
ret.overflow[i] = obj.overflow[i];
}
}
}
return ret;
},
mix: mix,
getWindowScrollLeft: function getWindowScrollLeft(w) {
return getScrollLeft(w);
},
getWindowScrollTop: function getWindowScrollTop(w) {
return getScrollTop(w);
},
merge: function merge() {
var ret = {};
for (var _len2 = arguments.length, args = Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
args[_key3] = arguments[_key3];
}
for (var i = 0; i < args.length; i++) {
utils.mix(ret, args[i]);
}
return ret;
},
viewportWidth: 0,
viewportHeight: 0
};
mix(utils, domUtils);
exports['default'] = utils;
module.exports = exports['default'];
/***/ }),
/* 54 */
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getTransformName = getTransformName;
exports.setTransitionProperty = setTransitionProperty;
exports.getTransitionProperty = getTransitionProperty;
exports.getTransformXY = getTransformXY;
exports.setTransformXY = setTransformXY;
var vendorPrefix = void 0;
var jsCssMap = {
Webkit: '-webkit-',
Moz: '-moz-',
// IE did it wrong again ...
ms: '-ms-',
O: '-o-'
};
function getVendorPrefix() {
if (vendorPrefix !== undefined) {
return vendorPrefix;
}
vendorPrefix = '';
var style = document.createElement('p').style;
var testProp = 'Transform';
for (var key in jsCssMap) {
if (key + testProp in style) {
vendorPrefix = key;
}
}
return vendorPrefix;
}
function getTransitionName() {
return getVendorPrefix() ? getVendorPrefix() + 'TransitionProperty' : 'transitionProperty';
}
function getTransformName() {
return getVendorPrefix() ? getVendorPrefix() + 'Transform' : 'transform';
}
function setTransitionProperty(node, value) {
var name = getTransitionName();
if (name) {
node.style[name] = value;
if (name !== 'transitionProperty') {
node.style.transitionProperty = value;
}
}
}
function setTransform(node, value) {
var name = getTransformName();
if (name) {
node.style[name] = value;
if (name !== 'transform') {
node.style.transform = value;
}
}
}
function getTransitionProperty(node) {
return node.style.transitionProperty || node.style[getTransitionName()];
}
function getTransformXY(node) {
var style = window.getComputedStyle(node, null);
var transform = style.getPropertyValue('transform') || style.getPropertyValue(getTransformName());
if (transform && transform !== 'none') {
var matrix = transform.replace(/[^0-9\-.,]/g, '').split(',');
return { x: parseFloat(matrix[12] || matrix[4], 0), y: parseFloat(matrix[13] || matrix[5], 0) };
}
return {
x: 0,
y: 0
};
}
var matrix2d = /matrix\((.*)\)/;
var matrix3d = /matrix3d\((.*)\)/;
function setTransformXY(node, xy) {
var style = window.getComputedStyle(node, null);
var transform = style.getPropertyValue('transform') || style.getPropertyValue(getTransformName());
if (transform && transform !== 'none') {
var arr = void 0;
var match2d = transform.match(matrix2d);
if (match2d) {
match2d = match2d[1];
arr = match2d.split(',').map(function (item) {
return parseFloat(item, 10);
});
arr[4] = xy.x;
arr[5] = xy.y;
setTransform(node, 'matrix(' + arr.join(',') + ')');
} else {
var match3d = transform.match(matrix3d)[1];
arr = match3d.split(',').map(function (item) {
return parseFloat(item, 10);
});
arr[12] = xy.x;
arr[13] = xy.y;
setTransform(node, 'matrix3d(' + arr.join(',') + ')');
}
} else {
setTransform(node, 'translateX(' + xy.x + 'px) translateY(' + xy.y + 'px) translateZ(0)');
}
}
/***/ }),
/* 55 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(53);
var _utils2 = _interopRequireDefault(_utils);
var _getOffsetParent = __webpack_require__(56);
var _getOffsetParent2 = _interopRequireDefault(_getOffsetParent);
var _isAncestorFixed = __webpack_require__(57);
var _isAncestorFixed2 = _interopRequireDefault(_isAncestorFixed);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* 获得元素的显示部分的区域
*/
function getVisibleRectForElement(element) {
var visibleRect = {
left: 0,
right: Infinity,
top: 0,
bottom: Infinity
};
var el = (0, _getOffsetParent2['default'])(element);
var doc = _utils2['default'].getDocument(element);
var win = doc.defaultView || doc.parentWindow;
var body = doc.body;
var documentElement = doc.documentElement;
// Determine the size of the visible rect by climbing the dom accounting for
// all scrollable containers.
while (el) {
// clientWidth is zero for inline block elements in ie.
if ((navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) &&
// body may have overflow set on it, yet we still get the entire
// viewport. In some browsers, el.offsetParent may be
// document.documentElement, so check for that too.
el !== body && el !== documentElement && _utils2['default'].css(el, 'overflow') !== 'visible') {
var pos = _utils2['default'].offset(el);
// add border
pos.left += el.clientLeft;
pos.top += el.clientTop;
visibleRect.top = Math.max(visibleRect.top, pos.top);
visibleRect.right = Math.min(visibleRect.right,
// consider area without scrollBar
pos.left + el.clientWidth);
visibleRect.bottom = Math.min(visibleRect.bottom, pos.top + el.clientHeight);
visibleRect.left = Math.max(visibleRect.left, pos.left);
} else if (el === body || el === documentElement) {
break;
}
el = (0, _getOffsetParent2['default'])(el);
}
// Set element position to fixed
// make sure absolute element itself don't affect it's visible area
// https://github.com/ant-design/ant-design/issues/7601
var originalPosition = null;
if (!_utils2['default'].isWindow(element) && element.nodeType !== 9) {
originalPosition = element.style.position;
var position = _utils2['default'].css(element, 'position');
if (position === 'absolute') {
element.style.position = 'fixed';
}
}
var scrollX = _utils2['default'].getWindowScrollLeft(win);
var scrollY = _utils2['default'].getWindowScrollTop(win);
var viewportWidth = _utils2['default'].viewportWidth(win);
var viewportHeight = _utils2['default'].viewportHeight(win);
var documentWidth = documentElement.scrollWidth;
var documentHeight = documentElement.scrollHeight;
// Reset element position after calculate the visible area
if (element.style) {
element.style.position = originalPosition;
}
if ((0, _isAncestorFixed2['default'])(element)) {
// Clip by viewport's size.
visibleRect.left = Math.max(visibleRect.left, scrollX);
visibleRect.top = Math.max(visibleRect.top, scrollY);
visibleRect.right = Math.min(visibleRect.right, scrollX + viewportWidth);
visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + viewportHeight);
} else {
// Clip by document's size.
var maxVisibleWidth = Math.max(documentWidth, scrollX + viewportWidth);
visibleRect.right = Math.min(visibleRect.right, maxVisibleWidth);
var maxVisibleHeight = Math.max(documentHeight, scrollY + viewportHeight);
visibleRect.bottom = Math.min(visibleRect.bottom, maxVisibleHeight);
}
return visibleRect.top >= 0 && visibleRect.left >= 0 && visibleRect.bottom > visibleRect.top && visibleRect.right > visibleRect.left ? visibleRect : null;
}
exports['default'] = getVisibleRectForElement;
module.exports = exports['default'];
/***/ }),
/* 56 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(53);
var _utils2 = _interopRequireDefault(_utils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* 得到会导致元素显示不全的祖先元素
*/
function getOffsetParent(element) {
if (_utils2['default'].isWindow(element) || element.nodeType === 9) {
return null;
}
// ie 这个也不是完全可行
/*
*/
// element.offsetParent does the right thing in ie7 and below. Return parent with layout!
// In other browsers it only includes elements with position absolute, relative or
// fixed, not elements with overflow set to auto or scroll.
// if (UA.ie && ieMode < 8) {
// return element.offsetParent;
// }
// 统一的 offsetParent 方法
var doc = _utils2['default'].getDocument(element);
var body = doc.body;
var parent = void 0;
var positionStyle = _utils2['default'].css(element, 'position');
var skipStatic = positionStyle === 'fixed' || positionStyle === 'absolute';
if (!skipStatic) {
return element.nodeName.toLowerCase() === 'html' ? null : element.parentNode;
}
for (parent = element.parentNode; parent && parent !== body; parent = parent.parentNode) {
positionStyle = _utils2['default'].css(parent, 'position');
if (positionStyle !== 'static') {
return parent;
}
}
return null;
}
exports['default'] = getOffsetParent;
module.exports = exports['default'];
/***/ }),
/* 57 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports['default'] = isAncestorFixed;
var _utils = __webpack_require__(53);
var _utils2 = _interopRequireDefault(_utils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function isAncestorFixed(element) {
if (_utils2['default'].isWindow(element) || element.nodeType === 9) {
return false;
}
var doc = _utils2['default'].getDocument(element);
var body = doc.body;
var parent = null;
for (parent = element.parentNode; parent && parent !== body; parent = parent.parentNode) {
var positionStyle = _utils2['default'].css(parent, 'position');
if (positionStyle === 'fixed') {
return true;
}
}
return false;
}
module.exports = exports['default'];
/***/ }),
/* 58 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(53);
var _utils2 = _interopRequireDefault(_utils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function adjustForViewport(elFuturePos, elRegion, visibleRect, overflow) {
var pos = _utils2['default'].clone(elFuturePos);
var size = {
width: elRegion.width,
height: elRegion.height
};
if (overflow.adjustX && pos.left < visibleRect.left) {
pos.left = visibleRect.left;
}
// Left edge inside and right edge outside viewport, try to resize it.
if (overflow.resizeWidth && pos.left >= visibleRect.left && pos.left + size.width > visibleRect.right) {
size.width -= pos.left + size.width - visibleRect.right;
}
// Right edge outside viewport, try to move it.
if (overflow.adjustX && pos.left + size.width > visibleRect.right) {
// 保证左边界和可视区域左边界对齐
pos.left = Math.max(visibleRect.right - size.width, visibleRect.left);
}
// Top edge outside viewport, try to move it.
if (overflow.adjustY && pos.top < visibleRect.top) {
pos.top = visibleRect.top;
}
// Top edge inside and bottom edge outside viewport, try to resize it.
if (overflow.resizeHeight && pos.top >= visibleRect.top && pos.top + size.height > visibleRect.bottom) {
size.height -= pos.top + size.height - visibleRect.bottom;
}
// Bottom edge outside viewport, try to move it.
if (overflow.adjustY && pos.top + size.height > visibleRect.bottom) {
// 保证上边界和可视区域上边界对齐
pos.top = Math.max(visibleRect.bottom - size.height, visibleRect.top);
}
return _utils2['default'].mix(pos, size);
}
exports['default'] = adjustForViewport;
module.exports = exports['default'];
/***/ }),
/* 59 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _utils = __webpack_require__(53);
var _utils2 = _interopRequireDefault(_utils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function getRegion(node) {
var offset = void 0;
var w = void 0;
var h = void 0;
if (!_utils2['default'].isWindow(node) && node.nodeType !== 9) {
offset = _utils2['default'].offset(node);
w = _utils2['default'].outerWidth(node);
h = _utils2['default'].outerHeight(node);
} else {
var win = _utils2['default'].getWindow(node);
offset = {
left: _utils2['default'].getWindowScrollLeft(win),
top: _utils2['default'].getWindowScrollTop(win)
};
w = _utils2['default'].viewportWidth(win);
h = _utils2['default'].viewportHeight(win);
}
offset.width = w;
offset.height = h;
return offset;
}
exports['default'] = getRegion;
module.exports = exports['default'];
/***/ }),
/* 60 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _getAlignOffset = __webpack_require__(61);
var _getAlignOffset2 = _interopRequireDefault(_getAlignOffset);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function getElFuturePos(elRegion, refNodeRegion, points, offset, targetOffset) {
var p1 = (0, _getAlignOffset2['default'])(refNodeRegion, points[1]);
var p2 = (0, _getAlignOffset2['default'])(elRegion, points[0]);
var diff = [p2.left - p1.left, p2.top - p1.top];
return {
left: elRegion.left - diff[0] + offset[0] - targetOffset[0],
top: elRegion.top - diff[1] + offset[1] - targetOffset[1]
};
}
exports['default'] = getElFuturePos;
module.exports = exports['default'];
/***/ }),
/* 61 */
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
/**
* 获取 node 上的 align 对齐点 相对于页面的坐标
*/
function getAlignOffset(region, align) {
var V = align.charAt(0);
var H = align.charAt(1);
var w = region.width;
var h = region.height;
var x = region.left;
var y = region.top;
if (V === 'c') {
y += h / 2;
} else if (V === 'b') {
y += h;
}
if (H === 'c') {
x += w / 2;
} else if (H === 'r') {
x += w;
}
return {
left: x,
top: y
};
}
exports['default'] = getAlignOffset;
module.exports = exports['default'];
/***/ }),
/* 62 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _utils = __webpack_require__(53);
var _utils2 = _interopRequireDefault(_utils);
var _align = __webpack_require__(52);
var _align2 = _interopRequireDefault(_align);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* `tgtPoint`: { pageX, pageY } or { clientX, clientY }.
* If client position provided, will internal convert to page position.
*/
function alignPoint(el, tgtPoint, align) {
var pageX = void 0;
var pageY = void 0;
var doc = _utils2['default'].getDocument(el);
var win = doc.defaultView || doc.parentWindow;
var scrollX = _utils2['default'].getWindowScrollLeft(win);
var scrollY = _utils2['default'].getWindowScrollTop(win);
var viewportWidth = _utils2['default'].viewportWidth(win);
var viewportHeight = _utils2['default'].viewportHeight(win);
if ('pageX' in tgtPoint) {
pageX = tgtPoint.pageX;
} else {
pageX = scrollX + tgtPoint.clientX;
}
if ('pageY' in tgtPoint) {
pageY = tgtPoint.pageY;
} else {
pageY = scrollY + tgtPoint.clientY;
}
var tgtRegion = {
left: pageX,
top: pageY,
width: 0,
height: 0
};
var pointInView = pageX >= 0 && pageX <= scrollX + viewportWidth && pageY >= 0 && pageY <= scrollY + viewportHeight;
// Provide default target point
var points = [align.points[0], 'cc'];
return (0, _align2['default'])(el, tgtRegion, _extends({}, align, { points: points }), pointInView);
}
exports['default'] = alignPoint;
module.exports = exports['default'];
/***/ }),
/* 63 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Transition = __webpack_require__(11);
var _Transition2 = _interopRequireDefault(_Transition);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
/**
* Show the component; triggers the fade in or fade out animation
*/
"in": _propTypes2["default"].bool,
/**
* Unmount the component (remove it from the DOM) when it is faded out
*/
unmountOnExit: _propTypes2["default"].bool,
/**
* Run the fade in animation when the component mounts, if it is initially
* shown
*/
transitionAppear: _propTypes2["default"].bool,
/**
* Duration of the fade animation in milliseconds, to ensure that finishing
* callbacks are fired even if the original browser transition end events are
* canceled
*/
timeout: _propTypes2["default"].number,
/**
* Callback fired before the component fades in
*/
onEnter: _propTypes2["default"].func,
/**
* Callback fired after the component starts to fade in
*/
onEntering: _propTypes2["default"].func,
/**
* Callback fired after the has component faded in
*/
onEntered: _propTypes2["default"].func,
/**
* Callback fired before the component fades out
*/
onExit: _propTypes2["default"].func,
/**
* Callback fired after the component starts to fade out
*/
onExiting: _propTypes2["default"].func,
/**
* Callback fired after the component has faded out
*/
onExited: _propTypes2["default"].func
};
var defaultProps = {
"in": false,
timeout: 300,
unmountOnExit: false,
transitionAppear: false
};
var Fade = function (_React$Component) {
_inherits(Fade, _React$Component);
function Fade() {
_classCallCheck(this, Fade);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
Fade.prototype.render = function render() {
return _react2["default"].createElement(_Transition2["default"], _extends({}, this.props, {
className: (0, _classnames2["default"])(this.props.className, 'fade'),
enteredClassName: 'in',
enteringClassName: 'in'
}));
};
return Fade;
}(_react2["default"].Component);
Fade.propTypes = propTypes;
Fade.defaultProps = defaultProps;
exports["default"] = Fade;
module.exports = exports['default'];
/***/ }),
/* 64 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Message = __webpack_require__(65);
var _Message2 = _interopRequireDefault(_Message);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports["default"] = _Message2["default"];
module.exports = exports['default'];
/***/ }),
/* 65 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _beeNotification = __webpack_require__(66);
var _beeNotification2 = _interopRequireDefault(_beeNotification);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var defaultDuration = 1.5;
var defaultTop = 0;
var defaultBottom = 48;
var bottom = 90;
var padding = 30;
var width = 200;
var messageInstance = void 0;
var key = 1;
var clsPrefix = 'u-message';
var noop = function noop() {};
var positionObj = {
"top": {
messageStyle: {
width: "100%"
},
notificationStyle: {
top: defaultTop,
width: "100%"
},
transitionName: 'top'
},
"bottom": {
messageStyle: {
width: "100%"
},
notificationStyle: {
bottom: defaultBottom,
width: "100%"
},
transitionName: 'bottom'
},
"topRight": {
messageStyle: {
width: width
},
notificationStyle: {
top: padding,
right: padding,
width: width
},
transitionName: 'right'
},
"bottomRight": {
messageStyle: {
width: width
},
notificationStyle: {
bottom: bottom,
right: padding,
width: width
},
transitionName: 'right'
},
"topLeft": {
messageStyle: {
width: width
},
notificationStyle: {
top: padding,
left: padding,
width: width
},
transitionName: 'left'
},
"bottomLeft": {
messageStyle: {
width: width
},
notificationStyle: {
bottom: bottom,
left: padding,
width: width
},
transitionName: 'left'
}
};
function getMessageInstance() {
var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'top';
var callback = arguments[1];
if (messageInstance) {
callback(messageInstance);
return;
}
var style = positionObj[position].notificationStyle;
_beeNotification2["default"].newInstance({
clsPrefix: clsPrefix,
transitionName: clsPrefix + '-' + positionObj[position].transitionName,
style: style, // 覆盖原来的样式
position: ''
}, function (instance) {
messageInstance = instance;
callback(instance);
});
}
function notice(content, duration, type, onClose, position, style) {
var iconType = {
info: 'uf uf-i-c-2',
success: 'uf uf-correct',
danger: 'uf uf-close-c',
warning: 'uf uf-exc-t',
light: 'uf uf-notification',
dark: 'uf uf-bubble',
news: 'uf uf-bell',
infolight: 'uf uf-i-c-2',
successlight: 'uf uf-correct',
dangerlight: 'uf uf-close-c',
warninglight: 'uf uf-exc-t'
}[type];
var positionStyle = positionObj[position].messageStyle;
getMessageInstance(position, function (instance) {
instance.notice({
key: key,
duration: duration,
color: type,
style: _extends({}, positionStyle, style),
content: _react2["default"].createElement(
'div',
null,
_react2["default"].createElement(
'div',
{ className: clsPrefix + '-notice-description-icon' },
_react2["default"].createElement('i', { className: (0, _classnames2["default"])(iconType) })
),
_react2["default"].createElement(
'div',
{ className: clsPrefix + '-notice-description-content' },
content
)
),
onClose: onClose
});
});
return function () {
var target = key++;
return function () {
if (messageInstance) {
messageInstance.removeNotice(target);
}
};
}();
}
exports["default"] = {
create: function create(obj) {
var content = obj.content || '';
var duration = _typeof(obj.duration) == undefined ? defaultDuration : obj.duration;
var color = obj.color || 'dark';
var onClose = obj.onClose || noop;
var position = obj.position || "top";
var style = obj.style || {};
return notice(content, duration, color, onClose, position, style);
},
config: function config(options) {
if (options.top !== undefined) {
defaultTop = options.top;
}
if (options.duration !== undefined) {
defaultDuration = options.duration;
}
if (options.clsPrefix !== undefined) {
clsPrefix = options.clsPrefix;
}
if (options.defaultBottom !== undefined) {
defaultBottom = options.defaultBottom;
}
if (options.bottom !== undefined) {
bottom = options.bottom;
}
if (options.width !== undefined) {
bottom = options.width;
}
},
destroy: function destroy() {
if (messageInstance) {
messageInstance.destroy();
messageInstance = null;
}
}
};
module.exports = exports['default'];
/***/ }),
/* 66 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Notification = __webpack_require__(67);
var _Notification2 = _interopRequireDefault(_Notification);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports["default"] = _Notification2["default"];
module.exports = exports['default'];
/***/ }),
/* 67 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactDom = __webpack_require__(12);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _beeAnimate = __webpack_require__(68);
var _beeAnimate2 = _interopRequireDefault(_beeAnimate);
var _createChainedFunction = __webpack_require__(36);
var _createChainedFunction2 = _interopRequireDefault(_createChainedFunction);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _Notice = __webpack_require__(73);
var _Notice2 = _interopRequireDefault(_Notice);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var seed = 0;
var now = Date.now();
function getUuid() {
return 'uNotification_' + now + '_' + seed++;
}
var propTypes = {
show: _propTypes2["default"].bool,
clsPrefix: _propTypes2["default"].string,
style: _propTypes2["default"].object,
position: _propTypes2["default"].oneOf(['topRight', 'bottomRight', '']),
transitionName: _propTypes2["default"].string,
animation: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object])
};
var defaultProps = {
clsPrefix: 'u-notification',
animation: 'fade',
position: 'topRight'
};
var Notification = function (_Component) {
_inherits(Notification, _Component);
function Notification(props) {
_classCallCheck(this, Notification);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.state = {
notices: []
};
_this.add = _this.add.bind(_this);
_this.remove = _this.remove.bind(_this);
return _this;
}
Notification.prototype.getTransitionName = function getTransitionName() {
var props = this.props;
var transitionName = props.transitionName;
if (!transitionName && props.animation) {
transitionName = props.clsPrefix + '-' + props.animation;
}
return transitionName;
};
Notification.prototype.add = function add(notice) {
var key = notice.key = notice.key || getUuid();
this.setState(function (previousState) {
var notices = previousState.notices;
if (!notices.filter(function (v) {
return v.key === key;
}).length) {
return {
notices: notices.concat(notice)
};
}
});
};
Notification.prototype.remove = function remove(key) {
this.setState(function (previousState) {
return {
notices: previousState.notices.filter(function (notice) {
return notice.key !== key;
})
};
});
};
Notification.prototype.render = function render() {
var _this2 = this,
_classes;
var _props = this.props,
clsPrefix = _props.clsPrefix,
className = _props.className,
position = _props.position,
style = _props.style;
var noticeNodes = this.state.notices.map(function (notice) {
var onClose = (0, _createChainedFunction2["default"])(_this2.remove.bind(_this2, notice.key), notice.onClose);
return _react2["default"].createElement(
_Notice2["default"],
_extends({
clsPrefix: clsPrefix
}, notice, {
onClose: onClose
}),
notice.content
);
});
var classes = (_classes = {}, _defineProperty(_classes, clsPrefix, 1), _defineProperty(_classes, className, !!className), _classes);
if (position) {
classes[clsPrefix + '-' + position] = !!position;
}
return _react2["default"].createElement(
'div',
{ className: (0, _classnames2["default"])(className, classes), style: style },
_react2["default"].createElement(
_beeAnimate2["default"],
{ transitionName: this.getTransitionName() },
noticeNodes
)
);
};
return Notification;
}(_react.Component);
;
Notification.propTypes = propTypes;
Notification.defaultProps = defaultProps;
Notification.newInstance = function newNotificationInstance(properties, callback) {
if (typeof callback !== 'function') {
console.error('You must introduce callback as the second parameter of Notification.newInstance().');
return;
}
var props = properties || {};
var div = document.createElement('div');
document.body.appendChild(div);
var called = false;
function ref(notification) {
if (called) {
return;
}
called = true;
callback({
notice: function notice(noticeProps) {
notification.add(noticeProps);
},
removeNotice: function removeNotice(key) {
notification.remove(key);
},
component: notification,
destroy: function destroy() {
_reactDom2["default"].unmountComponentAtNode(div);
document.body.removeChild(div);
}
});
}
_reactDom2["default"].render(_react2["default"].createElement(Notification, _extends({}, props, { ref: ref })), div);
};
exports["default"] = Notification;
module.exports = exports['default'];
/***/ }),
/* 68 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Animate = __webpack_require__(69);
var _Animate2 = _interopRequireDefault(_Animate);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports["default"] = _Animate2["default"];
module.exports = exports['default'];
/***/ }),
/* 69 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _ChildrenUtils = __webpack_require__(70);
var _AnimateChild = __webpack_require__(71);
var _AnimateChild2 = _interopRequireDefault(_AnimateChild);
var _util = __webpack_require__(72);
var _util2 = _interopRequireDefault(_util);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var defaultKey = 'u_animate_' + Date.now();
function getChildrenFromProps(props) {
var children = props.children;
if (_react2["default"].isValidElement(children)) {
if (!children.key) {
return _react2["default"].cloneElement(children, {
key: defaultKey
});
}
}
return children;
}
function noop() {}
var propTypes = {
component: _propTypes2["default"].any,
animation: _propTypes2["default"].object,
transitionName: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
transitionEnter: _propTypes2["default"].bool,
transitionAppear: _propTypes2["default"].bool,
exclusive: _propTypes2["default"].bool,
transitionLeave: _propTypes2["default"].bool,
onEnd: _propTypes2["default"].func,
onEnter: _propTypes2["default"].func,
onLeave: _propTypes2["default"].func,
onAppear: _propTypes2["default"].func,
showProp: _propTypes2["default"].string
};
var defaultProps = {
animation: {},
component: 'span',
transitionEnter: true,
transitionLeave: true,
transitionAppear: false,
onEnd: noop,
onEnter: noop,
onLeave: noop,
onAppear: noop
};
var Animate = function (_Component) {
_inherits(Animate, _Component);
function Animate(props) {
_classCallCheck(this, Animate);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.currentlyAnimatingKeys = {};
_this.keysToEnter = [];
_this.keysToLeave = [];
_this.state = {
children: (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(_this.props))
};
_this.performEnter = _this.performEnter.bind(_this);
_this.performAppear = _this.performAppear.bind(_this);
_this.handleDoneAdding = _this.handleDoneAdding.bind(_this);
_this.performLeave = _this.performLeave.bind(_this);
_this.performLeave = _this.performLeave.bind(_this);
_this.handleDoneLeaving = _this.handleDoneLeaving.bind(_this);
_this.isValidChildByKey = _this.isValidChildByKey.bind(_this);
_this.stop = _this.stop.bind(_this);
return _this;
}
Animate.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
this.mounted = true;
var showProp = this.props.showProp;
var children = this.state.children;
if (showProp) {
children = children.filter(function (child) {
return !!child.props[showProp];
});
}
children.forEach(function (child) {
if (child) {
_this2.performAppear(child.key);
}
});
};
Animate.prototype.componentWillUnmount = function componentWillUnmount() {
this.mounted = false;
};
Animate.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var _this3 = this;
this.nextProps = nextProps;
var nextChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(nextProps));
var props = this.props;
// exclusive needs immediate response
if (props.exclusive) {
Object.keys(this.currentlyAnimatingKeys).forEach(function (key) {
_this3.stop(key);
});
}
var showProp = props.showProp;
var currentlyAnimatingKeys = this.currentlyAnimatingKeys;
// last props children if exclusive
var currentChildren = props.exclusive ? (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props)) : this.state.children;
// in case destroy in showProp mode
var newChildren = [];
if (showProp) {
currentChildren.forEach(function (currentChild) {
var nextChild = currentChild && (0, _ChildrenUtils.findChildInChildrenByKey)(nextChildren, currentChild.key);
var newChild = void 0;
if ((!nextChild || !nextChild.props[showProp]) && currentChild.props[showProp]) {
newChild = _react2["default"].cloneElement(nextChild || currentChild, _defineProperty({}, showProp, true));
} else {
newChild = nextChild;
}
if (newChild) {
newChildren.push(newChild);
}
});
nextChildren.forEach(function (nextChild) {
if (!nextChild || !(0, _ChildrenUtils.findChildInChildrenByKey)(currentChildren, nextChild.key)) {
newChildren.push(nextChild);
}
});
} else {
newChildren = (0, _ChildrenUtils.mergeChildren)(currentChildren, nextChildren);
}
// need render to avoid update
this.setState({
children: newChildren
});
nextChildren.forEach(function (child) {
var key = child && child.key;
if (child && currentlyAnimatingKeys[key]) {
return;
}
var hasPrev = child && (0, _ChildrenUtils.findChildInChildrenByKey)(currentChildren, key);
if (showProp) {
var showInNext = child.props[showProp];
if (hasPrev) {
var showInNow = (0, _ChildrenUtils.findShownChildInChildrenByKey)(currentChildren, key, showProp);
if (!showInNow && showInNext) {
_this3.keysToEnter.push(key);
}
} else if (showInNext) {
_this3.keysToEnter.push(key);
}
} else if (!hasPrev) {
_this3.keysToEnter.push(key);
}
});
currentChildren.forEach(function (child) {
var key = child && child.key;
if (child && currentlyAnimatingKeys[key]) {
return;
}
var hasNext = child && (0, _ChildrenUtils.findChildInChildrenByKey)(nextChildren, key);
if (showProp) {
var showInNow = child.props[showProp];
if (hasNext) {
var showInNext = (0, _ChildrenUtils.findShownChildInChildrenByKey)(nextChildren, key, showProp);
if (!showInNext && showInNow) {
_this3.keysToLeave.push(key);
}
} else if (showInNow) {
_this3.keysToLeave.push(key);
}
} else if (!hasNext) {
_this3.keysToLeave.push(key);
}
});
};
Animate.prototype.componentDidUpdate = function componentDidUpdate() {
var keysToEnter = this.keysToEnter;
this.keysToEnter = [];
keysToEnter.forEach(this.performEnter);
var keysToLeave = this.keysToLeave;
this.keysToLeave = [];
keysToLeave.forEach(this.performLeave);
};
Animate.prototype.performEnter = function performEnter(key) {
// may already remove by exclusive
if (this.refs[key]) {
this.currentlyAnimatingKeys[key] = true;
this.refs[key].componentWillEnter(this.handleDoneAdding.bind(this, key, 'enter'));
}
};
Animate.prototype.performAppear = function performAppear(key) {
if (this.refs[key]) {
this.currentlyAnimatingKeys[key] = true;
this.refs[key].componentWillAppear(this.handleDoneAdding.bind(this, key, 'appear'));
}
};
Animate.prototype.handleDoneAdding = function handleDoneAdding(key, type) {
var props = this.props;
delete this.currentlyAnimatingKeys[key];
// if update on exclusive mode, skip check
if (props.exclusive && props !== this.nextProps) {
return;
}
var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props));
if (!this.isValidChildByKey(currentChildren, key)) {
// exclusive will not need this
this.performLeave(key);
} else {
if (type === 'appear') {
if (_util2["default"].allowAppearCallback(props)) {
props.onAppear(key);
props.onEnd(key, true);
}
} else {
if (_util2["default"].allowEnterCallback(props)) {
props.onEnter(key);
props.onEnd(key, true);
}
}
}
};
Animate.prototype.performLeave = function performLeave(key) {
// may already remove by exclusive
if (this.refs[key]) {
this.currentlyAnimatingKeys[key] = true;
this.refs[key].componentWillLeave(this.handleDoneLeaving.bind(this, key));
}
};
Animate.prototype.handleDoneLeaving = function handleDoneLeaving(key) {
var props = this.props;
delete this.currentlyAnimatingKeys[key];
// if update on exclusive mode, skip check
if (props.exclusive && props !== this.nextProps) {
return;
}
var currentChildren = (0, _ChildrenUtils.toArrayChildren)(getChildrenFromProps(props));
// in case state change is too fast
if (this.isValidChildByKey(currentChildren, key)) {
this.performEnter(key);
} else {
var end = function end() {
if (_util2["default"].allowLeaveCallback(props)) {
props.onLeave(key);
props.onEnd(key, false);
}
};
/* eslint react/no-is-mounted:0 */
if (this.mounted && !(0, _ChildrenUtils.isSameChildren)(this.state.children, currentChildren, props.showProp)) {
this.setState({
children: currentChildren
}, end);
} else {
end();
}
}
};
Animate.prototype.isValidChildByKey = function isValidChildByKey(currentChildren, key) {
var showProp = this.props.showProp;
if (showProp) {
return (0, _ChildrenUtils.findShownChildInChildrenByKey)(currentChildren, key, showProp);
}
return (0, _ChildrenUtils.findChildInChildrenByKey)(currentChildren, key);
};
Animate.prototype.stop = function stop(key) {
delete this.currentlyAnimatingKeys[key];
var component = this.refs[key];
if (component) {
component.stop();
}
};
Animate.prototype.render = function render() {
var props = this.props;
this.nextProps = props;
var stateChildren = this.state.children;
var children = null;
if (stateChildren) {
children = stateChildren.map(function (child) {
if (child === null || child === undefined) {
return child;
}
if (!child.key) {
throw new Error('must set key for children');
}
return _react2["default"].createElement(
_AnimateChild2["default"],
{
key: child.key,
ref: child.key,
animation: props.animation,
transitionName: props.transitionName,
transitionEnter: props.transitionEnter,
transitionAppear: props.transitionAppear,
transitionLeave: props.transitionLeave
},
child
);
});
}
var Component = props.component;
if (Component) {
var passedProps = props;
if (typeof Component === 'string') {
passedProps = {
className: props.className,
style: props.style
};
}
return _react2["default"].createElement(
Component,
passedProps,
children
);
}
return children[0] || null;
};
return Animate;
}(_react.Component);
;
Animate.defaultProps = defaultProps;
Animate.propTypes = Animate.propTypes;
exports["default"] = Animate;
module.exports = exports['default'];
/***/ }),
/* 70 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.toArrayChildren = toArrayChildren;
exports.findChildInChildrenByKey = findChildInChildrenByKey;
exports.findShownChildInChildrenByKey = findShownChildInChildrenByKey;
exports.findHiddenChildInChildrenByKey = findHiddenChildInChildrenByKey;
exports.isSameChildren = isSameChildren;
exports.mergeChildren = mergeChildren;
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function toArrayChildren(children) {
var ret = [];
_react2["default"].Children.forEach(children, function (child) {
ret.push(child);
});
return ret;
}
function findChildInChildrenByKey(children, key) {
var ret = null;
if (children) {
children.forEach(function (child) {
if (ret) {
return;
}
if (child && child.key === key) {
ret = child;
}
});
}
return ret;
}
function findShownChildInChildrenByKey(children, key, showProp) {
var ret = null;
if (children) {
children.forEach(function (child) {
if (child && child.key === key && child.props[showProp]) {
if (ret) {
throw new Error('two child with same key for children');
}
ret = child;
}
});
}
return ret;
}
function findHiddenChildInChildrenByKey(children, key, showProp) {
var found = 0;
if (children) {
children.forEach(function (child) {
if (found) {
return;
}
found = child && child.key === key && !child.props[showProp];
});
}
return found;
}
function isSameChildren(c1, c2, showProp) {
var same = c1.length === c2.length;
if (same) {
c1.forEach(function (child, index) {
var child2 = c2[index];
if (child && child2) {
if (child && !child2 || !child && child2) {
same = false;
} else if (child.key !== child2.key) {
same = false;
} else if (showProp && child.props[showProp] !== child2.props[showProp]) {
same = false;
}
}
});
}
return same;
}
function mergeChildren(prev, next) {
var ret = [];
// For each key of `next`, the list of keys to insert before that key in
// the combined list
var nextChildrenPending = {};
var pendingChildren = [];
prev.forEach(function (child) {
if (child && findChildInChildrenByKey(next, child.key)) {
if (pendingChildren.length) {
nextChildrenPending[child.key] = pendingChildren;
pendingChildren = [];
}
} else {
pendingChildren.push(child);
}
});
next.forEach(function (child) {
if (child && nextChildrenPending.hasOwnProperty(child.key)) {
ret = ret.concat(nextChildrenPending[child.key]);
}
ret.push(child);
});
ret = ret.concat(pendingChildren);
return ret;
}
/***/ }),
/* 71 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactDom = __webpack_require__(12);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _tinperBeeCore = __webpack_require__(26);
var _util = __webpack_require__(72);
var _util2 = _interopRequireDefault(_util);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var transitionMap = {
enter: 'transitionEnter',
appear: 'transitionAppear',
leave: 'transitionLeave'
};
var propTypes = {
children: _propTypes2["default"].any
};
var AnimateChild = function (_Component) {
_inherits(AnimateChild, _Component);
function AnimateChild(props) {
_classCallCheck(this, AnimateChild);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.transition = _this.transition.bind(_this);
_this.stop = _this.stop.bind(_this);
return _this;
}
AnimateChild.prototype.componentWillUnmount = function componentWillUnmount() {
this.stop();
};
AnimateChild.prototype.componentWillEnter = function componentWillEnter(done) {
if (_util2["default"].isEnterSupported(this.props)) {
this.transition('enter', done);
} else {
done();
}
};
AnimateChild.prototype.componentWillAppear = function componentWillAppear(done) {
if (_util2["default"].isAppearSupported(this.props)) {
this.transition('appear', done);
} else {
done();
}
};
AnimateChild.prototype.componentWillLeave = function componentWillLeave(done) {
if (_util2["default"].isLeaveSupported(this.props)) {
this.transition('leave', done);
} else {
// always sync, do not interupt with react component life cycle
// update hidden -> animate hidden ->
// didUpdate -> animate leave -> unmount (if animate is none)
done();
}
};
AnimateChild.prototype.transition = function transition(animationType, finishCallback) {
var _this2 = this;
var node = _reactDom2["default"].findDOMNode(this);
var props = this.props;
var transitionName = props.transitionName;
var nameIsObj = (typeof transitionName === 'undefined' ? 'undefined' : _typeof(transitionName)) === 'object';
this.stop();
var end = function end() {
_this2.stopper = null;
finishCallback();
};
if ((_tinperBeeCore.cssAnimation.isCssAnimationSupported || !props.animation[animationType]) && transitionName && props[transitionMap[animationType]]) {
var name = nameIsObj ? transitionName[animationType] : transitionName + '-' + animationType;
var activeName = name + '-active';
if (nameIsObj && transitionName[animationType + 'Active']) {
activeName = transitionName[animationType + 'Active'];
}
this.stopper = (0, _tinperBeeCore.cssAnimation)(node, {
name: name,
active: activeName
}, end);
} else {
this.stopper = props.animation[animationType](node, end);
}
};
AnimateChild.prototype.stop = function stop() {
var stopper = this.stopper;
if (stopper) {
this.stopper = null;
stopper.stop();
}
};
AnimateChild.prototype.render = function render() {
return this.props.children;
};
return AnimateChild;
}(_react.Component);
;
AnimateChild.propTypes = propTypes;
exports["default"] = AnimateChild;
module.exports = exports['default'];
/***/ }),
/* 72 */
/***/ (function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var util = {
isAppearSupported: function isAppearSupported(props) {
return props.transitionName && props.transitionAppear || props.animation.appear;
},
isEnterSupported: function isEnterSupported(props) {
return props.transitionName && props.transitionEnter || props.animation.enter;
},
isLeaveSupported: function isLeaveSupported(props) {
return props.transitionName && props.transitionLeave || props.animation.leave;
},
allowAppearCallback: function allowAppearCallback(props) {
return props.transitionAppear || props.animation.appear;
},
allowEnterCallback: function allowEnterCallback(props) {
return props.transitionEnter || props.animation.enter;
},
allowLeaveCallback: function allowLeaveCallback(props) {
return props.transitionLeave || props.animation.leave;
}
};
exports["default"] = util;
module.exports = exports["default"];
/***/ }),
/* 73 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
duration: _propTypes2["default"].number,
onClose: _propTypes2["default"].func,
children: _propTypes2["default"].any,
color: _propTypes2["default"].oneOf(['light']),
title: _propTypes2["default"].any
};
function noop() {}
var defaultProps = {
onEnd: noop,
onClose: noop,
duration: 4.5,
closable: true
};
var Notice = function (_React$Component) {
_inherits(Notice, _React$Component);
function Notice(props) {
_classCallCheck(this, Notice);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.clearCloseTimer = _this.clearCloseTimer.bind(_this);
_this.close = _this.close.bind(_this);
return _this;
}
Notice.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
if (this.props.duration) {
this.closeTimer = setTimeout(function () {
_this2.close();
}, this.props.duration * 1000);
}
};
Notice.prototype.componentWillUnmount = function componentWillUnmount() {
this.clearCloseTimer();
};
Notice.prototype.clearCloseTimer = function clearCloseTimer() {
if (this.closeTimer) {
clearTimeout(this.closeTimer);
this.closeTimer = null;
}
};
Notice.prototype.close = function close() {
this.clearCloseTimer();
this.props.onClose();
};
Notice.prototype.render = function render() {
var _classes;
var _props = this.props,
closable = _props.closable,
clsPrefix = _props.clsPrefix,
className = _props.className,
style = _props.style,
children = _props.children,
color = _props.color,
title = _props.title;
var componentClass = clsPrefix + '-notice';
var classes = (_classes = {}, _defineProperty(_classes, '' + componentClass, 1), _defineProperty(_classes, componentClass + '-closable', closable), _defineProperty(_classes, className, !!className), _classes);
if (color) {
classes[componentClass + '-' + color] = true;
}
return _react2["default"].createElement(
'div',
{ className: (0, _classnames2["default"])(classes), style: style, onClick: this.close },
_react2["default"].createElement(
'div',
{ className: componentClass + '-content' },
title && _react2["default"].createElement(
'div',
{ className: componentClass + '-title' },
title
),
_react2["default"].createElement(
'div',
{ className: componentClass + '-description' },
children
)
),
closable ? _react2["default"].createElement(
'a',
{ tabIndex: '0', onClick: this.close, className: componentClass + '-close' },
_react2["default"].createElement('span', { className: componentClass + '-close-x' })
) : null
);
};
return Notice;
}(_react2["default"].Component);
;
Notice.PropTypes = _propTypes2["default"];
Notice.defaultProps = defaultProps;
exports["default"] = Notice;
module.exports = exports['default'];
/***/ }),
/* 74 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var deselectCurrent = __webpack_require__(75);
var defaultMessage = 'Copy to clipboard: #{key}, Enter';
function format(message) {
var copyKey = (/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl') + '+C';
return message.replace(/#{\s*key\s*}/g, copyKey);
}
function copy(text, options) {
var debug, message, reselectPrevious, range, selection, mark, success = false;
if (!options) { options = {}; }
debug = options.debug || false;
try {
reselectPrevious = deselectCurrent();
range = document.createRange();
selection = document.getSelection();
mark = document.createElement('span');
mark.textContent = text;
// reset user styles for span element
mark.style.all = 'unset';
// prevents scrolling to the end of the page
mark.style.position = 'fixed';
mark.style.top = 0;
mark.style.clip = 'rect(0, 0, 0, 0)';
// used to preserve spaces and line breaks
mark.style.whiteSpace = 'pre';
// do not inherit user-select (it may be `none`)
mark.style.webkitUserSelect = 'text';
mark.style.MozUserSelect = 'text';
mark.style.msUserSelect = 'text';
mark.style.userSelect = 'text';
document.body.appendChild(mark);
range.selectNode(mark);
selection.addRange(range);
var successful = document.execCommand('copy');
if (!successful) {
throw new Error('copy command was unsuccessful');
}
success = true;
} catch (err) {
debug && console.error('unable to copy using execCommand: ', err);
debug && console.warn('trying IE specific stuff');
try {
window.clipboardData.setData('text', text);
success = true;
} catch (err) {
debug && console.error('unable to copy using clipboardData: ', err);
debug && console.error('falling back to prompt');
message = format('message' in options ? options.message : defaultMessage);
window.prompt(message, text);
}
} finally {
if (selection) {
if (typeof selection.removeRange == 'function') {
selection.removeRange(range);
} else {
selection.removeAllRanges();
}
}
if (mark) {
document.body.removeChild(mark);
}
reselectPrevious();
}
return success;
}
module.exports = copy;
/***/ }),
/* 75 */
/***/ (function(module, exports) {
module.exports = function () {
var selection = document.getSelection();
if (!selection.rangeCount) {
return function () {};
}
var active = document.activeElement;
var ranges = [];
for (var i = 0; i < selection.rangeCount; i++) {
ranges.push(selection.getRangeAt(i));
}
switch (active.tagName.toUpperCase()) { // .toUpperCase handles XHTML
case 'INPUT':
case 'TEXTAREA':
active.blur();
break;
default:
active = null;
break;
}
selection.removeAllRanges();
return function () {
selection.type === 'Caret' &&
selection.removeAllRanges();
if (!selection.rangeCount) {
ranges.forEach(function(range) {
selection.addRange(range);
});
}
active &&
active.focus();
};
};
/***/ }),
/* 76 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _tinperBeeCore = __webpack_require__(26);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
//是否是手风琴效果
accordion: _propTypes2["default"].bool,
//激活的项
activeKey: _propTypes2["default"].any,
//默认的激活的项
defaultActiveKey: _propTypes2["default"].any,
//选中函数
onSelect: _propTypes2["default"].func,
role: _propTypes2["default"].string
};
var defaultProps = {
accordion: false,
clsPrefix: 'u-panel-group'
};
// TODO: Use uncontrollable.
var PanelGroup = function (_React$Component) {
_inherits(PanelGroup, _React$Component);
function PanelGroup(props, context) {
_classCallCheck(this, PanelGroup);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
_this.handleSelect = _this.handleSelect.bind(_this);
_this.state = {
activeKey: props.defaultActiveKey
};
return _this;
}
PanelGroup.prototype.handleSelect = function handleSelect(key, e) {
e.preventDefault();
if (this.props.onSelect) {
this.props.onSelect(key, e);
}
if (this.state.activeKey === key) {
key = null;
}
this.setState({ activeKey: key });
};
PanelGroup.prototype.render = function render() {
var _this2 = this;
var _props = this.props,
accordion = _props.accordion,
propsActiveKey = _props.activeKey,
className = _props.className,
children = _props.children,
defaultActiveKey = _props.defaultActiveKey,
onSelect = _props.onSelect,
style = _props.style,
clsPrefix = _props.clsPrefix,
others = _objectWithoutProperties(_props, ['accordion', 'activeKey', 'className', 'children', 'defaultActiveKey', 'onSelect', 'style', 'clsPrefix']);
var activeKey = void 0;
if (accordion) {
activeKey = propsActiveKey != null ? propsActiveKey : this.state.activeKey;
others.role = others.role || 'tablist';
}
var classes = {};
classes['' + clsPrefix] = true;
return _react2["default"].createElement(
'div',
_extends({}, others, {
className: (0, _classnames2["default"])(className, classes)
}),
_react2["default"].Children.map(children, function (child) {
if (!_react2["default"].isValidElement(child)) {
return child;
}
var childProps = {
style: child.props.style
};
if (accordion) {
_extends(childProps, {
headerRole: 'tab',
panelRole: 'tabpanel',
collapsible: true,
expanded: child.props.eventKey === activeKey,
onSelect: (0, _tinperBeeCore.createChainedFunction)(_this2.handleSelect, child.props.onSelect)
});
}
return (0, _react.cloneElement)(child, childProps);
})
);
};
return PanelGroup;
}(_react2["default"].Component);
PanelGroup.propTypes = propTypes;
PanelGroup.defaultProps = defaultProps;
exports["default"] = PanelGroup;
module.exports = exports['default'];
/***/ }),
/* 77 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Button = __webpack_require__(78);
var _Button2 = _interopRequireDefault(_Button);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports["default"] = _Button2["default"];
module.exports = exports['default'];
/***/ }),
/* 78 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = __webpack_require__(4);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(12);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _propTypes = __webpack_require__(5);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = __webpack_require__(3);
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
var propTypes = {
/**
* @title 尺寸
*/
size: _propTypes2["default"].oneOf(['sm', 'xg', 'lg']),
/**
* @title 样式
*/
style: _propTypes2["default"].object,
/**
* @title 形状
*/
shape: _propTypes2["default"].oneOf(['block', 'round', 'border', 'squared', 'floating', 'pillRight', 'pillLeft', 'icon']),
bordered: _propTypes2["default"].bool,
/**
* @title 类型
*/
colors: _propTypes2["default"].oneOf(['primary', 'accent', 'success', 'info', 'warning', 'danger', 'default']),
/**
* @title 是否禁用
* @veIgnore
*/
disabled: _propTypes2["default"].bool,
/**
* @title 类名
* @veIgnore
*/
className: _propTypes2["default"].string,
/**
* @title