IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

use render props instead of cloneElement

Browse Source
This commit is contained in:
Erik Sundell 2018-12-06 14:54:26 +01:00
parent 6f8293af4e
commit b74c099773
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
View File

@ -4,6 +4,7 @@ interface ToggleButtonGroupProps {
onChange: (value) => void; onChange: (value) => void;
value?: any; value?: any;
label?: string; label?: string;
render: (props) => void;
} }
export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> { export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
@ -26,25 +27,16 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
} }
render() { render() {
const { children, value, label } = this.props; const { value, label } = this.props;
const values = this.getValues(); const values = this.getValues();
const selectedValue = value || values[0]; const selectedValue = value || values[0];
const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`; const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
const childClones = React.Children.map(children, (child: ReactElement<any>) => {
const { value: buttonValue } = child.props;
return React.cloneElement(child, {
selected: buttonValue === selectedValue,
onChange: this.handleToggle.bind(this),
});
});
return ( return (
<div className="gf-form"> <div className="gf-form">
<div className="toggle-button-group"> <div className="toggle-button-group">
{label && <label className={labelClassName}>{label}</label>} {label && <label className={labelClassName}>{label}</label>}
{childClones} {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
</div> </div>
</div> </div>
); );

25
public/app/features/explore/Logs.tsx
View File

@ -305,13 +305,24 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
<Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small /> <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
<Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small /> <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
<Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small /> <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
<ToggleButtonGroup label="Dedup" onChange={this.onChangeDedup} value={dedup}> <ToggleButtonGroup
{Object.keys(LogsDedupStrategy).map((dedupType, i) => ( label="Dedup"
<ToggleButton className="btn-small" key={i} value={dedupType}> onChange={this.onChangeDedup}
{dedupType} value={dedup}
</ToggleButton> render={({ selectedValue, onChange }) =>
))} Object.keys(LogsDedupStrategy).map((dedupType, i) => (
</ToggleButtonGroup> <ToggleButton
className="btn-small"
key={i}
value={dedupType}
onChange={onChange}
selected={selectedValue === dedupType}
>
{dedupType}
</ToggleButton>
))
}
/>
{hasData && {hasData &&
meta && ( meta && (
<div className="logs-meta"> <div className="logs-meta">