@antv/s2-react-components
Version:
React components for S2
69 lines • 4.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SwitcherContent = void 0;
const tslib_1 = require("tslib");
const icons_1 = require("@ant-design/icons");
const s2_1 = require("@antv/s2");
const antd_1 = require("antd");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const constant_1 = require("../constant");
const dimension_1 = require("../dimension");
const util_1 = require("../util");
require("./index.less");
const CLASS_NAME_PREFIX = 'content';
exports.SwitcherContent = react_1.default.memo((props) => {
const { innerContentClassName, contentTitleText = (0, s2_1.i18n)('行列切换'), resetText = (0, s2_1.i18n)('恢复默认'), allowExchangeHeader = true, onToggleVisible, onSubmit, sheetType = 'pivot' } = props, defaultFields = tslib_1.__rest(props, ["innerContentClassName", "contentTitleText", "resetText", "allowExchangeHeader", "onToggleVisible", "onSubmit", "sheetType"]);
const switcherConfig = (0, util_1.getSwitcherConfig)(allowExchangeHeader);
const defaultState = (0, util_1.getSwitcherState)(defaultFields);
const [state, setState] = react_1.default.useState(defaultState);
const [draggingItemId, setDraggingItemId] = react_1.default.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 = (0, util_1.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((0, util_1.generateSwitchResult)(state));
};
const onVisibleItemChange = (fieldType, checked, id, parentId) => {
const updatedState = (0, util_1.checkItem)(state[fieldType], checked, id, parentId);
setState(Object.assign(Object.assign({}, state), { [fieldType]: updatedState }));
};
const isNothingChanged = (0, lodash_1.isEqual)(defaultState, state);
const displayFieldItems = constant_1.SWITCHER_FIELDS.filter((filed) => sheetType !== 'table' || filed === constant_1.FieldType.Cols);
return (react_1.default.createElement(react_beautiful_dnd_1.DragDropContext, { onBeforeCapture: onBeforeDragStart, onDragEnd: onDragEnd },
react_1.default.createElement("div", { className: (0, classnames_1.default)(innerContentClassName, (0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX)) },
react_1.default.createElement("header", { className: (0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'header') }, contentTitleText),
react_1.default.createElement("main", { className: (0, classnames_1.default)((0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'main'), (0, util_1.getMainLayoutClassName)(sheetType)) }, displayFieldItems.map((type) => (react_1.default.createElement(dimension_1.Dimension, Object.assign({}, defaultFields[type], { key: type, fieldType: type, items: state[type], crossRows: (0, util_1.shouldCrossRows)(sheetType, type), draggingItemId: draggingItemId, onVisibleItemChange: onVisibleItemChange }, switcherConfig[type]))))),
react_1.default.createElement("footer", { className: (0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'footer') },
react_1.default.createElement(antd_1.Button, { type: 'text', icon: react_1.default.createElement(icons_1.ReloadOutlined, null), className: (0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'footer', 'reset-button'), disabled: isNothingChanged, onClick: onReset }, resetText),
react_1.default.createElement("div", { className: (0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'footer', 'actions') },
react_1.default.createElement(antd_1.Button, { className: "action-button", onClick: onToggleVisible }, (0, s2_1.i18n)('取消')),
react_1.default.createElement(antd_1.Button, { className: "action-button", type: "primary", disabled: isNothingChanged, onClick: onConfirm }, (0, s2_1.i18n)('确定')))))));
});
exports.SwitcherContent.displayName = 'SwitcherContent';
//# sourceMappingURL=index.js.map