@heroku/react-hk-components/dist/HKLegendItem.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_malibu_1 = require("@heroku/react-malibu");
var classnames = require("classnames");
var constants_1 = require("./constants");
var HKLegendItem = /** @class */ (function (_super) {
    __extends(HKLegendItem, _super);
    function HKLegendItem() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.handleOnClick = function () {
            var _a = _this.props, onToggle = _a.onToggle, label = _a.label, zIndex = _a.zIndex;
            if (!onToggle) {
                return null;
            }
            onToggle(label, zIndex);
        };
        return _this;
    }
    HKLegendItem.prototype.render = function () {
        var _a = this.props, className = _a.className, disableToggle = _a.disableToggle, label = _a.label, show = _a.show, value = _a.value, zIndex = _a.zIndex, type = _a.type;
        var legendIcon = show && (React.createElement("div", { className: 'flex items-center' },
            React.createElement(react_malibu_1.MalibuIcon, { name: 'confirm-16', fillClass: 'dark-gray', extraClasses: 'icon malibu-icon h1 w1 mr1 fill-dark-gray di' }),
            React.createElement("svg", { width: '7', height: '31', viewBox: "0 0 7 31", className: 'mr1' },
                React.createElement("rect", { x: '0', y: '0', height: '100%', width: '7', fill: type === 'line' ? '#79589f' : constants_1.colours[zIndex], fillOpacity: type === 'line' ? (0.2 * (zIndex + 1)) : 1 }))));
        return (React.createElement("a", { className: classnames({ 'cursor-hand': !disableToggle }), onClick: !disableToggle ? this.handleOnClick : undefined },
            React.createElement("div", { className: classnames('hk-label', className, 'flex flex-row br2 pa2 mh2 items-center', { 'bg-lightest-silver': show }) },
                legendIcon,
                React.createElement("div", { className: 'items-center' },
                    React.createElement("span", { className: 'db ma1 ttu f7 tracked' }, label),
                    React.createElement("span", { className: 'db ma1 ttu b f6' }, value)))));
    };
    HKLegendItem.defaultProps = {
        disableToggle: false,
    };
    return HKLegendItem;
}(React.PureComponent));
exports.default = HKLegendItem;
//# sourceMappingURL=HKLegendItem.js.map