Support for customizable static range labels #271
Conversation
…nent to enable custom component rendering for static range labels. -'react-test-renderer' is added to dev dependencies. -README is updated for 'renderStaticRangeLabel'. -eslintignore file is updated to ignore snapshot files. -Existing demo is updated to display custom 'renderStaticRangeLabel' usage.
| return ( | ||
| <div className={cx(styles.definedRangesWrapper, className)}> | ||
| {this.props.headerContent} | ||
| <div className={styles.staticRanges}> | ||
| {this.props.staticRanges.map((staticRange, i) => { | ||
| const { selectedRange, focusedRangeIndex } = this.getSelectedRange(ranges, staticRange); | ||
| let labelContent; | ||
|
|
||
| if (staticRange.hasCustomRendering) { |
There was a problem hiding this comment.
let's make hasCustomRendering true by default if renderStaticRangeLabel already defined. You can still add another property called renderLabel() to static range object for rendering custom range in order to render just for it.
There was a problem hiding this comment.
staticRange.label can already be rendered via a custom component (label: <MyComponent/>); there's no need for single renderLabel functions for individual staticRange on configuration object level. Whole point of having a render function on component level is let the callers specify custom props / logic to the label rendering logic on their own component's render phase. So yes; this means that if any of the staticRange configurations have hasCustomRendering; then the renderStaticRangeLabel prop should be present too. But the reverse is not true.
Having renderStaticRangeLabel prop provided does not mean that every staticRange object will be rendered in a custom way. So we cannot change hasCustomRendering to true by default if it's present. For example; in the original use-case we have right now is to be able to render a tooltip on one of the staticRange buttons while the others are continue to use staticRange.label.
…son scripts usage.
…Existing snapshots are updated.
Types of changes
What types of changes does your code introduce?
Description
renderStaticRangeLabelcallback prop is added toDefinedRangecomponent to enable custom component rendering for static range labels.-
react-test-rendereris added to dev dependencies.-Initial
DefinedRangetests are added.-README is updated for
renderStaticRangeLabel.-eslintignore file is updated to ignore snapshot files.
-Existing demo is updated to display new
renderStaticRangeLabelusage.