@antdv/pro-list
Version:
@antdv/pro-list
287 lines (286 loc) • 10.8 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
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;
};
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
import { get, ProProvider } from "@antdv/pro-provider";
import { arrayType, classNames, funcType, isValidElement, objectType, omit, oneOfType, stringType } from "@antdv/pro-utils";
import { List } from "ant-design-vue";
import { useConfigContextInject } from "ant-design-vue/es/config-provider/context";
import { listProps } from "ant-design-vue/es/list";
import useSelection from "ant-design-vue/es/table/hooks/useSelection";
import useLazyKVMap from "ant-design-vue/lib/table/hooks/useLazyKVMap";
import usePagination from "ant-design-vue/lib/table/hooks/usePagination";
import { computed, defineComponent, ref, toRef } from "vue";
import { PRO_LIST_KEYS_MAP } from "./constants.mjs";
import ProListItem from "./Item.mjs";
function listViewProps() {
return __spreadProps(__spreadValues({}, omit(listProps(), ["rowKey", "renderItem"])), {
columns: arrayType(),
pagination: oneOfType([Boolean, Object]).def(void 0),
expandable: objectType(),
rowKey: oneOfType([String, Number, Function]),
showActions: stringType(),
showExtra: stringType(),
rowSelection: objectType(),
prefixCls: String,
dataSource: arrayType().isRequired,
renderItem: funcType(),
// 当非卡片模式时，用于为每一行的项目绑定事件，用户设置 `grid`时将会失效
onRow: funcType(),
// 兼容普通和卡片模式的事件绑定，代表每一个项目的事件，是对`onRow`的补充
onItem: funcType(),
rowClassName: oneOfType([String, Function]),
/** Render 除了 header 之后的代码 */
itemHeaderRender: oneOfType([Function, Boolean]),
itemTitleRender: oneOfType([Function, Boolean]),
itemCardProps: objectType(),
action: objectType()
});
}
var stdin_default = defineComponent({
name: "ProListView",
inheritAttrs: false,
props: listViewProps(),
setup(props, {
attrs
}) {
const {
hashId
} = ProProvider.useContext();
const {
getPrefixCls
} = useConfigContextInject();
const dataSource = toRef(props, "dataSource");
const getRowKey = computed(() => {
if (typeof props.rowKey === "function") {
return props.rowKey;
}
return (record, index) => record[props.rowKey] || index;
});
const expandableConfig = 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 = ref(getExpandedKeys());
const mergedExpandedKeys = computed(() => new Set(expandableConfig.value.expandedRowKeys || innerExpandedKeys.value || []));
const [getRecordByKey] = useLazyKVMap(dataSource, ref("children"), getRowKey);
const [mergedPagination] = usePagination(computed(() => dataSource.value.length), toRef(props, "pagination"), () => {
});
const pageData = 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 = computed(() => getPrefixCls("pro-list", props.prefixCls));
const [selectItemRender, selectedKeySet] = useSelection(toRef(props, "rowSelection"), {
prefixCls,
data: dataSource,
pageData,
getRowKey,
getRecordByKey,
expandType: computed(() => "row"),
childrenColumnName: computed(() => "children"),
locale: 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 _createVNode(List, _mergeProps(rest, {
"class": 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 (!PRO_LIST_KEYS_MAP.has(listKey)) {
return;
}
const dataIndex = column.dataIndex || listKey || column.key;
const rawData = Array.isArray(dataIndex) ? 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 = _createVNode(ProListItem, _mergeProps({
"key": recordKey,
"cardProps": rest.grid ? __spreadProps(__spreadValues(__spreadValues({}, itemCardProps), rest.grid), {
checked: isChecked,
onChange: 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);
};
}
});
export {
stdin_default as default,
listViewProps
};