diff --git a/src/addons/dragAndDrop/EventContainerWrapper.js b/src/addons/dragAndDrop/EventContainerWrapper.js index ad2e2a16a..1b1b03d63 100644 --- a/src/addons/dragAndDrop/EventContainerWrapper.js +++ b/src/addons/dragAndDrop/EventContainerWrapper.js @@ -184,11 +184,13 @@ class EventContainerWrapper extends React.Component { const { dragAndDropAction } = this.context.draggable if (dragAndDropAction.action === 'move') { - if (this.context.draggable.enableDragAutoScroll) - this.updateParentScroll(parent, node) + this.updateParentScroll(parent, node) this.handleMove(box, bounds) } - if (dragAndDropAction.action === 'resize') this.handleResize(box, bounds) + if (dragAndDropAction.action === 'resize') { + this.updateParentScroll(parent, node) + this.handleResize(box, bounds) + } }) selector.on('dropFromOutside', (point) => { diff --git a/src/addons/dragAndDrop/withDragAndDrop.js b/src/addons/dragAndDrop/withDragAndDrop.js index 643b09dc7..8dfd8da6b 100644 --- a/src/addons/dragAndDrop/withDragAndDrop.js +++ b/src/addons/dragAndDrop/withDragAndDrop.js @@ -27,8 +27,6 @@ export default function withDragAndDrop(Calendar) { selectable: PropTypes.oneOf([true, false, 'ignoreEvents']), resizable: PropTypes.bool, - - enableDragAutoScroll: PropTypes.bool, } static defaultProps = { @@ -63,7 +61,6 @@ export default function withDragAndDrop(Calendar) { draggableAccessor: this.props.draggableAccessor, resizableAccessor: this.props.resizableAccessor, dragAndDropAction: this.state, - enableDragAutoScroll: this.props.enableDragAutoScroll, }, } } diff --git a/stories/DragAndDrop.stories.js b/stories/DragAndDrop.stories.js index c74084d63..39a81cc1c 100644 --- a/stories/DragAndDrop.stories.js +++ b/stories/DragAndDrop.stories.js @@ -99,14 +99,3 @@ WithCustomEventWrapper.args = { eventWrapper: customComponents.eventWrapper, }, } - -export const WithAutoScroll = Template.bind({}) -WithAutoScroll.storyName = 'draggable with auto scroll' -WithAutoScroll.args = { - defaultDate: new Date(), - defaultView: Views.WEEK, - events, - onEventDrop: action('event dropped'), - onEventResize: action('event resized'), - enableDragAutoScroll: true, -} diff --git a/stories/addons/dragAndDrop/props/API.stories.mdx b/stories/addons/dragAndDrop/props/API.stories.mdx index 08d8cbed5..cabdf2401 100644 --- a/stories/addons/dragAndDrop/props/API.stories.mdx +++ b/stories/addons/dragAndDrop/props/API.stories.mdx @@ -100,13 +100,3 @@ The <LinkTo kind="addons-drag-and-drop-props" story="resizable">resizable</LinkT Determines if an event is resizable. **Note:** `resizable` events must also be draggable. You cannot resize an event with a <LinkTo kind="addons-drag-and-drop-props" story="draggable-accessor">draggableAccessor</LinkTo> prop of `false`. - -### enableDragAutoScroll - -- type: `boolean` -- default: `false` -- <LinkTo kind="addons-drag-and-drop-props" story="auto-scroll"> - Example - </LinkTo> - -It is used to enable auto scroll when dragging an event. diff --git a/stories/addons/dragAndDrop/props/autoScroll.mdx b/stories/addons/dragAndDrop/props/autoScroll.mdx deleted file mode 100644 index f33880233..000000000 --- a/stories/addons/dragAndDrop/props/autoScroll.mdx +++ /dev/null @@ -1,9 +0,0 @@ -import { Canvas, Story } from '@storybook/addon-docs' -import LinkTo from '@storybook/addon-links/react' - -# enableDragAutoScroll - -- type: `boolean` -- default: `false` - -<Story id="addons-drag-and-drop-props--auto-scroll" /> diff --git a/stories/addons/dragAndDrop/props/autoScroll.stories.js b/stories/addons/dragAndDrop/props/autoScroll.stories.js deleted file mode 100644 index 434377e04..000000000 --- a/stories/addons/dragAndDrop/props/autoScroll.stories.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' -import moment from 'moment' -import { Calendar, momentLocalizer } from '../../../../src' -import Basic from '../../../demos/exampleCode/autoScroll' -import mdx from './autoScroll.mdx' - -export default { - title: 'Addons/Drag and Drop/props', - component: Calendar, - parameters: { - docs: { - page: mdx, - }, - }, -} - -const localizer = momentLocalizer(moment) - -export function AutoScrollAccessor() { - return <Basic localizer={localizer} /> -} -AutoScrollAccessor.storyName = 'autoScroll' diff --git a/stories/demos/exampleCode/autoScroll.js b/stories/demos/exampleCode/autoScroll.js deleted file mode 100644 index f1ea76ea2..000000000 --- a/stories/demos/exampleCode/autoScroll.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { Fragment, useCallback, useMemo, useState } from 'react' -import PropTypes from 'prop-types' -import events from '../../resources/events' -import { Calendar, Views, DateLocalizer } from 'react-big-calendar' -import Card from '../../resources/Card' -import DemoLink from '../../DemoLink.component' -// Storybook cannot alias this, so you would use 'react-big-calendar/lib/addons/dragAndDrop' -import withDragAndDrop from '../../../src/addons/dragAndDrop' -// Storybook cannot alias this, so you would use 'react-big-calendar/lib/addons/dragAndDrop/styles.scss' -import '../../../src/addons/dragAndDrop/styles.scss' - -const DragAndDropCalendar = withDragAndDrop(Calendar) - -const adjEvents = events.map((it, ind) => ({ - ...it, - isDraggable: true, -})) - -export default function AutoScroll({ localizer }) { - const [autoScroll, setAutoScroll] = useState(true) - - const toggleAutoScroll = useCallback(() => setAutoScroll((prev) => !prev), []) - - const defaultDate = useMemo(() => new Date(2015, 3, 12), []) - - return ( - <Fragment> - <DemoLink fileName="dndOutsideSource"> - <Card className="dndOutsideSourceExample"> - <div className="inner"> - <h4>Drag auto scroll</h4> - <p> - Calendar will auto scroll once event is dragged near top or bottom - edge of the calendar - </p> - </div> - - <div> - <label> - <input - type="checkbox" - checked={autoScroll} - onChange={toggleAutoScroll} - /> - Allow auto scroll - </label> - </div> - </Card> - </DemoLink> - <div className="height600"> - <DragAndDropCalendar - defaultDate={defaultDate} - defaultView={Views.WEEK} - draggableAccessor="isDraggable" - events={adjEvents} - localizer={localizer} - enableDragAutoScroll={autoScroll} - /> - </div> - </Fragment> - ) -} -AutoScroll.propTypes = { - localizer: PropTypes.instanceOf(DateLocalizer), -}