wix-style-react
Version:
250 lines (219 loc) • 9.45 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["selected", "hovered"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import { st, classes } from './ListItemSelect.st.css';
import { FontUpgradeContext } from '../FontUpgrade/context';
import Checkbox from '../Checkbox';
import Box from '../Box';
import HighlightContext from '../InputWithOptions/HighlightContext';
import { dataHooks } from './constants';
import Highlighter from '../Highlighter/Highlighter';
export var SIZES = {
small: 'small',
medium: 'medium'
};
/** ListItemSelect description */
var ListItemSelect = /*#__PURE__*/function (_React$PureComponent) {
_inherits(ListItemSelect, _React$PureComponent);
var _super = _createSuper(ListItemSelect);
function ListItemSelect() {
_classCallCheck(this, ListItemSelect);
return _super.apply(this, arguments);
}
_createClass(ListItemSelect, [{
key: "render",
value: function render() {
var _this = this;
var _this$props = this.props,
dataHook = _this$props.dataHook,
className = _this$props.className,
checkbox = _this$props.checkbox,
selected = _this$props.selected,
highlighted = _this$props.highlighted,
disabled = _this$props.disabled,
onClick = _this$props.onClick,
size = _this$props.size;
return /*#__PURE__*/React.createElement(FontUpgradeContext.Consumer, null, function (_ref) {
var isMadefor = _ref.active;
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, {
checkbox: checkbox,
selected: selected,
highlighted: highlighted,
disabled: disabled
}, className),
"data-hook": dataHook,
"data-selected": selected,
onClick: disabled ? undefined : onClick
}, checkbox ? /*#__PURE__*/React.createElement(Checkbox, {
dataHook: dataHooks.CHECKBOX,
className: classes.fullWidthContent,
size: size,
checked: selected,
disabled: disabled
}, _this._renderContent({
isMadefor: isMadefor
})) : _this._renderContent({
isMadefor: isMadefor
}));
});
}
}, {
key: "_renderTitle",
value: function _renderTitle(textProps) {
var title = this.props.title;
var titleElement = /*#__PURE__*/React.createElement(Text, _extends({
className: classes.title,
dataHook: dataHooks.TITLE
}, textProps), title);
return /*#__PURE__*/React.createElement(HighlightContext.Consumer, null, function (_ref2) {
var highlight = _ref2.highlight,
match = _ref2.match;
return highlight ? /*#__PURE__*/React.createElement(Highlighter, {
match: match
}, titleElement) : titleElement;
});
}
}, {
key: "_renderContent",
value: function _renderContent(_ref3) {
var isMadefor = _ref3.isMadefor;
var _this$props2 = this.props,
checkbox = _this$props2.checkbox,
prefix = _this$props2.prefix,
subtitle = _this$props2.subtitle,
suffix = _this$props2.suffix,
selected = _this$props2.selected,
disabled = _this$props2.disabled,
size = _this$props2.size,
ellipsis = _this$props2.ellipsis;
var textProps = {
tagName: 'div',
size: size,
ellipsis: ellipsis,
showDelay: 300,
skin: disabled ? 'disabled' : 'standard',
weight: isMadefor || checkbox ? 'thin' : 'normal',
light: selected && !checkbox
};
var secondaryTextProps = _objectSpread(_objectSpread({}, textProps), {}, {
light: !disabled,
secondary: !selected || checkbox
});
return /*#__PURE__*/React.createElement(Box, {
width: "100%",
className: classes.textsWrapper
}, prefix && /*#__PURE__*/React.createElement(Text, _extends({
className: st(classes.prefix, {
subtitle: Boolean(subtitle)
}),
dataHook: dataHooks.PREFIX
}, textProps, {
ellipsis: false
}), prefix), /*#__PURE__*/React.createElement("div", {
className: st(classes.titleWrapper, {
subtitle: Boolean(subtitle)
})
}, this._renderTitle(textProps), subtitle && /*#__PURE__*/React.createElement(Text, _extends({
className: classes.subtitle,
dataHook: dataHooks.SUBTITLE,
secondary: true
}, secondaryTextProps, {
size: SIZES.small
}), subtitle)), suffix && /*#__PURE__*/React.createElement(Text, _extends({
dataHook: dataHooks.SUFFIX,
className: classes.suffix
}, secondaryTextProps), suffix));
}
}]);
return ListItemSelect;
}(React.PureComponent);
_defineProperty(ListItemSelect, "displayName", 'ListItemSelect');
_defineProperty(ListItemSelect, "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,
/** If true, a checkbox will be shown */
checkbox: PropTypes.bool,
/** Any prefix */
prefix: PropTypes.node,
/** Title of the list item */
title: PropTypes.node,
/** Text of the list item subtitle */
subtitle: PropTypes.node,
/** Any suffix */
suffix: PropTypes.node,
/** If true, the item is selected */
selected: PropTypes.bool,
/** If true, the item is highlighted */
highlighted: PropTypes.bool,
/** If true, the item is disabled */
disabled: PropTypes.bool,
/** Callback function triggered when list item is clicked */
onClick: PropTypes.func,
/** Changing text size */
size: PropTypes.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.bool
});
_defineProperty(ListItemSelect, "defaultProps", {
checkbox: false,
selected: false,
highlighted: false,
ellipsis: false,
size: SIZES.medium,
dataHook: 'list-item-select'
});
export default ListItemSelect;
export var listItemSelectBuilder = function listItemSelectBuilder(_ref4) {
var id = _ref4.id,
className = _ref4.className,
checkbox = _ref4.checkbox,
prefix = _ref4.prefix,
title = _ref4.title,
label = _ref4.label,
subtitle = _ref4.subtitle,
suffix = _ref4.suffix,
disabled = _ref4.disabled,
size = _ref4.size,
ellipsis = _ref4.ellipsis,
dataHook = _ref4.dataHook;
return {
id: id,
disabled: disabled,
overrideOptionStyle: true,
label: label,
value: function value(_ref5) {
var selected = _ref5.selected,
hovered = _ref5.hovered,
rest = _objectWithoutProperties(_ref5, _excluded);
return /*#__PURE__*/React.createElement(ListItemSelect, _extends({
dataHook: dataHook,
className: className,
checkbox: checkbox,
prefix: prefix,
title: title,
subtitle: subtitle,
suffix: suffix,
size: size,
ellipsis: ellipsis,
selected: selected,
highlighted: hovered
}, rest));
}
};
};