@antv/f2/es/components/legend/legendView.js

import { __assign } from "tslib";
import { isFunction } from '@antv/util';
import { jsx } from '@antv/f-engine';
var Marker = function Marker(_a) {
  var type = _a.type,
    color = _a.color;
  if (type === 'square') {
    return jsx("rect", {
      style: {
        width: '12px',
        height: '12px',
        marginRight: '10px'
      },
      attrs: {
        fill: color
      }
    });
  }
  if (type === 'line') {
    return jsx("line", {
      style: {
        width: '19px',
        marginRight: '10px'
      },
      attrs: {
        stroke: color,
        lineCap: 'round',
        lineWidth: '4px'
      }
    });
  }
  return jsx("circle", {
    style: {
      width: '12px',
      height: '12px',
      marginRight: '10px',
      fill: color
    }
  });
};
export default (function (props) {
  var items = props.items,
    itemWidth = props.itemWidth,
    itemFormatter = props.itemFormatter,
    style = props.style,
    _a = props.marker,
    marker = _a === void 0 ? 'circle' : _a,
    // 图例标记默认为 circle
    itemStyle = props.itemStyle,
    nameStyle = props.nameStyle,
    valueStyle = props.valueStyle,
    valuePrefix = props.valuePrefix,
    onClick = props.onClick;
  var formatValue = function formatValue(value, valuePrefix) {
    if (valuePrefix === void 0) {
      valuePrefix = ': ';
    }
    return "".concat(valuePrefix).concat(value);
  };
  return jsx("group", {
    style: __assign({
      display: 'flex'
    }, style)
  }, items.map(function (item) {
    var color = item.color,
      name = item.name,
      value = item.value,
      filtered = item.filtered,
      tickValue = item.tickValue;
    var valueText = isFunction(itemFormatter) ? itemFormatter(value, tickValue) : value;
    return jsx("group", {
      className: "legend-item",
      style: __assign({
        width: itemWidth,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        //TODO: padding改为’12px‘ 就和原来一致了
        padding: ['6px', '6px', '6px', 0]
      }, itemStyle),
      "data-item": item,
      onClick: onClick
    }, Marker({
      color: filtered ? '#bfbfbf' : color,
      type: marker
    }), jsx("text", {
      attrs: __assign({
        fill: filtered ? '#bfbfbf' : '#808080',
        text: name
      }, nameStyle)
    }), valueText ? jsx("text", {
      attrs: __assign({
        fill: '#808080',
        text: formatValue(valueText, valuePrefix)
      }, valueStyle)
    }) : null);
  }));
});