@wix/design-system
Version:
@wix/design-system
40 lines • 2.6 kB
JavaScript
import React from 'react';
import { withFocusable } from '../common/Focusable';
import { ChevronRight } from '@wix/wix-ui-icons-common';
import { st, classes } from './SidebarSectionItem.st.css.js';
import { dataHooks } from './constants';
import Text from '../Text';
import { SidebarContext } from '../Sidebar/SidebarAPI';
import { sidebarSkins } from '../Sidebar/constants';
/** An item for the section within the sidebar */
class SidebarSectionItem extends React.PureComponent {
render() {
const { dataHook, children, selected, disabled, drillable, alwaysDisplayChevron, prefix, suffix, onClick, className, focusableOnFocus, focusableOnBlur, itemKey, } = this.props;
return (React.createElement(SidebarContext.Consumer, null, context => {
const skin = (context && context.getSkin()) || sidebarSkins.dark;
return (React.createElement("button", { "data-hook": dataHook, "data-selected": selected, "data-always-display-chevron": alwaysDisplayChevron, onClick: e => {
if (!disabled) {
onClick && onClick(e);
}
if (!e.defaultPrevented) {
context && context.itemClicked(itemKey);
}
}, onFocus: focusableOnFocus, onBlur: focusableOnBlur, disabled: disabled, type: "button", tabIndex: "0", className: st(classes.root, {
selected,
disabled,
prefix: Boolean(prefix),
suffix: Boolean(suffix),
drillable,
skin,
alwaysDisplayChevron,
}, className) },
prefix && (React.createElement("span", { "data-hook": dataHooks.prefix, className: classes.prefix }, prefix)),
React.createElement("span", { className: classes.textWrapper, "data-hook": dataHooks.title },
React.createElement(Text, { className: classes.text, size: "small", weight: "normal", secondary: skin === sidebarSkins.light, light: skin === sidebarSkins.dark, skin: disabled ? 'disabled' : undefined }, children)),
!disabled && (suffix || drillable) && (React.createElement("span", { "data-hook": dataHooks.suffix, className: classes.suffix }, suffix || (React.createElement(ChevronRight, { "data-hook": dataHooks.chevronRight, className: classes.chevron }))))));
}));
}
}
SidebarSectionItem.displayName = 'SidebarSectionItem';
export default withFocusable(SidebarSectionItem);
//# sourceMappingURL=SidebarSectionItem.js.map