@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.
- package/CapDragAndDrop/index.d.ts +3 -19
- package/CapDragAndDrop/index.d.ts.map +1 -1
- package/CapDragAndDrop/index.js +24 -29
- package/CapDragAndDrop/messages.d.ts +25 -0
- package/CapDragAndDrop/messages.d.ts.map +1 -0
- package/CapDragAndDrop/messages.js +28 -0
- package/CapDragAndDrop/styles.css +17 -15
- package/CapDragAndDrop/styles.module.scss.js +21 -0
- package/CapDragAndDrop/styles.scss +18 -16
- package/CapDragAndDrop/types.d.ts +17 -0
- package/CapDragAndDrop/types.d.ts.map +1 -0
- package/CapDragAndDrop/types.js +1 -0
- package/CapMediaPreview/ImageRenderer.d.ts +2 -15
- package/CapMediaPreview/ImageRenderer.d.ts.map +1 -1
- package/CapMediaPreview/ImageRenderer.js +3 -11
- package/CapMediaPreview/MediaRenderer.d.ts +2 -1
- package/CapMediaPreview/MediaRenderer.d.ts.map +1 -1
- package/CapMediaPreview/MediaRenderer.js +17 -15
- package/CapMediaPreview/VideoPlayer.d.ts +2 -1
- package/CapMediaPreview/VideoPlayer.d.ts.map +1 -1
- package/CapMediaPreview/VideoPlayer.js +16 -15
- package/CapMediaPreview/index.d.ts +4 -51
- package/CapMediaPreview/index.d.ts.map +1 -1
- package/CapMediaPreview/index.js +86 -69
- package/CapMediaPreview/styles.css +31 -21
- package/CapMediaPreview/styles.module.scss.js +24 -0
- package/CapMediaPreview/styles.scss +38 -27
- package/CapMediaPreview/types.d.ts +48 -0
- package/CapMediaPreview/types.d.ts.map +1 -0
- package/CapMediaPreview/types.js +1 -0
- package/CapTimeline/CapTimelineCard.d.ts +4 -27
- package/CapTimeline/CapTimelineCard.d.ts.map +1 -1
- package/CapTimeline/CapTimelineCard.js +40 -157
- package/CapTimeline/CapTimelinePanesWrapper.d.ts +4 -25
- package/CapTimeline/CapTimelinePanesWrapper.d.ts.map +1 -1
- package/CapTimeline/CapTimelinePanesWrapper.js +24 -20
- package/CapTimeline/index.d.ts +2 -17
- package/CapTimeline/index.d.ts.map +1 -1
- package/CapTimeline/index.js +62 -23
- package/CapTimeline/messages.d.ts +21 -0
- package/CapTimeline/messages.d.ts.map +1 -0
- package/CapTimeline/messages.js +24 -0
- package/CapTimeline/styles.css +40 -40
- package/CapTimeline/styles.module.scss.js +30 -0
- package/CapTimeline/styles.scss +76 -57
- package/CapTimeline/tests/CapTimeline.mockData.d.ts +14 -0
- package/CapTimeline/tests/CapTimeline.mockData.d.ts.map +1 -0
- package/CapTimeline/types.d.ts +60 -0
- package/CapTimeline/types.d.ts.map +1 -0
- package/CapTimeline/types.js +1 -0
- package/index.d.ts +6 -0
- package/index.d.ts.map +1 -1
- package/index.js +175 -169
- package/package.json +1 -1
- package/utils/getCapThemeConfig.d.ts.map +1 -1
- package/utils/getCapThemeConfig.js +9 -1
package/CapMediaPreview/index.js
CHANGED
|
@@ -1,37 +1,39 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Modal } from "antd";
|
|
2
|
+
import { Modal } from "antd-v5";
|
|
3
3
|
import classNames from "classnames";
|
|
4
|
-
import PropTypes from "prop-types";
|
|
5
4
|
import { useState, useEffect, useCallback } from "react";
|
|
6
5
|
import { injectIntl } from "react-intl";
|
|
7
6
|
import CapHeader from "../CapHeader/index.js";
|
|
8
7
|
import CapIcon from "../CapIcon/index.js";
|
|
9
8
|
import CapRow from "../CapRow/index.js";
|
|
9
|
+
import logDeprecationWarning from "../utils/logDeprecationWarning.js";
|
|
10
10
|
import { CLASS_PREFIX } from "./constants.js";
|
|
11
11
|
import MediaRenderer from "./MediaRenderer.js";
|
|
12
12
|
import messages from "./messages.js";
|
|
13
|
-
import
|
|
13
|
+
import styles from "./styles.module.scss.js";
|
|
14
14
|
const CapMediaPreview = ({
|
|
15
15
|
intl: { formatMessage },
|
|
16
|
-
overrideClassName,
|
|
17
|
-
overrideWrapperClassName,
|
|
18
|
-
isMediaPreviewVisible,
|
|
19
|
-
media,
|
|
20
|
-
startIndex,
|
|
21
|
-
width,
|
|
22
|
-
height,
|
|
23
|
-
topNavigationHeight,
|
|
24
|
-
onClose
|
|
25
|
-
|
|
16
|
+
overrideClassName = "",
|
|
17
|
+
overrideWrapperClassName = "",
|
|
18
|
+
isMediaPreviewVisible = false,
|
|
19
|
+
media = [],
|
|
20
|
+
startIndex = 0,
|
|
21
|
+
width = "100vw",
|
|
22
|
+
height = "100vh",
|
|
23
|
+
topNavigationHeight = "64px",
|
|
24
|
+
onClose = () => {
|
|
25
|
+
},
|
|
26
|
+
modalProps = {},
|
|
27
|
+
...rest
|
|
26
28
|
}) => {
|
|
27
|
-
const [currentIndex, setCurrentIndex] = useState(startIndex
|
|
29
|
+
const [currentIndex, setCurrentIndex] = useState(startIndex);
|
|
28
30
|
const mediaLength = (media == null ? void 0 : media.length) || 0;
|
|
29
31
|
const currentMedia = media && media[currentIndex] ? media[currentIndex] : {};
|
|
30
32
|
const showNavigation = mediaLength > 1;
|
|
31
33
|
const isLeftNavDisabled = currentIndex === 0;
|
|
32
34
|
const isRightNavDisabled = currentIndex === mediaLength - 1;
|
|
33
35
|
useEffect(() => {
|
|
34
|
-
if (isMediaPreviewVisible
|
|
36
|
+
if (isMediaPreviewVisible) {
|
|
35
37
|
setCurrentIndex(startIndex);
|
|
36
38
|
}
|
|
37
39
|
}, [startIndex, isMediaPreviewVisible]);
|
|
@@ -71,64 +73,113 @@ const CapMediaPreview = ({
|
|
|
71
73
|
if (!isMediaPreviewVisible || !(media == null ? void 0 : media.length)) {
|
|
72
74
|
return /* @__PURE__ */ jsx(Fragment, {});
|
|
73
75
|
}
|
|
76
|
+
const modalPropsWithDeprecation = modalProps;
|
|
77
|
+
if (modalPropsWithDeprecation.visible !== void 0) {
|
|
78
|
+
logDeprecationWarning("CapMediaPreview", "visible", modalPropsWithDeprecation.visible, "open");
|
|
79
|
+
}
|
|
80
|
+
if (modalPropsWithDeprecation.onVisibleChange !== void 0) {
|
|
81
|
+
logDeprecationWarning(
|
|
82
|
+
"CapMediaPreview",
|
|
83
|
+
"onVisibleChange",
|
|
84
|
+
modalPropsWithDeprecation.onVisibleChange,
|
|
85
|
+
"afterOpenChange"
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
const finalOpen = modalPropsWithDeprecation.open ?? modalPropsWithDeprecation.visible ?? isMediaPreviewVisible;
|
|
89
|
+
const finalOnCancel = modalPropsWithDeprecation.onCancel ?? onClose;
|
|
90
|
+
const {
|
|
91
|
+
visible: _visible,
|
|
92
|
+
onVisibleChange: _onVisibleChange,
|
|
93
|
+
classNames: _classNames,
|
|
94
|
+
styles: _styles,
|
|
95
|
+
style: _style,
|
|
96
|
+
...spreadableModalProps
|
|
97
|
+
} = modalPropsWithDeprecation;
|
|
98
|
+
const existingClassNames = typeof _classNames === "object" && _classNames && !("call" in _classNames) ? _classNames : {};
|
|
99
|
+
const modalClassNames = {
|
|
100
|
+
wrapper: classNames(
|
|
101
|
+
styles[`${CLASS_PREFIX}-wrapper`],
|
|
102
|
+
overrideWrapperClassName,
|
|
103
|
+
existingClassNames.wrapper
|
|
104
|
+
),
|
|
105
|
+
container: classNames(styles[`${CLASS_PREFIX}-modal-content`], existingClassNames.container),
|
|
106
|
+
body: classNames(styles[`${CLASS_PREFIX}-body`], existingClassNames.body),
|
|
107
|
+
...Object.fromEntries(
|
|
108
|
+
Object.entries(existingClassNames).filter(
|
|
109
|
+
([key]) => !["wrapper", "container", "body"].includes(key)
|
|
110
|
+
)
|
|
111
|
+
)
|
|
112
|
+
};
|
|
74
113
|
return /* @__PURE__ */ jsx(
|
|
75
114
|
Modal,
|
|
76
115
|
{
|
|
77
|
-
|
|
116
|
+
open: finalOpen,
|
|
78
117
|
footer: null,
|
|
79
118
|
closable: false,
|
|
80
119
|
centered: true,
|
|
81
120
|
keyboard: false,
|
|
82
121
|
destroyOnClose: true,
|
|
83
|
-
onCancel:
|
|
122
|
+
onCancel: finalOnCancel,
|
|
84
123
|
className: classNames(CLASS_PREFIX, overrideClassName),
|
|
85
|
-
|
|
124
|
+
classNames: modalClassNames,
|
|
125
|
+
width,
|
|
126
|
+
styles: _styles,
|
|
86
127
|
style: {
|
|
87
128
|
"--top-navigation-height": topNavigationHeight,
|
|
88
|
-
"--modal-width": width,
|
|
89
|
-
"--modal-height": height
|
|
129
|
+
"--modal-width": width !== void 0 ? String(width) : void 0,
|
|
130
|
+
"--modal-height": height,
|
|
131
|
+
..._style
|
|
90
132
|
},
|
|
91
|
-
...
|
|
92
|
-
|
|
133
|
+
...spreadableModalProps,
|
|
134
|
+
...rest,
|
|
135
|
+
children: /* @__PURE__ */ jsxs(CapRow, { className: styles[`${CLASS_PREFIX}-container`], children: [
|
|
93
136
|
/* @__PURE__ */ jsxs(
|
|
94
137
|
CapRow,
|
|
95
138
|
{
|
|
96
|
-
className: `${CLASS_PREFIX}-header
|
|
139
|
+
className: styles[`${CLASS_PREFIX}-header`],
|
|
97
140
|
type: "flex",
|
|
98
141
|
justify: "space-between",
|
|
99
142
|
align: "middle",
|
|
100
143
|
children: [
|
|
101
144
|
/* @__PURE__ */ jsx(CapHeader, { title: (currentMedia == null ? void 0 : currentMedia.name) || formatMessage(messages.mediaPreview) }),
|
|
102
|
-
/* @__PURE__ */ jsx(CapIcon, { type: "close", onClick:
|
|
145
|
+
/* @__PURE__ */ jsx(CapIcon, { type: "close", onClick: finalOnCancel })
|
|
103
146
|
]
|
|
104
147
|
}
|
|
105
148
|
),
|
|
106
|
-
/* @__PURE__ */ jsxs(CapRow, { className: `${CLASS_PREFIX}-content
|
|
149
|
+
/* @__PURE__ */ jsxs(CapRow, { className: styles[`${CLASS_PREFIX}-content`], children: [
|
|
107
150
|
showNavigation && /* @__PURE__ */ jsx(
|
|
108
151
|
CapRow,
|
|
109
152
|
{
|
|
110
|
-
className: classNames(
|
|
111
|
-
|
|
112
|
-
|
|
153
|
+
className: classNames(
|
|
154
|
+
styles[`${CLASS_PREFIX}-nav-button`],
|
|
155
|
+
styles[`${CLASS_PREFIX}-nav-button-left`],
|
|
156
|
+
{
|
|
157
|
+
[styles[`${CLASS_PREFIX}-nav-button-disabled`]]: isLeftNavDisabled
|
|
158
|
+
}
|
|
159
|
+
),
|
|
113
160
|
onClick: handlePrevious,
|
|
114
161
|
disabled: isLeftNavDisabled,
|
|
115
|
-
children: /* @__PURE__ */ jsx(CapIcon, { className: `${CLASS_PREFIX}-nav-button-icon
|
|
162
|
+
children: /* @__PURE__ */ jsx(CapIcon, { className: styles[`${CLASS_PREFIX}-nav-button-icon`], type: "chevron-left" })
|
|
116
163
|
}
|
|
117
164
|
),
|
|
118
|
-
/* @__PURE__ */ jsx(CapRow, { className: `${CLASS_PREFIX}-media-container
|
|
165
|
+
/* @__PURE__ */ jsx(CapRow, { className: styles[`${CLASS_PREFIX}-media-container`], children: /* @__PURE__ */ jsx(MediaRenderer, { currentMedia }) }),
|
|
119
166
|
showNavigation && /* @__PURE__ */ jsx(
|
|
120
167
|
CapRow,
|
|
121
168
|
{
|
|
122
|
-
className: classNames(
|
|
123
|
-
|
|
124
|
-
|
|
169
|
+
className: classNames(
|
|
170
|
+
styles[`${CLASS_PREFIX}-nav-button`],
|
|
171
|
+
styles[`${CLASS_PREFIX}-nav-button-right`],
|
|
172
|
+
{
|
|
173
|
+
[styles[`${CLASS_PREFIX}-nav-button-disabled`]]: isRightNavDisabled
|
|
174
|
+
}
|
|
175
|
+
),
|
|
125
176
|
onClick: handleNext,
|
|
126
177
|
disabled: isRightNavDisabled,
|
|
127
|
-
children: /* @__PURE__ */ jsx(CapIcon, { className: `${CLASS_PREFIX}-nav-button-icon
|
|
178
|
+
children: /* @__PURE__ */ jsx(CapIcon, { className: styles[`${CLASS_PREFIX}-nav-button-icon`], type: "chevron-right" })
|
|
128
179
|
}
|
|
129
180
|
)
|
|
130
181
|
] }),
|
|
131
|
-
mediaLength > 1 && /* @__PURE__ */ jsxs(CapRow, { className: `${CLASS_PREFIX}-counter
|
|
182
|
+
mediaLength > 1 && /* @__PURE__ */ jsxs(CapRow, { className: styles[`${CLASS_PREFIX}-counter`], children: [
|
|
132
183
|
currentIndex + 1,
|
|
133
184
|
" / ",
|
|
134
185
|
mediaLength
|
|
@@ -137,40 +188,6 @@ const CapMediaPreview = ({
|
|
|
137
188
|
}
|
|
138
189
|
);
|
|
139
190
|
};
|
|
140
|
-
CapMediaPreview.propTypes = {
|
|
141
|
-
intl: PropTypes.object.isRequired,
|
|
142
|
-
overrideClassName: PropTypes.string,
|
|
143
|
-
overrideWrapperClassName: PropTypes.string,
|
|
144
|
-
isMediaPreviewVisible: PropTypes.bool,
|
|
145
|
-
media: PropTypes.arrayOf(
|
|
146
|
-
PropTypes.shape({
|
|
147
|
-
type: PropTypes.string.isRequired,
|
|
148
|
-
file: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
|
|
149
|
-
name: PropTypes.string,
|
|
150
|
-
imageProps: PropTypes.object,
|
|
151
|
-
videoProps: PropTypes.object
|
|
152
|
-
})
|
|
153
|
-
),
|
|
154
|
-
startIndex: PropTypes.number,
|
|
155
|
-
width: PropTypes.string,
|
|
156
|
-
height: PropTypes.string,
|
|
157
|
-
topNavigationHeight: PropTypes.string,
|
|
158
|
-
onClose: PropTypes.func,
|
|
159
|
-
modalProps: PropTypes.object
|
|
160
|
-
};
|
|
161
|
-
CapMediaPreview.defaultProps = {
|
|
162
|
-
overrideClassName: "",
|
|
163
|
-
overrideWrapperClassName: "",
|
|
164
|
-
isMediaPreviewVisible: false,
|
|
165
|
-
media: [],
|
|
166
|
-
startIndex: 0,
|
|
167
|
-
width: "100vw",
|
|
168
|
-
height: "100vh",
|
|
169
|
-
topNavigationHeight: "64px",
|
|
170
|
-
onClose: () => {
|
|
171
|
-
},
|
|
172
|
-
modalProps: {}
|
|
173
|
-
};
|
|
174
191
|
const index = injectIntl(CapMediaPreview);
|
|
175
192
|
export {
|
|
176
193
|
CapMediaPreview,
|
|
@@ -15,33 +15,42 @@
|
|
|
15
15
|
top: 0;
|
|
16
16
|
padding-bottom: 0;
|
|
17
17
|
}
|
|
18
|
-
.cap-media-preview
|
|
18
|
+
.ant-modal.cap-media-preview,
|
|
19
|
+
.ant-modal-wrap .ant-modal.cap-media-preview {
|
|
19
20
|
width: var(--modal-width) !important;
|
|
20
21
|
height: var(--modal-height) !important;
|
|
21
22
|
top: var(--top-navigation-height) !important;
|
|
22
|
-
padding: 0;
|
|
23
|
-
margin: 0;
|
|
24
|
-
}
|
|
25
|
-
.cap-media-preview .ant-modal-content {
|
|
26
|
-
height: calc(var(--modal-height) - var(--top-navigation-height));
|
|
27
|
-
background-color: rgba(94, 94, 94, 0.4);
|
|
28
|
-
backdrop-filter: blur(0.857rem);
|
|
29
|
-
border-radius: 0;
|
|
30
|
-
display: flex;
|
|
31
|
-
flex-direction: column;
|
|
32
|
-
padding: 0;
|
|
33
23
|
}
|
|
34
|
-
.cap-media-preview
|
|
35
|
-
|
|
24
|
+
.cap-media-preview-modal-content {
|
|
25
|
+
height: calc(var(--modal-height) - var(--top-navigation-height)) !important;
|
|
26
|
+
background: rgba(94, 94, 94, 0.4) !important;
|
|
27
|
+
backdrop-filter: blur(0.857rem) !important;
|
|
28
|
+
border-radius: 0 !important;
|
|
29
|
+
display: flex !important;
|
|
30
|
+
flex-direction: column !important;
|
|
31
|
+
padding: 0 !important;
|
|
32
|
+
box-shadow: none !important;
|
|
33
|
+
width: 100% !important;
|
|
34
|
+
margin: 0 !important;
|
|
35
|
+
border: none !important;
|
|
36
|
+
outline: none !important;
|
|
37
|
+
transform: none !important;
|
|
38
|
+
position: relative !important;
|
|
39
|
+
color: inherit !important;
|
|
40
|
+
}
|
|
41
|
+
.cap-media-preview-body {
|
|
42
|
+
flex: 1 !important;
|
|
43
|
+
flex-direction: column !important;
|
|
36
44
|
display: flex;
|
|
37
45
|
align-items: center;
|
|
38
46
|
justify-content: center;
|
|
39
|
-
padding: 0;
|
|
47
|
+
padding: 0 !important;
|
|
40
48
|
overflow: hidden;
|
|
41
49
|
}
|
|
42
50
|
.cap-media-preview-container {
|
|
43
51
|
width: 100%;
|
|
44
|
-
|
|
52
|
+
flex: 1;
|
|
53
|
+
min-height: 0;
|
|
45
54
|
display: flex;
|
|
46
55
|
flex-direction: column;
|
|
47
56
|
align-items: center;
|
|
@@ -61,7 +70,8 @@
|
|
|
61
70
|
.cap-media-preview-content {
|
|
62
71
|
position: relative;
|
|
63
72
|
width: 100%;
|
|
64
|
-
|
|
73
|
+
flex: 1;
|
|
74
|
+
min-height: 0;
|
|
65
75
|
display: flex;
|
|
66
76
|
align-items: center;
|
|
67
77
|
justify-content: center;
|
|
@@ -98,16 +108,16 @@
|
|
|
98
108
|
background-color: #f4f5f7;
|
|
99
109
|
cursor: pointer;
|
|
100
110
|
}
|
|
101
|
-
.cap-media-preview-nav-button.left {
|
|
111
|
+
.cap-media-preview-nav-button.cap-media-preview-nav-button-left {
|
|
102
112
|
left: 1.714rem;
|
|
103
113
|
}
|
|
104
|
-
.cap-media-preview-nav-button.right {
|
|
114
|
+
.cap-media-preview-nav-button.cap-media-preview-nav-button-right {
|
|
105
115
|
right: 1.714rem;
|
|
106
116
|
}
|
|
107
|
-
.cap-media-preview-nav-button.disabled {
|
|
117
|
+
.cap-media-preview-nav-button.cap-media-preview-nav-button-disabled {
|
|
108
118
|
cursor: not-allowed;
|
|
109
119
|
}
|
|
110
|
-
.cap-media-preview-nav-button.disabled .cap-media-preview-nav-button-icon {
|
|
120
|
+
.cap-media-preview-nav-button.cap-media-preview-nav-button-disabled .cap-media-preview-nav-button-icon {
|
|
111
121
|
color: #b3bac5;
|
|
112
122
|
}
|
|
113
123
|
.cap-media-preview-counter {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import './styles.css';const styles = {
|
|
2
|
+
"cap-media-preview-wrapper": "cap-media-preview-wrapper",
|
|
3
|
+
"cap-media-preview": "cap-media-preview",
|
|
4
|
+
"cap-media-preview-modal-content": "cap-media-preview-modal-content",
|
|
5
|
+
"cap-media-preview-body": "cap-media-preview-body",
|
|
6
|
+
"cap-media-preview-container": "cap-media-preview-container",
|
|
7
|
+
"cap-media-preview-header": "cap-media-preview-header",
|
|
8
|
+
"cap-media-preview-content": "cap-media-preview-content",
|
|
9
|
+
"cap-media-preview-media-container": "cap-media-preview-media-container",
|
|
10
|
+
"cap-media-preview-image": "cap-media-preview-image",
|
|
11
|
+
"cap-media-preview-video": "cap-media-preview-video",
|
|
12
|
+
"cap-media-preview-nav-button": "cap-media-preview-nav-button",
|
|
13
|
+
"cap-media-preview-nav-button-left": "cap-media-preview-nav-button-left",
|
|
14
|
+
"cap-media-preview-nav-button-right": "cap-media-preview-nav-button-right",
|
|
15
|
+
"cap-media-preview-nav-button-disabled": "cap-media-preview-nav-button-disabled",
|
|
16
|
+
"cap-media-preview-nav-button-icon": "cap-media-preview-nav-button-icon",
|
|
17
|
+
"cap-media-preview-counter": "cap-media-preview-counter",
|
|
18
|
+
"cap-media-preview-unsupported": "cap-media-preview-unsupported",
|
|
19
|
+
"cap-media-preview-unsupported-icon": "cap-media-preview-unsupported-icon",
|
|
20
|
+
"cap-media-preview-unsupported-label": "cap-media-preview-unsupported-label"
|
|
21
|
+
};
|
|
22
|
+
export {
|
|
23
|
+
styles as default
|
|
24
|
+
};
|
|
@@ -12,42 +12,51 @@ $flex-center: (
|
|
|
12
12
|
#{$property}: $value;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.ant-modal {
|
|
15
|
+
:global(.ant-modal) {
|
|
16
16
|
top: 0;
|
|
17
17
|
padding-bottom: 0;
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.#{$media-preview}
|
|
21
|
+
:global(.ant-modal).#{$media-preview},
|
|
22
|
+
:global(.ant-modal-wrap .ant-modal).#{$media-preview} {
|
|
22
23
|
width: var(--modal-width) !important;
|
|
23
24
|
height: var(--modal-height) !important;
|
|
24
25
|
top: var(--top-navigation-height) !important;
|
|
25
|
-
|
|
26
|
-
margin: 0;
|
|
27
|
-
|
|
28
|
-
.ant-modal-content {
|
|
29
|
-
height: calc(var(--modal-height) - var(--top-navigation-height));
|
|
30
|
-
background-color: rgba(94, 94, 94, 0.4);
|
|
31
|
-
backdrop-filter: blur($CAP_SPACE_12);
|
|
32
|
-
border-radius: 0;
|
|
33
|
-
display: flex;
|
|
34
|
-
flex-direction: column;
|
|
35
|
-
padding: 0;
|
|
36
|
-
}
|
|
26
|
+
}
|
|
37
27
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
28
|
+
.#{$media-preview}-modal-content {
|
|
29
|
+
height: calc(var(--modal-height) - var(--top-navigation-height)) !important;
|
|
30
|
+
background: rgba(94, 94, 94, 0.4) !important;
|
|
31
|
+
backdrop-filter: blur($CAP_SPACE_12) !important;
|
|
32
|
+
border-radius: 0 !important;
|
|
33
|
+
display: flex !important;
|
|
34
|
+
flex-direction: column !important;
|
|
35
|
+
padding: 0 !important;
|
|
36
|
+
box-shadow: none !important;
|
|
37
|
+
width: 100% !important;
|
|
38
|
+
margin: 0 !important;
|
|
39
|
+
border: none !important;
|
|
40
|
+
outline: none !important;
|
|
41
|
+
transform: none !important;
|
|
42
|
+
position: relative !important;
|
|
43
|
+
color: inherit !important;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.#{$media-preview}-body {
|
|
47
|
+
flex: 1 !important;
|
|
48
|
+
flex-direction: column !important;
|
|
49
|
+
@each $property, $value in $flex-center {
|
|
50
|
+
#{$property}: $value;
|
|
45
51
|
}
|
|
52
|
+
padding: 0 !important;
|
|
53
|
+
overflow: hidden;
|
|
46
54
|
}
|
|
47
55
|
|
|
48
56
|
.#{$media-preview}-container {
|
|
49
57
|
width: 100%;
|
|
50
|
-
|
|
58
|
+
flex: 1;
|
|
59
|
+
min-height: 0;
|
|
51
60
|
display: flex;
|
|
52
61
|
flex-direction: column;
|
|
53
62
|
@each $property, $value in $flex-center {
|
|
@@ -73,7 +82,8 @@ $flex-center: (
|
|
|
73
82
|
.#{$media-preview}-content {
|
|
74
83
|
position: relative;
|
|
75
84
|
width: 100%;
|
|
76
|
-
|
|
85
|
+
flex: 1;
|
|
86
|
+
min-height: 0;
|
|
77
87
|
@each $property, $value in $flex-center {
|
|
78
88
|
#{$property}: $value;
|
|
79
89
|
}
|
|
@@ -100,7 +110,8 @@ $flex-center: (
|
|
|
100
110
|
flex-shrink: 0;
|
|
101
111
|
aspect-ratio: 964.62/540;
|
|
102
112
|
object-fit: contain;
|
|
103
|
-
box-shadow:
|
|
113
|
+
box-shadow:
|
|
114
|
+
0 0 0.071rem rgba(9, 30, 66, 0.31),
|
|
104
115
|
0 0.286rem 0.571rem -0.143rem rgba(9, 30, 66, 0.25);
|
|
105
116
|
}
|
|
106
117
|
|
|
@@ -115,15 +126,15 @@ $flex-center: (
|
|
|
115
126
|
background-color: $CAP_G09;
|
|
116
127
|
cursor: pointer;
|
|
117
128
|
|
|
118
|
-
|
|
129
|
+
&.#{$media-preview}-nav-button-left {
|
|
119
130
|
left: $CAP_SPACE_24;
|
|
120
131
|
}
|
|
121
132
|
|
|
122
|
-
|
|
133
|
+
&.#{$media-preview}-nav-button-right {
|
|
123
134
|
right: $CAP_SPACE_24;
|
|
124
135
|
}
|
|
125
136
|
|
|
126
|
-
|
|
137
|
+
&.#{$media-preview}-nav-button-disabled {
|
|
127
138
|
cursor: not-allowed;
|
|
128
139
|
.#{$media-preview}-nav-button-icon {
|
|
129
140
|
color: $CAP_G06;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import type { ModalProps } from 'antd-v5';
|
|
2
|
+
import type { WrappedComponentProps } from 'react-intl';
|
|
3
|
+
export interface MediaItem {
|
|
4
|
+
type: string;
|
|
5
|
+
file: string | File;
|
|
6
|
+
name?: string;
|
|
7
|
+
imageProps?: Record<string, unknown>;
|
|
8
|
+
videoProps?: Record<string, unknown>;
|
|
9
|
+
}
|
|
10
|
+
export interface CapMediaPreviewProps extends Omit<ModalProps, 'open' | 'visible' | 'onVisibleChange' | 'onOpenChange'> {
|
|
11
|
+
/** Override className for Modal */
|
|
12
|
+
overrideClassName?: string;
|
|
13
|
+
/** Override className for Modal wrapper */
|
|
14
|
+
overrideWrapperClassName?: string;
|
|
15
|
+
/** Whether the media preview modal is visible */
|
|
16
|
+
isMediaPreviewVisible?: boolean;
|
|
17
|
+
/** Array of media items to display */
|
|
18
|
+
media?: MediaItem[];
|
|
19
|
+
/** Starting index for media carousel */
|
|
20
|
+
startIndex?: number;
|
|
21
|
+
/** Width of the modal */
|
|
22
|
+
width?: ModalProps['width'];
|
|
23
|
+
/** Height of the modal */
|
|
24
|
+
height?: string;
|
|
25
|
+
/** Top navigation height (used for CSS variable) */
|
|
26
|
+
topNavigationHeight?: string;
|
|
27
|
+
/** Callback when modal is closed */
|
|
28
|
+
onClose?: () => void;
|
|
29
|
+
/** Additional props to pass to Modal component */
|
|
30
|
+
modalProps?: Omit<ModalProps, 'open' | 'visible' | 'onVisibleChange' | 'onOpenChange'>;
|
|
31
|
+
}
|
|
32
|
+
export interface MediaRendererProps extends WrappedComponentProps {
|
|
33
|
+
/** Current media item to render */
|
|
34
|
+
currentMedia?: MediaItem;
|
|
35
|
+
}
|
|
36
|
+
export interface ImageRendererProps {
|
|
37
|
+
/** Image source URL */
|
|
38
|
+
src?: string | null;
|
|
39
|
+
/** Additional props to pass to CapImage */
|
|
40
|
+
imageProps?: Record<string, unknown>;
|
|
41
|
+
}
|
|
42
|
+
export interface VideoPlayerProps extends WrappedComponentProps {
|
|
43
|
+
/** Video source URL */
|
|
44
|
+
src?: string | null;
|
|
45
|
+
/** Additional props to pass to video element */
|
|
46
|
+
videoProps?: Record<string, unknown>;
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAExD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,cAAc,CAAC;IACjF,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iDAAiD;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kDAAkD;IAClD,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,cAAc,CAAC,CAAC;CACxF;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D,mCAAmC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB;IAC7D,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -1,30 +1,7 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
1
|
import React from 'react';
|
|
3
|
-
import '
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
children: PropTypes.Requireable<any>;
|
|
8
|
-
className: PropTypes.Requireable<string>;
|
|
9
|
-
isSelected: PropTypes.Requireable<boolean>;
|
|
10
|
-
handleClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
11
|
-
milestoneHeader: PropTypes.Requireable<PropTypes.ReactElementLike>;
|
|
12
|
-
milestoneDescription: PropTypes.Requireable<PropTypes.ReactElementLike>;
|
|
13
|
-
disabled: PropTypes.Requireable<boolean>;
|
|
14
|
-
configuringMessage: PropTypes.Requireable<string>;
|
|
15
|
-
notConfiguredMessage: PropTypes.Requireable<string>;
|
|
16
|
-
alwaysShowDescription: PropTypes.Requireable<boolean>;
|
|
17
|
-
complete: PropTypes.Requireable<boolean>;
|
|
18
|
-
configError: PropTypes.Requireable<boolean>;
|
|
19
|
-
defaultConfiguringMessage: PropTypes.Requireable<string>;
|
|
20
|
-
defaultNotConfiguredMessage: PropTypes.Requireable<string>;
|
|
21
|
-
toConfigure: PropTypes.Requireable<string>;
|
|
22
|
-
completePrevSteps: PropTypes.Requireable<string>;
|
|
23
|
-
paneKey: PropTypes.Requireable<any>;
|
|
24
|
-
isLastPane: PropTypes.Requireable<boolean>;
|
|
25
|
-
width: PropTypes.Requireable<number>;
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
declare const _default: React.ComponentType<Omit<any, "intl">>;
|
|
2
|
+
import type { WrappedComponentProps } from 'react-intl';
|
|
3
|
+
import type { CapTimelineCardProps } from './types';
|
|
4
|
+
export declare const CapTimelineCard: (props: CapTimelineCardProps & WrappedComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare const _default: React.ComponentType<Omit<CapTimelineCardProps & WrappedComponentProps, "intl">>;
|
|
29
6
|
export default _default;
|
|
30
7
|
//# sourceMappingURL=CapTimelineCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CapTimelineCard.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/CapTimelineCard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CapTimelineCard.d.ts","sourceRoot":"","sources":["../../components/CapTimeline/CapTimelineCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAQxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAIpD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,GAAG,qBAAqB,4CAyElF,CAAC;;AAEF,wBAA2C"}
|