1952 feature react emptytip component

common/changes/@visactor/vtable/feat-add-emptyTip-react-component_2024-07-18-08-44.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add react-component for option-emptyTip\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

common/changes/@visactor/vtable/feat-add-emptyTip-react-component_2024-07-24-08-00.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add react-component for option-emptyTip - demo\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

packages/react-vtable/demo/src/App.tsx

@@ -6,6 +6,7 @@ import listEditor from './list-table/list-table-editor';
 
 import pivotTable from './pivot-table/pivot-table';
 import pivotComponent from './pivot-table/pivot-comonent';
+import pivotComponentEmptyTip from './pivot-table/pivot-component-empty-tip';
 
 import pivotChart from './pivot-chart/pivot-chart';
 import pivotChartComponent from './pivot-chart/pivot-chart-component';
@@ -27,6 +28,7 @@ import customLayoutPivot from './component/custom-layout-pivot';
 
 // export default pivotTable;
 // export default pivotComponent;
+export default pivotComponentEmptyTip;
 
 // export default pivotChart;
 // export default pivotChartComponent;
@@ -37,6 +39,6 @@ import customLayoutPivot from './component/custom-layout-pivot';
 // export default componentContainer;
 // export default customLayout;
 // export default customLayoutDom;
-export default customLayoutDomSite;
+// export default customLayoutDomSite;
 // export default customLayoutDomSite1;
 // export default customLayoutPivot;

packages/react-vtable/demo/src/pivot-table/pivot-component-empty-tip.tsx

@@ -0,0 +1,16 @@
+import { PivotTable, EmptyTip } from '../../../src';
+
+function App() {
+  return (
+    <PivotTable records={null}>
+      <EmptyTip
+        text="没有数据text测试"
+        textStyle={{
+          fontSize: 30
+        }}
+      />
+    </PivotTable>
+  );
+}
+
+export default App;

packages/react-vtable/src/components/component/emptyTip.tsx

@@ -0,0 +1,23 @@
+import { createComponent } from '../base-component';
+import type { BaseComponentProps } from '../base-component';
+
+export type EmptyTipProps = {
+  text?: string;
+  textStyle?: {
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    fontVariant?: string;
+    lineHeight?: number | string;
+    underline?: number;
+    lineThrough?: number;
+    color?: string;
+  };
+  icon?: {
+    width?: number;
+    height?: number;
+    image: string;
+  };
+} & BaseComponentProps;
+
+export const EmptyTip = createComponent<EmptyTipProps>('EmptyTip', 'emptyTip', undefined, true);

packages/react-vtable/src/components/index.ts

@@ -6,6 +6,7 @@ export { PivotColumnHeaderTitle, PivotRowHeaderTitle } from './pivot/pivot-heade
 export { PivotCorner } from './pivot/pivot-corner';
 export { Menu } from './component/menu';
 export { Tooltip } from './component/tooltip';
+export { EmptyTip } from './component/emptyTip';
 
 export { CustomComponent } from './custom-component';
 export { CustomLayout, type CustomLayoutFunctionArg } from './custom/custom-layout';