application/metaproperties/selectentry-meta-property.js

import React from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import Immutable from 'immutable';
import shallowCompare from 'react-addons-shallow-compare';
import {connect} from 'react-redux';

import {
    entriesFetch,
    entriesFetchNoSideEffect
} from '../redux/actions/entry-actions';

class SelectentryMetaProperty extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'SelectentryMetaProperty';
        this.state = {
            entries: Immutable.fromJS([])
        };
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.value != this.props.value) {
            return true;
        }
        if (nextProps.disabled != this.props.disabled) {
            return true;
        }
        if (nextState.entries != this.state.entries) {
            return true;
        }
        return false;
    }

    rando() {
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        let str = [];
        for (let i=0; i<5; i++) {
            str.push(chars.charAt(Math.floor(Math.random() * chars.length)));
        }

        return str.join('');
    }

    componentWillMount() {
        entriesFetchNoSideEffect({channel: this.props.channel, 'per_page': 500, 'page': 1}).then((entries) => {
            this.setState({entries: entries});
        });
    }

    handleChange(e, i, val) {
        const propName = this.props.name;

        let fakeEvent = {
            target: {
                getAttribute: function() {
                    return propName;
                },
                value: val
            }
        };
        this.props.onChange(fakeEvent);
    }

    render() {
        const name = this.props.name ? this.props.name : 'sentry_' + this.rando();

        return (
            <SelectField
                name={name}
                floatingLabelText={this.props.floatingLabelText}
                value={this.props.value}
                fullWidth={true}
                onChange={this.handleChange.bind(this)}
                >
                {this.state.entries.map(item => (
                    <MenuItem key={item.get('id')} value={item.get('uuid')} primaryText={item.get('title')} />
                ))}
            </SelectField>
        );
    }
}

export default SelectentryMetaProperty;