@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
276 lines (234 loc) • 13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _combobox = _interopRequireDefault(require("../../../../components/combobox"));
var _menuDropdown = _interopRequireDefault(require("../../../../components/menu-dropdown"));
var _globalHeader = _interopRequireDefault(require("../../../../components/global-header"));
var _favorites = _interopRequireDefault(require("../../../../components/global-header/favorites"));
var _help = _interopRequireDefault(require("../../../../components/global-header/help"));
var _notifications = _interopRequireDefault(require("../../../../components/global-header/notifications"));
var _profile = _interopRequireDefault(require("../../../../components/global-header/profile"));
var _search = _interopRequireDefault(require("../../../../components/global-header/search"));
var _setup = _interopRequireDefault(require("../../../../components/global-header/setup"));
var _task = _interopRequireDefault(require("../../../../components/global-header/task"));
var _iconSettings = _interopRequireDefault(require("../../../../components/icon-settings"));
var _popover = _interopRequireDefault(require("../../../../components/popover"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
/* eslint-disable max-len */
/* eslint-disable no-script-url */
/* eslint-disable react/prop-types */
var ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum fermentum eros, vel porta metus dignissim vitae. Fusce finibus sed magna vitae tempus. Suspendisse condimentum, arcu eu viverra vulputate, mauris odio dictum velit, in dictum lorem augue id augue. Proin nec leo convallis, aliquet mi ut, interdum nunc.'; // Notifications content is currently the contents of a generic `Popover` with markup copied from https://www.lightningdesignsystem.com/components/global-header/#Notifications. This allows content to have tab stops and focus trapping. If you need a more specific/explicit `GlobalHeaderNotification` content, please create an issue.
var HeaderNotificationsCustomContent = function HeaderNotificationsCustomContent(props) {
return _react.default.createElement("ul", {
id: "header-notifications-custom-popover-content"
}, props.items.map(function (item) {
return _react.default.createElement("li", {
className: "slds-global-header__notification ".concat(item.unread ? 'slds-global-header__notification_unread' : ''),
key: "notification-item-".concat(item.id)
}, _react.default.createElement("div", {
className: "slds-media slds-has-flexi-truncate slds-p-around_x-small"
}, _react.default.createElement("div", {
className: "slds-media__figure"
}, _react.default.createElement("span", {
className: "slds-avatar slds-avatar_small"
}, _react.default.createElement("img", {
alt: item.name,
src: "/assets/images/".concat(item.avatar, ".jpg"),
title: "".concat(item.name, " avatar\"")
}))), _react.default.createElement("div", {
className: "slds-media__body"
}, _react.default.createElement("div", {
className: "slds-grid slds-grid_align-spread"
}, _react.default.createElement("a", {
href: "javascript:void(0);",
className: "slds-text-link_reset slds-has-flexi-truncate"
}, _react.default.createElement("h3", {
className: "slds-truncate",
title: "".concat(item.name, " ").concat(item.action)
}, _react.default.createElement("strong", null, "".concat(item.name, " ").concat(item.action))), _react.default.createElement("p", {
className: "slds-truncate",
title: item.comment
}, item.comment), _react.default.createElement("p", {
className: "slds-m-top_x-small slds-text-color_weak"
}, item.timePosted, ' ', item.unread ? _react.default.createElement("abbr", {
className: "slds-text-link slds-m-horizontal_xxx-small",
title: "unread"
}, "\u25CF") : null))))));
}));
};
HeaderNotificationsCustomContent.displayName = 'HeaderNotificationsCustomContent'; // Profile content is currently the contents of a generic `Popover` with markup copied from https://www.lightningdesignsystem.com/components/global-header/. This allows content to have tab stops and focus trapping. If you need a more specific/explicit `GlobalHeaderProfile` content, please create an issue.
var HeaderProfileCustomContent = function HeaderProfileCustomContent(props) {
return _react.default.createElement("div", {
id: "header-profile-custom-popover-content"
}, _react.default.createElement("div", {
className: "slds-m-around_medium"
}, _react.default.createElement("div", {
className: "slds-tile slds-tile_board slds-m-horizontal_small"
}, _react.default.createElement("p", {
className: "tile__title slds-text-heading_small"
}, "Art Vandelay"), _react.default.createElement("div", {
className: "slds-tile__detail"
}, _react.default.createElement("p", {
className: "slds-truncate"
}, _react.default.createElement("a", {
className: "slds-m-right_medium",
href: "javascript:void(0)",
onClick: props.onClick
}, "Settings"), _react.default.createElement("a", {
href: "javascript:void(0)",
onClick: props.onClick
}, "Log Out"))))));
};
HeaderProfileCustomContent.displayName = 'HeaderProfileCustomContent';
var Example =
/*#__PURE__*/
function (_React$Component) {
_inherits(Example, _React$Component);
function Example(props) {
var _this;
_classCallCheck(this, Example);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Example).call(this, props));
_this.state = {
favoritesActionSelected: false
};
return _this;
}
_createClass(Example, [{
key: "render",
value: function render() {
var _this2 = this;
return _react.default.createElement(_iconSettings.default, {
iconPath: "/assets/icons"
}, _react.default.createElement(_globalHeader.default, {
logoSrc: "/assets/images/logo.svg",
onSkipToContent: function onSkipToContent() {
console.log('>>> Skip to Content Clicked');
},
onSkipToNav: function onSkipToNav() {
console.log('>>> Skip to Nav Clicked');
}
}, _react.default.createElement(_search.default, {
combobox: _react.default.createElement(_combobox.default, {
events: {
onSelect: function onSelect() {
console.log('>>> onSelect');
}
},
id: "header-search-custom-id",
labels: {
placeholder: 'Search Salesforce'
},
options: [{
id: 'email',
label: 'Email'
}, {
id: 'mobile',
label: 'Mobile'
}]
})
}), _react.default.createElement(_favorites.default, {
actionSelected: this.state.favoritesActionSelected,
onToggleActionSelected: function onToggleActionSelected(event, data) {
_this2.setState({
favoritesActionSelected: !data.actionSelected
});
},
popover: _react.default.createElement(_popover.default, {
ariaLabelledby: "favorites-heading",
body: _react.default.createElement("div", null, _react.default.createElement("h2", {
className: "slds-text-heading_small",
id: "favorites-heading"
}, "Favorites"), ipsum),
id: "header-favorites-popover-id"
})
}), _react.default.createElement(_task.default, {
dropdown: _react.default.createElement(_menuDropdown.default, {
id: "header-task-dropdown-id",
options: [{
id: 'taskOptionOne',
label: 'Task Option One'
}, {
id: 'taskOptionTwo',
label: 'Task Option Two'
}]
})
}), _react.default.createElement(_help.default, {
popover: _react.default.createElement(_popover.default, {
ariaLabelledby: "help-heading",
body: _react.default.createElement("div", null, _react.default.createElement("h2", {
className: "slds-text-heading_small",
id: "help-heading"
}, "Help and Training"), ipsum),
id: "header-help-popover-id"
})
}), _react.default.createElement(_setup.default, {
dropdown: _react.default.createElement(_menuDropdown.default, {
id: "header-setup-dropdown-id",
options: [{
id: 'setupOptionOne',
label: 'Setup Option One'
}, {
id: 'setupOptionTwo',
label: 'Setup Option Two'
}]
})
}), _react.default.createElement(_notifications.default, {
notificationCount: 5,
popover: _react.default.createElement(_popover.default, {
ariaLabelledby: "header-notifications-custom-popover-content",
body: _react.default.createElement(HeaderNotificationsCustomContent, {
items: [{
action: 'mentioned you',
avatar: 'avatar2',
comment: '@jrogers Could I please have a review on my presentation deck',
id: 1,
name: 'Val Handerly',
timePosted: '10 hours ago',
unread: true
}, {
action: 'commented on your post',
avatar: 'avatar3',
comment: 'I totally agree with your sentiment',
id: 2,
name: 'Jon Rogers',
timePosted: '13 hours ago',
unread: true
}, {
action: 'mentioned you',
avatar: 'avatar2',
comment: "@jrogers Here's the conversation I mentioned to you",
id: 3,
name: 'Rebecca Stone',
timePosted: '1 day ago'
}]
}),
id: "header-notifications-popover-id"
})
}), _react.default.createElement(_profile.default, {
popover: _react.default.createElement(_popover.default, {
body: _react.default.createElement(HeaderProfileCustomContent, null),
id: "header-profile-popover-id"
}),
userName: "Art Vandelay"
})));
}
}]);
return Example;
}(_react.default.Component);
_defineProperty(Example, "displayName", 'GlobalHeaderExample');
Example.displayName = 'GlobalHeaderExample';
var _default = Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
exports.default = _default;