@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/PieChart/GroupedLegend.tsx

@@ -1,284 +0,0 @@
-/**
- * GroupedLegend - 分组图例组件
- * 支持折叠/展开、分组显示、点击交互
- * 
- * Note: This component uses inline styles as it's specifically designed for Web platform
- * where CSS-in-JS is the standard approach. RN-specific lint rules are disabled.
- */
-
-/* eslint-disable react-native/no-inline-styles */
-/* eslint-disable react-native/no-color-literals */
-
-import React, { useState, useCallback } from 'react';
-import { LegendGroupData, LegendClickEvent, ValueFormatter, PercentFormatter } from './NestedPieChart.types';
-
-export interface GroupedLegendProps {
-  groups: LegendGroupData[];
-  showValues?: boolean;
-  showPercent?: boolean;
-  collapsible?: boolean;
-  itemGap?: number;
-  groupGap?: number;
-  labelMinWidth?: number;
-  formatValue?: ValueFormatter;
-  formatPercent?: PercentFormatter;
-  onItemClick?: (event: LegendClickEvent) => void;
-  onGroupClick?: (event: LegendClickEvent) => void;
-  highlightedKey?: string | number | null;
-  hiddenKeys?: Set<string | number>;
-}
-
-export const GroupedLegend: React.FC<GroupedLegendProps> = ({
-  groups,
-  showValues = true,
-  showPercent = true,
-  collapsible = true,
-  itemGap = 6,
-  groupGap = 16,
-  labelMinWidth,
-  formatValue,
-  formatPercent,
-  onItemClick,
-  onGroupClick,
-  highlightedKey,
-  hiddenKeys = new Set(),
-}) => {
-  const [expandedGroups, setExpandedGroups] = useState<Set<string | number>>(
-    new Set(groups.filter(g => g.isExpanded).map(g => g.groupKey))
-  );
-
-  const toggleGroup = useCallback((groupKey: string | number) => {
-    if (!collapsible) return;
-    
-    setExpandedGroups(prev => {
-      const next = new Set(prev);
-      if (next.has(groupKey)) {
-        next.delete(groupKey);
-      } else {
-        next.add(groupKey);
-      }
-      return next;
-    });
-  }, [collapsible]);
-
-  const handleGroupClick = useCallback((group: LegendGroupData) => {
-    if (collapsible) {
-      toggleGroup(group.groupKey);
-    }
-    
-    if (onGroupClick) {
-      onGroupClick({
-        key: group.groupKey,
-        label: group.groupLabel,
-        value: group.groupValue,
-        level: 0,
-        path: [group.groupKey],
-        metadata: group.metadata,
-        groupKey: group.groupKey,
-        isGroupHeader: true,
-      });
-    }
-  }, [collapsible, toggleGroup, onGroupClick]);
-
-  const handleItemClick = useCallback((
-    item: LegendGroupData['items'][0],
-    group: LegendGroupData
-  ) => {
-    if (onItemClick) {
-      onItemClick({
-        key: item.key,
-        label: item.label,
-        value: item.value,
-        level: 1,
-        path: [group.groupKey, item.key],
-        parentKey: group.groupKey,
-        metadata: item.metadata,
-        groupKey: group.groupKey,
-        isGroupHeader: false,
-      });
-    }
-  }, [onItemClick]);
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: `${groupGap}px` }}>
-      {groups.map((group) => {
-        const isExpanded = expandedGroups.has(group.groupKey);
-        const isGroupHidden = hiddenKeys.has(group.groupKey);
-        const isGroupHighlighted = highlightedKey === group.groupKey;
-        
-        return (
-          <div
-            key={group.groupKey}
-            style={{
-              opacity: isGroupHidden ? 0.3 : 1,
-              transition: 'opacity 0.2s',
-            }}
-          >
-            {/* 分组标题 */}
-            <div
-              onClick={() => handleGroupClick(group)}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                marginBottom: isExpanded && group.items.length > 0 ? `${itemGap + 4}px` : '0',
-                cursor: collapsible || onGroupClick ? 'pointer' : 'default',
-                padding: '4px 0',
-                backgroundColor: isGroupHighlighted ? 'rgba(0, 102, 204, 0.1)' : 'transparent',
-                borderRadius: '4px',
-                transition: 'background-color 0.2s',
-              }}
-              onMouseEnter={(e) => {
-                if (!onGroupClick) return;
-                e.currentTarget.style.backgroundColor = 'rgba(0, 102, 204, 0.05)';
-              }}
-              onMouseLeave={(e) => {
-                if (!onGroupClick) return;
-                e.currentTarget.style.backgroundColor = isGroupHighlighted 
-                  ? 'rgba(0, 102, 204, 0.1)' 
-                  : 'transparent';
-              }}
-            >
-              {/* 展开/折叠图标 */}
-              {collapsible && group.items.length > 0 && (
-                <span style={{
-                  marginRight: '6px',
-                  fontSize: '12px',
-                  color: '#666',
-                  transition: 'transform 0.2s',
-                  transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-                  display: 'inline-block',
-                }}>
-                  ▶
-                </span>
-              )}
-              
-              {/* 颜色指示器 */}
-              <div style={{
-                width: '14px',
-                height: '14px',
-                borderRadius: '3px',
-                backgroundColor: group.groupColor,
-                marginRight: '8px',
-                flexShrink: 0,
-              }} />
-              
-              {/* 标签 */}
-              <span style={{
-                fontSize: '13px',
-                fontWeight: 600,
-                color: '#2C3E50',
-                flex: 1,
-                minWidth: labelMinWidth ? `${labelMinWidth}px` : 'auto',
-              }}>
-                {group.groupLabel}
-              </span>
-              
-              {/* 值和百分比 */}
-              <div style={{ display: 'flex', gap: '8px', marginLeft: '12px' }}>
-                {showValues && formatValue && (
-                  <span style={{
-                    fontSize: '13px',
-                    fontWeight: 600,
-                    color: '#2C3E50',
-                  }}>
-                    {formatValue(group.groupValue)}
-                  </span>
-                )}
-                {showPercent && formatPercent && (
-                  <span style={{
-                    fontSize: '12px',
-                    color: '#7F8C8D',
-                  }}>
-                    ({formatPercent(group.groupPercent)})
-                  </span>
-                )}
-              </div>
-            </div>
-            
-            {/* 子项列表 */}
-            {isExpanded && group.items.length > 0 && (
-              <div style={{
-                marginLeft: collapsible ? '20px' : '0',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: `${itemGap}px`,
-              }}>
-                {group.items.map((item) => {
-                  const isItemHidden = hiddenKeys.has(item.key);
-                  const isItemHighlighted = highlightedKey === item.key;
-                  
-                  return (
-                    <div
-                      key={item.key}
-                      onClick={() => handleItemClick(item, group)}
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        opacity: isItemHidden ? 0.3 : 1,
-                        cursor: onItemClick ? 'pointer' : 'default',
-                        padding: '2px 0',
-                        backgroundColor: isItemHighlighted ? 'rgba(0, 102, 204, 0.1)' : 'transparent',
-                        borderRadius: '4px',
-                        transition: 'all 0.2s',
-                      }}
-                      onMouseEnter={(e) => {
-                        if (!onItemClick) return;
-                        e.currentTarget.style.backgroundColor = 'rgba(0, 102, 204, 0.05)';
-                      }}
-                      onMouseLeave={(e) => {
-                        if (!onItemClick) return;
-                        e.currentTarget.style.backgroundColor = isItemHighlighted 
-                          ? 'rgba(0, 102, 204, 0.1)' 
-                          : 'transparent';
-                      }}
-                    >
-                      {/* 颜色指示器 */}
-                      <div style={{
-                        width: '10px',
-                        height: '10px',
-                        borderRadius: '2px',
-                        backgroundColor: item.color,
-                        marginRight: '8px',
-                        flexShrink: 0,
-                      }} />
-                      
-                      {/* 标签 */}
-                      <span style={{
-                        fontSize: '12px',
-                        color: '#34495E',
-                        flex: 1,
-                        minWidth: labelMinWidth ? `${labelMinWidth - 30}px` : 'auto',
-                      }}>
-                        {item.label}
-                      </span>
-                      
-                      {/* 值和百分比 */}
-                      <div style={{ display: 'flex', gap: '8px', marginLeft: '12px' }}>
-                        {showValues && formatValue && (
-                          <span style={{
-                            fontSize: '12px',
-                            color: '#34495E',
-                          }}>
-                            {formatValue(item.value)}
-                          </span>
-                        )}
-                        {showPercent && formatPercent && (
-                          <span style={{
-                            fontSize: '11px',
-                            color: '#95A5A6',
-                          }}>
-                            ({formatPercent(item.percent)})
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};