@atlaskit/progress-tracker 8.9.2 → 8.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/progress-tracker.js +96 -118
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/progress-tracker.js +80 -84
- package/dist/esm/index.js +1 -1
- package/dist/esm/progress-tracker.js +97 -120
- package/dist/types/index.d.ts +1 -1
- package/dist/types/progress-tracker.d.ts +15 -37
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/progress-tracker.d.ts +15 -37
- package/package.json +1 -4
- package/dist/cjs/progress-tracker-facade.js +0 -29
- package/dist/cjs/progress-tracker-new.js +0 -129
- package/dist/es2019/progress-tracker-facade.js +0 -21
- package/dist/es2019/progress-tracker-new.js +0 -110
- package/dist/esm/progress-tracker-facade.js +0 -22
- package/dist/esm/progress-tracker-new.js +0 -126
- package/dist/types/progress-tracker-facade.d.ts +0 -15
- package/dist/types/progress-tracker-new.d.ts +0 -43
- package/dist/types-ts4.5/progress-tracker-facade.d.ts +0 -15
- package/dist/types-ts4.5/progress-tracker-new.d.ts +0 -43
|
@@ -1,31 +1,22 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
4
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
2
|
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; }
|
|
9
3
|
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) { _defineProperty(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; }
|
|
10
|
-
function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
|
|
11
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
12
4
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
13
5
|
/**
|
|
14
6
|
* @jsxRuntime classic
|
|
15
7
|
* @jsx jsx
|
|
16
8
|
*/
|
|
17
|
-
import {
|
|
9
|
+
import { useEffect, useRef } from 'react';
|
|
18
10
|
|
|
19
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
20
12
|
import { css, jsx } from '@emotion/react';
|
|
21
|
-
import { spacing } from './constants';
|
|
13
|
+
import { spacing as spacingOptions } from './constants';
|
|
22
14
|
import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
|
|
23
15
|
import Link from './internal/link';
|
|
24
16
|
import Stage from './internal/stage';
|
|
25
17
|
var containerStyles = css({
|
|
26
18
|
display: 'grid',
|
|
27
19
|
width: '100%',
|
|
28
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
29
20
|
margin: '0 auto',
|
|
30
21
|
padding: "var(--ds-space-0, 0px)",
|
|
31
22
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -36,114 +27,100 @@ var containerStyles = css({
|
|
|
36
27
|
marginBlockStart: "var(--ds-space-500, 40px)"
|
|
37
28
|
}
|
|
38
29
|
});
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
30
|
+
/**
|
|
31
|
+
* __Progress tracker__
|
|
32
|
+
*
|
|
33
|
+
* A progress tracker displays the steps and progress through a journey.
|
|
34
|
+
*
|
|
35
|
+
* - [Examples](https://atlassian.design/components/progress-tracker/examples)
|
|
36
|
+
* - [Code](https://atlassian.design/components/progress-tracker/code)
|
|
37
|
+
* - [Usage](https://atlassian.design/components/progress-tracker/usage)
|
|
38
|
+
*/
|
|
39
|
+
var ProgressTracker = function ProgressTracker(_ref) {
|
|
40
|
+
var _listInlineStyles;
|
|
41
|
+
var _ref$items = _ref.items,
|
|
42
|
+
items = _ref$items === void 0 ? [] : _ref$items,
|
|
43
|
+
_ref$spacing = _ref.spacing,
|
|
44
|
+
spacing = _ref$spacing === void 0 ? 'cosy' : _ref$spacing,
|
|
45
|
+
_ref$render = _ref.render,
|
|
46
|
+
render = _ref$render === void 0 ? {
|
|
47
|
+
// Anchor content is coming from another location
|
|
48
|
+
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
49
|
+
link: function link(_ref2) {
|
|
50
|
+
var item = _ref2.item;
|
|
51
|
+
return jsx(Link, item);
|
|
52
|
+
}
|
|
53
|
+
} : _ref$render,
|
|
54
|
+
_ref$animated = _ref.animated,
|
|
55
|
+
animated = _ref$animated === void 0 ? true : _ref$animated,
|
|
56
|
+
testId = _ref.testId,
|
|
57
|
+
_ref$label = _ref.label,
|
|
58
|
+
label = _ref$label === void 0 ? 'Progress' : _ref$label;
|
|
59
|
+
var prevItems = useRef(items.map(function (stage) {
|
|
60
|
+
return _objectSpread(_objectSpread({}, stage), {}, {
|
|
61
|
+
percentageComplete: 0
|
|
55
62
|
});
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
if (stage.percentageComplete < _this3.state.prevStages[index].percentageComplete) {
|
|
98
|
-
/**
|
|
99
|
-
* Load each transition sequentially in reverse.
|
|
100
|
-
*/
|
|
101
|
-
transitionDelay = (stepsBack - 1) * transitionSpeed;
|
|
102
|
-
stepsBack -= 1;
|
|
103
|
-
} else if (stage.percentageComplete > _this3.state.prevStages[index].percentageComplete) {
|
|
104
|
-
/**
|
|
105
|
-
* Load each transition sequentially.
|
|
106
|
-
*/
|
|
107
|
-
transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
|
|
108
|
-
stepsForward -= 1;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
return jsx(Stage, {
|
|
112
|
-
transitionSpeed: transitionSpeed,
|
|
113
|
-
transitionDelay: transitionDelay,
|
|
114
|
-
transitionEasing: transitionEasing,
|
|
115
|
-
key: stage.id,
|
|
116
|
-
item: stage,
|
|
117
|
-
render: _this3.props.render
|
|
118
|
-
});
|
|
119
|
-
});
|
|
120
|
-
var listInlineStyles = (_listInlineStyles = {
|
|
121
|
-
gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
|
|
122
|
-
}, _defineProperty(_listInlineStyles, varSpacing, spacing[this.props.spacing]), _defineProperty(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
|
|
123
|
-
return jsx("ul", {
|
|
124
|
-
"data-testid": testId
|
|
125
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
126
|
-
,
|
|
127
|
-
style: listInlineStyles,
|
|
128
|
-
css: containerStyles,
|
|
129
|
-
"aria-label": label
|
|
130
|
-
}, items);
|
|
131
|
-
}
|
|
132
|
-
}]);
|
|
133
|
-
return ProgressTracker;
|
|
134
|
-
}(PureComponent);
|
|
135
|
-
_defineProperty(ProgressTracker, "defaultProps", {
|
|
136
|
-
items: [],
|
|
137
|
-
spacing: 'cosy',
|
|
138
|
-
render: {
|
|
139
|
-
// Anchor content is coming from another location
|
|
140
|
-
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
141
|
-
link: function link(_ref) {
|
|
142
|
-
var item = _ref.item;
|
|
143
|
-
return jsx(Link, item);
|
|
63
|
+
}));
|
|
64
|
+
var previousStages = items.map(function (stage) {
|
|
65
|
+
var _prevItems$current;
|
|
66
|
+
var oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(function (st) {
|
|
67
|
+
return st.id === stage.id;
|
|
68
|
+
});
|
|
69
|
+
return !!oldStage ? oldStage : stage;
|
|
70
|
+
});
|
|
71
|
+
useEffect(function () {
|
|
72
|
+
prevItems.current = items;
|
|
73
|
+
}, [items]);
|
|
74
|
+
var progressChanges = items.filter(function (stage, index) {
|
|
75
|
+
return stage.percentageComplete !== previousStages[index].percentageComplete;
|
|
76
|
+
}).length;
|
|
77
|
+
var totalStepsForward = items.filter(function (stage, index) {
|
|
78
|
+
return stage.percentageComplete > previousStages[index].percentageComplete;
|
|
79
|
+
}).length;
|
|
80
|
+
var totalStepsBack = items.filter(function (stage, index) {
|
|
81
|
+
return stage.percentageComplete < previousStages[index].percentageComplete;
|
|
82
|
+
}).length;
|
|
83
|
+
var stepsForward = totalStepsForward;
|
|
84
|
+
var stepsBack = totalStepsBack;
|
|
85
|
+
var progressItems = items.map(function (stage, index) {
|
|
86
|
+
var transitionSpeed = 0;
|
|
87
|
+
var transitionDelay = 0;
|
|
88
|
+
var transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
|
|
89
|
+
if (animated) {
|
|
90
|
+
transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
|
|
91
|
+
if (stage.percentageComplete < previousStages[index].percentageComplete) {
|
|
92
|
+
/**
|
|
93
|
+
* Load each transition sequentially in reverse.
|
|
94
|
+
*/
|
|
95
|
+
transitionDelay = (stepsBack - 1) * transitionSpeed;
|
|
96
|
+
stepsBack -= 1;
|
|
97
|
+
} else if (stage.percentageComplete > previousStages[index].percentageComplete) {
|
|
98
|
+
/**
|
|
99
|
+
* Load each transition sequentially.
|
|
100
|
+
*/
|
|
101
|
+
transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
|
|
102
|
+
stepsForward -= 1;
|
|
103
|
+
}
|
|
144
104
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
105
|
+
return jsx(Stage, {
|
|
106
|
+
transitionSpeed: transitionSpeed,
|
|
107
|
+
transitionDelay: transitionDelay,
|
|
108
|
+
transitionEasing: transitionEasing,
|
|
109
|
+
key: stage.id,
|
|
110
|
+
item: stage,
|
|
111
|
+
render: render
|
|
112
|
+
});
|
|
113
|
+
});
|
|
114
|
+
var listInlineStyles = (_listInlineStyles = {
|
|
115
|
+
gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
|
|
116
|
+
}, _defineProperty(_listInlineStyles, varSpacing, spacingOptions[spacing]), _defineProperty(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
|
|
117
|
+
return jsx("ul", {
|
|
118
|
+
"data-testid": testId
|
|
119
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
120
|
+
,
|
|
121
|
+
style: listInlineStyles,
|
|
122
|
+
css: containerStyles,
|
|
123
|
+
"aria-label": label
|
|
124
|
+
}, progressItems);
|
|
125
|
+
};
|
|
126
|
+
export default ProgressTracker;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { PureComponent } from 'react';
|
|
6
1
|
import { jsx } from '@emotion/react';
|
|
7
|
-
import type {
|
|
2
|
+
import type { ProgressTrackerStageRenderProp, Spacing, Stages } from './types';
|
|
8
3
|
export interface ProgressTrackerProps {
|
|
9
4
|
/**
|
|
10
5
|
* Ordered list of stage data.
|
|
@@ -13,15 +8,15 @@ export interface ProgressTrackerProps {
|
|
|
13
8
|
/**
|
|
14
9
|
* Sets the amount of spacing between the steps.
|
|
15
10
|
*/
|
|
16
|
-
spacing
|
|
11
|
+
spacing?: Spacing;
|
|
17
12
|
/**
|
|
18
13
|
* Render prop to specify custom implementations of components.
|
|
19
14
|
*/
|
|
20
|
-
render
|
|
15
|
+
render?: ProgressTrackerStageRenderProp;
|
|
21
16
|
/**
|
|
22
17
|
* Turns off transition animations if set to false.
|
|
23
18
|
*/
|
|
24
|
-
animated
|
|
19
|
+
animated?: boolean;
|
|
25
20
|
/**
|
|
26
21
|
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
27
22
|
*/
|
|
@@ -31,31 +26,14 @@ export interface ProgressTrackerProps {
|
|
|
31
26
|
*/
|
|
32
27
|
label?: string;
|
|
33
28
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
label: string;
|
|
46
|
-
};
|
|
47
|
-
state: {
|
|
48
|
-
prevStages: {
|
|
49
|
-
percentageComplete: number;
|
|
50
|
-
id: string;
|
|
51
|
-
label: string;
|
|
52
|
-
status: import("./types").Status;
|
|
53
|
-
noLink?: boolean | undefined;
|
|
54
|
-
href?: string | undefined;
|
|
55
|
-
onClick?: (() => void) | undefined;
|
|
56
|
-
}[];
|
|
57
|
-
};
|
|
58
|
-
UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
|
|
59
|
-
render(): jsx.JSX.Element;
|
|
60
|
-
}
|
|
61
|
-
export {};
|
|
29
|
+
/**
|
|
30
|
+
* __Progress tracker__
|
|
31
|
+
*
|
|
32
|
+
* A progress tracker displays the steps and progress through a journey.
|
|
33
|
+
*
|
|
34
|
+
* - [Examples](https://atlassian.design/components/progress-tracker/examples)
|
|
35
|
+
* - [Code](https://atlassian.design/components/progress-tracker/code)
|
|
36
|
+
* - [Usage](https://atlassian.design/components/progress-tracker/usage)
|
|
37
|
+
*/
|
|
38
|
+
declare const ProgressTracker: ({ items, spacing, render, animated, testId, label, }: ProgressTrackerProps) => jsx.JSX.Element;
|
|
39
|
+
export default ProgressTracker;
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { PureComponent } from 'react';
|
|
6
1
|
import { jsx } from '@emotion/react';
|
|
7
|
-
import type {
|
|
2
|
+
import type { ProgressTrackerStageRenderProp, Spacing, Stages } from './types';
|
|
8
3
|
export interface ProgressTrackerProps {
|
|
9
4
|
/**
|
|
10
5
|
* Ordered list of stage data.
|
|
@@ -13,15 +8,15 @@ export interface ProgressTrackerProps {
|
|
|
13
8
|
/**
|
|
14
9
|
* Sets the amount of spacing between the steps.
|
|
15
10
|
*/
|
|
16
|
-
spacing
|
|
11
|
+
spacing?: Spacing;
|
|
17
12
|
/**
|
|
18
13
|
* Render prop to specify custom implementations of components.
|
|
19
14
|
*/
|
|
20
|
-
render
|
|
15
|
+
render?: ProgressTrackerStageRenderProp;
|
|
21
16
|
/**
|
|
22
17
|
* Turns off transition animations if set to false.
|
|
23
18
|
*/
|
|
24
|
-
animated
|
|
19
|
+
animated?: boolean;
|
|
25
20
|
/**
|
|
26
21
|
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
27
22
|
*/
|
|
@@ -31,31 +26,14 @@ export interface ProgressTrackerProps {
|
|
|
31
26
|
*/
|
|
32
27
|
label?: string;
|
|
33
28
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
label: string;
|
|
46
|
-
};
|
|
47
|
-
state: {
|
|
48
|
-
prevStages: {
|
|
49
|
-
percentageComplete: number;
|
|
50
|
-
id: string;
|
|
51
|
-
label: string;
|
|
52
|
-
status: import("./types").Status;
|
|
53
|
-
noLink?: boolean | undefined;
|
|
54
|
-
href?: string | undefined;
|
|
55
|
-
onClick?: (() => void) | undefined;
|
|
56
|
-
}[];
|
|
57
|
-
};
|
|
58
|
-
UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
|
|
59
|
-
render(): jsx.JSX.Element;
|
|
60
|
-
}
|
|
61
|
-
export {};
|
|
29
|
+
/**
|
|
30
|
+
* __Progress tracker__
|
|
31
|
+
*
|
|
32
|
+
* A progress tracker displays the steps and progress through a journey.
|
|
33
|
+
*
|
|
34
|
+
* - [Examples](https://atlassian.design/components/progress-tracker/examples)
|
|
35
|
+
* - [Code](https://atlassian.design/components/progress-tracker/code)
|
|
36
|
+
* - [Usage](https://atlassian.design/components/progress-tracker/usage)
|
|
37
|
+
*/
|
|
38
|
+
declare const ProgressTracker: ({ items, spacing, render, animated, testId, label, }: ProgressTrackerProps) => jsx.JSX.Element;
|
|
39
|
+
export default ProgressTracker;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/progress-tracker",
|
|
3
|
-
"version": "8.9.
|
|
3
|
+
"version": "8.9.3",
|
|
4
4
|
"description": "A progress tracker displays the steps and progress through a journey.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -83,9 +83,6 @@
|
|
|
83
83
|
},
|
|
84
84
|
"homepage": "https://atlassian.design/components/progress-tracker/",
|
|
85
85
|
"platform-feature-flags": {
|
|
86
|
-
"platform-progress-tracker-functional-facade": {
|
|
87
|
-
"type": "boolean"
|
|
88
|
-
},
|
|
89
86
|
"platform-design-system-dsp-20687-transition-group": {
|
|
90
87
|
"type": "boolean"
|
|
91
88
|
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.ProgressTrackerFacade = void 0;
|
|
8
|
-
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
|
|
9
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
|
-
var _react = require("@emotion/react");
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
|
-
var _progressTracker = _interopRequireDefault(require("./progress-tracker"));
|
|
13
|
-
var _progressTrackerNew = _interopRequireDefault(require("./progress-tracker-new"));
|
|
14
|
-
/**
|
|
15
|
-
* @jsxRuntime classic
|
|
16
|
-
* @jsx jsx
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* `ProgressTrackerFacade` is a component that conditionally renders either a new functional ProgressTracker component or
|
|
21
|
-
* class based ProgressTracker component based on a feature flag.
|
|
22
|
-
*
|
|
23
|
-
*/
|
|
24
|
-
var ProgressTrackerFacade = exports.ProgressTrackerFacade = function ProgressTrackerFacade(_ref) {
|
|
25
|
-
var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
|
|
26
|
-
var useNewProgressTracker = (0, _platformFeatureFlags.fg)('platform-progress-tracker-functional-facade');
|
|
27
|
-
return useNewProgressTracker ? (0, _react.jsx)(_progressTrackerNew.default, props) : (0, _react.jsx)(_progressTracker.default, props);
|
|
28
|
-
};
|
|
29
|
-
var _default = exports.default = ProgressTrackerFacade;
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _react = require("react");
|
|
10
|
-
var _react2 = require("@emotion/react");
|
|
11
|
-
var _constants = require("./constants");
|
|
12
|
-
var _constants2 = require("./internal/constants");
|
|
13
|
-
var _link = _interopRequireDefault(require("./internal/link"));
|
|
14
|
-
var _stage = _interopRequireDefault(require("./internal/stage"));
|
|
15
|
-
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; }
|
|
16
|
-
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; } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
|
|
17
|
-
* @jsxRuntime classic
|
|
18
|
-
* @jsx jsx
|
|
19
|
-
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
20
|
-
var containerStyles = (0, _react2.css)({
|
|
21
|
-
display: 'grid',
|
|
22
|
-
width: '100%',
|
|
23
|
-
margin: '0 auto',
|
|
24
|
-
padding: "var(--ds-space-0, 0px)",
|
|
25
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
26
|
-
gap: "var(".concat(_constants2.varSpacing, ")"),
|
|
27
|
-
listStyleType: 'none',
|
|
28
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
29
|
-
'&&': {
|
|
30
|
-
marginBlockStart: "var(--ds-space-500, 40px)"
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
/**
|
|
34
|
-
* __Progress tracker__
|
|
35
|
-
*
|
|
36
|
-
* A progress tracker displays the steps and progress through a journey.
|
|
37
|
-
*
|
|
38
|
-
* - [Examples](https://atlassian.design/components/progress-tracker/examples)
|
|
39
|
-
* - [Code](https://atlassian.design/components/progress-tracker/code)
|
|
40
|
-
* - [Usage](https://atlassian.design/components/progress-tracker/usage)
|
|
41
|
-
*/
|
|
42
|
-
var ProgressTracker = function ProgressTracker(_ref) {
|
|
43
|
-
var _listInlineStyles;
|
|
44
|
-
var _ref$items = _ref.items,
|
|
45
|
-
items = _ref$items === void 0 ? [] : _ref$items,
|
|
46
|
-
_ref$spacing = _ref.spacing,
|
|
47
|
-
spacing = _ref$spacing === void 0 ? 'cosy' : _ref$spacing,
|
|
48
|
-
_ref$render = _ref.render,
|
|
49
|
-
render = _ref$render === void 0 ? {
|
|
50
|
-
// Anchor content is coming from another location
|
|
51
|
-
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
52
|
-
link: function link(_ref2) {
|
|
53
|
-
var item = _ref2.item;
|
|
54
|
-
return (0, _react2.jsx)(_link.default, item);
|
|
55
|
-
}
|
|
56
|
-
} : _ref$render,
|
|
57
|
-
_ref$animated = _ref.animated,
|
|
58
|
-
animated = _ref$animated === void 0 ? true : _ref$animated,
|
|
59
|
-
testId = _ref.testId,
|
|
60
|
-
_ref$label = _ref.label,
|
|
61
|
-
label = _ref$label === void 0 ? 'Progress' : _ref$label;
|
|
62
|
-
var prevItems = (0, _react.useRef)(items.map(function (stage) {
|
|
63
|
-
return _objectSpread(_objectSpread({}, stage), {}, {
|
|
64
|
-
percentageComplete: 0
|
|
65
|
-
});
|
|
66
|
-
}));
|
|
67
|
-
var previousStages = items.map(function (stage) {
|
|
68
|
-
var _prevItems$current;
|
|
69
|
-
var oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(function (st) {
|
|
70
|
-
return st.id === stage.id;
|
|
71
|
-
});
|
|
72
|
-
return !!oldStage ? oldStage : stage;
|
|
73
|
-
});
|
|
74
|
-
(0, _react.useEffect)(function () {
|
|
75
|
-
prevItems.current = items;
|
|
76
|
-
}, [items]);
|
|
77
|
-
var progressChanges = items.filter(function (stage, index) {
|
|
78
|
-
return stage.percentageComplete !== previousStages[index].percentageComplete;
|
|
79
|
-
}).length;
|
|
80
|
-
var totalStepsForward = items.filter(function (stage, index) {
|
|
81
|
-
return stage.percentageComplete > previousStages[index].percentageComplete;
|
|
82
|
-
}).length;
|
|
83
|
-
var totalStepsBack = items.filter(function (stage, index) {
|
|
84
|
-
return stage.percentageComplete < previousStages[index].percentageComplete;
|
|
85
|
-
}).length;
|
|
86
|
-
var stepsForward = totalStepsForward;
|
|
87
|
-
var stepsBack = totalStepsBack;
|
|
88
|
-
var progressItems = items.map(function (stage, index) {
|
|
89
|
-
var transitionSpeed = 0;
|
|
90
|
-
var transitionDelay = 0;
|
|
91
|
-
var transitionEasing = progressChanges > 1 ? 'linear' : _constants2.ANIMATION_EASE_OUT;
|
|
92
|
-
if (animated) {
|
|
93
|
-
transitionSpeed = progressChanges > 1 ? _constants2.LINEAR_TRANSITION_SPEED : _constants2.TRANSITION_SPEED;
|
|
94
|
-
if (stage.percentageComplete < previousStages[index].percentageComplete) {
|
|
95
|
-
/**
|
|
96
|
-
* Load each transition sequentially in reverse.
|
|
97
|
-
*/
|
|
98
|
-
transitionDelay = (stepsBack - 1) * transitionSpeed;
|
|
99
|
-
stepsBack -= 1;
|
|
100
|
-
} else if (stage.percentageComplete > previousStages[index].percentageComplete) {
|
|
101
|
-
/**
|
|
102
|
-
* Load each transition sequentially.
|
|
103
|
-
*/
|
|
104
|
-
transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
|
|
105
|
-
stepsForward -= 1;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
return (0, _react2.jsx)(_stage.default, {
|
|
109
|
-
transitionSpeed: transitionSpeed,
|
|
110
|
-
transitionDelay: transitionDelay,
|
|
111
|
-
transitionEasing: transitionEasing,
|
|
112
|
-
key: stage.id,
|
|
113
|
-
item: stage,
|
|
114
|
-
render: render
|
|
115
|
-
});
|
|
116
|
-
});
|
|
117
|
-
var listInlineStyles = (_listInlineStyles = {
|
|
118
|
-
gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
|
|
119
|
-
}, (0, _defineProperty2.default)(_listInlineStyles, _constants2.varSpacing, _constants.spacing[spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
|
|
120
|
-
return (0, _react2.jsx)("ul", {
|
|
121
|
-
"data-testid": testId
|
|
122
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
123
|
-
,
|
|
124
|
-
style: listInlineStyles,
|
|
125
|
-
css: containerStyles,
|
|
126
|
-
"aria-label": label
|
|
127
|
-
}, progressItems);
|
|
128
|
-
};
|
|
129
|
-
var _default = exports.default = ProgressTracker;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { jsx } from '@emotion/react';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
-
import OldProgressTracker from './progress-tracker';
|
|
9
|
-
import NewProgressTracker from './progress-tracker-new';
|
|
10
|
-
/**
|
|
11
|
-
* `ProgressTrackerFacade` is a component that conditionally renders either a new functional ProgressTracker component or
|
|
12
|
-
* class based ProgressTracker component based on a feature flag.
|
|
13
|
-
*
|
|
14
|
-
*/
|
|
15
|
-
export const ProgressTrackerFacade = ({
|
|
16
|
-
...props
|
|
17
|
-
}) => {
|
|
18
|
-
const useNewProgressTracker = fg('platform-progress-tracker-functional-facade');
|
|
19
|
-
return useNewProgressTracker ? jsx(NewProgressTracker, props) : jsx(OldProgressTracker, props);
|
|
20
|
-
};
|
|
21
|
-
export default ProgressTrackerFacade;
|