/* eslint-disable react/no-array-index-key */ import type { TableProps } from 'antd'; import { Alert, Col, Row, Select, Space, Table, useDesignToken } from 'antd'; import * as React from 'react'; import { statistic } from '../../../../../components/theme'; const wrapValue = (value: any) => { const string = String(value); let additionalInfo: React.ReactNode; if (string.startsWith('#') || string.startsWith('rgba(')) { additionalInfo = ( ); } return additionalInfo ? (
{additionalInfo} {string}
) : ( string ); }; const columns: TableProps<{ name: string; value: any }>['columns'] = [ { dataIndex: 'name', title: 'Name', width: 1, }, { dataIndex: 'value', title: 'Value', render: (value: string) => { let content: React.ReactNode = value; switch (typeof value) { case 'object': { if (Array.isArray(value)) { content = ( ); break; } } // eslint-disable-next-line no-fallthrough default: content = wrapValue(value); } return {content}; }, }, ]; export interface TokenProps { tokenList: string[]; } export default () => { const [selectedComponent, setSelectedComponent] = React.useState(); const [componentNames, setComponentNames] = React.useState<{ value: string; label: string }[]>( [], ); // Full token const { token } = useDesignToken(); const tokenList = React.useMemo( () => Object.keys(token) .filter(name => !name.startsWith('_')) .map((name: keyof typeof token) => ({ name, value: token[name], })), [token], ); React.useEffect(() => { function update() { setComponentNames(Object.keys(statistic).map(key => ({ value: key, label: key }))); } const observer = new MutationObserver(update); observer.observe(document.head, { childList: true }); update(); return () => { observer.disconnect(); }; }, []); const filteredTokenList = React.useMemo(() => { const tokenKeys = statistic[selectedComponent!]?.global || []; if (!tokenKeys.length) { return tokenList; } return tokenList.filter(({ name }) => tokenKeys.includes(name)); }, [tokenList, selectedComponent]); const componentTokenList = React.useMemo( () => Object.entries(statistic[selectedComponent!]?.component || {}).map(([key, value]) => ({ name: key, value, })), [selectedComponent], ); return (