@antdv/pro-list/lib/ListView.js

@antdv/pro-list

var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
  default: () => stdin_default,
  listViewProps: () => listViewProps
});
module.exports = __toCommonJS(stdin_exports);
var import_vue = require("vue");
var import_pro_provider = require("@antdv/pro-provider");
var import_pro_utils = require("@antdv/pro-utils");
var import_ant_design_vue = require("ant-design-vue");
var import_context = require("ant-design-vue/es/config-provider/context");
var import_list = require("ant-design-vue/es/list");
var import_useSelection = __toESM(require("ant-design-vue/es/table/hooks/useSelection"));
var import_useLazyKVMap = __toESM(require("ant-design-vue/lib/table/hooks/useLazyKVMap"));
var import_usePagination = __toESM(require("ant-design-vue/lib/table/hooks/usePagination"));
var import_vue2 = require("vue");
var import_constants = require("./constants");
var import_Item = __toESM(require("./Item"));
function listViewProps() {
  return __spreadProps(__spreadValues({}, (0, import_pro_utils.omit)((0, import_list.listProps)(), ["rowKey", "renderItem"])), {
    columns: (0, import_pro_utils.arrayType)(),
    pagination: (0, import_pro_utils.oneOfType)([Boolean, Object]).def(void 0),
    expandable: (0, import_pro_utils.objectType)(),
    rowKey: (0, import_pro_utils.oneOfType)([String, Number, Function]),
    showActions: (0, import_pro_utils.stringType)(),
    showExtra: (0, import_pro_utils.stringType)(),
    rowSelection: (0, import_pro_utils.objectType)(),
    prefixCls: String,
    dataSource: (0, import_pro_utils.arrayType)().isRequired,
    renderItem: (0, import_pro_utils.funcType)(),
    // 当非卡片模式时，用于为每一行的项目绑定事件，用户设置 `grid`时将会失效
    onRow: (0, import_pro_utils.funcType)(),
    // 兼容普通和卡片模式的事件绑定，代表每一个项目的事件，是对`onRow`的补充
    onItem: (0, import_pro_utils.funcType)(),
    rowClassName: (0, import_pro_utils.oneOfType)([String, Function]),
    /** Render 除了 header 之后的代码 */
    itemHeaderRender: (0, import_pro_utils.oneOfType)([Function, Boolean]),
    itemTitleRender: (0, import_pro_utils.oneOfType)([Function, Boolean]),
    itemCardProps: (0, import_pro_utils.objectType)(),
    action: (0, import_pro_utils.objectType)()
  });
}
var stdin_default = (0, import_vue2.defineComponent)({
  name: "ProListView",
  inheritAttrs: false,
  props: listViewProps(),
  setup(props, {
    attrs
  }) {
    const {
      hashId
    } = import_pro_provider.ProProvider.useContext();
    const {
      getPrefixCls
    } = (0, import_context.useConfigContextInject)();
    const dataSource = (0, import_vue2.toRef)(props, "dataSource");
    const getRowKey = (0, import_vue2.computed)(() => {
      if (typeof props.rowKey === "function") {
        return props.rowKey;
      }
      return (record, index) => record[props.rowKey] || index;
    });
    const expandableConfig = (0, import_vue2.computed)(() => Object.assign({}, props.expandable, {
      defaultExpandAllRows: true
    }));
    const getExpandedKeys = () => {
      if (expandableConfig.value.defaultExpandedRowKeys) {
        return expandableConfig.value.defaultExpandedRowKeys;
      }
      if (expandableConfig.value.defaultExpandAllRows !== false) {
        return dataSource.value.map(getRowKey.value);
      }
      return [];
    };
    const innerExpandedKeys = (0, import_vue2.ref)(getExpandedKeys());
    const mergedExpandedKeys = (0, import_vue2.computed)(() => new Set(expandableConfig.value.expandedRowKeys || innerExpandedKeys.value || []));
    const [getRecordByKey] = (0, import_useLazyKVMap.default)(dataSource, (0, import_vue2.ref)("children"), getRowKey);
    const [mergedPagination] = (0, import_usePagination.default)((0, import_vue2.computed)(() => dataSource.value.length), (0, import_vue2.toRef)(props, "pagination"), () => {
    });
    const pageData = (0, import_vue2.computed)(() => {
      if (props.pagination === false || !mergedPagination.value.pageSize || dataSource.value.length < mergedPagination.value.total) {
        return dataSource.value;
      }
      const {
        current = 1,
        pageSize = 10
      } = mergedPagination.value;
      const currentPageData = dataSource.value.slice((current - 1) * pageSize, current * pageSize);
      return currentPageData;
    });
    const prefixCls = (0, import_vue2.computed)(() => getPrefixCls("pro-list", props.prefixCls));
    const [selectItemRender, selectedKeySet] = (0, import_useSelection.default)((0, import_vue2.toRef)(props, "rowSelection"), {
      prefixCls,
      data: dataSource,
      pageData,
      getRowKey,
      getRecordByKey,
      expandType: (0, import_vue2.computed)(() => "row"),
      childrenColumnName: (0, import_vue2.computed)(() => "children"),
      locale: (0, import_vue2.computed)(() => ({}))
    });
    return () => {
      const _a = props, {
        columns,
        rowKey,
        showActions,
        showExtra,
        prefixCls: customizePrefixCls,
        itemTitleRender,
        renderItem,
        itemCardProps,
        itemHeaderRender,
        expandable: _expandableConfig,
        rowSelection,
        pagination,
        onRow: onRow,
        onItem,
        rowClassName
      } = _a, rest = __objRest(_a, [
        "columns",
        "rowKey",
        "showActions",
        "showExtra",
        "prefixCls",
        "itemTitleRender",
        "renderItem",
        "itemCardProps",
        "itemHeaderRender",
        "expandable",
        "rowSelection",
        "pagination",
        // List 的 pagination 默认是 false
        "onRow",
        "onItem",
        "rowClassName"
      ]);
      const onTriggerExpand = (record) => {
        var _a2;
        const key = getRowKey.value(record, dataSource.value.indexOf(record));
        let newExpandedKeys;
        const hasKey = mergedExpandedKeys.value.has(key);
        if (hasKey) {
          mergedExpandedKeys.value.delete(key);
          newExpandedKeys = [...mergedExpandedKeys.value];
        } else {
          newExpandedKeys = [...mergedExpandedKeys.value, key];
        }
        innerExpandedKeys.value = newExpandedKeys;
        if ((_a2 = expandableConfig.value) == null ? void 0 : _a2.onExpand) {
          expandableConfig.value.onExpand(!hasKey, record);
        }
        if (expandableConfig.value.onExpandedRowsChange) {
          expandableConfig.value.onExpandedRowsChange(newExpandedKeys);
        }
      };
      const selectItemDom = selectItemRender([])[0];
      return (0, import_vue.createVNode)(import_ant_design_vue.List, (0, import_vue.mergeProps)(rest, {
        "class": (0, import_pro_utils.classNames)(getPrefixCls("pro-list-container", customizePrefixCls), hashId, attrs.class || ""),
        "style": attrs.style,
        "dataSource": pageData.value,
        "pagination": pagination && mergedPagination.value,
        "renderItem": ({
          item,
          index
        }) => {
          var _a2;
          const listItemProps = {
            className: typeof rowClassName === "function" ? rowClassName(item, index) : rowClassName
          };
          columns == null ? void 0 : columns.forEach((column) => {
            const {
              listKey,
              cardActionProps
            } = column;
            if (!import_constants.PRO_LIST_KEYS_MAP.has(listKey)) {
              return;
            }
            const dataIndex = column.dataIndex || listKey || column.key;
            const rawData = Array.isArray(dataIndex) ? (0, import_pro_provider.get)(item, dataIndex) : item[dataIndex];
            if (cardActionProps === "actions" && listKey === "actions") {
              Object.assign(listItemProps, {
                cardActionProps
              });
            }
            const data = column.customRender ? column.customRender({
              text: rawData,
              record: item,
              index,
              renderIndex: index,
              value: rawData,
              column
            }) : rawData;
            if (data !== "-") listItemProps[column.listKey] = data;
          });
          let checkboxDom = null;
          if (selectItemDom && selectItemDom.customRender) {
            checkboxDom = selectItemDom.customRender({
              text: item,
              record: item,
              index,
              renderIndex: index,
              value: item,
              column: {}
            });
          }
          const {
            isEditable,
            recordKey
          } = ((_a2 = props.action) == null ? void 0 : _a2.isEditable(__spreadProps(__spreadValues({}, item), {
            index
          }))) || {};
          const isChecked = selectedKeySet.value.has(recordKey || index);
          const defaultDom = (0, import_vue.createVNode)(import_Item.default, (0, import_vue.mergeProps)({
            "key": recordKey,
            "cardProps": rest.grid ? __spreadProps(__spreadValues(__spreadValues({}, itemCardProps), rest.grid), {
              checked: isChecked,
              onChange: (0, import_pro_utils.isValidElement)(checkboxDom) ? (changeChecked) => {
                var _a3;
                return (_a3 = checkboxDom == null ? void 0 : checkboxDom.props) == null ? void 0 : _a3.onChange({
                  nativeEvent: {},
                  changeChecked
                });
              } : void 0
            }) : void 0
          }, listItemProps, {
            "recordKey": recordKey,
            "isEditable": isEditable || false,
            "expandable": expandableConfig.value,
            "expand": mergedExpandedKeys.value.has(getRowKey.value(item, index)),
            "onExpand": () => {
              onTriggerExpand(item);
            },
            "index": index,
            "record": item,
            "item": item,
            "showActions": showActions,
            "showExtra": showExtra,
            "itemTitleRender": itemTitleRender,
            "itemHeaderRender": itemHeaderRender,
            "rowSupportExpand": !expandableConfig.value.rowExpandable || expandableConfig.value.rowExpandable && expandableConfig.value.rowExpandable(item),
            "selected": selectedKeySet.value.has(getRowKey.value(item, index)),
            "checkbox": checkboxDom,
            "onRow": onRow,
            "onItem": onItem
          }), null);
          if (renderItem) {
            return renderItem({
              item,
              index
            });
          }
          return defaultDom;
        }
      }), null);
    };
  }
});