@aures/custom-react-table
Version:
dynamic table based on react table v7
43 lines • 2.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
const FixedHeightDiv = ({ children, height = '200px', isFilterShowingTab, setIsFilterShowingTab, filters, filterActive, }) => {
const { t } = useTranslation();
const [showMore, setShowMore] = useState(false);
const [isOverflowing, setIsOverflowing] = useState(false);
const contentRef = useRef(null);
useEffect(() => {
var _a, _b;
console.log({
ch: (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight,
sh: (_b = contentRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight,
});
const current = contentRef.current;
if (contentRef &&
(current === null || current === void 0 ? void 0 : current.scrollHeight) &&
(current === null || current === void 0 ? void 0 : current.clientHeight) &&
(current === null || current === void 0 ? void 0 : current.scrollHeight) > (current === null || current === void 0 ? void 0 : current.clientHeight)) {
setIsOverflowing(true);
}
else {
setIsOverflowing(false);
}
}, [filters]);
const toggleShowMore = () => {
setShowMore(!showMore);
setIsFilterShowingTab(true);
};
return (_jsxs("div", { children: [_jsx("div", Object.assign({ ref: contentRef, style: {
height: height,
width: '98%',
overflow: 'hidden',
position: 'relative',
} }, { children: children })), isOverflowing && !filterActive && (_jsx("a", Object.assign({ style: {
position: 'relative',
float: 'right',
paddingRight: '16px',
background: 'transparent !important',
}, href: "#", onClick: toggleShowMore }, { children: t('Show more') })))] }));
};
export default FixedHeightDiv;
//# sourceMappingURL=FixedHeightDiv.js.map