@dabapps/roe
Version:
A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.
106 lines • 5.75 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var classNames = require("classnames");
var React = require("react");
var ENOUGH_TIME_FOR_RERENDER = 50;
var DEFAULT_HEIGHT = 0;
var DEFAULT_DURATION = 200;
var DEFAULT_FADE_HEIGHT = 50;
var DEFAULT_TRANSPARENT_COLOR = 'rgba(255, 255, 255, 0)';
var DEFAULT_FADE_COLOR = 'rgba(255, 255, 255, 1)';
/**
* Component to expand and collapse content, optionally displaying a small preview.
*/
var Collapse = function (props) {
var children = props.children, className = props.className, fadeOut = props.fadeOut, _a = props.fadeColor, fadeColor = _a === void 0 ? DEFAULT_FADE_COLOR : _a, _b = props.fadeHeight, fadeHeight = _b === void 0 ? DEFAULT_FADE_HEIGHT : _b, _c = props.transparentColor, transparentColor = _c === void 0 ? DEFAULT_TRANSPARENT_COLOR : _c, open = props.open, _d = props.maxCollapsedHeight, maxCollapsedHeight = _d === void 0 ? DEFAULT_HEIGHT : _d, _e = props.minHeight, minHeight = _e === void 0 ? undefined : _e, _f = props.animationDuration, animationDuration = _f === void 0 ? DEFAULT_DURATION : _f, _g = props.component, Component = _g === void 0 ? 'div' : _g, remainingProps = __rest(props, ["children", "className", "fadeOut", "fadeColor", "fadeHeight", "transparentColor", "open", "maxCollapsedHeight", "minHeight", "animationDuration", "component"]);
var elementRef = React.useRef(null);
var timeoutRef = React.useRef();
var prevProps = React.useRef(props);
var _h = React.useState({
height: maxCollapsedHeight,
opening: false,
opened: open,
}), state = _h[0], setState = _h[1];
React.useEffect(function () {
var _a, _b, _c;
if (props.open !== prevProps.current.open) {
window.clearTimeout(timeoutRef.current);
setState({
opened: false,
opening: prevProps.current.open,
height: props.open
? (_a = props.maxCollapsedHeight) !== null && _a !== void 0 ? _a : DEFAULT_HEIGHT : /* istanbul ignore next */ (_c = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0,
});
timeoutRef.current = window.setTimeout(function () {
var _a, _b, _c, _d;
setState({
opened: false,
opening: props.open,
height: props.open
? /* istanbul ignore next */ (_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0 : (_c = props.maxCollapsedHeight) !== null && _c !== void 0 ? _c : DEFAULT_HEIGHT,
});
timeoutRef.current = window.setTimeout(function () {
setState(function (prevState) { return (__assign(__assign({}, prevState), { opened: props.open, opening: props.open })); });
}, (_d = props.animationDuration) !== null && _d !== void 0 ? _d : DEFAULT_DURATION);
}, ENOUGH_TIME_FOR_RERENDER);
}
prevProps.current = props;
}, [props]);
React.useEffect(function () {
setState(function (prevState) {
var _a, _b;
return (__assign(__assign({}, prevState), { height: open
? /* istanbul ignore next */ (_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0 : maxCollapsedHeight }));
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(function () { return function () {
window.clearTimeout(timeoutRef.current);
}; }, []);
var opening = state.opening, opened = state.opened, height = state.height;
var collapseStyle = {
minHeight: minHeight,
maxHeight: opened ? undefined : height,
position: 'relative',
overflow: (opened ? undefined : 'hidden'),
transition: "ease-in-out " + animationDuration + "ms max-height",
};
var fadeStyle = {
height: fadeHeight,
width: '100%',
position: 'absolute',
bottom: 0,
opacity: opening ? 0 : 1,
background: "linear-gradient(" + transparentColor + ", " + fadeColor + " 80%)",
transition: "ease-in-out " + animationDuration + "ms opacity",
};
// Cast necessary otherwise types are too complex
var CastComponent = Component;
return (React.createElement(CastComponent, __assign({ ref: elementRef }, remainingProps, { className: classNames('clearfix collapse', open ? 'collapse-open' : null, className), style: collapseStyle }),
children,
fadeOut && !opened && (React.createElement("div", { className: "collapse-fade", style: fadeStyle }))));
};
exports.default = React.memo(Collapse);
//# sourceMappingURL=collapse.js.map