From 2b97864ddc534b08a2b1291613554b88822fa6f6 Mon Sep 17 00:00:00 2001 From: markstock Date: Thu, 5 Mar 2020 17:38:29 +0800 Subject: [PATCH 1/2] Add minHeight Props to Timeline to set the minimum height of the timeline scroll body --- README.md | 3 ++ __fixtures__/stateAndProps.js | 1 + .../__snapshots__/stack-items.js.snap | 34 +++++++++---------- __tests__/utils/calendar/stack-items.js | 7 ++++ demo/app/demo-main/index.js | 1 + src/lib/Timeline.js | 7 ++++ src/lib/utility/calendar.js | 6 ++-- 7 files changed, 40 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index daa482dbb..aecac2232 100644 --- a/README.md +++ b/README.md @@ -186,6 +186,9 @@ Everything passed here will be displayed above the right sidebar. Use this to di Snapping unit when dragging items. Defaults to `15 * 60 * 1000` or 15min. When so, the items will snap to 15min intervals when dragging. +# minHeight +The minimum height, in pixels, of a timeline body. Default to `20`. + ## minResizeWidth The minimum width, in pixels, of a timeline entry when it's possible to resize. If not reached, you must zoom in to resize more. Default to `20`. diff --git a/__fixtures__/stateAndProps.js b/__fixtures__/stateAndProps.js index 6cc7746fa..9968faa5f 100644 --- a/__fixtures__/stateAndProps.js +++ b/__fixtures__/stateAndProps.js @@ -7,6 +7,7 @@ export const visibleTimeEnd = 1540587600000 export const props = { keys: defaultKeys, lineHeight: 30, + minHeight: 0, stackItems: true, itemHeightRatio: 0.75, visibleTimeEnd, diff --git a/__tests__/utils/calendar/__snapshots__/stack-items.js.snap b/__tests__/utils/calendar/__snapshots__/stack-items.js.snap index 9d0000a46..fef782d42 100644 --- a/__tests__/utils/calendar/__snapshots__/stack-items.js.snap +++ b/__tests__/utils/calendar/__snapshots__/stack-items.js.snap @@ -5,10 +5,10 @@ Object { "dimensionItems": Array [ Object { "dimensions": Object { - "collisionLeft": 1540543600000, + "collisionLeft": 1540540000000, "collisionWidth": 6803877, - "height": 22.5, - "left": 4472.222222222223, + "height": 0, + "left": 4347.222222222223, "order": Object { "group": Object { "id": "1", @@ -16,7 +16,7 @@ Object { "index": 0, }, "stack": true, - "top": 3.75, + "top": 15, "width": 236.24572916666602, }, "id": "0", @@ -25,7 +25,7 @@ Object { "dimensions": Object { "collisionLeft": 1540532800000, "collisionWidth": 21203877, - "height": 22.5, + "height": 0, "left": 4097.222222222223, "order": Object { "group": Object { @@ -34,7 +34,7 @@ Object { "index": 0, }, "stack": true, - "top": 33.75, + "top": 15, "width": 736.245729166666, }, "id": "5", @@ -43,7 +43,7 @@ Object { "dimensions": Object { "collisionLeft": 1540550800000, "collisionWidth": 24803877, - "height": 22.5, + "height": 0, "left": 4722.222222222223, "order": Object { "group": Object { @@ -52,7 +52,7 @@ Object { "index": 0, }, "stack": true, - "top": 3.75, + "top": 15, "width": 861.245729166666, }, "id": "6", @@ -61,7 +61,7 @@ Object { "dimensions": Object { "collisionLeft": 1540570000000, "collisionWidth": 14875919, - "height": 22.5, + "height": 0, "left": 5388.888888888889, "order": Object { "group": Object { @@ -70,7 +70,7 @@ Object { "index": 0, }, "stack": true, - "top": 33.75, + "top": 15, "width": 516.5249652777784, }, "id": "1", @@ -79,7 +79,7 @@ Object { "dimensions": Object { "collisionLeft": 1540620000000, "collisionWidth": 20397548, - "height": 22.5, + "height": 0, "left": 7125, "order": Object { "group": Object { @@ -88,7 +88,7 @@ Object { "index": 0, }, "stack": true, - "top": 3.75, + "top": 15, "width": 708.2481944444444, }, "id": "2", @@ -97,7 +97,7 @@ Object { "dimensions": Object { "collisionLeft": 1540656000000, "collisionWidth": 20397548, - "height": 22.5, + "height": 0, "left": 8375, "order": Object { "group": Object { @@ -106,23 +106,23 @@ Object { "index": 2, }, "stack": true, - "top": 93.75, + "top": 75, "width": 625, }, "id": "3", }, ], "groupHeights": Array [ - 60, + 30, 30, 30, ], "groupTops": Array [ 0, + 30, 60, - 90, ], - "height": 120, + "height": 90, } `; diff --git a/__tests__/utils/calendar/stack-items.js b/__tests__/utils/calendar/stack-items.js index fb3f07ff5..4b36f54e6 100644 --- a/__tests__/utils/calendar/stack-items.js +++ b/__tests__/utils/calendar/stack-items.js @@ -18,6 +18,7 @@ describe('stackItems', () => { state.canvasTimeStart, state.canvasTimeEnd, props.keys, + props.minHeight, props.lineHeight, props.itemHeightRatio, props.stackItems, @@ -39,6 +40,7 @@ describe('stackItems', () => { state.canvasTimeStart, state.canvasTimeEnd, propsNoStack.keys, + propsNoStack.minHeight, propsNoStack.lineHeight, propsNoStack.itemHeightRatio, propsNoStack.stackItems, @@ -60,7 +62,9 @@ describe('stackItems', () => { stateMoveItem.canvasTimeStart, stateMoveItem.canvasTimeEnd, props.keys, + props.minHeight, props.lineHeight, + props.minHeight, props.itemHeightRatio, props.stackItems, stateMoveItem.draggingItem, @@ -81,6 +85,7 @@ describe('stackItems', () => { stateResizeItemLeft.canvasTimeStart, stateResizeItemLeft.canvasTimeEnd, props.keys, + props.minHeight, props.lineHeight, props.itemHeightRatio, props.stackItems, @@ -102,6 +107,7 @@ describe('stackItems', () => { stateResizeItemRight.canvasTimeStart, stateResizeItemRight.canvasTimeEnd, props.keys, + props.minHeight, props.lineHeight, props.itemHeightRatio, props.stackItems, @@ -123,6 +129,7 @@ describe('stackItems', () => { state.canvasTimeStart, state.canvasTimeEnd, props.keys, + props.minHeight, props.lineHeight, props.itemHeightRatio, props.stackItems, diff --git a/demo/app/demo-main/index.js b/demo/app/demo-main/index.js index 6c8fd3c22..486b57e56 100644 --- a/demo/app/demo-main/index.js +++ b/demo/app/demo-main/index.js @@ -152,6 +152,7 @@ export default class App extends Component { Above The Left} diff --git a/src/lib/Timeline.js b/src/lib/Timeline.js index d152220ca..9ce9dfad5 100644 --- a/src/lib/Timeline.js +++ b/src/lib/Timeline.js @@ -45,6 +45,7 @@ export default class ReactCalendarTimeline extends Component { lineHeight: PropTypes.number, itemHeightRatio: PropTypes.number, + minHeight: PropTypes.number, minZoom: PropTypes.number, maxZoom: PropTypes.number, @@ -169,6 +170,8 @@ export default class ReactCalendarTimeline extends Component { lineHeight: 30, itemHeightRatio: 0.65, + minHeight: 0, + minZoom: 60 * 60 * 1000, // 1 hour maxZoom: 5 * 365.24 * 86400 * 1000, // 5 years @@ -322,6 +325,7 @@ export default class ReactCalendarTimeline extends Component { this.state.canvasTimeStart, this.state.canvasTimeEnd, props.keys, + props.minHeight, props.lineHeight, props.itemHeightRatio, props.stackItems, @@ -399,6 +403,7 @@ export default class ReactCalendarTimeline extends Component { prevState.canvasTimeStart, prevState.canvasTimeEnd, nextProps.keys, + nextProps.minHeight, nextProps.lineHeight, nextProps.itemHeightRatio, nextProps.stackItems, @@ -469,6 +474,7 @@ export default class ReactCalendarTimeline extends Component { this.state.canvasTimeStart, this.state.canvasTimeEnd, props.keys, + props.minHeight, props.lineHeight, props.itemHeightRatio, props.stackItems, @@ -1001,6 +1007,7 @@ export default class ReactCalendarTimeline extends Component { this.state.canvasTimeStart, this.state.canvasTimeEnd, this.props.keys, + this.props.minHeight, this.props.lineHeight, this.props.itemHeightRatio, this.props.stackItems, diff --git a/src/lib/utility/calendar.js b/src/lib/utility/calendar.js index be501951b..74ea04815 100644 --- a/src/lib/utility/calendar.js +++ b/src/lib/utility/calendar.js @@ -467,6 +467,7 @@ export function stackTimelineItems( canvasTimeStart, canvasTimeEnd, keys, + minHeight, lineHeight, itemHeightRatio, stackItems, @@ -501,7 +502,7 @@ export function stackTimelineItems( if (groups.length === 0) { return { dimensionItems: [], - height: 0, + height: minHeight, groupHeights: [], groupTops: [] } @@ -530,7 +531,7 @@ export function stackTimelineItems( lineHeight, stackItems ) - return { dimensionItems, height, groupHeights, groupTops } + return { dimensionItems, height: height > minHeight ? height : minHeight, groupHeights, groupTops } } /** @@ -704,6 +705,7 @@ export function calculateScrollCanvas( mergedState.canvasTimeStart, mergedState.canvasTimeEnd, props.keys, + props.minHeight, props.lineHeight, props.itemHeightRatio, props.stackItems, From 88ddd13839c5ce0434bd7296a05ad9b02730fbaa Mon Sep 17 00:00:00 2001 From: markstock Date: Thu, 5 Mar 2020 19:03:56 +0800 Subject: [PATCH 2/2] update version --- CHANGELOG.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a0fac65e..6326f28a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,10 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o * Add `className` prop to Timeline component to override `react-calendar-timeline` class #682 +## 0.26.8 + +* add minHeight props for Component Timeline @markstock7 + ## 0.26.7 * fix scrolling with trackpad @ilaiwi #679 diff --git a/package.json b/package.json index 8c7387bdc..c69805559 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-calendar-timeline", - "version": "0.26.7", + "version": "0.26.8", "description": "react calendar timeline", "main": "lib/index.js", "scripts": {