@coko/client/dist/ui/common/List.js

Client side common code for coko apps

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _without = _interopRequireDefault(require("lodash/without"));
var _reactBeautifulDnd = require("react-beautiful-dnd");
var _antd = require("antd");
var _toolkit = require("../../toolkit");
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
var _Empty = _interopRequireDefault(require("./Empty"));
var _Search = _interopRequireDefault(require("./Search"));
var _Select = _interopRequireDefault(require("./Select"));
var _Pagination = _interopRequireDefault(require("./Pagination"));
var _VisuallyHiddenElement = _interopRequireDefault(require("./VisuallyHiddenElement"));
var _Spin = require("./Spin");
var _excluded = ["id", "index", "renderItem", "onDeselect", "onSelect", "selected", "checkboxLabel"],
  _excluded2 = ["footerContent", "className", "dataSource", "locale", "pagination", "renderItem", "itemSelection", "loading", "onSearch", "onSortOptionChange", "searchLoading", "searchPlaceholder", "showPagination", "showSearch", "showSort", "showTotalCount", "sortOptions", "totalCount", "draggable", "onDragEnd", "selectedItems"];
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
// #region styled
var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n"])), (0, _toolkit.th)('colorBackground'));
var DroppableWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow: auto;\n"])));
var SearchWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-self: center;\n  max-width: 1170px;\n  padding: 0 ", ";\n  width: 100%;\n"])), (0, _toolkit.grid)(2));
var InternalHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n  display: flex;\n  padding: ", ";\n"])), (0, _toolkit.th)('colorBorder'), (0, _toolkit.grid)(2));
var TotalCount = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
var SortWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: auto;\n"])));
var Select = (0, _styledComponents["default"])(_Select["default"])(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-left: ", ";\n  width: 150px;\n"])), (0, _toolkit.grid)(2));
var ListItemWrapper = _styledComponents["default"].li(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  justify-content: stretch;\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n\n  &&&& {\n    background-color: ", ";\n  }\n"])), (0, _toolkit.th)('colorPrimary'), function (_ref) {
  var isDragging = _ref.isDragging;
  return isDragging ? (0, _toolkit.th)('colorSelection') : 'transparent';
});
var StyledList = (0, _styledComponents["default"])(_antd.List)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow: auto;\n\n  .ant-spin-nested-loading {\n    height: 100%;\n\n    .ant-spin {\n      display: grid;\n      max-height: unset;\n      place-content: center;\n    }\n  }\n"])));
var StyledLoader = (0, _styledComponents["default"])(_Spin.Indicator)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  transform: translateY(-100%);\n"])));
var FooterWrapper = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  display: flex;\n  justify-content: space-between;\n  padding: 5px;\n"])), (0, _toolkit.th)('colorBorder'));
var CheckBox = (0, _styledComponents["default"])(_Checkbox["default"])(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), (0, _toolkit.grid)(2));
// #endregion styled

var compareItem = function compareItem(preProps, nextProps) {
  if (preProps.id === nextProps.id && preProps.selected === nextProps.selected) return true;
  return false;
};

// memoize Selectable item to avoid unecessary rerendering every time an item is selected/deselected
var SelectableItem = /*#__PURE__*/(0, _react.memo)(function (props) {
  var id = props.id,
    index = props.index,
    renderItem = props.renderItem,
    onDeselect = props.onDeselect,
    onSelect = props.onSelect,
    selected = props.selected,
    checkboxLabel = props.checkboxLabel,
    rest = _objectWithoutProperties(props, _excluded);
  var handleChange = function handleChange() {
    if (selected) {
      onDeselect(id);
    } else {
      onSelect(id);
    }
  };
  return checkboxLabel !== '' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CheckBox, {
    "aria-label": checkboxLabel,
    checked: selected,
    onChange: handleChange
  }), renderItem(_objectSpread({
    id: id
  }, rest), index)) : /*#__PURE__*/_react["default"].createElement(CheckBox, {
    checked: selected,
    onChange: handleChange
  }, /*#__PURE__*/_react["default"].createElement(_VisuallyHiddenElement["default"], null, "Select item: "), renderItem(_objectSpread({
    id: id
  }, rest), index));
}, compareItem);
SelectableItem.propTypes = {
  id: _propTypes["default"].string.isRequired,
  index: _propTypes["default"].number.isRequired,
  renderItem: _propTypes["default"].func.isRequired,
  onDeselect: _propTypes["default"].func.isRequired,
  onSelect: _propTypes["default"].func.isRequired,
  selected: _propTypes["default"].bool.isRequired,
  checkboxLabel: _propTypes["default"].string
};
SelectableItem.defaultProps = {
  checkboxLabel: ''
};

// memoized SelectableItem would use old value of selectedItems when handleSelect and handleDeselect are passed as they are
// when you wrap them with the below function, they always refer to the List's updated selectedItems
function useFunction(callback) {
  var ref = _react["default"].useRef();
  ref.current = callback;
  function callbackFunction() {
    var cb = ref.current;
    if (typeof callback === 'function') {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
      return cb.apply(this, args);
    }
    return false;
  }
  return (0, _react.useCallback)(callbackFunction, []);
}

// const EmptyList = () => {
//   return 'no data'
// }

var List = function List(props) {
  var footerContent = props.footerContent,
    className = props.className,
    dataSource = props.dataSource,
    locale = props.locale,
    pagination = props.pagination,
    renderItem = props.renderItem,
    itemSelection = props.itemSelection,
    loading = props.loading,
    onSearch = props.onSearch,
    onSortOptionChange = props.onSortOptionChange,
    searchLoading = props.searchLoading,
    searchPlaceholder = props.searchPlaceholder,
    showPagination = props.showPagination,
    showSearch = props.showSearch,
    showSort = props.showSort,
    showTotalCount = props.showTotalCount,
    sortOptions = props.sortOptions,
    totalCount = props.totalCount,
    draggable = props.draggable,
    onDragEnd = props.onDragEnd,
    controlledSelectedItems = props.selectedItems,
    rest = _objectWithoutProperties(props, _excluded2);
  var _useState = (0, _react.useState)([]),
    _useState2 = _slicedToArray(_useState, 2),
    selectedItems = _useState2[0],
    setSelectedItems = _useState2[1];
  (0, _react.useEffect)(function () {
    itemSelection && itemSelection.onChange && itemSelection.onChange(selectedItems);
  }, [selectedItems]);

  // Reset selected items to controlledSelectedItems when dataSource changes
  // by default it will reset selection (controlledSelectedItems = [])
  // to preserve it, keep track of selected items in the parent component, and pass it down via this prop
  (0, _react.useEffect)(function () {
    setSelectedItems(controlledSelectedItems);
  }, [dataSource]);
  var handleSelect = useFunction(function (id) {
    setSelectedItems([].concat(_toConsumableArray(selectedItems), [id]));
  });
  var handleDeselect = useFunction(function (id) {
    setSelectedItems((0, _without["default"])(selectedItems, id));
  });
  var listItemToRender = itemSelection ? function (itemProps, i) {
    return draggable ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
      draggableId: "draggable-".concat(i),
      index: i
    }, function (provided, snapshot) {
      return /*#__PURE__*/_react["default"].createElement(ListItemWrapper, _extends({
        "data-testid": "list-item-wrapper",
        key: itemProps === null || itemProps === void 0 ? void 0 : itemProps.id
      }, provided.draggableProps, provided.dragHandleProps, {
        isDragging: snapshot.isDragging,
        ref: provided.innerRef
      }), /*#__PURE__*/_react["default"].createElement(SelectableItem, _extends({
        index: i,
        onDeselect: handleDeselect,
        onSelect: handleSelect,
        renderItem: renderItem,
        selected: selectedItems.includes(itemProps === null || itemProps === void 0 ? void 0 : itemProps.id)
      }, itemProps)));
    }) : /*#__PURE__*/_react["default"].createElement(ListItemWrapper, {
      "data-testid": "list-item-wrapper",
      key: itemProps === null || itemProps === void 0 ? void 0 : itemProps.id
    }, /*#__PURE__*/_react["default"].createElement(SelectableItem, _extends({
      index: i,
      onDeselect: handleDeselect,
      onSelect: handleSelect,
      renderItem: renderItem,
      selected: selectedItems.includes(itemProps === null || itemProps === void 0 ? void 0 : itemProps.id)
    }, itemProps)));
  } : function (itemProps, i) {
    return draggable ? /*#__PURE__*/_react["default"].createElement(ListItemWrapper, {
      "data-testid": "list-item-wrapper"
    }, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
      draggableId: "draggable-".concat(i),
      index: i
    }, function (provided) {
      return /*#__PURE__*/_react["default"].createElement("div", _extends({}, provided.draggableProps, provided.dragHandleProps, {
        ref: provided.innerRef
      }), renderItem(itemProps, i));
    })) : /*#__PURE__*/_react["default"].createElement(ListItemWrapper, {
      "data-testid": "list-item-wrapper"
    }, renderItem(itemProps, i));
  };
  var paginationObj = _objectSpread({
    current: 1,
    pageSize: 10
  }, pagination);
  var _useState3 = (0, _react.useState)(paginationObj.current),
    _useState4 = _slicedToArray(_useState3, 2),
    paginationCurrent = _useState4[0],
    setPaginationCurrent = _useState4[1];
  var _useState5 = (0, _react.useState)(paginationObj.pageSize),
    _useState6 = _slicedToArray(_useState5, 2),
    paginationSize = _useState6[0],
    setPaginationSize = _useState6[1];
  (0, _react.useEffect)(function () {
    setPaginationCurrent(paginationObj.current);
    setPaginationSize(paginationObj.pageSize);
  }, [pagination]);
  var triggerPaginationEvent = function triggerPaginationEvent(eventName) {
    return function (page, pageSize) {
      setPaginationCurrent(page);
      setPaginationSize(pageSize);
      if (pagination && pagination[eventName]) {
        pagination[eventName](page, pageSize);
      }
    };
  };
  var onPaginationChange = triggerPaginationEvent('onChange');
  var onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
  var passedPagination = _objectSpread(_objectSpread({}, paginationObj), {}, {
    current: paginationCurrent,
    pageSize: paginationSize,
    onShowSizeChange: onPaginationShowSizeChange
  });
  var splitDataSource = _toConsumableArray(dataSource);

  // `totalCount` prop exists only to display the count at the top of the list,
  // but since we have the value, might as well pass it to the pagination config.
  // If the pagination config has a `total` key, then use that.
  // if neither `total` key nor totalCount are present but pagination object still exist, use dataSource.length as total
  if (passedPagination && !passedPagination.total) {
    if (totalCount) {
      passedPagination.total = totalCount;
    } else {
      passedPagination.total = splitDataSource.length;
    }
  }
  if (pagination) {
    if (splitDataSource.length > (passedPagination.current - 1) * passedPagination.pageSize) {
      splitDataSource = _toConsumableArray(dataSource).splice((passedPagination.current - 1) * passedPagination.pageSize, passedPagination.pageSize);
    }
  }
  var largestPage = Math.ceil(passedPagination.total / passedPagination.pageSize);
  if (passedPagination.current > largestPage) {
    passedPagination.current = largestPage;
  }
  var showInternalHeaderRow = showSort || showTotalCount;
  var defaultSortOption = sortOptions && sortOptions.find(function (o) {
    return o.isDefault;
  });

  // remove `isDefault` prop from sortOptions bcs it's unrecognized when spread onto an html <option>
  var sanitizedSortOptions = sortOptions.map(function (_ref2) {
    var label = _ref2.label,
      value = _ref2.value;
    return {
      label: label,
      value: value
    };
  });
  var mergedLocale = _objectSpread({
    emptyText: !loading ? /*#__PURE__*/_react["default"].createElement(_Empty["default"], {
      description: "No Data",
      image: _Empty["default"].PRESENTED_IMAGE_SIMPLE,
      role: "status"
    }) : /*#__PURE__*/_react["default"].createElement("div", {
      role: "status"
    }, "Loading")
  }, locale);
  var ListToRender = draggable ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.DragDropContext, {
    onDragEnd: onDragEnd
  }, /*#__PURE__*/_react["default"].createElement(DroppableWrapper, null, /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
    droppableId: "dropable-list"
  }, function (provided) {
    return /*#__PURE__*/_react["default"].createElement("div", _extends({}, provided.droppableProps, {
      ref: provided.innerRef
    }), /*#__PURE__*/_react["default"].createElement(_antd.List, _extends({
      dataSource: splitDataSource,
      loading: loading ? {
        spinning: true,
        indicator: /*#__PURE__*/_react["default"].createElement(StyledLoader, null)
      } : {
        spinning: false,
        indicator: /*#__PURE__*/_react["default"].createElement(StyledLoader, null)
      },
      locale: mergedLocale,
      renderItem: listItemToRender
    }, rest, {
      pagination: false
    })), provided.placeholder);
  }))) : /*#__PURE__*/_react["default"].createElement(StyledList, _extends({
    dataSource: splitDataSource,
    loading: loading ? {
      spinning: true,
      indicator: /*#__PURE__*/_react["default"].createElement(StyledLoader, null)
    } : {
      spinning: false,
      indicator: /*#__PURE__*/_react["default"].createElement(StyledLoader, null)
    },
    locale: mergedLocale,
    renderItem: listItemToRender
  }, rest));
  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
    className: className
  }, showSearch && /*#__PURE__*/_react["default"].createElement(SearchWrapper, null, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
    "aria-label": "Enter text to search in list",
    loading: searchLoading,
    onSearch: onSearch,
    placeholder: searchPlaceholder
  })), showInternalHeaderRow && /*#__PURE__*/_react["default"].createElement(InternalHeader, null, showTotalCount && /*#__PURE__*/_react["default"].createElement(TotalCount, null, /*#__PURE__*/_react["default"].createElement("span", null, totalCount, " results")), showSort && /*#__PURE__*/_react["default"].createElement(SortWrapper, null, /*#__PURE__*/_react["default"].createElement("label", null, "Sort by", /*#__PURE__*/_react["default"].createElement(Select, {
    "data-testid": "sort-select",
    defaultValue: defaultSortOption && defaultSortOption.value,
    id: "sortBy",
    onChange: onSortOptionChange,
    options: sanitizedSortOptions
  })))), ListToRender, (footerContent || showPagination) && /*#__PURE__*/_react["default"].createElement(FooterWrapper, null, footerContent || /*#__PURE__*/_react["default"].createElement("div", null), showPagination && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
    onChange: onPaginationChange,
    pagination: passedPagination
  })));
};
List.propTypes = {
  footerContent: _propTypes["default"].element,
  itemSelection: _propTypes["default"].shape({
    onChange: _propTypes["default"].func.isRequired
  }),
  loading: _propTypes["default"].bool,
  onSearch: _propTypes["default"].func,
  onSortOptionChange: _propTypes["default"].func,
  searchLoading: _propTypes["default"].bool,
  searchPlaceholder: _propTypes["default"].string,
  showPagination: _propTypes["default"].bool,
  showSearch: _propTypes["default"].bool,
  showSort: _propTypes["default"].bool,
  showTotalCount: _propTypes["default"].bool,
  sortOptions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    label: _propTypes["default"].string.isRequired,
    value: _propTypes["default"].string.isRequired,
    isDefault: _propTypes["default"].bool
  })),
  totalCount: _propTypes["default"].number,
  onDragEnd: _propTypes["default"].func,
  draggable: _propTypes["default"].bool,
  selectedItems: _propTypes["default"].arrayOf(_propTypes["default"].string)
};
List.defaultProps = {
  footerContent: null,
  itemSelection: null,
  loading: false,
  onSearch: null,
  onSortOptionChange: null,
  searchLoading: false,
  showPagination: true,
  searchPlaceholder: null,
  showSearch: false,
  showSort: false,
  showTotalCount: false,
  sortOptions: [],
  totalCount: null,
  onDragEnd: function onDragEnd() {},
  draggable: false,
  selectedItems: []
};
List.Item = _antd.List.Item;
var _default = List;
exports["default"] = _default;