oa-componentbook 1.0.1-stage.48 → 1.0.1-stage.49
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.
|
@@ -15,6 +15,8 @@ var _icons = require("@ant-design/icons");
|
|
|
15
15
|
var _TouchAppRounded = _interopRequireDefault(require("@material-ui/icons/TouchAppRounded"));
|
|
16
16
|
var _reactZoomPanPinch = require("react-zoom-pan-pinch");
|
|
17
17
|
var _Fullscreen = _interopRequireDefault(require("@material-ui/icons/Fullscreen"));
|
|
18
|
+
var _ArrowForwardRounded = _interopRequireDefault(require("@material-ui/icons/ArrowForwardRounded"));
|
|
19
|
+
var _ArrowBackRounded = _interopRequireDefault(require("@material-ui/icons/ArrowBackRounded"));
|
|
18
20
|
var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
|
|
19
21
|
var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
|
|
20
22
|
var _styles = require("./styles");
|
|
@@ -53,6 +55,7 @@ function ImageCarouselWidget(_ref) {
|
|
|
53
55
|
const [fullscreen, setFullscreen] = (0, _react.useState)(false);
|
|
54
56
|
const [imageUrls, setImageUrls] = (0, _react.useState)([]);
|
|
55
57
|
const [loading, setLoading] = (0, _react.useState)(false);
|
|
58
|
+
const carouselRef = _react.default.useRef(null);
|
|
56
59
|
|
|
57
60
|
// Fetch image URL by UUID
|
|
58
61
|
const fetchImageUrl = uuid => fetch("".concat(s3DownloadApiUrl).concat(uuid)).then(response => response.json()).then(data => {
|
|
@@ -155,6 +158,10 @@ function ImageCarouselWidget(_ref) {
|
|
|
155
158
|
setShowHeatmap(currentViewType); // Toggle the view mode
|
|
156
159
|
};
|
|
157
160
|
const currentImage = imageUrls[currentIndex];
|
|
161
|
+
|
|
162
|
+
// Conditionally hide the buttons when on the first or last image
|
|
163
|
+
const isFirstImage = currentIndex === 0;
|
|
164
|
+
const isLastImage = currentIndex === imageUrls.length - 1;
|
|
158
165
|
return /*#__PURE__*/_react.default.createElement(_styles.ImageCarouselModalStyle, null, /*#__PURE__*/_react.default.createElement(_styles.GlobalStyleForImageCarousel, null), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
|
|
159
166
|
open: visible,
|
|
160
167
|
onCancel: onClose,
|
|
@@ -175,6 +182,7 @@ function ImageCarouselWidget(_ref) {
|
|
|
175
182
|
type: "text-only",
|
|
176
183
|
label: showHeatmap ? 'View Original Image' : 'View Heatmap Image'
|
|
177
184
|
})), /*#__PURE__*/_react.default.createElement(_styles.ImageCarouselModalStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Carousel, {
|
|
185
|
+
ref: carouselRef,
|
|
178
186
|
afterChange: handleImageChange,
|
|
179
187
|
dots: true,
|
|
180
188
|
infinite: true
|
|
@@ -193,7 +201,21 @@ function ImageCarouselWidget(_ref) {
|
|
|
193
201
|
width: '100%',
|
|
194
202
|
objectFit: 'contain'
|
|
195
203
|
}
|
|
196
|
-
}))))
|
|
204
|
+
})))), window.innerWidth > 600 && /*#__PURE__*/_react.default.createElement(_styles.CarouselButtons, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
205
|
+
className: "sliderArrowSection"
|
|
206
|
+
}, !isFirstImage && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
207
|
+
color: "primary-content",
|
|
208
|
+
className: "leftArrow",
|
|
209
|
+
size: 24,
|
|
210
|
+
icon: _ArrowBackRounded.default,
|
|
211
|
+
onClick: () => carouselRef.current.prev()
|
|
212
|
+
}), !isLastImage && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
213
|
+
color: "primary-content",
|
|
214
|
+
className: "rightArrow",
|
|
215
|
+
size: 24,
|
|
216
|
+
icon: _ArrowForwardRounded.default,
|
|
217
|
+
onClick: () => carouselRef.current.next()
|
|
218
|
+
}))))), fullscreen && /*#__PURE__*/_react.default.createElement(_styles.FullscreenZoom, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
197
219
|
className: "type-t2-700",
|
|
198
220
|
color: "primary-background"
|
|
199
221
|
}, typeToNamemapping && typeToNamemapping[currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType] ? typeToNamemapping[currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType] : currentImage === null || currentImage === void 0 ? void 0 : currentImage.imageType, ' ', headingSuffixText), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
@@ -5,9 +5,9 @@ require("core-js/modules/web.dom-collections.iterator.js");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.default = exports.ZoomImgBox = exports.PinchZoom = exports.ImageCarouselWidgetStyle = exports.ImageCarouselModalStyle = exports.GlobalStyleForImageCarousel = exports.FullscreenZoom = exports.CloseButtonStyle = exports.CarouselStyle = void 0;
|
|
8
|
+
exports.default = exports.ZoomImgBox = exports.PinchZoom = exports.ImageCarouselWidgetStyle = exports.ImageCarouselModalStyle = exports.GlobalStyleForImageCarousel = exports.FullscreenZoom = exports.CloseButtonStyle = exports.CarouselStyle = exports.CarouselButtons = void 0;
|
|
9
9
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
10
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
11
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
13
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
@@ -18,5 +18,6 @@ const ZoomImgBox = exports.ZoomImgBox = _styledComponents.default.div(_templateO
|
|
|
18
18
|
const PinchZoom = exports.PinchZoom = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
19
19
|
const CloseButtonStyle = exports.CloseButtonStyle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background: #fff;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: -12px;\n right: 0;\n cursor: pointer\n"])));
|
|
20
20
|
const FullscreenZoom = exports.FullscreenZoom = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .pinchZoom{ \n display: flex;\n justify-content: center;\n align-items: center;\n\n .closeBtn{background: #fff;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: -12px;\n right: 0;\n cursor: pointer;\n}\n}\n"])));
|
|
21
|
-
const ImageCarouselModalStyle = exports.ImageCarouselModalStyle = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n.ant-carousel .slick-dots li {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-inline: 4px;\n padding: 0;\n text-align: center;\n text-indent: -999px;\n vertical-align: top;\n}\n\n.ant-carousel .slick-dots li button {\n width: 10px;\n height: 10px;\n background: #959595;\n border: 0;\n opacity: 1;\n border-radius: 50%;\n}\n\n.ant-carousel .slick-dots li.slick-active button {background: #014FC5 !important;}\n.carouselItem{ display: flex !important;\n align-items: center;\n justify-content: center;}\n.imageCarouselIconZoom{background: #fff;\n border-radius: 4px;\n width: 24px;\n height: 24px;\n
|
|
22
|
-
const GlobalStyleForImageCarousel = exports.GlobalStyleForImageCarousel = (0, _styledComponents.createGlobalStyle)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n
|
|
21
|
+
const ImageCarouselModalStyle = exports.ImageCarouselModalStyle = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\n.ant-carousel{ background:#F6F6F6; max-width:550px; padding:24px 48px 56px 48px; border-radius:16px;}\n\n\n\n.ant-carousel .slick-dots li {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin-inline: 4px;\n padding: 0;\n text-align: center;\n text-indent: -999px;\n vertical-align: top;\n}\n\n.ant-carousel .slick-dots li button {\n width: 10px;\n height: 10px;\n background: #959595;\n border: 0;\n opacity: 1;\n border-radius: 50%;\n}\n\n.ant-carousel .slick-dots li.slick-active button {background: #014FC5 !important;}\n.carouselItem{ display: flex !important;\n align-items: center;\n justify-content: center;}\n\n\n @media only screen and (max-width: 600px) {\n .imageCarouselIconZoom{display:flex !important;}\n .ant-carousel{ background: no-repeat;\n max-width: none;\n padding: 0;\n border-radius: 0;}\n\n}\n\n\n\n.imageCarouselIconZoom{background: #fff; display: none;\n border-radius: 4px;\n width: 24px;\n height: 24px;\n justify-content: center;\n align-items: center; right: 8px;\n position: absolute;\n top: 8px; z-index:9;\n}\n.imageCarouselIconZoom svg{font-size:20px !important; margin-top:3px;}\n.imageCarouselIconZoom button{ height: auto;\n line-height: normal;}\n.carouselItem {position: relative;}\n.carouselItem img{border-radius:8px;}\n\n.ant-carousel .slick-dots-bottom { bottom: -30px;}\n.carouselItem{height:100%};\n.slick-slide > div{height:100%;}\n.fullscreenModal .ant-modal-close{display:none;}\n.closeBtn{background: #fff;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: -12px;\n right: 0;\n cursor: pointer;}\n\n .zoomImgBox{display:block;}\n\n"])));
|
|
22
|
+
const GlobalStyleForImageCarousel = exports.GlobalStyleForImageCarousel = (0, _styledComponents.createGlobalStyle)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\n.imageCarouselModalStyle .ant-modal-body{max-height: none; height:100%;}\n.fullscreenModal .ant-modal-content{background:#000;}\n.fullscreenModal .ant-modal-close{display:none;}\n.ant-modal{ width:auto !important;}\n\n\n@media only screen and (max-width: 600px) {\n .imageCarouselModalStyle .ant-modal-content {top: 0; border-radius: 0px;}\n .slick-slide{height:calc(100vh - 210px) !important; background:#000; border-radius:8px;}\n\n}\n"])));
|
|
23
|
+
const CarouselButtons = exports.CarouselButtons = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\n.sliderArrowSection{position: absolute;\n top: 57%;\n width: 100%;}\n\n .leftArrow {\n position: absolute;\n left: 6px;\n top: 0;\n}\n .rightArrow{position: absolute;\n right: 6px;\n top: 0;}\n\n\n"])));
|