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

表格示例中添加各类日期组件

This commit is contained in:
zhanghy7 2017-09-25 15:36:23 +08:00
parent be65e8699a
commit 63e5afdb78
9 changed files with 601 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
build/lib/multiSelect.js Normal file
View File

@ -0,0 +1,175 @@
"use strict";
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 _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _beeCheckbox = require("bee-checkbox");
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
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); }
/**
* multiSelect={
* type--默认值为checkbox
* param--可以设置返回的选中的数据属性；默认值：null；
* }
* getSelectedDataFunc--function，能获取到选中的数据
* 使用全选时得注意，data中的key值一定要是唯一值
*/
module.exports = function multiSelect(Table) {
Array.prototype.indexOf = function (val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function (val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
return function (_Component) {
_inherits(BookLoader, _Component);
function BookLoader(props) {
_classCallCheck(this, BookLoader);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.onAllCheckChange = function () {
var self = _this;
var listData = self.state.data.concat();
var checkedObj = _extends({}, self.state.checkedObj);
var data = self.props.data;
var selIds = [];
var id = self.props.multiSelect.param;
for (var i = 0; i < data.length; i++) {
checkedObj[data[i]["key"]] = !self.state.checkedAll;
}
if (self.state.checkedAll) {
selIds = [];
} else {
for (var i = 0; i < listData.length; i++) {
if (id) {
selIds[i] = listData[i][id];
} else {
selIds[i] = listData[i];
}
}
}
self.setState({
checkedAll: !self.state.checkedAll,
checkedObj: checkedObj,
selIds: selIds
});
self.props.getSelectedDataFunc(selIds);
};
_this.onCheckboxChange = function (text, record, index) {
var self = _this;
var allFlag = false;
var selIds = self.state.selIds;
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
var checkedObj = _extends({}, self.state.checkedObj);
var checkedArray = Object.keys(checkedObj);
var getSelectedDataFunc = self.props.getSelectedDataFunc;
if (checkedObj[record["key"]]) {
selIds.remove(id);
} else {
selIds.push(id);
}
checkedObj[record["key"]] = !checkedObj[record["key"]];
for (var i = 0; i < checkedArray.length; i++) {
if (!checkedObj[checkedArray[i]]) {
allFlag = false;
break;
} else {
allFlag = true;
}
}
self.setState({
checkedAll: allFlag,
checkedObj: checkedObj,
selIds: selIds
});
if (typeof getSelectedDataFunc === 'function') {
getSelectedDataFunc(selIds);
}
};
_this.state = {
checkedAll: false,
checkedObj: {},
selIds: [],
data: _this.props.data
};
return _this;
}
BookLoader.prototype.renderColumnsMultiSelect = function renderColumnsMultiSelect(columns) {
var _this2 = this;
var data = this.state.data;
var checkedObj = _extends({}, this.state.checkedObj);
var checkedArray = Object.keys(checkedObj);
var multiSelect = this.props.multiSelect;
var select_column = {};
var indeterminate_bool = false;
if (!multiSelect || !multiSelect.type) {
multiSelect = _extends({}, multiSelect, { type: "checkbox" });
}
if (multiSelect && multiSelect.type === "checkbox") {
var i = checkedArray.length;
while (i--) {
if (checkedObj[checkedArray[i]]) {
indeterminate_bool = true;
break;
}
}
var defaultColumns = [{
title: _react2["default"].createElement(_beeCheckbox2["default"], {
className: "table-checkbox",
checked: this.state.checkedAll,
indeterminate: indeterminate_bool && !this.state.checkedAll,
onChange: this.onAllCheckChange
}),
key: "checkbox",
dataIndex: "checkbox",
width: "5%",
render: function render(text, record, index) {
return _react2["default"].createElement(_beeCheckbox2["default"], {
className: "table-checkbox",
checked: checkedObj[record.key],
onChange: _this2.onCheckboxChange.bind(_this2, text, record, index)
});
}
}];
columns = defaultColumns.concat(columns);
}
return columns;
};
BookLoader.prototype.render = function render() {
var columns = this.renderColumnsMultiSelect(this.props.columns).concat();
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns }));
};
return BookLoader;
}(_react.Component);
};

147
build/lib/sort.js Normal file
View File

@ -0,0 +1,147 @@
'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"] = sort;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _beeIcon = require('bee-icon');
var _beeIcon2 = _interopRequireDefault(_beeIcon);
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); }
/**
* 参数：prefixCls，默认bee-table,用于设置图标的样式
* @param {*} Table
*/
function sort(Table) {
return function (_Component) {
_inherits(Demo11, _Component);
function Demo11(props) {
_classCallCheck(this, Demo11);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.toggleSortOrder = function (order, column) {
var _this$state = _this.state,
sortOrder = _this$state.sortOrder,
data = _this$state.data,
oldData = _this$state.oldData;
var ascend_sort = function ascend_sort(key) {
return function (a, b) {
return a.key - b.key;
};
};
var descend_sort = function descend_sort(key) {
return function (a, b) {
return b.key - a.key;
};
};
if (sortOrder === order) {
// 切换为未排序状态
order = "";
}
if (!oldData) {
oldData = data.concat();
}
if (order === "ascend") {
data = data.sort(function (a, b) {
return column.sorter(a, b);
});
} else if (order === "descend") {
data = data.sort(function (a, b) {
return column.sorter(b, a);
});
} else {
data = oldData.concat();
}
_this.setState({
sortOrder: order,
data: data,
oldData: oldData
});
};
_this.state = {
sortOrder: "",
data: _this.props.data
};
return _this;
}
Demo11.prototype.renderColumnsDropdown = function renderColumnsDropdown(columns) {
var _this2 = this;
var sortOrder = this.state.sortOrder;
var prefixCls = this.props.prefixCls || 'bee-table';
return columns.map(function (originColumn) {
var column = _extends({}, originColumn);
var sortButton = void 0;
if (column.sorter) {
var isAscend = sortOrder === "ascend";
var isDescend = sortOrder === "descend";
sortButton = _react2["default"].createElement(
'div',
{ className: prefixCls + '-column-sorter' },
_react2["default"].createElement(
'span',
{
className: prefixCls + '-column-sorter-up ' + (isAscend ? "on" : "off"),
title: '\u2191',
onClick: function onClick() {
return _this2.toggleSortOrder("ascend", column);
}
},
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-triangle-up' })
),
_react2["default"].createElement(
'span',
{
className: prefixCls + '-column-sorter-down ' + (isDescend ? "on" : "off"),
title: '\u2193',
onClick: function onClick() {
return _this2.toggleSortOrder("descend", column);
}
},
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-triangle-down' })
)
);
}
column.title = _react2["default"].createElement(
'span',
null,
column.title,
sortButton
);
return column;
});
};
Demo11.prototype.render = function render() {
var columns = this.renderColumnsDropdown(this.props.columns).concat();
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data }));
};
return Demo11;
}(_react.Component);
}
module.exports = exports['default'];

1
build/lib/util.js Normal file
View File

@ -0,0 +1 @@
"use strict";

104
build/render/CheckboxRender.js Normal file
View File

@ -0,0 +1,104 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _beeIcon = require("bee-icon");
var _beeIcon2 = _interopRequireDefault(_beeIcon);
var _beeCheckbox = require("bee-checkbox");
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
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); }
var CheckboxRender = function (_Component) {
_inherits(CheckboxRender, _Component);
function CheckboxRender() {
var _temp, _this, _ret;
_classCallCheck(this, CheckboxRender);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
value: _this.props.value,
editable: false
}, _this.handleChange = function (e) {
var value = e.target.value;
_this.setState({ value: value });
}, _this.check = function () {
_this.setState({ editable: false });
if (_this.props.onChange) {
_this.props.onChange(_this.state.value);
}
}, _this.edit = function () {
_this.setState({ editable: true });
}, _this.handleKeydown = function (event) {
console.log(event.keyCode);
if (event.keyCode == 13) {
_this.check();
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
CheckboxRender.prototype.render = function render() {
var _state = this.state,
value = _state.value,
editable = _state.editable;
var isclickTrigger = this.props.isclickTrigger;
var cellContent = "";
if (editable) {
cellContent = _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeCheckbox2["default"], {
onChange: this.handleChange,
onKeyDown: this.handleKeydown,
onBlur: this.check,
autoFocus: true,
value: value
})
);
} else {
cellContent = _react2["default"].createElement(
"div",
{ className: "editable-cell-text-wrapper" },
value || " ",
_react2["default"].createElement(_beeIcon2["default"], {
type: "uf-pencil",
className: "editable-cell-icon",
onClick: this.edit
})
);
}
return _react2["default"].createElement(
"div",
{ className: "editable-cell" },
cellContent
);
};
return CheckboxRender;
}(_react.Component);
exports["default"] = CheckboxRender;
module.exports = exports["default"];

1
build/render/DateRender.js Normal file
View File

@ -0,0 +1 @@
"use strict";

121
build/render/InputRender.js Normal file
View File

@ -0,0 +1,121 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _beeIcon = require("bee-icon");
var _beeIcon2 = _interopRequireDefault(_beeIcon);
var _beeFormControl = require("bee-form-control");
var _beeFormControl2 = _interopRequireDefault(_beeFormControl);
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); }
var InputRender = function (_Component) {
_inherits(InputRender, _Component);
function InputRender() {
var _temp, _this, _ret;
_classCallCheck(this, InputRender);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
value: _this.props.value,
editable: false
}, _this.handleChange = function (e) {
var value = e.target.value;
_this.setState({ value: value });
}, _this.check = function () {
_this.setState({ editable: false });
if (_this.props.onChange) {
_this.props.onChange(_this.state.value);
}
}, _this.edit = function () {
_this.setState({ editable: true });
}, _this.handleKeydown = function (event) {
console.log(event.keyCode);
if (event.keyCode == 13) {
_this.check();
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
InputRender.prototype.render = function render() {
var _state = this.state,
value = _state.value,
editable = _state.editable;
var isclickTrigger = this.props.isclickTrigger;
var cellContent = "";
if (editable) {
cellContent = isclickTrigger ? _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeFormControl2["default"], {
onChange: this.handleChange,
onKeyDown: this.handleKeydown,
onBlur: this.check,
autoFocus: true,
value: value
})
) : _react2["default"].createElement(
"div",
{ className: "editable-cell-input-wrapper" },
_react2["default"].createElement(_beeFormControl2["default"], {
value: value,
onChange: this.handleChange,
onKeyDown: this.handleKeydown
}),
_react2["default"].createElement(_beeIcon2["default"], {
type: "uf-correct",
className: "editable-cell-icon-check",
onClick: this.check
})
);
} else {
cellContent = isclickTrigger ? _react2["default"].createElement(
"div",
{ className: "editable-cell-text-wrapper", onClick: this.edit },
value || " "
) : _react2["default"].createElement(
"div",
{ className: "editable-cell-text-wrapper" },
value || " ",
_react2["default"].createElement(_beeIcon2["default"], {
type: "uf-pencil",
className: "editable-cell-icon",
onClick: this.edit
})
);
}
return _react2["default"].createElement(
"div",
{ className: "editable-cell" },
cellContent
);
};
return InputRender;
}(_react.Component);
exports["default"] = InputRender;
module.exports = exports["default"];

1
build/render/RadioRender.js Normal file
View File

@ -0,0 +1 @@
"use strict";

63
demo/demolist/Demo15.js
View File

@ -18,12 +18,15 @@ import InputRender from "../../src/render/InputRender.js";
//日期控件引入
import DatePicker from 'bee-datepicker';
import MonthPicker,{ WeekPicker, RangePicker } from 'bee-datepicker';
import zhCN from 'rc-calendar/lib/locale/zh_CN';
import enUS from 'rc-calendar/lib/locale/en_US';
const format = 'YYYY-MM-DD';
const format2 = 'YYYY-MM';
const dateInputPlaceholder = '选择日期';
const dateInputPlaceholder2 = '选择年月';
class Demo15 extends React.Component {
constructor(props) {
@ -62,7 +65,7 @@ class Demo15 extends React.Component {
title: "姓名",
dataIndex: "name",
key: "name",
width: "30%",
width: "10%",
render: (text, record, index) => (
<InputRender
value={text}
@ -75,6 +78,7 @@ class Demo15 extends React.Component {
title: "年龄",
dataIndex: "age",
key: "age",
width: "10%",
render: (text, record, index) => (
<Checkbox
checked={record.age}
@ -86,11 +90,12 @@ class Demo15 extends React.Component {
title: "你懂的",
dataIndex: "address",
key: "address",
width: "10%",
render: (text, record, index) => {
return (
<Select
defaultValue="lucy"
style={{ width: 200, marginRight: 6 }}
style={{ width: 100, marginRight: 6 }}
onChange={this.handleChange}
>
<Option value="jack">boyuzhou</Option>
@ -103,7 +108,7 @@ class Demo15 extends React.Component {
);
}
},
{ title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: 200,
{ title: '日期', dataIndex: 'datepicker', key: 'datepicker', width: "10%",
render:()=>{
return(
<DatePicker
@ -120,18 +125,50 @@ class Demo15 extends React.Component {
)
}
},
{
title: "操作",
dataIndex: "operation",
key: "operation",
render: (text, record, index) => {
return this.state.dataSource.length > 1 ? (
<Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
<Icon type="uf-del" />
</Popconfirm>
) : null;
{ title: '年月', dataIndex: 'MonthPicker', key: 'MonthPicker', width: "10%",
render:()=>{
return(
<MonthPicker
format={format2}
onSelect={this.onSelect}
onChange={this.onChange}
locale={zhCN}
placeholder = {dateInputPlaceholder2}>
</MonthPicker>
)
}
},
{ title: '周', dataIndex: 'WeekPicker', key: 'WeekPicker', width: "10%",
render:()=>{
return(
<WeekPicker placeholder="选择周"/>
)
}
},
{ title: '日期范围', dataIndex: 'RangePicker', key: 'RangePicker', width: "10%",
render:()=>{
return(
<RangePicker
format={format}
onSelect={this.onSelect}
onChange={this.onChange}
locale={zhCN}
placeholder={'选择年月'}
/>
)
}
}
];
}
handleChange = value => {

2
demo/index.js
View File

File diff suppressed because one or more lines are too long