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

Charts for mobile visualization.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var _util = require("@antv/util");
var _fEngine = require("@antv/f-engine");
var Marker = function Marker(_a) {
  var type = _a.type,
    color = _a.color;
  if (type === 'square') {
    return (0, _fEngine.jsx)("rect", {
      style: {
        width: '12px',
        height: '12px',
        marginRight: '10px'
      },
      attrs: {
        fill: color
      }
    });
  }
  if (type === 'line') {
    return (0, _fEngine.jsx)("line", {
      style: {
        width: '19px',
        marginRight: '10px'
      },
      attrs: {
        stroke: color,
        lineCap: 'round',
        lineWidth: '4px'
      }
    });
  }
  return (0, _fEngine.jsx)("circle", {
    style: {
      width: '12px',
      height: '12px',
      marginRight: '10px',
      fill: color
    }
  });
};
var _default = exports.default = function _default(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 (0, _fEngine.jsx)("group", {
    style: (0, _tslib.__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 = (0, _util.isFunction)(itemFormatter) ? itemFormatter(value, tickValue) : value;
    return (0, _fEngine.jsx)("group", {
      className: "legend-item",
      style: (0, _tslib.__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
    }), (0, _fEngine.jsx)("text", {
      attrs: (0, _tslib.__assign)({
        fill: filtered ? '#bfbfbf' : '#808080',
        text: name
      }, nameStyle)
    }), valueText ? (0, _fEngine.jsx)("text", {
      attrs: (0, _tslib.__assign)({
        fill: '#808080',
        text: formatValue(valueText, valuePrefix)
      }, valueStyle)
    }) : null);
  }));
};