356 lines
10 KiB
Vue
356 lines
10 KiB
Vue
import classNames from '../../_util/classNames';
|
|
import { flattenChildren, isValidElement, parseStyleText } from '../../_util/props-util';
|
|
import type { CSSProperties } from 'vue';
|
|
import { computed, defineComponent, isVNode, renderSlot } from 'vue';
|
|
|
|
import type {
|
|
DataIndex,
|
|
ColumnType,
|
|
RenderedCell,
|
|
CustomizeComponent,
|
|
CellType,
|
|
DefaultRecordType,
|
|
AlignType,
|
|
CellEllipsisType,
|
|
TransformCellText,
|
|
AdditionalProps,
|
|
} from '../interface';
|
|
import { getPathValue, validateValue } from '../utils/valueUtil';
|
|
import { useInjectSlots } from '../../table/context';
|
|
import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
|
|
import { useInjectHover } from '../context/HoverContext';
|
|
import { useInjectSticky } from '../context/StickyContext';
|
|
import { warning } from '../../vc-util/warning';
|
|
import type { MouseEventHandler } from '../../_util/EventInterface';
|
|
import eagerComputed from '../../_util/eagerComputed';
|
|
|
|
/** Check if cell is in hover range */
|
|
function inHoverRange(cellStartRow: number, cellRowSpan: number, startRow: number, endRow: number) {
|
|
const cellEndRow = cellStartRow + cellRowSpan - 1;
|
|
return cellStartRow <= endRow && cellEndRow >= startRow;
|
|
}
|
|
|
|
function isRenderCell<RecordType = DefaultRecordType>(
|
|
data: RenderedCell<RecordType>,
|
|
): data is RenderedCell<RecordType> {
|
|
return data && typeof data === 'object' && !Array.isArray(data) && !isValidElement(data);
|
|
}
|
|
|
|
export interface CellProps<RecordType = DefaultRecordType> {
|
|
prefixCls?: string;
|
|
record?: RecordType;
|
|
/** `column` index is the real show rowIndex */
|
|
index?: number;
|
|
/** the index of the record. For the render(value, record, renderIndex) */
|
|
renderIndex?: number;
|
|
dataIndex?: DataIndex;
|
|
customRender?: ColumnType<RecordType>['customRender'];
|
|
component?: CustomizeComponent;
|
|
colSpan?: number;
|
|
rowSpan?: number;
|
|
ellipsis?: CellEllipsisType;
|
|
align?: AlignType;
|
|
|
|
// Fixed
|
|
fixLeft?: number | false;
|
|
fixRight?: number | false;
|
|
firstFixLeft?: boolean;
|
|
lastFixLeft?: boolean;
|
|
firstFixRight?: boolean;
|
|
lastFixRight?: boolean;
|
|
|
|
// Additional
|
|
/** @private Used for `expandable` with nest tree */
|
|
appendNode?: any;
|
|
|
|
additionalProps?: AdditionalProps;
|
|
|
|
rowType?: 'header' | 'body' | 'footer';
|
|
|
|
isSticky?: boolean;
|
|
|
|
column?: ColumnType<RecordType>;
|
|
|
|
cellType?: 'header' | 'body';
|
|
|
|
transformCellText?: TransformCellText<RecordType>;
|
|
}
|
|
export default defineComponent<CellProps>({
|
|
name: 'Cell',
|
|
props: [
|
|
'prefixCls',
|
|
'record',
|
|
'index',
|
|
'renderIndex',
|
|
'dataIndex',
|
|
'customRender',
|
|
'component',
|
|
'colSpan',
|
|
'rowSpan',
|
|
'fixLeft',
|
|
'fixRight',
|
|
'firstFixLeft',
|
|
'lastFixLeft',
|
|
'firstFixRight',
|
|
'lastFixRight',
|
|
'appendNode',
|
|
'additionalProps',
|
|
'ellipsis',
|
|
'align',
|
|
'rowType',
|
|
'isSticky',
|
|
'column',
|
|
'cellType',
|
|
'transformCellText',
|
|
] as any,
|
|
slots: ['appendNode'],
|
|
setup(props, { slots }) {
|
|
const contextSlots = useInjectSlots();
|
|
const { onHover, startRow, endRow } = useInjectHover();
|
|
const colSpan = computed(() => {
|
|
return (
|
|
props.colSpan ??
|
|
props.additionalProps?.colSpan ??
|
|
(props.additionalProps?.colspan as number)
|
|
);
|
|
});
|
|
const rowSpan = computed(() => {
|
|
return (
|
|
props.rowSpan ??
|
|
props.additionalProps?.rowSpan ??
|
|
(props.additionalProps?.rowspan as number)
|
|
);
|
|
});
|
|
const hovering = eagerComputed(() => {
|
|
const { index } = props;
|
|
return inHoverRange(index, rowSpan.value || 1, startRow.value, endRow.value);
|
|
});
|
|
const supportSticky = useInjectSticky();
|
|
|
|
// ====================== Hover =======================
|
|
const onMouseenter = (event: MouseEvent, mergedRowSpan: number) => {
|
|
const { record, index, additionalProps } = props;
|
|
if (record) {
|
|
onHover(index, index + mergedRowSpan - 1);
|
|
}
|
|
|
|
additionalProps?.onMouseenter?.(event);
|
|
};
|
|
|
|
const onMouseleave: MouseEventHandler = event => {
|
|
const { record, additionalProps } = props;
|
|
if (record) {
|
|
onHover(-1, -1);
|
|
}
|
|
|
|
additionalProps?.onMouseleave?.(event);
|
|
};
|
|
return () => {
|
|
const {
|
|
prefixCls,
|
|
record,
|
|
index,
|
|
renderIndex,
|
|
dataIndex,
|
|
customRender,
|
|
component: Component = 'td',
|
|
fixLeft,
|
|
fixRight,
|
|
firstFixLeft,
|
|
lastFixLeft,
|
|
firstFixRight,
|
|
lastFixRight,
|
|
appendNode = slots.appendNode?.(),
|
|
additionalProps = {},
|
|
ellipsis,
|
|
align,
|
|
rowType,
|
|
isSticky,
|
|
column = {},
|
|
cellType,
|
|
} = props;
|
|
const cellPrefixCls = `${prefixCls}-cell`;
|
|
|
|
// ==================== Child Node ====================
|
|
let cellProps: CellType;
|
|
let childNode;
|
|
const children = slots.default?.();
|
|
if (validateValue(children) || cellType === 'header') {
|
|
childNode = children;
|
|
} else {
|
|
const value = getPathValue(record, dataIndex);
|
|
|
|
// Customize render node
|
|
childNode = value;
|
|
if (customRender) {
|
|
const renderData = customRender({
|
|
text: value,
|
|
value,
|
|
record,
|
|
index,
|
|
renderIndex,
|
|
column: column.__originColumn__,
|
|
});
|
|
|
|
if (isRenderCell(renderData)) {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
warning(
|
|
false,
|
|
'`columns.customRender` return cell props is deprecated with perf issue, please use `customCell` instead.',
|
|
);
|
|
}
|
|
childNode = renderData.children;
|
|
cellProps = renderData.props;
|
|
} else {
|
|
childNode = renderData;
|
|
}
|
|
}
|
|
|
|
if (
|
|
!(INTERNAL_COL_DEFINE in column) &&
|
|
cellType === 'body' &&
|
|
contextSlots.value.bodyCell &&
|
|
!column.slots?.customRender
|
|
) {
|
|
const child = renderSlot(
|
|
contextSlots.value,
|
|
'bodyCell',
|
|
{
|
|
text: value,
|
|
value,
|
|
record,
|
|
index,
|
|
column: column.__originColumn__,
|
|
},
|
|
() => {
|
|
const fallback = childNode === undefined ? value : childNode;
|
|
return [
|
|
(typeof fallback === 'object' && isValidElement(fallback)) ||
|
|
typeof fallback !== 'object'
|
|
? fallback
|
|
: null,
|
|
];
|
|
},
|
|
);
|
|
childNode = flattenChildren(child as any);
|
|
}
|
|
/** maybe we should @deprecated */
|
|
if (props.transformCellText) {
|
|
childNode = props.transformCellText({
|
|
text: childNode,
|
|
record,
|
|
index,
|
|
column: column.__originColumn__,
|
|
});
|
|
}
|
|
}
|
|
|
|
// Not crash if final `childNode` is not validate ReactNode
|
|
if (
|
|
typeof childNode === 'object' &&
|
|
!Array.isArray(childNode) &&
|
|
!isValidElement(childNode)
|
|
) {
|
|
childNode = null;
|
|
}
|
|
|
|
if (ellipsis && (lastFixLeft || firstFixRight)) {
|
|
childNode = <span class={`${cellPrefixCls}-content`}>{childNode}</span>;
|
|
}
|
|
|
|
if (Array.isArray(childNode) && childNode.length === 1) {
|
|
childNode = childNode[0];
|
|
}
|
|
const {
|
|
colSpan: cellColSpan,
|
|
rowSpan: cellRowSpan,
|
|
style: cellStyle,
|
|
class: cellClassName,
|
|
...restCellProps
|
|
} = cellProps || {};
|
|
const mergedColSpan = (cellColSpan !== undefined ? cellColSpan : colSpan.value) ?? 1;
|
|
const mergedRowSpan = (cellRowSpan !== undefined ? cellRowSpan : rowSpan.value) ?? 1;
|
|
|
|
if (mergedColSpan === 0 || mergedRowSpan === 0) {
|
|
return null;
|
|
}
|
|
|
|
// ====================== Fixed =======================
|
|
const fixedStyle: CSSProperties = {};
|
|
const isFixLeft = typeof fixLeft === 'number' && supportSticky.value;
|
|
const isFixRight = typeof fixRight === 'number' && supportSticky.value;
|
|
|
|
if (isFixLeft) {
|
|
fixedStyle.position = 'sticky';
|
|
fixedStyle.left = `${fixLeft}px`;
|
|
}
|
|
if (isFixRight) {
|
|
fixedStyle.position = 'sticky';
|
|
|
|
fixedStyle.right = `${fixRight}px`;
|
|
}
|
|
|
|
// ====================== Align =======================
|
|
const alignStyle: CSSProperties = {};
|
|
if (align) {
|
|
alignStyle.textAlign = align;
|
|
}
|
|
|
|
// ====================== Render ======================
|
|
let title: string;
|
|
const ellipsisConfig: CellEllipsisType = ellipsis === true ? { showTitle: true } : ellipsis;
|
|
if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
|
|
if (typeof childNode === 'string' || typeof childNode === 'number') {
|
|
title = childNode.toString();
|
|
} else if (isVNode(childNode) && typeof childNode.children === 'string') {
|
|
title = childNode.children;
|
|
}
|
|
}
|
|
|
|
const componentProps = {
|
|
title,
|
|
...restCellProps,
|
|
...additionalProps,
|
|
colSpan: mergedColSpan !== 1 ? mergedColSpan : null,
|
|
rowSpan: mergedRowSpan !== 1 ? mergedRowSpan : null,
|
|
class: classNames(
|
|
cellPrefixCls,
|
|
{
|
|
[`${cellPrefixCls}-fix-left`]: isFixLeft && supportSticky.value,
|
|
[`${cellPrefixCls}-fix-left-first`]: firstFixLeft && supportSticky.value,
|
|
[`${cellPrefixCls}-fix-left-last`]: lastFixLeft && supportSticky.value,
|
|
[`${cellPrefixCls}-fix-right`]: isFixRight && supportSticky.value,
|
|
[`${cellPrefixCls}-fix-right-first`]: firstFixRight && supportSticky.value,
|
|
[`${cellPrefixCls}-fix-right-last`]: lastFixRight && supportSticky.value,
|
|
[`${cellPrefixCls}-ellipsis`]: ellipsis,
|
|
[`${cellPrefixCls}-with-append`]: appendNode,
|
|
[`${cellPrefixCls}-fix-sticky`]:
|
|
(isFixLeft || isFixRight) && isSticky && supportSticky.value,
|
|
[`${cellPrefixCls}-row-hover`]: !cellProps && hovering.value,
|
|
},
|
|
additionalProps.class,
|
|
cellClassName,
|
|
),
|
|
onMouseenter: (e: MouseEvent) => {
|
|
onMouseenter(e, mergedRowSpan);
|
|
},
|
|
onMouseleave,
|
|
style: {
|
|
...parseStyleText(additionalProps.style as any),
|
|
...alignStyle,
|
|
...fixedStyle,
|
|
...cellStyle,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<Component {...componentProps}>
|
|
{appendNode}
|
|
{childNode}
|
|
{slots.dragHandle?.()}
|
|
</Component>
|
|
);
|
|
};
|
|
},
|
|
});
|