@ozen-ui/kit
Version:
React component library
49 lines (48 loc) • 4.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Collapse = exports.cnCollapse = void 0;
var tslib_1 = require("tslib");
require("./Collapse.css");
var react_1 = tslib_1.__importStar(require("react"));
var react_transition_group_1 = require("react-transition-group");
var useMultiRef_1 = require("../../hooks/useMultiRef");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var isString_1 = require("../../utils/isString");
var number_1 = require("../../utils/number");
var constants_1 = require("./constants");
exports.cnCollapse = (0, classname_1.cn)('Collapse');
exports.Collapse = (0, react_1.forwardRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Collapse' });
var _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? constants_1.DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? constants_1.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 = tslib_1.__rest(props, ["collapsedSize", "timeout", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "style"]);
var rootRef = (0, react_1.useRef)(null);
// Для высчитывания высоты Collapse
var collapseInnerRef = (0, react_1.useRef)(null);
var collapseRef = (0, useMultiRef_1.useMultiRef)([ref, rootRef]);
var collapsedSize = (0, react_1.useMemo)(function () {
if (!collapsedSizeProp ||
(!(0, isString_1.isString)(collapsedSizeProp) && !(0, number_1.isNumber)(collapsedSizeProp))) {
return '0px';
}
return (0, isString_1.isString)(collapsedSizeProp)
? collapsedSizeProp
: "".concat(collapsedSizeProp, "px");
}, [collapsedSizeProp]);
return (react_1.default.createElement(react_transition_group_1.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: tslib_1.__assign({}, (collapsedSize === '0px' && { visibility: 'hidden' })),
};
return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, exports.cnCollapse)({ animation: state }, [className]), style: tslib_1.__assign(tslib_1.__assign({ height: collapsedSize, transitionDuration: "".concat(timeout, "ms") }, transitionStyles[state]), style) }, other, { ref: collapseRef }),
react_1.default.createElement("div", { ref: collapseInnerRef, className: (0, exports.cnCollapse)('Inner') }, children)));
}));
});
exports.Collapse.displayName = 'Collapse';