diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md index c3c6c4e9508..ea1127cdb62 100644 --- a/docs/api/reorder-group.md +++ b/docs/api/reorder-group.md @@ -16,27 +16,71 @@ import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; -The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for this event should be implemented that calls the `complete` method. +The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it in the same or a new position, the `ionReorderEnd` event is dispatched. A handler for this event should be implemented that calls the `complete` method. -The `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index. For example usage of the reorder group, see the [reorder](./reorder) documentation. +The `detail` property of the `ionReorderEnd` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index. For example usage of the reorder group, see the [reorder](./reorder) documentation. ## Interfaces -### ItemReorderEventDetail +### ReorderMoveEventDetail ```typescript -interface ItemReorderEventDetail { +interface ReorderMoveEventDetail { + from: number; + to: number; +} +``` + +### ReorderEndEventDetail + +```typescript +interface ReorderEndEventDetail { from: number; to: number; complete: (data?: boolean | any[]) => any; } ``` -### ItemReorderCustomEvent +### ReorderMoveCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. + +```typescript +interface ReorderMoveCustomEvent extends CustomEvent { + detail: ReorderMoveEventDetail; + target: HTMLIonReorderGroupElement; +} + +``` + +### ReorderEndCustomEvent While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. +```typescript +interface ReorderEndCustomEvent extends CustomEvent { + detail: ReorderEndEventDetail; + target: HTMLIonReorderGroupElement; +} +``` + +### ItemReorderEventDetail (deprecated) + +**_Deprecated_** — Use the `ionReorderEnd` event with `ReorderEndEventDetail` instead. + +```typescript +interface ItemReorderEventDetail { + from: number; + to: number; + complete: (data?: boolean | any[]) => any; +} +``` + +### ItemReorderCustomEvent (deprecated) + +**_Deprecated_** — Use the `ionReorderEnd` event with `ReorderEndCustomEvent` instead. + ```typescript interface ItemReorderCustomEvent extends CustomEvent { detail: ItemReorderEventDetail; diff --git a/docs/api/reorder.md b/docs/api/reorder.md index ad07a4290ea..ea6e6d6f67c 100644 --- a/docs/api/reorder.md +++ b/docs/api/reorder.md @@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a [reorder group](./reorder-group) to provide a visual drag and drop interface. -The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionItemReorder` event will be dispatched from the reorder group and the `complete` method needs to be called. +The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionReorderEnd` event will be dispatched from the reorder group and the `complete` method needs to be called. ## Basic Usage @@ -73,6 +73,29 @@ import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md'; +## Event Handling + +### Using `ionReorderStart` and `ionReorderEnd` + +The `ionReorderStart` event is emitted when the user begins a reorder gesture. This event fires when the user taps and holds an item, before any movement occurs. This is useful for preparing the UI for the reorder operation, such as hiding certain elements or updating the visual state of items. For example, icons in list items can be hidden while they are being dragged and shown again when the reorder is complete. + +The `ionReorderEnd` event is emitted when the user completes the reorder gesture by removing their pointer from the screen. The event includes the `from` and `to` indices of the item, as well as the `complete` method that should be called to finalize the reorder operation. The `from` index will always be the position of the item when the gesture started, while the `to` index will be its final position. This event will fire even if no items have changed position, in which case the `from` and `to` indices will be the same. + +import ReorderStartEndEvents from '@site/static/usage/v8/reorder/reorder-start-end-events/index.md'; + + + +### Using `ionReorderMove` + +The `ionReorderMove` event is emitted continuously during the reorder gesture as the user drags an item. The event includes the `from` and `to` indices of the item. Unlike `ionReorderEnd`, the `from` index in this event represents the last known position of the item (which updates as the item moves), while the `to` index represents its current position. If the item has not changed position since the last event, the `from` and `to` indices will be the same. This event is useful for tracking position changes during the drag operation. For example, the ranking or numbering of items can be updated in real-time as they are being dragged to maintain a logical ascending order. + +:::warning +Do not call the `complete` method during the `ionReorderMove` event as it can break the gesture. +::: + +import ReorderMoveEvent from '@site/static/usage/v8/reorder/reorder-move-event/index.md'; + + ## Usage with Virtual Scroll diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index d3b3d2d7255..c66a906b661 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -50,12 +50,8 @@ module.exports = function (context, options) { await generateMarkdownForVersion(version, npmTag, false); } - let npmTag = 'latest'; - if (currentVersion.banner === 'unreleased') { - npmTag = 'next'; - } else if (currentVersion.path !== undefined) { - npmTag = currentVersion.path.slice(1); - } + // TODO: remove this before merging + let npmTag = '8.6.2-dev.11749759855.198287b7'; // Latest version await generateMarkdownForVersion(currentVersion.path || currentVersion.label, npmTag, true); @@ -145,7 +141,7 @@ ${properties .map((prop) => { const isDeprecated = prop.deprecation !== undefined; - const docs = isDeprecated ? `${prop.docs}\n_Deprecated_ ${prop.deprecation}` : prop.docs; + const docs = isDeprecated ? `${prop.docs}\n\n**_Deprecated_** — ${prop.deprecation}` : prop.docs; return ` ### ${prop.name} ${isDeprecated ? '(deprecated)' : ''} @@ -170,7 +166,15 @@ function renderEvents({ events }) { return ` | Name | Description | Bubbles | | --- | --- | --- | -${events.map((event) => `| \`${event.event}\` | ${formatMultiline(event.docs)} | \`${event.bubbles}\` |`).join('\n')}`; +${events + .map((event) => { + const isDeprecated = event.deprecation !== undefined; + const docs = isDeprecated ? `${event.docs}\n\n**_Deprecated_** — ${event.deprecation}` : event.docs; + return `| \`${event.event}\` ${isDeprecated ? '**(deprecated)**' : ''} | ${formatMultiline(docs)} | \`${ + event.bubbles + }\` |`; + }) + .join('\n')}`; } /** diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index d11eda773bb..ce0fa3400b7 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -15,8 +15,8 @@ "@angular/platform-browser": "^19.0.0", "@angular/platform-browser-dynamic": "^19.0.0", "@angular/router": "^19.0.0", - "@ionic/angular": "8.6.0", - "@ionic/core": "8.6.0", + "@ionic/angular": "8.6.2-dev.11749759855.198287b7", + "@ionic/core": "8.6.2-dev.11749759855.198287b7", "ionicons": "8.0.9", "rxjs": "^7.8.1", "tslib": "^2.5.0", diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html index 34f05146a9a..0b612a95b16 100644 --- a/static/code/stackblitz/v8/html/index.html +++ b/static/code/stackblitz/v8/html/index.html @@ -1,8 +1,8 @@ - - + + diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html index af371907653..02586e78152 100644 --- a/static/code/stackblitz/v8/html/index.withContent.html +++ b/static/code/stackblitz/v8/html/index.withContent.html @@ -1,8 +1,8 @@ - - + + diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index ad228f0ae4b..678b625e893 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "@ionic/core": "8.6.0", + "@ionic/core": "8.6.2-dev.11749759855.198287b7", "ionicons": "8.0.9" } } diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index 8e0bc61661c..9f50760aa0b 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "8.6.0", - "@ionic/react-router": "8.6.0", + "@ionic/react": "8.6.2-dev.11749759855.198287b7", + "@ionic/react-router": "8.6.2-dev.11749759855.198287b7", "@types/node": "^22.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index 45cd62457cb..ab727966240 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "8.6.0", - "@ionic/vue-router": "8.6.0", + "@ionic/vue": "8.6.2-dev.11749759855.198287b7", + "@ionic/vue-router": "8.6.2-dev.11749759855.198287b7", "vue": "^3.2.25", "vue-router": "4.5.1" }, diff --git a/static/demos/api/reorder/index.html b/static/demos/api/reorder/index.html index 695a50c2701..3903da1eb7d 100644 --- a/static/demos/api/reorder/index.html +++ b/static/demos/api/reorder/index.html @@ -99,7 +99,7 @@ function toggleReorder() { const reorderGroup = document.getElementById('reorder'); reorderGroup.disabled = !reorderGroup.disabled; - reorderGroup.addEventListener('ionItemReorder', ({ detail }) => { + reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => { detail.complete(true); }); } diff --git a/static/usage/v8/reorder/basic/angular/example_component_html.md b/static/usage/v8/reorder/basic/angular/example_component_html.md index 60795eaa3ff..8b1294bd101 100644 --- a/static/usage/v8/reorder/basic/angular/example_component_html.md +++ b/static/usage/v8/reorder/basic/angular/example_component_html.md @@ -2,7 +2,7 @@ - + Item 1 diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md index 541fd9c6df3..5553891178a 100644 --- a/static/usage/v8/reorder/basic/angular/example_component_ts.md +++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md @@ -1,12 +1,12 @@ ```ts import { Component } from '@angular/core'; import { - ItemReorderEventDetail, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, + ReorderEndCustomEvent, } from '@ionic/angular/standalone'; @Component({ @@ -16,14 +16,14 @@ import { imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { - handleReorder(event: CustomEvent) { + handleReorderEnd(event: ReorderEndCustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', event.detail.from, 'to', event.detail.to); // Finish the reorder and position the item in the DOM based on // where the gesture ended. This method can also be called directly - // by the reorder group + // by the reorder group. event.detail.complete(); } } diff --git a/static/usage/v8/reorder/basic/demo.html b/static/usage/v8/reorder/basic/demo.html index f9afb7d750a..1286e714222 100644 --- a/static/usage/v8/reorder/basic/demo.html +++ b/static/usage/v8/reorder/basic/demo.html @@ -6,12 +6,18 @@ Reorder - - + + @@ -56,14 +62,14 @@ diff --git a/static/usage/v8/reorder/basic/javascript.md b/static/usage/v8/reorder/basic/javascript.md index fe805d10fc6..4b07e8ad210 100644 --- a/static/usage/v8/reorder/basic/javascript.md +++ b/static/usage/v8/reorder/basic/javascript.md @@ -32,14 +32,14 @@ diff --git a/static/usage/v8/reorder/basic/react.md b/static/usage/v8/reorder/basic/react.md index abe3b187294..397ebc395d7 100644 --- a/static/usage/v8/reorder/basic/react.md +++ b/static/usage/v8/reorder/basic/react.md @@ -1,23 +1,23 @@ ```tsx import React from 'react'; -import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; function Example() { - function handleReorder(event: CustomEvent) { + function handleReorderEnd(event: ReorderEndCustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', event.detail.from, 'to', event.detail.to); // Finish the reorder and position the item in the DOM based on // where the gesture ended. This method can also be called directly - // by the reorder group + // by the reorder group. event.detail.complete(); } return ( {/* The reorder gesture is disabled by default, enable it to drag and drop items */} - + Item 1 diff --git a/static/usage/v8/reorder/basic/vue.md b/static/usage/v8/reorder/basic/vue.md index 0ac2374089f..285a1c347be 100644 --- a/static/usage/v8/reorder/basic/vue.md +++ b/static/usage/v8/reorder/basic/vue.md @@ -2,7 +2,7 @@ diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md index 6d1fb8960bd..cc6692c862d 100644 --- a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md +++ b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md @@ -2,7 +2,7 @@ - + Item 1 diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md index e9bdafd6df8..4d0472c0bd3 100644 --- a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md +++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md @@ -1,13 +1,13 @@ ```ts import { Component } from '@angular/core'; import { - ItemReorderEventDetail, IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, + ReorderEndCustomEvent, } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; @@ -29,14 +29,14 @@ export class ExampleComponent { addIcons({ pizza }); } - handleReorder(event: CustomEvent) { + handleReorderEnd(event: ReorderEndCustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', event.detail.from, 'to', event.detail.to); // Finish the reorder and position the item in the DOM based on // where the gesture ended. This method can also be called directly - // by the reorder group + // by the reorder group. event.detail.complete(); } } diff --git a/static/usage/v8/reorder/custom-icon/demo.html b/static/usage/v8/reorder/custom-icon/demo.html index ab2c55b9423..ad18dc6b4e6 100644 --- a/static/usage/v8/reorder/custom-icon/demo.html +++ b/static/usage/v8/reorder/custom-icon/demo.html @@ -6,12 +6,18 @@ Reorder - - + + @@ -66,14 +72,14 @@ diff --git a/static/usage/v8/reorder/custom-icon/javascript.md b/static/usage/v8/reorder/custom-icon/javascript.md index d7aa87d8f64..8535da7544a 100644 --- a/static/usage/v8/reorder/custom-icon/javascript.md +++ b/static/usage/v8/reorder/custom-icon/javascript.md @@ -42,14 +42,14 @@ diff --git a/static/usage/v8/reorder/custom-icon/javascript/index_html.md b/static/usage/v8/reorder/custom-icon/javascript/index_html.md index d7aa87d8f64..8535da7544a 100644 --- a/static/usage/v8/reorder/custom-icon/javascript/index_html.md +++ b/static/usage/v8/reorder/custom-icon/javascript/index_html.md @@ -42,14 +42,14 @@ diff --git a/static/usage/v8/reorder/custom-icon/react.md b/static/usage/v8/reorder/custom-icon/react.md index 9103db6029d..f5fe620035b 100644 --- a/static/usage/v8/reorder/custom-icon/react.md +++ b/static/usage/v8/reorder/custom-icon/react.md @@ -1,24 +1,24 @@ ```tsx import React from 'react'; -import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react'; +import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; import { pizza } from 'ionicons/icons'; function Example() { - function handleReorder(event: CustomEvent) { + function handleReorderEnd(event: ReorderEndCustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', event.detail.from, 'to', event.detail.to); // Finish the reorder and position the item in the DOM based on // where the gesture ended. This method can also be called directly - // by the reorder group + // by the reorder group. event.detail.complete(); } return ( {/* The reorder gesture is disabled by default, enable it to drag and drop items */} - + Item 1 diff --git a/static/usage/v8/reorder/custom-icon/vue.md b/static/usage/v8/reorder/custom-icon/vue.md index 87d77e33048..eec6b5222a9 100644 --- a/static/usage/v8/reorder/custom-icon/vue.md +++ b/static/usage/v8/reorder/custom-icon/vue.md @@ -2,7 +2,7 @@ diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md index 2296a5506c4..73fc3967021 100644 --- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md +++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md @@ -4,7 +4,7 @@ - + Item 1 diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md index bdd83c0417f..84dedb755b1 100644 --- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md +++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md @@ -1,7 +1,7 @@ ```ts import { Component } from '@angular/core'; import { - ItemReorderEventDetail, + ReorderEndCustomEvent, IonContent, IonItem, IonLabel, @@ -17,14 +17,14 @@ import { imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { - handleReorder(event: CustomEvent) { + handleReorderEnd(event: ReorderEndCustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', event.detail.from, 'to', event.detail.to); // Finish the reorder and position the item in the DOM based on // where the gesture ended. This method can also be called directly - // by the reorder group + // by the reorder group. event.detail.complete(); } } diff --git a/static/usage/v8/reorder/custom-scroll-target/demo.html b/static/usage/v8/reorder/custom-scroll-target/demo.html index 760fb525d79..c55cdb471a2 100644 --- a/static/usage/v8/reorder/custom-scroll-target/demo.html +++ b/static/usage/v8/reorder/custom-scroll-target/demo.html @@ -6,20 +6,27 @@ Reorder - - + + + + + + + +
+ + + + +
+ + + + + + diff --git a/static/usage/v8/reorder/reorder-move-event/index.md b/static/usage/v8/reorder/reorder-move-event/index.md new file mode 100644 index 00000000000..be938ff393c --- /dev/null +++ b/static/usage/v8/reorder/reorder-move-event/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/reorder/reorder-move-event/javascript.md b/static/usage/v8/reorder/reorder-move-event/javascript.md new file mode 100644 index 00000000000..e559409668b --- /dev/null +++ b/static/usage/v8/reorder/reorder-move-event/javascript.md @@ -0,0 +1,89 @@ +```html + + + + + + +``` diff --git a/static/usage/v8/reorder/reorder-move-event/react.md b/static/usage/v8/reorder/reorder-move-event/react.md new file mode 100644 index 00000000000..39a0680728d --- /dev/null +++ b/static/usage/v8/reorder/reorder-move-event/react.md @@ -0,0 +1,92 @@ +```tsx +import React, { useState } from 'react'; +import { + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ReorderEndCustomEvent, + ReorderMoveCustomEvent, +} from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([ + 'Buy groceries', + 'Call the bank', + 'Finish project report', + 'Book flight tickets', + 'Read a book', + ]); + + function handleReorderMove(event: ReorderMoveCustomEvent) { + const from = event.detail.from; + const to = event.detail.to; + + if (from !== to) { + console.log('Dragged from index', from, 'to', to); + } + + // Get all items and sort by their current id (item-1, item-2, ...) + const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => { + const aNum = parseInt(a.id.replace('item-', ''), 10); + const bNum = parseInt(b.id.replace('item-', ''), 10); + return aNum - bNum; + }); + + // Dragging down: shift up items between from+1 and to, set dragged to to+1 + if (from < to) { + for (let i = from; i <= to; i++) { + const item = itemElements[i]; + const itemNum = item.querySelector('b'); + if (i === from) { + // Dragged item + itemNum!.textContent = String(to + 1); + item.id = `item-${to + 1}`; + } else { + // Items shift up + itemNum!.textContent = String(i); + item.id = `item-${i}`; + } + } + // Dragging up: shift down items between to and from-1, set dragged to to+1 + } else if (from > to) { + for (let i = to; i <= from; i++) { + const item = itemElements[i]; + const itemNum = item.querySelector('b'); + if (i === from) { + // Dragged item + itemNum!.textContent = String(to + 1); + item.id = `item-${to + 1}`; + } else { + // Items shift down + itemNum!.textContent = String(i + 2); + item.id = `item-${i + 2}`; + } + } + } + } + + function handleReorderEnd(event: ReorderEndCustomEvent) { + // Finish the reorder and update the items data + setItems(event.detail.complete(items)); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + {items.map((item, index) => ( + + {index + 1} + {item} + + + ))} + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/reorder/reorder-move-event/vue.md b/static/usage/v8/reorder/reorder-move-event/vue.md new file mode 100644 index 00000000000..cd3518e5aac --- /dev/null +++ b/static/usage/v8/reorder/reorder-move-event/vue.md @@ -0,0 +1,81 @@ +```html + + + +``` diff --git a/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_html.md b/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_html.md new file mode 100644 index 00000000000..7b9be3a150c --- /dev/null +++ b/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html + + + + + @for (item of items; track item; let i = $index) { + + {{ item.label }} + + + + } + + +``` diff --git a/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_ts.md b/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_ts.md new file mode 100644 index 00000000000..ec4ccbdb946 --- /dev/null +++ b/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_ts.md @@ -0,0 +1,62 @@ +```ts +import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core'; +import { + ReorderEndCustomEvent, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + IonIcon, +} from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { caretDown, ellipse, warning } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, IonIcon], +}) +export class ExampleComponent { + items = [ + { label: 'Buy groceries', icon: 'warning', color: 'warning' }, + { label: 'Call the bank', icon: 'warning', color: 'warning' }, + { label: 'Finish project report', icon: 'ellipse', color: 'light' }, + { label: 'Book flight tickets', icon: 'ellipse', color: 'light' }, + { label: 'Read a book', icon: 'caret-down', color: 'secondary' }, + ]; + + @ViewChildren('icon', { read: ElementRef }) icons!: QueryList>; + + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretDown, ellipse, warning }); + } + + handleReorderStart() { + console.log('Reorder started'); + + // Hide the icons when the reorder starts + this.icons.forEach((icon) => { + icon.nativeElement.style.opacity = '0'; + }); + } + + handleReorderEnd(event: ReorderEndCustomEvent) { + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Show the icons again + this.icons.forEach((icon) => { + icon.nativeElement.style.opacity = '1'; + }); + + // Finish the reorder and update the items data + this.items = event.detail.complete(this.items); + } +} +``` diff --git a/static/usage/v8/reorder/reorder-start-end-events/demo.html b/static/usage/v8/reorder/reorder-start-end-events/demo.html new file mode 100644 index 00000000000..e9f13e05552 --- /dev/null +++ b/static/usage/v8/reorder/reorder-start-end-events/demo.html @@ -0,0 +1,88 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + + Buy groceries + + + + + Call the bank + + + + + Finish project report + + + + + Book flight tickets + + + + + Read a book + + + + + +
+ + + + + + diff --git a/static/usage/v8/reorder/reorder-start-end-events/index.md b/static/usage/v8/reorder/reorder-start-end-events/index.md new file mode 100644 index 00000000000..5e7d48127d1 --- /dev/null +++ b/static/usage/v8/reorder/reorder-start-end-events/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/reorder/reorder-start-end-events/javascript/index_html.md b/static/usage/v8/reorder/reorder-start-end-events/javascript/index_html.md new file mode 100644 index 00000000000..a98397de9e1 --- /dev/null +++ b/static/usage/v8/reorder/reorder-start-end-events/javascript/index_html.md @@ -0,0 +1,57 @@ +```html + + + + + Buy groceries + + + + + Call the bank + + + + + Finish project report + + + + + Book flight tickets + + + + + Read a book + + + + + + + +``` diff --git a/static/usage/v8/reorder/reorder-start-end-events/javascript/index_ts.md b/static/usage/v8/reorder/reorder-start-end-events/javascript/index_ts.md new file mode 100644 index 00000000000..c9e03106886 --- /dev/null +++ b/static/usage/v8/reorder/reorder-start-end-events/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { caretDown, ellipse, warning } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons get mapped + * to "caret-down", "ellipse", "warning" keys. + * Alternatively, developers can do: + * addIcons({ 'caret-down': caretDown, + * "ellipse": ellipse, "warning": warning }); + */ +addIcons({ caretDown, ellipse, warning }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/reorder/reorder-start-end-events/react.md b/static/usage/v8/reorder/reorder-start-end-events/react.md new file mode 100644 index 00000000000..c70462d5b32 --- /dev/null +++ b/static/usage/v8/reorder/reorder-start-end-events/react.md @@ -0,0 +1,67 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; +import { caretDown, ellipse, warning } from 'ionicons/icons'; + +interface TodoItem { + label: string; + icon: string; + color: string; +} + +function Example() { + const [items, setItems] = useState([ + { label: 'Buy groceries', icon: warning, color: 'warning' }, + { label: 'Call the bank', icon: warning, color: 'warning' }, + { label: 'Finish project report', icon: ellipse, color: 'light' }, + { label: 'Book flight tickets', icon: ellipse, color: 'light' }, + { label: 'Read a book', icon: caretDown, color: 'secondary' }, + ]); + const iconsRef = useRef<(HTMLIonIconElement | null)[]>([]); + + function handleReorderStart() { + console.log('Reorder started'); + + // Hide the icons when the reorder starts + iconsRef.current.forEach((icon) => { + if (icon) icon.style.opacity = '0'; + }); + } + + function handleReorderEnd(event: ReorderEndCustomEvent) { + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Show the icons again + iconsRef.current.forEach((icon) => { + if (icon) icon.style.opacity = '1'; + }); + + // Finish the reorder and update the items data + setItems(event.detail.complete(items)); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + {items.map((item: TodoItem, i: number) => ( + + {item.label} + { + iconsRef.current[i] = el; + }} + /> + + + ))} + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/reorder/reorder-start-end-events/vue.md b/static/usage/v8/reorder/reorder-start-end-events/vue.md new file mode 100644 index 00000000000..0648e09bddc --- /dev/null +++ b/static/usage/v8/reorder/reorder-start-end-events/vue.md @@ -0,0 +1,59 @@ +```html + + + +``` diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md index aca04f1ee5a..dbfe175895b 100644 --- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md +++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md @@ -1,7 +1,7 @@ ```html - + Item 1 diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md index 496e59f15e1..1e1448b61a0 100644 --- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md +++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md @@ -1,13 +1,13 @@ ```ts import { Component } from '@angular/core'; import { - ItemReorderEventDetail, IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, + ReorderEndCustomEvent, } from '@ionic/angular/standalone'; @Component({ @@ -19,14 +19,14 @@ import { export class ExampleComponent { public isDisabled = true; - handleReorder(event: CustomEvent) { + handleReorderEnd(event: ReorderEndCustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', event.detail.from, 'to', event.detail.to); // Finish the reorder and position the item in the DOM based on // where the gesture ended. This method can also be called directly - // by the reorder group + // by the reorder group. event.detail.complete(); } diff --git a/static/usage/v8/reorder/toggling-disabled/demo.html b/static/usage/v8/reorder/toggling-disabled/demo.html index 46481ab3dc0..582d502ac69 100644 --- a/static/usage/v8/reorder/toggling-disabled/demo.html +++ b/static/usage/v8/reorder/toggling-disabled/demo.html @@ -6,8 +6,14 @@ Reorder - - + + @@ -63,14 +69,14 @@ diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_html.md b/static/usage/v8/reorder/updating-data/angular/example_component_html.md index 873daed0e90..6326a17c949 100644 --- a/static/usage/v8/reorder/updating-data/angular/example_component_html.md +++ b/static/usage/v8/reorder/updating-data/angular/example_component_html.md @@ -2,7 +2,7 @@ - + @for (item of items; track item) { Item {{ item }} diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md index f70f2bed206..d476b6fdfa0 100644 --- a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md +++ b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md @@ -1,12 +1,12 @@ ```ts import { Component } from '@angular/core'; import { - ItemReorderEventDetail, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, + ReorderEndCustomEvent, } from '@ionic/angular/standalone'; @Component({ @@ -18,7 +18,7 @@ import { export class ExampleComponent { items = [1, 2, 3, 4, 5]; - handleReorder(event: CustomEvent) { + handleReorderEnd(event: ReorderEndCustomEvent) { // Before complete is called with the items they will remain in the // order before the drag console.log('Before complete', this.items); diff --git a/static/usage/v8/reorder/updating-data/demo.html b/static/usage/v8/reorder/updating-data/demo.html index 8f0ca1b7cda..1b01783c7ca 100644 --- a/static/usage/v8/reorder/updating-data/demo.html +++ b/static/usage/v8/reorder/updating-data/demo.html @@ -6,12 +6,18 @@ Reorder - - + + @@ -34,7 +40,7 @@ let items = [1, 2, 3, 4, 5]; reorderItems(items); - reorderGroup.addEventListener('ionItemReorder', ({ detail }) => { + reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => { // Before complete is called with the items they will remain in the // order before the drag console.log('Before complete', items); diff --git a/static/usage/v8/reorder/updating-data/javascript.md b/static/usage/v8/reorder/updating-data/javascript.md index 901bf08a970..28ef0989eea 100644 --- a/static/usage/v8/reorder/updating-data/javascript.md +++ b/static/usage/v8/reorder/updating-data/javascript.md @@ -10,7 +10,7 @@ let items = [1, 2, 3, 4, 5]; reorderItems(items); - reorderGroup.addEventListener('ionItemReorder', ({ detail }) => { + reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => { // Before complete is called with the items they will remain in the // order before the drag console.log('Before complete', items); diff --git a/static/usage/v8/reorder/updating-data/react.md b/static/usage/v8/reorder/updating-data/react.md index acbf422d017..36b9049e56a 100644 --- a/static/usage/v8/reorder/updating-data/react.md +++ b/static/usage/v8/reorder/updating-data/react.md @@ -1,11 +1,11 @@ ```tsx import React, { useState } from 'react'; -import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; function Example() { const [items, setItems] = useState([1, 2, 3, 4, 5]); - function handleReorder(event: CustomEvent) { + function handleReorderEnd(event: ReorderEndCustomEvent) { // Before complete is called with the items they will remain in the // order before the drag console.log('Before complete', items); @@ -22,7 +22,7 @@ function Example() { return ( {/* The reorder gesture is disabled by default, enable it to drag and drop items */} - + {items.map((item) => ( Item {item} diff --git a/static/usage/v8/reorder/updating-data/vue.md b/static/usage/v8/reorder/updating-data/vue.md index 024caf38347..188df041bc2 100644 --- a/static/usage/v8/reorder/updating-data/vue.md +++ b/static/usage/v8/reorder/updating-data/vue.md @@ -2,7 +2,7 @@ diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_html.md b/static/usage/v8/reorder/wrapper/angular/example_component_html.md index cf856309098..5abb818e8b3 100644 --- a/static/usage/v8/reorder/wrapper/angular/example_component_html.md +++ b/static/usage/v8/reorder/wrapper/angular/example_component_html.md @@ -2,7 +2,7 @@ - + Item 1 diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md index 541fd9c6df3..5553891178a 100644 --- a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md +++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md @@ -1,12 +1,12 @@ ```ts import { Component } from '@angular/core'; import { - ItemReorderEventDetail, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, + ReorderEndCustomEvent, } from '@ionic/angular/standalone'; @Component({ @@ -16,14 +16,14 @@ import { imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], }) export class ExampleComponent { - handleReorder(event: CustomEvent) { + handleReorderEnd(event: ReorderEndCustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', event.detail.from, 'to', event.detail.to); // Finish the reorder and position the item in the DOM based on // where the gesture ended. This method can also be called directly - // by the reorder group + // by the reorder group. event.detail.complete(); } } diff --git a/static/usage/v8/reorder/wrapper/demo.html b/static/usage/v8/reorder/wrapper/demo.html index 1322a6ee6fd..796f7ee54e9 100644 --- a/static/usage/v8/reorder/wrapper/demo.html +++ b/static/usage/v8/reorder/wrapper/demo.html @@ -6,12 +6,18 @@ Reorder - - + + @@ -61,14 +67,14 @@ diff --git a/static/usage/v8/reorder/wrapper/javascript.md b/static/usage/v8/reorder/wrapper/javascript.md index e4e024ee2d4..3cd52cb1e8c 100644 --- a/static/usage/v8/reorder/wrapper/javascript.md +++ b/static/usage/v8/reorder/wrapper/javascript.md @@ -37,14 +37,14 @@ diff --git a/static/usage/v8/reorder/wrapper/react.md b/static/usage/v8/reorder/wrapper/react.md index f70ba499316..50210964586 100644 --- a/static/usage/v8/reorder/wrapper/react.md +++ b/static/usage/v8/reorder/wrapper/react.md @@ -1,23 +1,23 @@ ```tsx import React from 'react'; -import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; function Example() { - function handleReorder(event: CustomEvent) { + function handleReorderEnd(event: ReorderEndCustomEvent) { // The `from` and `to` properties contain the index of the item // when the drag started and ended, respectively console.log('Dragged from index', event.detail.from, 'to', event.detail.to); // Finish the reorder and position the item in the DOM based on // where the gesture ended. This method can also be called directly - // by the reorder group + // by the reorder group. event.detail.complete(); } return ( {/* The reorder gesture is disabled by default, enable it to drag and drop items */} - + Item 1 diff --git a/static/usage/v8/reorder/wrapper/vue.md b/static/usage/v8/reorder/wrapper/vue.md index fd157186093..1b114e575de 100644 --- a/static/usage/v8/reorder/wrapper/vue.md +++ b/static/usage/v8/reorder/wrapper/vue.md @@ -2,7 +2,7 @@