react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
148 lines (142 loc) • 6.25 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SalesPathItem = exports.SalesPath = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Icon = require("./Icon");
var _hooks = require("./hooks");
var _common = require("./common");
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; }
/**
*
*/
/**
*
*/
var SalesPathTypeContext = /*#__PURE__*/(0, _react.createContext)('incomplete');
var SalesPathContext = /*#__PURE__*/(0, _react.createContext)({});
/**
*
*/
/**
*
*/
var SalesPathItem = exports.SalesPathItem = function SalesPathItem(props) {
var className = props.className,
eventKey = props.eventKey,
type_ = props.type,
title = props.title,
completedTitle = props.completedTitle;
var evaluatedType = (0, _react.useContext)(SalesPathTypeContext);
var _useContext = (0, _react.useContext)(SalesPathContext),
onSelect = _useContext.onSelect,
activeKey = _useContext.activeKey;
var type = type_ !== null && type_ !== void 0 ? type_ : evaluatedType;
var onItemClick = (0, _hooks.useEventCallback)(function () {
if (eventKey != null) {
onSelect === null || onSelect === void 0 || onSelect(eventKey);
}
});
var isSelected = activeKey === eventKey;
var isCurrent = type === 'current';
var isActive = isSelected || isCurrent && activeKey == null;
var pathItemClassName = (0, _classnames["default"])('slds-path__item', {
'slds-is-complete': type === 'complete',
'slds-is-current': isCurrent,
'slds-is-incomplete': type === 'incomplete',
'slds-is-active': isActive
}, className);
var tabIndex = isActive ? 0 : -1;
var completedText = completedTitle || 'Stage Complete';
return /*#__PURE__*/_react["default"].createElement("li", {
className: pathItemClassName,
role: "presentation"
}, /*#__PURE__*/_react["default"].createElement("a", {
className: "slds-path__link",
"aria-selected": isActive,
tabIndex: tabIndex,
role: "option",
onClick: onItemClick
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "slds-path__stage"
}, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
category: "utility",
icon: "check",
size: "x-small"
}), type === 'complete' ? /*#__PURE__*/_react["default"].createElement("span", {
className: "slds-assistive-text"
}, completedText) : null, isCurrent ? /*#__PURE__*/_react["default"].createElement("span", {
className: "slds-assistive-text"
}, "Current Stage:") : null), /*#__PURE__*/_react["default"].createElement("span", {
className: "slds-path__title"
}, title)));
};
/**
*
*/
/**
*
*/
var SalesPath = exports.SalesPath = (0, _common.createFC)(function (props) {
var activeKey_ = props.activeKey,
defaultActiveKey = props.defaultActiveKey,
className = props.className,
children = props.children,
onSelect_ = props.onSelect;
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 salesPathClassNames = (0, _classnames["default"])(className, 'slds-path');
var onSelect = (0, _hooks.useEventCallback)(function (itemKey) {
onSelect_ === null || onSelect_ === void 0 || onSelect_(itemKey);
setActiveKey(itemKey);
});
var activeIdx = -1;
_react["default"].Children.forEach(children, function (child, idx) {
if ( /*#__PURE__*/_react["default"].isValidElement(child)) {
var _ref = child.props,
_eventKey = _ref.eventKey;
if (_eventKey != null && _eventKey === activeKey) {
activeIdx = idx;
}
}
});
var ctx = (0, _react.useMemo)(function () {
return {
onSelect: onSelect,
activeKey: activeKey
};
}, [onSelect, activeKey]);
return /*#__PURE__*/_react["default"].createElement("div", {
className: salesPathClassNames
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])('slds-grid', 'slds-path__track')
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])('slds-grid', 'slds-path__scroller-container')
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-path__scroller"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-path__scroller_inner"
}, /*#__PURE__*/_react["default"].createElement("ul", {
className: "slds-path__nav",
role: "listbox",
"aria-orientation": "horizontal"
}, /*#__PURE__*/_react["default"].createElement(SalesPathContext.Provider, {
value: ctx
}, _react["default"].Children.map(children, function (child, idx) {
var evaluatedType = idx === activeIdx ? 'current' : idx < activeIdx ? 'complete' : 'incomplete';
return /*#__PURE__*/_react["default"].createElement(SalesPathTypeContext.Provider, {
value: evaluatedType
}, child);
}))))))));
}, {
PathItem: SalesPathItem
});
//# sourceMappingURL=SalesPath.js.map