diff --git a/front/src/components/DraggablePostsList.module.scss b/front/src/components/DraggablePostsList.module.scss index 012efb0..33e960c 100644 --- a/front/src/components/DraggablePostsList.module.scss +++ b/front/src/components/DraggablePostsList.module.scss @@ -7,6 +7,12 @@ span { display: flex; align-items: center; + svg { + height: 100%; + width: 1rem; + padding-right: 1rem; + cursor: grab; + } } .posts { diff --git a/front/src/components/DraggablePostsList.tsx b/front/src/components/DraggablePostsList.tsx index babaabf..07bc456 100644 --- a/front/src/components/DraggablePostsList.tsx +++ b/front/src/components/DraggablePostsList.tsx @@ -3,6 +3,7 @@ import { DataRow } from '../api/DataRow'; import { Post } from './display/Post'; import style from './DraggablePostsList.module.scss'; +import { GripVertical } from './display/GripVertical'; type SetRowsFunction = (data: DataRow[]) => void; @@ -10,7 +11,7 @@ function PostDraggableListItem({ item, dragHandleProps, rows, setRows }: { item: function onChange() { rows.splice(rows.indexOf(item), 1); - setRows(rows); + setRows([ ...rows ]); } return ( @@ -18,8 +19,9 @@ function PostDraggableListItem({ item, dragHandleProps, rows, setRows }: { item: + - + ) } @@ -36,7 +38,6 @@ export function DraggablePostsList(props: DraggablePostsList) { template={p => PostDraggableListItem({ ...p, setRows: props.setRows, rows: props.rows })} list={props.rows} onMoveEnd={rows => props.setRows([ ...rows ])} - /> ); } \ No newline at end of file diff --git a/front/src/components/display/GripVertical.tsx b/front/src/components/display/GripVertical.tsx new file mode 100644 index 0000000..7d7debe --- /dev/null +++ b/front/src/components/display/GripVertical.tsx @@ -0,0 +1,9 @@ +import type React from "preact/compat"; + +export function GripVertical(props: React.JSX.SVGAttributes) { + return ( + + + + ) +} \ No newline at end of file