wix-style-react
Version:
wix-style-react
299 lines (274 loc) • 10.1 kB
JavaScript
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; }; }();
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 */
import React from 'react';
import SideMenuDrill from 'wix-style-react/SideMenuDrill';
import SideMenu from 'wix-style-react/SideMenu';
import Button from 'wix-style-react/Button';
import Tooltip from 'wix-style-react/Tooltip';
import Heading from 'wix-style-react/Heading';
import HelpIcon from 'wix-style-react/new-icons/InfoCircle';
import ChatIcon from 'wix-style-react/new-icons/Chat';
import ExternalLink from 'wix-style-react/new-icons/ExternalLink';
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 && React.createElement(SideMenu.NavigationBadge, null);
var badgeElementWithTooltip = badgeTooltip ? React.createElement(
Tooltip,
{
moveBy: { x: -23, y: 0 },
placement: 'right',
alignment: 'center',
content: 'Hi there!'
},
badgeElement
) : badgeElement;
return React.createElement(
SideMenuDrill.Link,
{
key: link.title,
isActive: link.isActive,
disabled: link.disabled
},
React.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 && React.createElement(SideMenu.NavigationBadge, null);
var element = badgeTooltip ? React.createElement(
Tooltip,
{
moveBy: { x: -23, y: 0 },
placement: 'right',
alignment: 'center',
content: 'Hi there!'
},
badgeElement
) : badgeElement;
return React.createElement(
SideMenuDrill.SubMenu,
{
key: menu.title,
menuKey: menu.title,
title: menu.title,
showCategory: showCategory,
badge: element,
disabled: menu.disabled
},
this.renderHeader(),
React.createElement(
SideMenuDrill.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 React.createElement(
SideMenu.Footer,
null,
React.createElement(
SideMenu.FooterLink,
{
href: 'https://support.wix.com/',
target: '_blank',
icon: React.createElement(HelpIcon, null)
},
'Help Me!'
),
React.createElement(SideMenu.FooterTinyLink, {
href: 'https://support.wix.com/en/article/wix-seo-wiz-suggestions-and-feedback',
target: '_blank',
icon: React.createElement(
'div',
{ style: { marginTop: 2 } },
React.createElement(ChatIcon, 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 React.createElement(
SideMenu.Header,
null,
React.createElement(
'div',
{
style: {
padding: '26px 30px',
width: '100%',
boxSizing: 'border-box'
}
},
React.createElement(
'div',
{ style: { display: 'flex' } },
React.createElement(
Heading,
{ appearance: 'H3', light: true, ellipsis: true },
title
),
React.createElement(ExternalLink, null)
),
React.createElement(
'div',
{ style: { marginTop: '5px', fontSize: '13px' } },
'Role: Owner'
)
)
);
}
}, {
key: 'render',
value: function render() {
var items = this.state.items;
return React.createElement(
'div',
{ style: { width: 220, height: 700, display: 'flex' } },
React.createElement(
'div',
{ style: { display: 'flex', flexGrow: 1 } },
React.createElement(
SideMenuDrill,
{
inFlex: true,
stickyFooter: this.renderFooter(),
dataHook: 'side-menu'
},
this.renderHeader(),
this.renderNavigation(items),
React.createElement(
SideMenu.Promotion,
null,
React.createElement(
Button,
{
theme: 'fullpurple',
onClick: function onClick() {
return console.log('Promotion button clicked!');
}
},
'Buy 1 for price of 2!'
)
)
)
)
);
}
}]);
return ExampleSideMenuDrill;
}(React.Component);
export default ExampleSideMenuDrill;