gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
57 lines (56 loc) • 1.95 kB
TypeScript
/**
* A wrapper for a single string value that will appear within a `TagList`.
* A tag can be static or contain a delete button within it. This control
* would generally just be used within the `TagList`.
*
* ## Screen:
* <img src="https://github.com/jmquigley/gadgets/blob/master/images/tagList.png" width="40%" />
*
* ## Examples:
*
* ```javascript
* import {Tag} from 'gadgets';
* <Tag usedelete>strvalue</Tag>
* ```
*
* ## API
* #### Events
* - `onClick` - invoked when the user clicks on the delete button within the
* control. This is only visible when `usedelete` is specified.
* - `onDelete(tag: string)` - invoked when the delete button is pressed. The
* value of the tag is given to the callback as a parameter.
* - `onMouseOut` - invoked when the mouse leaves the control
* - `onMouseOver` - invoked when the mouse moves over the control.
*
* #### Styles
* - `ui-tag` - placed on the root `<div>` of the control.
*
* #### Properties
* - `usedelete=false {boolean}`- if true then the delete button will be
* shown when the mouse enters the tag, otherwise this is suppressed.
*
* @module Tag
*/
import * as React from "react";
import { BaseComponent, BaseProps, BaseState } from "../shared";
export interface TagProps extends BaseProps {
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
onDelete?: (tag: string) => void;
onMouseOut?: (e: React.MouseEvent<HTMLDivElement>) => void;
onMouseOver?: (e: React.MouseEvent<HTMLDivElement>) => void;
usedelete?: boolean;
}
export interface TagState extends BaseState {
showDelete?: boolean;
}
export declare const StyledLabel: any;
export declare class Tag extends BaseComponent<TagProps, TagState> {
static readonly defaultProps: TagProps;
private tag;
constructor(props: TagProps);
private handleClick;
private handleMouseOut;
private handleMouseOver;
render(): JSX.Element;
}
export default Tag;