Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
add resize detector
  • Loading branch information
mariusandra committed Jun 13, 2017
1 parent 59b362a commit 9bfe884
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 28 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Expand Up @@ -9,6 +9,7 @@ When you submit a PR, add your changes here!

### Added
- Use `headerLabelFormats` and `subHeaderLabelFormats` to customise the header labels. @Slowyn #68
- Optional pluggable `resizeDetector` to detect when the element's container is resized. @Ziller321 #94

### Fixed
- Fix renders with empty `groups` array. @signalwerk #106
Expand Down
10 changes: 10 additions & 0 deletions README.md
Expand Up @@ -371,6 +371,16 @@ performance problems.
React component that will be used to render the content of groups in the
sidebar. Will be passed the `group` and `isRightSidebar` as props.

### resizeDetector
The component automatically detects when the window has been resized. Optionally you can also detect when the component's DOM element has been resized.
To do this, pass a `resizeDetector`. Since bundling it by default would add ~18kb of minimized JS, you need to opt in to this like so:

```js
import componentResizeDetector from 'react-calendar-timeline/lib/resize-detector/component'

<Timeline resizeDetector={componentResizeDetector} ... />
```

### children
**DEPRECATED. User the sidebarContent prop instead.** All children of the Timeline component will be displayed above the sidebar. Use this to display small filters or so.

Expand Down
3 changes: 3 additions & 0 deletions demo/app/index.js
Expand Up @@ -4,6 +4,7 @@ import React, { Component } from 'react'
import moment from 'moment'

import Timeline from 'react-calendar-timeline'
// import containerResizeDetector from 'react-calendar-timeline/lib/resize-detector/container'

import generateFakeData from './generate-fake-data'

Expand Down Expand Up @@ -152,6 +153,8 @@ export default class App extends Component {

showCursorLine

// resizeDetector={containerResizeDetector}

defaultTimeStart={defaultTimeStart}
defaultTimeEnd={defaultTimeEnd}

Expand Down
3 changes: 3 additions & 0 deletions index.js
@@ -0,0 +1,3 @@
import Timeline from './lib/lib/Timeline'

export default Timeline
42 changes: 14 additions & 28 deletions src/lib/Timeline.js
Expand Up @@ -11,7 +11,7 @@ import HorizontalLines from './lines/HorizontalLines'
import TodayLine from './lines/TodayLine'
import CursorLine from './lines/CursorLine'

import elementResizeDetectorMaker from 'element-resize-detector'
import windowResizeDetector from '../resize-detector/window'

import { getMinUnit, getNextUnit, getParentPosition, _get, _length, stack, nostack, calculateDimensions, getGroupOrders, getVisibleItems, hasSomeParentTheClass } from './utils.js'

Expand Down Expand Up @@ -189,6 +189,11 @@ export default class ReactCalendarTimeline extends Component {
minuteLong: PropTypes.string
}),

resizeDetector: PropTypes.shape({
addListener: PropTypes.func,
removeListener: PropTypes.func
}),

children: PropTypes.node
}

Expand Down Expand Up @@ -234,7 +239,6 @@ export default class ReactCalendarTimeline extends Component {
onCanvasMouseMove: null,

moveResizeValidator: null,
resizeDetectorMethod: 'container',

dayBackground: null,

Expand Down Expand Up @@ -322,26 +326,11 @@ export default class ReactCalendarTimeline extends Component {
componentDidMount () {
this.resize(this.props)

this.resizeEventListener = {
handleEvent: (event) => {
this.resize(this.props)
}
}

if (this.props.resizeDetectorMethod === 'container') {
this.erd = elementResizeDetectorMaker({
strategy: 'scroll'
})

this.erd.listenTo(this.refs.container, () => {
this.resize()
})
}

if (this.props.resizeDetectorMethod === 'window') {
window.addEventListener('resize', this.resizeEventListener)
if (this.props.resizeDetector && this.props.resizeDetector.addListener) {
this.props.resizeDetector.addListener(this)
}

windowResizeDetector.addListener(this)

this.lastTouchDistance = null

Expand All @@ -351,13 +340,11 @@ export default class ReactCalendarTimeline extends Component {
}

componentWillUnmount () {
if (this.props.resizeDetectorMethod === 'container') {
this.erd.removeAllListeners(this.refs.container)
if (this.props.resizeDetector && this.props.resizeDetector.addListener) {
this.props.resizeDetector.removeListener(this)
}

if (this.props.resizeDetectorMethod === 'window') {
window.removeEventListener('resize', this.resizeEventListener)
}
windowResizeDetector.removeListener(this)

this.refs.scrollComponent.removeEventListener('touchstart', this.touchStart)
this.refs.scrollComponent.removeEventListener('touchmove', this.touchMove)
Expand Down Expand Up @@ -440,8 +427,8 @@ export default class ReactCalendarTimeline extends Component {
}
}

resize (props) {
const {width: containerWidth, top: containerTop} = this.refs.container.getBoundingClientRect()
resize = (props = this.props) => {
const { width: containerWidth, top: containerTop } = this.refs.container.getBoundingClientRect()
let width = containerWidth - props.sidebarWidth - props.rightSidebarWidth

const {
Expand Down Expand Up @@ -1111,7 +1098,6 @@ export default class ReactCalendarTimeline extends Component {
height: `${height}px`
}

console.log('render', this)
return (
<div style={this.props.style} ref='container' className='react-calendar-timeline'>
<div style={outerComponentStyle} className='rct-outer'>
Expand Down
17 changes: 17 additions & 0 deletions src/resize-detector/container.js
@@ -0,0 +1,17 @@
import elementResizeDetectorMaker from 'element-resize-detector'

function addListener (component) {
component._erd = elementResizeDetectorMaker({
strategy: 'scroll'
})

component._erd.listenTo(component.refs.container, () => {
component.resize(component.props)
})
}

function removeListener (component) {
component._erd.removeAllListeners(component.refs.container)
}

export default { addListener, removeListener }
15 changes: 15 additions & 0 deletions src/resize-detector/window.js
@@ -0,0 +1,15 @@
function addListener (component) {
component._resizeEventListener = {
handleEvent: (event) => {
component.resize()
}
}

window.addEventListener('resize', component._resizeEventListener)
}

function removeListener (component) {
window.removeEventListener('resize', component._resizeEventListener)
}

export default { addListener, removeListener }
10 changes: 10 additions & 0 deletions yarn.lock
Expand Up @@ -1035,6 +1035,10 @@ base64id@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/base64id/-/base64id-0.1.0.tgz#02ce0fdeee0cef4f40080e1e73e834f0b1bfce3f"

batch-processor@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"

batch@0.5.3:
version "0.5.3"
resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
Expand Down Expand Up @@ -1827,6 +1831,12 @@ ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"

element-resize-detector@^1.1.12:
version "1.1.12"
resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.12.tgz#8b3fd6eedda17f9c00b360a0ea2df9927ae80ba2"
dependencies:
batch-processor "^1.0.0"

emojis-list@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
Expand Down

0 comments on commit 9bfe884

Please sign in to comment.