feat: placeholder support config text color and spacing

antvis · Aug 18, 2023 · 06a202e · 06a202e
1 parent fd0b73b
commit 06a202e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/packages/gi-assets-basic/src/components/Placeholder/Component.tsx b/packages/gi-assets-basic/src/components/Placeholder/Component.tsx
@@ -6,6 +6,8 @@ import './index.less';
 export interface LoadingProps {
   img?: string;
   text?: string;
+  textColor: string;
+  spacing: number;
   width: number;
 }
 
@@ -15,6 +17,8 @@ const Placeholder: React.FunctionComponent<LoadingProps> = props => {
     width = 200,
     img = 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BGfQ78mW4kAAAAAAAAAAAAADmJ7AQ/original',
     text,
+    spacing,
+    textColor,
   } = props;
 
   const { data, largeGraphData, largeGraphLimit } = context;
@@ -40,13 +44,13 @@ const Placeholder: React.FunctionComponent<LoadingProps> = props => {
     );
   }
   return (
-    <div className="gi-placeholder" style={{ width: `${width}px` }}>
+    <div className="gi-placeholder" style={{ width: `${width}px`, gap: spacing }}>
       {img && (
         <div className="image-wrapper">
           <img src={img} width={width} />
         </div>
       )}
-      <span>{text}</span>
+      <span style={{ color: textColor }}>{text}</span>
     </div>
   );
 };

diff --git a/packages/gi-assets-basic/src/components/Placeholder/registerMeta.ts b/packages/gi-assets-basic/src/components/Placeholder/registerMeta.ts
@@ -18,6 +18,20 @@ export default () => {
         dm: '开始你的图分析应用～',
       }),
     },
+    textColor: {
+      type: 'string',
+      title: $i18n.get({ id: 'basic.components.Placeholder.registerMeta.TextColor', dm: '文本颜色' }),
+      'x-component': 'ColorInput',
+      'x-decorator': 'FormItem',
+      default: '#999',
+    },
+    spacing: {
+      type: 'number',
+      title: $i18n.get({ id: 'basic.components.Placeholder.registerMeta.Spacing', dm: '间距' }),
+      'x-component': 'NumberPicker',
+      'x-decorator': 'FormItem',
+      default: 8,
+    },
     width: {
       type: 'number',
       title: $i18n.get({ id: 'basic.components.Placeholder.registerMeta.Width', dm: '宽度' }),

diff --git a/packages/gi-assets-basic/src/i18n/strings/en-US.json b/packages/gi-assets-basic/src/i18n/strings/en-US.json
@@ -287,6 +287,8 @@
   "basic.components.Placeholder.registerMeta.ImageAddress": "Image address",
   "basic.components.Placeholder.registerMeta.Text": "Text",
   "basic.components.Placeholder.registerMeta.StartYourGraphAnalysisApplication": "Start your graph analysis application ~",
+  "basic.components.Placeholder.registerMeta.TextColor": "Text Color",
+  "basic.components.Placeholder.registerMeta.Spacing": "Spacing",
   "basic.components.Placeholder.registerMeta.Width": "Width",
   "basic.components.PropertiesPanel.PropertiesDetail.CompareWithOtherAttribute": "Compared to other values of the attribute {key}, the current attribute value {value} has a {importance} occurrence rate, which may contain significant information and deserves attention",
   "basic.components.PropertiesPanel.PropertiesDetail.VeryLow": " very low",

diff --git a/packages/gi-assets-basic/src/i18n/strings/zh-CN.json b/packages/gi-assets-basic/src/i18n/strings/zh-CN.json
@@ -296,6 +296,8 @@
   "basic.components.Placeholder.registerMeta.ImageAddress": "图片地址",
   "basic.components.Placeholder.registerMeta.Text": "文本",
   "basic.components.Placeholder.registerMeta.StartYourGraphAnalysisApplication": "开始你的图分析应用～",
+  "basic.components.Placeholder.registerMeta.TextColor": "文本颜色",
+  "basic.components.Placeholder.registerMeta.Spacing": "间距",
   "basic.components.Placeholder.registerMeta.Width": "宽度",
   "basic.components.PropertiesPanel.PropertiesDetail.MostAttributeValuesOfThe": "属性 “{key}” 的大部分属性值具有相同出现次数，而当前属性值 “{value}” 出现此处大于平均出现次数，值得关注",
   "basic.PropertiesPanel.Statistic.ChartCard.XAxisField": "X轴字段",