docs: 所有 demo 替换成 React 18

antvis · Dec 26, 2023 · 37768a0 · 37768a0
1 parent 5f81d2a
commit 37768a0
Show file tree

Hide file tree

Showing 65 changed files with 343 additions and 330 deletions.
diff --git a/README.en-US.md b/README.en-US.md
@@ -188,6 +188,14 @@ s2.render();
 | [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
 | [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
+### 🖥️ browser compatibility
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions |
+
+`@antv/s2-react` and `@antv/s2-vue` see [React JavaScript environment requirements](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite browser compatibility](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
+
 ## 👤 Author
 
 [**@AntV**](https://github.com/orgs/antvis/people)

diff --git a/README.md b/README.md
@@ -184,6 +184,14 @@ s2.render();
 | [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
 | [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
 
+### 🖥️ 兼容环境
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions |
+
+`@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
+
 ## 🙋‍♂️ 问题反馈
 
 有任何问题请严格按照模版 [提交 Issue](https://github.com/antvis/S2/issues/new/choose), 在这之前强烈建议阅读 [《⚠️ 提 Issue 前必读》](https://github.com/antvis/S2/issues/1904)

diff --git a/packages/s2-react/README.md b/packages/s2-react/README.md
@@ -118,19 +118,19 @@ const s2Options = {
 <div id="container"></div>
 ```
 
-```ts
+```tsx
+import React from 'React'
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-const container = document.getElementById('container');
-
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container'),
-);
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 ### 4. 结果

diff --git a/s2-site/docs/common/env.en.md b/s2-site/docs/common/env.en.md
@@ -0,0 +1,7 @@
+默认支持**现代浏览器**, 如果出现兼容性问题请结合 `babel` 和 `@babel/polyfill` 使用
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions |
+
+`@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
diff --git a/s2-site/docs/common/env.zh.md b/s2-site/docs/common/env.zh.md
@@ -0,0 +1,7 @@
+默认兼容**现代浏览器**, 如果出现兼容性问题请结合 `babel` 和 `@babel/polyfill` 使用
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- |
+| last 2 versions | last 2 versions | last 2 versions |
+
+`@antv/s2-react` 和 `@antv/s2-vue` 见官方 [React JavaScript 环境要求](https://zh-hans.reactjs.org/docs/javascript-environment-requirements.html) 和 [Vite 浏览器兼容性](https://cn.vitejs.dev/guide/build.html#browser-compatibility)
diff --git a/s2-site/docs/common/packages.zh.md b/s2-site/docs/common/packages.zh.md
@@ -3,8 +3,19 @@ title: Packages
 order: 5
 ---
 
+:::info{title="提示"}
+
+创建 `S2` 表格有三种方式，基础类版本 `@antv/s2` 和 基于 `@antv/s2` 封装的 `React` 和 `Vue3` 版本
+
+- `@antv/s2`: 基于 `Canvas` 和 [AntV/G](https://g.antv.antgroup.com) 开发，提供基本的表格展示/交互等能力
+- `@antv/s2-react`: 基于 `@antv/s2` 封装，提供配套的 [分析组件](/manual/basic/analysis/switcher)
+- `@antv/s2-vue`: 基于 `Vue3` 和 `@antv/s2` 封装，提供配套的分析组件
+
+**也就是说** `@antv/s2` 和**框架无关**，你可以在 `Vue`, `Angular` 等任意框架中使用。
+:::
+
 | 版本号  | 稳定版    | 测试版   | 预览版  | 先行版 | 包大小  | 下载量    |
 | -------- | ------ | --------- | ---------- | ----------  | ----------  | ------ |
-| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg)       |
-| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg) |
-| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg)   |
+| [@antv/s2](https://github.com/antvis/S2/tree/master/packages/s2-core)        | ![latest](https://img.shields.io/npm/v/@antv/s2/latest.svg?logo=npm)       | ![beta](https://img.shields.io/npm/v/@antv/s2/beta.svg?logo=npm)       | ![alpha](https://img.shields.io/npm/v/@antv/s2/alpha.svg?logo=npm)   |  ![next](https://img.shields.io/npm/v/@antv/s2/next.svg?logo=npm)  | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2@latest/dist/index.min.js?label=gzip%20size&compression=gzip)       | ![download](https://img.shields.io/npm/dm/@antv/s2.svg?logo=npm)       |
+| [@antv/s2-react](https://github.com/antvis/S2/tree/master/packages/s2-react) | ![latest](https://img.shields.io/npm/v/@antv/s2-react/latest.svg?logo=npm) | ![beta](https://img.shields.io/npm/v/@antv/s2-react/beta.svg?logo=npm) | ![alpha](https://img.shields.io/npm/v/@antv/s2-react/alpha.svg?logo=npm) |  ![next](https://img.shields.io/npm/v/@antv/s2-react/next.svg?logo=npm)| ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-react@latest/dist/index.min.js?label=gzip%20size&compression=gzip) | ![download](https://img.shields.io/npm/dm/@antv/s2-react.svg?logo=npm) |
+| [@antv/s2-vue](https://github.com/antvis/S2/tree/master/packages/s2-vue)     | ![latest](https://img.shields.io/npm/v/@antv/s2-vue/latest.svg?logo=npm)   | ![beta](https://img.shields.io/npm/v/@antv/s2-vue/beta.svg?logo=npm)   | ![alpha](https://img.shields.io/npm/v/@antv/s2-vue/alpha.svg?logo=npm)  |  ![next](https://img.shields.io/npm/v/@antv/s2-vue/next.svg?logo=npm) | ![size](https://img.badgesize.io/https:/unpkg.com/@antv/s2-vue@latest/dist/index.min.js?label=gzip%20size&compression=gzip)   | ![download](https://img.shields.io/npm/dm/@antv/s2-vue.svg?logo=npm)   |
diff --git a/s2-site/docs/manual/basic/analysis/drill-down.zh.md b/s2-site/docs/manual/basic/analysis/drill-down.zh.md
@@ -86,26 +86,26 @@ const PartDrillDown = {
 
 </details>
 
-```jsx
+```tsx
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { SheetComponent } from '@antv/s2-react';
 
 const s2Options = {
   hierarchyType: 'tree', // 树形结构
 };
 
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-    partDrillDown={PartDrillDown}
-  />,
-  document.getElementById('container'),
-);
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+      partDrillDown={PartDrillDown}
+    />
+  )
+}
 ```
 
-<Playground path='react-component/drill-dwon/demo/for-pivot.tsx' rid='container'></playground>
+<Playground path='react-component/drill-down/demo/for-pivot.tsx' rid='container'></playground>
 
 ## 使用场景
 

diff --git a/s2-site/docs/manual/basic/analysis/editable-mode.zh.md b/s2-site/docs/manual/basic/analysis/editable-mode.zh.md
@@ -19,7 +19,6 @@ order: 3
 
 ```typescript
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -158,14 +157,15 @@ const s2Options = {
 };
 
 // 4, 渲染
-ReactDOM.render(
-  <SheetComponent
-    sheetType="editable" // 此处指定sheetType为editable
-    dataCfg={s2DataCfg}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="editable"
+      dataCfg={s2DataCfg}
+      options={s2Options}
+    />,
+  )
+}
 ```
 
 ## 特性

diff --git a/s2-site/docs/manual/basic/analysis/mobile-component.zh.md b/s2-site/docs/manual/basic/analysis/mobile-component.zh.md
@@ -15,21 +15,18 @@ order: 10
 
 ## 移动端表格
 
-```ts
+```tsx
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { MobileSheet } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-const container = document.getElementById('container');
-
-ReactDOM.render(
-  <MobileSheet
-    dataCfg={s2DataConfig}
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <MobileSheet
+      dataCfg={s2DataConfig}
+    />
+  )
+}
 ```
 
 | PC                                                                                                                                                    | Mobile                                                       |

diff --git a/s2-site/docs/manual/basic/analysis/strategy.zh.md b/s2-site/docs/manual/basic/analysis/strategy.zh.md
@@ -71,21 +71,20 @@ const s2Options = {
 
 </details>
 
-```ts
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from "@antv/s2-react";
 import '@antv/s2-react/dist/style.min.css';
 
-ReactDOM.render(
-  <SheetComponent
-    sheetType="strategy"
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container'),
-);
-
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="strategy"
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 <Playground path='react-component/sheet/demo/strategy.tsx' rid='container'></playground>

diff --git a/s2-site/docs/manual/basic/analysis/switcher.zh.md b/s2-site/docs/manual/basic/analysis/switcher.zh.md
@@ -30,20 +30,20 @@ const switcherFields = {
 
 </details>
 
-```js
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { Switcher } from "@antv/s2-react";
+import '@antv/s2-react/dist/style.min.css';
 
 const onSubmit = (result) => {
   console.log("result:", result);
 };
 
-ReactDOM.render(
-  <Switcher {...switcherFields} onSubmit={onSubmit} />,
-  document.getElementById("container")
-);
-
+const App = () => {
+  return (
+    <Switcher {...switcherFields} onSubmit={onSubmit} />,
+  )
+}
 ```
 
 <Playground path='react-component/switcher/demo/pure-switcher.tsx' rid='container'></playground>

diff --git a/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/pivot-mode.zh.md
@@ -16,9 +16,8 @@ order: 1
 
 ### React 组件方式
 
-```typescript
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from "@antv/s2-react";
 import '@antv/s2-react/dist/style.min.css';
 
@@ -71,14 +70,14 @@ const s2Options = {
 };
 
 // 4. 渲染
-ReactDOM.render(
-  <SheetComponent
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
-
+const App = () => {
+  return (
+    <SheetComponent
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 📊 查看 [React 版本透视表示例](/examples/react-component/sheet#pivot) 和 [API 文档](/api/components/sheet-component)。
@@ -90,10 +89,14 @@ ReactDOM.render(
 ```ts
 import { PivotSheet } from "@antv/s2";
 
-const container = document.getElementById('container');
-const s2 = new PivotSheet(container, dataCfg, options);
+async function bootstrap() {
+  const container = document.getElementById('container');
+  const s2 = new PivotSheet(container, dataCfg, options);
+
+  await s2.render();
+}
 
-await s2.render();
+bootstrap()
 ```
 
 📊 查看 [类方式透视表示例](/examples/basic/pivot#grid) 和 [API 文档](/api/general/s2options)。
diff --git a/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md b/s2-site/docs/manual/basic/sheet-type/table-mode.zh.md
@@ -19,9 +19,8 @@ order: 2
 
 ### React 组件方式
 
-```typescript
+```tsx
 import React from "react";
-import ReactDOM from "react-dom";
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
@@ -75,14 +74,15 @@ const s2Options = {
 };
 
 // 4, 渲染
-ReactDOM.render(
-  <SheetComponent
-    sheetType="table"
-    dataCfg={s2DataConfig}
-    options={s2Options}
-  />,
-  document.getElementById('container')
-);
+const App = () => {
+  return (
+    <SheetComponent
+      sheetType="table"
+      dataCfg={s2DataConfig}
+      options={s2Options}
+    />
+  )
+}
 ```
 
 ### TableSheet 类方式

diff --git a/s2-site/docs/manual/basic/sort/advanced.zh.md b/s2-site/docs/manual/basic/sort/advanced.zh.md
@@ -11,9 +11,8 @@ order: 1
 
 使用 `@antv/s2-react` 的 `SheetComponent` 组件 ，并给 `header` 配置 `advancedSortCfg` ，配置具体信息可查看 [AdvancedSortCfgProps](/docs/api/components/advanced-sort#advancedsortcfgprops)
 
-```ts
+```tsx
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import { SortParams } from '@antv/s2';
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
@@ -40,8 +39,6 @@ const AdvancedSortDemo = () => {
   );
 };
 
-ReactDOM.render(<AdvancedSortDemo />, document.getElementById('container'));
-
 ```
 
 ## 配置