# cloud-widgets

> [Storybook documentation](https://luisfuertes.github.io/cloud-widgets/index.html)

Latest version **1.0.57** (published 2018-08-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install cloud-widgets
pnpm add cloud-widgets
yarn add cloud-widgets
bun add cloud-widgets
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.57 |
| Published | 2018-08-10 |
| First published | 2018-06-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Luis Fuertes |
| Maintainers | fuertes |

## Links

- npm: https://www.npmjs.com/package/cloud-widgets
- Repository: https://github.com/luisfuertes/cloud-widgets
- Homepage: https://github.com/luisfuertes/cloud-widgets#readme
- Issues: https://github.com/luisfuertes/cloud-widgets/issues
- npm.io page: https://npm.io/package/cloud-widgets

## Dependencies (5)

- [react-select](https://npm.io/package/react-select.md) ^1.2.1
- [style-loader](https://npm.io/package/style-loader.md) ^0.21.0
- [react-spinkit](https://npm.io/package/react-spinkit.md) ^3.0.0
- [react-geosuggest](https://npm.io/package/react-geosuggest.md) ^2.8.0
- [styled-components](https://npm.io/package/styled-components.md) ^3.3.2

## Recent versions

- 1.0.57 (latest) — 2018-08-10
- 1.0.56 — 2018-08-09
- 1.0.55 — 2018-08-01
- 1.0.54 — 2018-07-17
- 1.0.53 — 2018-07-17
- 1.0.52 — 2018-07-17
- 1.0.51 — 2018-07-17
- 1.0.50 — 2018-07-16
- 1.0.49 — 2018-07-16
- 1.0.48 — 2018-07-16
- 1.0.47 — 2018-07-16
- 1.0.46 — 2018-07-16
- 1.0.45 — 2018-07-16
- 1.0.44 — 2018-07-16
- 1.0.43 — 2018-06-22
- … 40 more at https://npm.io/package/cloud-widgets/versions

## README

## Storybook
[Storybook documentation](https://luisfuertes.github.io/cloud-widgets/index.html)    


## Inputs

### TextInput

| Prop name     | Type     | Description                            | Default    |
|---------------|----------|----------------------------------------|------------|
| id            | String   | Input id                               | null       |
| label         | String   | Input label                            | ""         |
| value         | String   | Input value                            | ""         |
| type          | String   | Input type                             | "text"     |
| placeholder   | String   | Input placeholder                      | ""         |
| validation    | Function | Function to validate input             | () => {}   |
| onChange      | Function | onChange callback                      | () => {}   |
| onBlur        | Function | onBlur callback                        | () => {}   |
| onFocus       | Function | onFocus callback                       | () => {}   |
| autoFocus     | Bool     | Input autofocus                        | false      |
| className     | String   | Input classname                        | ""         |

### TextAreaInput
### SelectInput
### MultiSelectInput
### Checkbox
### Button
### TagInput
### RadioInput
### RadioGroup
### GeosuggestInput


## Installation
For install:
`npm install cloud-widgets --save`

## Usage
```
import _ from 'lodash'
import { FormUtils, TextInput, TextAreaInput, SelectInput, MultiSelectInput, TagInput, Button } from 'cloud-widgets'

...

  constructor(props) {
    super(props)
    this.formInputs = {}
  }

  _onSubmit(e) {

    // Function in FormUtils to validate inputs
    if (FormUtils.validateForm(this.formInputs)) {
      const data = {
        firstName: _.get(this.state, 'firstName', ''),
        lastName: _.get(this.state, 'lastName', ''),
      }
      this.props.onSubmit(data)
    }
  }

  _mandatoryValidate(value) {

    // Validation function example
    if (value != null && value != '') {
      return { isValid: true, error: '' }
    } else {
      return { isValid: false, error: 'Mandatory field' }
    }
  }
    
...

  render() {
    return (
      <TextInput
        ref={i => {
          this.formInputs.firstName = i
        }}
        id={'firstName'}
        label={'FirstName:'}
        value={this.state.firstName}
        placeholder={' '}
        onChange={firstName => this.setState({ firstName })}
        validation={v => this._mandatoryValidate(v)}
      />
    )
  }

```

---
_Source: https://npm.io/package/cloud-widgets · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._