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

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

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.

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.

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

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

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.

<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.

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.

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

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'
}