lucid-ui/lib/components/Legend/Legend.js

A UI component library from AppNexus.

import _partial from "lodash/partial";
import _keys from "lodash/keys";
import _some from "lodash/some";
import _map from "lodash/map";

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes, omitProps } from '../../util/component-types';
import Point from '../Point/Point';
import Line from '../Line/Line';
import { any } from 'prop-types';
var cx = lucidClassNames.bind('&-Legend');
var POINT_SIZE = 12;
var LINE_WIDTH = 22;
var number = PropTypes.number,
    string = PropTypes.string,
    oneOf = PropTypes.oneOf,
    node = PropTypes.node,
    bool = PropTypes.bool,
    func = PropTypes.func;
var defaultProps = {
  orient: 'vertical',
  hasBorders: true,
  isReversed: false
};

var LegendItem = function LegendItem(_props) {
  return null;
};

var handleItemClick = function handleItemClick(index, props, event) {
  if (!props.onClick) {
    return;
  }

  props.onClick(index, {
    props: props,
    event: event
  });
};

export var Legend = function Legend(props) {
  var className = props.className,
      orient = props.orient,
      hasBorders = props.hasBorders,
      isReversed = props.isReversed,
      passThroughs = _objectWithoutProperties(props, ["className", "orient", "hasBorders", "isReversed"]);

  var isHorizontal = orient === 'horizontal';
  var isVertical = orient === 'vertical';

  var itemProps = _map(findTypes(props, LegendItem), 'props');

  var hasSomeLines = isVertical && _some(itemProps, function (_ref) {
    var hasLine = _ref.hasLine;
    return hasLine;
  });

  return /*#__PURE__*/React.createElement("ul", _extends({}, omitProps(passThroughs, undefined, _keys(Legend.propTypes)), {
    className: cx('&', {
      '&-is-horizontal': isHorizontal,
      '&-is-vertical': isVertical,
      '&-has-borders': hasBorders,
      '&-is-reversed': isReversed
    }, className)
  }), _map(itemProps, function (_ref2, index) {
    var hasLine = _ref2.hasLine,
        hasPoint = _ref2.hasPoint,
        _ref2$pointKind = _ref2.pointKind,
        pointKind = _ref2$pointKind === void 0 ? 1 : _ref2$pointKind,
        color = _ref2.color,
        children = _ref2.children,
        itemClass = _ref2.className;
    return /*#__PURE__*/React.createElement("li", {
      key: index,
      className: cx(itemClass, '&-Item'),
      onClick: _partial(handleItemClick, index, itemProps[index])
    }, hasPoint || hasLine ? /*#__PURE__*/React.createElement("svg", {
      className: cx('&-Item-indicator'),
      width: hasLine || hasSomeLines ? LINE_WIDTH : POINT_SIZE,
      height: POINT_SIZE
    }, hasPoint ? /*#__PURE__*/React.createElement(Point, {
      x: hasLine || hasSomeLines ? LINE_WIDTH / 2 : POINT_SIZE / 2,
      y: POINT_SIZE / 2,
      color: color,
      kind: pointKind
    }) : null, hasLine ? /*#__PURE__*/React.createElement(Line, {
      d: "M0,".concat(POINT_SIZE / 2, " L").concat(LINE_WIDTH, ",").concat(POINT_SIZE / 2),
      color: color
    }) : null) : null, children);
  }));
};
Legend.defaultProps = defaultProps;
Legend.displayName = 'Legend';
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']
};
Legend.HEIGHT = 28; // exposed for consumer convenience

Legend.propTypes = {
  Item: node,
  className: string,
  orient: oneOf(['horizontal', 'vertical']),
  hasBorders: bool,
  isReversed: bool
};
LegendItem.displayName = 'Legend.Item';
Legend.Item = LegendItem;
LegendItem.peek = {
  description: "Renders a `<li>` that describes the data series.\n\t"
};
LegendItem.propName = 'Item';
LegendItem.propTypes = {
  children: any
};
LegendItem.propTypes = {
  hasPoint: bool,
  hasLine: bool,
  color: string,
  pointKind: number,
  onClick: func,
  className: string
};
export default Legend;