# XlReactWidgetTags

That component allows you to add/delete tags.
It can be useful whenever multiple values can be selected for specific parameter. 

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)

### Exports

```
- XlReactWidgetTags
- XlReactWidgetTagsComponent
```

### Playground

[Tas](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetTags1)
[Tags with custom default error](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetTags2)
[Tags with Autocomplete input](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetTags3)

### Properties

- **allowAddOnlyUniqueSuggestion** (boolean) - With that parameter you can decide if you want to allow/disallow to add 
 tags with the same name
- **className** (string) - control class name
- **disabled** (boolean) - does not allow user neither to type nor select other value if is set as `true`
- **displayMode** (string) - 3 options are available to choose: 
      _"creation"_ or _"edit"_ - allows to make changes
      _"display"_ - makes component readonly and user can only view the current value
- **handlers** (object) - this is required field at least need to be implemented addCandidates function that adds options in the dropdown menu- **inputType** (string) -
- **invalid** (bool) - if sets as `true` makes component invalid irrelevantly of validators outcome
- **message** (object) - overrides default warning/error message provided in validator with provided text here.
- **metadata** (object) - set of parameters of the element, namely:
    - **description** - text under the input field, in case of error/warning, will be replaced with error/warning message
    - **label** - text displayed on the left side from the element. 
    - **required** - forces user to fill in the field. Shows asterisk on the label side. In case of empty value makes element invalid.
    - **requiredDirection** - Possible values 'left' or 'right'. With that variable you can control where to display asterisk, on the left or right side of label.  
    - **placeholder** - Hint shown to the user when input field is empty.
- **model** - (object) control the current value
- **name** - (string) - gives HTML name to an element. It's important when component is a part of the form.
- **objLabel** - (string) - if your model is not string but object you need to specify which field consider as id
- **onMessageChange** - (function) - triggers once message is changed. 
- **onModelChange** - (function) - triggers once model is changed. 
- **onPristinityChange** - (func) - triggers once pristinity is changed.
- **onRemove** (function) - triggers once user removes the tag.
- **onValidityChange** - (func) - triggers once validity is changed.
- **register** (func) - triggers when component is mounted. It contains a parameter *api*, which is an object containing 
 helpful component functions which you can invoke to do certain actions, namely
- **showNumberOfRemainingTags** (boolean) - if true and there are more tags then input field can fit, the label will display how more tags are selected.
- **showParentMessages** (boolean) - if sets as `true` ignores own messages, but takes it from parent component. It is useful once you start
 composing components and autocomplete component only a part of it.
- **skin** (string) - Possible values: 'checkbox', 'color-and-checkbox'
- **tag** (string) - currently typed value for a new tag 
- **tagTransform** (function) - If provided tag's value is not string, but object, this function has to be used to fetch a value from 
the model. 
- **validators** (func) - that's a function which returns back an array of triggers. Read more about structure of triggers below. Validators are 
 called on every change of model. The result of the validators is to show if the component valid or not and providing a 
 message to the user (error or warning). In case of many messages there is a priority rule. First shows error message, if all of them are solved - then warnings.
 In case of many error (or warning messages) - first message will be shown.  

### Example
    
```jsx harmony

    const addCandidates = (value, suggestedElements) => {
        const filterCond = (item) => item.status.toLowerCase().indexOf(value.toLowerCase()) !== -1;
        const res = R.filter(filterCond, suggestedElements);
        return Promise.resolve(res);
    };
    
    export const getHandlers = {addCandidates: ({value}) => addCandidates(value)};

    <XlReactWidgetTags
        className="task-state"
        handlers={{autocomplete: getHandlers}}
        inputType="autocomplete"
        metadata={{
            label: 'Status',
            name: 'autocomplete',
            placeholder: 'All placeholders'
        }}
        model={this.props.model}
        objLabel="status"
        onModelChange={this.props.onModelChange}
        skin="color-and-checkbox"
        tagTransform={(val) => val}
    />
```
