@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
157 lines (156 loc) • 4.98 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _spin = _interopRequireDefault(require("../spin"));
var _previewImageFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/image/previewImageFoundation"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const prefixCls = _constants.cssClasses.PREFIX;
const preViewImgPrefixCls = `${prefixCls}-preview-image`;
class PreviewImage extends _baseComponent.default {
get adapter() {
return Object.assign(Object.assign({}, super.adapter), {
getContainer: () => {
return this.containerRef.current;
},
getImage: () => {
return this.imageRef.current;
},
setLoading: loading => {
this.setState({
loading
});
},
setImageCursor: canDrag => {
this.imageRef.current.style.cursor = canDrag ? "grab" : "default";
}
});
}
constructor(props) {
super(props);
this.onWindowResize = () => {
this.foundation.handleWindowResize();
};
// Determine the response method of right click according to the disableDownload parameter in props
this.handleRightClickImage = e => {
this.foundation.handleRightClickImage(e);
};
this.handleLoad = e => {
this.foundation.handleLoad(e);
};
this.handleError = e => {
this.foundation.handleError(e);
};
this.handleImageMove = e => {
this.foundation.handleImageMove(e);
};
this.handleMouseDown = e => {
this.foundation.handleImageMouseDown(e);
};
this.state = {
width: 0,
height: 0,
loading: true,
translate: {
x: 0,
y: 0
},
currZoom: this.props.zoom
};
this.containerRef = /*#__PURE__*/_react.default.createRef();
this.imageRef = /*#__PURE__*/_react.default.createRef();
this.foundation = new _previewImageFoundation.default(this.adapter);
}
componentDidMount() {
this.foundation.init();
window.addEventListener("resize", this.onWindowResize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.onWindowResize);
}
componentDidUpdate(prevProps, prevStates) {
// If src changes, start a new loading
const zoomChange = "zoom" in this.props && this.props.zoom !== this.state.currZoom;
const srcChange = this.props.src && this.props.src !== prevProps.src;
if (srcChange) {
this.foundation.setLoading(true);
}
if (!zoomChange && !srcChange && prevProps) {
if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
this.foundation.handleRatioChange();
}
if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
this.onWindowResize();
}
}
}
render() {
const {
src,
rotation,
crossOrigin
} = this.props;
const {
loading,
width,
height,
translate
} = this.state;
const imgStyle = {
position: "absolute",
visibility: loading ? "hidden" : "visible",
transform: `translate(${translate.x}px, ${translate.y}px) rotate(${rotation}deg)`,
width,
height
};
return /*#__PURE__*/_react.default.createElement("div", {
className: `${preViewImgPrefixCls}`,
ref: this.containerRef
}, /*#__PURE__*/_react.default.createElement("img", {
ref: this.imageRef,
src: src,
alt: "previewImag",
className: `${preViewImgPrefixCls}-img`,
key: src,
onMouseMove: this.handleImageMove,
onMouseDown: this.handleMouseDown,
onContextMenu: this.handleRightClickImage,
onDragStart: e => e.preventDefault(),
onLoad: this.handleLoad,
onError: this.handleError,
style: imgStyle,
crossOrigin: crossOrigin
}), loading && /*#__PURE__*/_react.default.createElement(_spin.default, {
size: "large",
wrapperClassName: `${preViewImgPrefixCls}-spin`
}));
}
}
exports.default = PreviewImage;
PreviewImage.propTypes = {
src: _propTypes.default.string,
rotation: _propTypes.default.number,
style: _propTypes.default.object,
// maxZoom: PropTypes.number,
// minZoom: PropTypes.number,
// zoomStep: PropTypes.number,
zoom: _propTypes.default.number,
ratio: _propTypes.default.string,
disableDownload: _propTypes.default.bool,
clickZoom: _propTypes.default.number,
setRatio: _propTypes.default.func,
onZoom: _propTypes.default.func,
onLoad: _propTypes.default.func,
onError: _propTypes.default.func
};
PreviewImage.defaultProps = {
// maxZoom: 5,
// minZoom: 0.1,
// zoomStep: 0.1,
zoom: undefined
};