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

build/lib/multiSelect.js

@@ -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);
+};

build/lib/sort.js

@@ -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'];

build/lib/util.js

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

build/render/CheckboxRender.js

@@ -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"];

build/render/DateRender.js

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

build/render/InputRender.js

@@ -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"];

build/render/RadioRender.js

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

demo/demolist/Demo15.js

@@ -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: 'MonthPicker', key: 'MonthPicker', width: "10%",
-        title: "操作",
+      render:()=>{
-        dataIndex: "operation",
+         return(
-        key: "operation",
+           <MonthPicker
-        render: (text, record, index) => {
+              format={format2}
-          return this.state.dataSource.length > 1 ? (
+            
-            <Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
+              onSelect={this.onSelect}
-              <Icon type="uf-del" />
+    
-            </Popconfirm>
+              onChange={this.onChange}
-          ) : null;
+    
+              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 => {