@lobehub/charts/es/Legend/LegendItem.js

React modern charts components built on recharts

var _templateObject, _templateObject2, _templateObject3;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Icon } from '@lobehub/ui';
import { Typography } from 'antd';
import { createStyles } from 'antd-style';
import { Circle } from 'lucide-react';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useStyles = createStyles(function (_ref) {
  var css = _ref.css,
    token = _ref.token;
  return {
    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    align-items: center;\n\n    border-radius: ", "px;\n\n    color: ", ";\n    white-space: nowrap;\n  "])), token.borderRadius, token.colorTextDescription),
    hasOnValueChange: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition: all 0.25s ", ";\n\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n  "])), token.motionEaseInOut, token.colorTextSecondary, token.colorFillTertiary),
    itemContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n    color: inherit;\n  "])))
  };
});
var LegendItem = /*#__PURE__*/memo(function (_ref2) {
  var label = _ref2.label,
    name = _ref2.name,
    color = _ref2.color,
    _onClick = _ref2.onClick,
    activeLegend = _ref2.activeLegend;
  var _useStyles = useStyles(),
    cx = _useStyles.cx,
    styles = _useStyles.styles,
    theme = _useStyles.theme;
  var hasOnValueChange = !!_onClick;
  return /*#__PURE__*/_jsxs(Flexbox, {
    className: cx(styles.container, hasOnValueChange && styles.hasOnValueChange),
    gap: 6,
    horizontal: true,
    onClick: function onClick(e) {
      e.stopPropagation();
      _onClick === null || _onClick === void 0 || _onClick(name, color);
    },
    paddingBlock: 2,
    paddingInline: 8,
    style: {
      cursor: hasOnValueChange ? 'pointer' : 'default'
    },
    children: [/*#__PURE__*/_jsx(Icon, {
      color: color,
      fill: color,
      icon: Circle,
      size: {
        fontSize: 10
      },
      style: {
        opacity: activeLegend && activeLegend !== name ? 0.4 : 1
      }
    }), /*#__PURE__*/_jsx(Typography.Paragraph, {
      className: styles.itemContent,
      ellipsis: true,
      style: {
        color: activeLegend && activeLegend === name ? theme.colorTextSecondary : undefined,
        margin: 0,
        opacity: activeLegend && activeLegend !== name ? 0.4 : 1
      },
      children: label
    })]
  });
});
export default LegendItem;