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;
value?: any;
label?: string;
render: (props) => void;
}
export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
@ -26,25 +27,16 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
}
render() {
const { children, value, label } = this.props;
const { value, label } = this.props;
const values = this.getValues();
const selectedValue = value || values[0];
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 (
<div className="gf-form">
<div className="toggle-button-group">
{label && <label className={labelClassName}>{label}</label>}
{childClones}
{this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
</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="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
<Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
<ToggleButtonGroup label="Dedup" onChange={this.onChangeDedup} value={dedup}>
{Object.keys(LogsDedupStrategy).map((dedupType, i) => (
<ToggleButton className="btn-small" key={i} value={dedupType}>
{dedupType}
</ToggleButton>
))}
</ToggleButtonGroup>
<ToggleButtonGroup
label="Dedup"
onChange={this.onChangeDedup}
value={dedup}
render={({ selectedValue, onChange }) =>
Object.keys(LogsDedupStrategy).map((dedupType, i) => (
<ToggleButton
className="btn-small"
key={i}
value={dedupType}
onChange={onChange}
selected={selectedValue === dedupType}
>
{dedupType}
</ToggleButton>
))
}
/>
{hasData &&
meta && (
<div className="logs-meta">