TSDEV-MAT-REACT

Installation

npm install --save tsdev-mat-react

CSS

add index.css from dist folder to your project

import './path/to/node_modules/tsdev-mat-react/dist/index.css';

Import & Usage

import {
    TsdevTag,
    TsdevTagSelect,
} from 'tsdev-mat-react';

... JSX Context ...

<TsdevTag />
<TsdevTagSelect />

... JSX Context ...

Important

You can include all components as a base component in your implementation. No properties are required as needed. So you can get a better overview, without provoking mistakes immediately.

Run storybook

npm run storybook

• open storybook: localhost:6006

Create static storybook:

npm run build-storybook

• result: ./storybook-static/index.html

Run JavaScript and Less linter:

TsdevTag

Examples

import { TsdevTag } from 'tsdev-mat-react';

... JSX Context ...

<TsdevTag />
<TsdevTag id="my-special-tag"/>
<TsdevTag label="My Tag Label"/>

... JSX Context ...

propTypes

TsdevTag.propTypes = {
    avatarUrl: PropTypes.string,
    disabled: PropTypes.bool,
    id: PropTypes.string,
    label: PropTypes.string,
    onClick: PropTypes.func,
    onDelete: PropTypes.func,
    showAvatar: PropTypes.bool,
    showDeleteIcon: PropTypes.bool,
    showValue: PropTypes.bool,
    size: PropTypes.string,
    subClass: PropTypes.string,
    tagColor: PropTypes.string,
    tooltip: PropTypes.string,
    value: PropTypes.string,
    valueColor: PropTypes.string,
    variant: PropTypes.string,
};

defaultProps

TsdevTag.defaultProps = {
    avatarUrl: '',
    disabled: false,
    id: `tsdevTag-${Uuid.v4()}`,
    label: 'Tag',
    onClick: noop,
    onDelete: noop,
    showAvatar: true,
    showDeleteIcon: true,
    showValue: true,
    size: 'small', // small, medium
    subClass: '',
    tagColor: 'default', // default, primary, secondary
    tooltip: '',
    value: '0',
    valueColor: 'default', // default, primary, secondary
    variant: 'default', // default, outlined
};

TsdevTagSelect

Examples

import { TsdevTagSelect } from 'tsdev-mat-react';

... JSX Context ...

<TsdevTagSelect />
<TsdevTagSelect id="my-special-tag"/>

... JSX Context ...

propTypes

TsdevTagSelect.propTypes = {
    expanded: PropTypes.bool,
    id: PropTypes.string,
    label: PropTypes.string,
    noResultsFound: PropTypes.string,
    noResultsSeverity: PropTypes.string,
    noTagsFound: PropTypes.string,
    noTagsSeverity: PropTypes.string,
    onChange: PropTypes.func,
    onClickResult: PropTypes.func,
    resultWidth: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]),
    searchValue: PropTypes.string,
    showSearch: PropTypes.bool,
    subClass: PropTypes.string,
    tags: PropTypes.array,
    width: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]),
};

defaultProps

TsdevTagSelect.defaultProps = {
    expanded: false,
    id: `tsdevTagSelect-${Uuid.v4()}`,
    label: 'Search',
    noResultsFound: 'No result found',
    noResultsSeverity: 'info', // error, warning, info, success
    noTagsFound: 'No tag found',
    noTagsSeverity: 'info', // error, warning, info, success
    onChange: noop,
    onClickResult: noop,
    resultWidth: 500,
    searchValue: '',
    showSearch: true,
    subClass: '',
    tags: [
        {
            avatarUrl: '',
            disabled: false,
            id: `tsdevTagSelectItem-${Uuid.v4()}`,
            label: 'Tag # 1',
            onClick: noop,
            onDelete: noop,
            showAvatar: true,
            showDeleteIcon: true,
            showValue: true,
            tagColor: 'default',
            tooltip: 'Tag # 1',
            value: 1,
            valueColor: 'primary',
            variant: 'outlined',
            selected: true,
        },
        {
            avatarUrl: '',
            disabled: true,
            id: `tsdevTagSelectItem-${Uuid.v4()}`,
            label: 'Tag # 2',
            onClick: noop,
            onDelete: noop,
            showAvatar: true,
            showDeleteIcon: true,
            showValue: true,
            tagColor: 'default',
            tooltip: 'Tag # 2',
            value: 2,
            valueColor: 'primary',
            variant: 'outlined',
            selected: false,
        },
        {
            avatarUrl: '',
            disabled: false,
            id: `tsdevTagSelectItem-${Uuid.v4()}`,
            label: 'Tag # 3',
            onClick: noop,
            onDelete: noop,
            showAvatar: false,
            showDeleteIcon: true,
            showValue: true,
            tagColor: 'primary',
            tooltip: 'Tag # 3',
            value: 3,
            valueColor: 'secondary',
            variant: 'default',
            selected: false,
        },
        {
            avatarUrl: '',
            disabled: false,
            id: `tsdevTagSelectItem-${Uuid.v4()}`,
            label: 'Tag # 4',
            onClick: noop,
            onDelete: noop,
            showAvatar: false,
            showDeleteIcon: false,
            showValue: false,
            tagColor: 'secondary',
            tooltip: 'Tag # 4',
            value: 4,
            valueColor: 'primary',
            variant: 'default',
            selected: true,
        },
        {
            avatarUrl: '',
            disabled: true,
            id: `tsdevTagSelectItem-${Uuid.v4()}`,
            label: 'This is a long tag',
            onClick: noop,
            onDelete: noop,
            showAvatar: false,
            showDeleteIcon: true,
            showValue: false,
            tagColor: 'secondary',
            tooltip: 'Tag # 4',
            value: 4,
            valueColor: 'primary',
            variant: 'outlined',
            selected: true,
        },
        {
            avatarUrl: '',
            disabled: false,
            id: `tsdevTagSelectItem-${Uuid.v4()}`,
            label: 'XYZ',
            onClick: noop,
            onDelete: noop,
            showAvatar: true,
            showDeleteIcon: false,
            showValue: true,
            tagColor: 'secondary',
            tooltip: 'Tag # 5',
            value: 5,
            valueColor: 'primary',
            variant: 'outlined',
            selected: false,
        },
        {
            avatarUrl: '',
            disabled: false,
            id: `tsdevTagSelectItem-${Uuid.v4()}`,
            label: 'My Tag',
            onClick: noop,
            onDelete: noop,
            showAvatar: false,
            showDeleteIcon: false,
            showValue: true,
            tagColor: 'primary',
            tooltip: 'Tag # 6',
            value: 6,
            valueColor: 'default',
            variant: 'outlined',
            selected: false,
        },
    ],
    width: 500,
};