@antv/s2-react-components
Version:
React components for S2
23 lines • 1.74 kB
JavaScript
import { Checkbox, Tooltip } from 'antd';
import cx from 'classnames';
import React from 'react';
import { getSwitcherClassName } from '../util';
const CLASS_NAME_PREFIX = 'item';
export const SingleItem = (props) => {
const { dragHandleProps, fieldType, id, displayName, selectable, checked = true, parentId, className, disabled = false, onVisibleItemChange, } = props;
const ref = React.useRef(null);
const [ellipsis, setEllipsis] = React.useState(false);
React.useEffect(() => {
var _a, _b;
// 针对超长文字，添加 tooltip
setEllipsis(((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) < ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollWidth));
}, []);
const realDisplayName = displayName !== null && displayName !== void 0 ? displayName : id;
return (React.createElement("div", Object.assign({}, dragHandleProps, { className: cx(getSwitcherClassName(CLASS_NAME_PREFIX), className, {
unchecked: !checked,
}) }),
selectable && (React.createElement(Checkbox, { disabled: disabled, checked: checked, onChange: (e) => onVisibleItemChange === null || onVisibleItemChange === void 0 ? void 0 : onVisibleItemChange(fieldType, e.target.checked, id, parentId) })),
ellipsis ? (React.createElement(Tooltip, { title: realDisplayName, placement: "bottomRight", overlayClassName: getSwitcherClassName('tooltip') },
React.createElement("div", { className: getSwitcherClassName(CLASS_NAME_PREFIX, 'text'), ref: ref }, realDisplayName))) : (React.createElement("div", { className: getSwitcherClassName(CLASS_NAME_PREFIX, 'text'), ref: ref }, realDisplayName))));
};
//# sourceMappingURL=single-item.js.map