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

log,函数节流处理

This commit is contained in:
jonyshi 2019-04-23 18:25:34 +08:00
parent fb257a43d1
commit b3cdf240af
13 changed files with 169 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build/Table.js
View File

@ -100,7 +100,8 @@ var propTypes = {
onFilterClear: _propTypes2["default"].func,
syncHover: _propTypes2["default"].bool,
tabIndex: _propTypes2["default"].string,
hoverContent: _propTypes2["default"].func
hoverContent: _propTypes2["default"].func,
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
};
var defaultProps = {
@ -145,7 +146,8 @@ var defaultProps = {
setRowHeight: function setRowHeight() {},
setRowParentIndex: function setRowParentIndex() {},
tabIndex: '0',
heightConsistent: false
heightConsistent: false,
size: 'md'
};
var Table = function (_Component) {
@ -156,6 +158,11 @@ var Table = function (_Component) {
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.resize = function () {
(0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
_this.computeTableWidth();
};
_this.renderDragHideTable = function () {
var _this$props = _this.props,
columns = _this$props.columns,
@ -270,7 +277,7 @@ var Table = function (_Component) {
}
if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight();
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
}
};
@ -1332,6 +1339,9 @@ var Table = function (_Component) {
show: loading
};
}
if (props.size) {
className += ' ' + clsPrefix + '-' + props.size;
}
return _react2["default"].createElement(
'div',

2
build/lib/dragColumn.js
View File

@ -81,7 +81,7 @@ function dragColumn(Table) {
columns: _newColumns //cloneDeep(columns)
});
// console.log(" onDrop-------columns--- ",_newColumns);
console.log(columns === _newColumns);
// console.log(columns === _newColumns);
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}

4
build/lib/multiSelect.js
View File

@ -97,7 +97,7 @@ function multiSelect(Table, Checkbox) {
var count = 0;
var disabledCount = 0;
data.forEach(function (da) {
if (da._checked) {
if (da._checked && !da._disabled) {
count++;
}
if (da._disabled) {
@ -223,7 +223,7 @@ function multiSelect(Table, Checkbox) {
key: "checkbox",
dataIndex: "checkbox",
fixed: "left",
width: 50,
width: 60,
render: function render(text, record, index) {
var attr = {};
record._disabled ? attr.disabled = record._disabled : "";

184
build/lib/newMultiSelect.js
View File

@ -1,191 +1,17 @@
"use strict";
'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; };
exports["default"] = newMultiSelect;
var _react = require("react");
var _multiSelect = require('./multiSelect');
var _react2 = _interopRequireDefault(_react);
var _util = require("./util");
var _multiSelect2 = _interopRequireDefault(_multiSelect);
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); }
/**
* 参数: 过滤表头
* @param {*} Table
* @param {*} Checkbox
* @param {*} Popover
* @param {*} Icon
*/
function newMultiSelect(Table, Checkbox) {
var _class, _temp, _initialiseProps;
return _temp = _class = function (_Component) {
_inherits(NewMultiSelect, _Component);
function NewMultiSelect(props) {
_classCallCheck(this, NewMultiSelect);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_initialiseProps.call(_this);
var checkedAll = _this.setChecked(props.data);
_this.state = {
checkedAll: checkedAll,
data: (0, _util.ObjectAssign)(props.data)
};
return _this;
}
NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.data != nextProps.data) {
this.setState({
data: (0, _util.ObjectAssign)(nextProps.data),
checkedAll: this.setChecked(nextProps.data)
});
}
};
NewMultiSelect.prototype.setChecked = function setChecked(data) {
var allCheck = true;
if (data) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var da = _step.value;
if (!da._checked) {
allCheck = false;
break;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator["return"]) {
_iterator["return"]();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return allCheck;
};
NewMultiSelect.prototype.render = function render() {
var columns = this.props.columns;
var data = this.state.data;
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
};
return NewMultiSelect;
}(_react.Component), _class.defaultProps = {
prefixCls: "u-table-mult-select"
}, _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.onAllCheckChange = function () {
var _state = _this2.state,
data = _state.data,
checkedAll = _state.checkedAll;
var selectList = [];
var check = checkedAll ? false : true;
data.forEach(function (item) {
item._checked = check;
if (item._checked) {
selectList.push(item);
}
});
_this2.setState({
checkedAll: check
});
_this2.props.getSelectedDataFunc(selectList);
};
this.handleClick = function () {};
this.onCheckboxChange = function (text, record, index) {
return function () {
var data = _this2.state.data;
var selectList = [];
record._checked = record._checked ? false : true;
var checkedAll = true;
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (!item._checked || item._checked == false) {
checkedAll = false;
break;
}
}
_this2.setState(_extends({}, _this2.state, {
checkedAll: checkedAll
}));
data.forEach(function (da) {
if (da._checked) {
selectList.push(da);
}
});
_this2.props.getSelectedDataFunc(selectList, record, index);
};
};
this.getDefaultColumns = function (columns) {
// let checkedAll = init?false:this.state.checkedAll;
var checkedAll = _this2.state.checkedAll;
var _defaultColumns = [{
title: _react2["default"].createElement(Checkbox, {
className: "table-checkbox",
checked: checkedAll
// indeterminate={indeterminate_bool && !this.state.checkedAll}
, onChange: _this2.onAllCheckChange
}),
key: "checkbox",
dataIndex: "checkbox",
fixed: "left",
width: 50,
render: function render(text, record, index) {
var attr = {};
record._disabled ? attr.disabled = record._disabled : "";
return _react2["default"].createElement(Checkbox, _extends({
key: index,
className: "table-checkbox"
}, attr, {
checked: record._checked,
onClick: _this2.handleClick,
onChange: _this2.onCheckboxChange(text, record, index)
}));
}
}];
return _defaultColumns.concat(columns);
};
}, _temp;
return (0, _multiSelect2["default"])(Table, Checkbox);
}
module.exports = exports["default"];
module.exports = exports['default'];

2
demo/demolist/Demo0404.js
View File

@ -8,7 +8,7 @@
import React, { Component } from 'react';
import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
import Table from '../../src';
import multiSelect from "../../src/lib/multiSelect";
import multiSelect from "../../src/lib/newMultiSelect";
import sort from "../../src/lib/sort";
const { Item } = Menu;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

4
dist/demo.css vendored
View File

@ -8857,6 +8857,10 @@ ul {
::-webkit-scrollbar-track-piece {
display: none; }
.u-table-drag-hidden-cont {
position: absolute;
top: -1000px; }
.selected {
background: #FFF7E7; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

236
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

7
src/Table.scss
View File

@ -906,4 +906,9 @@ $icon-color:#505F79;
::-webkit-scrollbar-track-piece {
display: none;
}
}
.u-table-drag-hidden-cont{
position: absolute;
top:-1000px;
}

26
src/TableHeader.js
View File

@ -14,6 +14,7 @@ const propTypes = {
function getDiv(id){
let div = document.createElement("div");
div.className = "u-table-drag-hidden-cont";
div.id = id;
return div;
}
@ -66,7 +67,6 @@ class TableHeader extends Component {
initTable(){
const {contentTable} = this.props;
if(!this.props.dragborder && !this.props.draggable)return;
// let el = ReactDOM.findDOMNode(this);
let tableDome = this._thead.parentNode;
let table = {};
if(tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE"){
@ -119,9 +119,8 @@ class TableHeader extends Component {
let events = [
{key:'mouseup', fun:this.onTrMouseUp},
{key:'mousemove', fun:this.onTrMouseMove},
// {key:'mousedown', fun:this.onTrMouseDown}
// {key:'mousemove', fun:debounce(50,this.onTrMouseMove)},//函数节流后体验很差
];
// console.log(" ---- ",this.table.tr);
this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
}
@ -132,7 +131,6 @@ class TableHeader extends Component {
let events = [
{key:'mouseup', fun:this.onTrMouseUp},
{key:'mousemove', fun:this.onTrMouseMove},
// {key:'mousedown', fun:this.onTrMouseDown}
];
this.eventListen(events,'remove',this.table.tr[0]);
}
@ -179,11 +177,9 @@ class TableHeader extends Component {
let event = Event.getEvent(e) ,
targetEvent = Event.getTarget(event);
const { clsPrefix, contentTable } = this.props;
// console.log(" ------------------onTrMouseDown------------------ ");
let currentElement = this.getOnLineObject(targetEvent);
if(!currentElement)return;
let type = currentElement.getAttribute('data-type');
// console.log("type : ",type);
if(!this.props.dragborder && !this.props.draggable)return;
if(type == 'online' && this.props.dragborder){
if(!this.props.dragborder)return;
@ -197,7 +193,6 @@ class TableHeader extends Component {
this.drag.oldWidth = parseInt((currentObj).style.width);
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
// console.log("====================",this.drag);
}else if(type != 'online' && this.props.draggable){
if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
targetEvent.setAttribute('draggable',true);//添加交换列效果
@ -205,24 +200,22 @@ class TableHeader extends Component {
this.currentDome = event.target;
let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
this.drag.currIndex = currentIndex;
// console.log(" ------------------onTrMouseDown------this.drag------------ ",this.drag);
}else{
// console.log("onTrMouseDown dragborder or draggable is all false !");
return ;
}
};
/**
* 调整列宽的move事件
* @memberof TableHeader
*/
onTrMouseMove = (e) => {
if(!this.props.dragborder && !this.props.draggable)return;
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
Event.stopPropagation(e);
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
// console.log(" --onTrMouseMove--border- ",this.drag.option);
//移动改变宽度
let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.x - this.drag.oldLeft);
@ -276,7 +269,6 @@ class TableHeader extends Component {
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
}else{
// console.log("onTrMouseMove dragborder or draggable is all false !");
// return ;
}
}
@ -318,7 +310,6 @@ class TableHeader extends Component {
*/
bodyonLineMouseUp = (events,type) =>{
if(!this.drag || !this.drag.option)return;
// console.log("----bodyEventListen",this.drag);
this.mouseClear();
}
@ -392,7 +383,6 @@ class TableHeader extends Component {
if(event.dataTransfer.setDragImage){
var crt = target.cloneNode(true);
// console.log(" -------crt-------",crt);
crt.style.backgroundColor = "#ebecf0";
crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步
crt.style.height = "40px";
@ -420,8 +410,7 @@ class TableHeader extends Component {
if(this.drag && this.drag.option != 'dragAble'){return;}
let event = Event.getEvent(e) ,
target = Event.getTarget(event);
this.currentDome.setAttribute('draggable',false);//添加交换列效果
// console.log("-onDrop--target---",target);
this.currentDome.setAttribute('draggable',false);//添加交换列效果
};
@ -432,11 +421,9 @@ class TableHeader extends Component {
let currentIndex = target.getAttribute("data-line-index");
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){
// console.log("-onDragEnter-----",target);
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style","border:2px dashed rgba(5,0,0,0.25)");
// target.style.backgroundColor = 'rgb(235, 236, 240)';
// target.style['box-sizing'] = 'border-box';
}
}
@ -461,9 +448,6 @@ class TableHeader extends Component {
let currentIndex = target.getAttribute("data-line-index");
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){
// console.log("--onDragLeave----",target);
// console.log("--onDragLeave--this._dragCurrent--",this._dragCurrent);
// target.style = "";
target.setAttribute("style","");
// this._dragCurrent.style = "";
}

132
src/lib/newMultiSelect.js
View File

@ -1,133 +1,5 @@
import React, { Component } from "react";
import {ObjectAssign} from './util';
/**
* 参数: 过滤表头
* @param {*} Table
* @param {*} Checkbox
* @param {*} Popover
* @param {*} Icon
*/
import multiSelect from './multiSelect';
export default function newMultiSelect(Table, Checkbox) {
return class NewMultiSelect extends Component {
static defaultProps = {
prefixCls: "u-table-mult-select"
}
constructor(props) {
super(props);
let checkedAll = this.setChecked(props.data);
this.state = {
checkedAll,
data:ObjectAssign(props.data),
}
}
componentWillReceiveProps(nextProps){
if(this.props.data != nextProps.data){
this.setState({
data:ObjectAssign(nextProps.data),
checkedAll:this.setChecked(nextProps.data),
})
}
}
setChecked(data){
let allCheck = true;
if(data){
for (const da of data) {
if(!da._checked){
allCheck = false;
break;
}
}
}
return allCheck;
}
onAllCheckChange=()=>{
let {data,checkedAll} = this.state;
let selectList = [];
let check = checkedAll?false:true;
data.forEach(item => {
item._checked = check;
if(item._checked){
selectList.push(item);
}
});
this.setState({
checkedAll:check
});
this.props.getSelectedDataFunc(selectList);
}
handleClick=()=>{
}
onCheckboxChange = (text, record, index) => () => {
let {data} = this.state;
let selectList = [];
record._checked = record._checked?false:true;
let checkedAll = true;
for(let i=0;i<data.length;i++){
let item = data[i];
if(!item._checked || item._checked == false){
checkedAll = false;
break;
}
}
this.setState({
...this.state,
checkedAll
})
data.forEach((da)=>{
if(da._checked){
selectList.push(da);
}
})
this.props.getSelectedDataFunc(selectList,record,index);
};
getDefaultColumns=(columns)=>{
// let checkedAll = init?false:this.state.checkedAll;
let {checkedAll} = this.state;
let _defaultColumns =[{
title: (
<Checkbox
className="table-checkbox"
checked={checkedAll}
// indeterminate={indeterminate_bool && !this.state.checkedAll}
onChange={this.onAllCheckChange}
/>
),
key: "checkbox",
dataIndex: "checkbox",
fixed:"left",
width: 50,
render: (text, record, index) => {
let attr = {};
record._disabled?attr.disabled = record._disabled:"";
return <Checkbox
key={index}
className="table-checkbox"
{...attr}
checked={record._checked}
onClick={this.handleClick}
onChange={this.onCheckboxChange(text, record, index)}
></Checkbox>
}
}]
return _defaultColumns.concat(columns);
}
render() {
const {columns} = this.props;
const {data} = this.state;
return <Table {...this.props} columns={this.getDefaultColumns(columns)} data={data} />
}
};
return multiSelect(Table, Checkbox);
}