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

ion-item-move (altering items while re-ordering) #27603

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

sfinktah
Copy link

@sfinktah sfinktah commented Jun 6, 2023

Issue number: #27614


What is the current behavior?

ion-reorder-group (reorderable lists) only emit upon completion

What is the new behavior?

ion-reorder-group emits an ionItemMove event during dragging of a reorderable list item. This event is similar to that dispatched for ionItemReorder, except it includes a "detail.lastTo" property and excludes the complete callback.

<ion-list class="">
    <ion-reorder-group 
        :disabled="false" 
        @ionItemMove="handleMove($event)" 
        @ionItemReorder="handleReorder($event)">
          <MessageListItem @click="onclick" v-for="(message, idx) in messages" :nokey="message.id" :idx="idx" :message="message" />
    </ion-reorder-group>
</ion-list>

Does this introduce a breaking change?

  • Yes
  • No

Other information

Required additions to test code and documention await "approval in principle", and requests to change event or poperty names.

Eye candy

Demonstrating how this PR allows for the dynamic alteration of a list item's properties "in-flight"

image
image

@stackblitz
Copy link

stackblitz bot commented Jun 6, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions bot added package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package labels Jun 6, 2023
@liamdebeasi
Copy link
Contributor

Thanks for the PR! Is there a feature request associated with this code change? If not, could you please create one?

@sfinktah
Copy link
Author

sfinktah commented Jun 7, 2023

Thanks for the PR! Is there a feature request associated with this code change? If not, could you please create one?

No problems, have created #27614 and updated PR description.

@liamdebeasi
Copy link
Contributor

As I noted in #27614 (comment), we think this is a good feature to add to Ionic. The next steps on the Ionic Team's end is to create a design document for how this feature is going to work. This ensures that we build an API that scales well and is easy to use. Once the design document is done, someone from the team will provide feedback on the PR and request any changes. Let me know if you have any questions.

@sfinktah
Copy link
Author

@liamdebeasi No problems, there is definately some discussion that should be taking place. You may have noted (if you viewed my demo at https://ionic-list.nt4.com/ that I added a bit more to your standard reordered list to make it passably "iOS like".

Namely the 104% scale of the item being moved in the list, along with the transitions either side of that event

I also had (in the case of a user clicking an option) to visually present the appearance of items moving position with matching transitions.

None of that required any changes to code (hence, no PRs), though I had to fight some rather poor CSS !important styling and such.

There is definately room for improvement in the design there, and possibly with the way background colors are handled for lists in general, though I'd want to document that more thoroughly before comitting myself.

@sfinktah sfinktah requested a review from a team as a code owner January 24, 2024 17:55
@thetaPC thetaPC removed their request for review February 1, 2024 20:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants