mrcio-ui
Version:
438 lines (391 loc) • 23.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _page = require('../page/page');
var _page2 = _interopRequireDefault(_page);
var _scroll = require('../scroll/scroll');
var _scroll2 = _interopRequireDefault(_scroll);
var _styles = require('./styles');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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) : subClass.__proto__ = superClass; } //生产
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function (e) {
var r = new RegExp(this.S + e + this.S);
return r.test(this.S + this.join(this.S) + this.S);
};
var TableField = function (_Component) {
_inherits(TableField, _Component);
function TableField(props) {
_classCallCheck(this, TableField);
var _this = _possibleConstructorReturn(this, (TableField.__proto__ || Object.getPrototypeOf(TableField)).call(this, props));
_this.initScroll = function () {
_this.setState({ shouldUpdate: false });
};
_this.mouseOver = function (index, data) {
data[index].show = true;
_this.setState({
tableObj: data
});
};
_this.mouseOut = function (index, data) {
data[index].show = false;
_this.setState({
tableObj: data
});
};
_this.overColor = function () {
_this.setState({
bgColor: "red",
textColor: "white"
});
};
_this.outColor = function () {
_this.setState({
bgColor: "#f9f9f9",
textColor: "#888"
});
};
_this._overColor = function () {
_this.setState({
_bgColor: "red",
_textColor: "white"
});
};
_this._outColor = function () {
_this.setState({
_bgColor: "#f9f9f9",
_textColor: "#888"
});
};
_this.handleSequence = function (type, property, data, index, array) {
var sortObj = data.sort(function (prev, next) {
var a = prev[property];
var b = next[property];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = array[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var i = _step.value;
i.as = false;
i.de = false;
}
//升序 ascending
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
if (type == "ascending") {
array[index].as = true;
array[index].de = false;
_this.setState({
tableObj: array
});
return a.toString().localeCompare(b);
}
//降序descending
if (type == "descending") {
array[index].as = false;
array[index].de = true;
_this.setState({
tableObj: array
});
return b.toString().localeCompare(a);
}
// return function (obj1, obj2) {
// let a = obj1[property];
// let b = obj2[property];
// return type == "ascending" ? a.toString().localeCompare(b) :
// type == "descending" ? b.toString().localeCompare(a) : 0
// }
});
_this.setState({
tableData: sortObj
});
};
_this.state = {
styles: _styles.styleObj,
tableData: [],
tableObj: [],
shouldUpdate: true,
bgColor: '',
textColor: '',
_bgColor: '',
_textColor: '',
as: false, //是否点击升序
de: false //是否点击降序
};
return _this;
}
_createClass(TableField, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this.setState({
tableData: nextProps.tableData,
tableObj: nextProps.tableObj
});
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = this.props.tableObj[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var i = _step2.value;
i.show = false;
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
this.setState({
tableData: this.props.tableData,
tableObj: this.props.tableObj
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var props = _objectWithoutProperties(this.props, []),
state = _objectWithoutProperties(this.state, []);
var styles = state.styles,
tabWidth = 0;
for (var i = 0; i < state.tableObj.length; i++) {
tabWidth += parseInt(state.tableObj[i].fieldWidth);
}
return _react2.default.createElement(
'div',
{ style: styles.table },
_react2.default.createElement(
'div',
{ style: styles.tableBox },
_react2.default.createElement(
_scroll2.default,
{ shouldUpdate: state.shouldUpdate, initScroll: this.initScroll, width: props.width, maxHeight: props.maxHeight },
_react2.default.createElement(
'div',
{ style: styles.tableCont },
_react2.default.createElement(
'table',
{ style: styles.lockingBox },
_react2.default.createElement(
'thead',
{ style: styles.thead },
_react2.default.createElement(
'tr',
{ style: styles.lockTheadTr },
props.tableObj.map(function (value, index, array) {
return value.isLock ? _react2.default.createElement(
'td',
{ onMouseOver: value.isSequence ? _this2.mouseOver.bind(_this2, index, array) : null,
onMouseOut: value.isSequence ? _this2.mouseOut.bind(_this2, index, array) : null,
style: { cursor: value.isSequence ? "pointer" : null, width: value.fieldWidth }, key: index },
value.fieldText,
' ',
value.isSequence ? value.as ? " ↑" : value.de ? " ↓" : " ↑↓" : null,
_react2.default.createElement(
'div',
{ style: { cursor: "pointer", width: value.fieldWidth, position: "absolute", display: value.show ? "block" : "none", background: "#f9f9f9", boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)" } },
_react2.default.createElement(
'div',
{ onMouseOver: _this2.overColor,
onMouseOut: _this2.outColor,
style: { background: state.bgColor, color: state.textColor },
onClick: _this2.handleSequence.bind(_this2, "ascending", value.fieldName, state.tableData, index, array) },
'\u5347\u5E8F \u2191'
),
_react2.default.createElement(
'div',
{ onMouseOver: _this2._overColor,
onMouseOut: _this2._outColor,
style: { background: state._bgColor, color: state._textColor },
onClick: _this2.handleSequence.bind(_this2, "descending", value.fieldName, state.tableData, index, array) },
'\u964D\u5E8F \u2193'
)
)
) : null;
})
)
),
_react2.default.createElement(
'tbody',
{ style: styles.locktbody },
state.tableData.map(function (value, index) {
return _react2.default.createElement(
'tr',
{ key: index, style: index % 2 ? styles.tbodyTr1 : styles.tbodyTr2 },
props.tableObj.map(function (objname, index) {
return objname.isLock ? _react2.default.createElement(
'td',
{ title: value[objname.fieldName], style: {
width: objname.fieldWidth,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
display: "block"
},
key: index + 'gfy' },
value[objname.fieldName]
) : null;
})
);
})
)
),
_react2.default.createElement(
'table',
{ style: { width: tabWidth + "rem" } },
_react2.default.createElement(
'thead',
{ style: styles.thead },
_react2.default.createElement(
'tr',
{ style: styles.theadTr },
props.tableObj.map(function (value, index, array) {
return _react2.default.createElement(
'td',
{ onMouseOver: value.isSequence ? _this2.mouseOver.bind(_this2, index, array) : null, onMouseOut: value.isSequence ? _this2.mouseOut.bind(_this2, index, array) : null,
style: { cursor: value.isSequence ? "pointer" : null, width: value.fieldWidth, position: "relative" }, key: index },
value.fieldText,
value.isSequence ? value.as ? " ↑" : value.de ? " ↓" : " ↑↓" : null,
_react2.default.createElement(
'div',
{ style: { cursor: "pointer", width: value.fieldWidth, position: "absolute", display: value.show ? "block" : "none", background: "#f9f9f9", boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)" } },
_react2.default.createElement(
'div',
{
onMouseOver: _this2.overColor,
onMouseOut: _this2.outColor,
style: { background: state.bgColor, color: state.textColor },
onClick: _this2.handleSequence.bind(_this2, "ascending", value.fieldName, state.tableData, index, array) },
'\u5347\u5E8F \u2191'
),
_react2.default.createElement(
'div',
{
onMouseOver: _this2._overColor,
onMouseOut: _this2._outColor,
style: { background: state._bgColor, color: state._textColor },
onClick: _this2.handleSequence.bind(_this2, "descending", value.fieldName, state.tableData, index, array) },
'\u964D\u5E8F \u2193'
)
)
);
})
)
),
_react2.default.createElement(
'tbody',
{ style: styles.tbody },
state.tableData.length ? state.tableData.map(function (value, index) {
return _react2.default.createElement(
'tr',
{ key: index, style: index % 2 ? styles.tbodyTr1 : styles.tbodyTr2 },
props.tableObj.map(function (objname, index) {
var dom = [];
if (index == props.tableObj.length - 1 && objname.fieldName == "operating") {
dom.push(_react2.default.createElement(
'td',
{ title: value[objname.fieldName], key: index + 'gfy',
style: {
width: objname.fieldWidth,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
display: "block"
},
onClick: props.operatingFn ? props.operatingFn.bind(_this2, value) : function () {
return null;
}
},
_react2.default.createElement(
'div',
null,
'\u67E5\u770B'
)
));
} else {
dom.push(_react2.default.createElement(
'td',
{ title: value[objname.fieldName], key: index + 'gfy',
style: {
width: objname.fieldWidth,
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
display: "block"
} },
value[objname.fieldName]
));
}
return dom;
})
);
}) : _react2.default.createElement(
'tr',
{ style: styles.emptyBox },
_react2.default.createElement(
'td',
{ style: styles.loadBox },
this.props.loading ? _react2.default.createElement(
'div',
{ style: styles.loading },
'\u6B63\u5728\u62FC\u547D\u52A0\u8F7D\u6570\u636E\u4E2D'
) : _react2.default.createElement(
'label',
{ style: styles.emptyText },
'\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u6570\u636E'
)
)
)
)
)
)
),
props.hidePage ? null : _react2.default.createElement(
'div',
{ style: { width: props.width } },
_react2.default.createElement(_page2.default, { handlePage: props.handlePage,
totalNum: props.totalNum,
pageNumber: props.pageNumber,
pageSize: props.pageSize || 10
})
)
)
);
}
}]);
return TableField;
}(_react.Component);
exports.default = TableField;
//# sourceMappingURL=table.js.map