wix-style-react
Version:
wix-style-react
288 lines (286 loc) • 9.52 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.listItemSelectBuilder = exports.default = exports.SIZES = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Text = _interopRequireDefault(require("../Text"));
var _ListItemSelectSt = require("./ListItemSelect.st.css");
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Box = _interopRequireDefault(require("../Box"));
var _HighlightContext = _interopRequireDefault(require("../InputWithOptions/HighlightContext"));
var _constants = require("./constants");
var _Highlighter = _interopRequireDefault(require("../Highlighter/Highlighter"));
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
var _excluded = ["selected", "hovered"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ListItemSelect/ListItemSelect.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SIZES = exports.SIZES = {
small: 'small',
medium: 'medium'
};
/** ListItemSelect description */
class ListItemSelect extends _react.default.PureComponent {
render() {
var {
dataHook,
className,
checkbox,
selected,
highlighted,
disabled,
onClick,
size
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.root, {
checkbox,
selected,
highlighted,
disabled,
size
}, className),
"data-hook": dataHook,
"data-selected": selected,
onClick: disabled ? undefined : onClick,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 7
}
}, checkbox ? /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
dataHook: _constants.dataHooks.CHECKBOX,
className: _ListItemSelectSt.classes.fullWidthContent,
size: size,
checked: selected,
disabled: disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 11
}
}, this._renderContent()) : this._renderContent());
}
_renderTitle(textProps) {
var {
title
} = this.props;
var titleElement = /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
className: _ListItemSelectSt.classes.title,
dataHook: _constants.dataHooks.TITLE
}, textProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 7
}
}), title);
return /*#__PURE__*/_react.default.createElement(_HighlightContext.default.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 7
}
}, _ref => {
var {
highlight,
match
} = _ref;
return highlight ? /*#__PURE__*/_react.default.createElement(_Highlighter.default, {
match: match,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 13
}
}, titleElement) : titleElement;
});
}
_renderContent() {
var {
checkbox,
prefix,
subtitle,
suffix,
selected,
disabled,
size,
ellipsis,
tooltipProps
} = this.props;
var textProps = {
tagName: 'div',
size,
ellipsis,
tooltipProps,
showDelay: 300,
skin: disabled ? 'disabled' : 'standard',
weight: 'thin',
light: selected && !checkbox
};
var secondaryTextProps = _objectSpread(_objectSpread({}, textProps), {}, {
light: !disabled,
secondary: !selected || checkbox
});
return /*#__PURE__*/_react.default.createElement(_Box.default, {
width: "100%",
className: _ListItemSelectSt.classes.textsWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 7
}
}, prefix && /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.prefix, {
subtitle: Boolean(subtitle)
}),
dataHook: _constants.dataHooks.PREFIX
}, textProps, {
ellipsis: false,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 11
}
}), prefix), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.titleWrapper, {
subtitle: Boolean(subtitle)
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 9
}
}, this._renderTitle(textProps), subtitle && /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
className: _ListItemSelectSt.classes.subtitle,
dataHook: _constants.dataHooks.SUBTITLE,
secondary: true
}, secondaryTextProps, {
size: SIZES.small,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 13
}
}), subtitle)), suffix && /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
dataHook: _constants.dataHooks.SUFFIX,
className: _ListItemSelectSt.classes.suffix
}, secondaryTextProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 11
}
}), suffix));
}
}
ListItemSelect.displayName = 'ListItemSelect';
ListItemSelect.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** A css class to be applied to the component's root element */
className: _propTypes.default.string,
/** If true, a checkbox will be shown */
checkbox: _propTypes.default.bool,
/** Any prefix */
prefix: _propTypes.default.node,
/** Title of the list item */
title: _propTypes.default.node,
/** Text of the list item subtitle */
subtitle: _propTypes.default.node,
/** Any suffix */
suffix: _propTypes.default.node,
/** If true, the item is selected */
selected: _propTypes.default.bool,
/** If true, the item is highlighted */
highlighted: _propTypes.default.bool,
/** If true, the item is disabled */
disabled: _propTypes.default.bool,
/** Allows to pass all common tooltip props.
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
tooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
/** Callback function triggered when list item is clicked */
onClick: _propTypes.default.func,
/** Changing text size */
size: _propTypes.default.oneOf(Object.keys(SIZES)),
/** If true, long text won't break into more than one line and will be terminated with an ellipsis */
ellipsis: _propTypes.default.bool
};
ListItemSelect.defaultProps = {
checkbox: false,
selected: false,
highlighted: false,
ellipsis: false,
size: SIZES.medium,
dataHook: 'list-item-select'
};
var _default = exports.default = ListItemSelect;
var listItemSelectBuilder = _ref2 => {
var {
id,
className,
checkbox,
prefix,
title,
label,
subtitle,
suffix,
disabled,
size,
ellipsis,
dataHook,
tooltipProps
} = _ref2;
return {
id,
disabled,
overrideOptionStyle: true,
label,
value: _ref3 => {
var {
selected,
hovered
} = _ref3,
rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
return /*#__PURE__*/_react.default.createElement(ListItemSelect, (0, _extends2.default)({
dataHook: dataHook,
className: className,
checkbox: checkbox,
prefix: prefix,
title: title,
subtitle: subtitle,
suffix: suffix,
size: size,
ellipsis: ellipsis,
selected: selected,
highlighted: hovered,
tooltipProps: tooltipProps
}, rest, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 5
}
}));
}
};
};
exports.listItemSelectBuilder = listItemSelectBuilder;
//# sourceMappingURL=ListItemSelect.js.map