docs: 修复通过 2.0 官网图表示例的 '在 CodeSandbox 中打开', 错误的安装了 1.x 版本的问题 (#2765)

antvis · Jun 6, 2024 · 2e75fd2 · 2e75fd2
1 parent f05b5ae
commit 2e75fd2
Show file tree

Hide file tree

Showing 48 changed files with 233 additions and 127 deletions.
diff --git a/packages/s2-react/src/components/index.ts b/packages/s2-react/src/components/index.ts
@@ -23,7 +23,10 @@ export { Switcher } from './switcher';
 export { type SwitcherProps } from './switcher/interface';
 export { TooltipComponent } from './tooltip';
 export { CustomTooltip } from './tooltip/custom-tooltip';
-export type { TooltipRenderProps } from './tooltip/interface';
+export type {
+  TooltipOperatorMenuOptions,
+  TooltipRenderProps,
+} from './tooltip/interface';
 
 export * from './sheets';
 export * from './sheets/interface';
diff --git a/s2-site/.dumirc.ts b/s2-site/.dumirc.ts
@@ -279,10 +279,19 @@ export default defineConfig({
         },
       },
     ],
+    // https://github.com/antvis/dumi-theme-antv/blob/v3/src/slots/CodeEditor/Toolbar.tsx#L116-L120
     playground: {
       extraLib: '',
       devDependencies: {
         typescript: 'latest',
+        react: '18.3.1',
+        'react-dom': '18.3.1',
+      },
+      dependencies: {
+        antd: 'latest',
+        '@ant-design/icons': '^5.3.7',
+        '@antv/s2': '^2.0.0-next',
+        '@antv/s2-react': '^2.0.0-next',
       },
       htmlCodeTemplate: `<!DOCTYPE html>
         <html>

diff --git a/s2-site/examples/analysis/sort/demo/advanced.tsx b/s2-site/examples/analysis/sort/demo/advanced.tsx
@@ -1,7 +1,8 @@
+// organize-imports-ignore
 import React from 'react';
+import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import insertCSS from 'insert-css';
-import { S2DataConfig } from '@antv/s2';
 
 import '@antv/s2-react/dist/style.min.css';
 

diff --git a/s2-site/examples/analysis/sort/demo/group-sort.tsx b/s2-site/examples/analysis/sort/demo/group-sort.tsx
@@ -1,6 +1,7 @@
+// organize-imports-ignore
 import React from 'react';
-import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { S2DataConfig } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
 fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')

diff --git a/s2-site/examples/analysis/sort/demo/table-sort.tsx b/s2-site/examples/analysis/sort/demo/table-sort.tsx
@@ -1,10 +1,11 @@
+// organize-imports-ignore
+import React from 'react';
 import { S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import '@antv/s2-react/dist/style.min.css';
 import { Button } from 'antd';
 import insertCSS from 'insert-css';
 import { orderBy } from 'lodash';
-import React from 'react';
+import '@antv/s2-react/dist/style.min.css';
 
 fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
   .then((res) => res.json())

diff --git a/s2-site/examples/case/art/demo/lost-text.tsx b/s2-site/examples/case/art/demo/lost-text.tsx
@@ -1,4 +1,6 @@
 /* eslint-disable max-classes-per-file */
+// organize-imports-ignore
+import React from 'react';
 import {
   BaseEvent,
   CellType,
@@ -8,9 +10,8 @@ import {
   getTheme,
 } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import { Tag } from 'antd';
-import React from 'react';
 import '@antv/s2-react/dist/style.min.css';
+import { Tag } from 'antd';
 
 const Theme: S2Theme = {
   rowCell: {

diff --git a/s2-site/examples/case/art/demo/mosaic.tsx b/s2-site/examples/case/art/demo/mosaic.tsx
@@ -1,6 +1,7 @@
+// organize-imports-ignore
 import React from 'react';
+import { LayoutWidthType, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import { ThemeCfg } from '@antv/s2';
 import '@antv/s2-react/dist/style.min.css';
 
 // 了解更多: https://observablehq.com/@pearmini/mosaic-antv-s2
@@ -28,7 +29,7 @@ fetch(
         hoverFocus: false,
       },
       style: {
-        layoutWidthType: 'compact',
+        layoutWidthType: LayoutWidthType.Compact,
         colCell: {
           // 隐藏列头
           height: 0,

diff --git a/s2-site/examples/case/art/demo/time-spend-abstract.tsx b/s2-site/examples/case/art/demo/time-spend-abstract.tsx
@@ -1,9 +1,10 @@
+// organize-imports-ignore
 import React from 'react';
-import insertCSS from 'insert-css';
-import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { Image as GImage } from '@antv/g';
 import { DataCell, ThemeCfg } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import insertCSS from 'insert-css';
 
 const paletteLegendMap = [
   {

diff --git a/s2-site/examples/case/comparison/demo/measure-comparison.tsx b/s2-site/examples/case/comparison/demo/measure-comparison.tsx
@@ -1,4 +1,6 @@
 /* eslint-disable max-classes-per-file */
+// organize-imports-ignore
+import React from 'react';
 import { Line, Rect } from '@antv/g';
 import {
   ColCell,
@@ -11,7 +13,6 @@ import {
 } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
-import React from 'react';
 
 // 上涨颜色
 const UP_COLOR = '#F46649';

diff --git a/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx b/s2-site/examples/case/comparison/demo/multiple-people-comparison.tsx
@@ -1,10 +1,10 @@
+// organize-imports-ignore
 import React from 'react';
-import { Line, Rect } from '@antv/g';
-
-import insertCSS from 'insert-css';
+import { Rect } from '@antv/g';
 import { ColCell, S2DataConfig, S2Theme } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import insertCSS from 'insert-css';
 
 const PALETTE_COLORS = [
   {

diff --git a/s2-site/examples/case/comparison/demo/philosophers.tsx b/s2-site/examples/case/comparison/demo/philosophers.tsx
@@ -1,9 +1,10 @@
+// organize-imports-ignore
 import React from 'react';
-import { max, min, replace } from 'lodash';
-import insertCSS from 'insert-css';
-import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { S2DataConfig } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
+import insertCSS from 'insert-css';
+import { max, min, replace } from 'lodash';
 
 const PALETTE_COLORS = [
   '#B8E1FF',

diff --git a/s2-site/examples/case/comparison/demo/time-spend.tsx b/s2-site/examples/case/comparison/demo/time-spend.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable max-classes-per-file */
+// organize-imports-ignore
+import React from 'react';
 import { Circle, Line } from '@antv/g';
 import { DataCell, Frame, ResizeType, ThemeCfg } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 import insertCSS from 'insert-css';
-import React from 'react';
 
 const paletteLegendMap = [
   {

diff --git a/s2-site/examples/case/data-preview/demo/excel.tsx b/s2-site/examples/case/data-preview/demo/excel.tsx
@@ -1,14 +1,16 @@
-import { S2DataConfig } from '@antv/s2';
+/* eslint-disable no-console */
+// organize-imports-ignore
+import React from 'react';
+import { S2DataConfig, type SpreadSheet } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
-import React, { useRef, useState } from 'react';
 import '@antv/s2-react/dist/style.min.css';
 
 // 初始化配置
 const s2Options: SheetComponentOptions = {
   width: 600,
   height: 400,
   seriesNumber: {
-    enable: true
+    enable: true,
   },
   tooltip: { enable: false },
   interaction: {
@@ -22,23 +24,34 @@ const s2Options: SheetComponentOptions = {
 
 // 初始化数据
 const s2DataCfg: S2DataConfig = {
-  fields: { columns: ['province', 'city', 'type', 'price'] },
+  fields: {
+    columns: ['province', 'city', 'type', 'price'],
+  },
   sortParams: [],
   data: [],
 };
 
 const App = ({ data }) => {
-  const S2Ref = useRef(null);
-  const [options, setOptions] = useState<SheetComponentOptions>(s2Options);
-  const [dataCfg, setDataCfg] = useState<S2DataConfig>({ ...s2DataCfg, data });
+  const s2Ref = React.useRef<SpreadSheet>(null);
+  const [options, setOptions] =
+    React.useState<SheetComponentOptions>(s2Options);
+  const [dataCfg, setDataCfg] = React.useState<S2DataConfig>({
+    ...s2DataCfg,
+    data,
+  });
+
+  const onMounted = () => {
+    console.log('s2:', s2Ref.current);
+  };
 
   return (
     <div style={{ position: 'relative' }}>
       <SheetComponent
-        ref={S2Ref}
+        ref={s2Ref}
         dataCfg={dataCfg}
         options={options}
         sheetType="editable"
+        onMounted={onMounted}
       />
     </div>
   );

diff --git a/s2-site/examples/case/data-preview/demo/house.tsx b/s2-site/examples/case/data-preview/demo/house.tsx
@@ -1,9 +1,11 @@
-import { S2DataConfig, NODE_ID_SEPARATOR } from '@antv/s2';
+/* eslint-disable no-console */
+// organize-imports-ignore
+import React from 'react';
+import { NODE_ID_SEPARATOR, S2DataConfig } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import { InputNumber, Select, Space } from 'antd';
 import insertCSS from 'insert-css';
 import { every, filter, isNil, last, map, omit } from 'lodash';
-import React, { useState } from 'react';
 
 const defaultHouseInfo = {
   name: ['15#', '16#', '21#', '22#'],
@@ -71,6 +73,7 @@ const defaultSortParams: S2DataConfig['sortParams'] = [
     },
   },
 ];
+
 const dataConfig: S2DataConfig = {
   data: [],
   describe: '如何使用 S2 买房',
@@ -161,7 +164,7 @@ const RangeSelect = (props) => {
   const { data, dataName, onChange } = props;
   const min = Math.min(...data);
   const max = Math.max(...data);
-  const [info, setInfo] = useState({ min, max });
+  const [info, setInfo] = React.useState({ min, max });
   const handleChange = (value, key) => {
     const tempInfo = Object.assign({}, info);
 
@@ -196,7 +199,7 @@ const RangeSelect = (props) => {
 
 const SelectList = (props) => {
   const { filterData } = props;
-  const [filterInfo, setFilterInfo] = useState({});
+  const [filterInfo, setFilterInfo] = React.useState({});
 
   const onChange = ({ key, value }) => {
     let tempHouseInfo = Object.assign({}, filterInfo);
@@ -230,7 +233,7 @@ const SelectList = (props) => {
 };
 
 const Sheet = ({ data }) => {
-  const [dataSource, setDataSource] = useState(data);
+  const [dataSource, setDataSource] = React.useState(data);
 
   const filterData = (filterInfo) => {
     const result = filter(data, (item) => {
@@ -283,12 +286,12 @@ fetch(
 // If you want to copy the code directly, please remember to install the npm package 'insert-css
 insertCSS(`
   .select-item {
-      margin: 5px 16px 0 0;
+    margin: 5px 16px 0 0;
   }
   .select-list {
-      display: flex;
-      flex-wrap: wrap;
-      margin-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
   }
   .select-label {
     display: inline-block;

diff --git a/s2-site/examples/case/data-preview/demo/index.tsx b/s2-site/examples/case/data-preview/demo/index.tsx
@@ -1,32 +1,33 @@
+/* eslint-disable max-params */
 /* eslint-disable max-classes-per-file */
-import React, { useState, useEffect, useRef } from 'react';
-
-import insertCSS from 'insert-css';
+// organize-imports-ignore
+import React from 'react';
 import { Polygon } from '@antv/g';
 import {
-  TableColCell,
+  CellType,
   GuiIcon,
-  TableCornerCell,
-  S2Event,
   InteractionStateName,
-  CellType,
   S2DataConfig,
+  S2Event,
+  TableColCell,
+  TableCornerCell,
 } from '@antv/s2';
 import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+import '@antv/s2-react/dist/style.min.css';
 import {
-  Input,
-  Divider,
-  Space,
   Button,
-  Modal,
-  Radio,
+  Checkbox,
+  Divider,
   Form,
+  Input,
+  Modal,
   Popover,
-  Checkbox,
+  Radio,
+  Space,
   message,
 } from 'antd';
+import insertCSS from 'insert-css';
 import { get, uniq } from 'lodash';
-import '@antv/s2-react/dist/style.min.css';
 
 const { Search } = Input;
 
@@ -241,15 +242,16 @@ const scrollToCell = (rowIndex, colIndex, options, facet, interaction) => {
 };
 
 const App = ({ data }) => {
-  const s2Ref = useRef(null);
+  const s2Ref = React.useRef(null);
   const [columns, setColumns] = React.useState(initColumns);
-  const [searchKey, setSearchKey] = useState('');
-  const [searchResult, setSearchResult] = useState([]);
-  const [colModalVisible, setColModalVisible] = useState(false);
-  const [searchResultActiveIndex, setSearchResultActiveIndex] = useState(-1);
+  const [searchKey, setSearchKey] = React.useState('');
+  const [searchResult, setSearchResult] = React.useState([]);
+  const [colModalVisible, setColModalVisible] = React.useState(false);
+  const [searchResultActiveIndex, setSearchResultActiveIndex] =
+    React.useState(-1);
   const [form] = Form.useForm();
-  const [interactedCol, setInteractedCol] = useState('');
-  const modalCallbackRef = useRef((e) => {});
+  const [interactedCol, setInteractedCol] = React.useState('');
+  const modalCallbackRef = React.useRef((e) => {});
 
   const onIconClick = ({ meta }) => {
     setInteractedCol(meta.value);
@@ -301,7 +303,7 @@ const App = ({ data }) => {
     showDefaultHeaderActionIcon: false,
   };
 
-  const [dataCfg, setDataCfg] = useState<S2DataConfig>({
+  const [dataCfg, setDataCfg] = React.useState<S2DataConfig>({
     fields: {
       columns,
     },
@@ -310,7 +312,7 @@ const App = ({ data }) => {
     filterParams: [],
   });
 
-  useEffect(() => {
+  React.useEffect(() => {
     setDataCfg((cfg) => ({
       ...cfg,
       fields: { columns },

diff --git a/s2-site/examples/case/kpi-strategy/demo/basic.tsx b/s2-site/examples/case/kpi-strategy/demo/basic.tsx
@@ -1,7 +1,9 @@
-import { DataCell, S2DataConfig, S2Theme } from '@antv/s2';
-import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
+/* eslint-disable no-console */
+// organize-imports-ignore
 import React from 'react';
 import { Line, Rect } from '@antv/g';
+import { DataCell, S2DataConfig, S2Theme } from '@antv/s2';
+import { SheetComponent, SheetComponentOptions } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
 // 进度条