935a6f4542
* Add analysis tools * Use deep imports to reduce bundle size * Remove tslint config * Remove unused packages * Remove lodash-es references * Use root level mui imports * Remove mui from restricted imports
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { TableBody } from "@material-ui/core";
|
|
import { TableBodyProps } from "@material-ui/core/TableBody";
|
|
import { makeStyles } from "@saleor/theme";
|
|
import { ReorderAction } from "@saleor/types";
|
|
import React from "react";
|
|
import { SortableContainer } from "react-sortable-hoc";
|
|
|
|
const InnerSortableTableBody = SortableContainer<TableBodyProps>(
|
|
({ children, ...props }) => <TableBody {...props}>{children}</TableBody>
|
|
);
|
|
|
|
export interface SortableTableBodyProps {
|
|
onSortEnd: ReorderAction;
|
|
}
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
ghost: {
|
|
"& td": {
|
|
borderBottom: "none"
|
|
},
|
|
background: theme.palette.background.paper,
|
|
fontFamily: theme.typography.fontFamily,
|
|
// FIXME: you damn know what
|
|
// fontSize: theme.overrides.MuiTableCell.root.fontSize,
|
|
opacity: 0.5
|
|
}
|
|
}),
|
|
{ name: "SortableTableBody" }
|
|
);
|
|
|
|
const SortableTableBody: React.FC<Omit<
|
|
TableBodyProps & SortableTableBodyProps,
|
|
"ref"
|
|
>> = props => {
|
|
const classes = useStyles({});
|
|
|
|
return (
|
|
<InnerSortableTableBody
|
|
helperClass={classes.ghost}
|
|
axis="y"
|
|
lockAxis="y"
|
|
useDragHandle
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default SortableTableBody;
|