-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add dnd from dimensions to specific position in layout axis (#575)
In order to drag/drop a dimension item from the dimension panel to a specific position in a layout axis, both the dimension panel and the layout components need to share the same dnd library (react-beautiful-dnd "rbd"). * The rbd context has been moved up in the hierarchy to contain both the dimension panel and layout as children, so they can drag/drop to each other * DndContext component sets up the rbd context and handles the drop events * Created custom dnd dimension panel/list/item components to properly configure rbd * DimensionsPanel is simpler, as all the item properties have been moved to the DndDimensionList component * DndDimensionItem sets up a clone item that will stay in the Dimension Panel while the original item is being dragged (due to rbd not supporting this "toolbox" behaviour out-of-the-box) * styles for the dnd dimension list and panel are copied from the shared components in @dhis2/analytics * use css modules Implements [DHIS2-8121]
- Loading branch information
1 parent
3d249a6
commit 7c573b7
Showing
19 changed files
with
529 additions
and
214 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
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
76 changes: 76 additions & 0 deletions
76
packages/app/src/components/DimensionsPanel/DndDimensionItem.js
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,76 @@ | ||
| import React, { Component } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { Draggable } from 'react-beautiful-dnd' | ||
| import { DimensionItem } from '@dhis2/analytics' | ||
|
|
||
| import styles from './styles/DndDimensionItem.module.css' | ||
|
|
||
| export class DndDimensionItem extends Component { | ||
| render = () => { | ||
| const { | ||
| id, | ||
| index, | ||
| name, | ||
| isSelected, | ||
| isLocked, | ||
| isDeactivated, | ||
| isRecommended, | ||
| onClick, | ||
| onOptionsClick, | ||
| } = this.props | ||
|
|
||
| const itemCommonProps = { | ||
| name, | ||
| isSelected, | ||
| isLocked, | ||
| isDeactivated, | ||
| isRecommended, | ||
| } | ||
|
|
||
| return ( | ||
| <Draggable | ||
| draggableId={id} | ||
| index={index} | ||
| isDragDisabled={isSelected || isDeactivated || isLocked} | ||
| > | ||
| {(provided, snapshot) => ( | ||
| <> | ||
| <DimensionItem | ||
| innerRef={provided.innerRef} | ||
| {...provided.draggableProps} | ||
| {...provided.dragHandleProps} | ||
| id={id} | ||
| className={ | ||
| snapshot.isDragging ? styles.dragging : null | ||
| } | ||
| onClick={onClick} | ||
| onOptionsClick={onOptionsClick} | ||
| {...itemCommonProps} | ||
| /> | ||
| {snapshot.isDragging && ( | ||
| <DimensionItem | ||
| id={`dimension-item-clone-${id}`} | ||
| className={styles.dimensionItemClone} | ||
| {...itemCommonProps} | ||
| /> | ||
| )} | ||
| </> | ||
| )} | ||
| </Draggable> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| DndDimensionItem.propTypes = { | ||
| id: PropTypes.string, | ||
| index: PropTypes.number, | ||
| isDeactivated: PropTypes.bool, | ||
| isLocked: PropTypes.bool, | ||
| isRecommended: PropTypes.bool, | ||
| isSelected: PropTypes.bool, | ||
| name: PropTypes.string, | ||
| onClick: PropTypes.func, | ||
| onOptionsClick: PropTypes.func, | ||
| } | ||
|
|
||
| export default DndDimensionItem |
Oops, something went wrong.