228 lines
4.8 KiB
TypeScript
228 lines
4.8 KiB
TypeScript
import __ReactToolbox from "../index.d.ts";
|
|
|
|
export interface ButtonTheme {
|
|
/**
|
|
* Used for the root in case button is accent.
|
|
*/
|
|
accent?: string;
|
|
/**
|
|
* Used for the root element in any button.
|
|
*/
|
|
button?: string;
|
|
/**
|
|
* Used when the button is flat for the root element.
|
|
*/
|
|
flat?: string;
|
|
/**
|
|
* Used when the button is floating for the root element.
|
|
*/
|
|
floating?: string;
|
|
/**
|
|
* For the icon inside a button.
|
|
*/
|
|
icon?: string;
|
|
/**
|
|
* Used when colors are inverted.
|
|
*/
|
|
inverse?: string;
|
|
/**
|
|
* Used for mini floating buttons.
|
|
*/
|
|
mini?: string;
|
|
/**
|
|
* Used for neutral colored buttons.
|
|
*/
|
|
neutral?: string;
|
|
/**
|
|
* Used for primary buttons when button is primary.
|
|
*/
|
|
primary?: string;
|
|
/**
|
|
* Used when the button is raised for root element.
|
|
*/
|
|
raised?: string;
|
|
/**
|
|
* Used for the ripple element.
|
|
*/
|
|
rippleWrapper?: string;
|
|
/**
|
|
* Used for toggle buttons in the root element.
|
|
*/
|
|
toggle?: string;
|
|
}
|
|
|
|
interface ButtonProps extends __ReactToolbox.Props {
|
|
/**
|
|
* Indicates if the button should have accent color.
|
|
* @default false
|
|
*/
|
|
accent?: boolean;
|
|
/**
|
|
* Children to pass through the component.
|
|
*/
|
|
children?: __React.ReactNode;
|
|
/**
|
|
* If true, component will be disabled.
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
/**
|
|
* If true, the button will have a flat look.
|
|
* @default false
|
|
*/
|
|
flat?: boolean;
|
|
/**
|
|
* If true, the button will have a floating look.
|
|
* @default false
|
|
*/
|
|
floating?: boolean;
|
|
/**
|
|
* Creates a link for the button.
|
|
*/
|
|
href?: string;
|
|
/**
|
|
* Value of the icon (See Font Icon Component).
|
|
*/
|
|
icon?: __React.ReactNode | string;
|
|
/**
|
|
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
|
*/
|
|
inverse?: boolean;
|
|
/**
|
|
* The text string to use for the name of the button.
|
|
*/
|
|
label?: string;
|
|
/**
|
|
* To be used with floating button. If true, the button will be smaller.
|
|
* @default false
|
|
*/
|
|
mini?: boolean;
|
|
/**
|
|
* Set it to false if you don't want the neutral styles to be included.
|
|
* @default true
|
|
*/
|
|
neutral?: boolean;
|
|
/**
|
|
* Fires after the mouse leaves the Component.
|
|
*/
|
|
onMouseLeave?: __React.MouseEventHandler;
|
|
/**
|
|
* Fires after the mouse is released from the Component.
|
|
*/
|
|
OnMouseUp?: __React.MouseEventHandler;
|
|
/**
|
|
* Indicates if the button should have primary color.
|
|
* @default false
|
|
*/
|
|
primary?: boolean;
|
|
/**
|
|
* If true, the button will have a raised look.
|
|
* @default false
|
|
*/
|
|
raised?: boolean;
|
|
/**
|
|
* If true, component will have a ripple effect on click.
|
|
* @default true
|
|
*/
|
|
ripple?: boolean;
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: ButtonTheme;
|
|
}
|
|
|
|
export class Button extends __React.Component<ButtonProps, {}> { }
|
|
|
|
export interface IconButtonTheme {
|
|
/**
|
|
* Used for the root in case button is accent.
|
|
*/
|
|
accent?: string;
|
|
/**
|
|
* Used for the root element in any button.
|
|
*/
|
|
button?: string;
|
|
/**
|
|
* For the icon inside a button.
|
|
*/
|
|
icon?: string;
|
|
/**
|
|
* Used when colors are inverted.
|
|
*/
|
|
inverse?: string;
|
|
/**
|
|
* Used for neutral colored buttons.
|
|
*/
|
|
neutral?: string;
|
|
/**
|
|
* Used for primary buttons when button is primary.
|
|
*/
|
|
primary?: string;
|
|
/**
|
|
* Used for the ripple element.
|
|
*/
|
|
rippleWrapper?: string;
|
|
/**
|
|
* Used for toggle buttons in the root element.
|
|
*/
|
|
toggle?: string;
|
|
}
|
|
|
|
interface IconButtonProps extends __ReactToolbox.Props {
|
|
/**
|
|
* Indicates if the button should have accent color.
|
|
* @default false
|
|
*/
|
|
accent?: boolean;
|
|
/**
|
|
* Children to pass through the component.
|
|
*/
|
|
children?: __React.ReactNode;
|
|
/**
|
|
* If true, component will be disabled.
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
/**
|
|
* Creates a link for the button.
|
|
*/
|
|
href?: string;
|
|
/**
|
|
* Value of the icon (See Font Icon Component).
|
|
*/
|
|
icon?: __React.ReactNode | string;
|
|
/**
|
|
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
|
*/
|
|
inverse?: boolean;
|
|
/**
|
|
* Set it to false if you don't want the neutral styles to be included.
|
|
* @default true
|
|
*/
|
|
neutral?: boolean;
|
|
/**
|
|
* Fires after the mouse leaves the Component.
|
|
*/
|
|
onMouseLeave?: __React.MouseEventHandler;
|
|
/**
|
|
* Fires after the mouse is released from the Component.
|
|
*/
|
|
OnMouseUp?: __React.MouseEventHandler;
|
|
/**
|
|
* Indicates if the button should have primary color.
|
|
* @default false
|
|
*/
|
|
primary?: boolean;
|
|
/**
|
|
* If true, component will have a ripple effect on click.
|
|
* @default true
|
|
*/
|
|
ripple?: boolean;
|
|
/**
|
|
* Classnames object defining the component style.
|
|
*/
|
|
theme?: IconButtonTheme;
|
|
}
|
|
|
|
export class IconButton extends __React.Component<IconButtonProps, {}> { }
|