fix: table style error
This commit is contained in:
parent
9acb908981
commit
8c4730a4ab
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user