Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-calendar-timeline
Advanced tools
react-calendar-timeline - npm Package Compare versions
Comparing version 0.24.0-beta.3 to 0.24.0-beta.4
@@ -10,2 +10,80 @@ # Change Log | ||
| ### Custom Headers | ||
| This new feature gives more control to dev to create customizable headers to provide better UI. Now user have more control through a set of new components to render headers. This new feature came with a breaking change though. | ||
| ```jsx | ||
| import Timeline, { | ||
| TimelineHeaders, | ||
| SidebarHeader, | ||
| DateHeader | ||
| } from 'react-calendar-timeline' | ||
| <Timeline> | ||
| <TimelineHeaders> | ||
| <SidebarHeader> | ||
| {({ getRootProps }) => { | ||
| return <div {...getRootProps()}>Left</div> | ||
| }} | ||
| </SidebarHeader> | ||
| <DateHeader unit="primaryHeader" /> | ||
| <DateHeader /> | ||
| <CustomHeader height={50} headerData={{someData: 'data'}} unit="year"> | ||
| {({ | ||
| headerContext: { intervals }, | ||
| getRootProps, | ||
| getIntervalProps, | ||
| showPeriod, | ||
| data, | ||
| }) => { | ||
| return ( | ||
| <div {...getRootProps()}> | ||
| {intervals.map(interval => { | ||
| const intervalStyle = { | ||
| lineHeight: '30px', | ||
| textAlign: 'center', | ||
| borderLeft: '1px solid black', | ||
| cursor: 'pointer', | ||
| backgroundColor: 'Turquoise', | ||
| color: 'white' | ||
| } | ||
| return ( | ||
| <div | ||
| onClick={() => { | ||
| showPeriod(interval.startTime, interval.endTime) | ||
| }} | ||
| {...getIntervalProps({ | ||
| interval, | ||
| style: intervalStyle | ||
| })} | ||
| > | ||
| <div className="sticky"> | ||
| {interval.startTime.format('YYYY')} | ||
| </div> | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| ) | ||
| }} | ||
| </CustomHeader> | ||
| </TimelineHeaders> | ||
| </Timeline> | ||
| ``` | ||
| Check out the new docs before please [here](https://github.com/namespace-ee/react-calendar-timeline/tree/custom-headers#timeline-headers) | ||
| #### removed props | ||
| - `stickyOffset` and `stickyHeader` now you can make your header sticky by following this [examples](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples#custom-item-rendering) | ||
| - `headerRef` to get the headerRef you need to pass ref callback to `TimelineHeader` component | ||
| - `headerLabelGroupHeight` and `headerLabelHeight` now you can pass a `height` prop to both `CustomHeader` and `DateHeader` | ||
| - `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals | ||
| ## 0.23.1 | ||
| - fix height calculation of stacked items is off if no item is visible in a line @Felix-N | ||
| - fix Unsubscribing markers correctly when unmounted @gaston-niglia | ||
| ## 0.23.0 | ||
@@ -12,0 +90,0 @@ |
@@ -91,2 +91,8 @@ 'use strict'; | ||
| }); | ||
| if (!leftSidebarHeader) { | ||
| leftSidebarHeader = _react2.default.createElement(_SidebarHeader2.default, null); | ||
| } | ||
| if (!rightSidebarHeader && this.props.rightSidebarWidth) { | ||
| rightSidebarHeader = _react2.default.createElement(_SidebarHeader2.default, { variant: 'right' }); | ||
| } | ||
| return _react2.default.createElement( | ||
@@ -93,0 +99,0 @@ 'div', |
@@ -255,3 +255,2 @@ 'use strict'; | ||
| var dragGroupDelta = _this2.dragGroupDelta(e); | ||
| console.log(dragGroupDelta); | ||
| if (_this2.props.moveResizeValidator) { | ||
@@ -258,0 +257,0 @@ dragTime = _this2.props.moveResizeValidator('move', _this2.props.item, dragTime); |
@@ -979,6 +979,4 @@ 'use strict'; | ||
| null, | ||
| _react2.default.createElement(_SidebarHeader2.default, null), | ||
| _react2.default.createElement(_DateHeader2.default, { unit: 'primaryHeader' }), | ||
| _react2.default.createElement(_DateHeader2.default, null), | ||
| _this4.props.rightSidebarWidth ? _react2.default.createElement(_SidebarHeader2.default, { variant: 'right' }) : null | ||
| _react2.default.createElement(_DateHeader2.default, null) | ||
| ); | ||
@@ -985,0 +983,0 @@ }; |
@@ -316,3 +316,3 @@ 'use strict'; | ||
| var curHeight = groupHeight; | ||
| var verticalMargin = lineHeight - item.dimensions.height; | ||
| var verticalMargin = (lineHeight - item.dimensions.height) / 2; | ||
| if (item.dimensions.stack && item.dimensions.top === null) { | ||
@@ -337,3 +337,3 @@ item.dimensions.top = groupTop + verticalMargin; | ||
| item.dimensions.top = collidingItem.dimensions.top + lineHeight; | ||
| curHeight = Math.max(curHeight, item.dimensions.top + item.dimensions.height - groupTop); | ||
| curHeight = Math.max(curHeight, item.dimensions.top + item.dimensions.height + verticalMargin - groupTop); | ||
| } | ||
@@ -401,5 +401,6 @@ } while (collidingItem); | ||
| } else { | ||
| groupHeights.push(Math.max(groupHeight + verticalMargin, lineHeight)); | ||
| groupHeights.push(Math.max(groupHeight, lineHeight)); | ||
| } | ||
| } | ||
| return { | ||
@@ -406,0 +407,0 @@ height: sum(groupHeights), |
| { | ||
| "name": "react-calendar-timeline", | ||
| "version": "0.24.0-beta.3", | ||
| "version": "0.24.0-beta.4", | ||
| "description": "react calendar timeline", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
| # React Calendar Timeline | ||
| A modern and responsive react timeline component. | ||
| A modern and responsive React timeline component. | ||
@@ -19,3 +19,3 @@  | ||
| `react-calendar-timeline` has `react`, `react-dom`, [`moment`](http://momentjs.com/) and [`interactjs`](http://interactjs.io/docs/) as peer dependencies. | ||
| `react-calendar-timeline` has [react](https://reactjs.org/), [react-dom](https://reactjs.org/docs/react-dom.html), [`moment`](http://momentjs.com/) and [`interactjs`](http://interactjs.io/docs/) as peer dependencies. | ||
@@ -92,3 +92,3 @@ # Usage | ||
| If you use right sidebar, you can pass optional `rightTitle` property here. | ||
| If you use the right sidebar, you can pass optional `rightTitle` property here. | ||
| If you want to overwrite the calculated height with a custom height, you can pass a `height` property as an int in pixels here. This can be very useful for categorized groups. | ||
@@ -123,3 +123,3 @@ | ||
| The preferred (fastest) option is to give unix timestamps in milliseconds for `start_time` and `end_time`. Objects that convert to them (JavaScript Date or moment()) will also work, but will be a lot slower. | ||
| The preferred (fastest) option is to give Unix timestamps in milliseconds for `start_time` and `end_time`. Objects that convert to them (JavaScript `Date` or `moment()`) will also work, but will be a lot slower. | ||
@@ -132,3 +132,3 @@ ## defaultTimeStart and defaultTimeEnd | ||
| The exact viewport of the calendar. When these are specified, scrolling in the calendar must be orchestrated by the `onTimeChange` function. This parameter expects a unix timestamp in milliseconds. | ||
| The exact viewport of the calendar. When these are specified, scrolling in the calendar must be orchestrated by the `onTimeChange` function. This parameter expects a Unix timestamp in milliseconds. | ||
@@ -202,3 +202,3 @@ **Note that you need to provide either `defaultTimeStart/End` or `visibleTimeStart/End` for the timeline to function** | ||
| How many pixels we can drag the background for it to be counted as a click on the background. Defualt: `3` | ||
| How many pixels we can drag the background for it to be counted as a click on the background. Default `3` | ||
@@ -350,5 +350,5 @@ ## canMove | ||
| Render prop function used to render a customized item. The function provides multiple paramerters that can be used to render each item. | ||
| Render prop function used to render a customized item. The function provides multiple parameters that can be used to render each item. | ||
| Paramters provided to the function has two types: context params which have the state of the item and timeline, and prop getters functions | ||
| Parameters provided to the function has two types: context params which have the state of the item and timeline, and prop getters functions | ||
@@ -406,3 +406,3 @@ #### Render props params | ||
| * key: item id | ||
| * ref: function to get item referance | ||
| * ref: function to get item reference | ||
| * className: classnames to be applied to the item | ||
@@ -417,5 +417,5 @@ * onMouseDown: event handler | ||
| \*\* _the given styles will only override the styles that are not a requirement for postioning the item. Other styles like `color`, `radius` and others_ | ||
| \*\* _the given styles will only override the styles that are not a requirement for positioning the item. Other styles like `color`, `radius` and others_ | ||
| These properties can be override using the prop argument with proprties: | ||
| These properties can be override using the prop argument with properties: | ||
@@ -629,6 +629,6 @@ * className: class names to be added | ||
| {({ styles, date }) => | ||
| // date is value of current date. Use this to render special styles for the marker | ||
| // or any other custom logic based on date: | ||
| // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'} | ||
| return <div style={styles} /> | ||
| // date is value of current date. Use this to render special styles for the marker | ||
| // or any other custom logic based on date: | ||
| // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'} | ||
| <div style={styles} /> | ||
| } | ||
@@ -656,5 +656,3 @@ </TodayMarker> | ||
| <CustomMarker date={today}> | ||
| {({ styles, date }) => | ||
| return <div style={styles} /> | ||
| } | ||
| {({ styles, date }) => <div style={styles} />} | ||
| </CustomMarker> | ||
@@ -689,6 +687,6 @@ | ||
| {({ styles, date }) => | ||
| // date is value of current date. Use this to render special styles for the marker | ||
| // or any other custom logic based on date: | ||
| // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'} | ||
| return <div style={styles} /> | ||
| // date is value of current date. Use this to render special styles for the marker | ||
| // or any other custom logic based on date: | ||
| // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'} | ||
| <div style={styles} /> | ||
| } | ||
@@ -1094,3 +1092,3 @@ </CursorMarker> | ||
| <DateHeader /> | ||
| <CustomHeader headerData={{someData: 'data'}} unit="year"> | ||
| <CustomHeader height={50} headerData={{someData: 'data'}} unit="year"> | ||
| {({ | ||
@@ -1104,6 +1102,5 @@ headerContext: { intervals }, | ||
| return ( | ||
| <div {...getRootProps({ style: { height: 30 } })}> | ||
| <div {...getRootProps()}> | ||
| {intervals.map(interval => { | ||
| const intervalStyle = { | ||
| // height: 30, | ||
| lineHeight: '30px', | ||
@@ -1148,3 +1145,3 @@ textAlign: 'center', | ||
| Now you can use item renderer for rendering items with different colors [itemRenderer](https://github.com/namespace-ee/react-calendar-timeline#itemrenderer). | ||
| Now you can use item renderer for rendering items with different colors [itemRenderer](https://github.com/namespace-ee/react-calendar-timeline#itemrenderer). | ||
| Please refer to [examples](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples#custom-item-rendering) for a sandbox example | ||
@@ -1259,1 +1256,4 @@ | ||
| --> | ||
| ## License | ||
| [MIT licensed](/LICENSE.md). |
@@ -67,2 +67,8 @@ import React from 'react' | ||
| }) | ||
| if(!leftSidebarHeader){ | ||
| leftSidebarHeader= <SidebarHeader/> | ||
| } | ||
| if(!rightSidebarHeader && this.props.rightSidebarWidth){ | ||
| rightSidebarHeader = <SidebarHeader variant="right"/> | ||
| } | ||
| return ( | ||
@@ -69,0 +75,0 @@ <div |
@@ -264,3 +264,2 @@ import { Component } from 'react' | ||
| let dragGroupDelta = this.dragGroupDelta(e) | ||
| console.log(dragGroupDelta) | ||
| if (this.props.moveResizeValidator) { | ||
@@ -267,0 +266,0 @@ dragTime = this.props.moveResizeValidator( |
@@ -927,6 +927,4 @@ import PropTypes from 'prop-types' | ||
| <TimelineHeaders> | ||
| <SidebarHeader /> | ||
| <DateHeader unit="primaryHeader" /> | ||
| <DateHeader /> | ||
| {this.props.rightSidebarWidth ? <SidebarHeader variant="right"/> : null} | ||
| </TimelineHeaders> | ||
@@ -933,0 +931,0 @@ ) |
@@ -316,3 +316,3 @@ import moment from 'moment' | ||
| let curHeight = groupHeight | ||
| let verticalMargin = lineHeight - item.dimensions.height | ||
| let verticalMargin = (lineHeight - item.dimensions.height) / 2 | ||
| if (item.dimensions.stack && item.dimensions.top === null) { | ||
@@ -343,3 +343,3 @@ item.dimensions.top = groupTop + verticalMargin | ||
| curHeight, | ||
| item.dimensions.top + item.dimensions.height - groupTop | ||
| item.dimensions.top + item.dimensions.height + verticalMargin - groupTop | ||
| ) | ||
@@ -404,5 +404,6 @@ } | ||
| } else { | ||
| groupHeights.push(Math.max(groupHeight + verticalMargin, lineHeight)) | ||
| groupHeights.push(Math.max(groupHeight, lineHeight)) | ||
| } | ||
| } | ||
| return { | ||
@@ -409,0 +410,0 @@ height: sum(groupHeights), |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.66%
442943
- Lines of code
- increased by0.06%
9330
No dependency changes