| 1 | import React, { forwardRef, useImperativeHandle, useRef, useState, useCallback } from 'react';
|
| 2 | import { mergeProps } from '../../utils/with-default-props';
|
| 3 | import { renderToContainer } from '../../utils/render-to-container';
|
| 4 | import Mask from '../mask';
|
| 5 | import SafeArea from '../safe-area';
|
| 6 | import { Slide } from './slide';
|
| 7 | import { Slides } from './slides';
|
| 8 | import classNames from 'classnames';
|
| 9 | const classPrefix = `adm-image-viewer`;
|
| 10 | const defaultProps = {
|
| 11 | maxZoom: 3,
|
| 12 | getContainer: null,
|
| 13 | visible: false
|
| 14 | };
|
| 15 | export const ImageViewer = p => {
|
| 16 | var _a, _b, _c;
|
| 17 | const props = mergeProps(defaultProps, p);
|
| 18 | const node = React.createElement(Mask, {
|
| 19 | visible: props.visible,
|
| 20 | disableBodyScroll: false,
|
| 21 | opacity: 'thick',
|
| 22 | afterClose: props.afterClose,
|
| 23 | destroyOnClose: true,
|
| 24 | className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
|
| 25 | }, React.createElement("div", {
|
| 26 | className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
|
| 27 | }, props.image && React.createElement(Slide, {
|
| 28 | image: props.image,
|
| 29 | onTap: props.onClose,
|
| 30 | maxZoom: props.maxZoom
|
| 31 | })), props.image && React.createElement("div", {
|
| 32 | className: `${classPrefix}-footer`
|
| 33 | }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), React.createElement(SafeArea, {
|
| 34 | position: 'bottom'
|
| 35 | })));
|
| 36 | return renderToContainer(props.getContainer, node);
|
| 37 | };
|
| 38 | const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
|
| 39 | defaultIndex: 0
|
| 40 | });
|
| 41 | export const MultiImageViewer = forwardRef((p, ref) => {
|
| 42 | var _a, _b, _c;
|
| 43 | const props = mergeProps(multiDefaultProps, p);
|
| 44 | const [index, setIndex] = useState(props.defaultIndex);
|
| 45 | const slidesRef = useRef(null);
|
| 46 | useImperativeHandle(ref, () => ({
|
| 47 | swipeTo: (index, immediate) => {
|
| 48 | var _a;
|
| 49 | setIndex(index);
|
| 50 | (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
|
| 51 | }
|
| 52 | }));
|
| 53 | const onSlideChange = useCallback(newIndex => {
|
| 54 | var _a;
|
| 55 | if (newIndex === index) return;
|
| 56 | setIndex(newIndex);
|
| 57 | (_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, newIndex);
|
| 58 | }, [props.onIndexChange, index]);
|
| 59 | const node = React.createElement(Mask, {
|
| 60 | visible: props.visible,
|
| 61 | disableBodyScroll: false,
|
| 62 | opacity: 'thick',
|
| 63 | afterClose: props.afterClose,
|
| 64 | destroyOnClose: true,
|
| 65 | className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
|
| 66 | }, React.createElement("div", {
|
| 67 | className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
|
| 68 | }, props.images && React.createElement(Slides, {
|
| 69 | ref: slidesRef,
|
| 70 | defaultIndex: index,
|
| 71 | onIndexChange: onSlideChange,
|
| 72 | images: props.images,
|
| 73 | onTap: props.onClose,
|
| 74 | maxZoom: props.maxZoom
|
| 75 | })), props.images && React.createElement("div", {
|
| 76 | className: `${classPrefix}-footer`
|
| 77 | }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), React.createElement(SafeArea, {
|
| 78 | position: 'bottom'
|
| 79 | })));
|
| 80 | return renderToContainer(props.getContainer, node);
|
| 81 | }); |
| \ | No newline at end of file |