magnifier-react/lib/Magnifier.js

商城放大镜React组件,图片放大镜

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Magnifier = function (_React$Component) {
    (0, _inherits3.default)(Magnifier, _React$Component);

    function Magnifier() {
        var _ref;

        var _temp, _this, _ret;

        (0, _classCallCheck3.default)(this, Magnifier);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Magnifier.__proto__ || (0, _getPrototypeOf2.default)(Magnifier)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
            show: false,
            moveOffset: {
                top: 0,
                left: 0
            },
            moveBox: _this.props.moveBox,
            zoomOffset: {
                left: 0,
                top: 0
            },
            img: {
                height: 0,
                width: 0
            }
        }, _this.handleLoadImage = function (e) {
            e.preventDefault();
            var img = e.target;
            if (img.naturalHeight && img.naturalWidth) {
                _this.setState({
                    img: {
                        height: img.naturalHeight,
                        width: img.naturalWidth
                    }
                });
            }
        }, _this.handleMove = function (e) {
            e.preventDefault();
            var _this$state = _this.state,
                moveBox = _this$state.moveBox,
                img = _this$state.img;

            var Target = e.currentTarget.getBoundingClientRect();
            var cx = e.clientX - e.currentTarget.getBoundingClientRect().left;
            var cy = e.clientY - e.currentTarget.getBoundingClientRect().top;
            var boxWidth = e.currentTarget.getBoundingClientRect().width;
            var boxHeight = e.currentTarget.getBoundingClientRect().height;
            var moveBoxX = cx - moveBox.width / 2;
            var moveBoxY = cy - moveBox.height / 2;
            if (moveBoxX <= 0) {
                moveBoxX = 0;
            }
            if (moveBoxY <= 0) {
                moveBoxY = 0;
            }
            if (moveBoxX >= boxWidth - moveBox.width) {
                moveBoxX = boxWidth - moveBox.width;
            }
            if (moveBoxY >= boxHeight - moveBox.height) {
                moveBoxY = boxHeight - moveBox.height;
            }
            var scaleX = moveBoxX / (boxWidth - moveBox.width);
            var scaleY = moveBoxY / (boxHeight - moveBox.height);
            var zoomX = -(img.width - _this.props.showBox.width) * scaleX;
            var zoomY = -(img.height - _this.props.showBox.height) * scaleY;
            _this.setState({
                show: true,
                moveOffset: {
                    left: moveBoxX,
                    top: moveBoxY
                },
                zoomOffset: {
                    left: zoomX,
                    top: zoomY
                }
            });
        }, _this.handleLeave = function (e) {
            e.preventDefault();
            _this.setState({
                show: false
            });
        }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
    }

    (0, _createClass3.default)(Magnifier, [{
        key: "render",
        value: function render() {
            var _state = this.state,
                show = _state.show,
                moveOffset = _state.moveOffset,
                moveBox = _state.moveBox,
                zoomOffset = _state.zoomOffset;
            var _props = this.props,
                src = _props.src,
                mainBox = _props.mainBox,
                showBox = _props.showBox;

            return _react2.default.createElement(
                "div",
                {
                    style: {
                        position: "relative",
                        height: mainBox.height,
                        width: mainBox.width
                    },
                    onMouseMove: this.handleMove,
                    onMouseLeave: this.handleLeave
                },
                _react2.default.createElement("img", {
                    style: {
                        height: mainBox.height,
                        width: mainBox.width
                    },
                    src: src
                }),
                _react2.default.createElement("div", {
                    style: {
                        position: "absolute",
                        display: show ? "block" : "none",
                        height: moveBox.height,
                        width: moveBox.width,
                        left: moveOffset.left,
                        top: moveOffset.top,
                        background: moveBox.background ? moveBox.background : "blue",
                        opacity: moveBox.opacity ? moveBox.opacity : "0.3",
                        cursor: moveBox.cursor ? moveBox.cursor : "move"
                    }
                }),
                _react2.default.createElement(
                    "div",
                    {
                        style: {
                            position: "absolute",
                            overflow: "hidden",
                            display: show ? "block" : "none",
                            zindex: 10,
                            height: showBox.height,
                            width: showBox.width,
                            top: showBox.top ? showBox.top : 0,
                            left: showBox.left ? showBox.left : mainBox.width + 6
                        }
                    },
                    _react2.default.createElement("img", { src: src,
                        style: {
                            position: "absolute",
                            top: zoomOffset.top,
                            left: zoomOffset.left
                        },
                        onLoad: this.handleLoadImage
                    })
                )
            );
        }
    }]);
    return Magnifier;
}(_react2.default.Component);

exports.default = Magnifier;