From 2e75fd2e6b13cefa02fb64803ba6b8a5044fffed Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Thu, 6 Jun 2024 11:16:19 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E9=80=9A=E8=BF=87=20?= =?UTF-8?q?2.0=20=E5=AE=98=E7=BD=91=E5=9B=BE=E8=A1=A8=E7=A4=BA=E4=BE=8B?= =?UTF-8?q?=E7=9A=84=20'=E5=9C=A8=20CodeSandbox=20=E4=B8=AD=E6=89=93?= =?UTF-8?q?=E5=BC=80',=20=20=E9=94=99=E8=AF=AF=E7=9A=84=E5=AE=89=E8=A3=85?= =?UTF-8?q?=E4=BA=86=201.x=20=E7=89=88=E6=9C=AC=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?=20(#2765)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/s2-react/src/components/index.ts | 5 +- s2-site/.dumirc.ts | 9 ++++ .../examples/analysis/sort/demo/advanced.tsx | 3 +- .../analysis/sort/demo/group-sort.tsx | 3 +- .../analysis/sort/demo/table-sort.tsx | 5 +- s2-site/examples/case/art/demo/lost-text.tsx | 5 +- s2-site/examples/case/art/demo/mosaic.tsx | 5 +- .../case/art/demo/time-spend-abstract.tsx | 5 +- .../comparison/demo/measure-comparison.tsx | 3 +- .../demo/multiple-people-comparison.tsx | 6 +-- .../case/comparison/demo/philosophers.tsx | 7 +-- .../case/comparison/demo/time-spend.tsx | 3 +- .../examples/case/data-preview/demo/excel.tsx | 29 +++++++---- .../examples/case/data-preview/demo/house.tsx | 21 ++++---- .../examples/case/data-preview/demo/index.tsx | 48 ++++++++++--------- .../examples/case/kpi-strategy/demo/basic.tsx | 6 ++- .../case/kpi-strategy/demo/covid-trend.tsx | 3 +- .../case/performance-compare/demo/basic.tsx | 11 +++-- .../case/proportion/demo/group-drill-down.tsx | 11 +++-- .../demo/single-population-proportion.tsx | 9 ++-- .../custom/custom-order/demo/custom-order.tsx | 7 ++- .../layout/adaptive/demo/react-adaptive.tsx | 3 +- .../drill-down/demo/basic-panel.tsx | 5 +- .../drill-down/demo/for-pivot.tsx | 2 + .../react-component/export/demo/export.tsx | 3 +- .../react-component/header/demo/default.tsx | 3 +- .../react-component/pagination/demo/pivot.tsx | 1 + .../react-component/pagination/demo/table.tsx | 4 +- .../react-component/sheet/demo/editable.tsx | 21 ++++++-- .../react-component/sheet/demo/pivot.tsx | 1 + .../sheet/demo/strategy-mini-chart.tsx | 3 +- .../react-component/sheet/demo/strategy.tsx | 6 ++- .../switcher/demo/pivot-header.tsx | 3 +- .../switcher/demo/pivot-with-children.tsx | 8 ++-- .../react-component/switcher/demo/pivot.tsx | 10 ++-- .../switcher/demo/pure-switcher.tsx | 2 + .../react-component/switcher/demo/table.tsx | 11 +++-- .../react-component/tooltip/demo/basic.tsx | 1 + .../demo/custom-click-show-tooltip.tsx | 4 +- .../tooltip/demo/custom-content-react.tsx | 6 ++- .../tooltip/demo/custom-description.tsx | 3 +- .../demo/custom-hover-show-tooltip.tsx | 4 +- .../tooltip/demo/custom-operation.tsx | 2 + .../tooltip/demo/custom-show-tooltip.tsx | 4 +- .../tooltip/demo/custom-tooltip.tsx | 11 +++-- .../tooltip/demo/operation.tsx | 4 +- .../custom/demo/custom-generate-palette.tsx | 9 ++-- .../custom/demo/custom-manual-palette.tsx | 22 +++++---- 48 files changed, 233 insertions(+), 127 deletions(-) diff --git a/packages/s2-react/src/components/index.ts b/packages/s2-react/src/components/index.ts index e0d6744552..6a39b4cbbf 100644 --- 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 index 258e63df5c..579aec8a9a 100644 --- 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: ` diff --git a/s2-site/examples/analysis/sort/demo/advanced.tsx b/s2-site/examples/analysis/sort/demo/advanced.tsx index a3588d7c4d..241e939fad 100644 --- 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 index af9083ebdc..a4c0225eff 100644 --- 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 index 71069e9d0f..ac40f1ae11 100644 --- 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 index 0141edbd89..a77746fbdf 100644 --- 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 index 6cdc362947..e6fdaa449a 100644 --- 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 index a2dbe29433..27ab12c858 100644 --- 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 index 63958d0d64..f825fe0411 100644 --- 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 index ba0d80482b..9f652fa45c 100644 --- 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 index 1297632d39..e1c01b08c7 100644 --- 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 index 8ba7c83e31..042518200a 100644 --- 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 index 69c69ab86b..9c33e9114d 100644 --- a/s2-site/examples/case/data-preview/demo/excel.tsx +++ b/s2-site/examples/case/data-preview/demo/excel.tsx @@ -1,6 +1,8 @@ -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'; // 初始化配置 @@ -8,7 +10,7 @@ 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(s2Options); - const [dataCfg, setDataCfg] = useState({ ...s2DataCfg, data }); + const s2Ref = React.useRef(null); + const [options, setOptions] = + React.useState(s2Options); + const [dataCfg, setDataCfg] = React.useState({ + ...s2DataCfg, + data, + }); + + const onMounted = () => { + console.log('s2:', s2Ref.current); + }; return (
); diff --git a/s2-site/examples/case/data-preview/demo/house.tsx b/s2-site/examples/case/data-preview/demo/house.tsx index 49c591097f..df6db2f240 100644 --- 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 index d2c91e48f7..01e4ee6555 100644 --- 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({ + const [dataCfg, setDataCfg] = React.useState({ 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 index 09ed3d13b6..36220e1986 100644 --- 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'; // 进度条 diff --git a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx index fe4a1bbcc0..dd937b3472 100644 --- a/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx +++ b/s2-site/examples/case/kpi-strategy/demo/covid-trend.tsx @@ -1,8 +1,9 @@ +// organize-imports-ignore import React from 'react'; -import { isNil } from 'lodash'; import { isUpDataValue } from '@antv/s2'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; +import { isNil } from 'lodash'; // 临时处理老数据格式 function process(children) { diff --git a/s2-site/examples/case/performance-compare/demo/basic.tsx b/s2-site/examples/case/performance-compare/demo/basic.tsx index ea1d75afaf..7aee1d3a69 100644 --- a/s2-site/examples/case/performance-compare/demo/basic.tsx +++ b/s2-site/examples/case/performance-compare/demo/basic.tsx @@ -1,8 +1,9 @@ +// 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 { compact } from 'lodash'; -import React from 'react'; const disableColor = '#d3d7d4'; const colors = [ @@ -18,7 +19,7 @@ const colors = [ function getRange(data) { const values = data.map((d) => d.value); - const compactValue = compact(values); + const compactValue = compact(values); return { min: Math.min(...compactValue), @@ -64,7 +65,7 @@ function getDataConfig(rawData: S2DataConfig['data']): S2DataConfig { function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions { return { - width: 800, + width: 800, height: 200, interaction: { selectedCellsSpotlight: false, @@ -87,7 +88,9 @@ function getOptions(rawData: S2DataConfig['data']): SheetComponentOptions { }; } -fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/performance.json') +fetch( + 'https://render.alipay.com/p/yuyan/180020010001215413/s2/performance.json', +) .then((res) => res.json()) .then((data) => { reactDOMClient.createRoot(document.getElementById('container')).render( diff --git a/s2-site/examples/case/proportion/demo/group-drill-down.tsx b/s2-site/examples/case/proportion/demo/group-drill-down.tsx index c68d32951f..9bdafa297c 100644 --- a/s2-site/examples/case/proportion/demo/group-drill-down.tsx +++ b/s2-site/examples/case/proportion/demo/group-drill-down.tsx @@ -1,8 +1,9 @@ -import { isUpDataValue } from '@antv/s2'; -import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; -import insertCSS from 'insert-css'; +// organize-imports-ignore import React from 'react'; +import { LayoutWidthType, isUpDataValue } from '@antv/s2'; +import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; +import insertCSS from 'insert-css'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/ff31b171-17a7-4d29-b20a-0b90a810d2de.json', @@ -20,7 +21,7 @@ fetch( enable: false, }, style: { - layoutWidthType: 'colAdaptive', + layoutWidthType: LayoutWidthType.ColAdaptive, dataCell: { width: 400, height: 100, @@ -167,7 +168,7 @@ insertCSS(` text-align: center; } .antv-s2-breadcrumb { - position: absolute; + position: absolute; left: 130px; top: 11px; } diff --git a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx index fc68742a14..a9a6ca9a53 100644 --- a/s2-site/examples/case/proportion/demo/single-population-proportion.tsx +++ b/s2-site/examples/case/proportion/demo/single-population-proportion.tsx @@ -1,8 +1,9 @@ -import { S2DataConfig } from '@antv/s2'; -import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; -import insertCSS from 'insert-css'; +// organize-imports-ignore import React from 'react'; +import { LayoutWidthType, S2DataConfig } 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 = [ { @@ -120,7 +121,7 @@ fetch('https://assets.antv.antgroup.com/s2/single-population-proportion.json') hoverHighlight: false, }, style: { - layoutWidthType: 'colAdaptive', + layoutWidthType: LayoutWidthType.ColAdaptive, colCell: { hideValue: true, }, diff --git a/s2-site/examples/custom/custom-order/demo/custom-order.tsx b/s2-site/examples/custom/custom-order/demo/custom-order.tsx index e2a1318605..730a0ff0d1 100644 --- a/s2-site/examples/custom/custom-order/demo/custom-order.tsx +++ b/s2-site/examples/custom/custom-order/demo/custom-order.tsx @@ -1,12 +1,15 @@ +/* eslint-disable no-console */ +// organize-imports-ignore +import React from 'react'; import { Node, S2DataConfig, TooltipOptions, type SortMethod, type SortParams, + type TooltipOperatorMenuItem, } from '@antv/s2'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; -import React from 'react'; const SortMethodType = { asc: 'asc', @@ -15,7 +18,7 @@ const SortMethodType = { custom: 'custom', }; -const MENUS = [ +const MENUS: TooltipOperatorMenuItem[] = [ { key: SortMethodType.none, label: '不排序' }, { key: SortMethodType.asc, label: '升序', icon: 'GroupAsc' }, { key: SortMethodType.desc, label: '降序', icon: 'GroupDesc' }, diff --git a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx index 1b94c92550..3583c10cb6 100644 --- a/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx +++ b/s2-site/examples/layout/adaptive/demo/react-adaptive.tsx @@ -1,5 +1,6 @@ -import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; +// organize-imports-ignore import React from 'react'; +import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', diff --git a/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx b/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx index 231e981aea..09112021c5 100644 --- a/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx +++ b/s2-site/examples/react-component/drill-down/demo/basic-panel.tsx @@ -1,10 +1,11 @@ +// organize-imports-ignore import React from 'react'; -import { DrillDown } from '@antv/s2-react'; +import { DrillDown, type DataSet } from '@antv/s2-react'; const disabledFields = ['name']; const clearButtonText = '清除'; -const dataSet = [ +const dataSet: DataSet[] = [ { name: '性别', value: 'sex', diff --git a/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx b/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx index a9f229d590..d0988c16e2 100644 --- a/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx +++ b/s2-site/examples/react-component/drill-down/demo/for-pivot.tsx @@ -1,3 +1,5 @@ +// organize-imports-ignore +import React from 'react'; import { ORIGIN_FIELD, S2DataConfig } from '@antv/s2'; import { SheetComponent, diff --git a/s2-site/examples/react-component/export/demo/export.tsx b/s2-site/examples/react-component/export/demo/export.tsx index 00dd4b79f4..51fa6c69ac 100644 --- a/s2-site/examples/react-component/export/demo/export.tsx +++ b/s2-site/examples/react-component/export/demo/export.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 '@antv/s2-react/dist/style.min.css'; -import { S2DataConfig } from '@antv/s2'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json', diff --git a/s2-site/examples/react-component/header/demo/default.tsx b/s2-site/examples/react-component/header/demo/default.tsx index 1ed174c017..c1a9418d84 100644 --- a/s2-site/examples/react-component/header/demo/default.tsx +++ b/s2-site/examples/react-component/header/demo/default.tsx @@ -1,3 +1,5 @@ +// organize-imports-ignore +import React from 'react'; import { S2DataConfig, SortParams } from '@antv/s2'; import { SheetComponent, @@ -7,7 +9,6 @@ import { import '@antv/s2-react/dist/style.min.css'; import { Button } from 'antd'; import insertCSS from 'insert-css'; -import React from 'react'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/cd9814d0-6dfa-42a6-8455-5a6bd0ff93ca.json', diff --git a/s2-site/examples/react-component/pagination/demo/pivot.tsx b/s2-site/examples/react-component/pagination/demo/pivot.tsx index 786a1540be..e083039b28 100644 --- a/s2-site/examples/react-component/pagination/demo/pivot.tsx +++ b/s2-site/examples/react-component/pagination/demo/pivot.tsx @@ -1,3 +1,4 @@ +// organize-imports-ignore import React from 'react'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; diff --git a/s2-site/examples/react-component/pagination/demo/table.tsx b/s2-site/examples/react-component/pagination/demo/table.tsx index 8d4d9f1441..19510e3549 100644 --- a/s2-site/examples/react-component/pagination/demo/table.tsx +++ b/s2-site/examples/react-component/pagination/demo/table.tsx @@ -1,7 +1,9 @@ +/* eslint-disable no-console */ +// 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 { S2DataConfig } from '@antv/s2'; fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') .then((res) => res.json()) diff --git a/s2-site/examples/react-component/sheet/demo/editable.tsx b/s2-site/examples/react-component/sheet/demo/editable.tsx index 51d01bff76..b30308ccdb 100644 --- a/s2-site/examples/react-component/sheet/demo/editable.tsx +++ b/s2-site/examples/react-component/sheet/demo/editable.tsx @@ -1,6 +1,13 @@ -import { S2DataConfig } from '@antv/s2'; -import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; +/* eslint-disable no-console */ +// organize-imports-ignore +import console from 'console'; import React from 'react'; +import { S2DataConfig } from '@antv/s2'; +import { + SheetComponent, + SheetComponentOptions, + type SheetComponentsProps, +} from '@antv/s2-react'; fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') .then((res) => res.json()) @@ -52,11 +59,17 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json') }, }; - const onDataCellEditStart = (meta, cell) => { + const onDataCellEditStart: SheetComponentsProps['onDataCellEditStart'] = ( + meta, + cell, + ) => { console.log('onDataCellEditStart:', meta, cell); }; - const onDataCellEditEnd = (meta, cell) => { + const onDataCellEditEnd: SheetComponentsProps['onDataCellEditEnd'] = ( + meta, + cell, + ) => { console.log('onDataCellEditEnd:', meta, cell); }; diff --git a/s2-site/examples/react-component/sheet/demo/pivot.tsx b/s2-site/examples/react-component/sheet/demo/pivot.tsx index a295bb7751..1553fbe478 100644 --- a/s2-site/examples/react-component/sheet/demo/pivot.tsx +++ b/s2-site/examples/react-component/sheet/demo/pivot.tsx @@ -1,3 +1,4 @@ +// organize-imports-ignore import React from 'react'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; diff --git a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx index 655b8f28e2..06a4484da9 100644 --- a/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.tsx +++ b/s2-site/examples/react-component/sheet/demo/strategy-mini-chart.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 '@antv/s2-react/dist/style.min.css'; -import React from 'react'; // 临时处理老数据格式 function process(children) { diff --git a/s2-site/examples/react-component/sheet/demo/strategy.tsx b/s2-site/examples/react-component/sheet/demo/strategy.tsx index 927ebdc397..99ffba6bf3 100644 --- a/s2-site/examples/react-component/sheet/demo/strategy.tsx +++ b/s2-site/examples/react-component/sheet/demo/strategy.tsx @@ -1,8 +1,10 @@ +/* eslint-disable no-console */ +// organize-imports-ignore +import React from 'react'; import { S2DataConfig, isUpDataValue } from '@antv/s2'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; -import { isNil } from 'lodash'; -import React from 'react'; import '@antv/s2-react/dist/style.min.css'; +import { isNil } from 'lodash'; // 临时处理老数据格式 function process(children) { diff --git a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx index 1418455b4e..cfb6834eed 100644 --- a/s2-site/examples/react-component/switcher/demo/pivot-header.tsx +++ b/s2-site/examples/react-component/switcher/demo/pivot-header.tsx @@ -1,7 +1,8 @@ +// organize-imports-ignore +import React from 'react'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; import insertCSS from 'insert-css'; -import React from 'react'; fetch( 'https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json', diff --git a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx index 3c43395561..f342d53f72 100644 --- a/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx +++ b/s2-site/examples/react-component/switcher/demo/pivot-with-children.tsx @@ -1,3 +1,5 @@ +// organize-imports-ignore +import React from 'react'; import { SheetComponent, SheetComponentOptions, @@ -5,7 +7,7 @@ import { } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; import insertCSS from 'insert-css'; -import React, { useState } from 'react'; + fetch( 'https://render.alipay.com/p/yuyan/180020010001215413/s2/pivot-switcher-with-chidlren.json', ) @@ -80,8 +82,8 @@ fetch( } const SwitcherDemo = () => { - const [fields, setFields] = useState(defaultFields); - const [switcherFields, setSwitcherFields] = useState( + const [fields, setFields] = React.useState(defaultFields); + const [switcherFields, setSwitcherFields] = React.useState( defaultSwitcherFields, ); diff --git a/s2-site/examples/react-component/switcher/demo/pivot.tsx b/s2-site/examples/react-component/switcher/demo/pivot.tsx index dae750c3b7..f230c2eeb2 100644 --- a/s2-site/examples/react-component/switcher/demo/pivot.tsx +++ b/s2-site/examples/react-component/switcher/demo/pivot.tsx @@ -1,11 +1,13 @@ -import React, { useState } from 'react'; +/* eslint-disable no-console */ +// organize-imports-ignore +import React from 'react'; import { SheetComponent, SheetComponentOptions, Switcher, } from '@antv/s2-react'; -import insertCSS from 'insert-css'; import '@antv/s2-react/dist/style.min.css'; +import insertCSS from 'insert-css'; fetch( 'https://render.alipay.com/p/yuyan/180020010001215413/s2/total-group.json', @@ -63,8 +65,8 @@ fetch( } const SwitcherDemo = () => { - const [fields, setFields] = useState(defaultFields); - const [switcherFields, setSwitcherFields] = useState( + const [fields, setFields] = React.useState(defaultFields); + const [switcherFields, setSwitcherFields] = React.useState( defaultSwitcherFields, ); diff --git a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx index 1a8b0e2355..5e1b1500fc 100644 --- a/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx +++ b/s2-site/examples/react-component/switcher/demo/pure-switcher.tsx @@ -1,3 +1,5 @@ +/* eslint-disable no-console */ +// organize-imports-ignore import React from 'react'; import { Switcher } from '@antv/s2-react'; diff --git a/s2-site/examples/react-component/switcher/demo/table.tsx b/s2-site/examples/react-component/switcher/demo/table.tsx index 58b0246d31..e68525e89c 100644 --- a/s2-site/examples/react-component/switcher/demo/table.tsx +++ b/s2-site/examples/react-component/switcher/demo/table.tsx @@ -1,11 +1,12 @@ -import React, { useState } from 'react'; +// organize-imports-ignore +import React from 'react'; import { SheetComponent, SheetComponentOptions, Switcher, } from '@antv/s2-react'; -import insertCSS from 'insert-css'; import '@antv/s2-react/dist/style.min.css'; +import insertCSS from 'insert-css'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', @@ -53,9 +54,9 @@ fetch( } const SwitcherDemo = () => { - const [fields, setFields] = useState(defaultFields); - const [hiddenColumnFields, setHiddenColumnFields] = useState([]); - const [switcherFields, setSwitcherFields] = useState( + const [fields, setFields] = React.useState(defaultFields); + const [hiddenColumnFields, setHiddenColumnFields] = React.useState([]); + const [switcherFields, setSwitcherFields] = React.useState( defaultSwitcherFields, ); diff --git a/s2-site/examples/react-component/tooltip/demo/basic.tsx b/s2-site/examples/react-component/tooltip/demo/basic.tsx index 16b444699c..da4e437455 100644 --- a/s2-site/examples/react-component/tooltip/demo/basic.tsx +++ b/s2-site/examples/react-component/tooltip/demo/basic.tsx @@ -1,3 +1,4 @@ +// organize-imports-ignore import React from 'react'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; diff --git a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx index 04a35baa2e..8f0881e259 100644 --- a/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx +++ b/s2-site/examples/react-component/tooltip/demo/custom-click-show-tooltip.tsx @@ -1,3 +1,6 @@ +/* eslint-disable no-console */ +// organize-imports-ignore +import React from 'react'; import { SpreadSheet } from '@antv/s2'; import { SheetComponent, @@ -5,7 +8,6 @@ import { SheetComponentProps, } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; -import React from 'react'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', diff --git a/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx index b3598c3100..9abeffe43b 100644 --- a/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx +++ b/s2-site/examples/react-component/tooltip/demo/custom-content-react.tsx @@ -1,8 +1,10 @@ +/* eslint-disable no-console */ +// organize-imports-ignore +import React from 'react'; 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 React from 'react'; -import '@antv/s2-react/dist/style.min.css'; const CustomTooltip = () => (
content
diff --git a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx b/s2-site/examples/react-component/tooltip/demo/custom-description.tsx index b88f2032bc..da1cc9986a 100644 --- a/s2-site/examples/react-component/tooltip/demo/custom-description.tsx +++ b/s2-site/examples/react-component/tooltip/demo/custom-description.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/react-component/tooltip/demo/custom-hover-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx index 282e60a7df..43ddda66bd 100644 --- a/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx +++ b/s2-site/examples/react-component/tooltip/demo/custom-hover-show-tooltip.tsx @@ -1,3 +1,6 @@ +/* eslint-disable no-console */ +// organize-imports-ignore +import React from 'react'; import { SpreadSheet } from '@antv/s2'; import { SheetComponent, @@ -5,7 +8,6 @@ import { SheetComponentProps, } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; -import React from 'react'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', diff --git a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx index a8a62d8d93..0ec2873075 100644 --- a/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx +++ b/s2-site/examples/react-component/tooltip/demo/custom-operation.tsx @@ -1,3 +1,5 @@ +/* eslint-disable no-console */ +// organize-imports-ignore import React from 'react'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; diff --git a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx index bc440b3a97..4fca0aa29f 100644 --- a/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx +++ b/s2-site/examples/react-component/tooltip/demo/custom-show-tooltip.tsx @@ -1,7 +1,9 @@ +/* eslint-disable no-console */ +// organize-imports-ignore import React from 'react'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; -import insertCSS from 'insert-css'; import '@antv/s2-react/dist/style.min.css'; +import insertCSS from 'insert-css'; fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', diff --git a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx index 6a9ff1c62a..0a1a8bbae2 100644 --- a/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx +++ b/s2-site/examples/react-component/tooltip/demo/custom-tooltip.tsx @@ -1,12 +1,15 @@ +/* eslint-disable no-console */ +// organize-imports-ignore +import React from 'react'; +import { type Root } from 'react-dom/client'; import { BaseTooltip } from '@antv/s2'; import { SheetComponent, SheetComponentOptions, TooltipOperatorMenuOptions, } from '@antv/s2-react'; -import insertCSS from 'insert-css'; -import React from 'react'; import '@antv/s2-react/dist/style.min.css'; +import insertCSS from 'insert-css'; const MyCustomTooltipContent = () => (
我是自定义 tooltip 内容
@@ -20,7 +23,7 @@ class CustomTooltip extends BaseTooltip< super(spreadsheet); } - root: ReactDOM.Root; + root: Root; renderContent() { this.root ??= reactDOMClient.createRoot(this.container!); @@ -43,6 +46,8 @@ class CustomTooltip extends BaseTooltip< // https://github.com/facebook/react/issues/25675#issuecomment-1363957941 Promise.resolve().then(() => { this.root?.unmount(); + // Fiber 节点卸载后不能再重新渲染, 需要重新创建 + this.root = null; }); } } diff --git a/s2-site/examples/react-component/tooltip/demo/operation.tsx b/s2-site/examples/react-component/tooltip/demo/operation.tsx index 51788e9cb5..2bd34601a3 100644 --- a/s2-site/examples/react-component/tooltip/demo/operation.tsx +++ b/s2-site/examples/react-component/tooltip/demo/operation.tsx @@ -1,6 +1,8 @@ +/* eslint-disable no-console */ +// organize-imports-ignore import React from 'react'; -import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import { CellType } from '@antv/s2'; +import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import '@antv/s2-react/dist/style.min.css'; fetch( diff --git a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx index be18a440c7..04660e7d6c 100644 --- a/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx +++ b/s2-site/examples/theme/custom/demo/custom-generate-palette.tsx @@ -1,4 +1,5 @@ -import React, { useEffect, useState } from 'react'; +// organize-imports-ignore +import React from 'react'; import { getPalette, generatePalette, ThemeCfg } from '@antv/s2'; import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; import { ChromePicker } from 'react-color'; @@ -17,8 +18,8 @@ fetch( }; function App() { - const [themeColor, setThemeColor] = useState('#EA1720'); - const [themeCfg, setThemeCfg] = useState({ + const [themeColor, setThemeColor] = React.useState('#EA1720'); + const [themeCfg, setThemeCfg] = React.useState({ name: 'colorful', }); @@ -38,7 +39,7 @@ fetch( }); }; - useEffect(() => { + React.useEffect(() => { updatePalette(themeColor); }, []); diff --git a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx index b5f4575e49..92689c6cea 100644 --- a/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx +++ b/s2-site/examples/theme/custom/demo/custom-manual-palette.tsx @@ -1,10 +1,12 @@ -import React, { useState, useEffect } from 'react'; -import { debounce, isObjectLike } from 'lodash'; -import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; +/* eslint-disable no-console */ +// organize-imports-ignore +import React from 'react'; import { S2DataConfig, getPalette } from '@antv/s2'; -import { SketchPicker } from 'react-color'; -import { Row, Space, Input, Button, message, Popover, Table } from 'antd'; +import { SheetComponent, SheetComponentOptions } from '@antv/s2-react'; +import { Button, Input, Popover, Row, Space, Table, message } from 'antd'; import copy from 'copy-to-clipboard'; +import { debounce, isObjectLike } from 'lodash'; +import { SketchPicker } from 'react-color'; import '@antv/s2-react/dist/style.min.css'; @@ -59,9 +61,9 @@ const savePalette = debounce((palette) => { }, 1000); function useDataCfg() { - const [dataCfg, setDataCfg] = useState(null); + const [dataCfg, setDataCfg] = React.useState(null); - useEffect(() => { + React.useEffect(() => { fetch( 'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json', ) @@ -148,10 +150,10 @@ function ColorTable({ palette, onChange }) { function App() { const dataCfg = useDataCfg(); - const [palette, setPalette] = useState(getInitPalette()); - const [config, setConfig] = useState(''); + const [palette, setPalette] = React.useState(getInitPalette()); + const [config, setConfig] = React.useState(''); - useEffect(() => { + React.useEffect(() => { savePalette(palette); }, [palette]);