mirror of https://github.com/grafana/grafana
Revert: Query editor components from grafana-ui (#57436)
* Revert: QueryEditor components from grafana-ui * Use local version of experimental * Use experimental for query editor components * Fix type issues in MSSQL * point to actual version of experimental package * point to latest version of experimental Co-authored-by: Erik Sundell <erik.sundell87@gmail.com>pull/57555/head
Zoltán Bedi
3 years ago
committed by
GitHub
parent
3cbbf706cf
commit
c0b778134e
@ -1,23 +0,0 @@ |
|||||||
import { css, cx } from '@emotion/css'; |
|
||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
|
|
||||||
import { useTheme2, stylesFactory } from '../../themes'; |
|
||||||
import { Button, ButtonProps } from '../Button'; |
|
||||||
|
|
||||||
interface AccessoryButtonProps extends ButtonProps {} |
|
||||||
|
|
||||||
export const AccessoryButton: React.FC<AccessoryButtonProps> = ({ className, ...props }) => { |
|
||||||
const theme = useTheme2(); |
|
||||||
const styles = getButtonStyles(theme); |
|
||||||
|
|
||||||
return <Button {...props} className={cx(className, styles.button)} />; |
|
||||||
}; |
|
||||||
|
|
||||||
const getButtonStyles = stylesFactory((theme: GrafanaTheme2) => ({ |
|
||||||
button: css({ |
|
||||||
paddingLeft: theme.spacing(3 / 2), |
|
||||||
paddingRight: theme.spacing(3 / 2), |
|
||||||
}), |
|
||||||
})); |
|
||||||
@ -1,80 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { ComponentProps } from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
|
|
||||||
import { stylesFactory, useTheme2 } from '../../themes'; |
|
||||||
import { ReactUtils } from '../../utils'; |
|
||||||
import { Field } from '../Forms/Field'; |
|
||||||
import { Icon } from '../Icon/Icon'; |
|
||||||
import { PopoverContent, Tooltip } from '../Tooltip'; |
|
||||||
|
|
||||||
import { Space } from './Space'; |
|
||||||
|
|
||||||
interface EditorFieldProps extends ComponentProps<typeof Field> { |
|
||||||
label: string; |
|
||||||
children: React.ReactElement; |
|
||||||
width?: number | string; |
|
||||||
optional?: boolean; |
|
||||||
tooltip?: PopoverContent; |
|
||||||
tooltipInteractive?: boolean; |
|
||||||
} |
|
||||||
|
|
||||||
export const EditorField: React.FC<EditorFieldProps> = (props) => { |
|
||||||
const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props; |
|
||||||
|
|
||||||
const theme = useTheme2(); |
|
||||||
const styles = getStyles(theme, width); |
|
||||||
|
|
||||||
// Null check for backward compatibility
|
|
||||||
const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children); |
|
||||||
|
|
||||||
const labelEl = ( |
|
||||||
<> |
|
||||||
<label className={styles.label} htmlFor={childInputId}> |
|
||||||
{label} |
|
||||||
{optional && <span className={styles.optional}> - optional</span>} |
|
||||||
{tooltip && ( |
|
||||||
<Tooltip placement="top" content={tooltip} theme="info" interactive={tooltipInteractive}> |
|
||||||
<Icon name="info-circle" size="sm" className={styles.icon} /> |
|
||||||
</Tooltip> |
|
||||||
)} |
|
||||||
</label> |
|
||||||
<Space v={0.5} /> |
|
||||||
</> |
|
||||||
); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={styles.root}> |
|
||||||
<Field className={styles.field} label={labelEl} {...fieldProps}> |
|
||||||
{children} |
|
||||||
</Field> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => { |
|
||||||
return { |
|
||||||
root: css({ |
|
||||||
minWidth: theme.spacing(width ?? 0), |
|
||||||
}), |
|
||||||
label: css({ |
|
||||||
fontSize: 12, |
|
||||||
fontWeight: theme.typography.fontWeightMedium, |
|
||||||
}), |
|
||||||
optional: css({ |
|
||||||
fontStyle: 'italic', |
|
||||||
color: theme.colors.text.secondary, |
|
||||||
}), |
|
||||||
field: css({ |
|
||||||
marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
|
|
||||||
}), |
|
||||||
icon: css({ |
|
||||||
color: theme.colors.text.secondary, |
|
||||||
marginLeft: theme.spacing(1), |
|
||||||
':hover': { |
|
||||||
color: theme.colors.text.primary, |
|
||||||
}, |
|
||||||
}), |
|
||||||
}; |
|
||||||
}); |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { Stack } from './Stack'; |
|
||||||
|
|
||||||
interface EditorFieldGroupProps {} |
|
||||||
|
|
||||||
export const EditorFieldGroup = ({ children }: React.PropsWithChildren<EditorFieldGroupProps>) => { |
|
||||||
return <Stack gap={1}>{children}</Stack>; |
|
||||||
}; |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
|
|
||||||
import { stylesFactory, useTheme2 } from '../../themes'; |
|
||||||
|
|
||||||
interface EditorHeaderProps {} |
|
||||||
|
|
||||||
export const EditorHeader = ({ children }: React.PropsWithChildren<EditorHeaderProps>) => { |
|
||||||
const theme = useTheme2(); |
|
||||||
const styles = getStyles(theme); |
|
||||||
|
|
||||||
return <div className={styles.root}>{children}</div>; |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ |
|
||||||
root: css({ |
|
||||||
display: 'flex', |
|
||||||
flexWrap: 'wrap', |
|
||||||
alignItems: 'center', |
|
||||||
gap: theme.spacing(3), |
|
||||||
minHeight: theme.spacing(4), |
|
||||||
}), |
|
||||||
})); |
|
||||||
@ -1,49 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { Button } from '../Button'; |
|
||||||
|
|
||||||
import { Stack } from './Stack'; |
|
||||||
|
|
||||||
interface EditorListProps<T> { |
|
||||||
items: Array<Partial<T>>; |
|
||||||
renderItem: ( |
|
||||||
item: Partial<T>, |
|
||||||
onChangeItem: (item: Partial<T>) => void, |
|
||||||
onDeleteItem: () => void |
|
||||||
) => React.ReactElement; |
|
||||||
onChange: (items: Array<Partial<T>>) => void; |
|
||||||
} |
|
||||||
|
|
||||||
export function EditorList<T>({ items, renderItem, onChange }: EditorListProps<T>) { |
|
||||||
const onAddItem = () => { |
|
||||||
const newItems = [...items, {}]; |
|
||||||
|
|
||||||
onChange(newItems); |
|
||||||
}; |
|
||||||
|
|
||||||
const onChangeItem = (itemIndex: number, newItem: Partial<T>) => { |
|
||||||
const newItems = [...items]; |
|
||||||
newItems[itemIndex] = newItem; |
|
||||||
onChange(newItems); |
|
||||||
}; |
|
||||||
|
|
||||||
const onDeleteItem = (itemIndex: number) => { |
|
||||||
const newItems = [...items]; |
|
||||||
newItems.splice(itemIndex, 1); |
|
||||||
onChange(newItems); |
|
||||||
}; |
|
||||||
return ( |
|
||||||
<Stack> |
|
||||||
{items.map((item, index) => ( |
|
||||||
<div key={index}> |
|
||||||
{renderItem( |
|
||||||
item, |
|
||||||
(newItem) => onChangeItem(index, newItem), |
|
||||||
() => onDeleteItem(index) |
|
||||||
)} |
|
||||||
</div> |
|
||||||
))} |
|
||||||
<Button onClick={onAddItem} variant="secondary" size="md" icon="plus" aria-label="Add" type="button" /> |
|
||||||
</Stack> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -1,30 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
|
|
||||||
import { useStyles2 } from '../../themes'; |
|
||||||
|
|
||||||
import { Stack } from './Stack'; |
|
||||||
|
|
||||||
interface EditorRowProps {} |
|
||||||
|
|
||||||
export const EditorRow = ({ children }: React.PropsWithChildren<EditorRowProps>) => { |
|
||||||
const styles = useStyles2(getStyles); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={styles.root}> |
|
||||||
<Stack gap={2}>{children}</Stack> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => { |
|
||||||
return { |
|
||||||
root: css({ |
|
||||||
padding: theme.spacing(1), |
|
||||||
backgroundColor: theme.colors.background.secondary, |
|
||||||
borderRadius: theme.shape.borderRadius(1), |
|
||||||
}), |
|
||||||
}; |
|
||||||
}; |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { Stack } from './Stack'; |
|
||||||
|
|
||||||
interface EditorRowsProps {} |
|
||||||
|
|
||||||
export const EditorRows = ({ children }: React.PropsWithChildren<EditorRowsProps>) => { |
|
||||||
return ( |
|
||||||
<Stack gap={0.5} direction="column"> |
|
||||||
{children} |
|
||||||
</Stack> |
|
||||||
); |
|
||||||
}; |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { ComponentProps } from 'react'; |
|
||||||
|
|
||||||
import { Switch } from '../Switch/Switch'; |
|
||||||
|
|
||||||
// Wrapper component around <Switch /> that properly aligns it in <EditorField />
|
|
||||||
export const EditorSwitch: React.FC<ComponentProps<typeof Switch>> = (props) => { |
|
||||||
const styles = getStyles(); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={styles.switch}> |
|
||||||
<Switch {...props} /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = () => { |
|
||||||
return { |
|
||||||
switch: css({ |
|
||||||
display: 'flex', |
|
||||||
alignItems: 'center', |
|
||||||
minHeight: 30, |
|
||||||
}), |
|
||||||
}; |
|
||||||
}; |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
interface FlexItemProps { |
|
||||||
grow?: number; |
|
||||||
shrink?: number; |
|
||||||
} |
|
||||||
|
|
||||||
export const FlexItem: React.FC<FlexItemProps> = ({ grow, shrink }) => { |
|
||||||
return <div style={{ display: 'block', flexGrow: grow, flexShrink: shrink }} />; |
|
||||||
}; |
|
||||||
@ -1,89 +0,0 @@ |
|||||||
import { css, cx } from '@emotion/css'; |
|
||||||
import React, { useState } from 'react'; |
|
||||||
import { GroupBase } from 'react-select'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
|
|
||||||
import { stylesFactory, useTheme2 } from '../../themes'; |
|
||||||
import { Select } from '../Select/Select'; |
|
||||||
import { SelectContainerProps, SelectContainer as BaseSelectContainer } from '../Select/SelectContainer'; |
|
||||||
import { SelectCommonProps } from '../Select/types'; |
|
||||||
|
|
||||||
interface InlineSelectProps<T> extends SelectCommonProps<T> { |
|
||||||
label?: string; |
|
||||||
} |
|
||||||
|
|
||||||
export function InlineSelect<T>({ label: labelProp, ...props }: InlineSelectProps<T>) { |
|
||||||
const theme = useTheme2(); |
|
||||||
const [id] = useState(() => Math.random().toString(16).slice(2)); |
|
||||||
const styles = getSelectStyles(theme); |
|
||||||
const components = { |
|
||||||
SelectContainer, |
|
||||||
ValueContainer, |
|
||||||
SingleValue: ValueContainer, |
|
||||||
}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={styles.root}> |
|
||||||
{labelProp && ( |
|
||||||
<label className={styles.label} htmlFor={id}> |
|
||||||
{labelProp} |
|
||||||
{':'} |
|
||||||
</label> |
|
||||||
)} |
|
||||||
{/* @ts-ignore */} |
|
||||||
<Select openMenuOnFocus inputId={id} {...props} components={components} /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
const SelectContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>( |
|
||||||
props: SelectContainerProps<Option, isMulti, Group> |
|
||||||
) => { |
|
||||||
const { children } = props; |
|
||||||
|
|
||||||
const theme = useTheme2(); |
|
||||||
const styles = getSelectStyles(theme); |
|
||||||
|
|
||||||
return ( |
|
||||||
<BaseSelectContainer {...props} className={cx(props.className, styles.container)}> |
|
||||||
{children} |
|
||||||
</BaseSelectContainer> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const ValueContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>( |
|
||||||
props: SelectContainerProps<Option, isMulti, Group> |
|
||||||
) => { |
|
||||||
const { className, children } = props; |
|
||||||
const theme = useTheme2(); |
|
||||||
const styles = getSelectStyles(theme); |
|
||||||
|
|
||||||
return <div className={cx(className, styles.valueContainer)}>{children}</div>; |
|
||||||
}; |
|
||||||
|
|
||||||
const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => ({ |
|
||||||
root: css({ |
|
||||||
display: 'flex', |
|
||||||
fontSize: 12, |
|
||||||
alignItems: 'center', |
|
||||||
}), |
|
||||||
|
|
||||||
label: css({ |
|
||||||
color: theme.colors.text.secondary, |
|
||||||
whiteSpace: 'nowrap', |
|
||||||
}), |
|
||||||
|
|
||||||
container: css({ |
|
||||||
background: 'none', |
|
||||||
borderColor: 'transparent', |
|
||||||
}), |
|
||||||
|
|
||||||
valueContainer: css({ |
|
||||||
display: 'flex', |
|
||||||
alignItems: 'center', |
|
||||||
flex: 'initial', |
|
||||||
color: theme.colors.text.secondary, |
|
||||||
fontSize: 12, |
|
||||||
}), |
|
||||||
})); |
|
||||||
@ -1,65 +0,0 @@ |
|||||||
import { ComponentMeta } from '@storybook/react'; |
|
||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { Stack } from '..'; |
|
||||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; |
|
||||||
import { Input } from '../Input/Input'; |
|
||||||
import { Select } from '../Select/Select'; |
|
||||||
|
|
||||||
import { AccessoryButton } from './AccessoryButton'; |
|
||||||
import { InputGroup } from './InputGroup'; |
|
||||||
|
|
||||||
const meta: ComponentMeta<typeof InputGroup> = { |
|
||||||
title: 'Experimental/InputGroup', |
|
||||||
component: InputGroup, |
|
||||||
decorators: [withCenteredStory], |
|
||||||
}; |
|
||||||
|
|
||||||
export function WithTextInputs() { |
|
||||||
return ( |
|
||||||
<InputGroup> |
|
||||||
<Input placeholder="One" /> |
|
||||||
<Input placeholder="Two" /> |
|
||||||
</InputGroup> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export function WithAccessoryButton() { |
|
||||||
return ( |
|
||||||
<InputGroup> |
|
||||||
<Select value={selectOptions[0]} options={selectOptions} onChange={() => {}} /> |
|
||||||
<AccessoryButton aria-label="Remove group by column" icon="times" variant="secondary" /> |
|
||||||
</InputGroup> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export function WithSelectsAndInput() { |
|
||||||
return ( |
|
||||||
<Stack direction="column"> |
|
||||||
<InputGroup> |
|
||||||
<Input invalid placeholder="LHS" /> |
|
||||||
<Select value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} /> |
|
||||||
<Input placeholder="RHS" /> |
|
||||||
</InputGroup> |
|
||||||
<InputGroup> |
|
||||||
<Input placeholder="LHS" /> |
|
||||||
<Select invalid value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} /> |
|
||||||
<Input placeholder="RHS" /> |
|
||||||
</InputGroup> |
|
||||||
<InputGroup> |
|
||||||
<Input placeholder="LHS" /> |
|
||||||
<Select value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} /> |
|
||||||
<Input invalid placeholder="RHS" /> |
|
||||||
</InputGroup> |
|
||||||
</Stack> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
const selectOptions = [{ label: 'Prometheus', value: 1 }]; |
|
||||||
const comparitorOptions = [ |
|
||||||
{ label: '=', value: 1 }, |
|
||||||
{ label: '<', value: 2 }, |
|
||||||
{ label: '>', value: 3 }, |
|
||||||
]; |
|
||||||
|
|
||||||
export default meta; |
|
||||||
@ -1,80 +0,0 @@ |
|||||||
import { css, cx } from '@emotion/css'; |
|
||||||
import React, { Children, cloneElement, isValidElement, ReactElement } from 'react'; |
|
||||||
|
|
||||||
import { useStyles2 } from '../../themes'; |
|
||||||
|
|
||||||
type Child = string | undefined | ReactElement<{ className?: string; invalid?: unknown }>; |
|
||||||
interface InputGroupProps { |
|
||||||
// we type the children props so we can test them later on
|
|
||||||
children: Child | Child[]; |
|
||||||
} |
|
||||||
|
|
||||||
export const InputGroup = ({ children }: InputGroupProps) => { |
|
||||||
const styles = useStyles2(getStyles); |
|
||||||
|
|
||||||
// Find children with an invalid prop, and set a class name to raise their z-index so all
|
|
||||||
// of the invalid border is visible
|
|
||||||
const modifiedChildren = Children.map(children, (child) => { |
|
||||||
if (isValidElement(child) && child.props.invalid) { |
|
||||||
return cloneElement(child, { className: cx(child.props.className, styles.invalidChild) }); |
|
||||||
} |
|
||||||
|
|
||||||
return child; |
|
||||||
}); |
|
||||||
|
|
||||||
return <div className={styles.root}>{modifiedChildren}</div>; |
|
||||||
}; |
|
||||||
|
|
||||||
// The later in the array the higher the priority for showing that element's border
|
|
||||||
const borderPriority = [ |
|
||||||
'' as const, // lowest priority
|
|
||||||
'base' as const, |
|
||||||
'hovered' as const, |
|
||||||
'invalid' as const, |
|
||||||
'focused' as const, // highest priority
|
|
||||||
]; |
|
||||||
|
|
||||||
const getStyles = () => ({ |
|
||||||
root: css({ |
|
||||||
display: 'flex', |
|
||||||
|
|
||||||
// Style the direct children of the component
|
|
||||||
'> *': { |
|
||||||
'&:not(:first-child)': { |
|
||||||
// Negative margin hides the double-border on adjacent selects
|
|
||||||
marginLeft: -1, |
|
||||||
}, |
|
||||||
|
|
||||||
'&:first-child': { |
|
||||||
borderTopRightRadius: 0, |
|
||||||
borderBottomRightRadius: 0, |
|
||||||
}, |
|
||||||
|
|
||||||
'&:last-child': { |
|
||||||
borderTopLeftRadius: 0, |
|
||||||
borderBottomLeftRadius: 0, |
|
||||||
}, |
|
||||||
|
|
||||||
'&:not(:first-child):not(:last-child)': { |
|
||||||
borderRadius: 0, |
|
||||||
}, |
|
||||||
|
|
||||||
//
|
|
||||||
position: 'relative', |
|
||||||
zIndex: borderPriority.indexOf('base'), |
|
||||||
|
|
||||||
// Adjacent borders are overlapping, so raise children up when hovering etc
|
|
||||||
// so all that child's borders are visible.
|
|
||||||
'&:hover': { |
|
||||||
zIndex: borderPriority.indexOf('hovered'), |
|
||||||
}, |
|
||||||
'&:focus-within': { |
|
||||||
zIndex: borderPriority.indexOf('focused'), |
|
||||||
}, |
|
||||||
}, |
|
||||||
}), |
|
||||||
|
|
||||||
invalidChild: css({ |
|
||||||
zIndex: borderPriority.indexOf('invalid'), |
|
||||||
}), |
|
||||||
}); |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
import { css, cx } from '@emotion/css'; |
|
||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
|
|
||||||
import { stylesFactory, useTheme2 } from '../../themes'; |
|
||||||
|
|
||||||
export interface SpaceProps { |
|
||||||
v?: number; |
|
||||||
h?: number; |
|
||||||
layout?: 'block' | 'inline'; |
|
||||||
} |
|
||||||
|
|
||||||
export const Space = (props: SpaceProps) => { |
|
||||||
const theme = useTheme2(); |
|
||||||
const styles = getStyles(theme, props); |
|
||||||
|
|
||||||
return <span className={cx(styles.wrapper)} />; |
|
||||||
}; |
|
||||||
|
|
||||||
Space.defaultProps = { |
|
||||||
v: 0, |
|
||||||
h: 0, |
|
||||||
layout: 'block', |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({ |
|
||||||
wrapper: css([ |
|
||||||
{ |
|
||||||
paddingRight: theme.spacing(props.h ?? 0), |
|
||||||
paddingBottom: theme.spacing(props.v ?? 0), |
|
||||||
}, |
|
||||||
props.layout === 'inline' && { |
|
||||||
display: 'inline-block', |
|
||||||
}, |
|
||||||
props.layout === 'block' && { |
|
||||||
display: 'block', |
|
||||||
}, |
|
||||||
]), |
|
||||||
})); |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import React, { CSSProperties, useCallback } from 'react'; |
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data'; |
|
||||||
|
|
||||||
import { useStyles2 } from '../../themes'; |
|
||||||
|
|
||||||
interface StackProps { |
|
||||||
direction?: CSSProperties['flexDirection']; |
|
||||||
alignItems?: CSSProperties['alignItems']; |
|
||||||
wrap?: boolean; |
|
||||||
gap?: number; |
|
||||||
flexGrow?: CSSProperties['flexGrow']; |
|
||||||
} |
|
||||||
|
|
||||||
export const Stack = ({ children, ...props }: React.PropsWithChildren<StackProps>) => { |
|
||||||
const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props])); |
|
||||||
|
|
||||||
return <div className={styles.root}>{children}</div>; |
|
||||||
}; |
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2, props: StackProps) => ({ |
|
||||||
root: css({ |
|
||||||
display: 'flex', |
|
||||||
flexDirection: props.direction ?? 'row', |
|
||||||
flexWrap: props.wrap ?? true ? 'wrap' : undefined, |
|
||||||
alignItems: props.alignItems, |
|
||||||
gap: theme.spacing(props.gap ?? 2), |
|
||||||
flexGrow: props.flexGrow, |
|
||||||
}), |
|
||||||
}); |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
export { AccessoryButton } from './AccessoryButton'; |
|
||||||
export { EditorFieldGroup } from './EditorFieldGroup'; |
|
||||||
export { EditorHeader } from './EditorHeader'; |
|
||||||
export { EditorField } from './EditorField'; |
|
||||||
export { EditorRow } from './EditorRow'; |
|
||||||
export { EditorList } from './EditorList'; |
|
||||||
export { EditorRows } from './EditorRows'; |
|
||||||
export { EditorSwitch } from './EditorSwitch'; |
|
||||||
export { FlexItem } from './FlexItem'; |
|
||||||
export { Stack } from './Stack'; |
|
||||||
export { InlineSelect } from './InlineSelect'; |
|
||||||
export { InputGroup } from './InputGroup'; |
|
||||||
export { Space } from './Space'; |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue