wix-style-react
Version:
wix-style-react
333 lines (287 loc) • 11.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _SideMenuDrill = require('wix-style-react/SideMenuDrill');
var _SideMenuDrill2 = _interopRequireDefault(_SideMenuDrill);
var _SideMenu = require('wix-style-react/SideMenu');
var _SideMenu2 = _interopRequireDefault(_SideMenu);
var _Button = require('wix-style-react/Button');
var _Button2 = _interopRequireDefault(_Button);
var _Tooltip = require('wix-style-react/Tooltip');
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _Heading = require('wix-style-react/Heading');
var _Heading2 = _interopRequireDefault(_Heading);
var _InfoCircle = require('wix-style-react/new-icons/InfoCircle');
var _InfoCircle2 = _interopRequireDefault(_InfoCircle);
var _Chat = require('wix-style-react/new-icons/Chat');
var _Chat2 = _interopRequireDefault(_Chat);
var _ExternalLink = require('wix-style-react/new-icons/ExternalLink');
var _ExternalLink2 = _interopRequireDefault(_ExternalLink);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable no-console */
var counter = 3;
var initialItems = [{ type: 'link', to: '//wix.com', title: 'link #0_1', disabled: true }, {
type: 'link',
to: '//wix.com',
title: 'link #0_2',
badge: true,
badgeTooltip: true
}, {
type: 'menu',
title: 'Sub Menu #1',
disabled: true,
items: [{ type: 'link', to: '//wix.com', title: 'link #1_1' }, { type: 'link', to: '//wix.com', title: 'link #1_2' }, { type: 'link', to: '//wix.com', title: 'link #1_3', badge: true }]
}, {
type: 'menu',
title: 'Sub Menu #2',
badge: true,
items: [{ type: 'link', to: '//wix.com', title: 'link #2_1' }, { type: 'link', to: '//wix.com', title: 'link #2_2' }, { type: 'link', to: '//wix.com', title: 'link #2_3' }, {
type: 'menu',
title: 'Sub Menu #2-3',
items: [{ type: 'link', to: '//wix.com', title: 'link #2-3_1' }, { type: 'link', to: '//wix.com', title: 'link #2-3_2' }, { type: 'link', to: '//wix.com', title: 'link #2-3_3' }]
}]
}, {
type: 'menu',
title: 'Sub Menu #3',
items: [{ type: 'link', to: '//wix.com', title: 'link #3_1' }, { type: 'link', to: '//wix.com', title: 'link #3_2' }, { type: 'link', to: '//wix.com', title: 'link #3_3' }]
}, {
type: 'menu',
title: 'Sub Menu #4 with long title',
items: [{ type: 'link', to: '//wix.com', title: 'link #4_1' }, { type: 'link', to: '//wix.com', title: 'link #4_2' }, { type: 'link', to: '//wix.com', title: 'link #4_3' }]
}];
var ExampleSideMenuDrill = function (_React$Component) {
_inherits(ExampleSideMenuDrill, _React$Component);
function ExampleSideMenuDrill(props) {
_classCallCheck(this, ExampleSideMenuDrill);
var _this = _possibleConstructorReturn(this, (ExampleSideMenuDrill.__proto__ || Object.getPrototypeOf(ExampleSideMenuDrill)).call(this, props));
_this.state = {
items: initialItems
};
return _this;
}
_createClass(ExampleSideMenuDrill, [{
key: 'selectMenu',
value: function selectMenu(items, link) {
var _this2 = this;
items.forEach(function (item) {
item.isActive = item === link;
if (item.items) {
_this2.selectMenu(item.items, link);
}
});
}
}, {
key: 'onMenuSelected',
value: function onMenuSelected(e, link) {
e.preventDefault();
var items = [].concat(_toConsumableArray(this.state.items));
this.selectMenu(items, link);
this.setState({ items: items });
}
}, {
key: 'renderLink',
value: function renderLink(link) {
var _this3 = this;
var badge = link.badge,
badgeTooltip = link.badgeTooltip;
var badgeElement = badge && _react2.default.createElement(_SideMenu2.default.NavigationBadge, null);
var badgeElementWithTooltip = badgeTooltip ? _react2.default.createElement(
_Tooltip2.default,
{
moveBy: { x: -23, y: 0 },
placement: 'right',
alignment: 'center',
content: 'Hi there!'
},
badgeElement
) : badgeElement;
return _react2.default.createElement(
_SideMenuDrill2.default.Link,
{
key: link.title,
isActive: link.isActive,
disabled: link.disabled
},
_react2.default.createElement(
'a',
{ href: link.to, onClick: function onClick(e) {
return _this3.onMenuSelected(e, link);
} },
link.title,
badgeElementWithTooltip
)
);
}
}, {
key: 'renderMenu',
value: function renderMenu(menu) {
var showCategory = menu.title !== 'Sub Menu #3';
var badge = menu.badge,
badgeTooltip = menu.badgeTooltip;
var badgeElement = badge && _react2.default.createElement(_SideMenu2.default.NavigationBadge, null);
var element = badgeTooltip ? _react2.default.createElement(
_Tooltip2.default,
{
moveBy: { x: -23, y: 0 },
placement: 'right',
alignment: 'center',
content: 'Hi there!'
},
badgeElement
) : badgeElement;
return _react2.default.createElement(
_SideMenuDrill2.default.SubMenu,
{
key: menu.title,
menuKey: menu.title,
title: menu.title,
showCategory: showCategory,
badge: element,
disabled: menu.disabled
},
this.renderHeader(),
_react2.default.createElement(
_SideMenuDrill2.default.Navigation,
null,
this.renderNavigation(menu.items)
)
);
}
}, {
key: 'renderNavigation',
value: function renderNavigation(items) {
var _this4 = this;
return items.map(function (item) {
if (item.type === 'link') {
return _this4.renderLink(item);
}
if (item.type === 'menu') {
return _this4.renderMenu(item);
}
return null;
});
}
}, {
key: 'addItem',
value: function addItem() {
var newItem = {
type: 'link',
to: '//wix.com',
title: 'link #0_' + counter++
};
this.setState({
items: [].concat(_toConsumableArray(this.state.items), [newItem])
});
}
}, {
key: 'renderFooter',
value: function renderFooter() {
return _react2.default.createElement(
_SideMenu2.default.Footer,
null,
_react2.default.createElement(
_SideMenu2.default.FooterLink,
{
href: 'https://support.wix.com/',
target: '_blank',
icon: _react2.default.createElement(_InfoCircle2.default, null)
},
'Help Me!'
),
_react2.default.createElement(_SideMenu2.default.FooterTinyLink, {
href: 'https://support.wix.com/en/article/wix-seo-wiz-suggestions-and-feedback',
target: '_blank',
icon: _react2.default.createElement(
'div',
{ style: { marginTop: 2 } },
_react2.default.createElement(_Chat2.default, null)
),
tooltip: 'Hey, come talk to me!',
onClick: function onClick() {
return console.log('clicked on tiny link yay!');
}
})
);
}
}, {
key: 'renderHeader',
value: function renderHeader() {
var title = 'wix-style-react v5.0.0';
return _react2.default.createElement(
_SideMenu2.default.Header,
null,
_react2.default.createElement(
'div',
{
style: {
padding: '26px 30px',
width: '100%',
boxSizing: 'border-box'
}
},
_react2.default.createElement(
'div',
{ style: { display: 'flex' } },
_react2.default.createElement(
_Heading2.default,
{ appearance: 'H3', light: true, ellipsis: true },
title
),
_react2.default.createElement(_ExternalLink2.default, null)
),
_react2.default.createElement(
'div',
{ style: { marginTop: '5px', fontSize: '13px' } },
'Role: Owner'
)
)
);
}
}, {
key: 'render',
value: function render() {
var items = this.state.items;
return _react2.default.createElement(
'div',
{ style: { width: 220, height: 700, display: 'flex' } },
_react2.default.createElement(
'div',
{ style: { display: 'flex', flexGrow: 1 } },
_react2.default.createElement(
_SideMenuDrill2.default,
{
inFlex: true,
stickyFooter: this.renderFooter(),
dataHook: 'side-menu'
},
this.renderHeader(),
this.renderNavigation(items),
_react2.default.createElement(
_SideMenu2.default.Promotion,
null,
_react2.default.createElement(
_Button2.default,
{
theme: 'fullpurple',
onClick: function onClick() {
return console.log('Promotion button clicked!');
}
},
'Buy 1 for price of 2!'
)
)
)
)
);
}
}]);
return ExampleSideMenuDrill;
}(_react2.default.Component);
exports.default = ExampleSideMenuDrill;