yylib-quick-mobile/source/yylib/library/YYLibraryList.js

yylib-quick-mobile

'use strict';

var _pullToRefresh = require('antd-mobile/lib/pull-to-refresh');

var _pullToRefresh2 = _interopRequireDefault(_pullToRefresh);

var _listView = require('antd-mobile/lib/list-view');

var _listView2 = _interopRequireDefault(_listView);

var _icon = require('antd-mobile/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

var _checkbox = require('antd-mobile/lib/checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

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 _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

require('antd-mobile/lib/pull-to-refresh/style/css');

require('antd-mobile/lib/list-view/style/css');

require('antd-mobile/lib/icon/style/css');

require('antd-mobile/lib/checkbox/style/css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _folder = require('../../common/img/folder.png');

var _folder2 = _interopRequireDefault(_folder);

var _ppt = require('../../common/img/ppt.png');

var _ppt2 = _interopRequireDefault(_ppt);

var _pdf = require('../../common/img/pdf.png');

var _pdf2 = _interopRequireDefault(_pdf);

var _excel = require('../../common/img/excel.png');

var _excel2 = _interopRequireDefault(_excel);

var _word = require('../../common/img/word.png');

var _word2 = _interopRequireDefault(_word);

var _zip = require('../../common/img/zip.png');

var _zip2 = _interopRequireDefault(_zip);

var _img = require('../../common/img/img.png');

var _img2 = _interopRequireDefault(_img);

var _unknow = require('../../common/img/unknow.png');

var _unknow2 = _interopRequireDefault(_unknow);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _RestUrl = require('../../common/RestUrl');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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) : subClass.__proto__ = superClass; }

var CheckboxItem = _checkbox2.default.CheckboxItem;

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

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

    var _this = _possibleConstructorReturn(this, (YYLibraryList.__proto__ || Object.getPrototypeOf(YYLibraryList)).call(this, props));

    _this.getList = function (data) {
      var list = [];
      var _this$props = _this.props,
          multi = _this$props.multi,
          selectAll = _this$props.selectAll,
          selectRowKeys = _this$props.selectRowKeys;

      data && data.map(function (item, index) {
        var itemMulti = (0, _classnames2.default)('item', multi && 'multi');
        var itemContent = _react2.default.createElement(
          'div',
          { key: item.id, className: itemMulti },
          _react2.default.createElement(
            'div',
            { className: 'Checkbox-item' },
            multi && _react2.default.createElement(CheckboxItem, { key: item.id, checked: selectRowKeys.indexOf(item.id) > -1 ? true : false, onChange: _this.onChange.bind(_this, item) })
          ),
          _react2.default.createElement(
            'div',
            { className: 'boder-content', onClick: _this.clickFile.bind(_this, item) },
            _react2.default.createElement(
              'div',
              { className: 'left-content' },
              _this.getFileType(item.type, item)
            ),
            _react2.default.createElement(
              'div',
              { className: 'content' },
              _react2.default.createElement(
                'div',
                { className: 'filename' },
                item.fileName
              ),
              _react2.default.createElement(
                'div',
                { className: 'note-content' },
                _react2.default.createElement(
                  'div',
                  { className: 'left' },
                  item.createtime
                ),
                _react2.default.createElement(
                  'div',
                  null,
                  item.creator
                )
              )
            ),
            !multi && _react2.default.createElement(
              'div',
              { className: 'right-content', onClick: _this.operation.bind(_this, item) },
              _react2.default.createElement(_icon2.default, { type: 'check-circle-o', size: 'xs' })
            )
          )
        );
        list.push(itemContent);
      });
      return list;
    };

    var dataSource = new _listView2.default.DataSource({
      rowHasChanged: function rowHasChanged(row1, row2) {
        return row1 !== row2;
      }
    });

    _this.state = {
      dataSource: dataSource,
      isLoading: true,
      refreshing: true,
      height: document.documentElement.clientHeight,
      initdata: '',
      footer: '' };
    return _this;
  }

  _createClass(YYLibraryList, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      var hei = this.state.height - _reactDom2.default.findDOMNode(this.lv).offsetTop;
      setTimeout(function () {
        var data = _this2.props.data;
        _this2.setState({
          initdata: data,
          height: hei,
          dataSource: _this2.state.dataSource.cloneWithRows(data),
          isLoading: false,
          refreshing: false
        });
      }, 300);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextprops) {
      var _this3 = this;

      var hei = this.state.height - _reactDom2.default.findDOMNode(this.lv).offsetTop;
      if (nextprops.data !== this.props.data) {
        setTimeout(function () {
          var data = _this3.props.data;
          _this3.setState({
            initdata: data,
            height: hei,
            dataSource: _this3.state.dataSource.cloneWithRows(data),
            isLoading: false,
            refreshing: false
          });
        }, 300);
      }
    }
  }, {
    key: 'onChange',
    value: function onChange(item, event) {
      event.stopPropagation();
      this.props.onChange && this.props.onChange(item);
    }
  }, {
    key: 'operation',
    value: function operation(item, event) {
      event.stopPropagation();
      this.props.operation && this.props.operation(item);
    }
  }, {
    key: 'clickFile',
    value: function clickFile(item, event) {
      event.stopPropagation();
      var _props = this.props,
          multi = _props.multi,
          source = _props.source;

      if (multi) {
        this.props.onChange && this.props.onChange(item);
        return;
      }
      if (item.type === 0) {
        var url = _RestUrl.ADDR + '/icop-file/onlinePreview?url=' + _RestUrl.ADDR + '/' + item.filePath;

        this.props.openFile && this.props.openFile(item);
      } else {
        if (this.context.location) {
          var params = Object.assign({}, this.context.location.query);
          this.context.router.push({ pathname: this.context.location.pathname, query: _extends({}, params, { fileid: item.id }) });
        }
      }
    }
  }, {
    key: 'getFileType',
    value: function getFileType(type, item) {
      if (type === 1) {
        return _react2.default.createElement('img', { src: _folder2.default });
      } else if (type === 0) {
        var fileName = item.fileName.lastIndexOf(".");
        var fileNameLength = item.fileName.length;
        var filetype = item.fileName.substring(fileName + 1, fileNameLength);
        switch (filetype) {
          case 'ppt':case 'pptx':
            return _react2.default.createElement('img', { src: _ppt2.default });
            break;
          case 'doc':case 'docx':
            return _react2.default.createElement('img', { src: _word2.default });
            break;
          case 'pdf':
            return _react2.default.createElement('img', { src: _pdf2.default });
            break;
          case 'xsl':case 'xlsx':
            return _react2.default.createElement('img', { src: _excel2.default });
            break;
          case 'zip':case 'rar':case 'rars':
            return _react2.default.createElement('img', { src: _zip2.default });
            break;
          case 'jpg':case 'png':case 'gif':case 'jpeg':case 'PNG':case 'JPG':case 'GIF':
            return _react2.default.createElement('img', { src: _img2.default });
            break;
          default:
            return _react2.default.createElement('img', { src: _unknow2.default });
            break;
        }
      }
    }
  }, {
    key: 'createRow',
    value: function createRow(item, sectionID, rowID, highlightRow) {
      var _props2 = this.props,
          multi = _props2.multi,
          selectAll = _props2.selectAll,
          selectRowKeys = _props2.selectRowKeys;

      var itemMulti = (0, _classnames2.default)('item', multi && 'multi');
      var itemContent = _react2.default.createElement(
        'div',
        { key: item.id, className: itemMulti },
        _react2.default.createElement(
          'div',
          { className: 'Checkbox-item' },
          multi && _react2.default.createElement(CheckboxItem, { key: item.id, checked: selectRowKeys.indexOf(item.id) > -1 ? true : false, onChange: this.onChange.bind(this, item) })
        ),
        _react2.default.createElement(
          'div',
          { className: 'boder-content', onClick: this.clickFile.bind(this, item) },
          _react2.default.createElement(
            'div',
            { className: 'left-content' },
            this.getFileType(item.type, item)
          ),
          _react2.default.createElement(
            'div',
            { className: 'content' },
            _react2.default.createElement(
              'div',
              { className: 'filename' },
              item.fileName
            ),
            _react2.default.createElement(
              'div',
              { className: 'note-content' },
              _react2.default.createElement(
                'div',
                { className: 'left' },
                item.createtime
              ),
              _react2.default.createElement(
                'div',
                null,
                item.creator
              )
            )
          ),
          !multi && _react2.default.createElement(
            'div',
            { className: 'right-content', onClick: this.operation.bind(this, item) },
            _react2.default.createElement(_icon2.default, { type: 'check-circle-o', size: 'xs' })
          )
        )
      );
      return itemContent;
    }
  }, {
    key: 'onRefresh',
    value: function onRefresh() {
      this.setState({ refreshing: true, isLoading: false });
      if (this.props.onRefresh) {
        this.props.onRefresh();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _state = this.state,
          height = _state.height,
          refreshing = _state.refreshing;
      var data = this.props.data;

      height = height - 90;
      return _react2.default.createElement(_listView2.default, {
        ref: function ref(el) {
          return _this4.lv = el;
        },
        pageSize: 10,
        initialListSize: 10,
        dataSource: this.state.dataSource,
        renderRow: function renderRow(rowData, sectionID, rowID, highlightRow) {
          return _this4.createRow(rowData, sectionID, rowID, highlightRow);
        },
        style: { height: 'calc(100% - 80px)', overflow: 'auto' },
        pullToRefresh: _react2.default.createElement(_pullToRefresh2.default, {
          distanceToRefresh: 25,
          refreshing: refreshing,
          onRefresh: this.onRefresh.bind(this) }) });
    }
  }]);

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

YYLibraryList.contextTypes = {
  router: _propTypes2.default.object.isRequired,
  location: _propTypes2.default.object.isRequired
};
module.exports = YYLibraryList;