@antv/s2-react-components
Version:
React components for S2
66 lines • 4.36 kB
JavaScript
import { __rest } from "tslib";
import { ReloadOutlined } from '@ant-design/icons';
import { i18n } from '@antv/s2';
import { Button } from 'antd';
import cx from 'classnames';
import { isEqual } from 'lodash';
import React from 'react';
import { DragDropContext, } from 'react-beautiful-dnd';
import { FieldType, SWITCHER_FIELDS } from '../constant';
import { Dimension } from '../dimension';
import { checkItem, generateSwitchResult, getMainLayoutClassName, getSwitcherClassName, getSwitcherConfig, getSwitcherState, moveItem, shouldCrossRows, } from '../util';
import './index.less';
const CLASS_NAME_PREFIX = 'content';
export const SwitcherContent = React.memo((props) => {
const { innerContentClassName, contentTitleText = i18n('行列切换'), resetText = i18n('恢复默认'), allowExchangeHeader = true, onToggleVisible, onSubmit, sheetType = 'pivot' } = props, defaultFields = __rest(props, ["innerContentClassName", "contentTitleText", "resetText", "allowExchangeHeader", "onToggleVisible", "onSubmit", "sheetType"]);
const switcherConfig = getSwitcherConfig(allowExchangeHeader);
const defaultState = getSwitcherState(defaultFields);
const [state, setState] = React.useState(defaultState);
const [draggingItemId, setDraggingItemId] = React.useState(null);
const onBeforeDragStart = (initial) => {
setDraggingItemId(initial.draggableId);
};
const onDragEnd = ({ destination, source }) => {
// reset dragging item id
setDraggingItemId(null);
// cancelled or drop to where can't drop
if (!destination) {
return;
}
// don't change position
if (destination.droppableId === source.droppableId &&
destination.index === source.index) {
return;
}
const updatedState = moveItem(
// @ts-ignore
state[source.droppableId],
// @ts-ignore
state[destination.droppableId], source, destination);
setState(Object.assign(Object.assign({}, state), updatedState));
};
const onReset = () => {
setState(defaultState);
};
const onConfirm = () => {
onToggleVisible();
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(generateSwitchResult(state));
};
const onVisibleItemChange = (fieldType, checked, id, parentId) => {
const updatedState = checkItem(state[fieldType], checked, id, parentId);
setState(Object.assign(Object.assign({}, state), { [fieldType]: updatedState }));
};
const isNothingChanged = isEqual(defaultState, state);
const displayFieldItems = SWITCHER_FIELDS.filter((filed) => sheetType !== 'table' || filed === FieldType.Cols);
return (React.createElement(DragDropContext, { onBeforeCapture: onBeforeDragStart, onDragEnd: onDragEnd },
React.createElement("div", { className: cx(innerContentClassName, getSwitcherClassName(CLASS_NAME_PREFIX)) },
React.createElement("header", { className: getSwitcherClassName(CLASS_NAME_PREFIX, 'header') }, contentTitleText),
React.createElement("main", { className: cx(getSwitcherClassName(CLASS_NAME_PREFIX, 'main'), getMainLayoutClassName(sheetType)) }, displayFieldItems.map((type) => (React.createElement(Dimension, Object.assign({}, defaultFields[type], { key: type, fieldType: type, items: state[type], crossRows: shouldCrossRows(sheetType, type), draggingItemId: draggingItemId, onVisibleItemChange: onVisibleItemChange }, switcherConfig[type]))))),
React.createElement("footer", { className: getSwitcherClassName(CLASS_NAME_PREFIX, 'footer') },
React.createElement(Button, { type: 'text', icon: React.createElement(ReloadOutlined, null), className: getSwitcherClassName(CLASS_NAME_PREFIX, 'footer', 'reset-button'), disabled: isNothingChanged, onClick: onReset }, resetText),
React.createElement("div", { className: getSwitcherClassName(CLASS_NAME_PREFIX, 'footer', 'actions') },
React.createElement(Button, { className: "action-button", onClick: onToggleVisible }, i18n('取消')),
React.createElement(Button, { className: "action-button", type: "primary", disabled: isNothingChanged, onClick: onConfirm }, i18n('确定')))))));
});
SwitcherContent.displayName = 'SwitcherContent';
//# sourceMappingURL=index.js.map