8000 feat: add reorder ability to ListItemField by odedindi · Pull Request #1255 · react-page/react-page · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat: add reorder ability to ListItemField #1255

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

Conversation

odedindi
Copy link
Contributor

Add the ability to reorder ListItemField items complementary to the ListDelField

Proposed changes

addition of ListSortField, two buttons, with similar logic of ListDelField button that helps user change the order of the items on the list.

Types of changes

On the left side of the ListItemField component, as the delete button is on the right, so to prevent unintended deletions, addition of two buttons that allow a user to reorder the items on the list, either push the item up (if the item not already the first) and down (if the item is not already at the bottom)

  • Bugfix (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)

Checklist

  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)
  • Any dependent changes have been merged and published in downstream modules

@odedindi
Copy link
Contributor Author

along side with sort by up down buttons, a user could sort the list items by dragging them to where in the list he wants to have them
drag demo

@macrozone
Copy link
Collaborator
macrozone commented Nov 30, 2022

along side with sort by up down buttons, a user could sort the list items by dragging them to where in the list he wants to have them drag demo drag demo

this looks awesome! thank you so much!

can you check with a list field where there is only one text field?

@odedindi
Copy link
Contributor Author
odedindi commented Nov 30, 2022

@macrozone that is a good point, i have improved this ui a bit more, by reducing the icon buttons padding to have the buttons showing closer to each other.

also in case that there is less then 2 elements, the sorting feature is disabled.
as well I added default icons for the up and down arrows and the delete button and i think it looks much better this way

small drag demo

@macrozone
Copy link
Collaborator

that looks fantastic!

@macrozone macrozone merged commit d43aa38 into react-page:master Nov 30, 2022
@macrozone
Copy link
Collaborator

🎉 This PR is included in version 5.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Successfully merging this pull request may close these issues.

2 participants
0