IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana-UI: Extend Layout props (#23771)

Browse Source 
* Grafana-UI: Extend Layout props

* Grafana-UI: Merge container styles

* Search: Fix prop types

* Grafana-UI: remove className prop
This commit is contained in:
Alex Khomenko 2020-04-24 17:25:39 +03:00 committed by GitHub
parent 1955c3911b
commit 3d9a88c7af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-ui/src/components/Layout/Layout.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { HTMLProps } from 'react';
import { css } from 'emotion'; import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { stylesFactory, useTheme } from '../../themes'; import { stylesFactory, useTheme } from '../../themes';
@ -11,7 +11,7 @@ type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg';
type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center'; type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center';
type Align = 'normal' | 'flex-start' | 'flex-end' | 'center'; type Align = 'normal' | 'flex-start' | 'flex-end' | 'center';
export interface LayoutProps { export interface LayoutProps extends Omit<HTMLProps<HTMLDivElement>, 'align' | 'children' | 'wrap'> {
children: React.ReactNode[] | React.ReactNode; children: React.ReactNode[] | React.ReactNode;
orientation?: Orientation; orientation?: Orientation;
spacing?: Spacing; spacing?: Spacing;
@ -34,11 +34,12 @@ export const Layout: React.FC<LayoutProps> = ({
align = 'normal', align = 'normal',
wrap = false, wrap = false,
width = 'auto', width = 'auto',
...rest
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme, orientation, spacing, justify, align, wrap); const styles = getStyles(theme, orientation, spacing, justify, align, wrap);
return ( return (
<div className={styles.layout} style={{ width }}> <div className={styles.layout} style={{ width }} {...rest}>
{React.Children.toArray(children) {React.Children.toArray(children)
.filter(Boolean) .filter(Boolean)
.map((child, index) => { .map((child, index) => {
@ -110,7 +111,6 @@ const getStyles = stylesFactory(
margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0}; margin-right: ${orientation === Orientation.Horizontal ? finalSpacing : 0};
display: flex; display: flex;
align-items: ${align}; align-items: ${align};
// height: 100%;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;