wix-style-react
Version:
wix-style-react
66 lines • 3.97 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import { ChevronRight } from '@wix/wix-ui-icons-common';
import { st, classes } from './SidebarSectionItem.st.css';
import { dataHooks } from './constants';
import Text from '../Text';
import { SidebarContext } from '../Sidebar/SidebarAPI';
import { sidebarSkins } from '../Sidebar/constants';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
/** 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(WixStyleReactContext.Consumer, null, ({ sidebarExperimentCollapsible, newColorsBranding }) => (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,
sidebarExperimentCollapsible,
newColorsBranding,
}, 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';
SidebarSectionItem.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** An element to appear at the beginning of the text */
prefix: PropTypes.node,
/** An element to appear at the end of the text */
suffix: PropTypes.node,
/** Indicates whether to display the item as selected */
selected: PropTypes.bool,
/** Indicates whether to display the item as disabled */
disabled: PropTypes.bool,
/** Indicates whether to display an icon for drilling in on hover */
drillable: PropTypes.bool,
/** Indicates whether to display a low-opacity icon for drilling even without hover, relevant only when drillable is true */
alwaysDisplayChevron: PropTypes.bool,
/** A callback to be triggered on click */
onClick: PropTypes.func,
/** unique identifier per item, used to mark it for navigation and selection */
itemKey: PropTypes.string,
};
export default withFocusable(SidebarSectionItem);
//# sourceMappingURL=SidebarSectionItem.js.map