Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[swapello] fix card unable to drag issue #2173

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[swapello] fix card unable to drag issue #2173

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
53394c0
draft to modify style
AddisonYan Jul 11, 2024
e6d31d4
remove draft style, extract droppable
AddisonYan Jul 13, 2024
312b075
remove unused line
AddisonYan Jul 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 217 additions & 39 deletions examples/waspello/src/cards/MainPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useRef, useContext } from 'react'
import React, { useState, useRef, useContext, useEffect } from 'react'
import { Plus, X, MoreHorizontal } from 'react-feather'
import { Popover } from 'react-tiny-popover'
import classnames from 'classnames'
Expand Down Expand Up @@ -109,7 +109,7 @@ const MainPage = ({ user }) => {
</div>

<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="board" direction="horizontal" type="BOARD" >
<StrictModeDroppable droppableId="board" direction="horizontal" type="BOARD" >
{(provided, snapshot) => (
<PositionProvider items={listsSortedByPos}>
<div id='board' className='u-fancy-scrollbar'
Expand All @@ -127,13 +127,29 @@ const MainPage = ({ user }) => {
</div>
</PositionProvider>
)}
</Droppable>
</StrictModeDroppable>
</DragDropContext>

</UserPageLayout>
)
}

export const StrictModeDroppable = ({ children, ...props }) => {
infomiho marked this conversation as resolved.
Show resolved Hide resolved
const [enabled, setEnabled] = useState(false);
useEffect(() => {
const animation = requestAnimationFrame(() => setEnabled(true));
return () => {
cancelAnimationFrame(animation);
setEnabled(false);
};
}, []);
if (!enabled) {
return null;
}
return <Droppable {...props}>{children}</Droppable>;
};


const Lists = ({ lists, listIdToCardsMap }) => {
// TODO(matija): what if some of the props is empty? Although we make sure not to add it
// to DOM in that case.
Expand All @@ -147,8 +163,176 @@ const Lists = ({ lists, listIdToCardsMap }) => {
})
}

// const List = ({ list, index, cards }) => {
infomiho marked this conversation as resolved.
Show resolved Hide resolved
// const [isPopoverOpen, setIsPopoverOpen] = useState(false)
// const [isHeaderTargetShown, setIsHeaderTargetShown] = useState(true);
// const [isInEditMode, setIsInEditMode] = useState(false);
// const { getPosOfItemInsertedInAnotherListAfter } = useContext(PositionContext);

// const textAreaRef = useRef(null);

// const handleListNameUpdated = async (listId, newName) => {
// try {
// await updateList({ listId, data: { name: newName } })
// } catch (err) {
// window.alert('Error while updating list name: ' + err.message)
// } finally {
// setIsHeaderTargetShown(true)
// }
// }

// const handleAddCard = async () => {
// setIsInEditMode(true);
// setIsPopoverOpen(false);
// }

// const handleCopyList = async (listId, idx) => {
// try {
// await createListCopy({ listId, pos: getPosOfItemInsertedInAnotherListAfter(idx) });
// } catch (err) {
// window.alert('Error while copying list: ' + err.message)
// }

// setIsPopoverOpen(false);
// }

// const handleDeleteList = async (listId) => {
// try {
// await deleteList({ listId })
// } catch (err) {
// window.alert('Error while deleting list: ' + err.message)
// }
// setIsPopoverOpen(false)
// }

// const handleHeadingClicked = (e) => {
// setIsHeaderTargetShown(false);
// textAreaRef?.current?.focus();
// };

// const ListMenu = () => {
// return (
// <div className='popover-menu'>
// <div className='popover-header'>
// <div className='popover-header-item'>
// <button className='popover-header-close-btn dark-hover fake-invisible-item'>
// <X size={16}/>
// </button>
// </div>
// <span className='popover-header-title popover-header-item'>List&nbsp;actions</span>
// <div className='popover-header-item'>
// <button
// className='popover-header-close-btn dark-hover'
// onClick={() => setIsPopoverOpen(false)}
// >
// <X size={16}/>
// </button>
// </div>
// </div>
// <div className='popover-content'>
// <ul className='popover-content-list'>
// <li>
// <button onClick={() => handleAddCard()}>
// Add card...
// </button>
// </li>
// <li>
// <button onClick={() => handleCopyList(list.id, index)}>
// Copy list...
// </button>
// </li>
// <li>
// <button onClick={() => handleDeleteList(list.id)}>
// Delete this list
// </button>
// </li>
// </ul>
// </div>
// </div>
// )
// }

// return (
// <Draggable
// key={list.id}
// draggableId={`listDraggable-${list.id}`}
// index={index}
// >
// {(provided, snapshot) => (
// <div className='list-wrapper'
// ref={provided.innerRef}
// {...provided.draggableProps}
// {...provided.dragHandleProps}
// >
// <div className='list'>
// <div className='list-header'>
// {isHeaderTargetShown ? (
// <div
// className="list-header-target"
// onClick={(e) => handleHeadingClicked(e)}
// ></div>
// ) : (
// <></>
// )}
// <textarea
// className='list-header-name mod-list-name'
// onBlur={(e) => handleListNameUpdated(list.id, e.target.value)}
// defaultValue={ list.name }
// ref={textAreaRef}
// />
// <div className='list-header-extras'>
// <Popover
// isOpen={isPopoverOpen}
// onClickOutside={() => setIsPopoverOpen(false)}
// positions={['bottom', 'right', 'left']}
// align='start'
// padding={6}
// content={<ListMenu/>}
// >
// <div
// className='list-header-extras-menu dark-hover'
// onClick={() => setIsPopoverOpen(!isPopoverOpen)}
// >
// <MoreHorizontal size={16}/>
// </div>
// </Popover>
// </div>
// </div> {/* eof list-header */}

// <StrictModeDroppable
// droppableId={`${list.id}`}
// direction="vertical"
// type="CARD"
// >
// {(provided, snapshot) => (
// <div className='cards'
// ref={provided.innerRef}
// {...provided.droppableProps}
// >
// { cards && <Cards cards={cards} /> }
// {provided.placeholder}
// </div>
// )}
// </StrictModeDroppable>

// <div className='card-composer-container'>
// <PositionProvider items={cards}>
// <AddCard
// listId={list.id}
// isInEditMode={isInEditMode}
// setIsInEditMode={setIsInEditMode}
// />
// </PositionProvider>
// </div>
// </div>
// </div>
// )}
// </Draggable>
// )
// }

const List = ({ list, index, cards }) => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false)
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [isHeaderTargetShown, setIsHeaderTargetShown] = useState(true);
const [isInEditMode, setIsInEditMode] = useState(false);
const { getPosOfItemInsertedInAnotherListAfter } = useContext(PositionContext);
Expand Down Expand Up @@ -176,7 +360,6 @@ const List = ({ list, index, cards }) => {
} catch (err) {
window.alert('Error while copying list: ' + err.message)
}

setIsPopoverOpen(false);
}

Expand All @@ -191,9 +374,17 @@ const List = ({ list, index, cards }) => {

const handleHeadingClicked = (e) => {
setIsHeaderTargetShown(false);
textAreaRef?.current?.focus();
textAreaRef.current.focus();
};

const getListStyle = (isDragging, draggableStyle) => ({
background: isDragging ? "red" : "white",
boxShadow: isDragging ? "0px 0px 10px rgba(0,0,0,0.2)" : "none",
transform: isDragging ? "rotate(3deg)" : "none",
transition: "transform 0.2s ease",
...draggableStyle
});

const ListMenu = () => {
return (
<div className='popover-menu'>
Expand Down Expand Up @@ -237,33 +428,31 @@ const List = ({ list, index, cards }) => {
}

return (
<Draggable
key={list.id}
draggableId={`listDraggable-${list.id}`}
index={index}
>
<Draggable key={list.id} draggableId={`listDraggable-${list.id}`} index={index}>
{(provided, snapshot) => (
<div className='list-wrapper'
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getListStyle(snapshot.isDragging, provided.draggableProps.style)}
>
<div className='list'>
<div className='list-header'>
{isHeaderTargetShown ? (
<div
className="list-header-target"
onClick={(e) => handleHeadingClicked(e)}
></div>
) : (
<></>
)}
<textarea
className='list-header-name mod-list-name'
onBlur={(e) => handleListNameUpdated(list.id, e.target.value)}
defaultValue={ list.name }
ref={textAreaRef}
/>
{isHeaderTargetShown ? (
<div
className="list-header-target"
onClick={handleHeadingClicked}
></div>
) : (
<>
<textarea
className='list-header-name mod-list-name'
onBlur={(e) => handleListNameUpdated(list.id, e.target.value)}
defaultValue={list.name}
ref={textAreaRef}
/>
</>
)}
<div className='list-header-extras'>
<Popover
isOpen={isPopoverOpen}
Expand All @@ -283,7 +472,7 @@ const List = ({ list, index, cards }) => {
</div>
</div> {/* eof list-header */}

<Droppable
<StrictModeDroppable
droppableId={`${list.id}`}
direction="vertical"
type="CARD"
Expand All @@ -293,28 +482,17 @@ const List = ({ list, index, cards }) => {
ref={provided.innerRef}
{...provided.droppableProps}
>
{ cards && <Cards cards={cards} /> }
{cards && <Cards cards={cards} />}
{provided.placeholder}
</div>
)}
</Droppable>

<div className='card-composer-container'>
<PositionProvider items={cards}>
<AddCard
listId={list.id}
isInEditMode={isInEditMode}
setIsInEditMode={setIsInEditMode}
/>
</PositionProvider>
</div>
</StrictModeDroppable>
</div>
</div>
)}
</Draggable>
)
}

const Cards = ({ cards }) => {
return (
<div className='list-cards'>
Expand Down