@ozen-ui/kit
Version:
React component library
46 lines (45 loc) • 4.08 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Collapse.css';
import React, { forwardRef, useRef, useMemo } from 'react';
import { Transition } from 'react-transition-group';
import { useMultiRef } from '../../hooks/useMultiRef';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { isString } from '../../utils/isString';
import { isNumber } from '../../utils/number';
import { DEFAULT_COLLAPSE_TIMEOUT, DEFAULT_COLLAPSED_SIZE } from './constants';
export var cnCollapse = cn('Collapse');
export var Collapse = forwardRef(function (inProps, ref) {
var props = useThemeProps({ props: inProps, name: 'Collapse' });
var _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? DEFAULT_COLLAPSE_TIMEOUT : _b, onEnter = props.onEnter, onEntering = props.onEntering, onEntered = props.onEntered, onExit = props.onExit, onExiting = props.onExiting, onExited = props.onExited, unmountOnClosed = props.unmountOnClosed, expanded = props.expanded, appear = props.appear, children = props.children, className = props.className, style = props.style, other = __rest(props, ["collapsedSize", "timeout", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "style"]);
var rootRef = useRef(null);
// Для высчитывания высоты Collapse
var collapseInnerRef = useRef(null);
var collapseRef = useMultiRef([ref, rootRef]);
var collapsedSize = useMemo(function () {
if (!collapsedSizeProp ||
(!isString(collapsedSizeProp) && !isNumber(collapsedSizeProp))) {
return '0px';
}
return isString(collapsedSizeProp)
? collapsedSizeProp
: "".concat(collapsedSizeProp, "px");
}, [collapsedSizeProp]);
return (React.createElement(Transition, { nodeRef: rootRef, timeout: timeout, in: expanded, unmountOnExit: unmountOnClosed, appear: appear, onEnter: function (isAppeared) { return onEnter === null || onEnter === void 0 ? void 0 : onEnter(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onEntering: function (isAppeared) { return onEntering === null || onEntering === void 0 ? void 0 : onEntering(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onEntered: function (isAppeared) { return onEntered === null || onEntered === void 0 ? void 0 : onEntered(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onExit: function () { return onExit === null || onExit === void 0 ? void 0 : onExit(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); }, onExiting: function () { return onExiting === null || onExiting === void 0 ? void 0 : onExiting(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); }, onExited: function () { return onExited === null || onExited === void 0 ? void 0 : onExited(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); } }, function (state) {
var _a, _b;
var transitionStyles = {
entering: {
height: (_a = collapseInnerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight,
},
entered: {
height: expanded
? 'auto'
: (_b = collapseInnerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight,
},
exited: __assign({}, (collapsedSize === '0px' && { visibility: 'hidden' })),
};
return (React.createElement("div", __assign({ className: cnCollapse({ animation: state }, [className]), style: __assign(__assign({ height: collapsedSize, transitionDuration: "".concat(timeout, "ms") }, transitionStyles[state]), style) }, other, { ref: collapseRef }),
React.createElement("div", { ref: collapseInnerRef, className: cnCollapse('Inner') }, children)));
}));
});
Collapse.displayName = 'Collapse';