Skip to content

Commit 05f453d

Browse files
marcusolssonmarcusolsson
authored
Refactor and add docs (#50)
1 parent ac84b0a commit 05f453d

File tree

2 files changed

+75
-70
lines changed

2 files changed

+75
-70
lines changed

‎src/components/KeyValueEditor.tsx

Lines changed: 74 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
22

33
import { css } from 'emotion';
4-
import { Button, Icon, useTheme } from '@grafana/ui';
4+
import { Button, Icon, stylesFactory, useTheme } from '@grafana/ui';
55
import { Pair } from '../types';
6+
import { GrafanaTheme } from '@grafana/data';
67

78
interface Props {
89
columns: string[];
@@ -15,6 +16,7 @@ interface Props {
1516

1617
export const KeyValueEditor = ({ columns, values, onChange, addRowLabel, onBlur }: Props) => {
1718
const theme = useTheme();
19+
const styles = getStyles(theme);
1820

1921
const updateCell = (colIdx: number, rowIdx: number, value: string) => {
2022
onChange(
@@ -41,75 +43,6 @@ export const KeyValueEditor = ({ columns, values, onChange, addRowLabel, onBlur
4143
onChange([...values.slice(0, i), ...values.slice(i + 1)]);
4244
};
4345

44-
const styles = {
45-
root: css`
46-
table-layout: auto;
47-
border: 1px solid ${theme.colors.formInputBorder};
48-
border-collapse: separate;
49-
border-radius: ${theme.border.radius.sm};
50-
border-spacing: 0;
51-
border-left: 0;
52-
width: 100%;
53-
`,
54-
thead: css`
55-
display: table-header-group;
56-
vertical-align: middle;
57-
border-color: inherit;
58-
border-collapse: separate;
59-
60-
&:first-child tr:first-child th:first-child {
61-
border-radius: ${theme.border.radius.sm} 0 0 0;
62-
}
63-
&:last-child tr:last-child th:first-child {
64-
border-radius: 0 0 0 ${theme.border.radius.sm};
65-
}
66-
`,
67-
tbody: css`
68-
&:first-child tr:first-child td:first-child {
69-
border-radius: ${theme.border.radius.sm} 0 0 0;
70-
}
71-
72-
&:last-child tr:last-child td:first-child {
73-
border-radius: 0 0 0 ${theme.border.radius.sm};
74-
}
75-
`,
76-
input: css`
77-
outline: none;
78-
border: 0;
79-
background: transparent;
80-
width: 100%;
81-
`,
82-
row: css`
83-
display: table-row;
84-
vertical-align: inherit;
85-
border-color: inherit;
86-
`,
87-
th: css`
88-
padding: ${theme.spacing.xs} ${theme.spacing.sm};
89-
border-left: solid ${theme.colors.formInputBorder} 1px;
90-
font-size: ${theme.typography.size.sm};
91-
color: ${theme.colors.textSemiWeak};
92-
font-weight: ${theme.typography.weight.regular};
93-
94-
&:last-child {
95-
border-left: 0;
96-
}
97-
`,
98-
td: css`
99-
padding: ${theme.spacing.xs} ${theme.spacing.sm};
100-
border: 1px solid transparent;
101-
border-left: solid ${theme.colors.formInputBorder} 1px;
102-
border-top: solid ${theme.colors.formInputBorder} 1px;
103-
background-color: ${theme.colors.formInputBg};
104-
&:last-child {
105-
border-left: 0;
106-
width: 32px;
107-
padding-left: 0;
108-
padding-right: ${theme.spacing.xs};
109-
}
110-
`,
111-
};
112-
11346
return values.length === 0 ? (
11447
<Button
11548
variant="secondary"
@@ -186,3 +119,74 @@ export const KeyValueEditor = ({ columns, values, onChange, addRowLabel, onBlur
186119
</table>
187120
);
188121
};
122+
123+
const getStyles = stylesFactory((theme: GrafanaTheme) => {
124+
return {
125+
root: css`
126+
table-layout: auto;
127+
border: 1px solid ${theme.colors.formInputBorder};
128+
border-collapse: separate;
129+
border-radius: ${theme.border.radius.sm};
130+
border-spacing: 0;
131+
border-left: 0;
132+
width: 100%;
133+
`,
134+
thead: css`
135+
display: table-header-group;
136+
vertical-align: middle;
137+
border-color: inherit;
138+
border-collapse: separate;
139+
140+
&:first-child tr:first-child th:first-child {
141+
border-radius: ${theme.border.radius.sm} 0 0 0;
142+
}
143+
&:last-child tr:last-child th:first-child {
144+
border-radius: 0 0 0 ${theme.border.radius.sm};
145+
}
146+
`,
147+
tbody: css`
148+
&:first-child tr:first-child td:first-child {
149+
border-radius: ${theme.border.radius.sm} 0 0 0;
150+
}
151+
152+
&:last-child tr:last-child td:first-child {
153+
border-radius: 0 0 0 ${theme.border.radius.sm};
154+
}
155+
`,
156+
input: css`
157+
outline: none;
158+
border: 0;
159+
background: transparent;
160+
width: 100%;
161+
`,
162+
row: css`
163+
display: table-row;
164+
vertical-align: inherit;
165+
border-color: inherit;
166+
`,
167+
th: css`
168+
padding: ${theme.spacing.xs} ${theme.spacing.sm};
169+
border-left: solid ${theme.colors.formInputBorder} 1px;
170+
font-size: ${theme.typography.size.sm};
171+
color: ${theme.colors.textSemiWeak};
172+
font-weight: ${theme.typography.weight.regular};
173+
174+
&:last-child {
175+
border-left: 0;
176+
}
177+
`,
178+
td: css`
179+
padding: ${theme.spacing.xs} ${theme.spacing.sm};
180+
border: 1px solid transparent;
181+
border-left: solid ${theme.colors.formInputBorder} 1px;
182+
border-top: solid ${theme.colors.formInputBorder} 1px;
183+
background-color: ${theme.colors.formInputBg};
184+
&:last-child {
185+
border-left: 0;
186+
width: 32px;
187+
padding-left: 0;
188+
padding-right: ${theme.spacing.xs};
189+
}
190+
`,
191+
};
192+
});

‎src/components/VariableQueryEditor.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface VariableQueryProps {
1010
onChange: (query: JsonApiVariableQuery, definition: string) => void;
1111
}
1212

13+
// VariableQueryEditor is used to query values for a dashboard variable.
1314
export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query }) => {
1415
const init = defaults(query, defaultVariableQuery);
1516

0 commit comments

Comments
 (0)