test
/
digital.solutions.test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add grip element to draggable post item

This commit is contained in:
b1ek 2024-11-11 20:42:58 +10:00
parent 1617846d86
commit 42ca88f627
Signed by: blek
GPG Key ID: A622C22C9BC616B2
3 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/components/DraggablePostsList.module.scss
View File

@ -7,6 +7,12 @@
span {
display: flex;
align-items: center;
svg {
height: 100%;
width: 1rem;
padding-right: 1rem;
cursor: grab;
}
}
.posts {

7
front/src/components/DraggablePostsList.tsx
View File

@ -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:
<span>
<label for={`row-list-${item.id}`} style={{ display: 'none' }}>Select</label>
<input type='checkbox' id={`row-list-${item.id}`} onChange={onChange}/>
<GripVertical {...dragHandleProps} />
</span>
<Post className={style.posts} row={item} {...dragHandleProps} />
<Post className={style.posts} row={item} />
</div>
)
}
@ -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 ])}
/>
);
}

9
front/src/components/display/GripVertical.tsx Normal file
View File

@ -0,0 +1,9 @@
import type React from "preact/compat";
export function GripVertical(props: React.JSX.SVGAttributes<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16" {...props}>
<path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
</svg>
)
}