mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-21 07:02:32 +02:00
feat: add up and down key to change sequence of recipient's list
This commit is contained in:
RaktimaNXG
Generated
+6
@@ -8,6 +8,7 @@
|
||||
"name": "open_sign",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@formkit/auto-animate": "^0.8.1",
|
||||
"@radix-ui/themes": "^2.0.3",
|
||||
"@react-pdf/renderer": "^3.4.0",
|
||||
"@reduxjs/toolkit": "^2.2.1",
|
||||
@@ -2984,6 +2985,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
|
||||
"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
|
||||
},
|
||||
"node_modules/@formkit/auto-animate": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.1.tgz",
|
||||
"integrity": "sha512-0/Z2cuNXWVVIG/l0SpcHAWFhGdvLJ8DRvEfRWvmojtmRWfEy+LWNwgDazbZqY0qQYtkHcoEK3jBLkhiZaB/4Ig=="
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.14",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@formkit/auto-animate": "^0.8.1",
|
||||
"@radix-ui/themes": "^2.0.3",
|
||||
"@react-pdf/renderer": "^3.4.0",
|
||||
"@reduxjs/toolkit": "^2.2.1",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 185 B |
@@ -1,4 +1,5 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||
import {
|
||||
color,
|
||||
darkenColor,
|
||||
@@ -6,9 +7,9 @@ import {
|
||||
isMobile,
|
||||
nameColor
|
||||
} from "../../constant/Utils";
|
||||
import dragIcon from "../../assets/images/dragIcon.png";
|
||||
|
||||
const RecipientList = (props) => {
|
||||
const [animationParent] = useAutoAnimate();
|
||||
const [isHover, setIsHover] = useState();
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
//function for onhover signer name change background color
|
||||
@@ -53,24 +54,39 @@ const RecipientList = (props) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
//handle draggable element drop
|
||||
const handleDrop = (e, index) => {
|
||||
//handle draggable element drop and also used in mobile view on up and down key to chnage sequence of recipient's list
|
||||
const handleChangeSequence = (e, ind, isUp, isDown) => {
|
||||
e.preventDefault();
|
||||
//`e.dataTransfer.getData('text/plain')` is used to get data thet you have save.
|
||||
const draggedItemId = e.dataTransfer.getData("text/plain");
|
||||
let draggedItemId;
|
||||
let index = ind;
|
||||
|
||||
//if isUp true then set item's id and index in mobile view
|
||||
if (isUp) {
|
||||
draggedItemId = index;
|
||||
index = index - 1;
|
||||
}
|
||||
//if isDown true then set item's id and index in mobile view
|
||||
else if (isDown) {
|
||||
draggedItemId = index;
|
||||
index = index + 1;
|
||||
} //else set id on drag element in desktop viiew
|
||||
else {
|
||||
//`e.dataTransfer.getData('text/plain')` is used to get data that you have saved.
|
||||
draggedItemId = e.dataTransfer.getData("text/plain");
|
||||
}
|
||||
|
||||
//convert string to number
|
||||
const intDragId = parseInt(draggedItemId);
|
||||
const draggedItem = props.signersdata.filter(
|
||||
(item) => item.Id === intDragId
|
||||
);
|
||||
//get that item to change position
|
||||
const draggedItem = props.signersdata.filter((_, ind) => ind === intDragId);
|
||||
const remainingItems = props.signersdata.filter(
|
||||
(item) => item.Id !== intDragId
|
||||
(_, ind) => ind !== intDragId
|
||||
);
|
||||
//splice method is used to replace or add new value in array at specific index
|
||||
remainingItems.splice(index, 0, ...draggedItem);
|
||||
props.setSignersData(remainingItems);
|
||||
|
||||
//set current draggable recipient details after replace recipient list
|
||||
//set current draggable recipient details,objectId,index,contract_className ... after replace recipient list
|
||||
props.setSignersData(remainingItems);
|
||||
props.setSignerObjId(remainingItems[index]?.objectId || "");
|
||||
props.setIsSelectId(index);
|
||||
props.setContractName(remainingItems[index]?.className || "");
|
||||
@@ -78,40 +94,36 @@ const RecipientList = (props) => {
|
||||
props.setRoleName(remainingItems[index]?.Role);
|
||||
props.setBlockColor(remainingItems[index]?.blockColor);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{props.signersdata.length > 0 &&
|
||||
props.signersdata.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
ref={animationParent}
|
||||
key={ind}
|
||||
draggable={props.sendInOrder ? true : false}
|
||||
draggable={props.sendInOrder && !isMobile ? true : false}
|
||||
onDragStart={(e) =>
|
||||
props.sendInOrder && handleDragStart(e, obj.Id)
|
||||
props.sendInOrder && !isMobile && handleDragStart(e, ind)
|
||||
}
|
||||
onDragOver={(e) =>
|
||||
props.sendInOrder && !isMobile && handleDragOver(e)
|
||||
}
|
||||
onDrop={(e) =>
|
||||
props.sendInOrder && !isMobile && handleChangeSequence(e, ind)
|
||||
}
|
||||
onDragOver={(e) => props.sendInOrder && handleDragOver(e)}
|
||||
onDrop={(e) => props.sendInOrder && handleDrop(e, ind, obj.Id)}
|
||||
data-tut="reactourFirst"
|
||||
onMouseEnter={() => setIsHover(ind)}
|
||||
onMouseLeave={() => setIsHover(null)}
|
||||
className={props.sendInOrder && "dragCursor"}
|
||||
style={
|
||||
isHover === ind || props.isSelectListId === ind
|
||||
(!isMobile && isHover === ind) || props.isSelectListId === ind
|
||||
? onHoverStyle(ind, obj?.blockColor)
|
||||
: nonHoverStyle(ind)
|
||||
}
|
||||
onClick={() => {
|
||||
props.setSignerObjId(obj?.objectId || "");
|
||||
props.setIsSelectId(ind);
|
||||
props.setContractName(obj?.className || "");
|
||||
props.setUniqueId(obj.Id);
|
||||
props.setRoleName(obj.Role);
|
||||
props.setBlockColor(obj?.blockColor);
|
||||
if (props.handleModal) {
|
||||
props.handleModal();
|
||||
}
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
props.setSignerObjId(obj?.objectId || "");
|
||||
props.setIsSelectId(ind);
|
||||
props.setContractName(obj?.className || "");
|
||||
@@ -207,7 +219,7 @@ const RecipientList = (props) => {
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
obj.Role
|
||||
<span style={{ padding: "3px" }}>{obj.Role}</span>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
@@ -216,15 +228,39 @@ const RecipientList = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
{isMobile && props.sendInOrder && (
|
||||
<img
|
||||
alt="loader img"
|
||||
src={dragIcon}
|
||||
className="widgets"
|
||||
style={{ width: 20, height: 20 }}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
draggable="false"
|
||||
onTouchStart={(e) => e.preventDefault()}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={(e) => {
|
||||
if (ind !== 0) {
|
||||
e.stopPropagation();
|
||||
handleChangeSequence(e, ind, "up");
|
||||
}
|
||||
}}
|
||||
style={{ color: ind === 0 ? "gray" : "black" }}
|
||||
>
|
||||
▲
|
||||
</div>
|
||||
<div
|
||||
onClick={(e) => {
|
||||
if (ind !== props.signersdata.length - 1) {
|
||||
e.stopPropagation();
|
||||
handleChangeSequence(e, ind, null, "down");
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
color:
|
||||
ind === props.signersdata.length - 1 ? "gray" : "black"
|
||||
}}
|
||||
>
|
||||
▼
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{props.handleDeleteUser && (
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user