@ozen-ui/kit

Version:
React component library
24 lines (23 loc) • 1.86 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import { ArrowLeftIcon } from '@ozen-ui/icons';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn, polymorphicComponentWithRef } from '../../../../utils';
import { IconButton } from '../../../IconButtonNext';
import { useSidebarContext } from '../../SidebarContext';
import { SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS, SIDEBAR_SIZER_DEFAULT_TAG, } from './constants';
export var cnSidebarSizer = cn('SidebarSizer');
export var SidebarSizer = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'SidebarSizer',
    });
    var _a = props.as, as = _a === void 0 ? SIDEBAR_SIZER_DEFAULT_TAG : _a, className = props.className, _b = props.expandedVariants, expandedVariants = _b === void 0 ? SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS : _b, onClick = props.onClick, onChange = props.onChange, ariaLabel = props["aria-label"], other = __rest(props, ["as", "className", "expandedVariants", "onClick", "onChange", 'aria-label']);
    var variant = useSidebarContext().variant;
    var isExpanded = expandedVariants.includes(variant);
    return (React.createElement(IconButton, __assign({}, other, { as: as, ref: ref, size: "2xs", compressed: true, onClick: function (event) {
            onClick === null || onClick === void 0 ? void 0 : onClick(event);
            onChange === null || onChange === void 0 ? void 0 : onChange({ currentVariant: variant, collapsed: !isExpanded }, event);
        }, "aria-expanded": isExpanded, "aria-label": ariaLabel ? ariaLabel({ collapsed: !isExpanded }) : undefined, className: cnSidebarSizer({ expanded: isExpanded }, [className]), icon: React.createElement(ArrowLeftIcon, { className: cnSidebarSizer('Icon') }) })));
});
SidebarSizer.displayName = 'SidebarSizer';