@aures/custom-react-table
Version:
dynamic table based on react table v7
45 lines • 2.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_i18next_1 = require("react-i18next");
const FixedHeightDiv = ({ children, height = '200px', isFilterShowingTab, setIsFilterShowingTab, filters, filterActive, }) => {
const { t } = (0, react_i18next_1.useTranslation)();
const [showMore, setShowMore] = (0, react_1.useState)(false);
const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
const contentRef = (0, react_1.useRef)(null);
(0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: contentRef, style: {
height: height,
width: '98%',
overflow: 'hidden',
position: 'relative',
} }, { children: children })), isOverflowing && !filterActive && ((0, jsx_runtime_1.jsx)("a", Object.assign({ style: {
position: 'relative',
float: 'right',
paddingRight: '16px',
background: 'transparent !important',
}, href: "#", onClick: toggleShowMore }, { children: t('Show more') })))] }));
};
exports.default = FixedHeightDiv;
//# sourceMappingURL=FixedHeightDiv.js.map