chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
73 lines (70 loc) • 3.59 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
require("./animation-wrapper.css");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* The AnimationWrapper provides an eye-catching initial animation to its
* children.
*/
const AnimationWrapper = _ref => {
let {
children = /*#__PURE__*/_react.default.createElement("div", null),
animationTime = 0.2,
setAutoTime = 400
} = _ref;
const [height, setHeight] = (0, _react.useState)(0);
const childrenRef = (0, _react.useRef)(0);
(0, _react.useEffect)(() => {
const item = document.getElementById('animated__content');
const styles = getComputedStyle(item);
const itemMargin = parseInt(styles.marginTop, 10) + parseInt(styles.marginBottom, 10);
const itemHeight = item.offsetHeight + itemMargin;
const [element] = Array.from(childrenRef.current.children);
const childrenMargin = parseInt(window.getComputedStyle(element).marginTop, 10);
setHeight(itemHeight + childrenMargin);
const timeout = setTimeout(() => {
item.parentElement.style.height = `${itemHeight + childrenMargin}px`;
item.parentElement.style.opacity = '1';
setTimeout(() => {
item.parentElement.style.height = 'auto';
}, setAutoTime || itemHeight ? (itemHeight + childrenMargin) / 5 * 200 : 400);
}, 300);
return () => clearTimeout(timeout);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return /*#__PURE__*/_react.default.createElement("div", {
className: "animation__wrapper",
style: {
transition: `height ${animationTime || height / 40 * 0.2}s, opacity ${animationTime || height / 40 * 0.3}s `
}
}, /*#__PURE__*/_react.default.createElement("div", {
ref: childrenRef,
id: "animated__content"
}, children));
};
AnimationWrapper.propTypes = {
/**
* The children that should be animated.
*/
children: _propTypes.default.node,
/**
* The duration of the animation in seconds.
*/
animationTime: _propTypes.default.number,
/**
* The time until the height of the content is set to auto to reflect
* changes in children size.
*/
setAutoTime: _propTypes.default.number
};
var _default = AnimationWrapper;
exports.default = _default;
//# sourceMappingURL=AnimationWrapper.js.map