React, typescript, redux
Main goal -> Create a custom calculator with react drag and drop.
const onDropHandler = (e: React.DragEvent<HTMLDivElement>) => {
e.stopPropagation();
setOnDragEnterBlock(null);
const blockType = e.dataTransfer.getData('blockType');
const blockInCanvas = canvasList.find((item) => item.blockType === blockType);
const indexBlockInCanvas = canvasList.findIndex((item) => item.blockType === blockType);
const blockInSidebar = sidebarList.find((item) => item.blockType === blockType);
if (onDragEnterBlock === blockType) return;
if (blockInCanvas?.blockType === 'display') return;
if (indexBlockInCanvas > -1) {
if (onDragEnterBlock === 'canvas') {
dispatch(deleteFromCanvas(canvasList[indexBlockInCanvas]));
blockInCanvas && dispatch(addToCanvas({ block: blockInCanvas, position: -1 }));
}
git clone https://github.com/cold-world/react-dnd-calculator.git
cd <project dir>
yarn install
yarn start