react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
323 lines (304 loc) • 13.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tabs = exports.Tab = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _util = require("./util");
var _DropdownButton = require("./DropdownButton");
var _hooks = require("./hooks");
var _TooltipContent = require("./TooltipContent");
var _excluded = ["className", "active", "children"],
_excluded2 = ["icon", "children"],
_excluded3 = ["tabItemRenderer", "rendererProps"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
*
*/
/**
*
*/
var TabsHandlersContext = /*#__PURE__*/(0, _react.createContext)({});
/**
*
*/
var TabsActiveKeyContext = /*#__PURE__*/(0, _react.createContext)(undefined);
/**
*
*/
var TabsContext = /*#__PURE__*/(0, _react.createContext)({
type: 'default'
});
/**
* Custom hook to generate unique tab IDs
*/
var useTabIds = function useTabIds(eventKey) {
var _useContext = (0, _react.useContext)(TabsContext),
tabIdPrefix = _useContext.tabIdPrefix;
var tabIndex = eventKey ? String(eventKey) : '0';
var tabId = "".concat(tabIdPrefix, "-").concat(tabIndex);
return {
tabId: tabId
};
};
/**
*
*/
/**
*
*/
var TabContent = function TabContent(props) {
var className = props.className,
active = props.active,
children = props.children,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useContext2 = (0, _react.useContext)(TabsContext),
type = _useContext2.type;
var tabClassNames = (0, _classnames["default"])(className, "slds-tabs_".concat(type, "__content"), "slds-".concat(active ? 'show' : 'hide'));
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: tabClassNames,
role: "tabpanel"
}, rprops), children);
};
/**
*
*/
/**
*
*/
var TabMenu = function TabMenu(props) {
var _props$icon = props.icon,
icon = _props$icon === void 0 ? 'down' : _props$icon,
children = props.children,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded2);
return /*#__PURE__*/_react["default"].createElement(_DropdownButton.DropdownButton, (0, _extends2["default"])({}, rprops, {
className: "react-slds-tab-menu",
icon: icon,
type: "icon",
iconSize: "small",
tabIndex: -1,
nubbinTop: true
}), children);
};
/**
*
*/
var DefaultTabItemRenderer = function DefaultTabItemRenderer(props) {
var el = _react["default"].Children.only(props.children);
return /*#__PURE__*/_react["default"].isValidElement(el) ? el : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, el);
};
/**
*
*/
/**
*
*/
var TabItem = function TabItem(props) {
var _ref;
var title = props.title,
alt = props.alt,
eventKey = props.eventKey,
menu = props.menu,
menuIcon = props.menuIcon,
tooltip = props.tooltip,
tooltipIcon = props.tooltipIcon;
var _useContext3 = (0, _react.useContext)(TabsContext),
type = _useContext3.type,
activeTabRef = _useContext3.activeTabRef;
var activeKey = (0, _react.useContext)(TabsActiveKeyContext);
var _useContext4 = (0, _react.useContext)(TabsHandlersContext),
onTabClick = _useContext4.onTabClick,
onTabKeyDown = _useContext4.onTabKeyDown;
var _useTabIds = useTabIds(eventKey),
tabId = _useTabIds.tabId;
var menuItems = props.menuItems;
menuItems = menu ? _react["default"].Children.toArray(menu.props.children || []).map(function (el) {
return /*#__PURE__*/_react["default"].isValidElement(el) ? el : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, el);
}) : menuItems;
var menuProps = (_ref = menu === null || menu === void 0 ? void 0 : menu.props) !== null && _ref !== void 0 ? _ref : {};
var isActive = eventKey === activeKey;
var tabItemClassName = (0, _classnames["default"])('react-slds-tab-item', "slds-tabs_".concat(type, "__item"), {
'slds-is-active': isActive
}, {
'react-slds-tab-with-menu': menu || menuItems
});
var tabLinkClassName = "slds-tabs_".concat(type, "__link");
var _props$tabItemRendere = props.tabItemRenderer,
TabItemRenderer = _props$tabItemRendere === void 0 ? DefaultTabItemRenderer : _props$tabItemRendere,
rendererProps = props.rendererProps,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded3);
var itemRendererProps = _objectSpread(_objectSpread(_objectSpread({}, rendererProps), rprops), {}, {
type: type,
activeKey: activeKey,
activeTabRef: activeTabRef,
onTabClick: onTabClick,
onTabKeyDown: onTabKeyDown
});
return /*#__PURE__*/_react["default"].createElement("li", {
className: tabItemClassName,
title: alt,
role: "presentation"
}, /*#__PURE__*/_react["default"].createElement(TabItemRenderer, itemRendererProps, /*#__PURE__*/_react["default"].createElement("span", {
className: "react-slds-tab-item-content ".concat(tooltip ? 'react-slds-tooltip-enabled' : '')
}, /*#__PURE__*/_react["default"].createElement("a", {
className: tabLinkClassName,
role: "tab",
ref: isActive ? activeTabRef : undefined,
tabIndex: isActive ? 0 : -1,
"aria-selected": isActive,
"aria-controls": tabId,
onClick: eventKey != null ? function () {
return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(eventKey);
} : undefined,
onKeyDown: eventKey != null ? function (e) {
return onTabKeyDown === null || onTabKeyDown === void 0 ? void 0 : onTabKeyDown(eventKey, e);
} : undefined
}, title), tooltip ? /*#__PURE__*/_react["default"].createElement(_TooltipContent.TooltipContent, {
icon: tooltipIcon
}, tooltip) : null, menuItems ? /*#__PURE__*/_react["default"].createElement(TabMenu, (0, _extends2["default"])({
icon: menuIcon
}, menuProps), menuItems) : undefined)));
};
/**
*
*/
var TabNav = function TabNav(props) {
var children = props.children;
var _useContext5 = (0, _react.useContext)(TabsContext),
type = _useContext5.type;
var tabNavClassName = "slds-tabs_".concat(type, "__nav");
return /*#__PURE__*/_react["default"].createElement("ul", {
className: tabNavClassName,
role: "tablist"
}, _react["default"].Children.map(children, function (tab) {
if (! /*#__PURE__*/_react["default"].isValidElement(tab)) {
return null;
}
return /*#__PURE__*/_react["default"].createElement(TabItem, tab.props);
}));
};
/**
*
*/
var Tab = exports.Tab = function Tab(props) {
var className = props.className,
eventKey = props.eventKey,
children = props.children;
var activeKey = (0, _react.useContext)(TabsActiveKeyContext);
var _useTabIds2 = useTabIds(eventKey),
tabId = _useTabIds2.tabId;
return /*#__PURE__*/_react["default"].createElement(TabContent, {
id: tabId,
className: className,
active: eventKey != null && eventKey === activeKey
}, children);
};
/**
*
*/
/**
*
*/
function useInitComponentStyle() {
(0, _react.useEffect)(function () {
(0, _util.registerStyle)('tab-menu', [['.react-slds-tab-item.react-slds-tab-with-menu', '{ position: relative !important; overflow: visible !important; }'], ['.react-slds-tab-item.react-slds-tab-with-menu > .react-slds-tab-item-content', '{ overflow: hidden }'], ['.react-slds-tab-item.react-slds-tab-with-menu > .react-slds-tab-item-content > a', '{ padding-right: 2rem; }'], ['.react-slds-tab-item.react-slds-tab-with-menu > .react-slds-tab-item-content.react-slds-tooltip-enabled > a', '{ padding-right: 3.5rem; }'], ['.react-slds-tab-menu', '{ position: absolute; top: 0; right: 0; }'], ['.react-slds-tab-item.react-slds-tab-with-menu .react-slds-tab-item-content .react-slds-tooltip-content', '{ position: absolute; top: 0.6rem; right: 2.25rem; }'], ['.react-slds-tab-menu button', '{ height: 2.5rem; line-height: 2rem; width: 2rem; visibility: hidden; justify-content: center }'], ['.react-slds-tab-item.slds-is-active .react-slds-tab-menu button', '.react-slds-tab-item:hover .react-slds-tab-menu button', '.react-slds-tab-item .react-slds-tab-menu button:focus', '{ visibility: visible }']]);
}, []);
}
/**
*
*/
var Tabs = exports.Tabs = function Tabs(props) {
var className = props.className,
_props$type = props.type,
type = _props$type === void 0 ? 'default' : _props$type,
activeKey_ = props.activeKey,
defaultActiveKey = props.defaultActiveKey,
children = props.children,
onSelect = props.onSelect;
var tabsClassNames = (0, _classnames["default"])(className, "slds-tabs_".concat(type));
var activeTabRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
focusTab = _useState2[0],
setFocusTab = _useState2[1];
var _useControlledValue = (0, _hooks.useControlledValue)(activeKey_, defaultActiveKey !== null && defaultActiveKey !== void 0 ? defaultActiveKey : null),
_useControlledValue2 = (0, _slicedToArray2["default"])(_useControlledValue, 2),
activeKey = _useControlledValue2[0],
setActiveKey = _useControlledValue2[1];
var tabKeys = _react["default"].Children.map(children, function (tab) {
if ( /*#__PURE__*/_react["default"].isValidElement(tab)) {
var _ref2 = tab.props,
_eventKey = _ref2.eventKey;
return _eventKey;
}
return undefined;
});
useInitComponentStyle();
var onTabClick = (0, _hooks.useEventCallback)(function (tabKey) {
onSelect === null || onSelect === void 0 || onSelect(tabKey);
setActiveKey(tabKey);
setFocusTab(true);
});
var onTabKeyDown = (0, _hooks.useEventCallback)(function (tabKey, e) {
if (e.keyCode === 37 || e.keyCode === 39) {
// left/right cursor key
var idx = tabKeys.findIndex(function (key) {
return key === tabKey;
});
if (idx < 0) {
return;
}
var dir = e.keyCode === 37 ? -1 : 1;
var activeIdx = (idx + dir + tabKeys.length) % tabKeys.length;
var _activeKey = tabKeys[activeIdx];
if (_activeKey) {
onTabClick(_activeKey);
}
e.preventDefault();
e.stopPropagation();
}
});
(0, _react.useEffect)(function () {
if (focusTab) {
var _activeTabRef$current;
(_activeTabRef$current = activeTabRef.current) === null || _activeTabRef$current === void 0 || _activeTabRef$current.focus();
setFocusTab(false);
}
}, [focusTab]);
var tabIdPrefix = (0, _react.useId)();
var tabItemIdPrefix = (0, _react.useId)();
var tabCtx = (0, _react.useMemo)(function () {
return {
type: type,
activeTabRef: activeTabRef,
tabIdPrefix: tabIdPrefix,
tabItemIdPrefix: tabItemIdPrefix
};
}, [type, tabIdPrefix, tabItemIdPrefix]);
var handlers = (0, _react.useMemo)(function () {
return {
onTabClick: onTabClick,
onTabKeyDown: onTabKeyDown
};
}, [onTabClick, onTabKeyDown]);
return /*#__PURE__*/_react["default"].createElement(TabsContext.Provider, {
value: tabCtx
}, /*#__PURE__*/_react["default"].createElement(TabsActiveKeyContext.Provider, {
value: activeKey !== null && activeKey !== void 0 ? activeKey : undefined
}, /*#__PURE__*/_react["default"].createElement(TabsHandlersContext.Provider, {
value: handlers
}, /*#__PURE__*/_react["default"].createElement("div", {
className: tabsClassNames
}, /*#__PURE__*/_react["default"].createElement(TabNav, null, children), children))));
};
//# sourceMappingURL=Tabs.js.map