From db9c9005e4cda64e84d95c0bdc432a55209c2f3b Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Fri, 21 Jun 2024 15:10:23 +0800 Subject: [PATCH] =?UTF-8?q?feat(text-align-panel):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=96=87=E5=AD=97=E5=AF=B9=E9=BD=90=E9=85=8D=E7=BD=AE=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=20(#2779)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(text-align-panel): 新增文字对齐配置组件 * test: 更新快照 * feat: 增加国际化 * test: 更新快照 --- .../__snapshots__/index-spec.tsx.snap | 9 + .../common/tooltip-wrapper/index-spec.tsx | 35 + .../__snapshots__/index-spec.tsx.snap | 875 ++++++++++++++++++ .../config/text-align-panel/index-spec.tsx | 93 ++ .../__snapshots__/index-spec.tsx.snap | 500 +++++----- .../s2-react-components/playground/index.less | 5 + .../s2-react-components/playground/index.tsx | 62 +- .../s2-react-components/playground/utils.ts | 3 + .../s2-react-components/src/common/index.ts | 1 + .../src/common/interface/components.ts | 23 + .../src/common/interface/icon.ts | 3 + .../src/common/interface/index.ts | 2 + .../src/components/common/index.ts | 1 + .../common/tooltip-wrapper/index.tsx | 22 + .../common/tooltip-wrapper/interface.ts | 3 + .../src/components/config/index.ts | 2 + .../config/text-align-panel/icons.tsx | 254 +++++ .../config/text-align-panel/index.less | 26 + .../config/text-align-panel/index.tsx | 115 +++ .../config/text-align-panel/interface.ts | 25 + .../config/text-align-panel/utils.ts | 58 ++ .../components/config/theme-panel/icons.tsx | 5 +- .../components/config/theme-panel/index.tsx | 28 +- .../config/theme-panel/interface.ts | 22 +- packages/s2-shared/src/constant/i18n/en_US.ts | 7 + packages/s2-shared/src/constant/i18n/zh_CN.ts | 7 + 26 files changed, 1883 insertions(+), 303 deletions(-) create mode 100644 packages/s2-react-components/__tests__/unit/components/common/tooltip-wrapper/__snapshots__/index-spec.tsx.snap create mode 100644 packages/s2-react-components/__tests__/unit/components/common/tooltip-wrapper/index-spec.tsx create mode 100644 packages/s2-react-components/__tests__/unit/components/config/text-align-panel/__snapshots__/index-spec.tsx.snap create mode 100644 packages/s2-react-components/__tests__/unit/components/config/text-align-panel/index-spec.tsx create mode 100644 packages/s2-react-components/src/common/interface/components.ts create mode 100644 packages/s2-react-components/src/common/interface/icon.ts create mode 100644 packages/s2-react-components/src/common/interface/index.ts create mode 100644 packages/s2-react-components/src/components/common/tooltip-wrapper/index.tsx create mode 100644 packages/s2-react-components/src/components/common/tooltip-wrapper/interface.ts create mode 100644 packages/s2-react-components/src/components/config/text-align-panel/icons.tsx create mode 100644 packages/s2-react-components/src/components/config/text-align-panel/index.less create mode 100644 packages/s2-react-components/src/components/config/text-align-panel/index.tsx create mode 100644 packages/s2-react-components/src/components/config/text-align-panel/interface.ts create mode 100644 packages/s2-react-components/src/components/config/text-align-panel/utils.ts diff --git a/packages/s2-react-components/__tests__/unit/components/common/tooltip-wrapper/__snapshots__/index-spec.tsx.snap b/packages/s2-react-components/__tests__/unit/components/common/tooltip-wrapper/__snapshots__/index-spec.tsx.snap new file mode 100644 index 0000000000..66c21a53bf --- /dev/null +++ b/packages/s2-react-components/__tests__/unit/components/common/tooltip-wrapper/__snapshots__/index-spec.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tooltip Wrapper Component Tests should render correctly 1`] = ` + + + +`; diff --git a/packages/s2-react-components/__tests__/unit/components/common/tooltip-wrapper/index-spec.tsx b/packages/s2-react-components/__tests__/unit/components/common/tooltip-wrapper/index-spec.tsx new file mode 100644 index 0000000000..f7ef2435dc --- /dev/null +++ b/packages/s2-react-components/__tests__/unit/components/common/tooltip-wrapper/index-spec.tsx @@ -0,0 +1,35 @@ +import { TooltipWrapper } from '@/components'; +import { fireEvent, render, screen } from '@testing-library/react'; +import React from 'react'; + +describe('Tooltip Wrapper Component Tests', () => { + test('should render correctly', () => { + const { asFragment } = render( + , + ); + + expect(asFragment()).toMatchSnapshot(); + }); + + test('should render custom content', () => { + render( + +
自定义内容
+ , + ); + + expect(screen.getByText('自定义内容')).toBeTruthy(); + }); + + test('should show custom label when tooltip clicked', () => { + render( + +
自定义内容
+ , + ); + + fireEvent.click(screen.getByText('自定义内容')); + + expect(screen.getByText('测试')).toBeTruthy(); + }); +}); diff --git a/packages/s2-react-components/__tests__/unit/components/config/text-align-panel/__snapshots__/index-spec.tsx.snap b/packages/s2-react-components/__tests__/unit/components/config/text-align-panel/__snapshots__/index-spec.tsx.snap new file mode 100644 index 0000000000..3d70658f7d --- /dev/null +++ b/packages/s2-react-components/__tests__/unit/components/config/text-align-panel/__snapshots__/index-spec.tsx.snap @@ -0,0 +1,875 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Text Align Panel Component Tests should default collapse panel 1`] = ` + +
+
+ +
+
+ +`; + +exports[`Text Align Panel Component Tests should render correctly panel 1`] = ` + +
+
+
+
+ + + +
+ + 文字对齐 + +
+ + + + + + 重置 + + +
+
+
+
+
+ + 表头 + + +
+ + + +
+ +
+
+ + 表身 (维度) + + +
+ + + +
+ +
+
+ + 表身 (指标) + + +
+ + + +
+ +
+
+
+
+
+ +`; diff --git a/packages/s2-react-components/__tests__/unit/components/config/text-align-panel/index-spec.tsx b/packages/s2-react-components/__tests__/unit/components/config/text-align-panel/index-spec.tsx new file mode 100644 index 0000000000..a42f43d1d8 --- /dev/null +++ b/packages/s2-react-components/__tests__/unit/components/config/text-align-panel/index-spec.tsx @@ -0,0 +1,93 @@ +import { TextAlignPanel } from '@/components'; +import { fireEvent, render, screen } from '@testing-library/react'; +import React from 'react'; + +describe('Text Align Panel Component Tests', () => { + test('should render correctly panel', () => { + const { asFragment } = render(); + + expect(asFragment()).toMatchSnapshot(); + expect(screen.getByText('文字对齐')).toBeDefined(); + }); + + test('should render custom panel title', () => { + const title = '自定义标题'; + + render(); + + expect(screen.getByText(title)).toBeDefined(); + }); + + test('should default collapse panel', () => { + const { asFragment } = render(); + + expect(asFragment()).toMatchSnapshot(); + }); + + test('should render custom content', () => { + const { container } = render( + + content + , + ); + + expect(container.querySelector('.custom-content')).toBeDefined(); + }); + + test('should trigger onReset event', () => { + const onRest = jest.fn(); + + render(); + + fireEvent.click(screen.getByText('重置')); + + expect(onRest).toHaveReturnedTimes(1); + expect(onRest).toHaveBeenCalledWith( + { + dataCellTextAlign: 'right', + rowCellTextAlign: 'left', + }, + expect.anything(), + expect.anything(), + ); + }); + + test('should trigger onReset event with prev options', () => { + const onRest = jest.fn(); + + const { container } = render(); + + fireEvent.click(container.querySelectorAll('.ant-radio-button')[1]!); + fireEvent.click(screen.getByText('重置')); + + expect(onRest).toHaveBeenCalledWith( + { + dataCellTextAlign: 'right', + rowCellTextAlign: 'left', + }, + { + colCellTextAlign: 'center', + dataCellTextAlign: 'center', + rowCellTextAlign: 'left', + }, + expect.anything(), + ); + }); + + test('should trigger onChange event', () => { + const onChange = jest.fn(); + + const { container } = render(); + + fireEvent.click(container.querySelectorAll('.ant-radio-button')[1]!); + + expect(onChange).toHaveBeenLastCalledWith( + { + colCellTextAlign: 'center', + dataCellTextAlign: 'center', + rowCellTextAlign: 'left', + }, + expect.anything(), + ); + }); +}); diff --git a/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/index-spec.tsx.snap b/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/index-spec.tsx.snap index 5b082b7b38..d8a61e6030 100644 --- a/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/index-spec.tsx.snap +++ b/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/index-spec.tsx.snap @@ -3,7 +3,7 @@ exports[`Theme Panel Component Tests should default collapse panel 1`] = `
- - - - + + + + - - + +
@@ -347,56 +355,60 @@ exports[`Theme Panel Component Tests should render correctly panel 1`] = ` /> - - - - - - + + + + + + - - + +
diff --git a/packages/s2-react-components/playground/index.less b/packages/s2-react-components/playground/index.less index 2c9c71e896..201e4766fb 100644 --- a/packages/s2-react-components/playground/index.less +++ b/packages/s2-react-components/playground/index.less @@ -2,4 +2,9 @@ padding: 40px; background-color: var(--antv-s2-background, #fff); color: var(--antv-s2-font, #fff); + + .config { + display: flex; + align-items: flex-start; + } } diff --git a/packages/s2-react-components/playground/index.tsx b/packages/s2-react-components/playground/index.tsx index bb41bdf42f..480d349d3f 100644 --- a/packages/s2-react-components/playground/index.tsx +++ b/packages/s2-react-components/playground/index.tsx @@ -14,11 +14,12 @@ import { version as AntdVersion, Space, Tag } from 'antd'; import React from 'react'; import { createRoot } from 'react-dom/client'; import pkg from '../package.json'; -import { ThemePanel } from '../src'; +import { TextAlignPanel, ThemePanel } from '../src'; import { s2DataConfig, s2Options } from './config'; import '@antv/s2-react/dist/style.min.css'; import './index.less'; +import { onSheetMounted } from './utils'; function MainLayout() { const s2Ref = React.useRef(); @@ -29,12 +30,48 @@ function MainLayout() { return (
+ + { + setThemeCfg({ + name: options.themeType as ThemeName, + theme, + }); + s2Ref.current?.setOptions({ + hierarchyType: options.hierarchyType, + }); + s2Ref.current?.render(false); + console.log('onChange:', options, theme); + }} + onReset={(options, prevOptions, theme) => { + console.log('onReset:', options, prevOptions, theme); + }} + /> + { + setThemeCfg({ + theme, + }); + s2Ref.current?.render(false); + console.log('onChange:', options, theme); + }} + onReset={(options, prevOptions, theme) => { + console.log('onReset:', options, prevOptions, theme); + }} + /> + {pkg.name} playground @@ -63,29 +100,6 @@ function MainLayout() { advancedSort: { open: true, }, - extra: ( - <> - { - setThemeCfg({ - name: options.themeType as ThemeName, - theme, - }); - s2Ref.current?.setOptions({ - hierarchyType: options.hierarchyType, - }); - s2Ref.current?.render(false); - console.log('onChange:', options, theme); - }} - onReset={(options, prevOptions, theme) => { - console.log('onReset:', options, prevOptions, theme); - }} - /> - - ), }} /> diff --git a/packages/s2-react-components/playground/utils.ts b/packages/s2-react-components/playground/utils.ts index c638769034..648974b128 100644 --- a/packages/s2-react-components/playground/utils.ts +++ b/packages/s2-react-components/playground/utils.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ /* eslint-disable no-restricted-imports */ /* eslint-disable no-console */ import type { SpreadSheet } from '@antv/s2'; @@ -9,5 +10,7 @@ export const onSheetMounted = (s2: SpreadSheet) => { window.s2 = s2; // @ts-ignore window.g_instances = [s2.container]; + // @ts-ignore + window.__g_instances__ = [s2.container]; window._ = _; }; diff --git a/packages/s2-react-components/src/common/index.ts b/packages/s2-react-components/src/common/index.ts index c94f80f843..f4437a563d 100644 --- a/packages/s2-react-components/src/common/index.ts +++ b/packages/s2-react-components/src/common/index.ts @@ -1 +1,2 @@ export * from './constants'; +export * from './interface'; diff --git a/packages/s2-react-components/src/common/interface/components.ts b/packages/s2-react-components/src/common/interface/components.ts new file mode 100644 index 0000000000..bf5d49a0ab --- /dev/null +++ b/packages/s2-react-components/src/common/interface/components.ts @@ -0,0 +1,23 @@ +export interface BaseComponentProps { + /** + * 标题 + * @default "文字对齐" + */ + title?: React.ReactNode; + + /** + * 默认是否折叠 + * @default false + */ + defaultCollapsed?: boolean; + + /** + * 默认配置 + */ + defaultOptions?: Partial; + + /** + * 子节点 + */ + children?: React.ReactNode; +} diff --git a/packages/s2-react-components/src/common/interface/icon.ts b/packages/s2-react-components/src/common/interface/icon.ts new file mode 100644 index 0000000000..d7b00db762 --- /dev/null +++ b/packages/s2-react-components/src/common/interface/icon.ts @@ -0,0 +1,3 @@ +export interface RadioIconProps { + active: boolean; +} diff --git a/packages/s2-react-components/src/common/interface/index.ts b/packages/s2-react-components/src/common/interface/index.ts new file mode 100644 index 0000000000..fdc62132bc --- /dev/null +++ b/packages/s2-react-components/src/common/interface/index.ts @@ -0,0 +1,2 @@ +export * from './components'; +export * from './icon'; diff --git a/packages/s2-react-components/src/components/common/index.ts b/packages/s2-react-components/src/components/common/index.ts index d049c2ca03..86405fe89b 100644 --- a/packages/s2-react-components/src/components/common/index.ts +++ b/packages/s2-react-components/src/components/common/index.ts @@ -1,3 +1,4 @@ export { RadioGroup } from './radio-group'; export { ResetButton } from './reset-button'; export { ResetGroup } from './reset-group'; +export { TooltipWrapper } from './tooltip-wrapper'; diff --git a/packages/s2-react-components/src/components/common/tooltip-wrapper/index.tsx b/packages/s2-react-components/src/components/common/tooltip-wrapper/index.tsx new file mode 100644 index 0000000000..a6dadabc9f --- /dev/null +++ b/packages/s2-react-components/src/components/common/tooltip-wrapper/index.tsx @@ -0,0 +1,22 @@ +import { S2_PREFIX_CLS } from '@antv/s2'; +import { Tooltip } from 'antd'; +import cls from 'classnames'; +import React from 'react'; +import type { TooltipWrapperProps } from './interface'; + +const PRE_CLASS = `${S2_PREFIX_CLS}-tooltip-wrapper`; + +export const TooltipWrapper: React.FC = React.memo( + (props) => { + const { title, children, className, ...attrs } = props; + + // 增加 <> 用于 Tooltip 绑定事件 + return ( + + <>{children} + + ); + }, +); + +TooltipWrapper.displayName = 'TooltipWrapper'; diff --git a/packages/s2-react-components/src/components/common/tooltip-wrapper/interface.ts b/packages/s2-react-components/src/components/common/tooltip-wrapper/interface.ts new file mode 100644 index 0000000000..b869fbcf5c --- /dev/null +++ b/packages/s2-react-components/src/components/common/tooltip-wrapper/interface.ts @@ -0,0 +1,3 @@ +import type { TooltipPropsWithTitle } from 'antd/es/tooltip'; + +export interface TooltipWrapperProps extends TooltipPropsWithTitle {} diff --git a/packages/s2-react-components/src/components/config/index.ts b/packages/s2-react-components/src/components/config/index.ts index b023819a71..c9ec76c853 100644 --- a/packages/s2-react-components/src/components/config/index.ts +++ b/packages/s2-react-components/src/components/config/index.ts @@ -2,4 +2,6 @@ export { ThemePanel } from './theme-panel'; export { ColorBox } from './theme-panel/color-box'; export { ColorPickerPanel } from './theme-panel/color-picker-panel'; +export { TextAlignPanel } from './text-align-panel'; + export * from './theme-panel/interface'; diff --git a/packages/s2-react-components/src/components/config/text-align-panel/icons.tsx b/packages/s2-react-components/src/components/config/text-align-panel/icons.tsx new file mode 100644 index 0000000000..48802ca984 --- /dev/null +++ b/packages/s2-react-components/src/components/config/text-align-panel/icons.tsx @@ -0,0 +1,254 @@ +import React from 'react'; +import type { RadioIconProps } from '../../../common/interface/icon'; + +export const LeftAlignIcon = React.memo(({ active }) => { + if (active) { + return ( + + + + + + + + + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + ); +}); + +export const CenterAlignIcon = React.memo(({ active }) => { + if (active) { + return ( + + + + + + + + + + + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + + + ); +}); + +export const RightAlignIcon = React.memo(({ active }) => { + if (active) { + return ( + + + + + + + + + + + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + + + ); +}); diff --git a/packages/s2-react-components/src/components/config/text-align-panel/index.less b/packages/s2-react-components/src/components/config/text-align-panel/index.less new file mode 100644 index 0000000000..01418a82b2 --- /dev/null +++ b/packages/s2-react-components/src/components/config/text-align-panel/index.less @@ -0,0 +1,26 @@ +@import '@antv/s2/src/styles/variables.less'; + +.@{s2-cls-prefix}-theme-panel-custom-color { + display: flex; + align-items: center; + padding-top: 10px; + + &::before { + position: relative; + display: block; + flex: 1; + content: ''; + } + + > div { + display: flex; + flex: 2; + align-items: center; + } + + &-title { + margin-right: 20px; + color: rgba(0, 0, 0, 0.45); + font-size: 12px; + } +} diff --git a/packages/s2-react-components/src/components/config/text-align-panel/index.tsx b/packages/s2-react-components/src/components/config/text-align-panel/index.tsx new file mode 100644 index 0000000000..e0f1a42392 --- /dev/null +++ b/packages/s2-react-components/src/components/config/text-align-panel/index.tsx @@ -0,0 +1,115 @@ +import { S2_PREFIX_CLS, i18n } from '@antv/s2'; +import { type RadioChangeEvent } from 'antd'; +import React from 'react'; +import { ResetGroup, TooltipWrapper } from '../../common'; +import { RadioGroup } from '../../common/radio-group'; +import type { RadioGroupProps } from '../../common/radio-group/interface'; +import { CenterAlignIcon, LeftAlignIcon, RightAlignIcon } from './icons'; +import './index.less'; +import type { TextAlignPanelOptions, TextAlignPanelProps } from './interface'; +import { generateCellTextAlignTheme } from './utils'; + +const PRE_CLASS = `${S2_PREFIX_CLS}-text-align-panel`; + +export const TextAlignPanel: React.FC = React.memo( + (props) => { + const { + title = i18n('文字对齐'), + defaultOptions: defaultTextAlignPanelOptions, + defaultCollapsed = false, + children, + onChange, + onReset, + } = props; + const [options, setOptions] = React.useState({ + rowCellTextAlign: 'left', + dataCellTextAlign: 'right', + ...defaultTextAlignPanelOptions, + }); + const defaultOptions = React.useRef(options); + + const onResetClick = () => { + const theme = generateCellTextAlignTheme(defaultOptions.current); + + setOptions(defaultOptions.current); + onReset?.(defaultOptions.current, options, theme!); + }; + + const onOptionsChange = + (field: keyof TextAlignPanelOptions) => (e: RadioChangeEvent) => { + const newOptions: TextAlignPanelOptions = { + ...options, + [field]: e.target.value, + }; + + // 指标和列头对齐 (含 EXTRA_FIELD 虚拟列), 可单独调整指标 + if (field === 'colCellTextAlign') { + newOptions.dataCellTextAlign = newOptions.colCellTextAlign; + } + + setOptions(newOptions); + }; + + const getCellAlignOptions = ( + field: keyof TextAlignPanelOptions, + ): RadioGroupProps['options'] => + [ + { label: i18n('左对齐'), value: 'left', component: LeftAlignIcon }, + { label: i18n('居中'), value: 'center', component: CenterAlignIcon }, + { label: i18n('右对齐'), value: 'right', component: RightAlignIcon }, + ].map(({ label, value, component: Component }) => { + return { + label: ( + + + + ), + value, + }; + }); + + const getRadioGroupProps = ( + field: keyof TextAlignPanelOptions, + ): Partial => { + return { + optionType: 'button', + value: options[field], + onChange: onOptionsChange(field), + options: getCellAlignOptions(field), + onlyIcon: true, + }; + }; + + React.useEffect(() => { + const theme = generateCellTextAlignTheme(options); + + onChange?.(options, theme!); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [options]); + + return ( + + {children} + + + + + ); + }, +); + +TextAlignPanel.displayName = 'TextAlignPanel'; diff --git a/packages/s2-react-components/src/components/config/text-align-panel/interface.ts b/packages/s2-react-components/src/components/config/text-align-panel/interface.ts new file mode 100644 index 0000000000..7914a4966a --- /dev/null +++ b/packages/s2-react-components/src/components/config/text-align-panel/interface.ts @@ -0,0 +1,25 @@ +import type { S2Theme, TextAlign } from '@antv/s2'; +import type { BaseComponentProps } from '../../../common/interface/components'; + +export interface TextAlignPanelOptions { + rowCellTextAlign?: TextAlign; + colCellTextAlign?: TextAlign; + dataCellTextAlign?: TextAlign; +} + +export interface TextAlignPanelProps + extends BaseComponentProps { + /** + * 选择 + */ + onChange?: (options: TextAlignPanelOptions, theme: S2Theme) => void; + + /** + * 重置 + */ + onReset?: ( + options: TextAlignPanelOptions, + prevOptions: TextAlignPanelOptions, + theme: S2Theme, + ) => void; +} diff --git a/packages/s2-react-components/src/components/config/text-align-panel/utils.ts b/packages/s2-react-components/src/components/config/text-align-panel/utils.ts new file mode 100644 index 0000000000..4733c9bcb2 --- /dev/null +++ b/packages/s2-react-components/src/components/config/text-align-panel/utils.ts @@ -0,0 +1,58 @@ +import type { S2Theme } from '@antv/s2'; +import type { TextAlignPanelOptions } from './interface'; + +/** + * 生成表格文本对齐方式主题配置 + * @see https://s2.antv.antgroup.com/zh/docs/api/general/S2Theme + */ +export function generateCellTextAlignTheme( + options: TextAlignPanelOptions, +): S2Theme { + const { + colCellTextAlign: colCellAlignType, + rowCellTextAlign: rowCellAlignType = 'left', + dataCellTextAlign: dataCellAlignType = 'right', + } = options; + + return { + // 角头取列头的对齐方式, 但底表默认行角头是靠左, 列角头是靠右, 所以没有指定默认值时默认按底表对齐方式展示. + cornerCell: { + text: { + textAlign: options?.colCellTextAlign || 'left', + }, + bolderText: { + textAlign: options?.colCellTextAlign || 'right', + }, + }, + colCell: { + text: { + textAlign: colCellAlignType, + }, + bolderText: { + textAlign: colCellAlignType, + }, + measureText: { + textAlign: dataCellAlignType, + }, + }, + rowCell: { + text: { + textAlign: rowCellAlignType, + }, + bolderText: { + textAlign: rowCellAlignType, + }, + measureText: { + textAlign: rowCellAlignType, + }, + }, + dataCell: { + text: { + textAlign: dataCellAlignType, + }, + bolderText: { + textAlign: dataCellAlignType, + }, + }, + }; +} diff --git a/packages/s2-react-components/src/components/config/theme-panel/icons.tsx b/packages/s2-react-components/src/components/config/theme-panel/icons.tsx index d7cda13bb9..18dfedf5a5 100644 --- a/packages/s2-react-components/src/components/config/theme-panel/icons.tsx +++ b/packages/s2-react-components/src/components/config/theme-panel/icons.tsx @@ -1,8 +1,5 @@ import React from 'react'; - -type RadioIconProps = { - active: boolean; -}; +import type { RadioIconProps } from '../../../common/interface/icon'; export const HierarchyGridTypeIcon = React.memo( ({ active }) => { diff --git a/packages/s2-react-components/src/components/config/theme-panel/index.tsx b/packages/s2-react-components/src/components/config/theme-panel/index.tsx index 960852f7b0..43f12c1853 100644 --- a/packages/s2-react-components/src/components/config/theme-panel/index.tsx +++ b/packages/s2-react-components/src/components/config/theme-panel/index.tsx @@ -1,17 +1,12 @@ import { S2_PREFIX_CLS, i18n } from '@antv/s2'; -import { - Popover, - Tooltip, - type RadioChangeEvent, - type RadioGroupProps, -} from 'antd'; +import { Popover, type RadioChangeEvent, type RadioGroupProps } from 'antd'; import React from 'react'; import { DEFAULT_THEME_COLOR_LIST, SheetThemeColorType, SheetThemeType, } from '../../../common'; -import { ResetGroup } from '../../common'; +import { ResetGroup, TooltipWrapper } from '../../common'; import { RadioGroup } from '../../common/radio-group'; import { ColorBox } from './color-box'; import { ColorPickerPanel } from './color-picker-panel'; @@ -108,10 +103,6 @@ export const ThemePanel: React.FC = React.memo((props) => { setOptions(newOptions); }; - const renderIcon = (label: React.ReactNode, Component: React.ReactNode) => { - return {Component}; - }; - React.useEffect(() => { const theme = generateColorTheme({ themeType: options.themeType, @@ -128,9 +119,10 @@ export const ThemePanel: React.FC = React.memo((props) => { { label: i18n('树状'), value: 'tree', component: HierarchyTreeTypeIcon }, ].map(({ label, value, component: Component }) => { return { - label: renderIcon( - label, - , + label: ( + + + ), value, }; @@ -158,9 +150,10 @@ export const ThemePanel: React.FC = React.memo((props) => { component: ZebraThemeIcon, }, ].map(({ label, value, component: Component }) => ({ - label: renderIcon( - label, - , + label: ( + + + ), value, })); @@ -190,6 +183,7 @@ export const ThemePanel: React.FC = React.memo((props) => { title={title} onResetClick={onResetClick} defaultCollapsed={defaultCollapsed} + className={PRE_CLASS} > {children} { /** * 历史自定义颜色记录上限 * @default 5 @@ -29,17 +22,6 @@ export interface ThemePanelProps { */ disableCustomPrimaryColorPicker?: boolean; - /** - * 默认是否折叠 - * @default false - */ - defaultCollapsed?: boolean; - - /** - * 默认配置 - */ - defaultOptions?: Partial; - /** * 选择 */ diff --git a/packages/s2-shared/src/constant/i18n/en_US.ts b/packages/s2-shared/src/constant/i18n/en_US.ts index 0def203873..4dae05aa97 100644 --- a/packages/s2-shared/src/constant/i18n/en_US.ts +++ b/packages/s2-shared/src/constant/i18n/en_US.ts @@ -62,4 +62,11 @@ export const EN_US: Record = { 浅色主题: 'Light theme', 灰色: 'Gray', 自定义: 'Custom', + 文字对齐: 'Text align', + 左对齐: 'Align left', + 居中: 'Align center', + 右对齐: 'Align right', + 表头: 'Header', + '表身 (维度)': 'Body(dimension)', + '表身 (指标)': 'Body(measure)', }; diff --git a/packages/s2-shared/src/constant/i18n/zh_CN.ts b/packages/s2-shared/src/constant/i18n/zh_CN.ts index 2121698959..59bc4a4086 100644 --- a/packages/s2-shared/src/constant/i18n/zh_CN.ts +++ b/packages/s2-shared/src/constant/i18n/zh_CN.ts @@ -62,4 +62,11 @@ export const ZH_CN: Record = { 浅色主题: '浅色主题', 灰色: '灰色', 自定义: '自定义', + 文字对齐: '文字对齐', + 左对齐: '左对齐', + 居中: '居中', + 右对齐: '右对齐', + 表头: '表头', + '表身 (维度)': '表身 (维度)', + '表身 (指标)': '表身 (指标)', };