gadgets/dist/lib/label/Label.d.ts

Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...

/**
 * A text label string control that can be edited.  The label can be double
 * clicked to enter editint mode (similar to a text field).  This behavior can
 * also be suppressed to make the text static.  The contorl is a `<span>`
 * element surrounding text.
 *
 * ## Screen:
 * <img src="https://github.com/jmquigley/gadgets/blob/master/images/label.png" width="30%" />
 *
 * ## Examples:
 *
 * ```javascript
 * import {Label} from 'gadgets';
 *
 * <Label
 *     focus
 *     text="label text"
 * />
 * ```
 *
 * ## API
 * #### Events
 * - `onBlur` - Invoked when the focus moves away from the label
 * - `onChange(React.FormEvent<HTMLSpanElement>)` - Invoked when a label is
 * changed.  This happens when editing the control and pressing enter or losing
 * focus (blur).  It returns a reference to the HTML SPAN element.
 * - `onClick` - Invoked when the label is clicked.
 * - `onDoubleClick` - Invoked when the user double clicks on the control.  This
 * will cause the control to enter an editing mode.
 * - `onKeyDown` - Invoked when a key is initially pressed.  This captures the
 * "escape" key and reverts the text to its previous state if in edit mode.
 * - `onKeyPress' - Invoked when a key is pressed.  This captures the "Enter"
 * key to commit a user edit to the text of the control if editing.
 * - onUpdate(previous: string, text: string)` - Invoked when the label is
 * changed from one value to another.  The previous text and new text are passed
 * to the callback.
 *
 * #### Styles
 * - `ui-label` - Applied to the surrounding `<span>` element for all labels
 *
 * #### Properties
 * - `defaultText="default" {string}` - If the text is fully deleted from the
 * label, then this text is put in as a placeholder.
 * - `focus=false: {boolean}` - If true, then this control is given the focus
 * - `noedit=false {boolean}` - If true, then the control can't be edited
 * - `text="" {string}` - the text value associated with the label.
 * - `useedit=false {boolean}` - If true, then the control is initially placed in
 * edit mode.
 *
 * @module Label
 */
import * as React from "react";
import { BaseComponent, BaseProps, BaseState } from "../shared";
export interface LabelProps extends BaseProps {
    defaultText?: string;
    noedit?: boolean;
    onBlur?: (e: React.FocusEvent<HTMLSpanElement>) => void;
    onChange?: (e: React.FormEvent<HTMLSpanElement>) => void;
    onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
    onDoubleClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
    onKeyDown?: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
    onKeyPress?: (e: React.KeyboardEvent<HTMLSpanElement>) => void;
    onUpdate?: (previous: string, val: string) => void;
    text?: string | number;
    useedit?: boolean;
}
export interface LabelState extends BaseState {
    editable: boolean;
    originalText: string;
    previousText: string;
    text: string;
}
export declare class Label extends BaseComponent<LabelProps, LabelState> {
    static readonly defaultProps: LabelProps;
    private _label;
    constructor(props: LabelProps);
    readonly label: any;
    private handleBlur;
    private handleChange;
    private handleDoubleClick;
    private handleKeyDown;
    private handleKeyPress;
    private handleRef;
    componentDidMount(): void;
    componentDidUpdate(): void;
    static getDerivedStateFromProps(props: LabelProps, state: LabelState): any;
    render(): JSX.Element;
}
export default Label;