@ozen-ui/kit
Version:
React component library
51 lines (50 loc) • 4.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarCollapsibleItem = exports.cnSidebarCollapsibleItem = void 0;
var tslib_1 = require("tslib");
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 utils_1 = require("../../../../utils");
var Stack_1 = require("../../../Stack");
var SidebarContext_1 = require("../../SidebarContext");
var constants_1 = require("./constants");
var hooks_1 = require("./hooks");
exports.cnSidebarCollapsibleItem = (0, utils_1.cn)('SidebarCollapsibleItem');
exports.SidebarCollapsibleItem = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'SidebarCollapsibleItem',
});
var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, contentFullWidth = props.contentFullWidth, other = tslib_1.__rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter", "contentFullWidth"]);
var _e = (0, SidebarContext_1.useSidebarContext)(), variant = _e.variant, size = _e.size;
var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
var internalRef = (0, react_1.useRef)(null);
var itemRef = (0, useMultiRef_1.useMultiRef)([ref, internalRef]);
var fixedRef = (0, react_1.useRef)(null);
var fixedRendered = (0, utils_1.isFunction)(fixed)
? (0, utils_1.renderContent)({
content: fixed,
props: { collapsed: isCollapsed },
})
: fixed;
var _f = (0, hooks_1.useSidebarCollapsibleItemAnimation)({
autoCenter: autoCenter,
ref: internalRef,
fixedRef: fixedRef,
isCollapsed: isCollapsed,
}), onExit = _f.onExit, onEnter = _f.onEnter, onTransitionEnd = _f.onTransitionEnd, hasMarginAutoClass = _f.hasMarginAutoClass;
return (react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 120 }, appear: true, onEnter: onEnter, onExit: onExit, onEntered: onTransitionEnd, onExited: onTransitionEnd },
react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({}, other, { ref: itemRef, as: as, className: (0, exports.cnSidebarCollapsibleItem)({ collapsed: isCollapsed, animated: animated, center: hasMarginAutoClass }, [className]), justify: justify }),
react_1.default.createElement("div", { ref: fixedRef, className: (0, exports.cnSidebarCollapsibleItem)('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('ContentWrapper', [
classNames === null || classNames === void 0 ? void 0 : classNames.contentWrapper,
]), style: (0, utils_1.generateCSSVariables)({
'sidebar-collapsible-item-content-width': "".concat(contentFullWidth[size], "px"),
}) },
react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('Content', [
classNames === null || classNames === void 0 ? void 0 : classNames.content,
]) }, children)))));
});
exports.SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';