@capillarytech/blaze-ui 6.1.7 → 6.1.8

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.
Files changed (56) hide show
  1. package/CapDragAndDrop/index.d.ts +3 -19
  2. package/CapDragAndDrop/index.d.ts.map +1 -1
  3. package/CapDragAndDrop/index.js +24 -29
  4. package/CapDragAndDrop/messages.d.ts +25 -0
  5. package/CapDragAndDrop/messages.d.ts.map +1 -0
  6. package/CapDragAndDrop/messages.js +28 -0
  7. package/CapDragAndDrop/styles.css +17 -15
  8. package/CapDragAndDrop/styles.module.scss.js +21 -0
  9. package/CapDragAndDrop/styles.scss +18 -16
  10. package/CapDragAndDrop/types.d.ts +17 -0
  11. package/CapDragAndDrop/types.d.ts.map +1 -0
  12. package/CapDragAndDrop/types.js +1 -0
  13. package/CapMediaPreview/ImageRenderer.d.ts +2 -15
  14. package/CapMediaPreview/ImageRenderer.d.ts.map +1 -1
  15. package/CapMediaPreview/ImageRenderer.js +3 -11
  16. package/CapMediaPreview/MediaRenderer.d.ts +2 -1
  17. package/CapMediaPreview/MediaRenderer.d.ts.map +1 -1
  18. package/CapMediaPreview/MediaRenderer.js +17 -15
  19. package/CapMediaPreview/VideoPlayer.d.ts +2 -1
  20. package/CapMediaPreview/VideoPlayer.d.ts.map +1 -1
  21. package/CapMediaPreview/VideoPlayer.js +16 -15
  22. package/CapMediaPreview/index.d.ts +4 -51
  23. package/CapMediaPreview/index.d.ts.map +1 -1
  24. package/CapMediaPreview/index.js +86 -69
  25. package/CapMediaPreview/styles.css +31 -21
  26. package/CapMediaPreview/styles.module.scss.js +24 -0
  27. package/CapMediaPreview/styles.scss +38 -27
  28. package/CapMediaPreview/types.d.ts +48 -0
  29. package/CapMediaPreview/types.d.ts.map +1 -0
  30. package/CapMediaPreview/types.js +1 -0
  31. package/CapTimeline/CapTimelineCard.d.ts +4 -27
  32. package/CapTimeline/CapTimelineCard.d.ts.map +1 -1
  33. package/CapTimeline/CapTimelineCard.js +40 -157
  34. package/CapTimeline/CapTimelinePanesWrapper.d.ts +4 -25
  35. package/CapTimeline/CapTimelinePanesWrapper.d.ts.map +1 -1
  36. package/CapTimeline/CapTimelinePanesWrapper.js +24 -20
  37. package/CapTimeline/index.d.ts +2 -17
  38. package/CapTimeline/index.d.ts.map +1 -1
  39. package/CapTimeline/index.js +62 -23
  40. package/CapTimeline/messages.d.ts +21 -0
  41. package/CapTimeline/messages.d.ts.map +1 -0
  42. package/CapTimeline/messages.js +24 -0
  43. package/CapTimeline/styles.css +40 -40
  44. package/CapTimeline/styles.module.scss.js +30 -0
  45. package/CapTimeline/styles.scss +76 -57
  46. package/CapTimeline/tests/CapTimeline.mockData.d.ts +14 -0
  47. package/CapTimeline/tests/CapTimeline.mockData.d.ts.map +1 -0
  48. package/CapTimeline/types.d.ts +60 -0
  49. package/CapTimeline/types.d.ts.map +1 -0
  50. package/CapTimeline/types.js +1 -0
  51. package/index.d.ts +6 -0
  52. package/index.d.ts.map +1 -1
  53. package/index.js +175 -169
  54. package/package.json +1 -1
  55. package/utils/getCapThemeConfig.d.ts.map +1 -1
  56. package/utils/getCapThemeConfig.js +9 -1
@@ -1,19 +1,14 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { Timeline } from "antd";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
3
2
  import classNames from "classnames";
4
- import PropTypes from "prop-types";
3
+ import { injectIntl } from "react-intl";
5
4
  import CapCard from "../CapCard/index.js";
6
- import CapIcon from "../CapIcon/index.js";
7
5
  import CapRow from "../CapRow/index.js";
8
6
  import CapTooltip from "../CapTooltip/index.js";
9
- import LocaleHoc from "../LocaleHoc/index.js";
10
- import * as styles__variables from "../styles/_variables.js";
11
- import './styles.css';/* empty css */
12
- const { FONT_SIZE_M, CAP_G04, CAP_RED } = styles__variables;
7
+ import messages from "./messages.js";
8
+ import styles from "./styles.module.scss.js";
13
9
  const clsPrefix = "cap-timeline-card-v1";
14
10
  const CapTimelineCard = (props) => {
15
11
  const {
16
- className,
17
12
  isSelected = false,
18
13
  handleClick = () => {
19
14
  },
@@ -25,170 +20,58 @@ const CapTimelineCard = (props) => {
25
20
  alwaysShowDescription = false,
26
21
  complete = false,
27
22
  configError = false,
28
- defaultConfiguringMessage,
29
23
  paneKey,
30
- isLastPane = false,
31
24
  width = 380,
32
- // texts from the translation file
33
- defaultNotConfiguredMessage,
34
- toConfigure,
35
- completePrevSteps,
36
- edited
25
+ intl: { formatMessage }
37
26
  } = props;
27
+ const defaultConfiguringMessage = formatMessage(messages.defaultConfiguringMessage);
28
+ const defaultNotConfiguredMessage = formatMessage(messages.defaultNotConfiguredMessage);
29
+ const toConfigure = formatMessage(messages.toConfigure);
30
+ const completePrevSteps = formatMessage(messages.completePrevSteps);
38
31
  const getDescriptionForDisabled = () => {
39
- if (alwaysShowDescription) {
40
- return milestoneDescription;
41
- }
32
+ if (alwaysShowDescription) return milestoneDescription;
42
33
  return notConfiguredMessage ? notConfiguredMessage : defaultNotConfiguredMessage;
43
34
  };
44
35
  const getDescriptionForEnabled = () => {
45
- if (alwaysShowDescription) {
46
- return milestoneDescription;
47
- }
36
+ if (alwaysShowDescription) return milestoneDescription;
48
37
  return notConfiguredMessage ? configuringMessage : defaultConfiguringMessage;
49
38
  };
50
- const getTimelineIcon = () => {
51
- if (configError) {
52
- return /* @__PURE__ */ jsx(CapTooltip, { title: "Warning", children: /* @__PURE__ */ jsx(
53
- CapIcon,
54
- {
55
- style: {
56
- color: CAP_RED,
57
- fontSize: FONT_SIZE_M
58
- },
59
- type: "warning",
60
- size: "l"
61
- }
62
- ) });
63
- } else if (!complete || edited) {
64
- return /* @__PURE__ */ jsx(CapTooltip, { title: "Pending", children: /* @__PURE__ */ jsx(
65
- CapIcon,
66
- {
67
- style: {
68
- color: CAP_G04,
69
- fontSize: FONT_SIZE_M,
70
- marginTop: "1px"
71
- },
72
- type: "exclamation-circle"
73
- }
74
- ) });
75
- }
76
- return /* @__PURE__ */ jsx(CapTooltip, { title: "Completed", children: /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-icon-parent`), children: /* @__PURE__ */ jsx(CapIcon, { type: "check" }) }) });
77
- };
78
- return /* @__PURE__ */ jsxs(
79
- CapRow,
39
+ if (disabled) {
40
+ return /* @__PURE__ */ jsx(CapTooltip, { placement: "right", title: `${toConfigure} ${paneKey}, ${completePrevSteps}`, children: /* @__PURE__ */ jsx(CapRow, { className: styles[`${clsPrefix}-disabled-card`], onClick: handleClick, children: /* @__PURE__ */ jsxs(
41
+ CapCard,
42
+ {
43
+ style: { width },
44
+ className: classNames(
45
+ styles[`${clsPrefix}-card-body`],
46
+ styles[`${clsPrefix}-incomplete-card`],
47
+ configError && styles[`${clsPrefix}-warning-card`]
48
+ ),
49
+ children: [
50
+ milestoneHeader,
51
+ /* @__PURE__ */ jsx(CapRow, { className: styles[`${clsPrefix}-card-description`], children: getDescriptionForDisabled() })
52
+ ]
53
+ }
54
+ ) }) });
55
+ }
56
+ return /* @__PURE__ */ jsx(CapRow, { onClick: handleClick, children: /* @__PURE__ */ jsxs(
57
+ CapCard,
80
58
  {
59
+ style: { width },
81
60
  className: classNames(
82
- className,
83
- "no-wrap",
84
- !configError && `${clsPrefix}-division`,
85
- configError && `${clsPrefix}-warning-division`
61
+ isSelected && styles[`${clsPrefix}-pane-selected`],
62
+ styles[`${clsPrefix}-enabled-card`],
63
+ styles[`${clsPrefix}-card-body`],
64
+ !complete && styles[`${clsPrefix}-incomplete-card`],
65
+ configError && styles[`${clsPrefix}-warning-card`]
86
66
  ),
87
- type: "flex",
88
- align: "middle",
89
- justify: "space-between",
90
67
  children: [
91
- disabled && /* @__PURE__ */ jsx(CapTooltip, { placement: "right", title: `${toConfigure} ${paneKey}, ${completePrevSteps}`, children: /* @__PURE__ */ jsx(
92
- Timeline.Item,
93
- {
94
- dot: configError ? /* @__PURE__ */ jsx(
95
- CapIcon,
96
- {
97
- style: {
98
- color: CAP_RED,
99
- fontSize: FONT_SIZE_M
100
- },
101
- type: "warning"
102
- }
103
- ) : /* @__PURE__ */ jsx(
104
- CapIcon,
105
- {
106
- style: {
107
- color: CAP_G04,
108
- fontSize: FONT_SIZE_M,
109
- marginTop: "1px"
110
- },
111
- type: "exclamation-circle"
112
- }
113
- ),
114
- className: classNames(
115
- `${clsPrefix}-disabled-timeline-item`,
116
- isLastPane && `${clsPrefix}-last-pane`
117
- ),
118
- children: /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-disabled-card`), onClick: handleClick, children: /* @__PURE__ */ jsxs(
119
- CapCard,
120
- {
121
- style: { width },
122
- className: classNames(
123
- `${clsPrefix}-card-body`,
124
- `${clsPrefix}-incomplete-card`,
125
- configError && `${clsPrefix}-warning-card`
126
- ),
127
- children: [
128
- milestoneHeader,
129
- /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-card-description`), children: getDescriptionForDisabled() })
130
- ]
131
- }
132
- ) })
133
- }
134
- ) }),
135
- !disabled && /* @__PURE__ */ jsx(
136
- Timeline.Item,
137
- {
138
- dot: getTimelineIcon(),
139
- className: classNames(
140
- `${clsPrefix}-enabled-timeline-item`,
141
- isLastPane && `${clsPrefix}-last-pane`,
142
- complete && `${clsPrefix}-completed-tail`,
143
- configError && `${clsPrefix}-warning-tail`,
144
- configError && `${clsPrefix}-warning-card`,
145
- complete && !isSelected && `${clsPrefix}-complete-head`
146
- ),
147
- children: /* @__PURE__ */ jsx(CapRow, { onClick: handleClick, children: /* @__PURE__ */ jsxs(
148
- CapCard,
149
- {
150
- style: { width },
151
- className: classNames(
152
- isSelected && `${clsPrefix}-pane-selected`,
153
- `${clsPrefix}-enabled-card`,
154
- `${clsPrefix}-card-body`,
155
- !complete && `${clsPrefix}-incomplete-card`,
156
- configError && `${clsPrefix}-warning-card`
157
- ),
158
- children: [
159
- milestoneHeader,
160
- /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-card-description`), children: isSelected ? getDescriptionForEnabled() : milestoneDescription })
161
- ]
162
- }
163
- ) })
164
- }
165
- )
68
+ milestoneHeader,
69
+ /* @__PURE__ */ jsx(CapRow, { className: styles[`${clsPrefix}-card-description`], children: isSelected ? getDescriptionForEnabled() : milestoneDescription })
166
70
  ]
167
71
  }
168
- );
169
- };
170
- CapTimelineCard.propTypes = {
171
- children: PropTypes.any,
172
- className: PropTypes.string,
173
- isSelected: PropTypes.bool,
174
- handleClick: PropTypes.func,
175
- milestoneHeader: PropTypes.element,
176
- milestoneDescription: PropTypes.element,
177
- disabled: PropTypes.bool,
178
- configuringMessage: PropTypes.string,
179
- notConfiguredMessage: PropTypes.string,
180
- alwaysShowDescription: PropTypes.bool,
181
- complete: PropTypes.bool,
182
- configError: PropTypes.bool,
183
- defaultConfiguringMessage: PropTypes.string,
184
- defaultNotConfiguredMessage: PropTypes.string,
185
- toConfigure: PropTypes.string,
186
- completePrevSteps: PropTypes.string,
187
- paneKey: PropTypes.any,
188
- isLastPane: PropTypes.bool,
189
- width: PropTypes.number
72
+ ) });
190
73
  };
191
- const CapTimelineCard$1 = LocaleHoc(CapTimelineCard, { key: "CapTimelineCard" });
74
+ const CapTimelineCard$1 = injectIntl(CapTimelineCard);
192
75
  export {
193
76
  CapTimelineCard,
194
77
  CapTimelineCard$1 as default
@@ -1,28 +1,7 @@
1
- import PropTypes from 'prop-types';
2
1
  import React from 'react';
3
- import './styles.scss';
4
- export declare const CapTimelinePanesWrapper: {
5
- ({ className, isReviewScreen, activeTab, timelineLeftPaneContents, timelineRightCards, }: {
6
- className: any;
7
- isReviewScreen: any;
8
- activeTab: any;
9
- timelineLeftPaneContents: any;
10
- timelineRightCards: any;
11
- }): import("react/jsx-runtime").JSX.Element;
12
- propTypes: {
13
- className: PropTypes.Requireable<string>;
14
- isReviewScreen: PropTypes.Requireable<boolean>;
15
- activeTab: PropTypes.Requireable<string>;
16
- timelineLeftPaneContents: PropTypes.Requireable<object>;
17
- timelineRightCards: PropTypes.Requireable<any[]>;
18
- };
19
- };
20
- declare const _default: React.ComponentType<Omit<{
21
- className: any;
22
- isReviewScreen: any;
23
- activeTab: any;
24
- timelineLeftPaneContents: any;
25
- timelineRightCards: any;
26
- } & import("react-intl").WrappedComponentProps, "intl">>;
2
+ import type { WrappedComponentProps } from 'react-intl';
3
+ import type { CapTimelinePanesWrapperProps } from './types';
4
+ export declare const CapTimelinePanesWrapper: ({ className, isReviewScreen, activeTab, timelineLeftPaneContents, timelineRightCards, timelineClassName, }: CapTimelinePanesWrapperProps & WrappedComponentProps) => import("react/jsx-runtime").JSX.Element;
5
+ declare const _default: React.ComponentType<Omit<CapTimelinePanesWrapperProps & WrappedComponentProps, "intl">>;
27
6
  export default _default;
28
7
  //# sourceMappingURL=CapTimelinePanesWrapper.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"CapTimelinePanesWrapper.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/CapTimelinePanesWrapper.tsx"],"names":[],"mappings":"AAIA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,eAAe,CAAC;AAIvB,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;CAuCnC,CAAC;;;;;;;;AAUF,wBAEG"}
1
+ {"version":3,"file":"CapTimelinePanesWrapper.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/CapTimelinePanesWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAOxD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAI5D,eAAO,MAAM,uBAAuB,GAAI,4GAOrC,4BAA4B,GAAG,qBAAqB,4CA+CtD,CAAC;;AAEF,wBAAmD"}
@@ -1,47 +1,51 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { Timeline } from "antd-v5";
2
3
  import classNames from "classnames";
3
- import PropTypes from "prop-types";
4
+ import { injectIntl } from "react-intl";
4
5
  import CapColumn from "../CapColumn/index.js";
5
6
  import CapDivider from "../CapDivider/index.js";
6
7
  import CapRow from "../CapRow/index.js";
7
- import LocaleHoc from "../LocaleHoc/index.js";
8
- import './styles.css';/* empty css */
8
+ import styles from "./styles.module.scss.js";
9
9
  const clsPrefix = "cap-timeline-panes-wrapper-v1";
10
10
  const CapTimelinePanesWrapper = ({
11
11
  className,
12
12
  isReviewScreen,
13
13
  activeTab,
14
14
  timelineLeftPaneContents,
15
- timelineRightCards
15
+ timelineRightCards,
16
+ timelineClassName
16
17
  }) => {
17
18
  const renderActiveTabContent = () => {
18
19
  return Object.keys(timelineLeftPaneContents).map((key, index) => {
19
- const className2 = activeTab === key || isReviewScreen ? `${clsPrefix}-active-pane` : `${clsPrefix}-inactive-pane`;
20
- return /* @__PURE__ */ jsx(CapRow, { className: classNames(className2), id: key, children: timelineLeftPaneContents[key] }, index);
20
+ const paneClassName = activeTab === key || isReviewScreen ? styles[`${clsPrefix}-active-pane`] : styles[`${clsPrefix}-inactive-pane`];
21
+ return /* @__PURE__ */ jsx(CapRow, { className: classNames(paneClassName), id: key, children: timelineLeftPaneContents[key] }, index);
21
22
  });
22
23
  };
23
- return /* @__PURE__ */ jsxs(CapRow, { className: classNames(className, `${clsPrefix}-pane-wrapper`), children: [
24
- /* @__PURE__ */ jsx(CapColumn, { className: classNames(`${clsPrefix}-left-pane-col`, `${clsPrefix}-custom-scroll`), children: timelineRightCards }),
25
- /* @__PURE__ */ jsx(CapColumn, { className: classNames(`${clsPrefix}-divider-col`), children: /* @__PURE__ */ jsx(CapDivider, { className: `${clsPrefix}-timelinePane-divider`, type: "vertical" }) }),
24
+ return /* @__PURE__ */ jsxs(CapRow, { className: classNames(className, styles[`${clsPrefix}-pane-wrapper`]), children: [
26
25
  /* @__PURE__ */ jsx(
27
26
  CapColumn,
28
27
  {
29
- className: classNames(`${clsPrefix}-right-pane-col`, `${clsPrefix}-custom-scroll`),
28
+ className: classNames(
29
+ styles[`${clsPrefix}-left-pane-col`],
30
+ styles[`${clsPrefix}-custom-scroll`]
31
+ ),
32
+ children: /* @__PURE__ */ jsx(Timeline, { className: timelineClassName, children: timelineRightCards.map((item) => /* @__PURE__ */ jsx(Timeline.Item, { dot: item.icon, className: item.className, children: item.content }, item.key)) })
33
+ }
34
+ ),
35
+ /* @__PURE__ */ jsx(CapColumn, { className: classNames(styles[`${clsPrefix}-divider-col`]), children: /* @__PURE__ */ jsx(CapDivider, { className: styles[`${clsPrefix}-timelinePane-divider`], type: "vertical" }) }),
36
+ /* @__PURE__ */ jsx(
37
+ CapColumn,
38
+ {
39
+ className: classNames(
40
+ styles[`${clsPrefix}-right-pane-col`],
41
+ styles[`${clsPrefix}-custom-scroll`]
42
+ ),
30
43
  children: renderActiveTabContent()
31
44
  }
32
45
  )
33
46
  ] });
34
47
  };
35
- CapTimelinePanesWrapper.propTypes = {
36
- className: PropTypes.string,
37
- isReviewScreen: PropTypes.bool,
38
- activeTab: PropTypes.string,
39
- timelineLeftPaneContents: PropTypes.object,
40
- timelineRightCards: PropTypes.array
41
- };
42
- const CapTimelinePanesWrapper$1 = LocaleHoc(CapTimelinePanesWrapper, {
43
- key: "CapTimelinePanesWrapper"
44
- });
48
+ const CapTimelinePanesWrapper$1 = injectIntl(CapTimelinePanesWrapper);
45
49
  export {
46
50
  CapTimelinePanesWrapper,
47
51
  CapTimelinePanesWrapper$1 as default
@@ -3,22 +3,7 @@
3
3
  * CapTimeline
4
4
  *
5
5
  */
6
- import PropTypes from 'prop-types';
7
- import './styles.scss';
8
- declare const CapTimeline: {
9
- ({ className, timelinePanes, activeTab, isReviewScreen, width }: {
10
- className: any;
11
- timelinePanes: any;
12
- activeTab: any;
13
- isReviewScreen: any;
14
- width: any;
15
- }): import("react/jsx-runtime").JSX.Element;
16
- propTypes: {
17
- timelinePanes: PropTypes.Requireable<any[]>;
18
- currentStep: PropTypes.Requireable<string>;
19
- setCurrentStep: PropTypes.Requireable<(...args: any[]) => any>;
20
- width: PropTypes.Requireable<number>;
21
- };
22
- };
6
+ import type { CapTimelineProps } from './types';
7
+ declare const CapTimeline: ({ className, timelinePanes, activeTab, isReviewScreen, width, }: CapTimelineProps) => import("react/jsx-runtime").JSX.Element;
23
8
  export default CapTimeline;
24
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,SAAS,MAAM,YAAY,CAAC;AAOnC,OAAO,eAAe,CAAC;AAIvB,QAAA,MAAM,WAAW;;;;;;;;;;;;;;CA6DhB,CAAC;AASF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,OAAO,KAAK,EAAE,gBAAgB,EAAoB,MAAM,SAAS,CAAC;AAMlE,QAAA,MAAM,WAAW,GAAI,iEAMlB,gBAAgB,4CAoHlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,13 +1,22 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { Timeline } from "antd";
3
2
  import classNames from "classnames";
4
- import PropTypes from "prop-types";
3
+ import CapIcon from "../CapIcon/index.js";
5
4
  import CapRow from "../CapRow/index.js";
5
+ import CapTooltip from "../CapTooltip/index.js";
6
+ import * as styles__variables from "../styles/_variables.js";
6
7
  import CapTimelineCard from "./CapTimelineCard.js";
7
8
  import CapTimelinePanesWrapper from "./CapTimelinePanesWrapper.js";
8
- import './styles.css';/* empty css */
9
+ import styles from "./styles.module.scss.js";
10
+ const { FONT_SIZE_M, CAP_G04, CAP_RED } = styles__variables;
11
+ const clsCardPrefix = "cap-timeline-card-v1";
9
12
  const clsPrefix = "cap-timeline-v1";
10
- const CapTimeline = ({ className, timelinePanes, activeTab, isReviewScreen, width }) => {
13
+ const CapTimeline = ({
14
+ className,
15
+ timelinePanes,
16
+ activeTab,
17
+ isReviewScreen,
18
+ width = 380
19
+ }) => {
11
20
  const { timelineLeftPaneContents, timelineRightCards } = timelinePanes.reduce(
12
21
  (accumulator, {
13
22
  milestoneHeader,
@@ -22,10 +31,37 @@ const CapTimeline = ({ className, timelinePanes, activeTab, isReviewScreen, widt
22
31
  content,
23
32
  configError,
24
33
  edited,
25
- handleClick
34
+ handleClick = () => {
35
+ }
26
36
  }, index) => {
27
- accumulator.timelineRightCards.push(
28
- /* @__PURE__ */ jsx(
37
+ const isSelected = activeTab === key;
38
+ const isLastPane = index === (timelinePanes == null ? void 0 : timelinePanes.length) - 1;
39
+ let icon;
40
+ if (disabled) {
41
+ icon = configError ? /* @__PURE__ */ jsx(CapIcon, { style: { color: CAP_RED, fontSize: FONT_SIZE_M }, type: "warning" }) : /* @__PURE__ */ jsx(
42
+ CapIcon,
43
+ {
44
+ style: { color: CAP_G04, fontSize: FONT_SIZE_M, marginTop: "1px" },
45
+ type: "exclamation-circle"
46
+ }
47
+ );
48
+ } else if (configError) {
49
+ icon = /* @__PURE__ */ jsx(CapTooltip, { title: "Warning", children: /* @__PURE__ */ jsx(CapIcon, { style: { color: CAP_RED, fontSize: FONT_SIZE_M }, type: "warning", size: "l" }) });
50
+ } else if (!complete || edited) {
51
+ icon = /* @__PURE__ */ jsx(CapTooltip, { title: "Pending", children: /* @__PURE__ */ jsx(
52
+ CapIcon,
53
+ {
54
+ style: { color: CAP_G04, fontSize: FONT_SIZE_M, marginTop: "1px" },
55
+ type: "exclamation-circle"
56
+ }
57
+ ) });
58
+ } else {
59
+ icon = /* @__PURE__ */ jsx(CapTooltip, { title: "Completed", children: /* @__PURE__ */ jsx("span", { className: styles[`${clsCardPrefix}-icon-parent`], children: /* @__PURE__ */ jsx(CapIcon, { type: "check", style: { fontSize: FONT_SIZE_M } }) }) });
60
+ }
61
+ const item = {
62
+ key,
63
+ icon,
64
+ content: /* @__PURE__ */ jsx(
29
65
  CapTimelineCard,
30
66
  {
31
67
  milestoneHeader,
@@ -37,15 +73,23 @@ const CapTimeline = ({ className, timelinePanes, activeTab, isReviewScreen, widt
37
73
  alwaysShowDescription,
38
74
  complete,
39
75
  configError,
40
- isLastPane: index === (timelinePanes == null ? void 0 : timelinePanes.length) - 1 ? true : false,
41
- width,
42
- edited,
43
76
  handleClick,
44
- isSelected: activeTab === key
45
- },
46
- key
77
+ isSelected,
78
+ isLastPane,
79
+ width
80
+ }
81
+ ),
82
+ className: classNames(
83
+ disabled ? styles[`${clsCardPrefix}-disabled-timeline-item`] : styles[`${clsCardPrefix}-enabled-timeline-item`],
84
+ isLastPane && styles[`${clsCardPrefix}-last-pane`],
85
+ !disabled && complete && styles[`${clsCardPrefix}-completed-tail`],
86
+ !disabled && configError && styles[`${clsCardPrefix}-warning-tail`],
87
+ !disabled && configError && styles[`${clsCardPrefix}-warning-card`],
88
+ !disabled && complete && !isSelected && styles[`${clsCardPrefix}-complete-head`],
89
+ !configError ? styles[`${clsCardPrefix}-division`] : styles[`${clsCardPrefix}-warning-division`]
47
90
  )
48
- );
91
+ };
92
+ accumulator.timelineRightCards.push(item);
49
93
  accumulator.timelineLeftPaneContents[key] = content;
50
94
  return accumulator;
51
95
  },
@@ -54,21 +98,16 @@ const CapTimeline = ({ className, timelinePanes, activeTab, isReviewScreen, widt
54
98
  timelineRightCards: []
55
99
  }
56
100
  );
57
- return /* @__PURE__ */ jsx(CapRow, { className, children: /* @__PURE__ */ jsx(Timeline, { className: classNames(`${clsPrefix}-body`), children: /* @__PURE__ */ jsx(
101
+ return /* @__PURE__ */ jsx(CapRow, { className, children: /* @__PURE__ */ jsx(
58
102
  CapTimelinePanesWrapper,
59
103
  {
60
104
  activeTab,
61
105
  timelineLeftPaneContents,
62
106
  timelineRightCards,
63
- isReviewScreen
107
+ isReviewScreen,
108
+ timelineClassName: styles[`${clsPrefix}-body`]
64
109
  }
65
- ) }) });
66
- };
67
- CapTimeline.propTypes = {
68
- timelinePanes: PropTypes.array,
69
- currentStep: PropTypes.string,
70
- setCurrentStep: PropTypes.func,
71
- width: PropTypes.number
110
+ ) });
72
111
  };
73
112
  export {
74
113
  CapTimeline as default
@@ -0,0 +1,21 @@
1
+ export declare const scope = "app.commonUtils.capUiLibrary.CapTimelineCard";
2
+ declare const _default: {
3
+ defaultConfiguringMessage: {
4
+ id: string;
5
+ defaultMessage: string;
6
+ };
7
+ defaultNotConfiguredMessage: {
8
+ id: string;
9
+ defaultMessage: string;
10
+ };
11
+ toConfigure: {
12
+ id: string;
13
+ defaultMessage: string;
14
+ };
15
+ completePrevSteps: {
16
+ id: string;
17
+ defaultMessage: string;
18
+ };
19
+ };
20
+ export default _default;
21
+ //# sourceMappingURL=messages.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,iDAAiD,CAAC;;;;;;;;;;;;;;;;;;;AAEpE,wBAiBG"}
@@ -0,0 +1,24 @@
1
+ import { defineMessages } from "react-intl";
2
+ const scope = "app.commonUtils.capUiLibrary.CapTimelineCard";
3
+ const messages = defineMessages({
4
+ defaultConfiguringMessage: {
5
+ id: `${scope}.defaultConfiguringMessage`,
6
+ defaultMessage: "Configuring..."
7
+ },
8
+ defaultNotConfiguredMessage: {
9
+ id: `${scope}.defaultNotConfiguredMessage`,
10
+ defaultMessage: "Not configured yet..."
11
+ },
12
+ toConfigure: {
13
+ id: `${scope}.toConfigure`,
14
+ defaultMessage: "To configure "
15
+ },
16
+ completePrevSteps: {
17
+ id: `${scope}.completePrevSteps`,
18
+ defaultMessage: " complete the previous steps."
19
+ }
20
+ });
21
+ export {
22
+ messages as default,
23
+ scope
24
+ };