lucid-ui/dist/cjs/components/Legend/Legend.js

A UI component library from AppNexus.

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Legend = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var Point_1 = __importDefault(require("../Point/Point"));
var Line_1 = __importDefault(require("../Line/Line"));
var prop_types_2 = require("prop-types");
var cx = style_helpers_1.lucidClassNames.bind('&-Legend');
var POINT_SIZE = 12;
var LINE_WIDTH = 22;
var number = prop_types_1.default.number, string = prop_types_1.default.string, oneOf = prop_types_1.default.oneOf, node = prop_types_1.default.node, bool = prop_types_1.default.bool, func = prop_types_1.default.func;
var defaultProps = {
    orient: 'vertical',
    hasBorders: true,
    isReversed: false,
};
var LegendItem = function (_props) { return null; };
var handleItemClick = function (index, props, event) {
    if (!props.onClick) {
        return;
    }
    props.onClick(index, { props: props, event: event });
};
var Legend = function (props) {
    var className = props.className, orient = props.orient, hasBorders = props.hasBorders, isReversed = props.isReversed, passThroughs = __rest(props, ["className", "orient", "hasBorders", "isReversed"]);
    var isHorizontal = orient === 'horizontal';
    var isVertical = orient === 'vertical';
    var itemProps = lodash_1.default.map(component_types_1.findTypes(props, LegendItem), 'props');
    var hasSomeLines = isVertical && lodash_1.default.some(itemProps, function (_a) {
        var hasLine = _a.hasLine;
        return hasLine;
    });
    return (react_1.default.createElement("ul", __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(exports.Legend.propTypes)), { className: cx('&', {
            '&-is-horizontal': isHorizontal,
            '&-is-vertical': isVertical,
            '&-has-borders': hasBorders,
            '&-is-reversed': isReversed,
        }, className) }), lodash_1.default.map(itemProps, function (_a, index) {
        var hasLine = _a.hasLine, hasPoint = _a.hasPoint, _b = _a.pointKind, pointKind = _b === void 0 ? 1 : _b, color = _a.color, children = _a.children, itemClass = _a.className;
        return (react_1.default.createElement("li", { key: index, className: cx(itemClass, '&-Item'), onClick: lodash_1.default.partial(handleItemClick, index, itemProps[index]) },
            hasPoint || hasLine ? (react_1.default.createElement("svg", { className: cx('&-Item-indicator'), width: hasLine || hasSomeLines ? LINE_WIDTH : POINT_SIZE, height: POINT_SIZE },
                hasPoint ? (react_1.default.createElement(Point_1.default, { x: hasLine || hasSomeLines ? LINE_WIDTH / 2 : POINT_SIZE / 2, y: POINT_SIZE / 2, color: color, kind: pointKind })) : null,
                hasLine ? (react_1.default.createElement(Line_1.default, { d: "M0," + POINT_SIZE / 2 + " L" + LINE_WIDTH + "," + POINT_SIZE / 2, color: color })) : null)) : null,
            children));
    })));
};
exports.Legend = Legend;
exports.Legend.defaultProps = defaultProps;
exports.Legend.displayName = 'Legend';
exports.Legend.peek = {
    description: "\n\t\t\tContrary to the other chart primitives, this component is not rendered\n\t\t\tin svg. In order to sanely render horizontal legends, we need to know\n\t\t\tthe width of the text elements ahead of rendering time. Since we're\n\t\t\tusing a variable width font, the only way I know of to correctly get\n\t\t\tthe width is with the DOM function `getComputedTextLength`. Variable\n\t\t\twidths are much more easy to implement outside of svg.\n\t\t",
    categories: ['visualizations', 'chart primitives'],
};
exports.Legend.HEIGHT = 28; // exposed for consumer convenience
exports.Legend.propTypes = {
    Item: node(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tChild element whose children represent content to be shown inside Legend.\n\t"], ["\n\tChild element whose children represent content to be shown inside Legend.\n\t"]))),
    className: string(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t"]))),
    orient: oneOf(['horizontal', 'vertical'])(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tDetermine orientation of the legend.\n\t"], ["\n\t\tDetermine orientation of the legend.\n\t"]))),
    hasBorders: bool(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tShow the legend borders. Turn this off if you want to put the legend in a\n\t\t`ToolTip` for example.\n\t"], ["\n\t\tShow the legend borders. Turn this off if you want to put the legend in a\n\t\t\\`ToolTip\\` for example.\n\t"]))),
    isReversed: bool(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tReverse the order of items in the legend.\n\t"], ["\n\t\tReverse the order of items in the legend.\n\t"]))),
};
LegendItem.displayName = 'Legend.Item';
exports.Legend.Item = LegendItem;
LegendItem.peek = {
    description: "Renders a `<li>` that describes the data series.\n\t",
};
LegendItem.propName = 'Item';
LegendItem.propTypes = {
    children: prop_types_2.any,
};
LegendItem.propTypes = {
    hasPoint: bool,
    hasLine: bool,
    color: string(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tStrings should match an existing color class unless they start with a '#' for specific colors. E.g.:\n\n\t\t- `COLOR_0`\n\t\t- `COLOR_GOOD`\n\t\t- `'#123abc'`\n\t"], ["\n\t\tStrings should match an existing color class unless they start with a '#' for specific colors. E.g.:\n\n\t\t- \\`COLOR_0\\`\n\t\t- \\`COLOR_GOOD\\`\n\t\t- \\`'#123abc'\\`\n\t"]))),
    pointKind: number,
    onClick: func,
    className: string(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\tClass names that are appended to the defaults.\n\t"], ["\n\t\tClass names that are appended to the defaults.\n\t"]))),
};
exports.default = exports.Legend;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
//# sourceMappingURL=Legend.js.map