/* 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 = (
{(value as string[]).map((val, index) => (
-
[{index}]
{wrapValue(val)}
))}
);
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 (
{filteredTokenList.length === tokenList.length && (
)}
{componentTokenList.length > 0 && (
Component Token
)}
Global Token
);
};