UNPKG

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
/** * 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; }