p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: feat haveExpandIcon to control hidden expandIcon

This commit is contained in:
huyueb 2018-01-31 19:46:40 +08:00
parent 92c6468549
commit 98a403db30
18 changed files with 341 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -85,11 +85,12 @@ class Demo extends Component {
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object | {} |
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
| expandedRowRender | 额外的展开行 | Function | - |
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*

7
build/ExpandIcon.js
View File

@ -55,9 +55,10 @@ var ExpandIcon = function (_Component) {
onExpand = _props.onExpand,
needIndentSpaced = _props.needIndentSpaced,
expanded = _props.expanded,
record = _props.record;
record = _props.record,
isHiddenExpandIcon = _props.isHiddenExpandIcon;
if (expandable) {
if (expandable && !isHiddenExpandIcon) {
var expandClassName = expanded ? 'expanded' : 'collapsed';
return _react2["default"].createElement('span', {
className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
@ -65,7 +66,7 @@ var ExpandIcon = function (_Component) {
return onExpand(!expanded, record, e);
}
});
} else if (needIndentSpaced) {
} else if (needIndentSpaced || isHiddenExpandIcon) {
return _react2["default"].createElement('span', { className: clsPrefix + '-expand-icon ' + clsPrefix + '-spaced' });
}
return null;

153
build/Table.css
View File

@ -1,5 +1,158 @@
@charset "UTF-8";
/* 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;
-webkit-animation-fill-mode: both;
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;
-webkit-animation: rotate 0.75s 0s linear infinite;
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% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }
50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6); }
100% {
-webkit-transform: rotate(360deg) scale(1);
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;
-webkit-animation-fill-mode: both;
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) {
-webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
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) {
-webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
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) {
-webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
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) {
-webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
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) {
-webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
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% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.u-table {
font-size: 12px;
color: #666;

23
build/Table.js
View File

@ -40,6 +40,10 @@ var _createStore = require('./createStore');
var _createStore2 = _interopRequireDefault(_createStore);
var _beeLoading = require('bee-loading');
var _beeLoading2 = _interopRequireDefault(_beeLoading);
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; }
@ -386,6 +390,7 @@ var Table = function (_Component) {
var fixedColumnsBodyRowsHeight = this.state.fixedColumnsBodyRowsHeight;
var rst = [];
var isHiddenExpandIcon = void 0;
var rowClassName = props.rowClassName;
var rowRef = props.rowRef;
var expandedRowClassName = props.expandedRowClassName;
@ -407,6 +412,10 @@ var Table = function (_Component) {
if (expandedRowRender && isRowExpanded) {
expandedRowContent = expandedRowRender(record, i, indent);
}
//只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
isHiddenExpandIcon = props.haveExpandIcon(record, i);
}
var className = rowClassName(record, i, indent);
var onHoverProps = {};
@ -445,7 +454,8 @@ var Table = function (_Component) {
expandIconColumnIndex: expandIconColumnIndex,
onRowClick: onRowClick,
onRowDoubleClick: onRowDoubleClick,
height: height
height: height,
isHiddenExpandIcon: isHiddenExpandIcon
}, onHoverProps, {
key: key,
hoverKey: key,
@ -811,6 +821,12 @@ var Table = function (_Component) {
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
var loading = props.loading;
if (typeof loading === 'boolean') {
loading = {
show: loading
};
}
return _react2["default"].createElement(
'div',
{ className: className, style: props.style },
@ -835,7 +851,10 @@ var Table = function (_Component) {
{ className: clsPrefix + '-fixed-right' },
this.getRightFixedTable()
)
)
),
_react2["default"].createElement(_beeLoading2["default"], _extends({
container: this
}, loading))
);
};

6
build/TableRow.js
View File

@ -169,7 +169,8 @@ var TableRow = function (_Component) {
onExpand = _props7.onExpand,
needIndentSpaced = _props7.needIndentSpaced,
indent = _props7.indent,
indentSize = _props7.indentSize;
indentSize = _props7.indentSize,
isHiddenExpandIcon = _props7.isHiddenExpandIcon;
var className = this.props.className;
@ -185,7 +186,8 @@ var TableRow = function (_Component) {
onExpand: onExpand,
needIndentSpaced: needIndentSpaced,
expanded: expanded,
record: record
record: record,
isHiddenExpandIcon: isHiddenExpandIcon
});
for (var i = 0; i < columns.length; i++) {

2
build/lib/sum.js
View File

@ -73,7 +73,7 @@ function sum(Table) {
}
return item;
});
return _react2["default"].createElement(Table, _extends({}, _this.props, { footerScroll: true, showHeader: false, columns: columns_sum, data: obj }));
return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj }));
};
return _this;

3
build/render/InputRender.js
View File

@ -71,6 +71,7 @@ var InputRender = function (_Component) {
var value = e;
_this.setState({ value: value });
}, _this.check = function () {
console.log('1');
if (typeof _this.flag === "undefined" || _this.flag) {
_this.props.check(_this.flag, _this.obj);
_this.setState({ editable: false });
@ -87,6 +88,8 @@ var InputRender = function (_Component) {
}, _this.handleKeydown = function (event) {
if (event.keyCode == 13) {
_this.check();
} else if (event.keyCode == 9) {
debugger;
}
}, _this.formatCurrency = function (money) {
if (money && money != null && !!Number(money)) {

10
demo/demolist/Demo16.js
View File

@ -72,12 +72,18 @@ class Demo16 extends Component {
})
}
}
}
haveExpandIcon=(record, index)=>{
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
if(index == 0){
return true;
}
return false;
}
render() {
return (
<Table
haveExpandIcon={this.haveExpandIcon}
columns={columns16}
data={data16}
onExpand={this.getData}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

48
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

4
docs/api.md
View File

@ -43,12 +43,12 @@ import 'bee-table/build/Table.css';
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object | {} |
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
| expandedRowRender | 额外的展开行 | Function | - |
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
| expandIconAsCell | 展开按钮是否单独作为一个单元格 | bool | false |
| expandRowByClick | 设置展开行是否通过点击行触发，此参数需要与上面参数搭配使用（默认是通过点击行前面的加号展开行 | bool | false |
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*

169
package.json
View File

@ -1,87 +1,88 @@
{
"name": "bee-table",
"version": "1.0.12",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
"name": "bee-table",
"version": "1.0.13",
"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"
],
"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"
"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",
"shallowequal": "^1.0.2",
"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"
}
}

6
src/ExpandIcon.js
View File

@ -19,8 +19,8 @@ class ExpandIcon extends Component{
return !shallowequal(nextProps, this.props);
}
render() {
const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record } = this.props;
if (expandable) {
const { expandable, clsPrefix, onExpand, needIndentSpaced, expanded, record, isHiddenExpandIcon } = this.props;
if (expandable && !isHiddenExpandIcon) {
const expandClassName = expanded ? 'expanded' : 'collapsed';
return (
<span
@ -28,7 +28,7 @@ class ExpandIcon extends Component{
onClick={(e) => onExpand(!expanded, record, e)}
/>
);
} else if (needIndentSpaced) {
} else if (needIndentSpaced || isHiddenExpandIcon) {
return <span className={`${clsPrefix}-expand-icon ${clsPrefix}-spaced`} />;
}
return null;

9
src/Table.js
View File

@ -318,6 +318,7 @@ class Table extends Component{
const expandRowByClick = props.expandRowByClick;
const { fixedColumnsBodyRowsHeight } = this.state;
let rst = [];
let isHiddenExpandIcon;
const rowClassName = props.rowClassName;
const rowRef = props.rowRef;
const expandedRowClassName = props.expandedRowClassName;
@ -337,6 +338,10 @@ class Table extends Component{
if (expandedRowRender && isRowExpanded) {
expandedRowContent = expandedRowRender(record, i, indent);
}
//只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
if(expandedRowRender && typeof props.haveExpandIcon == 'function'){
isHiddenExpandIcon = props.haveExpandIcon(record, i);
}
const className = rowClassName(record, i, indent);
const onHoverProps = {};
@ -356,7 +361,8 @@ class Table extends Component{
} else {
leafColumns = this.columnManager.leafColumns();
}
rst.push(
<TableRow
indent={indent}
@ -379,6 +385,7 @@ class Table extends Component{
onRowClick={onRowClick}
onRowDoubleClick={onRowDoubleClick}
height={height}
isHiddenExpandIcon={isHiddenExpandIcon}
{...onHoverProps}
key={key}
hoverKey={key}

5
src/TableRow.js
View File

@ -108,7 +108,7 @@ class TableRow extends Component{
const {
clsPrefix, columns, record, height, visible, index,
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
expandable, onExpand, needIndentSpaced, indent, indentSize,
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon
} = this.props;
let { className } = this.props;
@ -127,6 +127,7 @@ class TableRow extends Component{
needIndentSpaced={needIndentSpaced}
expanded={expanded}
record={record}
isHiddenExpandIcon={isHiddenExpandIcon}
/>
);
@ -152,7 +153,7 @@ class TableRow extends Component{
index={index}
column={columns[i]}
key={columns[i].key}
expandIcon={isColumnHaveExpandIcon ? expandIcon : null}
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
/>
);
}

2
src/render/InputRender.js
View File

@ -44,6 +44,8 @@ export default class InputRender extends Component {
handleKeydown = event => {
if (event.keyCode == 13) {
this.check();
}else if(event.keyCode == 9){
debugger;
}
};
//货币的格式化方法