wix-style-react
Version:
wix-style-react
236 lines (235 loc) • 8.09 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ComposerSidebarSt = require("./ComposerSidebar.st.css");
var _constants = require("./constants");
var _Box = _interopRequireDefault(require("../Box"));
var _ToggleButton = _interopRequireDefault(require("../ToggleButton"));
var _Text = _interopRequireDefault(require("../Text"));
var _excluded = ["label", "id", "icon", "disabled", "sectionTitle"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ComposerSidebar/ComposerSidebar.js";
/** ComposerSidebar */
class ComposerSidebar extends _react.default.PureComponent {
constructor() {
super(...arguments);
this._renderSection = _ref => {
var {
section: {
items,
sectionTitle
},
showSectionTitles = false
} = _ref;
var {
selectedId,
labelPlacement
} = this.props;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSectionTitles ? /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _ComposerSidebarSt.classes.title,
size: "small",
weight: "bold",
ellipsis: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 11
}
}, sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : 'Undefined') : null, /*#__PURE__*/_react.default.createElement("ul", {
role: "menu",
"data-hook": "composer-sidebar-items-container",
"data-selected-id": selectedId,
"data-label-placement": labelPlacement,
className: _ComposerSidebarSt.classes.itemsContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 9
}
}, items.map(item => this._renderItem(item))));
};
this._renderSections = sections => {
var {
labelPlacement,
size
} = this.props;
var withSections = sections.length > 1 || sections.length === 1 && sections[0].sectionTitle;
return /*#__PURE__*/_react.default.createElement("div", {
role: withSections ? 'menu' : undefined,
direction: "vertical",
className: (0, _ComposerSidebarSt.st)(_ComposerSidebarSt.classes.container, {
withSections,
labelPlacement,
size
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 7
}
}, withSections ? sections.map((section, index) => /*#__PURE__*/_react.default.createElement("div", {
key: index,
role: "menuitem",
className: _ComposerSidebarSt.classes.section,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 15
}
}, this._renderSection({
section,
showSectionTitles: true
}))) : this._renderSection({
section: sections[0]
}));
};
this._separateToSections = items => {
var sectionTitles = Array.from(new Set(items.map(_ref2 => {
var {
sectionTitle
} = _ref2;
return sectionTitle ? sectionTitle : undefined;
})));
var sections = sectionTitles.map(sectionTitle => ({
sectionTitle,
items: items.filter(_ref3 => {
var {
sectionTitle: itemSectionTitle
} = _ref3;
return !sectionTitle && !itemSectionTitle || sectionTitle === itemSectionTitle;
})
}));
return sections;
};
}
_renderItem(item) {
var {
selectedId,
labelPlacement,
size,
onClick,
className,
labelTooltipProps
} = this.props;
var {
label,
id,
icon,
disabled,
sectionTitle
} = item,
rest = (0, _objectWithoutProperties2.default)(item, _excluded);
var selected = selectedId === id;
var onClickHandler = item.onClick || onClick;
return /*#__PURE__*/_react.default.createElement("li", {
role: "menuitem",
"data-hook": "composer-sidebar-item-container-".concat(id),
key: "sidebar-item-".concat(id),
"data-section-title": sectionTitle,
className: (0, _ComposerSidebarSt.st)(_ComposerSidebarSt.classes.item, {
labelPlacement,
size
}, className),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_ToggleButton.default, (0, _extends2.default)({}, rest, {
dataHook: "composer-sidebar-item-".concat(id),
onClick: e => onClickHandler(e, {
id,
label
}),
shape: "round",
size: size,
border: true,
skin: "inverted",
labelEllipsis: true,
disabled: disabled,
selected: selected,
labelValue: label,
labelPlacement: labelPlacement,
tooltipProps: labelTooltipProps,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 9
}
}), icon));
}
render() {
var {
items,
className,
dataHook
} = this.props;
var sections = this._separateToSections(items);
return /*#__PURE__*/_react.default.createElement(_Box.default, {
height: "100%",
maxHeight: "100%",
className: className,
dataHook: dataHook || _constants.dataHooks.composerSidebarContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 7
}
}, sections.length ? this._renderSections(sections) : null);
}
}
ComposerSidebar.displayName = 'ComposerSidebar';
ComposerSidebar.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes.default.string,
/** Controls the items’ label placement */
labelPlacement: _propTypes.default.oneOf(['bottom', 'end', 'tooltip']),
/** Controls the items’ label tooltip when labelPlacement is set to tooltip */
labelTooltipProps: _propTypes.default.object,
/** Sets the size of the component */
size: _propTypes.default.oneOf(['medium', 'large', 'small']),
/** Defines which item is currently selected */
selectedId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Defines an array of items (buttons and labels) to show on the sidebar:
* - `label`: text string next to a button
* - `icon`: icon shown in the toggle button
* - `disabled`: disables the item
* - `onClick`: defines what happens when the item is clicked on
* - `sectionTitle`: defines a section under which each item is placed
*/
items: _propTypes.default.arrayOf(_propTypes.default.shape({
id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
label: _propTypes.default.string,
icon: _propTypes.default.node,
disabled: _propTypes.default.bool,
onClick: _propTypes.default.func,
sectionTitle: _propTypes.default.string
})),
/** Defines a default on click handler for items */
onClick: _propTypes.default.func
};
ComposerSidebar.defaultProps = {
labelPlacement: 'end',
selectedId: null,
items: [],
size: 'medium',
onClick: () => {},
labelTooltipProps: {
placement: 'right'
}
};
var _default = exports.default = ComposerSidebar;
//# sourceMappingURL=ComposerSidebar.js.map