@antv/s2-react-components
Version:
React components for S2
59 lines • 3.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dimension = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const antd_1 = require("antd");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = tslib_1.__importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const item_1 = require("../item");
const util_1 = require("../util");
require("./index.less");
const CLASS_NAME_PREFIX = 'dimension';
/**
* 解决 react 18 with strict mode 下的拖动报错问题
* https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194
*/
const useAfterAnimationFrame = () => {
const [enabled, setEnabled] = react_1.default.useState(false);
react_1.default.useEffect(() => {
const animation = requestAnimationFrame(() => setEnabled(true));
return () => {
cancelAnimationFrame(animation);
setEnabled(false);
};
}, []);
return enabled;
};
exports.Dimension = react_1.default.memo((props) => {
const { fieldType, crossRows = false, selectable = false, expandable = false, expandText = (0, s2_1.i18n)('展开子项'), allowEmpty = true, items = [], droppableType, text, icon: Icon } = props, rest = tslib_1.__rest(props, ["fieldType", "crossRows", "selectable", "expandable", "expandText", "allowEmpty", "items", "droppableType", "text", "icon"]);
const [expandChildren, setExpandChildren] = react_1.default.useState(true);
const enabled = useAfterAnimationFrame();
if (!enabled) {
return null;
}
const onUpdateExpand = (event) => {
setExpandChildren(event.target.checked);
};
// 开启不允许为空后，如果当前有且仅有一个item时，需要禁用拖动
const isDragDisabled = !allowEmpty && items.length === 1;
return (react_1.default.createElement("div", { className: (0, classnames_1.default)((0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX), {
'long-dimension': crossRows,
}) },
react_1.default.createElement("div", { className: (0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'header') },
react_1.default.createElement("div", { className: "title" },
react_1.default.createElement(Icon, null),
" ",
react_1.default.createElement("span", null, text)),
expandable && (react_1.default.createElement("div", { className: 'expand-option' },
react_1.default.createElement(antd_1.Checkbox, { checked: expandChildren, onChange: onUpdateExpand }, expandText)))),
react_1.default.createElement(react_beautiful_dnd_1.Droppable, { droppableId: fieldType, type: droppableType }, (provided, snapshot) => (react_1.default.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { className: (0, classnames_1.default)((0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'items'), {
[(0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'items-highlight')]: snapshot.isDraggingOver,
[(0, util_1.getSwitcherClassName)(CLASS_NAME_PREFIX, 'long-items')]: crossRows,
}) }),
items.map((item, index) => (react_1.default.createElement(item_1.DimensionItem, Object.assign({ key: item.id, index: index, fieldType: fieldType, item: item, expandable: expandable, expandChildren: expandChildren, selectable: selectable, isDragDisabled: isDragDisabled }, rest)))),
provided.placeholder)))));
});
exports.Dimension.displayName = 'Dimension';
//# sourceMappingURL=index.js.map