@antv/s2-react-components
Version:
React components for S2
61 lines • 3.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextAlignPanel = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const react_1 = tslib_1.__importDefault(require("react"));
const common_1 = require("../common");
const icons_1 = require("./icons");
require("./index.less");
const utils_1 = require("./utils");
const PRE_CLASS = `${s2_1.S2_PREFIX_CLS}-text-align-panel`;
exports.TextAlignPanel = react_1.default.memo((props) => {
const { title = (0, s2_1.i18n)('文字对齐'), defaultOptions: defaultTextAlignPanelOptions, defaultCollapsed = false, children, onChange, onReset, } = props;
const [options, setOptions] = react_1.default.useState(Object.assign({ rowCellTextAlign: 'left', dataCellTextAlign: 'right' }, defaultTextAlignPanelOptions));
const defaultOptions = react_1.default.useRef(options);
const onResetClick = () => {
const theme = (0, utils_1.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: (0, s2_1.i18n)('左对齐'), value: 'left', component: icons_1.LeftAlignIcon },
{ label: (0, s2_1.i18n)('居中'), value: 'center', component: icons_1.CenterAlignIcon },
{ label: (0, s2_1.i18n)('右对齐'), value: 'right', component: icons_1.RightAlignIcon },
].map(({ label, value, component: Component }) => {
return {
label: (react_1.default.createElement(common_1.TooltipWrapper, { title: label },
react_1.default.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_1.default.useEffect(() => {
const theme = (0, utils_1.generateCellTextAlignTheme)(options);
onChange === null || onChange === void 0 ? void 0 : onChange(options, theme);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options]);
return (react_1.default.createElement(common_1.ResetGroup, { title: title, onResetClick: onResetClick, defaultCollapsed: defaultCollapsed, className: PRE_CLASS },
children,
react_1.default.createElement(common_1.RadioGroup, Object.assign({ label: (0, s2_1.i18n)('表头') }, getRadioGroupProps('colCellTextAlign'))),
react_1.default.createElement(common_1.RadioGroup, Object.assign({ label: (0, s2_1.i18n)('表身 (维度)') }, getRadioGroupProps('rowCellTextAlign'))),
react_1.default.createElement(common_1.RadioGroup, Object.assign({ label: (0, s2_1.i18n)('表身 (指标)') }, getRadioGroupProps('dataCellTextAlign')))));
});
exports.TextAlignPanel.displayName = 'TextAlignPanel';
//# sourceMappingURL=text-align-panel.js.map