@antv/s2-react-components
Version:
React components for S2
57 lines • 3.16 kB
JavaScript
import { S2_PREFIX_CLS, i18n } from '@antv/s2';
import React from 'react';
import { RadioGroup, ResetGroup, TooltipWrapper, } from '../common';
import { CenterAlignIcon, LeftAlignIcon, RightAlignIcon } from './icons';
import './index.less';
import { generateCellTextAlignTheme } from './utils';
const PRE_CLASS = `${S2_PREFIX_CLS}-text-align-panel`;
export const TextAlignPanel = React.memo((props) => {
const { title = i18n('文字对齐'), defaultOptions: defaultTextAlignPanelOptions, defaultCollapsed = false, children, onChange, onReset, } = props;
const [options, setOptions] = React.useState(Object.assign({ rowCellTextAlign: 'left', dataCellTextAlign: 'right' }, defaultTextAlignPanelOptions));
const defaultOptions = React.useRef(options);
const onResetClick = () => {
const theme = generateCellTextAlignTheme(defaultOptions.current);
setOptions(defaultOptions.current);
onReset === null || onReset === void 0 ? void 0 : onReset(defaultOptions.current, options, theme);
};
const onOptionsChange = (field) => (e) => {
const newOptions = Object.assign(Object.assign({}, options), { [field]: e.target.value });
// 指标和列头对齐 (含 EXTRA_FIELD 虚拟列), 可单独调整指标
if (field === 'colCellTextAlign') {
newOptions.dataCellTextAlign = newOptions.colCellTextAlign;
}
setOptions(newOptions);
};
const getCellAlignOptions = (field) => [
{ 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: (React.createElement(TooltipWrapper, { title: label },
React.createElement(Component, { active: options[field] === value }))),
value,
};
});
const getRadioGroupProps = (field) => {
return {
optionType: 'button',
value: options[field],
onChange: onOptionsChange(field),
options: getCellAlignOptions(field),
onlyIcon: true,
};
};
React.useEffect(() => {
const theme = generateCellTextAlignTheme(options);
onChange === null || onChange === void 0 ? void 0 : onChange(options, theme);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options]);
return (React.createElement(ResetGroup, { title: title, onResetClick: onResetClick, defaultCollapsed: defaultCollapsed, className: PRE_CLASS },
children,
React.createElement(RadioGroup, Object.assign({ label: i18n('表头') }, getRadioGroupProps('colCellTextAlign'))),
React.createElement(RadioGroup, Object.assign({ label: i18n('表身 (维度)') }, getRadioGroupProps('rowCellTextAlign'))),
React.createElement(RadioGroup, Object.assign({ label: i18n('表身 (指标)') }, getRadioGroupProps('dataCellTextAlign')))));
});
TextAlignPanel.displayName = 'TextAlignPanel';
//# sourceMappingURL=text-align-panel.js.map