Merge branch 'master' of github.com:tinper-bee/bee-table

This commit is contained in:
jonyshi 2019-03-18 09:42:00 +08:00
commit c7f1418297
26 changed files with 2107 additions and 11542 deletions

View File

@ -1,10 +1,46 @@
<a name="2.0.2"></a>
## [2.0.2](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.2) (2019-03-02)
<a name="2.0.6"></a>
## [2.0.6](https://github.com/tinper-bee/bee-table/compare/v2.0.5...v2.0.6) (2019-03-15)
### Bug Fixes
* **行过滤、checkbox样式:** 1、行过滤点击已选的无效2、checkbox在Table中的样式 ([1a628a4](https://github.com/tinper-bee/bee-table/commit/1a628a4))
<a name="2.0.5"></a>
## [2.0.5](https://github.com/tinper-bee/bee-table/compare/v2.0.4...v2.0.5) (2019-03-14)
### Bug Fixes
* 参照场景中表格首次渲染最后一列没有撑开bug ([c705539](https://github.com/tinper-bee/bee-table/commit/c705539))
* **Table.js:** 参照场景中第一次加载表格不撑满问题 ([a9530a4](https://github.com/tinper-bee/bee-table/commit/a9530a4))
<a name="2.0.4"></a>
## [2.0.4](https://github.com/tinper-bee/bee-table/compare/v2.0.3...v2.0.4) (2019-03-07)
### Bug Fixes
* 含有右侧固定列场景中内容过少不需要滚动条bug ([37b9806](https://github.com/tinper-bee/bee-table/commit/37b9806))
<a name="2.0.3"></a>
## [2.0.3](https://github.com/tinper-bee/bee-table/compare/v2.0.0...v2.0.3) (2019-03-05)
<a name="2.0.0"></a>
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v2.0.0) (2019-03-01)
# [2.0.0](https://github.com/tinper-bee/bee-table/compare/v1.6.44...v2.0.0) (2019-03-01)
<a name="1.6.44"></a>
## [1.6.44](https://github.com/tinper-bee/bee-table/compare/v1.6.43...v1.6.44) (2019-02-26)
@ -299,7 +335,7 @@
<a name="1.5.1"></a>
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)

View File

@ -125,7 +125,7 @@ var FilterDropDown = function (_Component) {
return _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: _this.onSelectDropdown,
onClick: _this.onSelectDropdown,
selectedKeys: selectValue
},
filterDropdownIncludeKeys.map(function (item) {
@ -140,7 +140,7 @@ var FilterDropDown = function (_Component) {
return _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: _this.onSelectDropdown,
onClick: _this.onSelectDropdown,
selectedKeys: selectNumberValue
},
filterDropdownIncludeKeys.map(function (item) {
@ -160,7 +160,7 @@ var FilterDropDown = function (_Component) {
return _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: _this.onSelectDropdown,
onClick: _this.onSelectDropdown,
selectedKeys: selectValue
},
_react2["default"].createElement(
@ -198,7 +198,7 @@ var FilterDropDown = function (_Component) {
return _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: _this.onSelectDropdown,
onClick: _this.onSelectDropdown,
selectedKeys: selectNumberValue
},
_react2["default"].createElement(

View File

@ -179,7 +179,8 @@
border-collapse: collapse;
text-align: left; }
.u-table th {
font-weight: bold; }
font-weight: bold;
text-align: left; }
.u-table th[colspan] {
text-align: center; }
.u-table th ::last-child {
@ -187,19 +188,19 @@
.u-table td {
border-bottom: 1px solid rgb(233,233,233); }
.u-table td a {
color: rgb(245, 60, 50); }
color: #2196F3; }
.u-table td a:hover {
color: rgb(230, 0, 18); }
color: #1565c0; }
.u-table td a:active {
color: rgb(230, 0, 18); }
color: #1565c0; }
.u-table tr:hover td .uf-eye {
visibility: visible !important; }
.u-table tr tr a {
color: rgb(245, 60, 50); }
color: #2196F3; }
.u-table tr tr a:hover {
color: rgb(230, 0, 18); }
color: #1565c0; }
.u-table tr tr a:active {
color: rgb(230, 0, 18); }
color: #1565c0; }
.u-table tr.tr-row-hover {
background: rgb(235, 236, 240); }
.u-table th,
@ -361,8 +362,8 @@
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
/*
Introduced in IE 10.
*/
-ms-user-select: none;
user-select: none; }
@ -473,7 +474,8 @@
pointer-events: none; }
.u-table .u-checkbox {
height: 16px;
line-height: 16px; }
line-height: 16px;
margin: 0px; }
.u-table:focus {
outline: none;
@ -569,7 +571,8 @@
display: none; }
.editable-cell-input-wrapper .u-input-group .u-form-control {
height: 26px; }
height: 26px;
font-size: 12px; }
.editable-cell-text-wrapper {
padding: 5px 24px 5px 5px;

View File

@ -207,7 +207,7 @@ var Table = function (_Component) {
var rows = [].concat(_toConsumableArray(props.data));
_this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth);
_this.store = (0, _createStore2["default"])({ currentHoverKey: null });
_this.firstDid = true;
if (props.defaultExpandAllRows) {
for (var i = 0; i < rows.length; i++) {
var row = rows[i];

View File

@ -1,7 +1,7 @@
'use strict';
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; };
@ -36,137 +36,137 @@ var cloneDeep = require('lodash.clonedeep');
function dragColumn(Table) {
return function (_Component) {
_inherits(DragColumn, _Component);
return function (_Component) {
_inherits(DragColumn, _Component);
function DragColumn(props) {
_classCallCheck(this, DragColumn);
function DragColumn(props) {
_classCallCheck(this, DragColumn);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.setColumOrderByIndex = function (_column) {
_column.forEach(function (da, i) {
da.dragIndex = i;
da.drgHover = false;
});
return _column;
};
_this.onDrop = function (event, data) {
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
var sourceIndex = -1,
targetIndex = -1;
sourceIndex = columns.findIndex(function (da, i) {
return da.key == dragSource.key;
});
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// for (let index = 0; index < columns.length; index++) {
// const da = columns[index];
// if(da.key === dragSource.key){
// columns[index] = dragTargColum;
// }
// if(da.key === dragTarg.key){
// columns[index] = dragSourceColum;
// }
// }
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
_this.setState({
columns: cloneDeep(columns)
});
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}
};
_this.getTarget = function (evt) {
return evt.target || evt.srcElement;
};
_this.state = {
columns: _this.setColumOrderByIndex(props.columns)
};
return _this;
}
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.columns != this.props.columns) {
this.setState({
columns: this.setColumOrderByIndex(nextProps.columns)
});
}
};
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
return obj;
}
var resultData = {};
return this.recursion(obj, resultData);
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
}
recursion.toString = function () {
return _recursion.toString();
};
return recursion;
}(function (obj) {
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
for (key in obj) {
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
data[key] = recursion(obj[key]);
} else {
data[key] = obj[key];
}
}
return data;
_this.setColumOrderByIndex = function (_column) {
_column.forEach(function (da, i) {
da.dragIndex = i;
da.drgHover = false;
});
return _column;
};
DragColumn.prototype.render = function render() {
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
draggable = _props.draggable,
className = _props.className,
columns = _props.columns,
onDragStart = _props.onDragStart,
onDragEnter = _props.onDragEnter,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
_this.onDrop = function (event, data) {
var dragSource = data.dragSource,
dragTarg = data.dragTarg;
var columns = _this.state.columns;
var key = new Date().getTime();
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
className: className + ' u-table-drag-border',
onDragStart: this.onDragStart,
onDragOver: this.onDragOver,
onDrop: this.onDrop,
onDragEnter: this.onDragEnter,
draggable: draggable,
dragborder: dragborder
// dragborder={false}
, dragborderKey: key
}));
};
var sourceIndex = -1,
targetIndex = -1;
return DragColumn;
}(_react.Component);
sourceIndex = columns.findIndex(function (da, i) {
return da.key == dragSource.key;
});
targetIndex = columns.findIndex(function (da, i) {
return da.key == dragTarg.key;
});
// for (let index = 0; index < columns.length; index++) {
// const da = columns[index];
// if(da.key === dragSource.key){
// columns[index] = dragTargColum;
// }
// if(da.key === dragTarg.key){
// columns[index] = dragSourceColum;
// }
// }
// 向前移动
if (targetIndex < sourceIndex) {
targetIndex = targetIndex + 1;
}
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
_this.setState({
columns: cloneDeep(columns)
});
if (_this.props.onDrop) {
_this.props.onDrop(event, data, columns);
}
};
_this.getTarget = function (evt) {
return evt.target || evt.srcElement;
};
_this.state = {
columns: _this.setColumOrderByIndex(props.columns)
};
return _this;
}
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (nextProps.columns != this.props.columns) {
this.setState({
columns: this.setColumOrderByIndex(nextProps.columns)
});
}
};
DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
return obj;
}
var resultData = {};
return this.recursion(obj, resultData);
};
DragColumn.prototype.recursion = function (_recursion) {
function recursion(_x) {
return _recursion.apply(this, arguments);
}
recursion.toString = function () {
return _recursion.toString();
};
return recursion;
}(function (obj) {
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
for (key in obj) {
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
data[key] = recursion(obj[key]);
} else {
data[key] = obj[key];
}
}
return data;
});
DragColumn.prototype.render = function render() {
var _props = this.props,
data = _props.data,
dragborder = _props.dragborder,
draggable = _props.draggable,
className = _props.className,
columns = _props.columns,
onDragStart = _props.onDragStart,
onDragEnter = _props.onDragEnter,
onDragOver = _props.onDragOver,
onDrop = _props.onDrop,
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
var key = new Date().getTime();
return _react2["default"].createElement(Table, _extends({}, others, {
columns: this.state.columns,
data: data,
className: className + ' u-table-drag-border',
onDragStart: this.onDragStart,
onDragOver: this.onDragOver,
onDrop: this.onDrop,
onDragEnter: this.onDragEnter,
draggable: draggable,
dragborder: dragborder
// dragborder={false}
, dragborderKey: key
}));
};
return DragColumn;
}(_react.Component);
}
module.exports = exports['default'];

View File

@ -1,4 +1,4 @@
'use strict';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
@ -8,15 +8,11 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
exports["default"] = multiSelect;
var _react = require('react');
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _beeCheckbox = require('bee-checkbox');
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
var _util = require('./util');
var _util = require("./util");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@ -27,6 +23,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
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); }
// import Checkbox from 'bee-checkbox';
/**
* 参数: 过滤表头
@ -134,7 +132,8 @@ function multiSelect(Table, Checkbox) {
return NewMultiSelect;
}(_react.Component), _class.defaultProps = {
prefixCls: "u-table-mult-select"
prefixCls: "u-table-mult-select",
getSelectedDataFunc: function getSelectedDataFunc() {}
}, _initialiseProps = function _initialiseProps() {
var _this2 = this;
@ -218,7 +217,7 @@ function multiSelect(Table, Checkbox) {
var _defaultColumns = [{
title: _react2["default"].createElement(Checkbox, _extends({
className: 'table-checkbox'
className: "table-checkbox"
}, checkAttr, {
disabled: disabledCount == dataLength ? true : false,
onChange: _this2.onAllCheckChange
@ -232,7 +231,7 @@ function multiSelect(Table, Checkbox) {
record._disabled ? attr.disabled = record._disabled : "";
return _react2["default"].createElement(Checkbox, _extends({
key: index,
className: 'table-checkbox'
className: "table-checkbox"
}, attr, {
checked: record._checked,
onClick: _this2.handleClick,
@ -244,4 +243,4 @@ function multiSelect(Table, Checkbox) {
};
}, _temp;
}
module.exports = exports['default'];
module.exports = exports["default"];

View File

@ -1,4 +1,4 @@
'use strict';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
@ -8,15 +8,11 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
exports["default"] = newMultiSelect;
var _react = require('react');
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _beeCheckbox = require('bee-checkbox');
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
var _util = require('./util');
var _util = require("./util");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@ -27,6 +23,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
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); }
// import Checkbox from 'bee-checkbox';
/**
* 参数: 过滤表头
@ -166,7 +164,7 @@ function newMultiSelect(Table, Checkbox) {
var _defaultColumns = [{
title: _react2["default"].createElement(Checkbox, {
className: 'table-checkbox',
className: "table-checkbox",
checked: checkedAll
// indeterminate={indeterminate_bool && !this.state.checkedAll}
, onChange: _this2.onAllCheckChange
@ -180,7 +178,7 @@ function newMultiSelect(Table, Checkbox) {
record._disabled ? attr.disabled = record._disabled : "";
return _react2["default"].createElement(Checkbox, _extends({
key: index,
className: 'table-checkbox'
className: "table-checkbox"
}, attr, {
checked: record._checked,
onClick: _this2.handleClick,
@ -192,4 +190,4 @@ function newMultiSelect(Table, Checkbox) {
};
}, _temp;
}
module.exports = exports['default'];
module.exports = exports["default"];

View File

@ -1,7 +1,7 @@
'use strict';
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; };
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
*/
function sortBy(arr, prop, desc) {
var props = [],
ret = [],
i = 0,
len = arr.length;
if (typeof prop == 'string') {
for (; i < len; i++) {
var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
var props = [],
ret = [],
i = 0,
len = arr.length;
if (typeof prop == 'string') {
for (; i < len; i++) {
var oI = arr[i];
(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') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
} else {
throw '参数类型错误';
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
if (desc) ret.reverse();
return ret;
if (desc) ret.reverse();
return ret;
};
/**
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
* @param {} property
*/
function compare(property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
}
/**
@ -63,17 +63,17 @@ function compare(property) {
* @param {*} obj 要拷贝的对象
*/
function ObjectAssign(obj) {
var b = obj instanceof Array;
var tagObj = b ? [] : {};
if (b) {
//数组
obj.forEach(function (da) {
var _da = {};
_extends(_da, da);
tagObj.push(_da);
});
} else {
_extends(tagObj, obj);
}
return tagObj;
var b = obj instanceof Array;
var tagObj = b ? [] : {};
if (b) {
//数组
obj.forEach(function (da) {
var _da = {};
_extends(_da, da);
tagObj.push(_da);
});
} else {
_extends(tagObj, obj);
}
return tagObj;
}

View File

@ -1,25 +1,25 @@
@import "../node_modules/tinper-bee-core/scss/index.scss";
@import "../node_modules/bee-panel/src/Panel.scss";
@import "../node_modules/bee-layout/src/Layout.scss";
@import "../node_modules/bee-button/src/Button.scss";
@import "../node_modules/bee-transition/src/Transition.scss";
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
@import "../node_modules/bee-form-control/src/FormControl.scss";
@import "../node_modules/bee-pagination/src/Pagination.scss";
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
@import "../node_modules/bee-select/src/Select.scss";
@import "../node_modules/bee-form/src/Form.scss";
@import "../node_modules/bee-popover/src/Popover.scss";
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
@import "../node_modules/bee-message/build/Message.css";
@import "../node_modules/bee-dropdown/build/Dropdown.css";
@import "../node_modules/bee-input-number/build/InputNumber.css";
@import "../node_modules/bee-modal/build/Modal.css";
// @import "../node_modules/tinper-bee-core/scss/index.scss";
// @import "../node_modules/bee-panel/src/Panel.scss";
// @import "../node_modules/bee-layout/src/Layout.scss";
// @import "../node_modules/bee-button/src/Button.scss";
// @import "../node_modules/bee-transition/src/Transition.scss";
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
// @import "../node_modules/bee-form-control/src/FormControl.scss";
// @import "../node_modules/bee-pagination/src/Pagination.scss";
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
// @import "../node_modules/bee-select/src/Select.scss";
// @import "../node_modules/bee-form/src/Form.scss";
// @import "../node_modules/bee-popover/src/Popover.scss";
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
// @import "../node_modules/bee-message/build/Message.css";
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
// @import "../node_modules/bee-input-number/build/InputNumber.css";
// @import "../node_modules/bee-modal/build/Modal.css";
@import "../src/Table.scss";
//引入日期控件样式文件
@import "../node_modules/bee-datepicker/src/datepicker.scss";
// @import "../node_modules/bee-datepicker/src/datepicker.scss";
.selected{
background: rgb(227,242,253);

View File

@ -161,6 +161,7 @@ class Demo14 extends React.Component {
isclickTrigger={true}
value={text}
onChange={this.onSelectChange(index, "address")}
size="sm"
>
<Option value="jack">boyuzhou</Option>
<Option value="lucy">renhualiu</Option>

View File

@ -121,6 +121,7 @@ class Demo19 extends React.Component {
onChange={this.onSelectChange(index, "address")}
onFocus={this.handFocus}
onBlur={this.onBlur}
size="sm"
autofocus
>
<Option value="jack">boyuzhou</Option>

View File

@ -183,6 +183,7 @@ class Demo2 extends React.Component {
return (
<div>
<Button
colors="secondary"
className="editable-add-btn"
type="ghost"
onClick={this.handleAdd}

View File

@ -81,7 +81,7 @@ class Demo35 extends Component {
this.currentRecord = record;
}
getHoverContent=()=>{
return <div className="opt-btns"><Button colors="primary" size="sm" onClick={this.delFun}>删除</Button> </div>
return <div className="opt-btns"><Button size="sm" onClick={this.delFun}>删除</Button> </div>
}
render() {
return (

View File

@ -0,0 +1,11 @@
.opt-btns{
.u-button{
background-color: #505F79;
border-color: #505F79;
color: #fff;
&:hover, &:active{
background-color: #344563;
border-color: #344563;
}
}
}

File diff suppressed because one or more lines are too long

9801
dist/demo.css vendored

File diff suppressed because it is too large Load Diff

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

3020
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

@ -1,16 +1,22 @@
# Table
## 何时使用
表格是以结构化的方式来展示大量的信息最佳方法,使信息更易于阅读与理解。
表格轻易就能用简洁和易读的方式来组织数据。它们可用于保存和展示大量的数据,小量的信息,静态数据以及不断地变动的数据。
## 如何使用
```
import { Table } from 'tinper-bee';
or
import Table from 'bee-table';
import bee-table/build/Table.css;
```
## 代码演示
## 引入机制
import Table from "bee-table";
import 'bee-table/build/Table.css';
## API
### Table
@ -106,13 +112,268 @@ import 'bee-table/build/Table.css';
| onTableKeyDown | 触发table的所有快捷键 | function| -
| tabIndex | 设置焦点顺序 | number | 0
{% include "mixin.md"%}
## mixin
Table拓展功能方法。注拼接成复杂功能的table组件不能在render中定义需要像此例子声明在组件的外侧不然在操作state会导致功能出现异常
## 如何引用
需要单独的去引用相应的js文件目录在lib文件夹示例如下
```js
import multiSelect from "tinper-bee/lib/multiSelect.js";
```
### multiSelect
选中功能组件
<font color="#ccc">
#### <font color="#ccc">multiSelect 废弃部分的API</font>
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| multiSelect | 全选功能的配置对象,属性参见下面 | obj | {} |
| multiSelect.type | 全选功能的类型,多选或单选(暂时只支持多选) | string | checkbox |
| multiSelect.param | 通过设置该参数来设计获取的数据数组,默认返还所有数据 | string | '' |
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
| selectDisabled | 设置某一行数据无法被选中使用类似于rowClassName | Function(record, index):bool | 无 |
| selectedRow | 设置某一行数据是否被选中使用类似于rowClassName | Function(record, index):bool | 无 |
</font>
#### multiSelect 新增API
data 数据中新增参数
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- |
| _checked | 设置当前数据是否选中 | boolean | true/false |
| _disabled | 禁用当前选中数据 | boolean | true/false
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
{% include "rendertype.md"%}
#### 使用
```js
import multiSelect from "tinper-bee/lib/multiSelect.js";
import { Table, Checkbox } from 'tinper-bee';
const MultiSelectTable = multiSelect(Table, Checkbox);
```
### sort
排序功能
#### Column新增参数
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| sorter | 排序函数,可以自定义 | Function | 无 |
| sorterClick | 排序钩子函数| Function | (coloum,type) |
#### 使用
```js
import sort from "tinper-bee/lib/sort.js";
import { Table, Icon } from 'tinper-bee';
const SortTable = sort(Table, Icon);
```
### sum
合计功能
#### Column新增参数
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| sumCol | 该列设置为合计列,合计行中会显示合计数据 | boolean | false |
#### 使用
```js
import sum from "tinper-bee/lib/sum.js";
import { Table } from 'tinper-bee';
const SumTable = sum(Table);
```
### dragColumn
拖拽列功能
#### dragColumn新增参数
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------- | ---- |
| dragborder | 拖拽调整列宽度 | boolean | false |
| draggable | 拖拽交换列 | boolean | false |
| onDrop | 拖拽释放回调函数(交换列) | function | () => {} |
| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} |
### 使用注意
#### 使用
```js
import dragColumn from "tinper-bee/lib/dragColumn.js";
import { Table } from 'tinper-bee';
const DragColumnTable = dragColumn(Table);
```
### filterColumn
过滤功能
#### filterColumn新增参数
#### 使用
```js
import filterColumn from "tinper-bee/lib/filterColumn.js";
import { Table, Checkbox, Popover, Icon } from 'tinper-bee';
const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon);
```
## rendertype
在表格中提供了多种rendertype可以供选择比如下拉框输入框日期等
## 如何引用
需要单独的去引用相应的js文件目录在render文件夹示例如下
```js
import renderInput from "tinper-bee/lib/InputRender.js";
```
### InputRender
输入框类型render
#### 依赖的组件
该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ---------------------------------------- | ---------- | ------ |
| name | 该输入框获取数据时的key值该值不能设置重复且必填 | string | - |
| placeholder | 输入框的提示信息 | string | - |
| value | 输入框中的显示值 | string | 无 |
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
| onChange | 当值发生改变的时候触发的方法 | Function | 无 |
| format | 浏览态格式化类型Currency:货币数字; | string | 无 |
| formItemClassName | FormItem的class | string | - |
| mesClassName | 校验错误信息的class | string | - |
| isRequire | 是否必填 | bool | false |
| check | 验证的回调函数,参数两个,第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - |
| method | 校验方式change/blur | string | - |
| errorMessage | 错误提示信息 | dom/string | "校验失败" |
| htmlType | 数值类型,目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
| reg | 校验正则,注:设置 htmlType 后 reg 无效 | regExp | - |
#### 使用
```js
import renderInput from "tinper-bee/lib/InputRender.js";
import { Icon, Form , FormControl } from 'tinper-bee';
const InputRender = renderInput(Form, FormControl, Icon);
```
### DateRender
日期类型render
#### 依赖的组件
该render依赖于`moment`, `Datepicker`, `Icon`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| ----------------- | ---------------------------------------- | ---------- | ------ |
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
| type | 控制日期的显示格式DatePicker、MonthPicker或者WeekPicker暂时不支持RangePicker | string | "DatePicker" |
注:其他参数参见Datepicker组件参数配置
#### 使用
```js
import renderDate from "tinper-bee/lib/DateRender.js";
import Datepicker from "tinper-bee/lib/Datepicker";
import { Icon } from 'tinper-bee';
const DateRender = renderDate(Datepicker, Icon);
```
### SelectRender
下拉框类型render
#### 依赖的组件
该render依赖于`Icon`,`Select`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ---------------------------------------- | ------- | ----- |
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
| dataSource | 数据的键值对在表格浏览态的时候能显示真实的key值。比如`[{key:"张三",value:"01"}]` | array | - |
注:其他参数参见Select组件参数配置
#### 使用
```js
import renderSelect from "tinper-bee/lib/SelectRender.js";
import { Icon, Select } from 'tinper-bee';
const SelectRender = renderSelect(Select, Icon);
```
### CheckboxRender
复选框类型render
#### 依赖的组件
该render依赖于`Icon`,`Checkbox`
#### 配置
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ---------------------------------------- | ------- | ----- |
| onChange | 修改后触发回调函数 | function | () => {} |
| value | 设置是否选中值 | boolean | false |
注:其他参数参见Checkbox组件参数配置
#### 使用
```js
import renderCheckbox from "tinper-bee/lib/CheckboxRender.js";
import { Icon, Checkbox } from 'tinper-bee';
const CheckboxRender = renderCheckbox(Checkbox, Icon);
```
## 注意事项
- 如果使用了固定列请给固定的列设定固定宽度既width属性。
@ -121,3 +382,5 @@ import 'bee-table/build/Table.css';
> 当表格场景比较复杂时,可以使用[复杂表格ComplexGrid](http://bee.tinper.org/bee-complex-grid#bee-complex-grid)。ComplexGrid将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。
## 更新日志

View File

@ -5,6 +5,7 @@
<title>tinper-bee demo</title>
<link rel="stylesheet" href="./dist/demo.css">
<link rel="stylesheet" href="./demo/atom-one-dark.css">
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> -->
</head>
<body style="background: #eceff1">
@ -13,9 +14,9 @@
<script>
hljs.initHighlightingOnLoad();
</script>
<script src="./node_modules/console-polyfill/index.js"></script>
<script src="./node_modules/es5-shim/es5-shim.min.js"></script>
<script src="./node_modules/es5-shim/es5-sham.min.js"></script>
<script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
<script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react.development.js"></script>
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react-dom.development.js"></script>
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>

View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.0.5-beta.0",
"version": "2.0.6",
"description": "Table ui component for react",
"keywords": [
"react",
@ -95,4 +95,4 @@
"react-addons-test-utils": "^15.5.0",
"react-dom": "^16.6.3"
}
}
}

View File

@ -91,7 +91,7 @@ class FilterDropDown extends Component {
switch (filterDropdownType) {
case 'string':
return <Menu
onSelect={this.onSelectDropdown}
onClick={this.onSelectDropdown}
selectedKeys={selectValue}
>
{
@ -102,7 +102,7 @@ class FilterDropDown extends Component {
</Menu>
case 'number':
return <Menu
onSelect={this.onSelectDropdown}
onClick={this.onSelectDropdown}
selectedKeys={selectNumberValue}
>
{
@ -118,7 +118,7 @@ class FilterDropDown extends Component {
switch (filterDropdownType) {
case 'string':
return <Menu
onSelect={this.onSelectDropdown}
onClick={this.onSelectDropdown}
selectedKeys={selectValue}
>
<Item key="LIKE">{locale['include']}</Item>
@ -130,7 +130,7 @@ class FilterDropDown extends Component {
</Menu>
case 'number':
return <Menu
onSelect={this.onSelectDropdown}
onClick={this.onSelectDropdown}
selectedKeys={selectNumberValue}
>
<Item key="GT">{locale['greater_than']}</Item>

View File

@ -95,7 +95,7 @@ class Table extends Component {
let rows = [...props.data];
this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth);
this.store = createStore({ currentHoverKey: null });
this.firstDid = true;
if (props.defaultExpandAllRows) {
for (let i = 0; i < rows.length; i++) {
const row = rows[i];

View File

@ -45,6 +45,7 @@ $checkbox-height:16px;
th {
// background: $table-head-background-color;
font-weight: bold;
text-align: left;
// transition: background 0.3s ease;
&[colspan] {
text-align: center;
@ -57,12 +58,12 @@ $checkbox-height:16px;
td {
border-bottom: 1px solid $table-border-color;
a{
color: $brand-primary;
color: #2196F3;
&:hover{
color: $brand-primary-hover;
color: #1565c0;
}
&:active{
color: $brand-primary-active;
color: #1565c0;
}
}
}
@ -78,12 +79,12 @@ $checkbox-height:16px;
}
}
tr a{
color: $brand-primary;
color: #2196F3;
&:hover{
color: $brand-primary-hover;
color: #1565c0;
}
&:active{
color: $brand-primary-active;
color: #1565c0;
}
}
}
@ -521,6 +522,7 @@ $checkbox-height:16px;
.u-checkbox {
height: $checkbox-height;
line-height: $checkbox-height;
margin:0px;
}
}
.u-table:focus{
@ -641,6 +643,7 @@ $checkbox-height:16px;
}
.u-input-group .u-form-control{
height: 26px;
font-size: 12px;
}
}

View File

@ -13,7 +13,8 @@ export default function multiSelect(Table, Checkbox) {
return class NewMultiSelect extends Component {
static defaultProps = {
prefixCls: "u-table-mult-select"
prefixCls: "u-table-mult-select",
getSelectedDataFunc:()=>{}
}
constructor(props) {