@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
266 lines (257 loc) • 8.95 kB
JavaScript
/**
* MSKCC 2021, 2024
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var iconsReact = require('@carbon/icons-react');
var usePrefix = require('../../internal/usePrefix.js');
var match = require('../../internal/keyboard/match.js');
var keys = require('../../internal/keyboard/keys.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const defaultTranslations = {
'carbon.progress-step.complete': 'Complete',
'carbon.progress-step.incomplete': 'Incomplete',
'carbon.progress-step.current': 'Current',
'carbon.progress-step.invalid': 'Invalid'
};
function translateWithId(messageId) {
return defaultTranslations[messageId];
}
function ProgressIndicator(_ref) {
let {
children,
className: customClassName,
currentIndex: controlledIndex = 0,
onChange,
spaceEqually,
vertical,
...rest
} = _ref;
const prefix = usePrefix.usePrefix();
const [currentIndex, setCurrentIndex] = React.useState(controlledIndex);
const [prevControlledIndex, setPrevControlledIndex] = React.useState(controlledIndex);
const className = cx__default["default"]({
[`${prefix}--progress`]: true,
[`${prefix}--progress--vertical`]: vertical,
[`${prefix}--progress--space-equal`]: spaceEqually && !vertical,
[customClassName]: customClassName
});
if (controlledIndex !== prevControlledIndex) {
setCurrentIndex(controlledIndex);
setPrevControlledIndex(controlledIndex);
}
return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
className: className
}, rest), React__default["default"].Children.map(children, (child, index) => {
// only setup click handlers if onChange event is passed
const onClick = onChange ? () => onChange(index) : undefined;
if (index === currentIndex) {
return /*#__PURE__*/React__default["default"].cloneElement(child, {
complete: child.props.complete,
current: child.props.complete ? false : true,
index,
onClick
});
}
if (index < currentIndex) {
return /*#__PURE__*/React__default["default"].cloneElement(child, {
complete: true,
index,
onClick
});
}
if (index > currentIndex) {
return /*#__PURE__*/React__default["default"].cloneElement(child, {
complete: child.props.complete || false,
index,
onClick
});
}
return null;
}));
}
ProgressIndicator.propTypes = {
/**
* Provide `<ProgressStep>` components to be rendered in the
* `<ProgressIndicator>`
*/
children: PropTypes__default["default"].node,
/**
* Provide an optional className to be applied to the containing node
*/
className: PropTypes__default["default"].string,
/**
* Optionally specify the current step array index
*/
currentIndex: PropTypes__default["default"].number,
/**
* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
*/
onChange: PropTypes__default["default"].func,
/**
* Specify whether the progress steps should be split equally in size in the div
*/
spaceEqually: PropTypes__default["default"].bool,
/**
* Determines whether or not the ProgressIndicator should be rendered vertically.
*/
vertical: PropTypes__default["default"].bool
};
function ProgressStep(_ref2) {
let {
label,
description,
className,
current,
complete,
invalid,
secondaryLabel,
disabled,
onClick,
translateWithId: t,
...rest
} = _ref2;
const prefix = usePrefix.usePrefix();
const classes = cx__default["default"]({
[`${prefix}--progress-step`]: true,
[`${prefix}--progress-step--current`]: current,
[`${prefix}--progress-step--complete`]: complete,
[`${prefix}--progress-step--incomplete`]: !complete && !current,
[`${prefix}--progress-step--disabled`]: disabled,
[className]: className
});
const handleKeyDown = e => {
if (match.matches(e, [keys.Enter, keys.Space])) {
onClick();
}
};
// eslint-disable-next-line react/prop-types
const SVGIcon = _ref3 => {
let {
complete,
current,
description,
invalid,
prefix
} = _ref3;
if (invalid) {
return /*#__PURE__*/React__default["default"].createElement(iconsReact.Warning, {
className: `${prefix}--progress__warning`
}, /*#__PURE__*/React__default["default"].createElement("title", null, description));
}
if (current) {
return /*#__PURE__*/React__default["default"].createElement(iconsReact.Incomplete, null, /*#__PURE__*/React__default["default"].createElement("title", null, description));
}
if (complete) {
return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkOutline, null, /*#__PURE__*/React__default["default"].createElement("title", null, description));
}
return /*#__PURE__*/React__default["default"].createElement(iconsReact.CircleDash, null, /*#__PURE__*/React__default["default"].createElement("title", null, description));
};
let message = t('carbon.progress-step.incomplete');
if (current) {
message = t('carbon.progress-step.current');
}
if (complete) {
message = t('carbon.progress-step.complete');
}
if (invalid) {
message = t('carbon.progress-step.invalid');
}
return /*#__PURE__*/React__default["default"].createElement("li", {
className: classes
}, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
type: "button",
className: cx__default["default"](`${prefix}--progress-step-button`, {
[`${prefix}--progress-step-button--unclickable`]: !onClick || current
}),
disabled: disabled,
"aria-disabled": disabled,
tabIndex: !current && onClick && !disabled ? 0 : -1,
onClick: !current ? onClick : undefined,
onKeyDown: handleKeyDown,
title: label
}, rest), /*#__PURE__*/React__default["default"].createElement(SVGIcon, {
complete: complete,
current: current,
description: description,
invalid: invalid,
prefix: prefix
}), /*#__PURE__*/React__default["default"].createElement("div", {
className: `${prefix}--progress-text`
}, /*#__PURE__*/React__default["default"].createElement("p", {
className: `${prefix}--progress-label`
}, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default["default"].createElement("p", {
className: `${prefix}--progress-optional`
}, secondaryLabel) : null), /*#__PURE__*/React__default["default"].createElement("span", {
className: `${prefix}--assistive-text`
}, message), /*#__PURE__*/React__default["default"].createElement("span", {
className: `${prefix}--progress-line`
})));
}
ProgressStep.propTypes = {
/**
* Provide an optional className to be applied to the containing `<li>` node
*/
className: PropTypes__default["default"].string,
/**
* Specify whether the step has been completed
*/
complete: PropTypes__default["default"].bool,
/**
* Specify whether the step is the current step
*/
current: PropTypes__default["default"].bool,
/**
* Provide a description for the `<ProgressStep>`
*/
description: PropTypes__default["default"].string,
/**
* Specify whether the step is disabled
*/
disabled: PropTypes__default["default"].bool,
/**
* Index of the current step within the ProgressIndicator
*/
index: PropTypes__default["default"].number,
/**
* Specify whether the step is invalid
*/
invalid: PropTypes__default["default"].bool,
/**
* Provide the label for the `<ProgressStep>`
*/
label: PropTypes__default["default"].node.isRequired,
/**
* A callback called if the step is clicked or the enter key is pressed
*/
onClick: PropTypes__default["default"].func,
/**
* Provide the props that describe a progress step tooltip
*/
overflowTooltipProps: PropTypes__default["default"].object,
/**
* Provide an optional secondary label
*/
secondaryLabel: PropTypes__default["default"].string,
/**
* The ID of the tooltip content.
*/
tooltipId: PropTypes__default["default"].string,
/**
* Optional method that takes in a message id and returns an
* internationalized string.
*/
translateWithId: PropTypes__default["default"].func
};
ProgressStep.defaultProps = {
translateWithId
};
exports.ProgressIndicator = ProgressIndicator;
exports.ProgressStep = ProgressStep;