wix-style-react
Version:
271 lines (222 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _context = require("../../WixStyleReactProvider/context");
var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
var _ToggleSwitch = _interopRequireDefault(require("../../ToggleSwitch"));
var _Radio = _interopRequireDefault(require("../../Radio"));
var _Heading = _interopRequireDefault(require("../../Heading"));
var _Text = _interopRequireDefault(require("../../Text"));
var _Collapse = _interopRequireDefault(require("../../Collapse"));
var _Divider = _interopRequireDefault(require("../../Divider"));
var _constants = require("../constants");
var _StringUtils = require("../../utils/StringUtils");
var _ItemSt = require("./Item.st.css");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
var SelectableAccordionItem = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(SelectableAccordionItem, _React$PureComponent);
var _super = _createSuper(SelectableAccordionItem);
function SelectableAccordionItem() {
var _this;
(0, _classCallCheck2["default"])(this, SelectableAccordionItem);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
hovered: false
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onChange", function () {
var _this$props = _this.props,
idx = _this$props.idx,
type = _this$props.type,
open = _this$props.open,
onChange = _this$props.onChange,
disabled = _this$props.disabled;
if (disabled) {
return;
}
if (type === 'radio' && open) {
return;
}
onChange(idx, !open);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseEnter", function () {
return _this.setState({
hovered: true
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseLeave", function () {
return _this.setState({
hovered: false
});
});
return _this;
}
(0, _createClass2["default"])(SelectableAccordionItem, [{
key: "_renderSelector",
value: function _renderSelector() {
var _this$props2 = this.props,
type = _this$props2.type,
open = _this$props2.open,
disabled = _this$props2.disabled;
var selector = null;
switch (type) {
case _constants.TYPES.CHECKBOX:
selector = /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
checked: open,
onChange: this._onChange,
disabled: disabled
});
break;
case _constants.TYPES.RADIO:
selector = /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
checked: open,
onChange: this._onChange,
disabled: disabled
});
break;
case _constants.TYPES.TOGGLE:
selector = /*#__PURE__*/_react["default"].createElement(_ToggleSwitch["default"], {
checked: open,
onChange: this._onChange,
size: "small",
disabled: disabled
});
break;
}
return /*#__PURE__*/_react["default"].createElement("span", {
className: _ItemSt.classes.selectorToggle,
onClick: function onClick(e) {
return e.stopPropagation();
}
}, selector);
}
}, {
key: "_renderTitle",
value: function _renderTitle(_ref) {
var reducedSpacingAndImprovedLayout = _ref.reducedSpacingAndImprovedLayout;
var title = this.props.title;
if ((0, _StringUtils.isString)(title)) {
if (reducedSpacingAndImprovedLayout) {
return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
weight: "normal",
size: "medium"
}, title);
} else {
return /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
ellipsis: true,
appearance: "H4"
}, title);
}
} else {
return title;
}
}
}, {
key: "_renderContent",
value: function _renderContent() {
var content = this.props.content;
return (0, _StringUtils.isString)(content) ? /*#__PURE__*/_react["default"].createElement(_Text["default"], {
className: _ItemSt.classes.text,
size: "small",
weight: "thin"
}, content) : content;
}
}, {
key: "_renderSubtitle",
value: function _renderSubtitle() {
var subtitle = this.props.subtitle;
return (0, _StringUtils.isString)(subtitle) ? /*#__PURE__*/_react["default"].createElement(_Text["default"], {
ellipsis: true,
size: "small",
weight: "thin"
}, subtitle) : subtitle;
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var hovered = this.state.hovered;
var _this$props3 = this.props,
open = _this$props3.open,
verticalPadding = _this$props3.verticalPadding,
disabled = _this$props3.disabled;
return /*#__PURE__*/_react["default"].createElement(_context.WixStyleReactContext.Consumer, null, function (_ref2) {
var reducedSpacingAndImprovedLayout = _ref2.reducedSpacingAndImprovedLayout;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.item,
"data-state": open ? 'open' : 'collapsed',
"data-disabled": disabled,
className: (0, _ItemSt.st)(_ItemSt.classes.item, {
hovered: !open && hovered,
verticalPadding: verticalPadding,
reducedSpacingAndImprovedLayout: reducedSpacingAndImprovedLayout,
disabled: disabled
})
}, /*#__PURE__*/_react["default"].createElement("div", {
onMouseEnter: _this2._onMouseEnter,
onMouseLeave: _this2._onMouseLeave,
onClick: _this2._onChange,
className: _ItemSt.classes.selector
}, _this2._renderSelector()), /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.itemHeader,
onMouseEnter: _this2._onMouseEnter,
onMouseLeave: _this2._onMouseLeave,
onClick: _this2._onChange,
className: _ItemSt.classes.header
}, _this2._renderTitle({
reducedSpacingAndImprovedLayout: reducedSpacingAndImprovedLayout
}), _this2._renderSubtitle()), /*#__PURE__*/_react["default"].createElement("div", {
className: _ItemSt.classes.content
}, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
open: open
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _ItemSt.classes.inner
}, _this2._renderContent())), /*#__PURE__*/_react["default"].createElement("div", {
className: _ItemSt.classes.divider
}, /*#__PURE__*/_react["default"].createElement(_Divider["default"], null))));
});
}
}]);
return SelectableAccordionItem;
}(_react["default"].PureComponent);
exports["default"] = SelectableAccordionItem;
(0, _defineProperty2["default"])(SelectableAccordionItem, "propTypes", {
/** A title of the item */
title: _propTypes["default"].node,
/** An optional second row of the header */
subtitle: _propTypes["default"].node,
/** A content of the item */
content: _propTypes["default"].node,
/** A type can be ether radio, checkbox, or toggle, which will effect the way an accordion item is selected */
type: _propTypes["default"].oneOf(['radio', 'checkbox', 'toggle']),
/** A flag that indicates a open state */
open: _propTypes["default"].bool,
/** An index of the item in the items list */
idx: _propTypes["default"].number,
/** A callback which is invoked every time the selection of the item is changed */
onChange: _propTypes["default"].func,
/** Extra space on top and bottom of selectable accordion item */
verticalPadding: _propTypes["default"].oneOf(['medium', 'small', 'tiny']),
/** Is item disabled */
disabled: _propTypes["default"].bool
});
(0, _defineProperty2["default"])(SelectableAccordionItem, "defaultProps", {
type: 'toggle',
onChange: function onChange() {}
});
(0, _defineProperty2["default"])(SelectableAccordionItem, "displayName", 'SelectableAccordionItem');