choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
269 lines (238 loc) • 9.34 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import throttle from 'lodash/throttle';
import isString from 'lodash/isString';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import { Size } from '../../../es/_util/enum';
import Button from '../button/Button';
import { FuncType } from '../button/enum';
import Picture from './Picture';
import transform, { toTransformValue } from '../_util/transform';
import EventManager from '../_util/EventManager';
import { transformZoomData } from '../_util/DocumentUtils';
import Toolbar from './Toolbar';
import Navbar from './Navbar';
var scaleSteps = [0.05, 0.06, 0.07, 0.09, 0.11, 0.14, 0.17, 0.21, 0.26, 0.32, 0.39, 0.47, 0.5, 0.57, 0.69, 0.83, 0.92, 1, 1.2, 1.72, 2, 2.4, 2.88, 3.45, 4.14, 4.96, 5.95, 7.14, 8.56, 10];
function getPreviewItem(item) {
if (isString(item)) {
return {
src: item
};
}
return item;
}
var PictureViewer = function PictureViewer(props) {
var list = props.list,
_props$defaultIndex = props.defaultIndex,
defaultIndex = _props$defaultIndex === void 0 ? 0 : _props$defaultIndex,
prefixCls = props.prefixCls,
modal = props.modal;
var _useContext = useContext(ConfigContext),
getProPrefixCls = _useContext.getProPrefixCls;
var pictureRef = useRef(null);
var transformTargetRef = useRef(null);
var _useState = useState(defaultIndex),
_useState2 = _slicedToArray(_useState, 2),
index = _useState2[0],
setIndex = _useState2[1];
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
rotate = _useState4[0],
setRotate = _useState4[1];
var _useState5 = useState([0, 0]),
_useState6 = _slicedToArray(_useState5, 2),
translate = _useState6[0],
setTranslate = _useState6[1];
var _useState7 = useState(),
_useState8 = _slicedToArray(_useState7, 2),
scale = _useState8[0],
setScale = _useState8[1];
var _useState9 = useState(false),
_useState10 = _slicedToArray(_useState9, 2),
isZoomMode = _useState10[0],
setIsZoomMode = _useState10[1];
var handleIndexChange = useCallback(function (newIndex) {
if (isZoomMode) setIsZoomMode(false);
if (newIndex < 0 || newIndex >= list.length) {
return;
}
setIndex(newIndex);
setTranslate([0, 0]);
setRotate(0);
setScale(undefined);
}, [isZoomMode]);
var getImageNaturalScale = useCallback(function () {
var current = pictureRef.current;
if (current) {
var image = current.getImage();
if (image) {
var clientWidth = image.clientWidth,
clientHeight = image.clientHeight,
naturalHeight = image.naturalHeight,
naturalWidth = image.naturalWidth;
var imageScale = Math.min(clientWidth / naturalWidth, clientHeight / naturalHeight);
return scaleSteps.findIndex(function (step, index, steps) {
var nextStep = steps[index + 1];
return step === imageScale || imageScale < step && index === 0 || step < imageScale && nextStep > imageScale || nextStep < imageScale && index === steps.length - 1;
});
}
}
return scaleSteps.indexOf(1);
}, [pictureRef]);
var getCurrentScale = useCallback(function () {
if (scale !== undefined) {
return scale;
}
return getImageNaturalScale();
}, [getImageNaturalScale, scale]);
var customizedPrefixCls = getProPrefixCls('picture-viewer', prefixCls);
var handlePrev = useCallback(function () {
return handleIndexChange(index - 1);
}, [index, isZoomMode]);
var handleNext = useCallback(function () {
return handleIndexChange(index + 1);
}, [index, isZoomMode]);
var handleClose = useCallback(function () {
return modal && modal.close();
}, []);
var handleRotateLeft = useCallback(function () {
return setRotate((rotate - 90) % 360);
}, [rotate]);
var handleRotateRight = useCallback(function () {
return setRotate((rotate + 90) % 360);
}, [rotate]);
var handleZoomIn = useCallback(function () {
if (!isZoomMode) setIsZoomMode(true);
var currentScale = getCurrentScale();
if (currentScale < scaleSteps.length - 1) {
setScale(getCurrentScale() + 1);
}
}, [getCurrentScale]);
var handleZoomOut = useCallback(function () {
if (!isZoomMode) setIsZoomMode(true);
var currentScale = getCurrentScale();
if (currentScale > 0) {
setScale(currentScale - 1);
}
}, [getCurrentScale]);
var throttleWheel = useMemo(function () {
return throttle(function (callback) {
return callback();
}, 60);
}, []);
var handleWheel = useCallback(function (e) {
if (e.deltaX > 0 || e.deltaY > 0) {
throttleWheel(isZoomMode ? handleZoomOut : handleNext);
} else {
throttleWheel(isZoomMode ? handleZoomIn : handlePrev);
}
}, [handlePrev, handleNext, handleIndexChange, handleZoomOut, handleZoomIn, isZoomMode]);
var translateEvent = useMemo(function () {
return new EventManager();
}, []);
var executeTransform = useCallback(function (target, r, s, t) {
var transformValue = toTransformValue({
translate: "".concat(t[0], "px,").concat(t[1], "px"),
rotate: r ? "".concat(r, "deg") : undefined,
scale: s !== undefined && s > -1 ? scaleSteps[s] / scaleSteps[getImageNaturalScale()] : undefined
});
transform(transformValue, target.style);
}, []);
var handleMouseDown = useCallback(function (e) {
var current = transformTargetRef.current;
if (current) {
var currentTarget = e.currentTarget;
var pageX = transformZoomData(e.pageX);
var pageY = transformZoomData(e.pageY);
currentTarget.style.cursor = 'grabbing';
var _translate = _slicedToArray(translate, 2),
currentX = _translate[0],
currentY = _translate[1];
var startX = currentX - pageX;
var startY = currentY - pageY;
var handleMouseMove = function handleMouseMove(me) {
currentX = startX + transformZoomData(me.pageX);
currentY = startY + transformZoomData(me.pageY);
executeTransform(current, rotate, scale, [currentX, currentY]);
};
var handleMouseUp = function handleMouseUp() {
currentTarget.style.cursor = '';
setTranslate([currentX, currentY]);
translateEvent.removeEventListener('mousemove', handleMouseMove).removeEventListener('mouseup', handleMouseUp);
};
translateEvent.setTarget(document).addEventListener('mousemove', handleMouseMove).addEventListener('mouseup', handleMouseUp);
}
}, [translate, rotate, scale]);
useEffect(function () {
var current = transformTargetRef.current;
if (current) {
executeTransform(current, rotate, scale, translate);
}
}, [scale, rotate, translate]);
useEffect(function () {
return function () {
translateEvent.clear();
};
}, []);
var length = list.length;
if (length) {
var _getPreviewItem = getPreviewItem(list[index]),
src = _getPreviewItem.src,
downloadUrl = _getPreviewItem.downloadUrl;
return /*#__PURE__*/React.createElement("div", {
className: customizedPrefixCls,
onWheel: handleWheel
}, length > 1 && /*#__PURE__*/React.createElement(Button, {
icon: "navigate_before",
disabled: index === 0,
funcType: FuncType.link,
onClick: handlePrev,
className: "".concat(customizedPrefixCls, "-btn ").concat(customizedPrefixCls, "-btn-nav"),
size: Size.large
}), /*#__PURE__*/React.createElement("div", {
className: "".concat(customizedPrefixCls, "-picture"),
onMouseDown: handleMouseDown
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(customizedPrefixCls, "-picture-main"),
ref: transformTargetRef
}, /*#__PURE__*/React.createElement(Picture, {
src: src,
ref: pictureRef,
objectFit: "scale-down",
status: "loaded",
preview: false,
lazy: false,
draggable: false
})), /*#__PURE__*/React.createElement(Toolbar, {
prefixCls: customizedPrefixCls,
zoomInDisabled: scale === scaleSteps.length - 1,
zoomOutDisabled: scale === 0,
onZoomIn: handleZoomIn,
onZoomOut: handleZoomOut,
onRotateLeft: handleRotateLeft,
onRotateRight: handleRotateRight,
downloadUrl: downloadUrl
}), length > 1 && /*#__PURE__*/React.createElement(Navbar, {
prefixCls: customizedPrefixCls,
value: index,
onChange: handleIndexChange,
list: list
})), length > 1 && /*#__PURE__*/React.createElement(Button, {
icon: "navigate_next",
disabled: index === length - 1,
funcType: FuncType.link,
onClick: handleNext,
className: "".concat(customizedPrefixCls, "-btn ").concat(customizedPrefixCls, "-btn-nav"),
size: Size.large
}), /*#__PURE__*/React.createElement(Button, {
icon: "close",
funcType: FuncType.link,
onClick: handleClose,
className: "".concat(customizedPrefixCls, "-btn ").concat(customizedPrefixCls, "-btn-close")
}));
}
return null;
};
PictureViewer.displayName = 'PictureViewer';
export default PictureViewer;
//# sourceMappingURL=PictureViewer.js.map