focus-components-v3/dropdown/index.js

Focus web components to build applications (based on Material Design)

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _dec, _class;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _material = require('../behaviours/material');

var _material2 = _interopRequireDefault(_material);

var _i18next = require('i18next');

var _i18next2 = _interopRequireDefault(_i18next);

var _button = require('../button');

var _button2 = _interopRequireDefault(_button);

var _uniqueId = require('lodash/uniqueId');

var _uniqueId2 = _interopRequireDefault(_uniqueId);

var _map = require('lodash/map');

var _map2 = _interopRequireDefault(_map);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

//TODO : do not render list in DOM when not displayed ?
var Dropdown = (_dec = (0, _material2.default)('dropdown'), _dec(_class = function (_PureComponent) {
    _inherits(Dropdown, _PureComponent);

    function Dropdown(props) {
        _classCallCheck(this, Dropdown);

        var _this = _possibleConstructorReturn(this, _PureComponent.call(this, props));

        _this._htmlId = (0, _uniqueId2.default)('dropdown-');
        _this.state = {
            menuVisible: false
        };
        return _this;
    }

    Dropdown.prototype._handleAction = function _handleAction(action) {
        var _this2 = this;

        return function () {
            if (_this2.props.operationParam) {
                action(_this2.props.operationParam);
            } else {
                action();
            }
        };
    };

    Dropdown.prototype._handleButtonClick = function _handleButtonClick() {
        this.setState({ menuVisible: !this.state.menuVisible });
    };

    Dropdown.prototype.render = function render() {
        var _this3 = this;

        var menuVisible = this.state.menuVisible;
        var _props = this.props,
            button = _props.button,
            position = _props.position,
            operations = _props.operations;

        var mdlClasses = 'mdl-menu mdl-menu--' + position.vertical + '-' + position.horizontal + ' mdl-js-menu mdl-js-ripple-effect';
        return _react2.default.createElement(
            'div',
            { 'data-focus': 'dropdown' },
            _react2.default.createElement(_button2.default, _extends({ handleOnClick: this._handleButtonClick.bind(this), id: this._htmlId }, button)),
            _react2.default.createElement(
                'ul',
                { className: mdlClasses, htmlFor: this._htmlId, ref: 'dropdown' },
                (0, _map2.default)(operations, function (operation, idx) {
                    return _react2.default.createElement(
                        'li',
                        { className: 'mdl-menu__item ' + operation.style, key: idx,
                            onClick: _this3._handleAction(operation.action) },
                        _i18next2.default.t(operation.label)
                    );
                })
            )
        );
    };

    return Dropdown;
}(_react.PureComponent)) || _class);
;

Dropdown.displayName = 'Dropdown';
Dropdown.defaultProps = {
    position: {
        vertical: 'bottom',
        horizontal: 'left'
    },
    button: {
        icon: 'more_vert',
        shape: 'icon'
    }
};
Dropdown.propTypes = {
    position: _react.PropTypes.shape({
        vertical: _react.PropTypes.string.isRequired,
        horizontal: _react.PropTypes.string.isRequired
    }),
    button: _react.PropTypes.shape({
        icon: _react.PropTypes.string,
        label: _react.PropTypes.string,
        shape: _react.PropTypes.string
    }),
    operations: _react.PropTypes.array.isRequired
};
exports.default = Dropdown;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyLUZSLmpzIl0sIm5hbWVzIjpbIkRyb3Bkb3duIiwicHJvcHMiLCJfaHRtbElkIiwic3RhdGUiLCJtZW51VmlzaWJsZSIsIl9oYW5kbGVBY3Rpb24iLCJhY3Rpb24iLCJvcGVyYXRpb25QYXJhbSIsIl9oYW5kbGVCdXR0b25DbGljayIsInNldFN0YXRlIiwicmVuZGVyIiwiYnV0dG9uIiwicG9zaXRpb24iLCJvcGVyYXRpb25zIiwibWRsQ2xhc3NlcyIsInZlcnRpY2FsIiwiaG9yaXpvbnRhbCIsImJpbmQiLCJvcGVyYXRpb24iLCJpZHgiLCJzdHlsZSIsInQiLCJsYWJlbCIsImRpc3BsYXlOYW1lIiwiZGVmYXVsdFByb3BzIiwiaWNvbiIsInNoYXBlIiwicHJvcFR5cGVzIiwic3RyaW5nIiwiaXNSZXF1aXJlZCIsImFycmF5Il0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7O0FBQUE7Ozs7QUFDQTs7OztBQUNBOzs7O0FBQ0E7Ozs7QUFDQTs7OztBQUNBOzs7O0FBQ0E7Ozs7Ozs7Ozs7Ozs7O0FBRUE7SUFFTUEsUSxXQURMLHdCQUFTLFVBQVQsQztjQUNLQSxROztBQUNGLGFBREVBLFFBQ0YsQ0FBWUMsS0FBWixFQUFtQjtBQUFBLDhCQURqQkQsUUFDaUI7O0FBQUEscURBQ2YsMEJBQU1DLEtBQU4sQ0FEZTs7QUFFZixjQUFLQyxPQUFMLEdBQWUsd0JBQVMsV0FBVCxDQUFmO0FBQ0EsY0FBS0MsS0FBTCxHQUFhO0FBQ1RDLHlCQUFhO0FBREosU0FBYjtBQUhlO0FBTWxCOztBQVBDSixZLFdBU0ZLLGEsMEJBQWNDLE0sRUFBUTtBQUFBOztBQUNsQixlQUFPLFlBQU07QUFDVCxnQkFBSSxPQUFLTCxLQUFMLENBQVdNLGNBQWYsRUFBK0I7QUFDM0JELHVCQUFPLE9BQUtMLEtBQUwsQ0FBV00sY0FBbEI7QUFDSCxhQUZELE1BRU87QUFDSEQ7QUFDSDtBQUNKLFNBTkQ7QUFPSCxLOztBQWpCQ04sWSxXQW1CRlEsa0IsaUNBQXFCO0FBQ2pCLGFBQUtDLFFBQUwsQ0FBYyxFQUFDTCxhQUFhLENBQUMsS0FBS0QsS0FBTCxDQUFXQyxXQUExQixFQUFkO0FBQ0gsSzs7QUFyQkNKLFksV0F1QkZVLE0scUJBQVM7QUFBQTs7QUFBQSxZQUNFTixXQURGLEdBQ2lCLEtBQUtELEtBRHRCLENBQ0VDLFdBREY7QUFBQSxxQkFFa0MsS0FBS0gsS0FGdkM7QUFBQSxZQUVFVSxNQUZGLFVBRUVBLE1BRkY7QUFBQSxZQUVVQyxRQUZWLFVBRVVBLFFBRlY7QUFBQSxZQUVvQkMsVUFGcEIsVUFFb0JBLFVBRnBCOztBQUdMLFlBQU1DLHFDQUFtQ0YsU0FBU0csUUFBNUMsU0FBd0RILFNBQVNJLFVBQWpFLHNDQUFOO0FBQ0EsZUFDSTtBQUFBO0FBQUEsY0FBSyxjQUFXLFVBQWhCO0FBQ0ksdUVBQVEsZUFBZSxLQUFLUixrQkFBTCxDQUF3QlMsSUFBeEIsQ0FBNkIsSUFBN0IsQ0FBdkIsRUFBMkQsSUFBSSxLQUFLZixPQUFwRSxJQUFpRlMsTUFBakYsRUFESjtBQUVJO0FBQUE7QUFBQSxrQkFBSSxXQUFXRyxVQUFmLEVBQTJCLFNBQVMsS0FBS1osT0FBekMsRUFBa0QsS0FBSSxVQUF0RDtBQUNLLG1DQUFJVyxVQUFKLEVBQWdCLFVBQUNLLFNBQUQsRUFBWUMsR0FBWjtBQUFBLDJCQUNiO0FBQUE7QUFBQSwwQkFBSSwrQkFBNkJELFVBQVVFLEtBQTNDLEVBQW9ELEtBQUtELEdBQXpEO0FBQ0kscUNBQVMsT0FBS2QsYUFBTCxDQUFtQmEsVUFBVVosTUFBN0IsQ0FEYjtBQUVLLDBDQUFRZSxDQUFSLENBQVVILFVBQVVJLEtBQXBCO0FBRkwscUJBRGE7QUFBQSxpQkFBaEI7QUFETDtBQUZKLFNBREo7QUFhSCxLOztXQXhDQ3RCLFE7O0FBeUNMOztBQUVEQSxTQUFTdUIsV0FBVCxHQUF1QixVQUF2QjtBQUNBdkIsU0FBU3dCLFlBQVQsR0FBd0I7QUFDcEJaLGNBQVU7QUFDTkcsa0JBQVUsUUFESjtBQUVOQyxvQkFBWTtBQUZOLEtBRFU7QUFLcEJMLFlBQVE7QUFDSmMsY0FBTSxXQURGO0FBRUpDLGVBQU87QUFGSDtBQUxZLENBQXhCO0FBVUExQixTQUFTMkIsU0FBVCxHQUFxQjtBQUNqQmYsY0FBVSxpQkFBVWMsS0FBVixDQUFpQjtBQUN2Qlgsa0JBQVUsaUJBQVVhLE1BQVYsQ0FBaUJDLFVBREo7QUFFdkJiLG9CQUFZLGlCQUFVWSxNQUFWLENBQWlCQztBQUZOLEtBQWpCLENBRE87QUFLakJsQixZQUFRLGlCQUFVZSxLQUFWLENBQWlCO0FBQ3JCRCxjQUFNLGlCQUFVRyxNQURLO0FBRXJCTixlQUFPLGlCQUFVTSxNQUZJO0FBR3JCRixlQUFPLGlCQUFVRTtBQUhJLEtBQWpCLENBTFM7QUFVakJmLGdCQUFZLGlCQUFVaUIsS0FBVixDQUFnQkQ7QUFWWCxDQUFyQjtrQkFZZTdCLFEiLCJmaWxlIjoiZnItRlIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHtQcm9wVHlwZXMsIFB1cmVDb21wb25lbnR9IGZyb20gJ3JlYWN0JztcclxuaW1wb3J0IFJlYWN0RE9NIGZyb20gJ3JlYWN0LWRvbSc7XHJcbmltcG9ydCBNYXRlcmlhbCBmcm9tICcuLi9iZWhhdmlvdXJzL21hdGVyaWFsJztcclxuaW1wb3J0IGkxOG5leHQgZnJvbSAnaTE4bmV4dCc7XHJcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vYnV0dG9uJztcclxuaW1wb3J0IHVuaXF1ZUlkIGZyb20gJ2xvZGFzaC91bmlxdWVJZCc7XHJcbmltcG9ydCBtYXAgZnJvbSAnbG9kYXNoL21hcCc7XHJcblxyXG4vL1RPRE8gOiBkbyBub3QgcmVuZGVyIGxpc3QgaW4gRE9NIHdoZW4gbm90IGRpc3BsYXllZCA/XHJcbkBNYXRlcmlhbCgnZHJvcGRvd24nKVxyXG5jbGFzcyBEcm9wZG93biBleHRlbmRzIFB1cmVDb21wb25lbnQge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMpIHtcclxuICAgICAgICBzdXBlcihwcm9wcyk7XHJcbiAgICAgICAgdGhpcy5faHRtbElkID0gdW5pcXVlSWQoJ2Ryb3Bkb3duLScpO1xyXG4gICAgICAgIHRoaXMuc3RhdGUgPSB7XHJcbiAgICAgICAgICAgIG1lbnVWaXNpYmxlOiBmYWxzZVxyXG4gICAgICAgIH07XHJcbiAgICB9O1xyXG5cclxuICAgIF9oYW5kbGVBY3Rpb24oYWN0aW9uKSB7XHJcbiAgICAgICAgcmV0dXJuICgpID0+IHtcclxuICAgICAgICAgICAgaWYgKHRoaXMucHJvcHMub3BlcmF0aW9uUGFyYW0pIHtcclxuICAgICAgICAgICAgICAgIGFjdGlvbih0aGlzLnByb3BzLm9wZXJhdGlvblBhcmFtKTtcclxuICAgICAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgICAgIGFjdGlvbigpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgfTtcclxuICAgIH07XHJcblxyXG4gICAgX2hhbmRsZUJ1dHRvbkNsaWNrKCkge1xyXG4gICAgICAgIHRoaXMuc2V0U3RhdGUoe21lbnVWaXNpYmxlOiAhdGhpcy5zdGF0ZS5tZW51VmlzaWJsZX0pO1xyXG4gICAgfTtcclxuXHJcbiAgICByZW5kZXIoKSB7XHJcbiAgICAgICAgY29uc3Qge21lbnVWaXNpYmxlfSA9IHRoaXMuc3RhdGU7XHJcbiAgICAgICAgY29uc3Qge2J1dHRvbiwgcG9zaXRpb24sIG9wZXJhdGlvbnN9ID0gdGhpcy5wcm9wcztcclxuICAgICAgICBjb25zdCBtZGxDbGFzc2VzID0gYG1kbC1tZW51IG1kbC1tZW51LS0ke3Bvc2l0aW9uLnZlcnRpY2FsfS0ke3Bvc2l0aW9uLmhvcml6b250YWx9IG1kbC1qcy1tZW51IG1kbC1qcy1yaXBwbGUtZWZmZWN0YDtcclxuICAgICAgICByZXR1cm4gKFxyXG4gICAgICAgICAgICA8ZGl2IGRhdGEtZm9jdXM9J2Ryb3Bkb3duJz5cclxuICAgICAgICAgICAgICAgIDxCdXR0b24gaGFuZGxlT25DbGljaz17dGhpcy5faGFuZGxlQnV0dG9uQ2xpY2suYmluZCh0aGlzKX0gaWQ9e3RoaXMuX2h0bWxJZH0gey4uLmJ1dHRvbn0gLz5cclxuICAgICAgICAgICAgICAgIDx1bCBjbGFzc05hbWU9e21kbENsYXNzZXN9IGh0bWxGb3I9e3RoaXMuX2h0bWxJZH0gcmVmPSdkcm9wZG93bic+XHJcbiAgICAgICAgICAgICAgICAgICAge21hcChvcGVyYXRpb25zLCAob3BlcmF0aW9uLCBpZHgpID0+IChcclxuICAgICAgICAgICAgICAgICAgICAgICAgPGxpIGNsYXNzTmFtZT17YG1kbC1tZW51X19pdGVtICR7b3BlcmF0aW9uLnN0eWxlfWB9IGtleT17aWR4fVxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgb25DbGljaz17dGhpcy5faGFuZGxlQWN0aW9uKG9wZXJhdGlvbi5hY3Rpb24pfT5cclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtpMThuZXh0LnQob3BlcmF0aW9uLmxhYmVsKX1cclxuICAgICAgICAgICAgICAgICAgICAgICAgPC9saT5cclxuICAgICAgICAgICAgICAgICAgICApKX1cclxuICAgICAgICAgICAgICAgIDwvdWw+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICk7XHJcbiAgICB9O1xyXG59O1xyXG5cclxuRHJvcGRvd24uZGlzcGxheU5hbWUgPSAnRHJvcGRvd24nO1xyXG5Ecm9wZG93bi5kZWZhdWx0UHJvcHMgPSB7XHJcbiAgICBwb3NpdGlvbjoge1xyXG4gICAgICAgIHZlcnRpY2FsOiAnYm90dG9tJyxcclxuICAgICAgICBob3Jpem9udGFsOiAnbGVmdCdcclxuICAgIH0sXHJcbiAgICBidXR0b246IHtcclxuICAgICAgICBpY29uOiAnbW9yZV92ZXJ0JyxcclxuICAgICAgICBzaGFwZTogJ2ljb24nXHJcbiAgICB9XHJcbn07XHJcbkRyb3Bkb3duLnByb3BUeXBlcyA9IHtcclxuICAgIHBvc2l0aW9uOiBQcm9wVHlwZXMuc2hhcGUgKHtcclxuICAgICAgICB2ZXJ0aWNhbDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxyXG4gICAgICAgIGhvcml6b250YWw6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZFxyXG4gICAgfSksXHJcbiAgICBidXR0b246IFByb3BUeXBlcy5zaGFwZSAoe1xyXG4gICAgICAgIGljb246IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICAgICAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICAgICAgc2hhcGU6IFByb3BUeXBlcy5zdHJpbmdcclxuICAgIH0pLFxyXG4gICAgb3BlcmF0aW9uczogUHJvcFR5cGVzLmFycmF5LmlzUmVxdWlyZWRcclxufTtcclxuZXhwb3J0IGRlZmF1bHQgRHJvcGRvd247XHJcbiJdfQ==