azure-devops-ui/Components/Sizer/Sizer.Props.d.ts

React components for building web UI in Azure DevOps

import { IReadonlyObservableValue } from '../../Core/Observable';
/**
 * The orientiation of a the Sizer defines whether or not it is being used
 * in a row or column of components. This is used to determine if the
 * component is sizing on the X axis (horizontally) or Y axis (vertically).
 */
export declare enum Orientation {
    /**
     * Sizes on the X axis, left - right.
     */
    row = 0,
    /**
     * Sizes on the Y axis top - bottom.
     */
    column = 1
}
/**
 * Position should be defined as where the Sized component being managed
 * by the Sizer is in relationship. If the Sized component comes after
 * the Sizer is should be set to Far, otherwise Near.
 */
export declare enum Position {
    /**
     * The Sized component appears before the Sizer.
     */
    near = 0,
    /**
     * The Sized component appears after the Sizer.
     */
    far = 1
}
/**
 * The Sizer component is used to render a small UI that allows the user
 * the update the size of a piece of the UI. This is commonly used in
 * things like splitters.
 */
export interface ISizerProps {
    /**
     * Optional aria-label for the divider
     */
    ariaLabel?: string;
    /**
     * CSS className that should be added to the Sizer component.
     */
    className?: string;
    /**
     * divider can be used to control the visibility of a small divider line
     * inside the sizer. If no divider is show then sizer will be transparent
     * but still work as expected. The caller can use a custom className to
     * customize both the sizer and any dividers.
     *
     * @default true
     */
    divider?: boolean;
    /**
     * Unique Id for the Sizer component.
     */
    id?: string;
    /**
     * keyboardStepMultiplier defines the number of pixels the sizer should move
     * when a user uses the keyboard to manipulate the sizer.
     */
    keyboardStepMultiplier?: number;
    /**
     * maxSize of the Sized component. The sizer will stop increasing the
     * size of the component at this point.
     *
     * @default 10000 (px)
     */
    maxSize?: number;
    /**
     * minSize of the Sized component. The sizer will stop decreasing the
     * size of the component at this point.
     *
     * @default 100 (px)
     */
    minSize?: number;
    /**
     * onSize is called with the Id and the updated size of the component
     * while the sizing is ocurring. This can be used for live updates to
     * the UI.
     */
    onSize: (event: MouseEvent | KeyboardEvent, updatedSize: number, id?: string) => void;
    /**
     * onSizeEnd is called with the Id and the updated size of the component
     * when the sizing is complete. This can used to update any persistant
     * values for the sizes if needed.
     */
    onSizeEnd?: (id?: string) => void;
    /**
     * orientation defines whether or the sizer is sizing row based components
     * or column based components. Row based sizer will size horizontally and
     * Column will size vertically.
     *
     * @default Orientation.row
     */
    orientation: Orientation;
    /**
     * position defines the relationship between the Sizer and the Sized
     * components. If the Sized component occurs before the Sizer it should
     * be defined as near, otherwise it should be defined as far.
     *
     * @default Position.near
     */
    position?: Position;
    /**
     * size defines the current size of the Sized component. Using ObservableValues
     * can help reduce re-render by managing state internally instead of in a
     * higher level component.
     */
    size: number | IReadonlyObservableValue<number>;
    /**
     * tabIndex can be used to allow for keyboard accessibility of the sizer.
     */
    tabIndex?: number;
}
/**
 * An Sized component uses the ISizedProps to render a container with the
 * specified size. Generally the Sized component assumes it is in a flex-box
 * but is not required.
 */
export interface ISizedProps {
    /**
     * CSS className that should be added to the Sizer component.
     */
    className?: string;
    /**
     * The height of the element generated by the component.
     */
    height?: number | IReadonlyObservableValue<number>;
    /**
     * The width of the element generated by the component.
     */
    width?: number | IReadonlyObservableValue<number>;
}