Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: review change for hover
Browse files Browse the repository at this point in the history
henrikmv committed Jul 31, 2024

Verified

This commit was signed with the committer’s verified signature.
raydouglass Ray Douglass
1 parent 60ae38e commit 3002d39
Showing 2 changed files with 56 additions and 10 deletions.
Original file line number Diff line number Diff line change
@@ -13,15 +13,16 @@ type Props = {
handleToggle: (id: string) => () => any,
};

export class DragDropList extends Component<Props> {
moveListItem: (dragIndex: number, hoverIndex: number) => void;
type State = {
isDraggingAny: boolean,
};

constructor(props: Props) {
super(props);
this.moveListItem = this.moveListItem.bind(this);
}
export class DragDropList extends Component<Props, State> {
state = {
isDraggingAny: false,
};

moveListItem(dragIndex: number, hoverIndex: number) {
moveListItem = (dragIndex: number, hoverIndex: number) => {
const { listItems } = this.props;
const dragListItem = listItems[dragIndex];
let sortedList = [];
@@ -33,10 +34,19 @@ export class DragDropList extends Component<Props> {
});

this.props.handleUpdateListOrder(sortedList);
}
};

handleDragStart = () => {
this.setState({ isDraggingAny: true });
};

handleDragEnd = () => {
this.setState({ isDraggingAny: false });
};

render() {
const { listItems } = this.props;
const { isDraggingAny } = this.state;

return (
<DndProvider backend={HTML5Backend}>
@@ -58,6 +68,9 @@ export class DragDropList extends Component<Props> {
moveListItem={this.moveListItem}
handleToggle={this.props.handleToggle}
visible={item.visible}
isDraggingAny={isDraggingAny}
onDragStart={this.handleDragStart}
onDragEnd={this.handleDragEnd}
/>
))}
</TableBody>
Original file line number Diff line number Diff line change
@@ -2,21 +2,45 @@
import React, { useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { DataTableRow, DataTableCell, Checkbox } from '@dhis2/ui';
import { withStyles } from '@material-ui/core/styles';

const ItemTypes = {
LISTITEM: 'listItem',
};

const styles = {
rowWithoutHover: {
'&:hover > td': {
backgroundColor: 'transparent !important',
},
},
};

type Props = {
id: string,
visible: boolean,
text: string,
index: number,
handleToggle: (id: string) => any,
moveListItem: (dragIndex: number, hoverIndex: number) => void,
isDraggingAny: boolean,
onDragStart: () => void,
onDragEnd: () => void,
classes: any,
};

export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveListItem }: Props) => {
const DragDropListItemPlain = ({
id,
index,
text,
visible,
handleToggle,
moveListItem,
isDraggingAny,
onDragStart,
onDragEnd,
classes,
}: Props) => {
const ref = useRef(null);

const [, drop] = useDrop({
@@ -54,7 +78,14 @@ export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveL
const opacity = isDragging ? 0 : 1;

return (
<DataTableRow ref={ref} style={{ opacity }} draggable>
<DataTableRow
ref={ref}
style={{ opacity }}
className={isDraggingAny ? classes.rowWithoutHover : null}
draggable
onDragStart={onDragStart}
onDragEnd={onDragEnd}
>
<DataTableCell>{text}</DataTableCell>
<DataTableCell>
<Checkbox
@@ -67,3 +98,5 @@ export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveL
</DataTableRow>
);
};

export const DragDropListItem = withStyles(styles)(DragDropListItemPlain);

0 comments on commit 3002d39

Please sign in to comment.