fk-react-ui-components/components/ActionMenu/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

/**
 * Created by ravikumar.r on 16/12/17.
 */
import React from 'react';
import enhanceWithClickOutside from 'react-click-outside';
import _ from 'lodash';
import PropTypes from 'prop-types';

import ActionMenuContainer from './styles/ActionMenu';

class ActionMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showMenuItems: false
        };
        _.bindAll(this, ['onSelected', 'toggleMenuItem']);
    }
    onSelected(item) {
        this.setState({ showMenuItems: false });
        if (this.props.onMenuSelect) {
            this.props.onMenuSelect(item);
        }
    }
    toggleMenuItem() {
        this.setState({ showMenuItems: !this.state.showMenuItems });
    }
    handleClickOutside() {
        this.setState({ showMenuItems: false });
    }

    render() {
        return (
            <ActionMenuContainer className={this.props.className || ''}>
                <div
                    role="menu"
                    className="more-icon"
                    onClick={() => {
                        this.toggleMenuItem();
                    }}
                >
                    <i className="fa fa-ellipsis-v" />
                </div>

                {this.state.showMenuItems &&
                    this.props.data &&
                    this.props.data.length > 0 && (
                        <ul>
                            {this.props.data.map(o => (
                                <li
                                    key={o}
                                    onClick={() => {
                                        this.onSelected(o);
                                    }}
                                >
                                    {o}
                                </li>
                            ))}
                        </ul>
                    )}
            </ActionMenuContainer>
        );
    }
}

ActionMenu.propTypes = {
    data: PropTypes.arrayOf(PropTypes.string).isRequired,
    onMenuSelect: PropTypes.func,
    className: PropTypes.string
};

ActionMenu.defaultProps = {
    onMenuSelect: f => f,
    className: ''
};
export default enhanceWithClickOutside(ActionMenu);