@enact/ui/Layout/Layout.d.ts

A collection of simplified unstyled cross-platform UI components for Enact

// Type definitions for ui/Layout

import { ForwardRefProps as ui_ForwardRef_ForwardRefProps } from "@enact/ui/ForwardRef";
import * as React from "react";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

export interface CellBaseProps {
  /**
 * The alignment of  `Cell` .
 * 
 * Aligns this  `Cell`  vertically in the case of a horizontal layout or
horizontally in the case of a vertical layout.  `"start"` ,  `"center"`  and
 `"end"`  are the most commonly used, although all values of  `align-self`  are supported.
 `"start"`  refers to the top in a horizontal layout, and left in a vertical LTR layout
 `"end"`  refers to the bottom in a horizontal layout, and right in a vertical LTR layout
 `"start"`  and  `"end"`  reverse places when in a vertical layout in a RTL locale.
 */
  align?: string;
  /**
   * Any valid    that should be positioned in this  `Cell` .
   */
  children?: Any;
  /**
 * The type of component to use to render as the  `Cell` . May be a DOM node name (e.g 'div',
'span', etc.) or a custom component.
 */
  component?: string | React.ComponentType;
  /**
 * Customizes  `Cell`  together with  `component`  prop.
 * 
 * When using   , the  `componentCss`  prop is passed to the rendered component
as  `css` .
 */
  componentCss?: object;
  /**
 * Called with a reference to the root component.
 * 
 * When using   , the  `ref`  prop is forwarded to the rendered component
as  `componentRef` .
 */
  componentRef?: object | Function;
  /**
 * Sizes  `Cell`  to its container.
 * 
 * A  `grow` able cell will expand to its maximum size, according to the remaining space of the
container. This is used when you want to grow the size of this Cell so that it fills the
container. See the    property for more details.
 * 
 * When combined with   ,  `shrink`  prop takes precedence over
 `grow`  prop and  `grow`  prop is simply ignored.
 */
  grow?: boolean;
  /**
 * Sizes  `Cell`  to its contents.
 * 
 * A  `shrink` able cell will contract to its minimum size, according to the dimensions of its
contents. This is used when you want the size of this Cell's content to influence the
dimensions of this cell.  `shrink`  will not allow the contents of the Layout to be pushed
beyond its boundaries (overflowing). See the    property
for more details.
 */
  shrink?: boolean;
  /**
 * Sets the desired size of the Cell using any valid CSS measurement value.
 * 
 * When used in conjunction with   , the size will be
the maximum size, shrinking as necessary, to fit the content.
 * 
 * When used in conjunction with   , the size will be the
minimum size, growing as necessary, to fit the container.
 * 
 * E.g.
 * *  `size="400px"`  -> cell will be 400px, regardless of the dimensions of your content
 * *  `size="400px" shrink`  -> cell will be 400px if your content is greater than 400px,
and will match your contents size if it's smaller
 * *  `size="400px" grow`  -> cell will be 400px if the container has no remaining space.
Cell can grow larger than  `size`  to fill the container if there is remaining space
in the container.
 * 
 * This accepts any valid CSS measurement value string. If a numeric value is used, it will
be treated as a pixel value and converted to a
   based on the rules of
  .
 */
  size?: string | number;
}
/**
 * A stateless component that provides a space for your content in a
  , without    applied.
 */

export class CellBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, CellBaseProps>
> {}

export interface LayoutBaseProps {
  /**
 * The alignment of children.
 * 
 * Aligns the children    vertically in the case of a horizontal
layout or horizontally in the case of a vertical layout.  `"start"` ,  `"center"`  and
 `"end"`  are the most commonly used, although all values of  `align-items`  are supported.
 `"start"`  refers to the top in a horizontal layout, and left in a vertical LTR layout
 `"end"`  refers to the bottom in a horizontal layout, and right in a vertical LTR layout
 `"start"`  and  `"end"`  reverse places when in a vertical layout in a RTL locale.
This includes support shorthand for combining  `align-items`  and  `justify-content`  into
a single property, separated by a space, in that order. This allows you to specify both
the horizontal and vertical alignment in one property, separated by a space.
 * 
 * For example,  `align="center space-between"`  means  `align-items: center`  and
 `justify-content: space-between`  for each.  `justify-content`  property can be used to
align the Cells on the main axis and adjust gaps among the Cells. To declare the
 `justify-content`  property only, just add a heading space for  `align`  prop string like
 `align=" space-between"` . The default value for  `align-items`  is  `stretch` . It can be
also used for  `align`  prop like  `align="stretch space-between"` . All values of
 `justify-content`  are supported, like  `start` ,  `end` ,  `center` ,  `space-between` ,
 `space-around` , and  `space-evenly` .
 * ```
<Layout align="center space-around">
    <Cell>Left Column</Cell>
    <Cell>Right Column</Cell>
</Layout>
```
 ```
<Layout align=" space-between">
    <Cell>Left Column</Cell>
    <Cell>Right Column</Cell>
</Layout>
```
 */
  align?: string;
  /**
   * Only    components are supported as children.
   */
  children?: Cell | Cell[];
  /**
 * The type of component to use to render as the  `Layout` . May be a DOM node name (e.g 'div',
'span', etc.) or a custom component.
 */
  component?: string | React.ComponentType;
  /**
 * Called with a reference to the root component.
 * 
 * When using   , the  `ref`  prop is forwarded to this component
as  `componentRef` .
 */
  componentRef?: object | Function;
  /**
 * Allows this  `Layout`  to have following siblings drawn on the same line as itself
instead of carving out the entire horizontal space for itself.
 */
  inline?: boolean;
  /**
 * The orientation of the  `Layout` , i.e. how the children    are
positioned on the screen. Must be either  `'horizontal'`  or  `'vertical'` .
 */
  orientation?: string;
  /**
 * Sets the Layout's  `flex-wrap`  values.
 * 
 * Determines how a Layout handles its cells if there are more than fit in the available
space. This works like a normal  `Boolean`  prop, but also accepts strings for customization
beyond the basic on/off support. In addition to  `true`  and  `false` , the following strings
are supported: 'wrap', 'nowrap', 'reverse'. 'reverse' performs standard line wrapping but
additional lines are placed above/before the preceding line instead of below/after.
 */
  wrap?: boolean | string;
}
/**
 * A container for  `Cell` s.
 * 
 * A stateless component that acts as a containing area for    to be
positioned in a row or a column (horizontally or vertically, respectively. It supports an
   property for laying-out its contents
( `Cells` ) in an organized, readable way.
 * 
 * Example:
 * ```
import Input from '@enact/moonstone/Input';
import css from './LayoutExample.less';
...
<fieldset>
	<Layout align="center">
		<Cell component="label" size="40%" className={css.label} shrink>First Name</Cell>
		<Cell component={Input} placeholder="First" className={css.input} />
	</Layout>
	<Layout align="center">
		<Cell component="label" size="40%" className={css.label} shrink>Last Name</Cell>
		<Cell component={Input} placeholder="Last" className={css.input} />
	</Layout>
</fieldset>
```
 */

export class LayoutBase extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, LayoutBaseProps>
> {}

export interface CellDecoratorProps extends ui_ForwardRef_ForwardRefProps {}
export function CellDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & CellDecoratorProps>;

export interface CellProps
  extends Omit<Merge<CellBaseProps, CellDecoratorProps>, "componentRef"> {}
/**
 * A stateless component that provides a space for your content in a
  .
 */

export class Cell extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, CellProps>
> {}

export interface LayoutDecoratorProps extends ui_ForwardRef_ForwardRefProps {}
export function LayoutDecorator<P>(
  Component: React.ComponentType<P> | string,
): React.ComponentType<P & LayoutDecoratorProps>;

export interface LayoutProps
  extends Omit<
    Merge<LayoutBaseProps, ui_ForwardRef_ForwardRefProps>,
    "componentRef"
  > {}
/**
 * A container for  `Cell` s.
 * 
 * A stateless component that acts as a containing area for    to be
positioned in a row or a column (horizontally or vertically, respectively. It supports an
   property for laying-out its contents
( `Cells` ) in an organized, readable way.
 * 
 * Example:
 * ```
import Input from '@enact/moonstone/Input';
import css from './LayoutExample.less';
...
<fieldset>
	<Layout align="center">
		<Cell component="label" size="40%" className={css.label} shrink>First Name</Cell>
		<Cell component={Input} placeholder="First" className={css.input} />
	</Layout>
	<Layout align="center">
		<Cell component="label" size="40%" className={css.label} shrink>Last Name</Cell>
		<Cell component={Input} placeholder="Last" className={css.input} />
	</Layout>
</fieldset>
```
 */

export class Layout extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, LayoutProps>
> {}

export interface ColumnProps
  extends Merge<LayoutProps, ui_ForwardRef_ForwardRefProps> {}
/**
 * Shorthand for  `<Layout orientation="vertical">` , which positions its
   vertically.
 * ```
┌────┐
├────┤
├────┤
├────┤
└────┘
```
 */

export class Column extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, ColumnProps>
> {}

export interface RowProps
  extends Merge<LayoutProps, ui_ForwardRef_ForwardRefProps> {}
/**
 * Shorthand for  `<Layout orientation="horizontal">` , which positions its
   horizontally.
 * ```
┌─┬─┬─┬─┐
│ │ │ │ │
└─┴─┴─┴─┘
```
 */

export class Row extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, RowProps>
> {}

export default Layout;