fix: Refs Must Have Owner Warning

This commit is contained in:
izbz wh 2019-05-05 14:07:34 +08:00
parent 89f3baa417
commit 90853f05e7
10 changed files with 4910 additions and 18633 deletions

View File

@ -347,15 +347,15 @@ var Table = function (_Component) {
} }
if (nextProps.columns && nextProps.columns !== this.props.columns) { if (nextProps.columns && nextProps.columns !== this.props.columns) {
this.columnManager.reset(nextProps.columns); this.columnManager.reset(nextProps.columns);
if (nextProps.columns.length !== this.props.columns.length && this.refs && this.refs.bodyTable) { if (nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable) {
this.scrollTop = this.refs.bodyTable.scrollTop; this.scrollTop = this.bodyTable.scrollTop;
} }
} else if (nextProps.children !== this.props.children) { } else if (nextProps.children !== this.props.children) {
this.columnManager.reset(null, nextProps.children); this.columnManager.reset(null, nextProps.children);
} }
//适配lazyload //适配lazyload
if (nextProps.scrollTop > -1) { if (nextProps.scrollTop > -1) {
// this.refs.bodyTable.scrollTop = nextProps.scrollTop; // this.bodyTable.scrollTop = nextProps.scrollTop;
this.scrollTop = nextProps.scrollTop; this.scrollTop = nextProps.scrollTop;
} }
if (!nextProps.originWidth) { if (!nextProps.originWidth) {
@ -382,7 +382,7 @@ var Table = function (_Component) {
if (this.scrollTop > -1) { if (this.scrollTop > -1) {
this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop); this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop); this.refs.fixedColumnsBodyRight && (this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
this.refs.bodyTable.scrollTop = this.scrollTop; this.bodyTable.scrollTop = this.scrollTop;
this.scrollTop = -1; this.scrollTop = -1;
} }
if (prevProps.data.length === 0 || this.props.data.length === 0) { if (prevProps.data.length === 0 || this.props.data.length === 0) {
@ -444,11 +444,11 @@ var Table = function (_Component) {
var props = this.props; var props = this.props;
var y = props.scroll && props.scroll.y; var y = props.scroll && props.scroll.y;
if (y) { if (y) {
var bodyH = this.refs.bodyTable.clientHeight; var bodyH = this.bodyTable.clientHeight;
var bodyContentH = this.refs.bodyTable.querySelector('table').clientHeight; var bodyContentH = this.bodyTable.querySelector('table').clientHeight;
var rightBodyTable = this.refs.fixedColumnsBodyRight; var rightBodyTable = this.refs.fixedColumnsBodyRight;
var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll'; var overflowy = bodyContentH <= bodyH ? 'auto' : 'scroll';
this.refs.bodyTable.style.overflowY = overflowy; this.bodyTable.style.overflowY = overflowy;
this.refs.headTable.style.overflowY = overflowy; this.refs.headTable.style.overflowY = overflowy;
rightBodyTable && (rightBodyTable.style.overflowY = overflowy); rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
} }
@ -1077,7 +1077,9 @@ var Table = function (_Component) {
{ {
className: clsPrefix + '-body', className: clsPrefix + '-body',
style: bodyStyle, style: bodyStyle,
ref: 'bodyTable', ref: function ref(el) {
_this4.bodyTable = el;
},
onMouseOver: this.detectScrollTarget, onMouseOver: this.detectScrollTarget,
onTouchStart: this.detectScrollTarget, onTouchStart: this.detectScrollTarget,
onScroll: this.handleBodyScroll, onScroll: this.handleBodyScroll,
@ -1191,8 +1193,8 @@ var Table = function (_Component) {
columns = _props7.columns, columns = _props7.columns,
heightConsistent = _props7.heightConsistent; heightConsistent = _props7.heightConsistent;
var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead'); var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || []; var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || []; var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || []; var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) { var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
@ -1237,8 +1239,8 @@ var Table = function (_Component) {
if (this.refs.headTable) { if (this.refs.headTable) {
this.refs.headTable.scrollLeft = 0; this.refs.headTable.scrollLeft = 0;
} }
if (this.refs.bodyTable) { if (this.bodyTable) {
this.refs.bodyTable.scrollLeft = 0; this.bodyTable.scrollLeft = 0;
} }
}; };

View File

@ -106,9 +106,9 @@ function sum(Table) {
return _this; return _this;
} }
/** /**
* 获取当前的表格类型 * 获取当前的表格类型
* *
*/ */

View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
value: true 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 _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; };
@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
exports.sortBy = sortBy; exports.sortBy = sortBy;
exports.compare = compare; exports.compare = compare;
exports.ObjectAssign = ObjectAssign; exports.ObjectAssign = ObjectAssign;
/* /*
* 快速排序按某个属性或按获取排序依据的函数来排序. * 快速排序按某个属性或按获取排序依据的函数来排序.
* @method soryBy * @method soryBy
* @static * @static
* @param {array} arr 待处理数组 * @param {array} arr 待处理数组
* @param {string|function} prop 排序依据属性获取 * @param {string|function} prop 排序依据属性获取
* @param {boolean} desc 降序 * @param {boolean} desc 降序
* @return {array} 返回排序后的新数组 * @return {array} 返回排序后的新数组
*/ */
function sortBy(arr, prop, desc) { function sortBy(arr, prop, desc) {
var props = [], var props = [],
ret = [], ret = [],
i = 0, i = 0,
len = arr.length; len = arr.length;
if (typeof prop == 'string') { if (typeof prop == 'string') {
for (; i < len; i++) { for (; i < len; i++) {
var oI = arr[i]; var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI; (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
}
} else if (typeof prop == 'function') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
}
} else {
throw '参数类型错误';
} }
} else if (typeof prop == 'function') { props.sort();
for (; i < len; i++) { for (i = 0; i < len; i++) {
var _oI = arr[i]; ret[i] = props[i]._obj;
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
} }
} else { if (desc) ret.reverse();
throw '参数类型错误'; return ret;
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
if (desc) ret.reverse();
return ret;
}; };
/** /**
* 数组对象排序 * 数组对象排序
* console.log(arr.sort(compare('age'))) * console.log(arr.sort(compare('age')))
* @param {} property * @param {} property
*/ */
function compare(property) { function compare(property) {
return function (a, b) { return function (a, b) {
var value1 = a[property]; var value1 = a[property];
var value2 = b[property]; var value2 = b[property];
return value1 - value2; return value1 - value2;
}; };
} }
/** /**
* 简单数组数据对象拷贝 * 简单数组数据对象拷贝
* @param {*} obj 要拷贝的对象 * @param {*} obj 要拷贝的对象
*/ */
function ObjectAssign(obj) { function ObjectAssign(obj) {
var b = obj instanceof Array; var b = obj instanceof Array;
var tagObj = b ? [] : {}; var tagObj = b ? [] : {};
if (b) { if (b) {
//数组 //数组
obj.forEach(function (da) { obj.forEach(function (da) {
var _da = {}; var _da = {};
_extends(_da, da); _extends(_da, da);
tagObj.push(_da); tagObj.push(_da);
}); });
} else { } else {
_extends(tagObj, obj); _extends(tagObj, obj);
} }
return tagObj; return tagObj;
} }

View File

@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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); } 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); }
/** /**
* 渲染checkbox * 渲染checkbox
* @param Checkbox * @param Checkbox
* @param Icon * @param Icon
* @returns {CheckboxRender} * @returns {CheckboxRender}
*/ */
function renderCheckbox(Checkbox, Icon) { function renderCheckbox(Checkbox, Icon) {
return function (_Component) { return function (_Component) {

View File

@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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); } 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 Form * @param Form
* @param Input * @param Input
* @param Icon * @param Icon
* @returns {InputRender} * @returns {InputRender}
*/ */
function renderInput(Form, Input, Icon) { function renderInput(Form, Input, Icon) {
var _class, _temp2; var _class, _temp2;

View File

@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
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); } 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 Select * @param Select
* @param Icon * @param Icon
* @returns {SelectRender} * @returns {SelectRender}
*/ */
function renderSelect(Select, Icon) { function renderSelect(Select, Icon) {
var _class, _temp2; var _class, _temp2;

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

23341
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -184,15 +184,15 @@ class Table extends Component {
} }
if (nextProps.columns && nextProps.columns !== this.props.columns) { if (nextProps.columns && nextProps.columns !== this.props.columns) {
this.columnManager.reset(nextProps.columns); this.columnManager.reset(nextProps.columns);
if(nextProps.columns.length !== this.props.columns.length && this.refs && this.refs.bodyTable){ if(nextProps.columns.length !== this.props.columns.length && this.refs && this.bodyTable){
this.scrollTop = this.refs.bodyTable.scrollTop; this.scrollTop = this.bodyTable.scrollTop;
} }
} else if (nextProps.children !== this.props.children) { } else if (nextProps.children !== this.props.children) {
this.columnManager.reset(null, nextProps.children); this.columnManager.reset(null, nextProps.children);
} }
//适配lazyload //适配lazyload
if(nextProps.scrollTop > -1){ if(nextProps.scrollTop > -1){
// this.refs.bodyTable.scrollTop = nextProps.scrollTop; // this.bodyTable.scrollTop = nextProps.scrollTop;
this.scrollTop = nextProps.scrollTop; this.scrollTop = nextProps.scrollTop;
} }
if (!nextProps.originWidth) { if (!nextProps.originWidth) {
@ -220,7 +220,7 @@ class Table extends Component {
if(this.scrollTop > -1){ if(this.scrollTop > -1){
this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop); this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
this.refs.fixedColumnsBodyRight && ( this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop); this.refs.fixedColumnsBodyRight && ( this.refs.fixedColumnsBodyRight.scrollTop = this.scrollTop);
this.refs.bodyTable.scrollTop = this.scrollTop; this.bodyTable.scrollTop = this.scrollTop;
this.scrollTop = -1; this.scrollTop = -1;
} }
if (prevProps.data.length === 0 || this.props.data.length === 0 ) { if (prevProps.data.length === 0 || this.props.data.length === 0 ) {
@ -300,11 +300,11 @@ class Table extends Component {
const props = this.props; const props = this.props;
const y = props.scroll && props.scroll.y; const y = props.scroll && props.scroll.y;
if(y){ if(y){
const bodyH = this.refs.bodyTable.clientHeight; const bodyH = this.bodyTable.clientHeight;
const bodyContentH = this.refs.bodyTable.querySelector('table').clientHeight; const bodyContentH = this.bodyTable.querySelector('table').clientHeight;
const rightBodyTable = this.refs.fixedColumnsBodyRight; const rightBodyTable = this.refs.fixedColumnsBodyRight;
const overflowy = bodyContentH <= bodyH ? 'auto':'scroll'; const overflowy = bodyContentH <= bodyH ? 'auto':'scroll';
this.refs.bodyTable.style.overflowY = overflowy; this.bodyTable.style.overflowY = overflowy;
this.refs.headTable.style.overflowY = overflowy; this.refs.headTable.style.overflowY = overflowy;
rightBodyTable && (rightBodyTable.style.overflowY = overflowy); rightBodyTable && (rightBodyTable.style.overflowY = overflowy);
@ -927,7 +927,7 @@ class Table extends Component {
<div <div
className={`${clsPrefix}-body`} className={`${clsPrefix}-body`}
style={bodyStyle} style={bodyStyle}
ref="bodyTable" ref={(el)=>{this.bodyTable = el}}
onMouseOver={this.detectScrollTarget} onMouseOver={this.detectScrollTarget}
onTouchStart={this.detectScrollTarget} onTouchStart={this.detectScrollTarget}
onScroll={this.handleBodyScroll} onScroll={this.handleBodyScroll}
@ -1020,8 +1020,8 @@ class Table extends Component {
const { clsPrefix, height, headerHeight,columns,heightConsistent } = this.props; const { clsPrefix, height, headerHeight,columns,heightConsistent } = this.props;
const headRows = this.refs.headTable ? const headRows = this.refs.headTable ?
this.refs.headTable.querySelectorAll('thead') : this.refs.headTable.querySelectorAll('thead') :
this.refs.bodyTable.querySelectorAll('thead'); this.bodyTable.querySelectorAll('thead');
const bodyRows = this.refs.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || []; const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || []; const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || []; const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
const fixedColumnsHeadRowsHeight = [].map.call( const fixedColumnsHeadRowsHeight = [].map.call(
@ -1069,8 +1069,8 @@ class Table extends Component {
if (this.refs.headTable) { if (this.refs.headTable) {
this.refs.headTable.scrollLeft = 0; this.refs.headTable.scrollLeft = 0;
} }
if (this.refs.bodyTable) { if (this.bodyTable) {
this.refs.bodyTable.scrollLeft = 0; this.bodyTable.scrollLeft = 0;
} }
} }