uxcore-album
Version:
uxcore-album component for uxcore.
435 lines (365 loc) • 16.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _uxcoreIcon = require('uxcore-icon');
var _uxcoreIcon2 = _interopRequireDefault(_uxcoreIcon);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _Carousel = require('./Carousel');
var _Carousel2 = _interopRequireDefault(_Carousel);
var _transformDetect = require('./transform-detect');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } /**
* Album Component for uxcore
* @author vincent.bian
*
* Copyright 2015-2016, Uxcore Team, Alinw.
* All rights reserved.
*/
var Viewer = function (_React$Component) {
_inherits(Viewer, _React$Component);
Viewer.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
if (props.open && !state.lastOpenStatus) {
var coordinate = props.coordinate || state.lastCoordinate;
if (coordinate) {
Viewer.stage.style[_transformDetect.transformOriginProperty] = coordinate.left + 'px ' + coordinate.top + 'px';
} else {
Viewer.stage.style[_transformDetect.transformOriginProperty] = '50% 50%';
}
return _extends({}, state, {
current: props.current,
lastOpenStatus: props.open,
lastCoordinate: props.coordinate
});
}
return null;
};
function Viewer(props) {
_classCallCheck(this, Viewer);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.state = {
scale: 1,
current: props.current,
lastOpenStatus: props.open,
lastCoordinate: props.coordinate,
imageScaleMap: {},
imageRotateMap: {}
};
_this.onKeyUp = _this.onKeyUp.bind(_this);
_this.prev = _this.prev.bind(_this);
_this.next = _this.next.bind(_this);
_this.setCurrent = _this.setCurrent.bind(_this);
_this.minScale = 0.6;
_this.maxScale = 2;
return _this;
}
Viewer.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
this.overlay.focus();
if (prevState.current !== this.state.current) {
this.props.onSetCurrent(this.state.current);
}
};
Viewer.prototype.onKeyUp = function onKeyUp(e) {
var enableKeyBoardControl = this.props.enableKeyBoardControl;
if (enableKeyBoardControl) {
this.handleKeyboardEvent(e);
}
};
Viewer.prototype.setCurrent = function setCurrent(i) {
this.setState({
current: i
});
};
Viewer.prototype.handleKeyboardEvent = function handleKeyboardEvent(e) {
switch (e.keyCode) {
case 37:
// left
this.prev();
break;
case 39:
// right
this.next();
break;
case 27:
// esc
this.props.onClose(e);
break;
default:
break;
}
};
Viewer.prototype.prev = function prev() {
var current = this.state.current;
if (current === 0) return;
this.setState({
current: current - 1
}, this.handleChange.bind(this));
};
Viewer.prototype.next = function next() {
var current = this.state.current;
var children = this.props.children;
if (!Array.isArray(children)) {
children = [children];
}
if (current === children.length - 1) return;
this.setState({
current: current + 1
}, this.handleChange.bind(this));
};
/**
* 变化时
* @param {Number} index
*/
Viewer.prototype.handleChange = function handleChange(index) {
var onChange = this.props.onChange;
var current = this.state.current;
if (index !== undefined) {
current = index;
}
if (typeof onChange === 'function') {
onChange(current);
}
};
/**
* 放大缩小
* @param {Number} value
*/
Viewer.prototype.handleImageZoom = function handleImageZoom(value) {
var _this2 = this;
var _state = this.state,
current = _state.current,
imageScaleMap = _state.imageScaleMap,
imageRotateMap = _state.imageRotateMap;
if (imageScaleMap[current] === undefined) {
imageScaleMap[current] = 1;
}
var v = parseInt((imageScaleMap[current] + value) * 100, 10) / 100;
if (v <= this.maxScale && v >= this.minScale) {
imageScaleMap[current] = v;
this.setState({ imageScaleMap: imageScaleMap }, function () {
_this2.photo.setStyle(imageRotateMap[current], v);
});
}
};
/**
* 旋转
* @param {Number} value
*/
Viewer.prototype.handleImageRotate = function handleImageRotate(value) {
var _this3 = this;
var _state2 = this.state,
current = _state2.current,
imageRotateMap = _state2.imageRotateMap,
imageScaleMap = _state2.imageScaleMap;
if (imageRotateMap[current] === undefined) {
imageRotateMap[current] = 0;
}
imageRotateMap[current] += value;
this.setState({ imageRotateMap: imageRotateMap }, function () {
_this3.photo.setStyle(imageRotateMap[current], imageScaleMap[current]);
});
};
Viewer.prototype.renderControl = function renderControl(type, disabled) {
return _react2["default"].createElement('span', {
className: (0, _classnames2["default"])('album-control', 'album-icon', 'album-' + type, {
disabled: disabled
}),
onClick: this[type]
});
};
Viewer.prototype.renderCarousel = function renderCarousel() {
var current = this.state.current;
var children = this.props.children;
return _react2["default"].createElement(
_Carousel2["default"],
{
current: current,
onPrev: this.prev,
onNext: this.next,
onSetCurrent: this.setCurrent,
onChange: this.handleChange.bind(this),
inView: true
},
children
);
};
Viewer.prototype.renderFuncButtons = function renderFuncButtons() {
var _this4 = this;
var customButtons = this.props.customButtons;
if (!Array.isArray(customButtons)) {
customButtons = [customButtons];
}
var _state3 = this.state,
current = _state3.current,
imageScaleMap = _state3.imageScaleMap;
return _react2["default"].createElement(
'div',
{ className: 'album-func-button' },
_react2["default"].createElement(
'div',
{
className: (0, _classnames2["default"])('album-func-button-item album-func-button-item__first', {
disabled: imageScaleMap[current] >= this.maxScale
})
},
_react2["default"].createElement(_uxcoreIcon2["default"], { usei: true, name: 'fangda', onClick: function onClick() {
_this4.handleImageZoom(0.2);
} })
),
_react2["default"].createElement(
'div',
{
className: (0, _classnames2["default"])('album-func-button-item', {
disabled: imageScaleMap[current] <= this.minScale
})
},
_react2["default"].createElement(_uxcoreIcon2["default"], { usei: true, name: 'suoxiao', onClick: function onClick() {
_this4.handleImageZoom(-0.2);
} })
),
_react2["default"].createElement(
'div',
{ className: 'album-func-button-item' },
_react2["default"].createElement(_uxcoreIcon2["default"], { usei: true, name: 'zuoxuanzhuan', onClick: function onClick() {
_this4.handleImageRotate(-90);
} })
),
_react2["default"].createElement(
'div',
{ className: 'album-func-button-item' },
_react2["default"].createElement(_uxcoreIcon2["default"], { usei: true, name: 'youxuanzhuan', onClick: function onClick() {
_this4.handleImageRotate(90);
} })
),
customButtons.map(function (_ref, i) {
var icon = _ref.icon,
onClick = _ref.onClick;
return _react2["default"].createElement(
'div',
{
key: i,
className: 'album-func-button-item',
onClick: onClick
},
icon
);
})
);
};
Viewer.prototype.render = function render() {
var _this5 = this;
var _state4 = this.state,
current = _state4.current,
imageRotateMap = _state4.imageRotateMap,
imageScaleMap = _state4.imageScaleMap;
var _props = this.props,
children = _props.children,
hasControl = _props.hasControl,
onClose = _props.onClose,
open = _props.open,
showButton = _props.showButton,
maskClosable = _props.maskClosable;
var prevDisabled = current === 0;
var nextDisabled = current === children.length - 1;
return _react2["default"].createElement(
'div',
{
className: (0, _classnames2["default"])('album-overlay', {
'album-overlay-no-control': !hasControl,
'album-overlay-hide': !open
}),
ref: function ref(node) {
_this5.overlay = node;
},
onKeyUp: this.onKeyUp,
tabIndex: '1'
},
hasControl ? this.renderControl('prev', prevDisabled) : null,
hasControl ? this.renderControl('next', nextDisabled) : null,
_react2["default"].createElement(
'div',
{ className: 'album-stage', ref: function ref(node) {
Viewer.stage = node;
} },
children[current] && _react2["default"].cloneElement(children[current], {
ref: function ref(c) {
_this5.photo = c;
},
rotate: imageRotateMap[current] || 0,
scale: imageScaleMap[current] || 1,
onMaskClick: onClose,
maskClosable: maskClosable
}),
showButton ? this.renderFuncButtons() : null
),
hasControl ? this.renderCarousel() : null,
_react2["default"].createElement('span', {
className: 'album-close album-icon',
onClick: onClose
})
);
};
return Viewer;
}(_react2["default"].Component);
Viewer.stage = undefined;
var createCustomButtonsChecker = function createCustomButtonsChecker() {
var oneOfType = _propTypes2["default"].oneOfType,
arrayOf = _propTypes2["default"].arrayOf,
shape = _propTypes2["default"].shape,
element = _propTypes2["default"].element,
func = _propTypes2["default"].func;
var objectType = shape({
icon: element.isRequired,
onClick: func.isRequired
});
var arrayType = arrayOf(objectType);
return oneOfType([objectType, arrayType]);
};
Viewer.defaultProps = {
hasControl: true,
showButton: false,
customButtons: [],
prev: function prev() {},
next: function next() {},
onClose: function onClose() {},
onSetCurrent: function onSetCurrent() {},
enableKeyBoardControl: true,
coordinate: null,
current: 0,
open: true
};
Viewer.propTypes = {
children: _propTypes2["default"].array,
hasControl: _propTypes2["default"].bool,
showButton: _propTypes2["default"].bool,
customButtons: createCustomButtonsChecker(),
// prevDisabled: React.PropTypes.bool,
prev: _propTypes2["default"].func,
// nextDisabled: React.PropTypes.bool,
next: _propTypes2["default"].func,
onClose: _propTypes2["default"].func,
onSetCurrent: _propTypes2["default"].func,
enableKeyBoardControl: _propTypes2["default"].bool,
coordinate: _propTypes2["default"].shape({
left: _propTypes2["default"].number,
top: _propTypes2["default"].number,
width: _propTypes2["default"].number,
height: _propTypes2["default"].number
}),
current: _propTypes2["default"].number,
open: _propTypes2["default"].bool
};
Viewer.displayName = 'Viewer';
(0, _reactLifecyclesCompat.polyfill)(Viewer);
exports["default"] = Viewer;
module.exports = exports['default'];