Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

merge of latest head changes #1

Merged
merged 17 commits into from
May 6, 2019
Merged

merge of latest head changes #1

merged 17 commits into from
May 6, 2019

Conversation

cutterbl
Copy link
Owner

@cutterbl cutterbl commented May 6, 2019

latest changes from intljusticemission/react-big-calendar

martin-strobel and others added 17 commits February 22, 2019 08:10
on longpress range and therefore start and end variables were empty.
Pass the 'bounds' and 'box' props on slot select in Month view to the handler
Hello,
It looked like PR for this issue (#1054) was abandoned and the bug still exists so I've decided to continue jdaberkow's work.
Also I've added check for `getNow` prop, because when you want to implement timezones you may have different `getNow` function depending on which timezone is selected. When user changes the timezone indicator should move to correct position for that timezone.
This PR does the following:

- Standardizes some documentation language
- Properly sets the Example page's document title
  - Because we use [`html-webpack-plugin`](https://www.npmjs.com/package/html-webpack-plugin) (via [`webpack-atoms`](https://www.npmjs.com/package/webpack-atoms)) the `index.html` file that was here was not being used
  - This properly sets the page's title using the `title` attribute to the `html-webpack-plugin`
I've faced the same problem as @Kerumen described in #1173 as it was long time ago, I've decided to push pr with fix
Some events may have the same date/time, and are meant to represent
point-in-time events, such as deadlines. These are not all day
events, but they also should not be represnted as
`${startTime} - ${endTime}` since the values will be the same.

This will cause an event that is not marked as all day, and where
the start and end are equal, to show as:

```js
// old
`${startTime} - ${endTime}`

// new
`${startTime}`
```
I wanted to make a transition to date elements when they were selected, releasing that a couldn't get the `transition` property working. 

After some digging to my code and react-big-calendar code, I found that after selecting a date `DateContentRow` un&mount  their children components.

This happens due to the call of [this](https://github.com/intljusticemission/react-big-calendar/blob/master/src/DateContentRow.js#L121) `renderDummy` happens after setting `needLimitMeasure` to true in `Month.jsx` after the date is changed.

----------------------------

Prevent re-mount of DateContentRow children when date change in the same month
 * Prevent setting `needLimitMeasure` to true when the month of the date is not changed,
 in order to prevent unmounting and mounting of all the weeks' components.

 * Make it possible to add transition to the background of the event when
 implementing selection of date within the calendar.
`whitespace: nowrap` already exists in rbc-ellipsis
…1206)

Addresses #1205 

This PR would add an optional prop from the withDragAndDrop addon, that would allow users to pass a onDragStart callback to the DragAndDrop calendar, which gets called with `{ event, action, direction }` as its sole parameter.

The change is minimal, meant to serve users who need the hook and otherwise get out of the way. Open to any feedback!
This PR is meant to resolve issue #1090.

## Basic callback for outside drops
The change exposes the `onDropFromOutside` prop on the withDragAndDrop HOC, which takes a callback that fires when an outside draggable item is dropped onto the calendar. The callback receives as a parameter an object with start and end properties that are times based on the drop position and slot size. 

![a4be055597d294f257d59a6fa2982f27](https://user-images.githubusercontent.com/37093582/56405067-a6036e00-6227-11e9-9274-b1846b5b0be8.gif)

It is worth noting that it is entirely up to the user to handle actual event creation based on the callback. All that this API does is allow `draggable` DOM elements to trigger a callback that receives start and end times for the slot an item was dropped on, and a boolean as to whether it's an all-day event. If the user wants to know which event was dropped, they will have to handle that themselves outside of React-Big-Calendar. An example added to the example App demonstrates how this can be done.

## Optional selective dropping
By default, if `onDropFromOutside` prop is passed, all draggable events are droppable on calendar. If the user wishes to discriminate as to whether draggable events are droppable on the calendar, they can pass an additional `onDragOver` callback function. The `onDragOver` callback takes a DragEvent as its sole parameter. If it calls the DragEvent's `preventDefault` method, then the draggable item in question is droppable. If it does not call `preventDefault` during the function call, it will not be droppable.

![e374b60b55809f471b2f275d7f166278](https://user-images.githubusercontent.com/37093582/56405161-3b9efd80-6228-11e9-9b0b-2c925f371eb1.gif)

An example was also added to the examples App, this one labelled `Addon: Drag and Drop (from outside calendar). The GIFs show this example in action. 

I also added the following comments into the withDragAndDrop HOC by way of documentation.

```
 * Additionally, this HOC adds the callback props `onDropFromOutside` and `onDragOver`. 
 * By default, the calendar will not respond to outside draggable items being dropped
 * onto it. However, if `onDropFromOutside` callback is passed, then when draggable 
 * DOM elements are dropped on the calendar, the callback will fire, receiving an 
 * object with start and end times, and an allDay boolean.
 *
 * If `onDropFromOutside` is passed, but `onDragOver` is not, any draggable event will be
 * droppable  onto the calendar by default. On the other hand, if an `onDragOver` callback
 * *is* passed, then it can discriminate as to whether a draggable item is droppable on the
 * calendar. To designate a draggable item as droppable, call `event.preventDefault`
 * inside `onDragOver`. If `event.preventDefault` is not called in the `onDragOver`
 * callback, then the draggable item will not be droppable on the calendar.
```

Hopefully this gives users the flexibility they need, without getting react-big-calendar overly involved with managing outside drag and drop scenarios. Any feedback/discussion/harangues are welcome!
@cutterbl cutterbl merged commit f7b48fe into cutterbl:master May 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.