gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
163 lines (162 loc) • 6.78 kB
TypeScript
/**
* The base class for all components in the library. This enables each module
* to guarantee certain variables will be present through inheritance.
*
* The values of these variables are computed automatically for any component
* that inherits from BaseComponent (controlled by props). This class inherits
* from `React.PureComponent` to take advantage of `shouldComponentUpdate`
* shallow object comparison when computing styles based on props/state.
*
* #### Examples:
*
* ```javascript
* import {BaseComponent} from '../shared';
* ...
* export class XYZ extends BaseComponent<Props, State> {
* ...
* }
*
* ...
*
* <XYZ sizing={Sizing.xxsmall} location={Location.topRight} />
* ```
*
* In the example above the `sizing` and `location` would be computed
* automatically for the given values. These values are then available to the
* child class to use in building the component using these styles.
*
* @module BaseComponent
*/
import { PureComponent } from "react";
import { DefaultTheme } from "styled-components";
import { Keys } from "util.keys";
import { KeyHandler, KeyMap } from "./keybinding";
import { BaseProps } from "./props";
import { FontStyle, Sizes, Sizing, Styling } from "./sizing";
export declare const baseZIndex: number;
export declare const defaultSize: number;
export declare let sizes: Sizes;
export interface BaseOptions {
namespaceRoot?: string;
}
export interface RenderOptions {
noclassnameupdate?: boolean;
}
export declare abstract class BaseComponent<P extends BaseProps, S> extends PureComponent<P, S> {
private _className;
private _debug;
private _debugCreate;
private _debugRender;
private _defaultClassName;
static defaultStyles: any;
private _id;
protected _keys: Keys;
protected _keyHandler: KeyHandler;
protected _keyMap: KeyMap;
private _name;
protected _options: BaseOptions;
state: S;
constructor(defaultClassName: string, cls: any, props: P, state?: S, options?: BaseOptions);
readonly className: string;
readonly defaultClassName: string;
readonly defaultSize: number;
/**
* @return {string} the unique id value that was generated for this component
*/
readonly id: string;
initialState: S;
readonly keyHandler: KeyHandler;
readonly keyMap: KeyMap;
readonly keys: Keys;
readonly name: string;
readonly theme: DefaultTheme;
/**
* The input mappings structure is the name of the keyboaard mapping
* property and the associated function handler pointer. These are
* mapped to their respective KeyMap and Handler objects. These can
* then be used by the HotKeys object in a component to map a
* keyboard handler to that component. The format of the input
* object is:
*
* mappings = {
* "kbActivate": this.handler
* }
*
* The key name in the interface must match the prop name for that
* key binding. See the <Button>
*
* @param mappings {KeyHanlder} - an object of key names and their
* associated function mappings.
*/
protected buildKeyMap(mappings: KeyHandler): void;
protected debug(...args: any[]): void;
static font(sizing?: Sizing): FontStyle;
static fontSize(sizing?: Sizing): number;
static fontSizePX(sizing?: Sizing, scale?: number): string;
static fontSizeREM(sizing?: Sizing, scale?: number): string;
/**
* Each component has a getDerivedStateFromProps call. This method is used
* by that call to set state properties that are common to all components. It
* is checked for changes before the update will go through (so updates can be
* avoided when not needed). The method contains a 3rd parameter flag to
* force this to return a new object instead of null.
* @param props {P} - the set of props that will be updated
* @param state {S} - the current state object when called
* @param forceUpdate=false {boolean} - force the state to return an object for
* update
* @return {S} a new, mutated state that will be merged into the current state
*/
static getDerivedStateFromProps(props: any, state: any, forceUpdate?: boolean): any;
static lineHeightPX(sizing?: Sizing): string;
/**
* Takes the given base Sizing and determines what the next size
* in the list would be. e.g. if current size is *normal*, then
* the next size would be *large*.
* @param sizing {Sizing} an optional parameter that allows for overriding
* the default sizing when the class is created.
* @returns a reference to a `Styling` object. This contains
* font type/size, box, and border information.
*/
static next(sizing?: Sizing): Styling;
/**
* Takes the given base Sizing and determines what the previous size
* in the list would be. e.g. if current size is *normal*, then
* the previous size would be *small*.
* @param sizing {Sizing} an optional parameter that allows for overriding
* the default sizing when the class is created.
* @returns a reference to a `Styling` object. This contains font type/size,
* box, and border information.
*/
static prev(sizing?: Sizing): Styling;
/**
* Called by the child render methods as the first call. This is used to
* update base items before the child class performs its render operation.
*/
render(options?: RenderOptions): any;
/**
* Checks the previous and incoming props for sizing changes. If the control
* has children, then they are each updated with the sizing change.
* @param props {P} the previous properties on the component
* @param nextPrpos {P} the new properties for the component
* @return {any} a new set of children if the size has changed. If the props
* do not have chilren, then NULL is returned.
*/
protected resizeChildren(props: P, nextProps: P): any;
static styling(sizing?: Sizing): Styling;
/**
* Returns the Sizing enum value associated with the given sizing.
* @param sizing {Sizing} an optional parameter that allows for overriding
* the default sizing when the class is created.
* @returns a refernce to a Sizing enum value.
*/
static type(sizing?: Sizing): Sizing;
/**
* Used in each render() call for a component to properly setup up the
* className property used in that component
* @param classNames=null {string|string[]} - Allows the render method
* to add additional classes when building the default className
* @return a string that represents the current className string for
* a component.
*/
protected updateClassName(classNames?: string | string[]): string;
}