@atlaskit/progress-tracker
Version:
A progress tracker displays the steps and progress through a journey.
124 lines (123 loc) • 6.31 kB
JavaScript
/* progress-tracker.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./progress-tracker.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _link = _interopRequireDefault(require("./internal/link"));
var _stage = _interopRequireDefault(require("./internal/stage"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 containerStyles = null;
var spacingOptions = {
comfortable: "var(--ds-space-500, 40px)",
cozy: "var(--ds-space-200, 16px)",
// @deprecated left for backwards compatibility
cosy: "var(--ds-space-200, 16px)",
compact: "var(--ds-space-050, 4px)"
};
/**
* __Progress tracker__
*
* A progress tracker displays the steps and progress through a journey.
*
* - [Examples](https://atlassian.design/components/progress-tracker/examples)
* - [Code](https://atlassian.design/components/progress-tracker/code)
* - [Usage](https://atlassian.design/components/progress-tracker/usage)
*/
var ProgressTracker = function ProgressTracker(_ref) {
var _ref$items = _ref.items,
items = _ref$items === void 0 ? [] : _ref$items,
_ref$spacing = _ref.spacing,
spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
_ref$render = _ref.render,
render = _ref$render === void 0 ? {
link: function link(_ref2) {
var item = _ref2.item;
return (
/*#__PURE__*/
// Anchor content is coming from another location
// eslint-disable-next-line @atlassian/a11y/anchor-has-content
React.createElement(_link.default, item)
);
}
} : _ref$render,
_ref$animated = _ref.animated,
animated = _ref$animated === void 0 ? true : _ref$animated,
testId = _ref.testId,
_ref$label = _ref.label,
label = _ref$label === void 0 ? 'Progress' : _ref$label;
var prevItems = (0, _react.useRef)(items.map(function (stage) {
return _objectSpread(_objectSpread({}, stage), {}, {
percentageComplete: 0
});
}));
var previousStages = items.map(function (stage) {
var _prevItems$current;
var oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(function (st) {
return st.id === stage.id;
});
return !!oldStage ? oldStage : stage;
});
(0, _react.useEffect)(function () {
prevItems.current = items;
}, [items]);
var progressChanges = items.filter(function (stage, index) {
return stage.percentageComplete !== previousStages[index].percentageComplete;
}).length;
var totalStepsForward = items.filter(function (stage, index) {
return stage.percentageComplete > previousStages[index].percentageComplete;
}).length;
var totalStepsBack = items.filter(function (stage, index) {
return stage.percentageComplete < previousStages[index].percentageComplete;
}).length;
var stepsForward = totalStepsForward;
var stepsBack = totalStepsBack;
var progressItems = items.map(function (stage, index) {
var transitionSpeed = 0;
var transitionDelay = 0;
var transitionEasing = progressChanges > 1 ? 'linear' : 'cubic-bezier(0.15,1,0.3,1)';
if (animated) {
transitionSpeed = progressChanges > 1 ? 50 : 300;
if (stage.percentageComplete < previousStages[index].percentageComplete) {
/**
* Load each transition sequentially in reverse.
*/
transitionDelay = (stepsBack - 1) * transitionSpeed;
stepsBack -= 1;
} else if (stage.percentageComplete > previousStages[index].percentageComplete) {
/**
* Load each transition sequentially.
*/
transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
stepsForward -= 1;
}
}
return /*#__PURE__*/React.createElement(_stage.default, {
transitionSpeed: transitionSpeed,
transitionDelay: transitionDelay,
transitionEasing: transitionEasing,
key: stage.id,
item: stage,
render: render
});
});
var listInlineStyles = (0, _defineProperty2.default)((0, _defineProperty2.default)({
gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
}, '--ds--pt--sp', spacingOptions[spacing]), "maxWidth", 8 * 10 * items.length * 2);
return /*#__PURE__*/React.createElement("ol", {
"data-testid": testId,
style: listInlineStyles,
"aria-label": label,
className: (0, _runtime.ax)(["_19pkidpf _2hwx1wug _otyridpf _18u01wug _zulp6odm _1e0c11p5 _1bsb1osq _2mzuglyw _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _rxvc1jfw"])
}, progressItems);
};
var _default = exports.default = ProgressTracker;