dh-c/dist/datasheet/datasheet.js

The front-end development engineers jimberton gulp react component

'use strict';

exports.__esModule = 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; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _row = require('./row');

var _row2 = _interopRequireDefault(_row);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// import update from 'react/lib/update';


function buildArray() {
  var number = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

  var _array = [];
  for (var index = 0; index < number; index++) {
    _array.push({});
  }
  return _array;
}

var ROW_HEIGHT = 33; //默认行高
var PAGE_TOTAL = 50;

var Datasheet = function (_React$Component) {
  _inherits(Datasheet, _React$Component);

  function Datasheet(props) {
    _classCallCheck(this, Datasheet);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.state = {
      dataSource: []
    };
    _this.handleSeleteCell = _this.handleSeleteCell.bind(_this);
    _this.handleKeyDown = _this.handleKeyDown.bind(_this);
    _this.handleChange = _this.handleChange.bind(_this);
    _this.handleDoubleClick = _this.handleDoubleClick.bind(_this);
    _this.handleScroll = _this.handleScroll.bind(_this);
    return _this;
  }

  Datasheet.prototype.componentWillMount = function componentWillMount() {
    if (this.props.dataSource && Array.isArray(this.props.dataSource)) {
      this.setState({ dataSource: this.initHeadData(this.props.dataSource) });
    }
  };

  Datasheet.prototype.componentDidMount = function componentDidMount() {
    // const $datasheet = ReactDOM.findDOMNode(this);
    // const $parentNode = $datasheet.parentNode;
    // console.log('la', $parentNode.clientWidth)
  };

  Datasheet.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (nextProps.dataSource !== this.props.dataSource) {
      this.setState({ dataSource: this.initHeadData(nextProps.dataSource) });
    }
  };

  Datasheet.prototype.initHeadData = function initHeadData(dataSource) {
    var header = this.props.header;
    return Array.isArray(dataSource) ? dataSource.map(function (item) {
      if (header.length > item.length) {
        return [].concat(item, buildArray(header.length - item.length));
      }
      return item;
    }) : [];
  };

  Datasheet.prototype.handleSeleteCell = function handleSeleteCell(rIndex, index) {
    var dataSource = this.state.dataSource;
    var _dataSource = dataSource.map(function (item, idx) {
      if (rIndex === idx) {
        return item.map(function (c, jdx) {
          return _extends({}, c, {
            editable: false,
            selected: jdx === index ? true : false
          });
        });
      }
      return item.map(function (c) {
        return _extends({}, c, { editable: false, selected: false });
      });
    });
    this.setState({ dataSource: _dataSource });
  };

  Datasheet.prototype.handleChange = function handleChange(rIndex, index, value) {
    var _this2 = this;

    var preCell = null,
        nextCell = null;

    var dataSource = this.state.dataSource.map(function (row, idx) {
      if (idx === rIndex) {
        return row.map(function (cell, jdx) {
          if (jdx === index) {
            preCell = _extends({}, cell);
            nextCell = _extends({}, cell, { value: value });
            return nextCell;
          }
          return cell;
        });
      }
      return row;
    });
    this.setState({ dataSource: dataSource }, function () {
      if (_this2.props.onChange && typeof _this2.props.onChange === 'function') {
        var _preCell = preCell,
            preEditable = _preCell.editable,
            preSelected = _preCell.selected,
            preOther = _objectWithoutProperties(_preCell, ['editable', 'selected']);

        var _nextCell = nextCell,
            nextEditable = _nextCell.editable,
            nextSelected = _nextCell.selected,
            nextOther = _objectWithoutProperties(_nextCell, ['editable', 'selected']);

        _this2.props.onChange(_extends({}, preOther), _extends({}, nextOther), [rIndex, index]);
      }
    });
  };

  Datasheet.prototype.handleKeyDown = function handleKeyDown(e) {
    // console.log(e.keyCode)
    // // const dataSource = this.state.dataSource;
    // // const _dataSource = dataSource.map((item, idx) =>
    // //   item.map(c => ({...c, editable: c.selected ? true : false }))
    // // )
    // // this.setState({ dataSource: _dataSource })
  };

  Datasheet.prototype.handleDoubleClick = function handleDoubleClick(rIndex, index) {
    var dataSource = this.state.dataSource.map(function (item, idx) {
      if (idx === rIndex) {
        return item.map(function (c, jdx) {
          return _extends({}, c, {
            selected: jdx === index ? true : false,
            editable: jdx === index ? true : false
          });
        });
      }
      return item.map(function (c) {
        return _extends({}, c, { editable: false, selected: false });
      });
    });
    this.setState({ dataSource: dataSource });
  };

  Datasheet.prototype.handleScroll = function handleScroll() {
    var _refs$datasheet = this.refs.datasheet,
        scrollTop = _refs$datasheet.scrollTop,
        scrollHeight = _refs$datasheet.scrollHeight,
        clientHeight = _refs$datasheet.clientHeight;
    var _props = this.props,
        onScrollPage = _props.onScrollPage,
        dataSource = _props.dataSource;

    this.refs.thead.style.transform = 'translateY(' + scrollTop + 'px)';
    if (typeof onScrollPage === 'function') {
      onScrollPage({ scrollTop: scrollTop, scrollHeight: scrollHeight, clientHeight: clientHeight, height: 32 });
      // if (scrollTop + clientHeight > scrollHeight - ROW_HEIGHT) {
      //
      // } else if (scrollTop === 0) {
      //   onScrollPage('up')
      // }
    }
  };

  Datasheet.prototype.render = function render() {
    var _this3 = this;

    var dataSource = this.state.dataSource;
    var header = this.props.header;
    var xScroll = this.props.xScroll;

    var tStyle = null;
    if (xScroll) {
      tStyle = { width: xScroll };
    }
    return _react2.default.createElement(
      'div',
      {
        className: 'dh-datasheet',
        ref: 'datasheet',
        onScroll: this.handleScroll,
        onWheel: this.handleScroll
      },
      _react2.default.createElement(
        'table',
        {
          tabIndex: '-1',
          cellSpacing: '0',
          onKeyDown: this.handleKeyDown,
          style: tStyle
        },
        _react2.default.createElement(
          'thead',
          { ref: 'thead' },
          _react2.default.createElement(
            'tr',
            null,
            header.map(function (item, idx) {
              return _react2.default.createElement(
                'th',
                { key: 'datasheet-th-' + idx },
                item.title
              );
            })
          )
        ),
        _react2.default.createElement(
          'tbody',
          null,
          dataSource.map(function (item, idx) {
            return _react2.default.createElement(_row2.default, {
              index: idx,
              data: item,
              key: 'datasheet-row-' + idx,
              onChange: _this3.handleChange,
              onDoubleClick: _this3.handleDoubleClick,
              onEditable: _this3.handleEditable,
              onSelectCell: _this3.handleSeleteCell
            });
          })
        )
      )
    );
  };

  return Datasheet;
}(_react2.default.Component);

Datasheet.propTypes = {
  header: _propTypes2.default.array,
  dataSource: _propTypes2.default.array,
  onChange: _propTypes2.default.func,
  onLoad: _propTypes2.default.func
};
exports.default = Datasheet;