feat: add pure image col type to leaderboard and add pure code driven…

… leaderboard tool

Signed-off-by: frank-zsy <[email protected]>

docs/dev_docs/tools/leaderboard.mdx

@@ -1,7 +1,12 @@
 # 排行榜
 
-在该页面中，您可以通过输入数据和配置表头的方式生成具有一定样式的排行榜供您分享。
-
 import Leaderboard from '@site/src/components/Leaderboard';
+import SimpleLeaderboard from '@site/src/components/SimpleLeaderboard';
+
+在该页面中，您可以通过输入数据和配置表头的方式生成具有一定样式的排行榜供您分享。
 
 <Leaderboard />
+
+下面为一个使用纯数据配置的排行榜，输入为一个 JSON 对象，包含 title、data 和 options 三个字段，分别对应表的标题、数据和表头配置。
+
+<SimpleLeaderboard />

i18n/en/code.json

@@ -358,6 +358,9 @@
   "leaderboard.headerType.NumberWithDelta": {
     "message": "Number with delta"
   },
+  "leaderboard.headerType.PureImage": {
+    "message": "Image"
+  },
   "leaderboard.submit": {
     "message": "Submit"
   },

i18n/zh/code.json

@@ -358,6 +358,9 @@
   "leaderboard.headerType.NumberWithDelta": {
     "message": "数字与变化"
   },
+  "leaderboard.headerType.PureImage": {
+    "message": "图片"
+  },
   "leaderboard.submit": {
     "message": "提交"
   },

src/components/Leaderboard/NumberWithDelta.tsx

@@ -1,6 +1,7 @@
 import styles from './styles.module.css';
 
-const formatNumber = (num: number) => {
+const formatNumber = (num: any) => {
+  if (Number.isNaN(+num)) return 0;
   return +num.toFixed(2);
 }
 

src/components/Leaderboard/PureImage.tsx

@@ -0,0 +1,15 @@
+import styles from './styles.module.css';
+
+interface PureImageProps {
+  url: string;
+  rounded?: boolean;
+}
+
+export const PureImage = ({ url, rounded }: PureImageProps) => {
+  return (
+    <div className={styles.nameContainer}>
+      {(url && url != '') ?
+        <img src={url} alt="" className={`${styles.icon} ${rounded ? styles.iconRounded : ''}`} /> : null}
+    </div>
+  )
+}

src/components/Leaderboard/index.tsx

@@ -8,6 +8,7 @@ import { NameWithIcon } from './NameWithIcon';
 import { useReducer } from 'react';
 import { useReactTable, createColumnHelper, getCoreRowModel } from '@tanstack/react-table';
 import styles from './styles.module.css';
+import { PureImage } from './PureImage';
 
 export const COLUMN_TYPE_RULES: {
   name: string;
@@ -29,6 +30,11 @@ export const COLUMN_TYPE_RULES: {
       fieldsNeeded: 2,
       renderer: (num, delta) => <NumberWithDelta number={num} delta={delta} />,
     },
+    {
+      name: 'PureImage',
+      fieldsNeeded: 1,
+      renderer: (url) => <PureImage url={url} />,
+    }
   ];
 
 const helper = createColumnHelper<{ __index__: number }>();

src/components/SimpleLeaderboard/index.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import SimpleTable from '../SimpleTable';
+import styles from '../Leaderboard/styles.module.css';
+
+export default (): JSX.Element => {
+  const [title, setTitle] = useState<string>('');
+  const [data, setData] = useState<any[]>([]);
+  const [options, setOptions] = useState<any[]>([]);
+  const onDataInputBlur = e => {
+    try {
+      const inputValue = e.target.value;
+      const newData = inputValue ? JSON.parse(inputValue) : { title: '', data: [], options: [] };
+      setTitle(newData.title);
+      setData(newData.data);
+      setOptions(newData.options);
+    } catch {
+      alert('Not valid JSON');
+    }
+  };
+  return (
+    <div>
+      <div className={styles.inputRow}>
+        <input className={styles.dataInput} autoComplete='false' spellCheck='false' onBlur={onDataInputBlur} />
+      </div>
+      <SimpleTable title={title} data={data} options={options} />
+    </div>
+  );
+};