wix-style-react
Version:
wix-style-react
117 lines • 6.46 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './ListItemAction.st.css';
import { dataHooks } from './constants';
import Text from '../Text';
import Box from '../Box';
import { withFocusable } from '../common/Focusable';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import deprecationLog from '../utils/deprecationLog';
/** ListItemAction */
class ListItemActionComponent extends React.PureComponent {
constructor() {
super(...arguments);
this._renderText = () => {
const { title, size, ellipsis, tooltipModifiers, subtitle, disabled } = this.props;
return (React.createElement(Box, { direction: "vertical", className: classes.textBox, width: "100%" },
React.createElement(Text, { className: st(classes.text, { subtitle: Boolean(subtitle) }), dataHook: dataHooks.title, size: size, ellipsis: ellipsis, weight: "thin", placement: "right", skin: disabled ? 'disabled' : 'standard', ...tooltipModifiers }, title),
subtitle && (React.createElement(Text, { dataHook: dataHooks.subtitle, secondary: true, size: "small", ellipsis: ellipsis, weight: "thin", placement: "right", skin: disabled ? 'disabled' : 'standard', light: !disabled }, subtitle))));
};
this._renderPrefix = () => {
const { prefixIcon, size, subtitle } = this.props;
return React.cloneElement(prefixIcon, {
size: size === 'medium' ? 24 : 18,
className: st(classes.prefixIcon, { subtitle: Boolean(subtitle) }),
'data-hook': dataHooks.prefixIcon,
});
};
// TODO: Deprecate this method
this._renderSuffix = () => {
const { suffix, size, ellipsis, disabled } = this.props;
return (React.createElement("div", { className: classes.suffix },
React.createElement(Text, { dataHook: dataHooks.suffix, secondary: true, size: size, light: !disabled, weight: "thin", skin: disabled ? 'disabled' : 'standard', ellipsis: ellipsis, children: suffix })));
};
this._renderSuffixIcon = () => {
const { suffixIcon, size, subtitle } = this.props;
return React.cloneElement(suffixIcon, {
size: size === 'medium' ? 24 : 18,
className: st(classes.suffixIcon, { subtitle: Boolean(subtitle) }),
'data-hook': dataHooks.suffixIcon,
});
};
}
componentDidMount() {
if (this.props.skin === 'dark') {
deprecationLog('<ListItemAction/> - skin="dark" is deprecated and will be removed in next major version, please use skin="standard" instead');
}
}
focus() {
if (this.innerComponentRef) {
const scrollOptions = this.props.shouldFocusWithoutScroll
? { preventScroll: true }
: {};
this.innerComponentRef.focus(scrollOptions);
}
}
render() {
const { dataHook, disabled, skin, prefixIcon, onClick, focusableOnFocus, focusableOnBlur, as: Component, tabIndex, onKeyDown, autoFocus, highlighted, className, subtitle, suffix, suffixIcon, ...others } = this.props;
// since we're spreading the "rest" props, we don't want to pass
const { selected, hovered, ellipsis, title, shouldFocusWithoutScroll, ...rest } = others;
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement(Component, { ...rest, className: st(classes.root, { skin, disabled, highlighted, ellipsis, newColorsBranding }, className), "data-skin": skin, "data-disabled": disabled, tabIndex: tabIndex, ref: ref => (this.innerComponentRef = ref), autoFocus: autoFocus, onFocus: focusableOnFocus, onBlur: focusableOnBlur, type: Component === 'button' ? 'button' : undefined, "data-hook": dataHook, onKeyDown: !disabled ? onKeyDown : undefined, onClick: !disabled ? onClick : undefined },
prefixIcon && this._renderPrefix(),
this._renderText(),
suffix && this._renderSuffix(),
suffixIcon && this._renderSuffixIcon()))));
}
}
ListItemActionComponent.displayName = 'ListItemAction';
ListItemActionComponent.propTypes = {
/** render as some other element */
as: PropTypes.oneOfType([
PropTypes.func,
PropTypes.object,
PropTypes.string,
]),
/** Data attribute for testing purposes */
dataHook: PropTypes.string,
/** Item theme (standard, dark, destructive) */
skin: PropTypes.oneOf(['standard', 'dark', 'destructive']),
/** Text Size (small, medium) */
size: PropTypes.oneOf(['small', 'medium']),
/** Prefix Icon */
prefixIcon: PropTypes.node,
/** Suffix Node */
suffix: PropTypes.node,
/** When present, it specifies that a button should automatically get focus when the page loads. */
autoFocus: PropTypes.bool,
/** should the text get ellipsed with tooltip, or should it get broken into lines when it reaches the end of its container */
ellipsis: PropTypes.bool,
/** Title */
title: PropTypes.string.isRequired,
/** If true, the item is highlighted */
highlighted: PropTypes.bool,
/** Disabled */
disabled: PropTypes.bool,
/** Tooltip floating modifiers */
tooltipModifiers: PropTypes.object,
/** On Click */
onClick: PropTypes.func,
/** Text of the list item subtitle */
subtitle: PropTypes.string,
/** Specifies whether page should be scrolled to the focused item */
shouldFocusWithoutScroll: PropTypes.bool,
};
ListItemActionComponent.defaultProps = {
as: 'button',
skin: 'standard',
size: 'medium',
highlighted: false,
};
export const ListItemAction = withFocusable(ListItemActionComponent);
export const listItemActionBuilder = ({ title, prefixIcon, onClick, id, disabled, skin, size, dataHook, as, tabIndex, autoFocus, className, ellipsis, subtitle, suffix, ...rest }) => ({
id,
disabled,
overrideOptionStyle: true,
value: ({ hovered }) => (React.createElement(ListItemAction, { ...rest, ellipsis: ellipsis, className: className, autoFocus: autoFocus, tabIndex: tabIndex, as: as, onClick: onClick, dataHook: dataHook, title: title, prefixIcon: prefixIcon, skin: skin, size: size, highlighted: hovered, disabled: disabled, subtitle: subtitle, suffix: suffix })),
});
//# sourceMappingURL=ListItemAction.js.map