wix-style-react
Version:
wix-style-react
318 lines (316 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.listItemActionBuilder = exports.ListItemAction = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ListItemActionSt = require("./ListItemAction.st.css");
var _constants = require("./constants");
var _Text = _interopRequireDefault(require("../Text"));
var _Box = _interopRequireDefault(require("../Box"));
var _Focusable = require("../common/Focusable");
var _context = require("../WixStyleReactProvider/context");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _excluded = ["dataHook", "disabled", "skin", "prefixIcon", "onClick", "focusableOnFocus", "focusableOnBlur", "as", "tabIndex", "onKeyDown", "autoFocus", "highlighted", "className", "subtitle", "suffix", "suffixIcon"],
_excluded2 = ["selected", "hovered", "ellipsis", "title", "shouldFocusWithoutScroll"],
_excluded3 = ["title", "prefixIcon", "onClick", "id", "disabled", "skin", "size", "dataHook", "as", "tabIndex", "autoFocus", "className", "ellipsis", "subtitle", "suffix"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ListItemAction/ListItemAction.js";
/** ListItemAction */
class ListItemActionComponent extends _react.default.PureComponent {
constructor() {
super(...arguments);
this._renderText = () => {
var {
title,
size,
ellipsis,
tooltipModifiers,
subtitle,
disabled
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Box.default, {
direction: "vertical",
className: _ListItemActionSt.classes.textBox,
width: "100%",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
className: (0, _ListItemActionSt.st)(_ListItemActionSt.classes.text, {
subtitle: Boolean(subtitle)
}),
dataHook: _constants.dataHooks.title,
size: size,
ellipsis: ellipsis,
weight: "thin",
placement: "right",
skin: disabled ? 'disabled' : 'standard'
}, tooltipModifiers, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 9
}
}), title), subtitle && /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants.dataHooks.subtitle,
secondary: true,
size: "small",
ellipsis: ellipsis,
weight: "thin",
placement: "right",
skin: disabled ? 'disabled' : 'standard',
light: !disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 11
}
}, subtitle));
};
this._renderPrefix = () => {
var {
prefixIcon,
size,
subtitle
} = this.props;
return /*#__PURE__*/_react.default.cloneElement(prefixIcon, {
size: size === 'medium' ? 24 : 18,
className: (0, _ListItemActionSt.st)(_ListItemActionSt.classes.prefixIcon, {
subtitle: Boolean(subtitle)
}),
'data-hook': _constants.dataHooks.prefixIcon
});
};
// TODO: Deprecate this method
this._renderSuffix = () => {
var {
suffix,
size,
ellipsis,
disabled
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: _ListItemActionSt.classes.suffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants.dataHooks.suffix,
secondary: true,
size: size,
light: !disabled,
weight: "thin",
skin: disabled ? 'disabled' : 'standard',
ellipsis: ellipsis,
children: suffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 9
}
}));
};
this._renderSuffixIcon = () => {
var {
suffixIcon,
size,
subtitle
} = this.props;
return /*#__PURE__*/_react.default.cloneElement(suffixIcon, {
size: size === 'medium' ? 24 : 18,
className: (0, _ListItemActionSt.st)(_ListItemActionSt.classes.suffixIcon, {
subtitle: Boolean(subtitle)
}),
'data-hook': _constants.dataHooks.suffixIcon
});
};
}
componentDidMount() {
if (this.props.skin === 'dark') {
(0, _deprecationLog.default)('<ListItemAction/> - skin="dark" is deprecated and will be removed in next major version, please use skin="standard" instead');
}
}
focus() {
if (this.innerComponentRef) {
var scrollOptions = this.props.shouldFocusWithoutScroll ? {
preventScroll: true
} : {};
this.innerComponentRef.focus(scrollOptions);
}
}
render() {
var _this$props = this.props,
{
dataHook,
disabled,
skin,
prefixIcon,
onClick,
focusableOnFocus,
focusableOnBlur,
as: Component,
tabIndex,
onKeyDown,
autoFocus,
highlighted,
className,
subtitle,
suffix,
suffixIcon
} = _this$props,
others = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
// since we're spreading the "rest" props, we don't want to pass
var {
selected,
hovered,
ellipsis,
title,
shouldFocusWithoutScroll
} = others,
rest = (0, _objectWithoutProperties2.default)(others, _excluded2);
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 196,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
className: (0, _ListItemActionSt.st)(_ListItemActionSt.classes.root, {
skin,
disabled,
highlighted,
ellipsis,
newColorsBranding
}, className),
"data-skin": skin,
"data-disabled": disabled,
tabIndex: tabIndex,
ref: _ref2 => this.innerComponentRef = _ref2,
autoFocus: autoFocus,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
type: Component === 'button' ? 'button' : undefined,
"data-hook": dataHook,
onKeyDown: !disabled ? onKeyDown : undefined,
onClick: !disabled ? onClick : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 11
}
}), prefixIcon && this._renderPrefix(), this._renderText(), suffix && this._renderSuffix(), suffixIcon && this._renderSuffixIcon());
});
}
}
ListItemActionComponent.displayName = 'ListItemAction';
ListItemActionComponent.propTypes = {
/** render as some other element */
as: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.string]),
/** Data attribute for testing purposes */
dataHook: _propTypes.default.string,
/** Item theme (standard, dark, destructive) */
skin: _propTypes.default.oneOf(['standard', 'dark', 'destructive']),
/** Text Size (small, medium) */
size: _propTypes.default.oneOf(['small', 'medium']),
/** Prefix Icon */
prefixIcon: _propTypes.default.node,
/** Suffix Node */
suffix: _propTypes.default.node,
/** When present, it specifies that a button should automatically get focus when the page loads. */
autoFocus: _propTypes.default.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.default.bool,
/** Title */
title: _propTypes.default.string.isRequired,
/** If true, the item is highlighted */
highlighted: _propTypes.default.bool,
/** Disabled */
disabled: _propTypes.default.bool,
/** Tooltip floating modifiers */
tooltipModifiers: _propTypes.default.object,
/** On Click */
onClick: _propTypes.default.func,
/** Text of the list item subtitle */
subtitle: _propTypes.default.string,
/** Specifies whether page should be scrolled to the focused item */
shouldFocusWithoutScroll: _propTypes.default.bool
};
ListItemActionComponent.defaultProps = {
as: 'button',
skin: 'standard',
size: 'medium',
highlighted: false
};
var ListItemAction = exports.ListItemAction = (0, _Focusable.withFocusable)(ListItemActionComponent);
var listItemActionBuilder = _ref3 => {
var {
title,
prefixIcon,
onClick,
id,
disabled,
skin,
size,
dataHook,
as,
tabIndex,
autoFocus,
className,
ellipsis,
subtitle,
suffix
} = _ref3,
rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
return {
id,
disabled,
overrideOptionStyle: true,
value: _ref4 => {
var {
hovered
} = _ref4;
return /*#__PURE__*/_react.default.createElement(ListItemAction, (0, _extends2.default)({}, 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,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 5
}
}));
}
};
};
exports.listItemActionBuilder = listItemActionBuilder;
//# sourceMappingURL=ListItemAction.js.map