Commit 36d67f22 by ryan

generic repeater

parent 4bbd6ab7
import React, { PureComponent } from 'react';
import { SingleStatValueInfo, VizOrientation } from '../../types';
import { VizOrientation } from '../../types';
interface RenderProps {
interface RenderProps<T> {
vizWidth: number;
vizHeight: number;
valueInfo: SingleStatValueInfo;
value: T;
}
interface Props {
children: (renderProps: RenderProps) => JSX.Element | JSX.Element[];
interface Props<T> {
children: (renderProps: RenderProps<T>) => JSX.Element | JSX.Element[];
height: number;
width: number;
values: SingleStatValueInfo[];
values: T[];
orientation: VizOrientation;
}
const SPACE_BETWEEN = 10;
export class VizRepeater extends PureComponent<Props> {
export class VizRepeater<T> extends PureComponent<Props<T>> {
getOrientation(): VizOrientation {
const { orientation, width, height } = this.props;
......@@ -64,10 +64,10 @@ export class VizRepeater extends PureComponent<Props> {
return (
<div style={repeaterStyle}>
{values.map((valueInfo, index) => {
{values.map((value, index) => {
return (
<div key={index} style={itemStyles}>
{children({ vizHeight, vizWidth, valueInfo })}
{children({ vizHeight, vizWidth, value })}
</div>
);
})}
......
......@@ -49,7 +49,7 @@ export class BarGaugePanel extends PureComponent<Props> {
return (
<VizRepeater height={height} width={width} values={values} orientation={options.orientation}>
{({ vizHeight, vizWidth, valueInfo }) => this.renderBarGauge(valueInfo.value, vizWidth, vizHeight)}
{({ vizHeight, vizWidth, value }) => this.renderBarGauge(value, vizWidth, vizHeight)}
</VizRepeater>
);
}
......
......@@ -52,7 +52,7 @@ export class GaugePanel extends PureComponent<Props> {
return (
<VizRepeater height={height} width={width} values={values} orientation={VizOrientation.Auto}>
{({ vizHeight, vizWidth, valueInfo }) => this.renderGauge(valueInfo.value, vizWidth, vizHeight)}
{({ vizHeight, vizWidth, value }) => this.renderGauge(value, vizWidth, vizHeight)}
</VizRepeater>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment