From fcb9b9ac4752bf9a68498672b2f4178dbc5770e5 Mon Sep 17 00:00:00 2001 From: Emilien Huet Date: Thu, 13 Feb 2020 15:36:59 +0100 Subject: [PATCH] feat: Slot group prop getter (#1471) (#1510) * feat: Added slotGroupPropGetter (#1471) * fix: Pass getters to time gutter --- .size-snapshot.json | 22 +++++++++++----------- src/Calendar.js | 20 ++++++++++++++++---- src/TimeGrid.js | 1 + src/TimeGutter.js | 4 +++- src/TimeSlotGroup.js | 3 ++- 5 files changed, 33 insertions(+), 17 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 9464b3646..ed467b52f 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,25 +1,25 @@ { "./dist/react-big-calendar.js": { - "bundled": 501317, - "minified": 146786, - "gzipped": 44762 + "bundled": 507436, + "minified": 149016, + "gzipped": 45496 }, "./dist/react-big-calendar.min.js": { - "bundled": 439004, - "minified": 127972, - "gzipped": 40409 + "bundled": 444328, + "minified": 130089, + "gzipped": 41174 }, "dist/react-big-calendar.esm.js": { - "bundled": 168678, - "minified": 80552, - "gzipped": 19913, + "bundled": 174497, + "minified": 83179, + "gzipped": 20739, "treeshaked": { "rollup": { - "code": 58283, + "code": 60400, "import_statements": 1578 }, "webpack": { - "code": 62787 + "code": 64923 } } } diff --git a/src/Calendar.js b/src/Calendar.js index 8d64e2655..83480d991 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -486,14 +486,23 @@ class Calendar extends React.Component { /** * Optionally provide a function that returns an object of className or style props - * to be applied to the the time-slot node. Caution! Styles that change layout or + * to be applied to the time-slot node. Caution! Styles that change layout or * position may break the calendar in unexpected ways. * * ```js * (date: Date, resourceId: (number|string)) => { className?: string, style?: Object } * ``` */ - slotPropGetter: PropTypes.func, + slotPropGetter: PropTypes.func, + + /** + * Optionally provide a function that returns an object of props to be applied + * to the time-slot group node. Useful to dynamically change the sizing of time nodes. + * ```js + * () => { style?: Object } + * ``` + */ + slotGroupPropGetter: PropTypes.func, /** * Optionally provide a function that returns an object of className or style props @@ -775,7 +784,8 @@ class Calendar extends React.Component { resourceIdAccessor, resourceTitleAccessor, eventPropGetter, - slotPropGetter, + slotPropGetter, + slotGroupPropGetter, dayPropGetter, view, views, @@ -794,7 +804,9 @@ class Calendar extends React.Component { eventProp: (...args) => (eventPropGetter && eventPropGetter(...args)) || {}, slotProp: (...args) => - (slotPropGetter && slotPropGetter(...args)) || {}, + (slotPropGetter && slotPropGetter(...args)) || {}, + slotGroupProp: (...args) => + (slotGroupPropGetter && slotGroupPropGetter(...args)) || {}, dayProp: (...args) => (dayPropGetter && dayPropGetter(...args)) || {}, }, components: defaults(components[view] || {}, omit(components, names), { diff --git a/src/TimeGrid.js b/src/TimeGrid.js index 683907084..84a00436d 100644 --- a/src/TimeGrid.js +++ b/src/TimeGrid.js @@ -240,6 +240,7 @@ export default class TimeGrid extends Component { timeslots={this.props.timeslots} components={components} className="rbc-time-gutter" + getters={getters} /> {this.renderEvents(range, rangeEvents, getNow())} diff --git a/src/TimeGutter.js b/src/TimeGutter.js index 8c3118e88..acd739788 100644 --- a/src/TimeGutter.js +++ b/src/TimeGutter.js @@ -36,7 +36,7 @@ export default class TimeGutter extends Component { } render() { - const { resource, components } = this.props + const { resource, components, getters } = this.props return (
@@ -48,6 +48,7 @@ export default class TimeGutter extends Component { resource={resource} components={components} renderSlot={this.renderSlot} + getters={getters} /> ) })} @@ -63,6 +64,7 @@ TimeGutter.propTypes = { step: PropTypes.number.isRequired, getNow: PropTypes.func.isRequired, components: PropTypes.object.isRequired, + getters: PropTypes.object, localizer: PropTypes.object.isRequired, resource: PropTypes.string, diff --git a/src/TimeSlotGroup.js b/src/TimeSlotGroup.js index 45e8905cc..fff057d30 100644 --- a/src/TimeSlotGroup.js +++ b/src/TimeSlotGroup.js @@ -14,8 +14,9 @@ export default class TimeSlotGroup extends Component { components: { timeSlotWrapper: Wrapper = BackgroundWrapper } = {}, } = this.props + const groupProps = getters ? getters.slotGroupProp() : {} return ( -
+
{group.map((value, idx) => { const slotProps = getters ? getters.slotProp(value, resource) : {} return (