wix-style-react
Version:
wix-style-react
59 lines • 3.55 kB
JavaScript
import React, { memo, useContext } from 'react';
import { SidebarNextContext } from '../SidebarNext/SidebarNextContext';
import { useFocusRing } from '../providers/useFocusRing/useFocusRing';
import { dataHooks, skins } from './constants';
import { classes, st } from './SidebarItemNext.st.css';
import Transition from '../Transition';
import Text from '../Text';
const SidebarItemButtonNext = memo(props => {
const context = useContext(SidebarNextContext);
const { skin, level, selectedPath, inert, parent, closeQuickNav, legacy, minimized, } = context;
const { as = 'button', role = as === 'a' ? 'link' : 'button', // FIXME: check original code, this is weird
// @ts-ignore
href, // FIXME: from intersection
dataHook, children, disabled, onClick, className, itemKey, suffix, prefix, isInQuickNavigation, ...asComponentProps } = props;
const { isFocusVisible, focusProps } = useFocusRing();
const Component = as;
const selected = !!selectedPath?.length && selectedPath[selectedPath.length - 1] === itemKey;
const inSelection = itemKey !== undefined && !!selectedPath?.includes(itemKey);
const htmlHref = disabled ? undefined : href;
const tabIndex = inert ? -1 : 0;
const textSize = level === 1 ? 'small' : 'tiny';
const inContextMenu = parent === 'inContextMenu';
const buttonClassName = st(classes.root, {
selected: selected || inSelection,
disabled,
skin,
inContextMenu,
hasPrefix: !!prefix,
level,
legacy,
isFocusVisible,
}, className);
const handleClick = (event) => {
if (!disabled) {
closeQuickNav?.();
// @ts-ignore
onClick?.(event, itemKey); // FIXME: itemKey was not typed in props
}
};
return (
// @ts-ignore
React.createElement(Component, { ...focusProps, className: buttonClassName, "data-hook": dataHook, type: "button", role: role, href: htmlHref, disabled: href ? false : disabled, tabIndex: tabIndex, onClick: handleClick, "aria-current": selected ? 'page' : undefined, "data-selected": selected, "data-disabled": disabled, "data-text-size": textSize, "data-skin": skin, ...asComponentProps },
level === 3 && !inContextMenu && React.createElement("hr", { className: classes.divider }),
prefix && (React.createElement("span", { className: classes.prefix, "data-hook": dataHooks.prefix, "aria-hidden": true }, prefix)),
React.createElement(Transition, { className: classes.textWrapper, show: !minimized, exitAnimation: {
fadeOut: {
duration: 'fast01',
easing: 'exitEasing',
},
} },
React.createElement(Text, { dataHook: dataHooks.title, className: classes.text, size: textSize, weight: "normal", secondary: skin === skins.light, light: skin === skins.dark, skin: disabled ? 'disabled' : 'standard', showTooltip: false }, children)),
!disabled && suffix && !minimized && (React.createElement("div", { className: classes.suffixContainer, "aria-hidden": true }, Array.isArray(suffix)
? suffix.slice(0, 2).map(renderSuffix)
: renderSuffix(suffix, 0)))));
});
const renderSuffix = (suffix, index) => (React.createElement("span", { key: `${dataHooks.suffix}-${index}`, "data-hook": dataHooks.suffix, className: classes.suffix }, suffix));
SidebarItemButtonNext.displayName = 'SidebarItemButtonNext';
export default SidebarItemButtonNext;
//# sourceMappingURL=SidebarItemButtonNext.js.map