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.

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

Fix: drag n drop like trello in example #785

Closed
wants to merge 2 commits into from
Closed

Conversation

anup-a
Copy link
Contributor

@anup-a anup-a commented Oct 26, 2022

Description

This change will allow drag n drop like Trello. I did a deep dive into Trello's code, and tried to mimic the feature in same exact manner.

Fixes #338

Type of change

Please select the option(s) that is more relevant.

  • Code cleanup
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

@anup-a
Copy link
Contributor Author

anup-a commented Oct 26, 2022

This is sample demo.

trello.webm

I see no recent activity on the issue, so I gave it a shot. Let me know if this looks good. @matijaSos

Copy link
Contributor

@matijaSos matijaSos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great, awesome work! Added a few minor style suggestions. The last thing here is then to implement tilting of a list while it is being dragged, but we can open a separate issue for that.

@@ -187,6 +191,11 @@ const List = ({ list, index, cards }) => {
setIsPopoverOpen(false)
}

const handleHeadingClick = (e) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const handleHeadingClick = (e) => {
const handleHeadingClicked = (e) => {

We usually write handlers in passive (e.g. "handleButtonPressed"), so just to keep it standardized across the codebase.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@@ -169,12 +169,16 @@ const Lists = ({ lists, listIdToCardsMap }) => {

const List = ({ list, index, cards }) => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false)
const [showHeaderTarget, setShowHeaderTarget] = useState(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const [showHeaderTarget, setShowHeaderTarget] = useState(true);
const [isHeaderTargetShown, setIsHeaderTargetShown] = useState(true);

We usually start boolean values with is, so tried to rewrite it to follow this rule.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@anup-a
Copy link
Contributor Author

anup-a commented Oct 27, 2022

I have updated the code as per comments

@matijaSos
Copy link
Contributor

I have updated the code as per comments

Awesome, will merge today!

@matijaSos
Copy link
Contributor

@anup-a merged! Thanks again for your help, really cool that you fixed this :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[example/Waspello] Make list tilt while dragged'n'dropped like in Trello
2 participants