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

publish 1.5.9

This commit is contained in:
jonyshi 2018-11-26 20:42:18 +08:00
parent c550eed127
commit adb21c5976
7 changed files with 269 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
build/FilterDropDown.js
View File

@ -8,6 +8,10 @@ var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _beeDropdown = require('bee-dropdown');
var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
@ -38,7 +42,9 @@ 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); }
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); } /**
* 过滤行功能内的下拉条件
*/
var Item = _beeMenus2["default"].Item;
@ -74,57 +80,124 @@ var FilterDropDown = function (_Component) {
}
};
_this.getMenu = function () {
var selectValue = _this.state.selectValue;
var filterDropdownType = _this.props.filterDropdownType;
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
return _i18n2["default"];
});
switch (filterDropdownType) {
case 'string':
return _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: _this.onSelectDropdown,
selectedKeys: selectValue
},
_react2["default"].createElement(
Item,
{ key: '2' },
locale['include']
),
_react2["default"].createElement(
Item,
{ key: '6' },
locale['exclusive']
),
_react2["default"].createElement(
Item,
{ key: '1' },
locale['equal']
),
_react2["default"].createElement(
Item,
{ key: '5' },
locale['unequal']
),
_react2["default"].createElement(
Item,
{ key: '7' },
locale['begin']
),
_react2["default"].createElement(
Item,
{ key: '3' },
locale['end']
)
);
case 'number':
return _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: _this.onSelectDropdown,
selectedKeys: selectValue
},
_react2["default"].createElement(
Item,
{ key: '1' },
locale['greater_than']
),
_react2["default"].createElement(
Item,
{ key: '2' },
locale['great_than_equal_to']
),
_react2["default"].createElement(
Item,
{ key: '3' },
locale['less_than']
),
_react2["default"].createElement(
Item,
{ key: '4' },
locale['less_than_equal_to']
),
_react2["default"].createElement(
Item,
{ key: '5' },
locale['be_equal_to']
),
_react2["default"].createElement(
Item,
{ key: '6' },
locale['not_equal_to']
)
);
default:
return _react2["default"].createElement('div', null);
}
};
_this.state = {
selectValue: []
selectValue: [] //选择的条件的值
};
return _this;
}
/**
* 点击下拉菜单
*
* @param {*} s 选中的selectRecord
*/
/**
* 清除事件
*
*/
/**
* 根据props来获得指定的Menu,分为String和Number
*
* @returns JSX Menu
*/
FilterDropDown.prototype.render = function render() {
var isShowCondition = this.props.isShowCondition;
var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () {
return _i18n2["default"];
});
var dropmenu = _react2["default"].createElement(
_beeMenus2["default"],
{
onSelect: this.onSelectDropdown,
selectedKeys: this.state.selectValue
},
_react2["default"].createElement(
Item,
{ key: '2' },
locale['include']
),
_react2["default"].createElement(
Item,
{ key: '6' },
locale['exclusive']
),
_react2["default"].createElement(
Item,
{ key: '1' },
locale['equal']
),
_react2["default"].createElement(
Item,
{ key: '5' },
locale['unequal']
),
_react2["default"].createElement(
Item,
{ key: '7' },
locale['begin']
),
_react2["default"].createElement(
Item,
{ key: '3' },
locale['end']
)
);
return _react2["default"].createElement(
'div',
{ className: 'filter-btns' },
@ -132,19 +205,26 @@ var FilterDropDown = function (_Component) {
_beeDropdown2["default"],
{
trigger: ['click'],
overlay: dropmenu,
overlay: this.getMenu(),
animation: 'slide-up'
},
_react2["default"].createElement(
_beeButton2["default"],
{ shape: 'border', style: { marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 } },
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0 }, type: 'uf-filter' })
{
shape: 'border',
style: { marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }
},
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858' }, type: 'uf-filter' })
)
),
_react2["default"].createElement(
_beeButton2["default"],
{ onClick: this.onClickClear, shape: 'border', style: { marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" } },
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' })
{
onClick: this.onClickClear,
shape: 'border',
style: { marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }
},
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' })
)
);
};
@ -152,5 +232,15 @@ var FilterDropDown = function (_Component) {
return FilterDropDown;
}(_react.Component);
FilterDropDown.propTypes = {
isShowCondition: _propTypes2["default"].string,
filterDropdownType: _propTypes2["default"].oneOf(['string', 'number'])
};
FilterDropDown.defaultProps = {
isShowCondition: 'show',
filterDropdownType: 'string'
};
exports["default"] = FilterDropDown;
module.exports = exports['default'];

58
build/FilterType.js
View File

@ -22,6 +22,10 @@ var _beeSelect = require('bee-select');
var _beeSelect2 = _interopRequireDefault(_beeSelect);
var _beeInputNumber = require('bee-input-number');
var _beeInputNumber2 = _interopRequireDefault(_beeInputNumber);
var _beeDatepicker = require('bee-datepicker');
var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker);
@ -61,6 +65,24 @@ var FilterType = function (_Component) {
onChange && onChange("");
};
_this.changeNumber = function (number) {
var onChange = _this.props.onChange;
onChange && onChange(number);
_this.setState({
number: number
});
};
_this.clearNumber = function () {
var onChange = _this.props.onChange;
onChange && onChange("");
_this.setState({
number: ""
});
};
_this.changeText = function (eve) {
_this.setState({
text: eve
@ -123,6 +145,7 @@ var FilterType = function (_Component) {
_this.renderControl = function (rendertype) {
var _this$props = _this.props,
filterDropdown = _this$props.filterDropdown,
filterDropdownType = _this$props.filterDropdownType,
className = _this$props.className,
onChange = _this$props.onChange,
onSelectDropdown = _this$props.onSelectDropdown,
@ -149,7 +172,26 @@ var FilterType = function (_Component) {
onSelectDropdown: onSelectDropdown,
onClickClear: _this.clearText,
isShowClear: _this.state.text,
isShowCondition: filterDropdown
isShowCondition: filterDropdown,
filterDropdownType: filterDropdownType
})
);
case 'number':
return _react2["default"].createElement(
'div',
{ className: clsPrefix + ' filter-wrap' },
_react2["default"].createElement(_beeInputNumber2["default"], {
className: className,
value: _this.state.number,
onChange: _this.changeNumber
}),
_react2["default"].createElement(_FilterDropDown2["default"], {
locale: locale,
onSelectDropdown: onSelectDropdown,
onClickClear: _this.clearNumber,
isShowClear: _this.state.number,
isShowCondition: filterDropdown,
filterDropdownType: filterDropdownType
})
);
case 'dropdown':
@ -198,7 +240,7 @@ var FilterType = function (_Component) {
})
);
default:
break;
return _react2["default"].createElement('div', null);
}
};
@ -206,12 +248,16 @@ var FilterType = function (_Component) {
text: "",
selectValue: "",
dateValue: "",
open: false
open: false,
number: 0
};
return _this;
}
//清除文本
//设置数值
//清除数值
//设置文本
@ -228,6 +274,12 @@ var FilterType = function (_Component) {
//设置日期值
//组件渲染
/**
* 根据不同的类型生成对应的组件类型包含一些参数的适应
*
* @param {*} rendertype 参数类型，包括['text','dropdown','date','daterange','number']
* @returns
*/
FilterType.prototype.render = function render() {

21
build/Table.css
View File

@ -326,10 +326,7 @@
.u-table-thead .filter-wrap .filter-btns {
min-width: 58px; }
.u-table-thead th {
background: #f7f7f7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
background: #f7f7f7; }
.u-table-thead th .bee-table-column-sorter {
position: relative;
margin-left: 4px;
@ -383,16 +380,26 @@
.u-table-thead-th-drag-gap {
height: 100%;
position: absolute;
right: 0px;
right: -10px;
top: 0;
background: #ccc;
width: 2px;
width: 20px;
box-sizing: border-box;
z-index: 1; }
.u-table-thead-th-drag-gap .online {
height: 100%;
width: 1px;
background: transparent;
margin: 0 auto; }
.u-table-thead-th-drag-gap .online-hover {
background: #000000; }
.u-table-thead-th .th-drag-gap {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover {
cursor: col-resize; }
.u-table-thead-th .th-drag-gap > div {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover > div {
background: #000000; }
.u-table-thead-th:last-child-drag-gap {
border: none; }
.u-table-filter-column-pop-cont {

13
build/Table.js
View File

@ -475,14 +475,15 @@ var Table = function (_Component) {
key: column.key,
children: "过滤渲染",
width: column.width,
filtertype: column.filterType,
dataindex: column.dataIndex,
datasource: _this2.props.data,
format: column.format,
filterdropdown: column.filterDropdown,
filtertype: column.filterType, //下拉的类型 包括['text','dropdown','date','daterange','number']
dataindex: column.dataIndex, //field
datasource: _this2.props.data, //需要单独拿到数据处理
format: column.format, //设置日期的格式
filterdropdown: column.filterDropdown, //是否显示 show hide
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
filterdropdowndata: column.filterDropdownData, //自定义数据格式
filterdropdownfocus: column.filterDropdownFocus //焦点触发函数回调
filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调
filterdropdowntype: column.filterDropdownType //下拉的类型分为 String,Number 默认是String
});
}
});

42
build/TableHeader.js
View File

@ -86,7 +86,9 @@ var TableHeader = function (_Component) {
if (_this.border || data.fixed) return;
var clsPrefix = _this.props.clsPrefix;
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
if (event.target.id != 'th-online') {
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
}
};
_this.ableOnMouseMove = function (event, data) {
@ -118,7 +120,9 @@ var TableHeader = function (_Component) {
if (_this.border) return;
var clsPrefix = _this.props.clsPrefix;
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
if (event.target.id != 'th-online') {
event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
}
};
_this.onMouseDown = function (event, data) {
@ -322,7 +326,20 @@ var TableHeader = function (_Component) {
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex))
// onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
, onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]["filterdropdown"]
filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//数值输入
case "number":
return _react2["default"].createElement(_FilterType2["default"], {
locale: locale,
rendertype: type,
clsPrefix: clsPrefix,
className: clsPrefix + " filter-text",
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex)),
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//下拉框选择
case "dropdown":
@ -351,7 +368,8 @@ var TableHeader = function (_Component) {
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]["filterdropdown"],
onFocus: rows[1][index]["filterdropdownfocus"]
onFocus: rows[1][index]["filterdropdownfocus"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
//日期
case "date":
@ -363,7 +381,8 @@ var TableHeader = function (_Component) {
format: rows[1][index]["format"] || "YYYY-MM-DD",
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]["filterdropdown"]
filterDropdown: rows[1][index]["filterdropdown"],
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
});
default:
//不匹配类型默认文本输入
@ -564,6 +583,7 @@ var TableHeader = function (_Component) {
thClassName += "" + fixedStyle;
if (!da.fixed) {
thLineObj = {
//----------------
onMouseMove: function onMouseMove(e) {
e.stopPropagation();_this2.onMouseMove(e, da);
},
@ -579,16 +599,20 @@ var TableHeader = function (_Component) {
onMouseOver: function onMouseOver(e) {
_this2.onMouseOver(e, da);
},
className: clsPrefix + "-thead-th-drag-gap "
className: clsPrefix + "-thead-th-drag-gap th-drag-gap"
};
}
return _react2["default"].createElement(
"th",
_extends({ key: Math.random() }, thAbleObj, thBorObj, { className: thClassName }),
da.children,
da.fixed ? "" : _react2["default"].createElement("div", _extends({ ref: function ref(el) {
return _this2.gap = el;
} }, thLineObj))
da.fixed ? "" : _react2["default"].createElement(
"div",
_extends({ ref: function ref(el) {
return _this2.gap = el;
} }, thLineObj),
_react2["default"].createElement("div", { id: "th-online", className: "online" })
)
);
} else {
thDefaultObj = _extends({}, da, {

22
build/i18n.js
View File

@ -9,6 +9,12 @@ module.exports = {
'unequal': '不等于',
'begin': '以开始',
'end': '以结尾',
'greater_than': '大于',
'great_than_equal_to': '大于等于',
'less_than': '小于',
'less_than_equal_to': '小于等于',
'be_equal_to': '等于',
'not_equal_to': '不等于',
'en-us': {
'resetSettings': 'reset settings',
'include': 'include',
@ -16,7 +22,13 @@ module.exports = {
'equal': 'equal',
'unequal': 'unequal',
'begin': 'begin',
'end': 'end'
'end': 'end',
'greater_than': 'greater than',
'great_than_equal_to': 'great than equal to',
'less_than': 'less than',
'less_than_equal_to': 'less than equal to',
'be_equal_to': 'be equal to',
'not_equal_to': 'not equal to'
},
'zh-tw': {
'resetSettings': '還原設置',
@ -25,6 +37,12 @@ module.exports = {
'equal': '等於',
'unequal': '不等於',
'begin': '以開始',
'end': '以結尾'
'end': '以結尾',
'greater_than': '大於',
'great_than_equal_to': '大於等於',
'less_than': '小於',
'less_than_equal to': '小於等於',
'be_equal_to': '等於',
'not_equal_to': '不等於'
}
};

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.5.8",
"version": "1.5.9",
"description": "Table ui component for react",
"keywords": [
"react",
@ -93,4 +93,4 @@
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
}
}