fk-react-ui-components/lib/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 React.createElement(
            ActionMenuContainer,
            { className: this.props.className || '' },
            React.createElement(
                'div',
                {
                    role: 'menu',
                    className: 'more-icon',
                    onClick: () => {
                        this.toggleMenuItem();
                    }
                },
                React.createElement('i', { className: 'fa fa-ellipsis-v' })
            ),
            this.state.showMenuItems && this.props.data && this.props.data.length > 0 && React.createElement(
                'ul',
                null,
                this.props.data.map(o => React.createElement(
                    'li',
                    {
                        key: o,
                        onClick: () => {
                            this.onSelected(o);
                        }
                    },
                    o
                ))
            )
        );
    }
}

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

ActionMenu.defaultProps = {
    onMenuSelect: f => f,
    className: ''
};
export default enhanceWithClickOutside(ActionMenu);
//# sourceMappingURL=index.js.map