application/components/common/simple-editor/mention-menu.js

import React from 'react';

import mentionModifier from './modifier/mention';

class MentionMenu extends React.Component {

    constructor(props) {
        super(props);

        this.onUpdate = this.onUpdate.bind(this);
        this.state = this.props.store.stores.references.getState();

        this.state.menuIsOpen = false;
    }

    componentWillMount() {
        this.props.store.stores.references.listen(this.onUpdate);
        this.state.selectedIndex = this.props.selectedIndex;
    }

    componentWillUnmount() {
        this.props.store.stores.references.unlisten(this.onUpdate);
    }

    onUpdate(state) {
        this.setState(state);
    }

    render() {
        if (!this.state.users.size) {
            return (
                <div><small className='quiet'>You can notify other users by using '@' mentions.</small></div>
            );
        }
        return (
            <MentionMenuContainer store={this.props.store} onSelect={this.props.onSelect} items={this.state.users} selectedIndex={this.state.mentionSelectedIndex} />
        );
    }
}

class MentionMenuContainer extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        const children = this.props.items.map((item, i) => {
            return <MentionMenuItem store={this.props.store} onSelect={this.props.onSelect} key={i} index={i} item={item}  selected={(i == this.props.selectedIndex) ? true : false }/>;
        })

        return (
            <div className='mention-menu'>{children}</div>
        );
    }
}

class MentionMenuItem extends React.Component {
    constructor(props) {
        super(props);

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        e.preventDefault();
        e.stopPropagation();

        this.props.onSelect(this.props.item, this.props.index);
    }

    render() {
        let style = '';
        if (this.props.selected) {
            style = ' selected';
        }
        return (
            <div onClick={this.handleClick} className={'mention-item' + style}>{this.props.item.get('name')}</div>
        );
    }
}

export default MentionMenu;