-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Showing
7 changed files
with
334 additions
and
183 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| Refactor to use `@dnd-kit` library for the internal drag and drop @sneridagh | ||
|
|
||
| ## Breaking notes: | ||
|
|
||
| The Grid block edit component has been heavily refactored, we changed the drag and drop library that the block is using. | ||
| Instead of using `react-beautiful-dnd` library now it uses `@dnd-kit` library. | ||
| You should expect HTML structure and classe name changes inside this component due to this change. | ||
| Please make sure that you haven't customized anything relying in neither structure or class names (such as styling). | ||
| Also, we splitted the internal components below the edit component of the Grid block. | ||
| If you've customized any of them for some reason, your component should still work, but without the refactoring, it will be still using `react-beautiful-dnd` library. | ||
| If you want to update your customization, you'll need to update them appropiately following the changes made in the #87 PR. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import { Grid } from 'semantic-ui-react'; | ||
| import { | ||
| DndContext, | ||
| closestCenter, | ||
| KeyboardSensor, | ||
| PointerSensor, | ||
| useSensor, | ||
| useSensors, | ||
| } from '@dnd-kit/core'; | ||
| import { | ||
| SortableContext, | ||
| sortableKeyboardCoordinates, | ||
| horizontalListSortingStrategy, | ||
| } from '@dnd-kit/sortable'; | ||
| import { SortableItem } from './SortableItem'; | ||
| import { reorderArray } from '@plone/volto/helpers/Utils/Utils'; | ||
|
|
||
| // Fix internal pointer sensors by adding a custom one that bails off given a exclusion list | ||
| // https://github.com/clauderic/dnd-kit/issues/477 | ||
| class GridCellPointerSensor extends PointerSensor { | ||
| static activators = [ | ||
| { | ||
| eventName: 'onPointerDown', | ||
| handler: ({ nativeEvent: event }) => { | ||
| if ( | ||
| !event.isPrimary || | ||
| event.button !== 0 || | ||
| isInteractiveElement(event.target) | ||
| ) { | ||
| return false; | ||
| } | ||
| // if (!isInteractiveElement(event.target)) { | ||
| // console.log(event.target); | ||
| // } | ||
| return true; | ||
| }, | ||
| }, | ||
| ]; | ||
| } | ||
|
|
||
| function isInteractiveElement(element) { | ||
| const interactiveElements = [ | ||
| 'button', | ||
| 'input', | ||
| 'textarea', | ||
| 'select', | ||
| 'option', | ||
| 'svg', | ||
| 'path', | ||
| ]; | ||
|
|
||
| if (interactiveElements.includes(element.tagName.toLowerCase())) { | ||
| return true; | ||
| } | ||
|
|
||
| return false; | ||
| } | ||
|
|
||
| const Cells = (props) => { | ||
| const { block, onChangeBlock, onChangeSelectedColumnItem, data } = props; | ||
|
|
||
| const columns = data.columns; | ||
|
|
||
| const sensors = useSensors( | ||
| useSensor(GridCellPointerSensor, { | ||
| // Require the mouse to move by 1 pixels before activating | ||
| activationConstraint: { | ||
| distance: 1, | ||
| }, | ||
| }), | ||
| useSensor(KeyboardSensor, { | ||
| coordinateGetter: sortableKeyboardCoordinates, | ||
| }), | ||
| ); | ||
|
|
||
| const onDragEnd = (event) => { | ||
| const { active, over } = event; | ||
|
|
||
| const indexActive = active.data.current.sortable.index; | ||
| const indexOver = over.data.current.sortable.index; | ||
|
|
||
| if (active.id !== over.id) { | ||
| onChangeBlock(block, { | ||
| ...data, | ||
| columns: reorderArray(columns, indexActive, indexOver), | ||
| }); | ||
|
|
||
| onChangeSelectedColumnItem(indexOver); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <DndContext | ||
| sensors={sensors} | ||
| collisionDetection={closestCenter} | ||
| onDragEnd={onDragEnd} | ||
| > | ||
| <SortableContext | ||
| items={columns?.map((item) => item.id) || []} | ||
| strategy={horizontalListSortingStrategy} | ||
| > | ||
| <Grid stackable stretched columns={columns ? columns.length : 0}> | ||
| {columns?.map((item, index) => { | ||
| item = { ...item, block: item.id }; | ||
| return ( | ||
| <SortableItem | ||
| {...props} | ||
| key={item.id} | ||
| id={item.id} | ||
| index={index} | ||
| item={item} | ||
| /> | ||
| ); | ||
| })} | ||
| </Grid> | ||
| </SortableContext> | ||
| </DndContext> | ||
| ); | ||
| }; | ||
|
|
||
| export default Cells; |
Oops, something went wrong.