mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
FormGroup component and implements
This commit is contained in:
parent
03c6cc59a7
commit
ac62e4a992
27
packages/grafana-ui/src/components/FormGroup/FormGroup.tsx
Normal file
27
packages/grafana-ui/src/components/FormGroup/FormGroup.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import React, { SFC } from 'react';
|
||||
import { Label } from '..';
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
inputProps: {};
|
||||
labelWidth?: number;
|
||||
inputWidth?: number;
|
||||
}
|
||||
|
||||
const defaultProps = {
|
||||
labelWidth: 6,
|
||||
inputProps: {},
|
||||
inputWidth: 12,
|
||||
};
|
||||
|
||||
const FormGroup: SFC<Props> = ({ label, labelWidth, inputProps, inputWidth }) => {
|
||||
return (
|
||||
<div className="gf-form">
|
||||
<Label width={labelWidth}>{label}</Label>
|
||||
<input type="text" className={`gf-form-input width-${inputWidth}`} {...inputProps} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FormGroup.defaultProps = defaultProps;
|
||||
export { FormGroup };
|
@ -9,12 +9,16 @@ export { IndicatorsContainer } from './Select/IndicatorsContainer';
|
||||
export { NoOptionsMessage } from './Select/NoOptionsMessage';
|
||||
export { default as resetSelectStyles } from './Select/resetSelectStyles';
|
||||
|
||||
// Forms
|
||||
export { GfFormLabel } from './GfFormLabel/GfFormLabel';
|
||||
export { FormGroup } from './FormGroup/FormGroup';
|
||||
export { Label } from './Label/Label';
|
||||
|
||||
export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
|
||||
export { ColorPicker } from './ColorPicker/ColorPicker';
|
||||
export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
|
||||
export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
|
||||
export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
|
||||
export { GfFormLabel } from './GfFormLabel/GfFormLabel';
|
||||
export { Graph } from './Graph/Graph';
|
||||
export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
|
||||
export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import { Label } from '../../../../../packages/grafana-ui/src/components/Label/Label';
|
||||
import { Select } from '@grafana/ui';
|
||||
import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { SFC } from 'react';
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import { Label } from '../../../../../packages/grafana-ui/src/components/Label/Label';
|
||||
import { Switch } from '../../../core/components/Switch/Switch';
|
||||
|
||||
export interface Props {
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import { Label } from '../../../../packages/grafana-ui/src/components/Label/Label';
|
||||
import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
|
||||
import { updateTeam } from './state/actions';
|
||||
import { getRouteParamsId } from 'app/core/selectors/location';
|
||||
|
@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
|
||||
import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
|
||||
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
import { Label } from '../../../core/components/Label/Label';
|
||||
import { FormGroup } from '@grafana/ui/src';
|
||||
|
||||
export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
|
||||
onToggleThresholdLabels = () =>
|
||||
@ -21,14 +21,16 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
|
||||
|
||||
return (
|
||||
<PanelOptionsGroup title="Gauge">
|
||||
<div className="gf-form">
|
||||
<Label width={8}>Min value</Label>
|
||||
<input type="text" className="gf-form-input width-12" onChange={this.onMinValueChange} value={minValue} />
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<Label width={8}>Max value</Label>
|
||||
<input type="text" className="gf-form-input width-12" onChange={this.onMaxValueChange} value={maxValue} />
|
||||
</div>
|
||||
<FormGroup
|
||||
label="Min value"
|
||||
labelWidth={8}
|
||||
inputProps={{ onChange: event => this.onMinValueChange(event), value: minValue }}
|
||||
/>
|
||||
<FormGroup
|
||||
label="Max value"
|
||||
labelWidth={8}
|
||||
inputProps={{ onChange: event => this.onMaxValueChange(event), value: maxValue }}
|
||||
/>
|
||||
<Switch
|
||||
label="Show labels"
|
||||
labelClass="width-8"
|
||||
|
@ -1,7 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { MappingType, RangeMap, Select, ValueMap } from '@grafana/ui';
|
||||
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import { FormGroup, Label, MappingType, RangeMap, Select, ValueMap } from '@grafana/ui';
|
||||
|
||||
interface Props {
|
||||
mapping: ValueMap | RangeMap;
|
||||
@ -63,48 +61,52 @@ export default class MappingRow extends PureComponent<Props, State> {
|
||||
if (type === MappingType.RangeToText) {
|
||||
return (
|
||||
<>
|
||||
<div className="gf-form">
|
||||
<Label width={4}>From</Label>
|
||||
<input
|
||||
className="gf-form-input width-8"
|
||||
value={from}
|
||||
onBlur={this.updateMapping}
|
||||
onChange={this.onMappingFromChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<Label width={4}>To</Label>
|
||||
<input
|
||||
className="gf-form-input width-8"
|
||||
value={to}
|
||||
onBlur={this.updateMapping}
|
||||
onChange={this.onMappingToChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<Label width={4}>Text</Label>
|
||||
<input
|
||||
className="gf-form-input width-10"
|
||||
value={text}
|
||||
onBlur={this.updateMapping}
|
||||
onChange={this.onMappingTextChange}
|
||||
/>
|
||||
</div>
|
||||
<FormGroup
|
||||
label="From"
|
||||
labelWidth={4}
|
||||
inputProps={{
|
||||
onChange: event => this.onMappingFromChange(event),
|
||||
onBlur: () => this.updateMapping(),
|
||||
value: from,
|
||||
}}
|
||||
inputWidth={8}
|
||||
/>
|
||||
<FormGroup
|
||||
label="To"
|
||||
labelWidth={4}
|
||||
inputProps={{
|
||||
onBlur: () => this.updateMapping,
|
||||
onChange: event => this.onMappingToChange(event),
|
||||
value: to,
|
||||
}}
|
||||
inputWidth={8}
|
||||
/>
|
||||
<FormGroup
|
||||
label="Text"
|
||||
labelWidth={4}
|
||||
inputProps={{
|
||||
onBlur: () => this.updateMapping,
|
||||
onChange: event => this.onMappingTextChange(event),
|
||||
value: text,
|
||||
}}
|
||||
inputWidth={10}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="gf-form">
|
||||
<Label width={4}>Value</Label>
|
||||
<input
|
||||
className="gf-form-input width-8"
|
||||
onBlur={this.updateMapping}
|
||||
onChange={this.onMappingValueChange}
|
||||
value={value}
|
||||
/>
|
||||
</div>
|
||||
<FormGroup
|
||||
label="Value"
|
||||
labelWidth={4}
|
||||
inputProps={{
|
||||
onBlur: () => this.updateMapping,
|
||||
onChange: event => this.onMappingValueChange(event),
|
||||
value: value,
|
||||
}}
|
||||
inputWidth={8}
|
||||
/>
|
||||
<div className="gf-form gf-form--grow">
|
||||
<Label width={4}>Text</Label>
|
||||
<input
|
||||
|
@ -1,8 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { GaugeOptions, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
|
||||
|
||||
import { Label } from 'app/core/components/Label/Label';
|
||||
import { Select} from '@grafana/ui';
|
||||
import { FormGroup, Label, GaugeOptions, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
|
||||
import UnitPicker from 'app/core/components/Select/UnitPicker';
|
||||
|
||||
const statOptions = [
|
||||
@ -54,24 +51,32 @@ export default class ValueOptions extends PureComponent<PanelOptionsProps<GaugeO
|
||||
<Label width={labelWidth}>Unit</Label>
|
||||
<UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<Label width={labelWidth}>Decimals</Label>
|
||||
<input
|
||||
className="gf-form-input width-12"
|
||||
type="number"
|
||||
placeholder="auto"
|
||||
value={decimals || ''}
|
||||
onChange={this.onDecimalChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<Label width={labelWidth}>Prefix</Label>
|
||||
<input className="gf-form-input width-12" type="text" value={prefix || ''} onChange={this.onPrefixChange} />
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<Label width={labelWidth}>Suffix</Label>
|
||||
<input className="gf-form-input width-12" type="text" value={suffix || ''} onChange={this.onSuffixChange} />
|
||||
</div>
|
||||
<FormGroup
|
||||
label="Decimals"
|
||||
labelWidth={labelWidth}
|
||||
inputProps={{
|
||||
placeholder: 'auto',
|
||||
onChange: event => this.onDecimalChange(event),
|
||||
value: decimals || '',
|
||||
type: 'number',
|
||||
}}
|
||||
/>
|
||||
<FormGroup
|
||||
label="Prefix"
|
||||
labelWidth={labelWidth}
|
||||
inputProps={{
|
||||
onChange: event => this.onPrefixChange(event),
|
||||
value: prefix || '',
|
||||
}}
|
||||
/>
|
||||
<FormGroup
|
||||
label="Suffix"
|
||||
labelWidth={labelWidth}
|
||||
inputProps={{
|
||||
onChange: event => this.onSuffixChange(event),
|
||||
value: suffix || '',
|
||||
}}
|
||||
/>
|
||||
</PanelOptionsGroup>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user