@abbl/material-calendar
Version:
Calendar component build with React and Material-UI
59 lines • 2.56 kB
JavaScript
import floor from 'lodash/floor';
import React, { useEffect, useRef, useState } from 'react';
/**
* TODO: Write explanation of this UI element, since it's meant to be reusable.
*/
export default function ExpandableContainer(props) {
var _a = useState(0), displayedElementsNumber = _a[0], setDisplayedElementsNumber = _a[1];
var rootElementRef = useRef(null);
/**
* Called when ref to rootElement is assigned.
* Calls updateContainer and registers eventListener
* that calls updateContainer everytime window size changes.
*/
useEffect(function () {
if (rootElementRef.current) {
updateContainer();
window.addEventListener('resize', updateContainer);
return function () {
window.removeEventListener('resize', updateContainer);
};
}
}, [rootElementRef]);
/**
* Calculates how many elements can be displayed in container
* without overflowing it.
*
* TODO: Possible optimalization by usage of timer to
* reduce number of calls made to the update function.
*/
function updateContainer() {
var availableHeight = rootElementRef.current.getBoundingClientRect().height;
setDisplayedElementsNumber(floor(availableHeight / props.elementHeight));
}
function renderElements(amount) {
if (props.elements.length > amount) {
return renderSlicedElementsArray(amount);
}
return props.elements;
}
function renderSlicedElementsArray(amount) {
var slicedArray = props.elements.slice(0, amount);
// Swapping last element with expandMore component If one was provided.
if (props.expandMoreComponent) {
// Decreasing amount by one since expandMoreComponent should not be counted as remaining elements.
slicedArray[slicedArray.length - 1] = props.expandMoreComponent(props.elements.length - (amount - 1));
}
return slicedArray;
}
return (
// This piece of code might seem dumb but the thing is, it works.
//
// To not affect initial size of the container, we wrap the content
// in div that has 0 height.
// So measurements are not affected by renderered elements and we always
// get the "true" height of the root component.
React.createElement("div", { style: { height: '100%' }, ref: rootElementRef },
React.createElement("div", { style: { height: 0 } }, renderElements(displayedElementsNumber))));
}
//# sourceMappingURL=ExpandableContainer.js.map