162 lines
7.1 KiB
JavaScript
162 lines
7.1 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||
|
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.default = void 0;
|
||
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
||
|
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
||
|
|
var _portal = _interopRequireDefault(require("@rc-component/portal"));
|
||
|
|
var _classnames4 = _interopRequireDefault(require("classnames"));
|
||
|
|
var _rcMotion = _interopRequireDefault(require("rc-motion"));
|
||
|
|
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
|
||
|
|
var React = _interopRequireWildcard(require("react"));
|
||
|
|
var _context = require("./context");
|
||
|
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
||
|
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
||
|
|
var Operations = function Operations(props) {
|
||
|
|
var visible = props.visible,
|
||
|
|
maskTransitionName = props.maskTransitionName,
|
||
|
|
getContainer = props.getContainer,
|
||
|
|
prefixCls = props.prefixCls,
|
||
|
|
rootClassName = props.rootClassName,
|
||
|
|
icons = props.icons,
|
||
|
|
countRender = props.countRender,
|
||
|
|
showSwitch = props.showSwitch,
|
||
|
|
showProgress = props.showProgress,
|
||
|
|
current = props.current,
|
||
|
|
transform = props.transform,
|
||
|
|
count = props.count,
|
||
|
|
scale = props.scale,
|
||
|
|
minScale = props.minScale,
|
||
|
|
maxScale = props.maxScale,
|
||
|
|
closeIcon = props.closeIcon,
|
||
|
|
onSwitchLeft = props.onSwitchLeft,
|
||
|
|
onSwitchRight = props.onSwitchRight,
|
||
|
|
onClose = props.onClose,
|
||
|
|
onZoomIn = props.onZoomIn,
|
||
|
|
onZoomOut = props.onZoomOut,
|
||
|
|
onRotateRight = props.onRotateRight,
|
||
|
|
onRotateLeft = props.onRotateLeft,
|
||
|
|
onFlipX = props.onFlipX,
|
||
|
|
onFlipY = props.onFlipY,
|
||
|
|
toolbarRender = props.toolbarRender;
|
||
|
|
var groupContext = (0, React.useContext)(_context.PreviewGroupContext);
|
||
|
|
var rotateLeft = icons.rotateLeft,
|
||
|
|
rotateRight = icons.rotateRight,
|
||
|
|
zoomIn = icons.zoomIn,
|
||
|
|
zoomOut = icons.zoomOut,
|
||
|
|
close = icons.close,
|
||
|
|
left = icons.left,
|
||
|
|
right = icons.right,
|
||
|
|
flipX = icons.flipX,
|
||
|
|
flipY = icons.flipY;
|
||
|
|
var toolClassName = "".concat(prefixCls, "-operations-operation");
|
||
|
|
React.useEffect(function () {
|
||
|
|
var onKeyDown = function onKeyDown(e) {
|
||
|
|
if (e.keyCode === _KeyCode.default.ESC) {
|
||
|
|
onClose();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if (visible) {
|
||
|
|
window.addEventListener('keydown', onKeyDown);
|
||
|
|
}
|
||
|
|
return function () {
|
||
|
|
window.removeEventListener('keydown', onKeyDown);
|
||
|
|
};
|
||
|
|
}, [visible]);
|
||
|
|
var tools = [{
|
||
|
|
icon: flipY,
|
||
|
|
onClick: onFlipY,
|
||
|
|
type: 'flipY'
|
||
|
|
}, {
|
||
|
|
icon: flipX,
|
||
|
|
onClick: onFlipX,
|
||
|
|
type: 'flipX'
|
||
|
|
}, {
|
||
|
|
icon: rotateLeft,
|
||
|
|
onClick: onRotateLeft,
|
||
|
|
type: 'rotateLeft'
|
||
|
|
}, {
|
||
|
|
icon: rotateRight,
|
||
|
|
onClick: onRotateRight,
|
||
|
|
type: 'rotateRight'
|
||
|
|
}, {
|
||
|
|
icon: zoomOut,
|
||
|
|
onClick: onZoomOut,
|
||
|
|
type: 'zoomOut',
|
||
|
|
disabled: scale === minScale
|
||
|
|
}, {
|
||
|
|
icon: zoomIn,
|
||
|
|
onClick: onZoomIn,
|
||
|
|
type: 'zoomIn',
|
||
|
|
disabled: scale === maxScale
|
||
|
|
}];
|
||
|
|
var toolsNode = tools.map(function (_ref) {
|
||
|
|
var _classnames;
|
||
|
|
var icon = _ref.icon,
|
||
|
|
onClick = _ref.onClick,
|
||
|
|
type = _ref.type,
|
||
|
|
disabled = _ref.disabled;
|
||
|
|
return /*#__PURE__*/React.createElement("div", {
|
||
|
|
className: (0, _classnames4.default)(toolClassName, (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-operations-operation-").concat(type), true), (0, _defineProperty2.default)(_classnames, "".concat(prefixCls, "-operations-operation-disabled"), !!disabled), _classnames)),
|
||
|
|
onClick: onClick,
|
||
|
|
key: type
|
||
|
|
}, icon);
|
||
|
|
});
|
||
|
|
var toolbarNode = /*#__PURE__*/React.createElement("div", {
|
||
|
|
className: "".concat(prefixCls, "-operations")
|
||
|
|
}, toolsNode);
|
||
|
|
return /*#__PURE__*/React.createElement(_rcMotion.default, {
|
||
|
|
visible: visible,
|
||
|
|
motionName: maskTransitionName
|
||
|
|
}, function (_ref2) {
|
||
|
|
var className = _ref2.className,
|
||
|
|
style = _ref2.style;
|
||
|
|
return /*#__PURE__*/React.createElement(_portal.default, {
|
||
|
|
open: true,
|
||
|
|
getContainer: getContainer !== null && getContainer !== void 0 ? getContainer : document.body
|
||
|
|
}, /*#__PURE__*/React.createElement("div", {
|
||
|
|
className: (0, _classnames4.default)("".concat(prefixCls, "-operations-wrapper"), className, rootClassName),
|
||
|
|
style: style
|
||
|
|
}, closeIcon === null ? null : /*#__PURE__*/React.createElement("button", {
|
||
|
|
className: "".concat(prefixCls, "-close"),
|
||
|
|
onClick: onClose
|
||
|
|
}, closeIcon || close), showSwitch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
||
|
|
className: (0, _classnames4.default)("".concat(prefixCls, "-switch-left"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-left-disabled"), current === 0)),
|
||
|
|
onClick: onSwitchLeft
|
||
|
|
}, left), /*#__PURE__*/React.createElement("div", {
|
||
|
|
className: (0, _classnames4.default)("".concat(prefixCls, "-switch-right"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-switch-right-disabled"), current === count - 1)),
|
||
|
|
onClick: onSwitchRight
|
||
|
|
}, right)), /*#__PURE__*/React.createElement("div", {
|
||
|
|
className: "".concat(prefixCls, "-footer")
|
||
|
|
}, showProgress && /*#__PURE__*/React.createElement("div", {
|
||
|
|
className: "".concat(prefixCls, "-progress")
|
||
|
|
}, countRender ? countRender(current + 1, count) : "".concat(current + 1, " / ").concat(count)), toolbarRender ? toolbarRender(toolbarNode, (0, _objectSpread2.default)({
|
||
|
|
icons: {
|
||
|
|
flipYIcon: toolsNode[0],
|
||
|
|
flipXIcon: toolsNode[1],
|
||
|
|
rotateLeftIcon: toolsNode[2],
|
||
|
|
rotateRightIcon: toolsNode[3],
|
||
|
|
zoomOutIcon: toolsNode[4],
|
||
|
|
zoomInIcon: toolsNode[5]
|
||
|
|
},
|
||
|
|
actions: {
|
||
|
|
onFlipY: onFlipY,
|
||
|
|
onFlipX: onFlipX,
|
||
|
|
onRotateLeft: onRotateLeft,
|
||
|
|
onRotateRight: onRotateRight,
|
||
|
|
onZoomOut: onZoomOut,
|
||
|
|
onZoomIn: onZoomIn
|
||
|
|
},
|
||
|
|
transform: transform
|
||
|
|
}, groupContext ? {
|
||
|
|
current: current,
|
||
|
|
total: count
|
||
|
|
} : {})) : toolbarNode)));
|
||
|
|
});
|
||
|
|
};
|
||
|
|
var _default = Operations;
|
||
|
|
exports.default = _default;
|