diff --git a/README.md b/README.md index d73e4fe..e73323b 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ following props: - `onDragStart` is an optional function which is called once a list item starts being dragged. Receives the dragged item as an argument. - `onDragEnd` is an optional function which is called once a list item is no longer being dragged. Receives the dragged item as an argument. It differs from `onMoveEnd` in that it's called even if the user does not reorder any items in the lists, like when an item is just picked up and then dropped. +- `disabled` is an optional boolean that defaults to false. If set to true, then the element will not be draggable. A DraggableList instance has the following methods: @@ -85,7 +86,7 @@ The template component is passed the following props: to 1 when any item is picked up by the user. - `dragHandleProps` is an object which should be spread as props on the HTML element to be used as the drag handle. The whole item will be draggable by the - wrapped element. See the + wrapped element. It includes a `disabled` property that indicates whether dragging is disabled or not. See the [example](https://github.com/StreakYC/react-draggable-list/blob/master/example/Example.tsx) to see how it should be used. - `commonProps` will be set to the same value passed as the `commonProps` prop diff --git a/example/Example.tsx b/example/Example.tsx index cbce2d6..f80a648 100644 --- a/example/Example.tsx +++ b/example/Example.tsx @@ -167,6 +167,7 @@ export default class Example extends React.Component<{}, ExampleState> { container={() => useContainer ? this._container.current! : document.body } + disabled={false} /> diff --git a/src/index.tsx b/src/index.tsx index 559a5e3..163baf9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -63,6 +63,7 @@ export interface Props { autoScrollMaxSpeed?: number; autoScrollRegionSize?: number; commonProps?: C; + disabled?: boolean; onDragStart?: (draggedItem: I) => void; onDragEnd?: (draggedItem: I) => void; } @@ -90,6 +91,7 @@ export default class DraggableList< autoScrollMaxSpeed: PropTypes.number.isRequired, autoScrollRegionSize: PropTypes.number.isRequired, commonProps: PropTypes.object, + disabled: PropTypes.bool }; public static defaultProps: Partial> = { springConfig: { stiffness: 300, damping: 50 }, @@ -98,6 +100,7 @@ export default class DraggableList< constrainDrag: false, autoScrollMaxSpeed: 15, autoScrollRegionSize: 30, + disabled: false, }; private readonly _itemRefs: MultiRef> = new MultiRef(); @@ -606,10 +609,11 @@ export default class DraggableList< ...selectedStyle, }; const makeDragHandleProps = (getY: () => number | undefined): object => ({ - onMouseDown: (e: React.MouseEvent) => - this._handleMouseDown(key, getY(), e), + onMouseDown: (e: React.MouseEvent) => + !this.props.disabled && this._handleMouseDown(key, getY(), e), onTouchStart: (e: React.TouchEvent) => - this._handleTouchStart(key, getY(), e), + !this.props.disabled && this._handleTouchStart(key, getY(), e), + disabled: this.props.disabled }); const height = this._getItemHeight(key); return (