choerodon-ui/es/list/index.js

An enterprise-class UI design language and React-based implementation

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["bordered", "split", "className", "children", "itemLayout", "loadMore", "pagination", "grid", "dataSource", "size", "header", "footer", "empty", "loading", "rowPrefixCls", "spinPrefixCls", "paginationProps"];
import React, { Children, cloneElement, Component } from 'react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import Spin from '../spin';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale-provider/default';
import { Size } from '../_util/enum';
import Pagination from '../pagination';
import { Row } from '../grid';
import Item from './Item';
import { ListContextProvider } from './ListContext';
import ConfigContext from '../config-provider/ConfigContext';

var List = /*#__PURE__*/function (_Component) {
  _inherits(List, _Component);

  var _super = _createSuper(List);

  function List() {
    var _this;

    _classCallCheck(this, List);

    _this = _super.apply(this, arguments);
    _this.state = {
      paginationCurrent: 1
    };
    _this.defaultPaginationProps = {
      current: 1,
      pageSize: 10,
      onChange: function onChange(page, pageSize) {
        var pagination = _this.props.pagination;

        _this.setState({
          paginationCurrent: page
        });

        if (pagination && pagination.onChange) {
          pagination.onChange(page, pageSize);
        }
      },
      total: 0
    };
    _this.keys = {};

    _this.renderItem = function (item, index) {
      var _this$props = _this.props,
          dataSource = _this$props.dataSource,
          renderItem = _this$props.renderItem,
          rowKey = _this$props.rowKey;
      var key;

      if (typeof rowKey === 'function') {
        key = rowKey(dataSource[index]);
      } else if (typeof rowKey === 'string') {
        key = dataSource[rowKey];
      } else {
        key = dataSource.key;
      }

      if (!key) {
        key = "list-item-".concat(index);
      }

      _this.keys[index] = key;
      return renderItem(item, index);
    };

    _this.renderEmpty = function (contextLocale) {
      var _assertThisInitialize = _assertThisInitialized(_this),
          props = _assertThisInitialize.props;

      var locale = _objectSpread(_objectSpread({}, contextLocale), props.locale);

      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(_this.getPrefixCls(), "-empty-text")
      }, locale.emptyText);
    };

    return _this;
  }

  _createClass(List, [{
    key: "getContextValue",
    value: function getContextValue() {
      var grid = this.props.grid;
      var getPrefixCls = this.context.getPrefixCls;
      return {
        grid: grid,
        getPrefixCls: getPrefixCls
      };
    }
  }, {
    key: "isSomethingAfterLastItem",
    value: function isSomethingAfterLastItem() {
      var _this$props2 = this.props,
          loadMore = _this$props2.loadMore,
          pagination = _this$props2.pagination,
          footer = _this$props2.footer;
      return !!(loadMore || pagination || footer);
    }
  }, {
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var prefixCls = this.props.prefixCls;
      var getPrefixCls = this.context.getPrefixCls;
      return getPrefixCls('list', prefixCls);
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _this2 = this;

      var paginationCurrent = this.state.paginationCurrent;

      var _this$props3 = this.props,
          bordered = _this$props3.bordered,
          split = _this$props3.split,
          className = _this$props3.className,
          children = _this$props3.children,
          itemLayout = _this$props3.itemLayout,
          loadMore = _this$props3.loadMore,
          pagination = _this$props3.pagination,
          grid = _this$props3.grid,
          dataSource = _this$props3.dataSource,
          size = _this$props3.size,
          header = _this$props3.header,
          footer = _this$props3.footer,
          empty = _this$props3.empty,
          loading = _this$props3.loading,
          rowPrefixCls = _this$props3.rowPrefixCls,
          spinPrefixCls = _this$props3.spinPrefixCls,
          propsPaginationProps = _this$props3.paginationProps,
          rest = _objectWithoutProperties(_this$props3, _excluded);

      var prefixCls = this.getPrefixCls();
      var loadingProp = loading;

      if (typeof loadingProp === 'boolean') {
        loadingProp = {
          spinning: loadingProp
        };
      }

      var isLoading = loadingProp && loadingProp.spinning; // large => lg
      // small => sm

      var sizeCls = '';

      switch (size) {
        case Size.large:
          sizeCls = 'lg';
          break;

        case Size.small:
          sizeCls = 'sm';
          break;

        default:
      }

      var classString = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-vertical"), itemLayout === 'vertical'), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(sizeCls), sizeCls), _defineProperty(_classNames, "".concat(prefixCls, "-split"), split), _defineProperty(_classNames, "".concat(prefixCls, "-bordered"), bordered), _defineProperty(_classNames, "".concat(prefixCls, "-loading"), isLoading), _defineProperty(_classNames, "".concat(prefixCls, "-grid"), grid), _defineProperty(_classNames, "".concat(prefixCls, "-something-after-last-item"), this.isSomethingAfterLastItem()), _classNames));

      var paginationProps = _objectSpread(_objectSpread(_objectSpread({}, this.defaultPaginationProps), propsPaginationProps), {}, {
        total: dataSource.length,
        current: paginationCurrent
      }, pagination || {});

      var largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);

      if (paginationProps.current > largestPage) {
        paginationProps.current = largestPage;
      }

      var paginationContent = pagination ? /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-pagination")
      }, /*#__PURE__*/React.createElement(Pagination, _extends({}, paginationProps, {
        onChange: this.defaultPaginationProps.onChange
      }))) : null;

      var splitDataSource = _toConsumableArray(dataSource);

      if (pagination) {
        if (dataSource.length > (paginationProps.current - 1) * paginationProps.pageSize) {
          splitDataSource = _toConsumableArray(dataSource).splice((paginationProps.current - 1) * paginationProps.pageSize, paginationProps.pageSize);
        }
      }

      var childrenContent;
      childrenContent = isLoading && /*#__PURE__*/React.createElement("div", {
        style: {
          minHeight: 53
        }
      });

      if (splitDataSource.length > 0) {
        var items = splitDataSource.map(function (item, index) {
          return _this2.renderItem(item, index);
        });
        var childrenList = Children.map(items, function (child, index) {
          return /*#__PURE__*/cloneElement(child, {
            key: _this2.keys[index]
          });
        });
        childrenContent = grid ? /*#__PURE__*/React.createElement(Row, {
          prefixCls: rowPrefixCls,
          gutter: grid.gutter
        }, childrenList) : childrenList;
      } else if (!children && !isLoading && !empty) {
        childrenContent = /*#__PURE__*/React.createElement(LocaleReceiver, {
          componentName: "Table",
          defaultLocale: defaultLocale.Table
        }, this.renderEmpty);
      } else {
        childrenContent = empty;
      }

      var paginationPosition = paginationProps.position || 'bottom';
      var content = /*#__PURE__*/React.createElement(Spin, _extends({
        prefixCls: spinPrefixCls
      }, loadingProp), childrenContent, children);
      return /*#__PURE__*/React.createElement(ListContextProvider, _extends({}, this.getContextValue()), /*#__PURE__*/React.createElement("div", _extends({
        className: classString
      }, omit(rest, ['prefixCls', 'rowKey', 'renderItem', 'selectable', 'rowKey', 'renderItem', 'locale'])), (paginationPosition === 'top' || paginationPosition === 'both') && paginationContent, header && /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-header")
      }, header), content, footer && /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-footer")
      }, footer), loadMore || (paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return List;
}(Component);

export { List as default };
List.displayName = 'List';
List.Item = Item;
List.defaultProps = {
  dataSource: [],
  bordered: false,
  split: true,
  loading: false,
  pagination: false
};
//# sourceMappingURL=index.js.map