# TextBox

### Properties

| Name           | Type   | Required | Comments |
| ---------------|--------|----------|----------|
| disabled       | bool   | false    | Sets the state of the component to disabled. |
| error          | string | true     | Sets the error message to display when the component state is not valid. |
| id             | string | false    | Sets the identifier for the **select** component. |
| inputType      | string | false    | Sets the _type_ of the **input** component: a) ``text``*, ``password``, ``email``, ``date`` and ``number``. |
| isRequired     | bool   | false    | Flag used to validate the component state. |
| language       | string | false    | Locale value for the date to be displayed.<br/>_Note: Requires for the input type to be ``date``._<br/>A list of the available values can be found [here](https://en.wikipedia.org/wiki/Language_localisation). |
| maxLength      | number | true     | Limits the amount of characters that the input can accept. |
| minDate        | string | false    | Minimun date value to be accepted by the [Calendar](https://github.com/pecadorcelestial/panda-common-controls/blob/master/docs/api/calendar.md) component. Should be in a valid [format](https://www.w3schools.com/js/js_date_formats.asp). |
| dateFormat     | string | false    | Format to be used to display the date as string. ``dd|DD`` for the 2 digit day, ``yyyy|YYYY`` for the 4 digits year and ``mm|MM`` for the 2 digit month or ``mmm|MMM`` for the months name instead. |
| title          | string | true     | Sets the title text to be displayed. |
| validRegEx     | string | false    | _Regular Expression_ that helps on the component validation. |
| valueType      | string | false    | Sets the kind of values the **input** accepts, for example: is set to ``decimal`` it will only accept numbers and a point separator.<br/>Options: ``number``, ``decimal`` and ``text``*. |

**\*** _default_ value.

<br/>_Note: If ``date`` or ``email`` values are chosen for **inputType** then the **Regular Expression** is initialized by default._

#### Email
```
^([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-]+)\\.([a-zA-Z]{2,4})+$
```

#### Date
```
For date, the dateFormat value is used, for example:
MM-DD-YYYY is replaced by ^(\d){2}-(\d){2}-(\d){4}$
```

### Functions

| Name       | Parameters | Type   | Description |
|------------|------------|--------|-------------|
| onChange   | event      | object | Returns the [event object](https://www.w3schools.com/jsref/event_onchange.asp) generated by the input **onChange** event. |
| onKeyPress | event      | object | Returns the [event object](https://www.w3schools.com/jsref/event_onchange.asp) generated by the input **onKeypress** event. |
| onFocus    | N/A        | N/A    | Returns a reference to the input **onFocus** event. |

### Methods

| Name     | Parameters   | Type   | Description |
|----------|--------------|--------|-------------|
| focus    | N/A          | N/A    | Sends the _focus_ to the **input** component. |
| getValue | N/A          | N/A    | Returns the **input** value. |
| reset    | N/A          | N/A    | Sets the _theme_ and inner values to its initial state. |
| setError | errorMessage | string | Sets the state of the component to **error** and displays the message sent as parameter. |
| setValue | value        | bool   | Sets the **input** value. |
| validate | N/A          | N/A    | Validates the component state and changes its theme accordingly. |

## Usage

```javascript
import React, { Component } from 'react';
import { TextBox } from 'panda-common-controls';

class BasicForm extends Component {
    componentDidMount() {
        this.TextBoxRef.focus();
    }
    render() {
        //Properties.
        const textboxProps = {
            //Required.
            title: 'Title',
            error: 'Error set by properties.',
            maxLength: 50,
            //Optionals.
            disabled: false,
            id: 'id',
            inputType: 'email',
            valueType: 'text',
            //Validation.
            isRequired: true,
            validRegEx: '^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-]+)\.([a-zA-Z]{2,4})+$',
            //Type: Date.
            language: 'en-US',
            minDate: '08/15/1981',
            dateFormat: 'DDth of MMM YYYY',
            //Functions.
            onChange: (event) => {console.log('[panda-common-controls][test][onChange] Value: ', event.target.value);},
            onFocus: () => {console.log('[panda-common-controls][test][onFocus]');},
            onKeyPress: (event) => {console.log('[panda-common-controls][test][onKeyPress] Key: ', event.which);}
        };
        //Result.
        return(
            <div>
                <TextBox {...textboxProps} ref={(textbox) => { this.TextBoxRef = textbox;}}/>
                <button type='button' onClick={(event) => { event.preventDefault(); this.TextBoxRef.validate(); }}>Validate</button>
            <div>
        );
    }
}
```