cosmo-ui/dist/web/tray-overflow.js

Common React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_redux_1 = require("react-redux");
var cx = require("classnames");
var tray_item_1 = require("./tray-item");
var openable_component_1 = require("./openable-component");
var selectors_1 = require("../selectors");
var actions_1 = require("../actions");
var styles = require('../../src/styles/components/tray-item.scss');
var TRAY_OVERFLOW_BUTTON_KEY = 'trayOverflowButton';
var TrayOverflowComponent = (function (_super) {
    tslib_1.__extends(TrayOverflowComponent, _super);
    function TrayOverflowComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.setButtonRef = function (e) { return _this.button = e; };
        _this.handleClick = function () {
            _this.props.toggleTrayItem(_this.props.trayName, TRAY_OVERFLOW_BUTTON_KEY);
        };
        _this.classNames = function () {
            return cx(styles.overflowContainer, (_a = {},
                _a[styles.overflowRight] = _this.props.align === 'right',
                _a[styles.overflowLeft] = _this.props.align === 'left',
                _a[styles.overflowCenter] = _this.props.align === 'center',
                _a));
            var _a;
        };
        return _this;
    }
    TrayOverflowComponent.prototype.componentDidMount = function () {
        _super.prototype.componentDidMount.call(this);
        this.setContainerRef(this.button.container);
    };
    TrayOverflowComponent.prototype.renderOverflow = function () {
        var _a = this.props, trayItem = _a.trayItem, children = _a.children, width = _a.width;
        if (!trayItem || !trayItem.open)
            return null;
        return (React.createElement("div", { className: this.classNames(), style: { minWidth: width + "px" } }, children));
    };
    TrayOverflowComponent.prototype.render = function () {
        return (React.createElement(tray_item_1.TrayItem, { ref: this.setButtonRef, name: TRAY_OVERFLOW_BUTTON_KEY, text: "...", tooltip: "See more", onClick: this.handleClick, active: this.isActive(), className: styles.overflowButton }, this.renderOverflow()));
    };
    TrayOverflowComponent.prototype.isActive = function () {
        return this.props.trayItem.open;
    };
    TrayOverflowComponent.prototype.handleClose = function () {
        this.props.closeTrayItem(this.props.trayName, TRAY_OVERFLOW_BUTTON_KEY);
    };
    return TrayOverflowComponent;
}(openable_component_1.OpenableComponent));
TrayOverflowComponent.defaultProps = {
    align: 'center',
    width: 500,
};
var mapStateToProps = function (state, ownProps) { return ({
    trayItem: selectors_1.getTrayItem(state, ownProps.trayName, TRAY_OVERFLOW_BUTTON_KEY),
}); };
var mapDispatchToProps = {
    openTrayItem: actions_1.openTrayItem,
    closeTrayItem: actions_1.closeTrayItem,
    toggleTrayItem: actions_1.toggleTrayItem,
};
exports.TrayOverflow = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(TrayOverflowComponent);
//# sourceMappingURL=tray-overflow.js.map