react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
139 lines (133 loc) • 4.69 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { createContext, useContext, useMemo } from 'react';
import classnames from 'classnames';
import { Icon } from './Icon';
import { useControlledValue, useEventCallback } from './hooks';
import { createFC } from './common';
/**
*
*/
/**
*
*/
var SalesPathTypeContext = /*#__PURE__*/createContext('incomplete');
var SalesPathContext = /*#__PURE__*/createContext({});
/**
*
*/
/**
*
*/
export var SalesPathItem = function SalesPathItem(props) {
var className = props.className,
eventKey = props.eventKey,
type_ = props.type,
title = props.title,
completedTitle = props.completedTitle;
var evaluatedType = useContext(SalesPathTypeContext);
var _useContext = useContext(SalesPathContext),
onSelect = _useContext.onSelect,
activeKey = _useContext.activeKey;
var type = type_ !== null && type_ !== void 0 ? type_ : evaluatedType;
var onItemClick = 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 = classnames('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.createElement("li", {
className: pathItemClassName,
role: "presentation"
}, /*#__PURE__*/React.createElement("a", {
className: "slds-path__link",
"aria-selected": isActive,
tabIndex: tabIndex,
role: "option",
onClick: onItemClick
}, /*#__PURE__*/React.createElement("span", {
className: "slds-path__stage"
}, /*#__PURE__*/React.createElement(Icon, {
category: "utility",
icon: "check",
size: "x-small"
}), type === 'complete' ? /*#__PURE__*/React.createElement("span", {
className: "slds-assistive-text"
}, completedText) : null, isCurrent ? /*#__PURE__*/React.createElement("span", {
className: "slds-assistive-text"
}, "Current Stage:") : null), /*#__PURE__*/React.createElement("span", {
className: "slds-path__title"
}, title)));
};
/**
*
*/
/**
*
*/
export var SalesPath = createFC(function (props) {
var activeKey_ = props.activeKey,
defaultActiveKey = props.defaultActiveKey,
className = props.className,
children = props.children,
onSelect_ = props.onSelect;
var _useControlledValue = useControlledValue(activeKey_, defaultActiveKey !== null && defaultActiveKey !== void 0 ? defaultActiveKey : null),
_useControlledValue2 = _slicedToArray(_useControlledValue, 2),
activeKey = _useControlledValue2[0],
setActiveKey = _useControlledValue2[1];
var salesPathClassNames = classnames(className, 'slds-path');
var onSelect = useEventCallback(function (itemKey) {
onSelect_ === null || onSelect_ === void 0 || onSelect_(itemKey);
setActiveKey(itemKey);
});
var activeIdx = -1;
React.Children.forEach(children, function (child, idx) {
if ( /*#__PURE__*/React.isValidElement(child)) {
var _ref = child.props,
_eventKey = _ref.eventKey;
if (_eventKey != null && _eventKey === activeKey) {
activeIdx = idx;
}
}
});
var ctx = useMemo(function () {
return {
onSelect: onSelect,
activeKey: activeKey
};
}, [onSelect, activeKey]);
return /*#__PURE__*/React.createElement("div", {
className: salesPathClassNames
}, /*#__PURE__*/React.createElement("div", {
className: classnames('slds-grid', 'slds-path__track')
}, /*#__PURE__*/React.createElement("div", {
className: classnames('slds-grid', 'slds-path__scroller-container')
}, /*#__PURE__*/React.createElement("div", {
className: "slds-path__scroller"
}, /*#__PURE__*/React.createElement("div", {
className: "slds-path__scroller_inner"
}, /*#__PURE__*/React.createElement("ul", {
className: "slds-path__nav",
role: "listbox",
"aria-orientation": "horizontal"
}, /*#__PURE__*/React.createElement(SalesPathContext.Provider, {
value: ctx
}, React.Children.map(children, function (child, idx) {
var evaluatedType = idx === activeIdx ? 'current' : idx < activeIdx ? 'complete' : 'incomplete';
return /*#__PURE__*/React.createElement(SalesPathTypeContext.Provider, {
value: evaluatedType
}, child);
}))))))));
}, {
PathItem: SalesPathItem
});
//# sourceMappingURL=SalesPath.js.map