@antv/s2-react-components
Version:
React components for S2
56 lines • 3.17 kB
JavaScript
import { __rest } from "tslib";
import { i18n } from '@antv/s2';
import { Checkbox } from 'antd';
import cx from 'classnames';
import React from 'react';
import { Droppable } from 'react-beautiful-dnd';
import { DimensionItem } from '../item';
import { getSwitcherClassName } from '../util';
import './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.useState(false);
React.useEffect(() => {
const animation = requestAnimationFrame(() => setEnabled(true));
return () => {
cancelAnimationFrame(animation);
setEnabled(false);
};
}, []);
return enabled;
};
export const Dimension = React.memo((props) => {
const { fieldType, crossRows = false, selectable = false, expandable = false, expandText = i18n('展开子项'), allowEmpty = true, items = [], droppableType, text, icon: Icon } = props, rest = __rest(props, ["fieldType", "crossRows", "selectable", "expandable", "expandText", "allowEmpty", "items", "droppableType", "text", "icon"]);
const [expandChildren, setExpandChildren] = React.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.createElement("div", { className: cx(getSwitcherClassName(CLASS_NAME_PREFIX), {
'long-dimension': crossRows,
}) },
React.createElement("div", { className: getSwitcherClassName(CLASS_NAME_PREFIX, 'header') },
React.createElement("div", { className: "title" },
React.createElement(Icon, null),
" ",
React.createElement("span", null, text)),
expandable && (React.createElement("div", { className: 'expand-option' },
React.createElement(Checkbox, { checked: expandChildren, onChange: onUpdateExpand }, expandText)))),
React.createElement(Droppable, { droppableId: fieldType, type: droppableType }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { className: cx(getSwitcherClassName(CLASS_NAME_PREFIX, 'items'), {
[getSwitcherClassName(CLASS_NAME_PREFIX, 'items-highlight')]: snapshot.isDraggingOver,
[getSwitcherClassName(CLASS_NAME_PREFIX, 'long-items')]: crossRows,
}) }),
items.map((item, index) => (React.createElement(DimensionItem, Object.assign({ key: item.id, index: index, fieldType: fieldType, item: item, expandable: expandable, expandChildren: expandChildren, selectable: selectable, isDragDisabled: isDragDisabled }, rest)))),
provided.placeholder)))));
});
Dimension.displayName = 'Dimension';
//# sourceMappingURL=index.js.map