forgetest5
/
bee-table6
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(Table.js): add loading param 

fix #10
This commit is contained in:
huyueb 2018-01-24 15:10:24 +08:00
parent 6e459744e2
commit 92c6468549
13 changed files with 2584 additions and 1993 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -89,6 +89,7 @@ class Demo extends Component {
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*

76
demo/demolist/Demo17.js Normal file
View File

@ -0,0 +1,76 @@
/**
*
* @title loading属性指定表格是否加载中
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
*
*/
import React, { Component } from "react";
import Table from "../../src";
import Button from "bee-button";
const columns17 = [
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{
title: "操作",
dataIndex: "d",
key: "d",
render(text, record, index) {
return (
<a
href="#"
onClick={() => {
alert('这是第'+index+'列，内容为:'+text);
}}
>
一些操作
</a>
);
}
}
];
const data17 = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
];
class Demo17 extends Component {
constructor(props){
super(props);
this.state = {
loading : true
}
}
changeLoading = () => {
this.setState({
loading : !this.state.loading
})
}
render() {
return (
<div>
<Button
className="editable-add-btn"
type="ghost"
onClick={this.changeLoading}
>
切换loading
</Button>
<Table
columns={columns17}
data={data17}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
// loading={this.state.loading}或者是boolean
loading={{show:this.state.loading,loadingType:"line"}}
/>
</div>
);
}
}
export default Demo17;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

278
dist/demo.css vendored
View File

@ -6202,48 +6202,43 @@ input.u-button[type="submit"] {
font-size: 12px;
height: 24px; }
.u-input-search-wrapper {
.u-form-control-search-wrapper {
position: absolute;
top: 0;
left: 0;
height: 28px;
padding: 4px;
width: 100%; }
.u-form-control-search-wrapper .u-form-control-search-action {
color: #ccc;
position: absolute;
top: 2px;
right: 2px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 14px;
text-decoration: none; }
.u-form-control-search-wrapper .u-form-control-search-action .uf {
transition: all .3s;
font-size: 12px;
color: #ccc; }
.u-form-control-search-wrapper .u-form-control-search-action .uf.uf-search:before {
content: "\e603"; }
.u-input-search-action {
color: #ccc;
position: absolute;
top: 2px;
right: 2px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 14px;
text-decoration: none; }
.u-input-search-action .uf {
transition: all .3s;
font-size: 12px;
color: #ccc; }
.uf-search:before {
content: "\e603"; }
.u-input-affix-wrapper {
.u-form-control-affix-wrapper {
position: relative;
display: inline-block;
width: 100%; }
.u-input-affix-wrapper .u-input-prefix, .u-input-affix-wrapper .u-input-suffix {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
line-height: 0;
right: 7px;
margin-top: 5px;
color: rgba(0, 0, 0, 0.65); }
.u-form-control-affix-wrapper .u-form-control-prefix, .u-form-control-affix-wrapper .u-form-control-suffix {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
line-height: 0;
right: 7px;
color: rgba(0, 0, 0, 0.65); }
/* FormGroup */
/* Navlayout */
@ -6426,14 +6421,8 @@ input.u-button[type="submit"] {
cursor: not-allowed;
opacity: 0.5; }
.u-checkbox input[type='checkbox'] {
position: absolute;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
top: 2px;
height: 18px;
width: 18px; }
display: none;
cursor: pointer; }
.u-checkbox input[disabled] {
cursor: not-allowed; }
.u-checkbox.is-checked .u-checkbox-label:before {
@ -6447,9 +6436,7 @@ input.u-button[type="submit"] {
.u-checkbox .u-checkbox-label {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
color: #a9a9a9; }
padding-left: 25px; }
.u-checkbox .u-checkbox-label:before {
border-radius: 3px;
border: 1px solid;
@ -6461,7 +6448,7 @@ input.u-button[type="submit"] {
width: 18px;
height: 18px;
left: 0;
top: -13px;
top: 4px;
text-align: center;
position: absolute; }
.u-checkbox .u-checkbox-label:after {
@ -6471,14 +6458,10 @@ input.u-button[type="submit"] {
width: 18px;
height: 18px;
left: 0;
top: -13px;
top: 4px;
text-align: center;
position: absolute; }
.u-checkbox-checked .u-checkbox-label, .u-checkbox-indeterminate .u-checkbox-label {
background-color: #108ee9;
border-color: #108ee9; }
.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
color: #fff;
content: "\e6ce";
@ -7610,6 +7593,144 @@ ul {
/* FormGroup */
/* Navlayout */
/* FormGroup */
/* Navlayout */
/**
* 加载背景
*/
/**
* 文字
*/
.u-loading-desc {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 16px;
color: #000;
text-align: center; }
/**
* default样式 单个圆圈加载
*/
.u-loading.u-loading-rotate > div {
position: absolute;
border-radius: 100%;
margin: 2px;
animation-fill-mode: both;
border: 2px solid #0084ff;
border-bottom-color: transparent;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -22px;
margin-top: -22px;
background: transparent !important;
display: inline-block;
animation: rotate 0.75s 0s linear infinite; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
margin-left: -35px;
margin-top: -35px;
width: 60px;
height: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
margin-left: -15px;
margin-top: -15px;
width: 25px;
height: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-primary > div {
border: 2px solid #3f51b5;
border-bottom-color: transparent; }
.u-loading.u-loading-rotate.u-loading-rotate-success > div {
border: 2px solid #4caf50;
border-bottom-color: transparent; }
.u-loading.u-loading-rotate.u-loading-rotate-warning > div {
border: 2px solid #ff9800;
border-bottom-color: transparent; }
.u-loading-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1600;
opacity: .7;
filter: blur(0.5px);
background-color: #fff; }
.u-loading-backdrop.full-screen {
position: fixed; }
@keyframes rotate {
0% {
transform: rotate(0deg) scale(1); }
50% {
transform: rotate(180deg) scale(0.6); }
100% {
transform: rotate(360deg) scale(1); } }
.u-loading.u-loading-line {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -25px; }
.u-loading.u-loading-line > div {
background-color: #C2C3C5;
width: 6px;
height: 50px;
border-radius: 2px;
margin: 2px;
animation-fill-mode: both;
display: inline-block; }
.u-loading.u-loading-line.u-loading-line-lg {
margin-top: -50px;
margin-left: -30px; }
.u-loading.u-loading-line.u-loading-line-lg > div {
width: 8px;
height: 90px; }
.u-loading.u-loading-line.u-loading-line-sm {
margin-top: -22px;
margin-left: -20px; }
.u-loading.u-loading-line.u-loading-line-sm > div {
width: 4px;
height: 35px; }
.u-loading.u-loading-line div:nth-child(1) {
animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #F44336; }
.u-loading.u-loading-line div:nth-child(2) {
animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #7ED321; }
.u-loading.u-loading-line div:nth-child(3) {
animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #0084FF; }
.u-loading.u-loading-line div:nth-child(4) {
animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #FF9800; }
.u-loading.u-loading-line div:nth-child(5) {
animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #D0021B; }
.u-loading.u-loading-line.u-loading-line-primary > div {
background-color: #3f51b5; }
.u-loading.u-loading-line.u-loading-line-success > div {
background-color: #4caf50; }
.u-loading.u-loading-line.u-loading-line-warning > div {
background-color: #ff9800; }
@keyframes line-scale {
0% {
transform: scaley(1); }
50% {
transform: scaley(0.4); }
100% {
transform: scaley(1); } }
.u-table {
font-size: 12px;
color: #666;
@ -7971,48 +8092,43 @@ ul {
font-size: 12px;
height: 24px; }
.u-input-search-wrapper {
.u-form-control-search-wrapper {
position: absolute;
top: 0;
left: 0;
height: 28px;
padding: 4px;
width: 100%; }
.u-form-control-search-wrapper .u-form-control-search-action {
color: #ccc;
position: absolute;
top: 2px;
right: 2px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 14px;
text-decoration: none; }
.u-form-control-search-wrapper .u-form-control-search-action .uf {
transition: all .3s;
font-size: 12px;
color: #ccc; }
.u-form-control-search-wrapper .u-form-control-search-action .uf.uf-search:before {
content: "\e603"; }
.u-input-search-action {
color: #ccc;
position: absolute;
top: 2px;
right: 2px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 14px;
text-decoration: none; }
.u-input-search-action .uf {
transition: all .3s;
font-size: 12px;
color: #ccc; }
.uf-search:before {
content: "\e603"; }
.u-input-affix-wrapper {
.u-form-control-affix-wrapper {
position: relative;
display: inline-block;
width: 100%; }
.u-input-affix-wrapper .u-input-prefix, .u-input-affix-wrapper .u-input-suffix {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
line-height: 0;
right: 7px;
margin-top: 5px;
color: rgba(0, 0, 0, 0.65); }
.u-form-control-affix-wrapper .u-form-control-prefix, .u-form-control-affix-wrapper .u-form-control-suffix {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
line-height: 0;
right: 7px;
color: rgba(0, 0, 0, 0.65); }
/* FormGroup */
/* Navlayout */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

4031
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
docs/api.md
View File

@ -47,6 +47,9 @@ import 'bee-table/build/Table.css';
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*

167
package.json
View File

@ -1,86 +1,87 @@
{
"name": "bee-table",
"version": "1.0.12",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"engines": {
"node": ">=4.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
"name": "bee-table",
"version": "1.0.12",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"transform": {
"^.+\\.js$": "babel-jest"
"engines": {
"node": ">=4.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"transform": {
"^.+\\.js$": "babel-jest"
}
},
"homepage": "https://github.com/tinper-bee/bee-table.git",
"author": "Yonyou FED",
"repository": "http://github.com/tinper-bee/bee-table",
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
"license": "MIT",
"main": "./build/index.js",
"config": {
"port": 3000,
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
"test": "jest",
"chrome": "bee-tools run chrome",
"coveralls": "jest",
"browsers": "bee-tools run browsers",
"pub": "bee-tools run pub",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
"dependencies": {
"bee-loading": "^1.0.3",
"classnames": "^2.2.5",
"object-path": "^0.11.3",
"tinper-bee-core": "latest",
"warning": "^3.0.0"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0",
"react-dom": "^15.3.0 || ^16.0",
"prop-types": "15.6.0"
},
"devDependencies": {
"babel-jest": "^22.0.4",
"bee-animate": "latest",
"bee-button": "latest",
"bee-checkbox": "latest",
"bee-datepicker": "latest",
"bee-form": "^1.0.8",
"bee-form-control": "latest",
"bee-icon": "latest",
"bee-input-group": "latest",
"bee-layout": "latest",
"bee-pagination": "latest",
"bee-panel": "latest",
"bee-popconfirm": "^1.0.1",
"bee-select": "latest",
"bee-tools": "latest",
"bee-tooltip": "^1.0.2",
"chai": "^3.5.0",
"console-polyfill": "~0.2.1",
"cz-conventional-changelog": "^2.1.0",
"enzyme": "^2.9.1",
"es5-shim": "~4.1.10",
"jest": "^22.0.4",
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
},
"homepage": "https://github.com/tinper-bee/bee-table.git",
"author": "Yonyou FED",
"repository": "http://github.com/tinper-bee/bee-table",
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
"license": "MIT",
"main": "./build/index.js",
"config": {
"port": 3000,
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"scripts": {
"dev": "bee-tools run start",
"build": "bee-tools run build",
"lint": "bee-tools run lint",
"test": "jest",
"chrome": "bee-tools run chrome",
"coveralls": "jest",
"browsers": "bee-tools run browsers",
"pub": "bee-tools run pub",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
"dependencies": {
"classnames": "^2.2.5",
"object-path": "^0.11.3",
"tinper-bee-core": "latest",
"warning": "^3.0.0"
},
"peerDependencies": {
"react": "^15.3.0 || ^16.0",
"react-dom": "^15.3.0 || ^16.0",
"prop-types": "15.6.0"
},
"devDependencies": {
"babel-jest": "^22.0.4",
"bee-animate": "latest",
"bee-button": "latest",
"bee-checkbox": "latest",
"bee-datepicker": "latest",
"bee-form": "^1.0.8",
"bee-form-control": "latest",
"bee-icon": "latest",
"bee-input-group": "latest",
"bee-layout": "latest",
"bee-pagination": "latest",
"bee-panel": "latest",
"bee-popconfirm": "^1.0.1",
"bee-select": "latest",
"bee-tools": "latest",
"bee-tooltip": "^1.0.2",
"chai": "^3.5.0",
"console-polyfill": "~0.2.1",
"cz-conventional-changelog": "^2.1.0",
"enzyme": "^2.9.1",
"es5-shim": "~4.1.10",
"jest": "^22.0.4",
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
}
}

10
src/Table.js
View File

@ -7,6 +7,7 @@ import shallowequal from 'shallowequal';
import addEventListener from 'tinper-bee-core/lib/addEventListener';
import ColumnManager from './ColumnManager';
import createStore from './createStore';
import Loading from 'bee-loading';
const propTypes = {
data: PropTypes.array,
@ -711,6 +712,12 @@ class Table extends Component{
const isTableScroll = this.columnManager.isAnyColumnsFixed() ||
props.scroll.x ||
props.scroll.y;
let loading = props.loading;
if (typeof loading === 'boolean') {
loading = {
show: loading,
};
}
return (
<div className={className} style={props.style}>
{this.getTitle()}
@ -729,6 +736,9 @@ class Table extends Component{
{this.getRightFixedTable()}
</div>}
</div>
<Loading
container={this}
{...loading} />
</div>
);
}

1
src/Table.scss
View File

@ -1,5 +1,6 @@
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
@import "../node_modules/bee-loading/src/Loading";
$text-color: #666;
$font-size-base: 12px;

2
src/lib/sum.js
View File

@ -51,7 +51,7 @@ export default function sum(Table) {
}
return item;
});
return <Table{...this.props} footerScroll showHeader={false} columns={columns_sum} data={obj} />;
return <Table{...this.props} loading={false} footerScroll showHeader={false} columns={columns_sum} data={obj} />;
};
render() {
return (

2
src/render/InputRender.js
View File

@ -23,6 +23,7 @@ export default class InputRender extends Component {
this.setState({ value });
};
check = () => {
console.log('1')
if (typeof this.flag === "undefined" || this.flag) {
this.props.check(this.flag, this.obj);
this.setState({ editable: false });
@ -31,6 +32,7 @@ export default class InputRender extends Component {
}
this.flag = undefined;
}
};
checkValidate = (flag, obj) => {
this.flag = flag;