preact-material-components
Version:
preact wrapper for "Material Components for the web"
59 lines (58 loc) • 2.58 kB
TypeScript
import MDCComponent from '@material/base/component';
import { MDCRipple } from '@material/ripple';
import { Component, VNode } from 'preact';
import { SoftMerge } from './types';
export interface IMaterialComponentOwnProps {
ripple?: boolean;
}
export interface IMaterialComponentOwnState {
}
export declare type MaterialComponentProps<PropType> = SoftMerge<PropType & IMaterialComponentOwnProps, JSX.HTMLAttributes>;
export declare type MaterialComponentState<StateType> = StateType & IMaterialComponentOwnState;
/**
* Base class for every Material component in this package
* NOTE: every component should add a ref by the name of `control` to its root dom for autoInit Properties
*
* @export
* @class MaterialComponent
* @extends {Component}
*/
export declare abstract class MaterialComponent<PropType extends {
[prop: string]: any;
}, StateType extends {
[prop: string]: any;
}> extends Component<MaterialComponentProps<PropType>, MaterialComponentState<StateType>> {
MDComponent?: MDCComponent<any, any>;
/**
* Attributes inside this array will be check for boolean value true
* and will be converted to mdc classes
*/
protected abstract mdcProps: string[];
/** This will again be used to add apt classname to the component */
protected abstract componentName: string;
/**
* Props of which change the MDComponent will be informed.
* Override to use.
* When used do not forget to include this.afterComponentDidMount() at the end of your componentDidMount function.
* Requires this.MDComponent to be defined.
*/
protected mdcNotifyProps?: string[];
/** The final class name given to the dom */
protected classText?: string | null;
protected ripple?: MDCRipple | null;
protected control?: Element;
render(props: any): VNode;
/** Attach the ripple effect */
componentDidMount(): void;
componentWillReceiveProps(nextProps: MaterialComponentProps<PropType>): void;
componentWillUnmount(): void;
protected afterComponentDidMount(): void;
protected setControlRef(control?: Element): void;
/** Build the className based on component names and mdc props */
protected buildClassName(props: MaterialComponentProps<PropType>): string;
/** Returns the class name for element */
protected getClassName(element: VNode): string | null | undefined;
/** Components must implement this method for their specific DOM structure */
protected abstract materialDom(props: MaterialComponentProps<PropType>): VNode;
}
export default MaterialComponent;