# cerebral-selectr

cerebral-selectr  module is built to only be used with Cerebral and React.

## install

yarn add cerebral-selectr

## demo

You can use the webpackbin https://www.webpackbin.com/bins/-KjrQdO5r08RepJqEA1W or the demo inside.


## setup

```js
import {Selectr} from 'cerebral-selectr'

const controller = Controller({
  modules: {
    selectr: Selectr({})
  }
})
```

To instantiate a Select you can just do the following. The name is mandatory

```js
import React, { Component } from 'react'
import { Select } from 'cerebral-selectr'

class SomeComponent extends Component {
  render() {
    return (
      <div>
        <Select name={'tag1'} />
      </div>
    )
  }
}

export default SomeComponent

```

Additionally you can provide options to the component. If you don't set selected the option will be searchable. You can add extra payload if you need to get more data from hooks. You can also add a tagClicked function that is triggered when a tag is clicked. You will get the namespace and label as payload.

```js
import React, { Component } from 'react'
import { Select } from 'cerebral-selectr'

class SomeComponent extends Component {
  render() {
    return (
      <div>
        <Select
          payload={{ moreStuff: 1, stuff: 2 }}
          tagClicked={(payload) => {}}
          name={'tag1'}
          options=[
            {label: 'Some option', selected: true}
          ]/>
      </div>
    )
  }
}

export default SomeComponent

```

Sometimes you want to make a tag pinned so that it can't be deleted.

```js
import React, { Component } from 'react'
import { Select } from 'cerebral-selectr'

class SomeComponent extends Component {
  render() {
    return (
      <div>
        <Select
          name={'tag1'}
          options=[
            {label: 'Some option', selected: true, pinned: true}
          ]/>
      </div>
    )
  }
}

export default SomeComponent

```

You can make the whole select uneditable by passing editable: false

```js
import React, { Component } from 'react'
import { Select } from 'cerebral-selectr'

class SomeComponent extends Component {
  render() {
    return (
      <div>
        <Select
          editable={false}
          name={'tag1'}
          options=[
            {label: 'Some option', selected: true}
          ]
        />
      </div>
    )
  }
}

export default SomeComponent

```

## hooks
If you want to hook into the lifecycle of cerebral-selectr you have the following options.

- `onOptionCreated` - When a new option is created that wasn't in the list before. Props passed is the namespace and the new label.
- `onSelectOption` - Select an option. Props passed is the namespace and the label.
- `unSelectOption` - unselect an option


```js

const controller = Controller({
  modules: {
    selectr: Selectr({
      hooks: {
        onOptionCreated: [
          ({ props }) => {
            console.log('tag is created')
          }
        ],
        onSelectOption: [
          ({ props }) => {
            console.log('Option is selected')
          }
        ],
        unSelectOption: [
          ({ props }) => {
            console.log('options is unselected')
          }
        ],
      }
    })
  }
})

```

## override styles
You can override styles if you want another.

```js
<Select
  name={'tag1'}
  overrideStyles={{
    container: {
      borderRadius: 0
    },
    tags: {
      tag: {
        color: '#fff',
        borderRadius: 0,
        backgroundColor: '#588a00'
      },
      deleteEnter: {
        backgroundColor: '#008040',
        color: '#fff'
      }
    },
    options: {
      selected: {
        background: '#008040',
        color: '#fff'
      }
    }
  }}
/>
```

This is the default style of tag. Wrap it in the tags object.
```js
tag: {
  color: '#fff',
  padding: 4,
  fontSize: 9,
  margin: 2,
  borderRadius: 2,
  backgroundColor: 'rgb(51, 122, 183)',
  display: 'inline-block',
  cursor: 'pointer',
  outline: 0,
  maxWidth: 'calc(100% - 12px)',
  wordWrap: 'break-word'
},
pinnedTag: {
  paddingRight: 2
},
flash: {
  backgroundColor: 'orange',
  transition: 'background 0.5s ease'
},
deleteEnter: {
  backgroundColor: '#d9534f'
},
pinnedEnter: {
  backgroundColor: 'rgb(20, 81, 135)'
},
cross: {
  marginLeft: 1,
  color: '#fff',
  padding: 2,
  fontSize: 11,
  cursor: 'pointer'
},
pinnedCross: {
  width: 0,
  fontSize: 11,
  display: 'inline-block'
}
```

Default styles for container.

```js
container: {
  borderRadius: 2,
  fontFamily: 'verdana',
  width: 300,
  background: '#fff',
  padding: 3,
  border: '1px solid #ccc',
  cursor: 'pointer',
  display: 'inline-block'
},
noneEditableContainer: {
  fontFamily: 'verdana',
  width: 300,
  background: '#fff',
  display: 'inline-block'
}
```

Default styles for options

```js
container: {
  height: 200,
  width: 308,
  overflow: 'hidden',
  boxSizing: 'border-box',
  backgroundColor: '#fff',
  position: 'absolute',
  borderRadius: 2,
  lineHeight: 1.3,
  border: '1px solid #aaa',
  boxShadow: '0 1px 6px rgba(0,0,0,.25)',
  outline: 0,
  cursor: 'pointer'
},
option: {
  padding: 7,
  cursor: 'pointer',
  fontFamily: 'verdana',
  color: '#000',
  height: 14,
  fontSize: 10,
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis'
},
selected: {
  background: 'rgb(51, 122, 183)',
  color: '#fff'
}
```