fix: table style error

This commit is contained in:
sealday 2024-03-30 22:53:30 +08:00
parent 9acb908981
commit 8c4730a4ab

View File

@ -285,7 +285,7 @@ export const Table: any = withDynamicSchemaProps(
const isTableSelector = schema?.parent?.['x-decorator'] === 'TableSelectorProvider'; const isTableSelector = schema?.parent?.['x-decorator'] === 'TableSelectorProvider';
const ctx = isTableSelector ? useTableSelectorContext() : useTableBlockContext(); const ctx = isTableSelector ? useTableSelectorContext() : useTableBlockContext();
const { expandFlag, allIncludesChildren } = ctx; const { expandFlag, allIncludesChildren } = ctx;
const onRowDragEnd = useMemoizedFn(others.onRowDragEnd || (() => { })); const onRowDragEnd = useMemoizedFn(others.onRowDragEnd || (() => {}));
const paginationProps = usePaginationProps(pagination1, pagination2); const paginationProps = usePaginationProps(pagination1, pagination2);
const [expandedKeys, setExpandesKeys] = useState([]); const [expandedKeys, setExpandesKeys] = useState([]);
const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(field?.data?.selectedRowKeys || []); const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(field?.data?.selectedRowKeys || []);
@ -437,40 +437,40 @@ export const Table: any = withDynamicSchemaProps(
const restProps = { const restProps = {
rowSelection: rowSelection rowSelection: rowSelection
? { ? {
type: 'checkbox', type: 'checkbox',
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange(selectedRowKeys: any[], selectedRows: any[]) { onChange(selectedRowKeys: any[], selectedRows: any[]) {
field.data = field.data || {}; field.data = field.data || {};
field.data.selectedRowKeys = selectedRowKeys; field.data.selectedRowKeys = selectedRowKeys;
setSelectedRowKeys(selectedRowKeys); setSelectedRowKeys(selectedRowKeys);
onRowSelectionChange?.(selectedRowKeys, selectedRows); onRowSelectionChange?.(selectedRowKeys, selectedRows);
}, },
getCheckboxProps(record) { getCheckboxProps(record) {
return { return {
'aria-label': `checkbox`, 'aria-label': `checkbox`,
}; };
}, },
renderCell: (checked, record, index, originNode) => { renderCell: (checked, record, index, originNode) => {
if (!dragSort && !showIndex) { if (!dragSort && !showIndex) {
return originNode; return originNode;
} }
const current = props?.pagination?.current; const current = props?.pagination?.current;
const pageSize = props?.pagination?.pageSize || 20; const pageSize = props?.pagination?.pageSize || 20;
if (current) { if (current) {
index = index + (current - 1) * pageSize + 1; index = index + (current - 1) * pageSize + 1;
} else { } else {
index = index + 1; index = index + 1;
} }
if (record.__index) { if (record.__index) {
index = extractIndex(record.__index); index = extractIndex(record.__index);
} }
return ( return (
<div <div
role="button" role="button"
aria-label={`table-index-${index}`} aria-label={`table-index-${index}`}
className={classNames( className={classNames(
checked ? 'checked' : null, checked ? 'checked' : null,
css` css`
position: relative; position: relative;
display: flex; display: flex;
float: left; float: left;
@ -486,8 +486,8 @@ export const Table: any = withDynamicSchemaProps(
} }
} }
`, `,
{ {
[css` [css`
&:hover { &:hover {
.nb-table-index { .nb-table-index {
opacity: 0; opacity: 0;
@ -497,29 +497,29 @@ export const Table: any = withDynamicSchemaProps(
} }
} }
`]: isRowSelect, `]: isRowSelect,
}, },
)} )}
> >
<div <div
className={classNames( className={classNames(
checked ? 'checked' : null, checked ? 'checked' : null,
css` css`
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
`, `,
)} )}
> >
{dragSort && <SortHandle id={getRowKey(record)} />} {dragSort && <SortHandle id={getRowKey(record)} />}
{showIndex && <TableIndex index={index} />} {showIndex && <TableIndex index={index} />}
</div> </div>
{isRowSelect && ( {isRowSelect && (
<div <div
className={classNames( className={classNames(
'nb-origin-node', 'nb-origin-node',
checked ? 'checked' : null, checked ? 'checked' : null,
css` css`
position: absolute; position: absolute;
right: 50%; right: 50%;
transform: translateX(50%); transform: translateX(50%);
@ -527,28 +527,28 @@ export const Table: any = withDynamicSchemaProps(
display: none; display: none;
} }
`, `,
)} )}
> >
{originNode} {originNode}
</div> </div>
)} )}
</div> </div>
); );
}, },
...rowSelection, ...rowSelection,
} }
: undefined, : undefined,
}; };
const SortableWrapper = useCallback<React.FC>( const SortableWrapper = useCallback<React.FC>(
({ children }) => { ({ children }) => {
return dragSort return dragSort
? React.createElement<Omit<SortableContextProps, 'children'>>( ? React.createElement<Omit<SortableContextProps, 'children'>>(
SortableContext, SortableContext,
{ {
items: field.value?.map?.(getRowKey) || [], items: field.value?.map?.(getRowKey) || [],
}, },
children, children,
) )
: React.createElement(React.Fragment, {}, children); : React.createElement(React.Fragment, {}, children);
}, },
[field, dragSort], [field, dragSort],
@ -560,12 +560,12 @@ export const Table: any = withDynamicSchemaProps(
const scroll = useMemo(() => { const scroll = useMemo(() => {
return fixedBlock return fixedBlock
? { ? {
x: 'max-content', x: 'max-content',
y: tableHeight, y: tableHeight,
} }
: { : {
x: 'max-content', x: 'max-content',
}; };
}, [fixedBlock, tableHeight]); }, [fixedBlock, tableHeight]);
return ( return (
<div <div
@ -576,6 +576,7 @@ export const Table: any = withDynamicSchemaProps(
.ant-table-cell { .ant-table-cell {
text-align: center; text-align: center;
} }
}
.ant-table-wrapper { .ant-table-wrapper {
height: 100%; height: 100%;
.ant-spin-nested-loading { .ant-spin-nested-loading {