HISTORY:

- 2017-03-20, MG, Inicijalni dokument


# Select

Grommet Select kontrolu potrebo je unaprijediti sa sljedećim funkcionalnostima:

- `options` prop da uvijek prima format itema  `{label (string), value (string, number)}

- dodati prop `checkmarks (boolean)` koja ako je true u dropdown listi doda
[checkmark uz selektirane iteme](https://bitbucket.org/sedmiodjel/espa-ui/downloads/Checkmarks.png)

- rendering input dijela Select kontrole da je [join labela selektiranih itema](https://bitbucket.org/sedmiodjel/espa-ui/downloads/MultiSelect.png). Ukoliko nijedan
item nije selektiran kroz props odrediti defaultni tekst (`Izaberite opciju`).
Implementacija `SelectField` kontrole (Select unutar forme) može poslužiti za referencu:


```javascript
import React, { Component } from 'react';
import { FormField, Select, Box } from 'grommet';
import CheckmarkIcon from 'grommet/components/icons/base/Checkmark';

class SelectField extends Component {
  static defaultProps = {
    checkmarks: true,
    multiple: false,
    label: 'Izaberite opciju'
  };

  constructor(props) {
    // copy defaultValue into the selected state
    super(props);
    // if wrapped in redux-form Field  value props is passed to input
    const val = props.value || props.input.value;
    if (Array.isArray(val))
      this.state = { selected: [...val] };
    else
      this.state = { selected: [] };
    console.log(val);
  }

  onChange = (changed) => {
    console.log(changed);
    const next = this.toggleSelectionFor(changed.option);
    console.log('next->', next);
    console.log('this.props.input.value->', this.props.input.value);
    this.props.input.onChange(next);
  }


  toggleSelectionFor = (option) => {
    let idx = this.state.selected.findIndex(item => item.value === option.value);
    const nextState = this.props.multiple ? [...this.state.selected] : [];
    if (idx === -1)
      nextState.push(option)
    else
      nextState.splice(idx, 1);    
    this.setState({ selected: nextState });
    return nextState;
  }

  isSelected = option => option.value && this.state.selected      
      .filter(item => item.value === option.value).length === 1;

  renderCheckmarks = (options) => {
    const textStyle = { fontWeight: 500 };
    return options.map(item => {
      let label = (
        <Box direction="row" alignContent="center" justify="between">
          <span style={textStyle}>{item.label || item.text}</span>
          {this.isSelected(item) ? (<CheckmarkIcon size="small" />) : null}
        </Box>
      );
      return ({ ...item, label });
    });
  }

  render() {
    const { input: { name, onBlur, value },
      label, options, multiple, checkmarks,
      meta: { error, touched } } = this.props;

    let opts = checkmarks ? this.renderCheckmarks(options) : options;
    console.log('this.props.input.value->', this.props.input.value);
    return (
      <FormField 
        label={label} 
        htmlFor={name} 
        error={touched && error} 
        onBlur={() => onBlur(value)}>
        <Select
          name={name} 
          options={opts}
          multiple={multiple}
          value={this.props.input.value.map(item => item.text).join(', ')}
          onChange={this.onChange} />
      </FormField>
    );
  }
}

export default SelectField;
```