mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
adding story and fixing tests
This commit is contained in:
Peter Holmberg
parent
d9db457b87
commit
d075af2b67
@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { storiesOf } from '@storybook/react';
|
||||||
|
import { action } from '@storybook/addon-actions';
|
||||||
|
|
||||||
|
import { ThresholdsEditor } from './ThresholdsEditor';
|
||||||
|
|
||||||
|
const ThresholdsEditorStories = storiesOf('UI/ThresholdsEditor', module);
|
||||||
|
const thresholds = [{ index: 0, value: -Infinity, color: 'green' }, { index: 1, value: 50, color: 'red' }];
|
||||||
|
|
||||||
|
ThresholdsEditorStories.add('default', () => {
|
||||||
|
return <ThresholdsEditor thresholds={[]} onChange={action('Thresholds changed')} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
ThresholdsEditorStories.add('with thresholds', () => {
|
||||||
|
return <ThresholdsEditor thresholds={thresholds} onChange={action('Thresholds changed')} />;
|
||||||
|
});
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import React, { ChangeEvent } from 'react';
|
import React, { ChangeEvent } from 'react';
|
||||||
import { mount } from 'enzyme';
|
import { mount } from 'enzyme';
|
||||||
import { ThresholdsEditor, Props } from './ThresholdsEditor';
|
import { ThresholdsEditor, Props } from './ThresholdsEditor';
|
||||||
|
import { colors } from '../../utils';
|
||||||
|
|
||||||
const setup = (propOverrides?: Partial<Props>) => {
|
const setup = (propOverrides?: Partial<Props>) => {
|
||||||
const props: Props = {
|
const props: Props = {
|
||||||
@ -31,7 +32,7 @@ describe('Initialization', () => {
|
|||||||
it('should add a base threshold if missing', () => {
|
it('should add a base threshold if missing', () => {
|
||||||
const { instance } = setup();
|
const { instance } = setup();
|
||||||
|
|
||||||
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
|
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: colors[0] }]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -41,7 +42,7 @@ describe('Add threshold', () => {
|
|||||||
|
|
||||||
instance.onAddThreshold(0);
|
instance.onAddThreshold(0);
|
||||||
|
|
||||||
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
|
expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: colors[0] }]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add threshold', () => {
|
it('should add threshold', () => {
|
||||||
@ -50,41 +51,41 @@ describe('Add threshold', () => {
|
|||||||
instance.onAddThreshold(1);
|
instance.onAddThreshold(1);
|
||||||
|
|
||||||
expect(instance.state.thresholds).toEqual([
|
expect(instance.state.thresholds).toEqual([
|
||||||
{ index: 0, value: -Infinity, color: '#7EB26D' },
|
{ index: 0, value: -Infinity, color: colors[0] },
|
||||||
{ index: 1, value: 50, color: '#EAB839' },
|
{ index: 1, value: 50, color: colors[2] },
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add another threshold above a first', () => {
|
it('should add another threshold above a first', () => {
|
||||||
const { instance } = setup({
|
const { instance } = setup({
|
||||||
thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }],
|
thresholds: [{ index: 0, value: -Infinity, color: colors[0] }, { index: 1, value: 50, color: colors[2] }],
|
||||||
});
|
});
|
||||||
|
|
||||||
instance.onAddThreshold(2);
|
instance.onAddThreshold(2);
|
||||||
|
|
||||||
expect(instance.state.thresholds).toEqual([
|
expect(instance.state.thresholds).toEqual([
|
||||||
{ index: 0, value: -Infinity, color: '#7EB26D' },
|
{ index: 0, value: -Infinity, color: colors[0] },
|
||||||
{ index: 1, value: 50, color: '#EAB839' },
|
{ index: 1, value: 50, color: colors[2] },
|
||||||
{ index: 2, value: 75, color: '#6ED0E0' },
|
{ index: 2, value: 75, color: colors[3] },
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add another threshold between first and second index', () => {
|
it('should add another threshold between first and second index', () => {
|
||||||
const { instance } = setup({
|
const { instance } = setup({
|
||||||
thresholds: [
|
thresholds: [
|
||||||
{ index: 0, value: -Infinity, color: '#7EB26D' },
|
{ index: 0, value: -Infinity, color: colors[0] },
|
||||||
{ index: 1, value: 50, color: '#EAB839' },
|
{ index: 1, value: 50, color: colors[2] },
|
||||||
{ index: 2, value: 75, color: '#6ED0E0' },
|
{ index: 2, value: 75, color: colors[3] },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
instance.onAddThreshold(2);
|
instance.onAddThreshold(2);
|
||||||
|
|
||||||
expect(instance.state.thresholds).toEqual([
|
expect(instance.state.thresholds).toEqual([
|
||||||
{ index: 0, value: -Infinity, color: '#7EB26D' },
|
{ index: 0, value: -Infinity, color: colors[0] },
|
||||||
{ index: 1, value: 50, color: '#EAB839' },
|
{ index: 1, value: 50, color: colors[2] },
|
||||||
{ index: 2, value: 62.5, color: '#EF843C' },
|
{ index: 2, value: 62.5, color: colors[4] },
|
||||||
{ index: 3, value: 75, color: '#6ED0E0' },
|
{ index: 3, value: 75, color: colors[3] },
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -3,8 +3,8 @@ import { Threshold } from '../../types';
|
|||||||
import { ColorPicker } from '..';
|
import { ColorPicker } from '..';
|
||||||
import { PanelOptionsGroup } from '..';
|
import { PanelOptionsGroup } from '..';
|
||||||
import { colors } from '../../utils';
|
import { colors } from '../../utils';
|
||||||
import { ThemeContext } from '../../themes/ThemeContext';
|
import { ThemeContext } from '../../themes';
|
||||||
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
|
import { getColorFromHexRgbOrName } from '../../utils';
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
thresholds: Threshold[];
|
thresholds: Threshold[];
|
||||||
|
|||||||
@ -1,7 +1,447 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`Render should render with base threshold 1`] = `
|
exports[`Render should render with base threshold 1`] = `
|
||||||
<ContextConsumer>
|
<ThresholdsEditor
|
||||||
<Component />
|
onChange={
|
||||||
</ContextConsumer>
|
[MockFunction] {
|
||||||
|
"calls": Array [
|
||||||
|
Array [
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"color": "#7EB26D",
|
||||||
|
"index": 0,
|
||||||
|
"value": -Infinity,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
"results": Array [
|
||||||
|
Object {
|
||||||
|
"isThrow": false,
|
||||||
|
"value": undefined,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
thresholds={Array []}
|
||||||
|
>
|
||||||
|
<Component
|
||||||
|
title="Thresholds"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="panel-options-group"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="panel-options-group__header"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="panel-options-group__title"
|
||||||
|
>
|
||||||
|
Thresholds
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="panel-options-group__body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="thresholds"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="thresholds-row"
|
||||||
|
key="0-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="thresholds-row-add-button"
|
||||||
|
onClick={[Function]}
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
className="fa fa-plus"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="thresholds-row-color-indicator"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "#7EB26D",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="thresholds-row-input"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="thresholds-row-input-inner"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="thresholds-row-input-inner-arrow"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="thresholds-row-input-inner-color"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="thresholds-row-input-inner-color-colorpicker"
|
||||||
|
>
|
||||||
|
<WithTheme(ColorPicker)
|
||||||
|
color="#7EB26D"
|
||||||
|
onChange={[Function]}
|
||||||
|
>
|
||||||
|
<ColorPicker
|
||||||
|
color="#7EB26D"
|
||||||
|
onChange={[Function]}
|
||||||
|
theme={
|
||||||
|
Object {
|
||||||
|
"background": Object {
|
||||||
|
"dropdown": "#1f1f20",
|
||||||
|
"scrollbar": "#343436",
|
||||||
|
"scrollbar2": "#343436",
|
||||||
|
},
|
||||||
|
"border": Object {
|
||||||
|
"radius": Object {
|
||||||
|
"lg": "5px",
|
||||||
|
"md": "3px",
|
||||||
|
"sm": "2px",
|
||||||
|
},
|
||||||
|
"width": Object {
|
||||||
|
"sm": "1px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"breakpoints": Object {
|
||||||
|
"lg": "992px",
|
||||||
|
"md": "768px",
|
||||||
|
"sm": "544px",
|
||||||
|
"xl": "1200px",
|
||||||
|
"xs": "0",
|
||||||
|
},
|
||||||
|
"colors": Object {
|
||||||
|
"black": "#000000",
|
||||||
|
"blue": "#33b5e5",
|
||||||
|
"blueBase": "#3274d9",
|
||||||
|
"blueFaint": "#041126",
|
||||||
|
"blueLight": "#5794f2",
|
||||||
|
"blueShade": "#1f60c4",
|
||||||
|
"body": "#d8d9da",
|
||||||
|
"bodyBg": "#161719",
|
||||||
|
"brandDanger": "#e02f44",
|
||||||
|
"brandPrimary": "#eb7b18",
|
||||||
|
"brandSuccess": "#299c46",
|
||||||
|
"brandWarning": "#eb7b18",
|
||||||
|
"critical": "#e02f44",
|
||||||
|
"dark1": "#141414",
|
||||||
|
"dark10": "#424345",
|
||||||
|
"dark2": "#161719",
|
||||||
|
"dark3": "#1f1f20",
|
||||||
|
"dark4": "#212124",
|
||||||
|
"dark5": "#222426",
|
||||||
|
"dark6": "#262628",
|
||||||
|
"dark7": "#292a2d",
|
||||||
|
"dark8": "#2f2f32",
|
||||||
|
"dark9": "#343436",
|
||||||
|
"gray1": "#555555",
|
||||||
|
"gray2": "#8e8e8e",
|
||||||
|
"gray3": "#b3b3b3",
|
||||||
|
"gray4": "#d8d9da",
|
||||||
|
"gray5": "#ececec",
|
||||||
|
"gray6": "#f4f5f8",
|
||||||
|
"gray7": "#fbfbfb",
|
||||||
|
"grayBlue": "#212327",
|
||||||
|
"greenBase": "#299c46",
|
||||||
|
"greenShade": "#23843b",
|
||||||
|
"headingColor": "#e3e3e3",
|
||||||
|
"inputBlack": "#09090b",
|
||||||
|
"link": "#e3e3e3",
|
||||||
|
"linkDisabled": "#e3e3e3",
|
||||||
|
"linkExternal": "#33b5e5",
|
||||||
|
"linkHover": "#ffffff",
|
||||||
|
"online": "#299c46",
|
||||||
|
"orange": "#eb7b18",
|
||||||
|
"pageBg": "#161719",
|
||||||
|
"purple": "#9933cc",
|
||||||
|
"queryGreen": "#74e680",
|
||||||
|
"queryKeyword": "#66d9ef",
|
||||||
|
"queryOrange": "#eb7b18",
|
||||||
|
"queryPurple": "#fe85fc",
|
||||||
|
"queryRed": "#e02f44",
|
||||||
|
"red": "#d44a3a",
|
||||||
|
"redBase": "#e02f44",
|
||||||
|
"redShade": "#c4162a",
|
||||||
|
"text": "#d8d9da",
|
||||||
|
"textEmphasis": "#ececec",
|
||||||
|
"textFaint": "#222426",
|
||||||
|
"textStrong": "#ffffff",
|
||||||
|
"textWeak": "#8e8e8e",
|
||||||
|
"variable": "#32d1df",
|
||||||
|
"warn": "#f79520",
|
||||||
|
"white": "#ffffff",
|
||||||
|
"yellow": "#ecbb13",
|
||||||
|
},
|
||||||
|
"name": "Grafana Dark",
|
||||||
|
"panelPadding": Object {
|
||||||
|
"horizontal": 10,
|
||||||
|
"vertical": 5,
|
||||||
|
},
|
||||||
|
"spacing": Object {
|
||||||
|
"d": "14px",
|
||||||
|
"gutter": "30px",
|
||||||
|
"lg": "24px",
|
||||||
|
"md": "16px",
|
||||||
|
"sm": "8px",
|
||||||
|
"xl": "32px",
|
||||||
|
"xs": "4px",
|
||||||
|
"xxs": "2px",
|
||||||
|
},
|
||||||
|
"type": "dark",
|
||||||
|
"typography": Object {
|
||||||
|
"fontFamily": Object {
|
||||||
|
"monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
|
||||||
|
"sansSerif": "'Roboto', Helvetica, Arial, sans-serif",
|
||||||
|
},
|
||||||
|
"heading": Object {
|
||||||
|
"h1": "28px",
|
||||||
|
"h2": "24px",
|
||||||
|
"h3": "21px",
|
||||||
|
"h4": "18px",
|
||||||
|
"h5": "16px",
|
||||||
|
"h6": "14px",
|
||||||
|
},
|
||||||
|
"lineHeight": Object {
|
||||||
|
"lg": 1.5,
|
||||||
|
"md": 1.3333333333333333,
|
||||||
|
"sm": 1.1,
|
||||||
|
"xs": 1,
|
||||||
|
},
|
||||||
|
"size": Object {
|
||||||
|
"base": "13px",
|
||||||
|
"lg": "18px",
|
||||||
|
"md": "14px",
|
||||||
|
"root": "14px",
|
||||||
|
"sm": "12px",
|
||||||
|
"xs": "10px",
|
||||||
|
},
|
||||||
|
"weight": Object {
|
||||||
|
"light": 300,
|
||||||
|
"regular": 400,
|
||||||
|
"semibold": 500,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<PopperController
|
||||||
|
content={
|
||||||
|
<ColorPickerPopover
|
||||||
|
color="#7EB26D"
|
||||||
|
onChange={[Function]}
|
||||||
|
theme={
|
||||||
|
Object {
|
||||||
|
"background": Object {
|
||||||
|
"dropdown": "#1f1f20",
|
||||||
|
"scrollbar": "#343436",
|
||||||
|
"scrollbar2": "#343436",
|
||||||
|
},
|
||||||
|
"border": Object {
|
||||||
|
"radius": Object {
|
||||||
|
"lg": "5px",
|
||||||
|
"md": "3px",
|
||||||
|
"sm": "2px",
|
||||||
|
},
|
||||||
|
"width": Object {
|
||||||
|
"sm": "1px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"breakpoints": Object {
|
||||||
|
"lg": "992px",
|
||||||
|
"md": "768px",
|
||||||
|
"sm": "544px",
|
||||||
|
"xl": "1200px",
|
||||||
|
"xs": "0",
|
||||||
|
},
|
||||||
|
"colors": Object {
|
||||||
|
"black": "#000000",
|
||||||
|
"blue": "#33b5e5",
|
||||||
|
"blueBase": "#3274d9",
|
||||||
|
"blueFaint": "#041126",
|
||||||
|
"blueLight": "#5794f2",
|
||||||
|
"blueShade": "#1f60c4",
|
||||||
|
"body": "#d8d9da",
|
||||||
|
"bodyBg": "#161719",
|
||||||
|
"brandDanger": "#e02f44",
|
||||||
|
"brandPrimary": "#eb7b18",
|
||||||
|
"brandSuccess": "#299c46",
|
||||||
|
"brandWarning": "#eb7b18",
|
||||||
|
"critical": "#e02f44",
|
||||||
|
"dark1": "#141414",
|
||||||
|
"dark10": "#424345",
|
||||||
|
"dark2": "#161719",
|
||||||
|
"dark3": "#1f1f20",
|
||||||
|
"dark4": "#212124",
|
||||||
|
"dark5": "#222426",
|
||||||
|
"dark6": "#262628",
|
||||||
|
"dark7": "#292a2d",
|
||||||
|
"dark8": "#2f2f32",
|
||||||
|
"dark9": "#343436",
|
||||||
|
"gray1": "#555555",
|
||||||
|
"gray2": "#8e8e8e",
|
||||||
|
"gray3": "#b3b3b3",
|
||||||
|
"gray4": "#d8d9da",
|
||||||
|
"gray5": "#ececec",
|
||||||
|
"gray6": "#f4f5f8",
|
||||||
|
"gray7": "#fbfbfb",
|
||||||
|
"grayBlue": "#212327",
|
||||||
|
"greenBase": "#299c46",
|
||||||
|
"greenShade": "#23843b",
|
||||||
|
"headingColor": "#e3e3e3",
|
||||||
|
"inputBlack": "#09090b",
|
||||||
|
"link": "#e3e3e3",
|
||||||
|
"linkDisabled": "#e3e3e3",
|
||||||
|
"linkExternal": "#33b5e5",
|
||||||
|
"linkHover": "#ffffff",
|
||||||
|
"online": "#299c46",
|
||||||
|
"orange": "#eb7b18",
|
||||||
|
"pageBg": "#161719",
|
||||||
|
"purple": "#9933cc",
|
||||||
|
"queryGreen": "#74e680",
|
||||||
|
"queryKeyword": "#66d9ef",
|
||||||
|
"queryOrange": "#eb7b18",
|
||||||
|
"queryPurple": "#fe85fc",
|
||||||
|
"queryRed": "#e02f44",
|
||||||
|
"red": "#d44a3a",
|
||||||
|
"redBase": "#e02f44",
|
||||||
|
"redShade": "#c4162a",
|
||||||
|
"text": "#d8d9da",
|
||||||
|
"textEmphasis": "#ececec",
|
||||||
|
"textFaint": "#222426",
|
||||||
|
"textStrong": "#ffffff",
|
||||||
|
"textWeak": "#8e8e8e",
|
||||||
|
"variable": "#32d1df",
|
||||||
|
"warn": "#f79520",
|
||||||
|
"white": "#ffffff",
|
||||||
|
"yellow": "#ecbb13",
|
||||||
|
},
|
||||||
|
"name": "Grafana Dark",
|
||||||
|
"panelPadding": Object {
|
||||||
|
"horizontal": 10,
|
||||||
|
"vertical": 5,
|
||||||
|
},
|
||||||
|
"spacing": Object {
|
||||||
|
"d": "14px",
|
||||||
|
"gutter": "30px",
|
||||||
|
"lg": "24px",
|
||||||
|
"md": "16px",
|
||||||
|
"sm": "8px",
|
||||||
|
"xl": "32px",
|
||||||
|
"xs": "4px",
|
||||||
|
"xxs": "2px",
|
||||||
|
},
|
||||||
|
"type": "dark",
|
||||||
|
"typography": Object {
|
||||||
|
"fontFamily": Object {
|
||||||
|
"monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace",
|
||||||
|
"sansSerif": "'Roboto', Helvetica, Arial, sans-serif",
|
||||||
|
},
|
||||||
|
"heading": Object {
|
||||||
|
"h1": "28px",
|
||||||
|
"h2": "24px",
|
||||||
|
"h3": "21px",
|
||||||
|
"h4": "18px",
|
||||||
|
"h5": "16px",
|
||||||
|
"h6": "14px",
|
||||||
|
},
|
||||||
|
"lineHeight": Object {
|
||||||
|
"lg": 1.5,
|
||||||
|
"md": 1.3333333333333333,
|
||||||
|
"sm": 1.1,
|
||||||
|
"xs": 1,
|
||||||
|
},
|
||||||
|
"size": Object {
|
||||||
|
"base": "13px",
|
||||||
|
"lg": "18px",
|
||||||
|
"md": "14px",
|
||||||
|
"root": "14px",
|
||||||
|
"sm": "12px",
|
||||||
|
"xs": "10px",
|
||||||
|
},
|
||||||
|
"weight": Object {
|
||||||
|
"light": 300,
|
||||||
|
"regular": 400,
|
||||||
|
"semibold": 500,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
hideAfter={300}
|
||||||
|
>
|
||||||
|
<ForwardRef(ColorPickerTrigger)
|
||||||
|
color="#7EB26D"
|
||||||
|
onClick={[Function]}
|
||||||
|
onMouseLeave={[Function]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onClick={[Function]}
|
||||||
|
onMouseLeave={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"background": "inherit",
|
||||||
|
"border": "none",
|
||||||
|
"borderRadius": 10,
|
||||||
|
"color": "inherit",
|
||||||
|
"cursor": "pointer",
|
||||||
|
"overflow": "hidden",
|
||||||
|
"padding": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundImage": "url(data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)",
|
||||||
|
"border": "none",
|
||||||
|
"float": "left",
|
||||||
|
"height": 15,
|
||||||
|
"margin": 0,
|
||||||
|
"position": "relative",
|
||||||
|
"width": 15,
|
||||||
|
"zIndex": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "#7EB26D",
|
||||||
|
"bottom": 0,
|
||||||
|
"display": "block",
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ForwardRef(ColorPickerTrigger)>
|
||||||
|
</PopperController>
|
||||||
|
</ColorPicker>
|
||||||
|
</WithTheme(ColorPicker)>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="thresholds-row-input-inner-value"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
readOnly={true}
|
||||||
|
type="text"
|
||||||
|
value="Base"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Component>
|
||||||
|
</ThresholdsEditor>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user