Demo/move resize items moves timeline when item close to left right border

[davidbejarcaceres]

Issue

Solution for issue #783.
Use the moveResizeValidator() function to move/resize an item close to the left/right border of the timeline, and auto scroll the timeline bounds to the direction of the move/resize item. By doing this you can keep moving/resizing the item without to stop, move timeline and move/resize again and item.

Overview of PR

• Item.js function this.props.moveResizeValidator() will have the same params for move and resize (action, item, time, resizeEdge, event, this.state.dragStart).
• Demo "Move/Resize item close to left/right border, auto scroll timeline" (scrollCloseToBorders) in "demo/app/demo-scroll-close-to-borders/index.js".
• CodeSandbox demo.

Move item left/right
Here you can see the functionality to auto scroll timeline when move item close to left/right borders:

React-Calendar-Timeline.Move.mp4

Resize edges of item left/right
Now for resize item close to left/right borders:

React-Calendar-Timeline.Resize.mp4

Check tests passed
Yes, no errors when running yarn run test, no many changes to library itself, just extra params to the moveResizeValidator function in Iitem.js.

[lnagel]

This PR has been marked as outdated. Here's why:

This PR modified src/lib/items/Item.js and added a demo at demo/app/demo-scroll-close-to-borders/index.js to enable auto-scrolling the timeline when dragging/resizing items near the viewport edges. The codebase has undergone a major rewrite in v0.30.0-beta.5:

• JS to TypeScript: src/lib/items/Item.js is now src/lib/items/Item.tsx with a completely different structure.
• moment.js to dayjs: The demo code uses moment() which is no longer a dependency.
• Demo restructured: The demo/app/ directory no longer exists; demos have been reorganized.
• moveResizeValidator signature changed: The current TypeScript signature is (action, item, time, resizeEdge?) => number — the extra parameters (event, dragStart) that this PR relied on to access DOM events and compute border proximity are not part of the current API.
• Internal API access: The PR accessed internal state and methods like this.timelineComponent.current.state and this.timelineComponent.current.updateScrollCanvas(), which would need a different approach in the current implementation.

If auto-scroll during drag/resize near borders is still a desired feature, it would need to be reimplemented from scratch against the current TypeScript codebase.

Thank you for the contribution! The idea/fix was appreciated even if the codebase has moved on.