@greensight/gds
Version:
Greensight Design System
50 lines (49 loc) • 2.44 kB
TypeScript
import React from 'react';
import { AllowMedia } from '../../../types/emotion/Layout';
import { LayoutContextProps } from './useLayout';
export interface CommonProps extends Omit<LayoutContextProps, 'type' | 'cols' | 'auto'>, Omit<React.HTMLProps<HTMLDivElement>, 'cols' | 'rows' | 'type' | 'wrap'> {
/** Layout items list. */
children: React.ReactNode;
/** Inline mode. Changes `display` type.*/
inline?: AllowMedia<boolean>;
/** Main axis alignment. */
justify?: AllowMedia<'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly'>;
/** Cross axis alignment. */
align?: AllowMedia<'start' | 'end' | 'center' | 'stretch' | 'baseline'>;
/** Main axis direction. */
direction?: AllowMedia<'row' | 'column' | 'unset'>;
}
export interface GridProps extends Pick<LayoutContextProps, 'auto' | 'cols'> {
/** Rows. For grids only. */
rows?: AllowMedia<number | string | (number | string)[]>;
/** Areas. For grids only. */
areas?: AllowMedia<string | string[]>;
/** Auto rows size. For grids only. */
autoRows?: AllowMedia<number | string | (number | string)[]>;
/** Auto cols size. For grids only. */
autoCols?: AllowMedia<number | string | (number | string)[]>;
/** Dense mode. For grids only. */
dense?: AllowMedia<boolean>;
}
export interface FlexProps {
/** Reverse directions. For flex only. */
reverse?: AllowMedia<boolean>;
/** Multiline mode. For flex only. */
wrap?: AllowMedia<boolean>;
}
type Neverize<T extends Record<any, any>> = {
[key in keyof T]?: never;
};
type DiscriminatedProps = ({
type?: AllowMedia<'grid'>;
} & (GridProps & Neverize<FlexProps>)) | ({
type?: AllowMedia<'flex'>;
} & (FlexProps & Neverize<GridProps>));
export interface LayoutProps extends CommonProps, GridProps, FlexProps {
type?: 'grid' | 'flex';
}
type DiscriminatedLayoutProps = CommonProps & DiscriminatedProps;
declare const Layout: (({ type: typeProp, inline: inlineProp, cols: colsProp, rows: rowsProp, areas: areasProp, gap: gapProp, justify: justifyProp, align: alignProp, autoRows: autoRowsProp, autoCols: autoColsProp, direction: directionProp, dense: denseProp, reverse: reverseProp, wrap: wrapProp, auto: autoProp, css, children, ...props }: DiscriminatedLayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
Item: React.FC<import("./Item").LayoutItemProps>;
};
export { Layout };