wix-style-react
Version:
253 lines (216 loc) • 8.83 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
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";
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 { WixStyleReactContext } from '../../WixStyleReactProvider/context';
import Checkbox from '../../Checkbox';
import ToggleSwitch from '../../ToggleSwitch';
import Radio from '../../Radio';
import Heading from '../../Heading';
import Text from '../../Text';
import Collapse from '../../Collapse';
import Divider from '../../Divider';
import { dataHooks, TYPES } from '../constants';
import { isString } from '../../utils/StringUtils';
import { st, classes } from './Item.st.css';
var SelectableAccordionItem = /*#__PURE__*/function (_React$PureComponent) {
_inherits(SelectableAccordionItem, _React$PureComponent);
var _super = _createSuper(SelectableAccordionItem);
function SelectableAccordionItem() {
var _this;
_classCallCheck(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));
_defineProperty(_assertThisInitialized(_this), "state", {
hovered: false
});
_defineProperty(_assertThisInitialized(_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);
});
_defineProperty(_assertThisInitialized(_this), "_onMouseEnter", function () {
return _this.setState({
hovered: true
});
});
_defineProperty(_assertThisInitialized(_this), "_onMouseLeave", function () {
return _this.setState({
hovered: false
});
});
return _this;
}
_createClass(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 TYPES.CHECKBOX:
selector = /*#__PURE__*/React.createElement(Checkbox, {
checked: open,
onChange: this._onChange,
disabled: disabled
});
break;
case TYPES.RADIO:
selector = /*#__PURE__*/React.createElement(Radio, {
checked: open,
onChange: this._onChange,
disabled: disabled
});
break;
case TYPES.TOGGLE:
selector = /*#__PURE__*/React.createElement(ToggleSwitch, {
checked: open,
onChange: this._onChange,
size: "small",
disabled: disabled
});
break;
}
return /*#__PURE__*/React.createElement("span", {
className: 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 (isString(title)) {
if (reducedSpacingAndImprovedLayout) {
return /*#__PURE__*/React.createElement(Text, {
weight: "normal",
size: "medium"
}, title);
} else {
return /*#__PURE__*/React.createElement(Heading, {
ellipsis: true,
appearance: "H4"
}, title);
}
} else {
return title;
}
}
}, {
key: "_renderContent",
value: function _renderContent() {
var content = this.props.content;
return isString(content) ? /*#__PURE__*/React.createElement(Text, {
className: classes.text,
size: "small",
weight: "thin"
}, content) : content;
}
}, {
key: "_renderSubtitle",
value: function _renderSubtitle() {
var subtitle = this.props.subtitle;
return isString(subtitle) ? /*#__PURE__*/React.createElement(Text, {
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.createElement(WixStyleReactContext.Consumer, null, function (_ref2) {
var reducedSpacingAndImprovedLayout = _ref2.reducedSpacingAndImprovedLayout;
return /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.item,
"data-state": open ? 'open' : 'collapsed',
"data-disabled": disabled,
className: st(classes.item, {
hovered: !open && hovered,
verticalPadding: verticalPadding,
reducedSpacingAndImprovedLayout: reducedSpacingAndImprovedLayout,
disabled: disabled
})
}, /*#__PURE__*/React.createElement("div", {
onMouseEnter: _this2._onMouseEnter,
onMouseLeave: _this2._onMouseLeave,
onClick: _this2._onChange,
className: classes.selector
}, _this2._renderSelector()), /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.itemHeader,
onMouseEnter: _this2._onMouseEnter,
onMouseLeave: _this2._onMouseLeave,
onClick: _this2._onChange,
className: classes.header
}, _this2._renderTitle({
reducedSpacingAndImprovedLayout: reducedSpacingAndImprovedLayout
}), _this2._renderSubtitle()), /*#__PURE__*/React.createElement("div", {
className: classes.content
}, /*#__PURE__*/React.createElement(Collapse, {
open: open
}, /*#__PURE__*/React.createElement("div", {
className: classes.inner
}, _this2._renderContent())), /*#__PURE__*/React.createElement("div", {
className: classes.divider
}, /*#__PURE__*/React.createElement(Divider, null))));
});
}
}]);
return SelectableAccordionItem;
}(React.PureComponent);
_defineProperty(SelectableAccordionItem, "propTypes", {
/** A title of the item */
title: PropTypes.node,
/** An optional second row of the header */
subtitle: PropTypes.node,
/** A content of the item */
content: PropTypes.node,
/** A type can be ether radio, checkbox, or toggle, which will effect the way an accordion item is selected */
type: PropTypes.oneOf(['radio', 'checkbox', 'toggle']),
/** A flag that indicates a open state */
open: PropTypes.bool,
/** An index of the item in the items list */
idx: PropTypes.number,
/** A callback which is invoked every time the selection of the item is changed */
onChange: PropTypes.func,
/** Extra space on top and bottom of selectable accordion item */
verticalPadding: PropTypes.oneOf(['medium', 'small', 'tiny']),
/** Is item disabled */
disabled: PropTypes.bool
});
_defineProperty(SelectableAccordionItem, "defaultProps", {
type: 'toggle',
onChange: function onChange() {}
});
_defineProperty(SelectableAccordionItem, "displayName", 'SelectableAccordionItem');
export { SelectableAccordionItem as default };