gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
93 lines (92 loc) • 2.76 kB
TypeScript
/**
* A reusable title block used to format two items: a title and
* a widget. The title is generally a text string and the widget
* can be a text string or another control. The control takes these
* two items and presents them in one of four layouts controled by
* the enum `TitleLayout`:
*
* - TitleLayout.quarter
* - TitleLayout.even
* - TitleLayout.threequarter
* - TitleLayout.third
* - TitleLayout.stacked
* - TitleLayout.dominant
* - TitleLayout.none
*
* In `quarter` the title takes up 25% and the widget takes up 75%
* In `even` the title and widget take up 50%
* In `threequarter` the title takes up 75% and the widget takes up 25%
* In `third` the titel takes up 33% of the space
* In `stacked` the title is placed above the widget
* In `dominant` the title takes up 83% of the width (5/6)
* In `none` the title takes up 100% of the width
*
* ## Screen:
* <img src="https://github.com/jmquigley/gadgets/blob/master/images/title.png" width="60%" />
*
* ## Examples:
*
* #### Title as a string
* ```javascript
* import {Sizing, Title, TitleLayout} from 'gadgets';
* <Title
* widget="widget"
* layout={TitleLayout.stacked}
* sizing={Sizing.small}>
* title="string"
* </Title>
* ```
*
* #### Title as an object
* <Title
* widget="widget"
* layout={TitleLayout.stacked}
* sizing={Sizing.small}>
* title="string"
* </Title>
*
* ## API
* #### Events
* N/A
*
* #### Styles
* - `ui-title-bar` - Placed on the top level `<div>` for the whole control
* - `ui-title` - Placed on the title label text within the title bar.
* - `ui-title-widget` - Placed on the widget control within the title block.
* This is the `<div>` around the given widget.
*
* #### Properties
* - `layout=TitleLayout.dominant {TitleLayout}` - The structure of the
* title/widget within the component.
* - `widget=null {any}` - The given user defined widget control that is
* injected into the title.
*
* @module Title
*/
import * as React from "react";
import { BaseComponent, BaseProps, BaseState } from "../shared";
export declare enum TitleLayout {
quarter = 0,
even = 1,
threequarter = 2,
third = 3,
stacked = 4,
dominant = 5,
none = 6
}
export interface TitleProps extends BaseProps {
layout?: TitleLayout;
onClick?: (e: React.MouseEvent<any>) => void;
onUpdate?: (previous: string, val: string) => void;
title?: any;
widget?: any;
useedit?: boolean;
}
export declare type TitleState = BaseState;
export declare const TitleView: any;
export declare class Title extends BaseComponent<TitleProps, TitleState> {
static defaultProps: TitleProps;
constructor(props: TitleProps);
render(): JSX.Element;
}
export default Title;