# XlReactDipEnum

This element helps you to create an element which provides a limited set of options for the user to select from. 

That component is not possible to import from outside of the xl-react-components. That's related to any xl-react-dip-* 
component. The idea behind it that it's a specific only to a form and does npt work outside of it. If you have 
any missing component which you want to use from xl-react-dip-*, create a corresponding component in xl-react-widget-*.
The difference between xl-react-widget-* and xl-react-dip-* and widget will has his own lifecycle for validation/pristinity/etc.
but DIP not. DIP works with light version of widget which does not do any validation/pristinity/etc. on it's own,
all logic comes from form and tells what is the current state.   

### Summary

* [Playground](#playground)
* [Properties](#properties)

### Playground

* [DIP Enum](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/dip/dipEnum1)

## Properties

- **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
- **message** (object) - overrides default warning/error message provided in validator with provided text here. 
The structure of the model is:
    - **show** (boolean): - the message will be displayed if is set as `true`
    - **text** (string): - the content of the message,
    - **type** (string): - the type of the message. Depends on the type the highlight of the message is different and 
    
    it also affects the validation. Currently we support 2 types of messages: _ERROR_ and _WARNING_.
    
    _ERROR_ type will force user to fix the issue and message will be highlighted in red color and the border of components as well
    
    _WARNING_ type only will notify the user regarding his mistakes, allow to proceed and the message will be highlighted
     in orange color and the border of components as well.
    
- **metadata** (object) - set of parameters of the element, namely:
    - **autocomplete** (boolean) - Default value is false. Tells the browser if that field can be re-filled again.
    That will happen only if user in prior saved that value in browser.  
    - **description** (string) - text under the input field, in case of error/warning, will be replaced with error/warning message
    - **label** (string) - text displayed on the left side from the element.
    - **name** (string) - gives HTML name to an element. It's important when component is a part of the form.
    - **placeholder** (string) - Hint shown to t``he user when input field is empty.
    - **required** (boolean) - forces user to fill in the field. Shows asterisk on the label side. In case of empty value makes element invalid.
    - **requiredDirection** (boolean) - Default value is 'right'. Possible values 'left' or 'right'. With that variable you can control where to display asterisk, on the left or right side of label.
    - **type** (string) - checks if that field equals to 'password', makes the value not visible to the user 
    - **view** (string) - Default value is `default`. There are 2 options here:
        - **default** (string) - will display values as a dropdown.
        - **radio** (string) - will display values as a radio group. 
- **model** (string) - controls the current value 
- **onMessageChange** (function) - triggers once message is changed.
- **onModelChange** (function) - triggers once model is changed.
- **onPristinityChange** (function) - triggers once pristinity is changed.
- **onValidityChange** (function) - triggers once validity is changed.
- **register** (function) - 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
    - **focus** (function) - changes the focus to this element.
    - **resetPristinity** (function) - changes the state of the element to pristine. 
- **required** (boolean) - forces user to fill in the field. Shows asterisk on the label side. In case of empty value makes element invalid.
- **validators** (function) - 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.  
