wix-style-react
Version:
wix-style-react
290 lines (289 loc) • 8.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
var _ToggleSwitch = _interopRequireDefault(require("../../ToggleSwitch"));
var _Radio = _interopRequireDefault(require("../../Radio"));
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");
var _context = require("../../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SelectableAccordion/Item/Item.js";
class SelectableAccordionItem extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.state = {
hovered: false
};
this._onChange = event => {
var {
idx,
type,
open,
onChange,
disabled
} = this.props;
if (disabled) {
return;
}
if (type === 'radio' && open) {
return;
}
onChange(event, idx, !open);
};
this._onMouseEnter = () => this.setState({
hovered: true
});
this._onMouseLeave = () => this.setState({
hovered: false
});
}
_renderSelector() {
var {
type,
open,
disabled
} = this.props;
var selector = null;
switch (type) {
case _constants.TYPES.CHECKBOX:
selector = /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
checked: open,
onChange: this._onChange,
disabled: disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}
});
break;
case _constants.TYPES.RADIO:
selector = /*#__PURE__*/_react.default.createElement(_Radio.default, {
checked: open,
onChange: this._onChange,
disabled: disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 11
}
});
break;
case _constants.TYPES.TOGGLE:
selector = /*#__PURE__*/_react.default.createElement(_ToggleSwitch.default, {
checked: open,
onChange: this._onChange,
size: "small",
disabled: disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 11
}
});
break;
default:
break;
}
return /*#__PURE__*/_react.default.createElement("span", {
className: _ItemSt.classes.selectorToggle,
onClick: e => e.stopPropagation(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 7
}
}, selector);
}
_renderTitle() {
var {
title
} = this.props;
if ((0, _StringUtils.isString)(title)) {
return /*#__PURE__*/_react.default.createElement(_Text.default, {
weight: "normal",
size: "medium",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 9
}
}, title);
} else {
return title;
}
}
_renderContent() {
var {
content
} = this.props;
return (0, _StringUtils.isString)(content) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _ItemSt.classes.text,
size: "small",
weight: "thin",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 7
}
}, content) : content;
}
_renderSubtitle() {
var {
subtitle
} = this.props;
return (0, _StringUtils.isString)(subtitle) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
ellipsis: true,
size: "small",
weight: "thin",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 7
}
}, subtitle) : subtitle;
}
render() {
var {
hovered
} = this.state;
var {
open,
verticalPadding,
disabled,
content
} = this.props;
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
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,
disabled,
newColorsBranding
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: this._onChange,
className: _ItemSt.classes.selector,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 13
}
}, this._renderSelector()), /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.itemHeader,
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: this._onChange,
className: _ItemSt.classes.header,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 13
}
}, this._renderTitle(), this._renderSubtitle()), /*#__PURE__*/_react.default.createElement("div", {
className: _ItemSt.classes.content,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 13
}
}, content ? /*#__PURE__*/_react.default.createElement(_Collapse.default, {
open: open,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _ItemSt.classes.inner,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 19
}
}, this._renderContent())) : null, /*#__PURE__*/_react.default.createElement("div", {
className: _ItemSt.classes.divider,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_Divider.default, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 17
}
}))));
});
}
}
exports.default = SelectableAccordionItem;
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
};
SelectableAccordionItem.defaultProps = {
type: 'toggle',
onChange: () => {}
};
SelectableAccordionItem.displayName = 'SelectableAccordionItem';
//# sourceMappingURL=Item.js.map