David Kruger
8df9031d27
``` ~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js ```
1027 lines
31 KiB
JavaScript
1027 lines
31 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.getDomTreeShapes = getDomTreeShapes;
|
|
exports.findNativeHandler = findNativeHandler;
|
|
exports.default = exports.SwipeableViewsContext = void 0;
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
|
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
|
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
|
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
|
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
|
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
|
|
var React = _interopRequireWildcard(require("react"));
|
|
|
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
|
var _warning = _interopRequireDefault(require("warning"));
|
|
|
|
var _reactSwipeableViewsCore = require("react-swipeable-views-core");
|
|
|
|
function addEventListener(node, event, handler, options) {
|
|
node.addEventListener(event, handler, options);
|
|
return {
|
|
remove: function remove() {
|
|
node.removeEventListener(event, handler, options);
|
|
}
|
|
};
|
|
}
|
|
|
|
var styles = {
|
|
container: {
|
|
direction: 'ltr',
|
|
display: 'flex',
|
|
willChange: 'transform'
|
|
},
|
|
slide: {
|
|
width: '100%',
|
|
WebkitFlexShrink: 0,
|
|
flexShrink: 0,
|
|
overflow: 'auto'
|
|
}
|
|
};
|
|
var axisProperties = {
|
|
root: {
|
|
x: {
|
|
overflowX: 'hidden'
|
|
},
|
|
'x-reverse': {
|
|
overflowX: 'hidden'
|
|
},
|
|
y: {
|
|
overflowY: 'hidden'
|
|
},
|
|
'y-reverse': {
|
|
overflowY: 'hidden'
|
|
}
|
|
},
|
|
flexDirection: {
|
|
x: 'row',
|
|
'x-reverse': 'row-reverse',
|
|
y: 'column',
|
|
'y-reverse': 'column-reverse'
|
|
},
|
|
transform: {
|
|
x: function x(translate) {
|
|
return "translate(".concat(-translate, "%, 0)");
|
|
},
|
|
'x-reverse': function xReverse(translate) {
|
|
return "translate(".concat(translate, "%, 0)");
|
|
},
|
|
y: function y(translate) {
|
|
return "translate(0, ".concat(-translate, "%)");
|
|
},
|
|
'y-reverse': function yReverse(translate) {
|
|
return "translate(0, ".concat(translate, "%)");
|
|
}
|
|
},
|
|
length: {
|
|
x: 'width',
|
|
'x-reverse': 'width',
|
|
y: 'height',
|
|
'y-reverse': 'height'
|
|
},
|
|
rotationMatrix: {
|
|
x: {
|
|
x: [1, 0],
|
|
y: [0, 1]
|
|
},
|
|
'x-reverse': {
|
|
x: [-1, 0],
|
|
y: [0, 1]
|
|
},
|
|
y: {
|
|
x: [0, 1],
|
|
y: [1, 0]
|
|
},
|
|
'y-reverse': {
|
|
x: [0, -1],
|
|
y: [1, 0]
|
|
}
|
|
},
|
|
scrollPosition: {
|
|
x: 'scrollLeft',
|
|
'x-reverse': 'scrollLeft',
|
|
y: 'scrollTop',
|
|
'y-reverse': 'scrollTop'
|
|
},
|
|
scrollLength: {
|
|
x: 'scrollWidth',
|
|
'x-reverse': 'scrollWidth',
|
|
y: 'scrollHeight',
|
|
'y-reverse': 'scrollHeight'
|
|
},
|
|
clientLength: {
|
|
x: 'clientWidth',
|
|
'x-reverse': 'clientWidth',
|
|
y: 'clientHeight',
|
|
'y-reverse': 'clientHeight'
|
|
}
|
|
};
|
|
|
|
function createTransition(property, options) {
|
|
var duration = options.duration,
|
|
easeFunction = options.easeFunction,
|
|
delay = options.delay;
|
|
return "".concat(property, " ").concat(duration, " ").concat(easeFunction, " ").concat(delay);
|
|
} // We are using a 2x2 rotation matrix.
|
|
|
|
|
|
function applyRotationMatrix(touch, axis) {
|
|
var rotationMatrix = axisProperties.rotationMatrix[axis];
|
|
return {
|
|
pageX: rotationMatrix.x[0] * touch.pageX + rotationMatrix.x[1] * touch.pageY,
|
|
pageY: rotationMatrix.y[0] * touch.pageX + rotationMatrix.y[1] * touch.pageY
|
|
};
|
|
}
|
|
|
|
function adaptMouse(event) {
|
|
event.touches = [{
|
|
pageX: event.pageX,
|
|
pageY: event.pageY
|
|
}];
|
|
return event;
|
|
}
|
|
|
|
function getDomTreeShapes(element, rootNode) {
|
|
var domTreeShapes = [];
|
|
|
|
while (element && element !== rootNode && element !== document.body) {
|
|
// We reach a Swipeable View, no need to look higher in the dom tree.
|
|
if (element.hasAttribute('data-swipeable')) {
|
|
break;
|
|
}
|
|
|
|
var style = window.getComputedStyle(element);
|
|
|
|
if ( // Ignore the scroll children if the element is absolute positioned.
|
|
style.getPropertyValue('position') === 'absolute' || // Ignore the scroll children if the element has an overflowX hidden
|
|
style.getPropertyValue('overflow-x') === 'hidden') {
|
|
domTreeShapes = [];
|
|
} else if (element.clientWidth > 0 && element.scrollWidth > element.clientWidth || element.clientHeight > 0 && element.scrollHeight > element.clientHeight) {
|
|
// Ignore the nodes that have no width.
|
|
// Keep elements with a scroll
|
|
domTreeShapes.push({
|
|
element: element,
|
|
scrollWidth: element.scrollWidth,
|
|
scrollHeight: element.scrollHeight,
|
|
clientWidth: element.clientWidth,
|
|
clientHeight: element.clientHeight,
|
|
scrollLeft: element.scrollLeft,
|
|
scrollTop: element.scrollTop
|
|
});
|
|
}
|
|
|
|
element = element.parentNode;
|
|
}
|
|
|
|
return domTreeShapes;
|
|
} // We can only have one node at the time claiming ownership for handling the swipe.
|
|
// Otherwise, the UX would be confusing.
|
|
// That's why we use a singleton here.
|
|
|
|
|
|
var nodeWhoClaimedTheScroll = null;
|
|
|
|
function findNativeHandler(params) {
|
|
var domTreeShapes = params.domTreeShapes,
|
|
pageX = params.pageX,
|
|
startX = params.startX,
|
|
axis = params.axis;
|
|
return domTreeShapes.some(function (shape) {
|
|
// Determine if we are going backward or forward.
|
|
var goingForward = pageX >= startX;
|
|
|
|
if (axis === 'x' || axis === 'y') {
|
|
goingForward = !goingForward;
|
|
} // scrollTop is not always be an integer.
|
|
// https://github.com/jquery/api.jquery.com/issues/608
|
|
|
|
|
|
var scrollPosition = Math.round(shape[axisProperties.scrollPosition[axis]]);
|
|
var areNotAtStart = scrollPosition > 0;
|
|
var areNotAtEnd = scrollPosition + shape[axisProperties.clientLength[axis]] < shape[axisProperties.scrollLength[axis]];
|
|
|
|
if (goingForward && areNotAtEnd || !goingForward && areNotAtStart) {
|
|
nodeWhoClaimedTheScroll = shape.element;
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
}
|
|
|
|
var SwipeableViewsContext = React.createContext();
|
|
exports.SwipeableViewsContext = SwipeableViewsContext;
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
SwipeableViewsContext.displayName = 'SwipeableViewsContext';
|
|
}
|
|
|
|
var SwipeableViews =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
(0, _inherits2.default)(SwipeableViews, _React$Component);
|
|
|
|
function SwipeableViews(props) {
|
|
var _this;
|
|
|
|
(0, _classCallCheck2.default)(this, SwipeableViews);
|
|
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(SwipeableViews).call(this, props));
|
|
_this.rootNode = null;
|
|
_this.containerNode = null;
|
|
_this.ignoreNextScrollEvents = false;
|
|
_this.viewLength = 0;
|
|
_this.startX = 0;
|
|
_this.lastX = 0;
|
|
_this.vx = 0;
|
|
_this.startY = 0;
|
|
_this.isSwiping = undefined;
|
|
_this.started = false;
|
|
_this.startIndex = 0;
|
|
_this.transitionListener = null;
|
|
_this.touchMoveListener = null;
|
|
_this.activeSlide = null;
|
|
_this.indexCurrent = null;
|
|
_this.firstRenderTimeout = null;
|
|
|
|
_this.setRootNode = function (node) {
|
|
_this.rootNode = node;
|
|
};
|
|
|
|
_this.setContainerNode = function (node) {
|
|
_this.containerNode = node;
|
|
};
|
|
|
|
_this.setActiveSlide = function (node) {
|
|
_this.activeSlide = node;
|
|
|
|
_this.updateHeight();
|
|
};
|
|
|
|
_this.handleSwipeStart = function (event) {
|
|
var axis = _this.props.axis;
|
|
var touch = applyRotationMatrix(event.touches[0], axis);
|
|
_this.viewLength = _this.rootNode.getBoundingClientRect()[axisProperties.length[axis]];
|
|
_this.startX = touch.pageX;
|
|
_this.lastX = touch.pageX;
|
|
_this.vx = 0;
|
|
_this.startY = touch.pageY;
|
|
_this.isSwiping = undefined;
|
|
_this.started = true;
|
|
var computedStyle = window.getComputedStyle(_this.containerNode);
|
|
var transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
|
|
|
|
if (transform && transform !== 'none') {
|
|
var transformValues = transform.split('(')[1].split(')')[0].split(',');
|
|
var rootStyle = window.getComputedStyle(_this.rootNode);
|
|
var tranformNormalized = applyRotationMatrix({
|
|
pageX: parseInt(transformValues[4], 10),
|
|
pageY: parseInt(transformValues[5], 10)
|
|
}, axis);
|
|
_this.startIndex = -tranformNormalized.pageX / (_this.viewLength - parseInt(rootStyle.paddingLeft, 10) - parseInt(rootStyle.paddingRight, 10)) || 0;
|
|
}
|
|
};
|
|
|
|
_this.handleSwipeMove = function (event) {
|
|
// The touch start event can be cancel.
|
|
// Makes sure we set a starting point.
|
|
if (!_this.started) {
|
|
_this.handleTouchStart(event);
|
|
|
|
return;
|
|
} // We are not supposed to hanlde this touch move.
|
|
|
|
|
|
if (nodeWhoClaimedTheScroll !== null && nodeWhoClaimedTheScroll !== _this.rootNode) {
|
|
return;
|
|
}
|
|
|
|
var _this$props = _this.props,
|
|
axis = _this$props.axis,
|
|
children = _this$props.children,
|
|
ignoreNativeScroll = _this$props.ignoreNativeScroll,
|
|
onSwitching = _this$props.onSwitching,
|
|
resistance = _this$props.resistance;
|
|
var touch = applyRotationMatrix(event.touches[0], axis); // We don't know yet.
|
|
|
|
if (_this.isSwiping === undefined) {
|
|
var dx = Math.abs(touch.pageX - _this.startX);
|
|
var dy = Math.abs(touch.pageY - _this.startY);
|
|
var isSwiping = dx > dy && dx > _reactSwipeableViewsCore.constant.UNCERTAINTY_THRESHOLD; // We let the parent handle the scroll.
|
|
|
|
if (!resistance && (axis === 'y' || axis === 'y-reverse') && (_this.indexCurrent === 0 && _this.startX < touch.pageX || _this.indexCurrent === React.Children.count(_this.props.children) - 1 && _this.startX > touch.pageX)) {
|
|
_this.isSwiping = false;
|
|
return;
|
|
} // We are likely to be swiping, let's prevent the scroll event.
|
|
|
|
|
|
if (dx > dy) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
if (isSwiping === true || dy > _reactSwipeableViewsCore.constant.UNCERTAINTY_THRESHOLD) {
|
|
_this.isSwiping = isSwiping;
|
|
_this.startX = touch.pageX; // Shift the starting point.
|
|
|
|
return; // Let's wait the next touch event to move something.
|
|
}
|
|
}
|
|
|
|
if (_this.isSwiping !== true) {
|
|
return;
|
|
} // We are swiping, let's prevent the scroll event.
|
|
|
|
|
|
event.preventDefault(); // Low Pass filter.
|
|
|
|
_this.vx = _this.vx * 0.5 + (touch.pageX - _this.lastX) * 0.5;
|
|
_this.lastX = touch.pageX;
|
|
|
|
var _computeIndex = (0, _reactSwipeableViewsCore.computeIndex)({
|
|
children: children,
|
|
resistance: resistance,
|
|
pageX: touch.pageX,
|
|
startIndex: _this.startIndex,
|
|
startX: _this.startX,
|
|
viewLength: _this.viewLength
|
|
}),
|
|
index = _computeIndex.index,
|
|
startX = _computeIndex.startX; // Add support for native scroll elements.
|
|
|
|
|
|
if (nodeWhoClaimedTheScroll === null && !ignoreNativeScroll) {
|
|
var domTreeShapes = getDomTreeShapes(event.target, _this.rootNode);
|
|
var hasFoundNativeHandler = findNativeHandler({
|
|
domTreeShapes: domTreeShapes,
|
|
startX: _this.startX,
|
|
pageX: touch.pageX,
|
|
axis: axis
|
|
}); // We abort the touch move handler.
|
|
|
|
if (hasFoundNativeHandler) {
|
|
return;
|
|
}
|
|
} // We are moving toward the edges.
|
|
|
|
|
|
if (startX) {
|
|
_this.startX = startX;
|
|
} else if (nodeWhoClaimedTheScroll === null) {
|
|
nodeWhoClaimedTheScroll = _this.rootNode;
|
|
}
|
|
|
|
_this.setIndexCurrent(index);
|
|
|
|
var callback = function callback() {
|
|
if (onSwitching) {
|
|
onSwitching(index, 'move');
|
|
}
|
|
};
|
|
|
|
if (_this.state.displaySameSlide || !_this.state.isDragging) {
|
|
_this.setState({
|
|
displaySameSlide: false,
|
|
isDragging: true
|
|
}, callback);
|
|
}
|
|
|
|
callback();
|
|
};
|
|
|
|
_this.handleSwipeEnd = function () {
|
|
nodeWhoClaimedTheScroll = null; // The touch start event can be cancel.
|
|
// Makes sure that a starting point is set.
|
|
|
|
if (!_this.started) {
|
|
return;
|
|
}
|
|
|
|
_this.started = false;
|
|
|
|
if (_this.isSwiping !== true) {
|
|
return;
|
|
}
|
|
|
|
var indexLatest = _this.state.indexLatest;
|
|
var indexCurrent = _this.indexCurrent;
|
|
var delta = indexLatest - indexCurrent;
|
|
var indexNew; // Quick movement
|
|
|
|
if (Math.abs(_this.vx) > _this.props.threshold) {
|
|
if (_this.vx > 0) {
|
|
indexNew = Math.floor(indexCurrent);
|
|
} else {
|
|
indexNew = Math.ceil(indexCurrent);
|
|
}
|
|
} else if (Math.abs(delta) > _this.props.hysteresis) {
|
|
// Some hysteresis with indexLatest.
|
|
indexNew = delta > 0 ? Math.floor(indexCurrent) : Math.ceil(indexCurrent);
|
|
} else {
|
|
indexNew = indexLatest;
|
|
}
|
|
|
|
var indexMax = React.Children.count(_this.props.children) - 1;
|
|
|
|
if (indexNew < 0) {
|
|
indexNew = 0;
|
|
} else if (indexNew > indexMax) {
|
|
indexNew = indexMax;
|
|
}
|
|
|
|
_this.setIndexCurrent(indexNew);
|
|
|
|
_this.setState({
|
|
indexLatest: indexNew,
|
|
isDragging: false
|
|
}, function () {
|
|
if (_this.props.onSwitching) {
|
|
_this.props.onSwitching(indexNew, 'end');
|
|
}
|
|
|
|
if (_this.props.onChangeIndex && indexNew !== indexLatest) {
|
|
_this.props.onChangeIndex(indexNew, indexLatest, {
|
|
reason: 'swipe'
|
|
});
|
|
} // Manually calling handleTransitionEnd in that case as isn't otherwise.
|
|
|
|
|
|
if (indexCurrent === indexLatest) {
|
|
_this.handleTransitionEnd();
|
|
}
|
|
});
|
|
};
|
|
|
|
_this.handleTouchStart = function (event) {
|
|
if (_this.props.onTouchStart) {
|
|
_this.props.onTouchStart(event);
|
|
}
|
|
|
|
_this.handleSwipeStart(event);
|
|
};
|
|
|
|
_this.handleTouchEnd = function (event) {
|
|
if (_this.props.onTouchEnd) {
|
|
_this.props.onTouchEnd(event);
|
|
}
|
|
|
|
_this.handleSwipeEnd(event);
|
|
};
|
|
|
|
_this.handleMouseDown = function (event) {
|
|
if (_this.props.onMouseDown) {
|
|
_this.props.onMouseDown(event);
|
|
}
|
|
|
|
event.persist();
|
|
|
|
_this.handleSwipeStart(adaptMouse(event));
|
|
};
|
|
|
|
_this.handleMouseUp = function (event) {
|
|
if (_this.props.onMouseUp) {
|
|
_this.props.onMouseUp(event);
|
|
}
|
|
|
|
_this.handleSwipeEnd(adaptMouse(event));
|
|
};
|
|
|
|
_this.handleMouseLeave = function (event) {
|
|
if (_this.props.onMouseLeave) {
|
|
_this.props.onMouseLeave(event);
|
|
} // Filter out events
|
|
|
|
|
|
if (_this.started) {
|
|
_this.handleSwipeEnd(adaptMouse(event));
|
|
}
|
|
};
|
|
|
|
_this.handleMouseMove = function (event) {
|
|
if (_this.props.onMouseMove) {
|
|
_this.props.onMouseMove(event);
|
|
} // Filter out events
|
|
|
|
|
|
if (_this.started) {
|
|
_this.handleSwipeMove(adaptMouse(event));
|
|
}
|
|
};
|
|
|
|
_this.handleScroll = function (event) {
|
|
if (_this.props.onScroll) {
|
|
_this.props.onScroll(event);
|
|
} // Ignore events bubbling up.
|
|
|
|
|
|
if (event.target !== _this.rootNode) {
|
|
return;
|
|
}
|
|
|
|
if (_this.ignoreNextScrollEvents) {
|
|
_this.ignoreNextScrollEvents = false;
|
|
return;
|
|
}
|
|
|
|
var indexLatest = _this.state.indexLatest;
|
|
var indexNew = Math.ceil(event.target.scrollLeft / event.target.clientWidth) + indexLatest;
|
|
_this.ignoreNextScrollEvents = true; // Reset the scroll position.
|
|
|
|
event.target.scrollLeft = 0;
|
|
|
|
if (_this.props.onChangeIndex && indexNew !== indexLatest) {
|
|
_this.props.onChangeIndex(indexNew, indexLatest, {
|
|
reason: 'focus'
|
|
});
|
|
}
|
|
};
|
|
|
|
_this.updateHeight = function () {
|
|
if (_this.activeSlide !== null) {
|
|
var child = _this.activeSlide.children[0];
|
|
|
|
if (child !== undefined && child.offsetHeight !== undefined && _this.state.heightLatest !== child.offsetHeight) {
|
|
_this.setState({
|
|
heightLatest: child.offsetHeight
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
(0, _reactSwipeableViewsCore.checkIndexBounds)(props);
|
|
}
|
|
|
|
_this.state = {
|
|
indexLatest: props.index,
|
|
// Set to true as soon as the component is swiping.
|
|
// It's the state counter part of this.isSwiping.
|
|
isDragging: false,
|
|
// Help with SSR logic and lazy loading logic.
|
|
renderOnlyActive: !props.disableLazyLoading,
|
|
heightLatest: 0,
|
|
// Let the render method that we are going to display the same slide than previously.
|
|
displaySameSlide: true
|
|
};
|
|
|
|
_this.setIndexCurrent(props.index);
|
|
|
|
return _this;
|
|
}
|
|
|
|
(0, _createClass2.default)(SwipeableViews, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
// Subscribe to transition end events.
|
|
this.transitionListener = addEventListener(this.containerNode, 'transitionend', function (event) {
|
|
if (event.target !== _this2.containerNode) {
|
|
return;
|
|
}
|
|
|
|
_this2.handleTransitionEnd();
|
|
}); // Block the thread to handle that event.
|
|
|
|
this.touchMoveListener = addEventListener(this.rootNode, 'touchmove', function (event) {
|
|
// Handling touch events is disabled.
|
|
if (_this2.props.disabled) {
|
|
return;
|
|
}
|
|
|
|
_this2.handleSwipeMove(event);
|
|
}, {
|
|
passive: false
|
|
});
|
|
|
|
if (!this.props.disableLazyLoading) {
|
|
this.firstRenderTimeout = setTimeout(function () {
|
|
_this2.setState({
|
|
renderOnlyActive: false
|
|
});
|
|
}, 0);
|
|
} // Send all functions in an object if action param is set.
|
|
|
|
|
|
if (this.props.action) {
|
|
this.props.action({
|
|
updateHeight: this.updateHeight
|
|
});
|
|
}
|
|
} // eslint-disable-next-line camelcase,react/sort-comp
|
|
|
|
}, {
|
|
key: "UNSAFE_componentWillReceiveProps",
|
|
value: function UNSAFE_componentWillReceiveProps(nextProps) {
|
|
var index = nextProps.index;
|
|
|
|
if (typeof index === 'number' && index !== this.props.index) {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
(0, _reactSwipeableViewsCore.checkIndexBounds)(nextProps);
|
|
}
|
|
|
|
this.setIndexCurrent(index);
|
|
this.setState({
|
|
// If true, we are going to change the children. We shoudn't animate it.
|
|
displaySameSlide: (0, _reactSwipeableViewsCore.getDisplaySameSlide)(this.props, nextProps),
|
|
indexLatest: index
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.transitionListener.remove();
|
|
this.touchMoveListener.remove();
|
|
clearTimeout(this.firstRenderTimeout);
|
|
}
|
|
}, {
|
|
key: "getSwipeableViewsContext",
|
|
value: function getSwipeableViewsContext() {
|
|
var _this3 = this;
|
|
|
|
return {
|
|
slideUpdateHeight: function slideUpdateHeight() {
|
|
_this3.updateHeight();
|
|
}
|
|
};
|
|
}
|
|
}, {
|
|
key: "setIndexCurrent",
|
|
value: function setIndexCurrent(indexCurrent) {
|
|
if (!this.props.animateTransitions && this.indexCurrent !== indexCurrent) {
|
|
this.handleTransitionEnd();
|
|
}
|
|
|
|
this.indexCurrent = indexCurrent;
|
|
|
|
if (this.containerNode) {
|
|
var axis = this.props.axis;
|
|
var transform = axisProperties.transform[axis](indexCurrent * 100);
|
|
this.containerNode.style.WebkitTransform = transform;
|
|
this.containerNode.style.transform = transform;
|
|
}
|
|
}
|
|
}, {
|
|
key: "handleTransitionEnd",
|
|
value: function handleTransitionEnd() {
|
|
if (!this.props.onTransitionEnd) {
|
|
return;
|
|
} // Filters out when changing the children
|
|
|
|
|
|
if (this.state.displaySameSlide) {
|
|
return;
|
|
} // The rest callback is triggered when swiping. It's just noise.
|
|
// We filter it out.
|
|
|
|
|
|
if (!this.state.isDragging) {
|
|
this.props.onTransitionEnd();
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var _this$props2 = this.props,
|
|
action = _this$props2.action,
|
|
animateHeight = _this$props2.animateHeight,
|
|
animateTransitions = _this$props2.animateTransitions,
|
|
axis = _this$props2.axis,
|
|
children = _this$props2.children,
|
|
containerStyleProp = _this$props2.containerStyle,
|
|
disabled = _this$props2.disabled,
|
|
disableLazyLoading = _this$props2.disableLazyLoading,
|
|
enableMouseEvents = _this$props2.enableMouseEvents,
|
|
hysteresis = _this$props2.hysteresis,
|
|
ignoreNativeScroll = _this$props2.ignoreNativeScroll,
|
|
index = _this$props2.index,
|
|
onChangeIndex = _this$props2.onChangeIndex,
|
|
onSwitching = _this$props2.onSwitching,
|
|
onTransitionEnd = _this$props2.onTransitionEnd,
|
|
resistance = _this$props2.resistance,
|
|
slideStyleProp = _this$props2.slideStyle,
|
|
slideClassName = _this$props2.slideClassName,
|
|
springConfig = _this$props2.springConfig,
|
|
style = _this$props2.style,
|
|
threshold = _this$props2.threshold,
|
|
other = (0, _objectWithoutProperties2.default)(_this$props2, ["action", "animateHeight", "animateTransitions", "axis", "children", "containerStyle", "disabled", "disableLazyLoading", "enableMouseEvents", "hysteresis", "ignoreNativeScroll", "index", "onChangeIndex", "onSwitching", "onTransitionEnd", "resistance", "slideStyle", "slideClassName", "springConfig", "style", "threshold"]);
|
|
var _this$state = this.state,
|
|
displaySameSlide = _this$state.displaySameSlide,
|
|
heightLatest = _this$state.heightLatest,
|
|
indexLatest = _this$state.indexLatest,
|
|
isDragging = _this$state.isDragging,
|
|
renderOnlyActive = _this$state.renderOnlyActive;
|
|
var touchEvents = !disabled ? {
|
|
onTouchStart: this.handleTouchStart,
|
|
onTouchEnd: this.handleTouchEnd
|
|
} : {};
|
|
var mouseEvents = !disabled && enableMouseEvents ? {
|
|
onMouseDown: this.handleMouseDown,
|
|
onMouseUp: this.handleMouseUp,
|
|
onMouseLeave: this.handleMouseLeave,
|
|
onMouseMove: this.handleMouseMove
|
|
} : {}; // There is no point to animate if we are already providing a height.
|
|
|
|
process.env.NODE_ENV !== "production" ? (0, _warning.default)(!animateHeight || !containerStyleProp || !containerStyleProp.height, "react-swipeable-view: You are setting animateHeight to true but you are\nalso providing a custom height.\nThe custom height has a higher priority than the animateHeight property.\nSo animateHeight is most likely having no effect at all.") : void 0;
|
|
var slideStyle = (0, _extends2.default)({}, styles.slide, slideStyleProp);
|
|
var transition;
|
|
var WebkitTransition;
|
|
|
|
if (isDragging || !animateTransitions || displaySameSlide) {
|
|
transition = 'all 0s ease 0s';
|
|
WebkitTransition = 'all 0s ease 0s';
|
|
} else {
|
|
transition = createTransition('transform', springConfig);
|
|
WebkitTransition = createTransition('-webkit-transform', springConfig);
|
|
|
|
if (heightLatest !== 0) {
|
|
var additionalTranstion = ", ".concat(createTransition('height', springConfig));
|
|
transition += additionalTranstion;
|
|
WebkitTransition += additionalTranstion;
|
|
}
|
|
}
|
|
|
|
var containerStyle = {
|
|
height: null,
|
|
WebkitFlexDirection: axisProperties.flexDirection[axis],
|
|
flexDirection: axisProperties.flexDirection[axis],
|
|
WebkitTransition: WebkitTransition,
|
|
transition: transition
|
|
}; // Apply the styles for SSR considerations
|
|
|
|
if (!renderOnlyActive) {
|
|
var transform = axisProperties.transform[axis](this.indexCurrent * 100);
|
|
containerStyle.WebkitTransform = transform;
|
|
containerStyle.transform = transform;
|
|
}
|
|
|
|
if (animateHeight) {
|
|
containerStyle.height = heightLatest;
|
|
}
|
|
|
|
return React.createElement(SwipeableViewsContext.Provider, {
|
|
value: this.getSwipeableViewsContext()
|
|
}, React.createElement("div", (0, _extends2.default)({
|
|
ref: this.setRootNode,
|
|
style: (0, _extends2.default)({}, axisProperties.root[axis], style)
|
|
}, other, touchEvents, mouseEvents, {
|
|
onScroll: this.handleScroll
|
|
}), React.createElement("div", {
|
|
ref: this.setContainerNode,
|
|
style: (0, _extends2.default)({}, containerStyle, styles.container, containerStyleProp),
|
|
className: "react-swipeable-view-container"
|
|
}, React.Children.map(children, function (child, indexChild) {
|
|
if (renderOnlyActive && indexChild !== indexLatest) {
|
|
return null;
|
|
}
|
|
|
|
process.env.NODE_ENV !== "production" ? (0, _warning.default)(React.isValidElement(child), "react-swipeable-view: one of the children provided is invalid: ".concat(child, ".\n We are expecting a valid React Element")) : void 0;
|
|
var ref;
|
|
var hidden = true;
|
|
|
|
if (indexChild === indexLatest) {
|
|
hidden = false;
|
|
|
|
if (animateHeight) {
|
|
ref = _this4.setActiveSlide;
|
|
slideStyle.overflowY = 'hidden';
|
|
}
|
|
}
|
|
|
|
return React.createElement("div", {
|
|
ref: ref,
|
|
style: slideStyle,
|
|
className: slideClassName,
|
|
"aria-hidden": hidden,
|
|
"data-swipeable": "true"
|
|
}, child);
|
|
}))));
|
|
}
|
|
}]);
|
|
return SwipeableViews;
|
|
}(React.Component); // Added as an ads for people using the React dev tools in production.
|
|
// So they know, the tool used to build the awesome UI they
|
|
// are looking at/retro engineering.
|
|
|
|
|
|
SwipeableViews.displayName = 'ReactSwipableView';
|
|
SwipeableViews.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
/**
|
|
* This is callback property. It's called by the component on mount.
|
|
* This is useful when you want to trigger an action programmatically.
|
|
* It currently only supports updateHeight() action.
|
|
*
|
|
* @param {object} actions This object contains all posible actions
|
|
* that can be triggered programmatically.
|
|
*/
|
|
action: _propTypes.default.func,
|
|
|
|
/**
|
|
* If `true`, the height of the container will be animated to match the current slide height.
|
|
* Animating another style property has a negative impact regarding performance.
|
|
*/
|
|
animateHeight: _propTypes.default.bool,
|
|
|
|
/**
|
|
* If `false`, changes to the index prop will not cause an animated transition.
|
|
*/
|
|
animateTransitions: _propTypes.default.bool,
|
|
|
|
/**
|
|
* The axis on which the slides will slide.
|
|
*/
|
|
axis: _propTypes.default.oneOf(['x', 'x-reverse', 'y', 'y-reverse']),
|
|
|
|
/**
|
|
* Use this property to provide your slides.
|
|
*/
|
|
children: _propTypes.default.node.isRequired,
|
|
|
|
/**
|
|
* This is the inlined style that will be applied
|
|
* to each slide container.
|
|
*/
|
|
containerStyle: _propTypes.default.object,
|
|
|
|
/**
|
|
* If `true`, it will disable touch events.
|
|
* This is useful when you want to prohibit the user from changing slides.
|
|
*/
|
|
disabled: _propTypes.default.bool,
|
|
|
|
/**
|
|
* This is the config used to disable lazyloding,
|
|
* if `true` will render all the views in first rendering.
|
|
*/
|
|
disableLazyLoading: _propTypes.default.bool,
|
|
|
|
/**
|
|
* If `true`, it will enable mouse events.
|
|
* This will allow the user to perform the relevant swipe actions with a mouse.
|
|
*/
|
|
enableMouseEvents: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Configure hysteresis between slides. This value determines how far
|
|
* should user swipe to switch slide.
|
|
*/
|
|
hysteresis: _propTypes.default.number,
|
|
|
|
/**
|
|
* If `true`, it will ignore native scroll container.
|
|
* It can be used to filter out false positive that blocks the swipe.
|
|
*/
|
|
ignoreNativeScroll: _propTypes.default.bool,
|
|
|
|
/**
|
|
* This is the index of the slide to show.
|
|
* This is useful when you want to change the default slide shown.
|
|
* Or when you have tabs linked to each slide.
|
|
*/
|
|
index: _propTypes.default.number,
|
|
|
|
/**
|
|
* This is callback prop. It's call by the
|
|
* component when the shown slide change after a swipe made by the user.
|
|
* This is useful when you have tabs linked to each slide.
|
|
*
|
|
* @param {integer} index This is the current index of the slide.
|
|
* @param {integer} indexLatest This is the oldest index of the slide.
|
|
* @param {object} meta Meta data containing more information about the event.
|
|
*/
|
|
onChangeIndex: _propTypes.default.func,
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
onMouseDown: _propTypes.default.func,
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
onMouseLeave: _propTypes.default.func,
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
onMouseMove: _propTypes.default.func,
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
onMouseUp: _propTypes.default.func,
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
onScroll: _propTypes.default.func,
|
|
|
|
/**
|
|
* This is callback prop. It's called by the
|
|
* component when the slide switching.
|
|
* This is useful when you want to implement something corresponding
|
|
* to the current slide position.
|
|
*
|
|
* @param {integer} index This is the current index of the slide.
|
|
* @param {string} type Can be either `move` or `end`.
|
|
*/
|
|
onSwitching: _propTypes.default.func,
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
onTouchEnd: _propTypes.default.func,
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
onTouchMove: _propTypes.default.func,
|
|
|
|
/**
|
|
* @ignore
|
|
*/
|
|
onTouchStart: _propTypes.default.func,
|
|
|
|
/**
|
|
* The callback that fires when the animation comes to a rest.
|
|
* This is useful to defer CPU intensive task.
|
|
*/
|
|
onTransitionEnd: _propTypes.default.func,
|
|
|
|
/**
|
|
* If `true`, it will add bounds effect on the edges.
|
|
*/
|
|
resistance: _propTypes.default.bool,
|
|
|
|
/**
|
|
* This is the className that will be applied
|
|
* on the slide component.
|
|
*/
|
|
slideClassName: _propTypes.default.string,
|
|
|
|
/**
|
|
* This is the inlined style that will be applied
|
|
* on the slide component.
|
|
*/
|
|
slideStyle: _propTypes.default.object,
|
|
|
|
/**
|
|
* This is the config used to create CSS transitions.
|
|
* This is useful to change the dynamic of the transition.
|
|
*/
|
|
springConfig: _propTypes.default.shape({
|
|
delay: _propTypes.default.string,
|
|
duration: _propTypes.default.string,
|
|
easeFunction: _propTypes.default.string
|
|
}),
|
|
|
|
/**
|
|
* This is the inlined style that will be applied
|
|
* on the root component.
|
|
*/
|
|
style: _propTypes.default.object,
|
|
|
|
/**
|
|
* This is the threshold used for detecting a quick swipe.
|
|
* If the computed speed is above this value, the index change.
|
|
*/
|
|
threshold: _propTypes.default.number
|
|
} : {};
|
|
SwipeableViews.defaultProps = {
|
|
animateHeight: false,
|
|
animateTransitions: true,
|
|
axis: 'x',
|
|
disabled: false,
|
|
disableLazyLoading: false,
|
|
enableMouseEvents: false,
|
|
hysteresis: 0.6,
|
|
ignoreNativeScroll: false,
|
|
index: 0,
|
|
threshold: 5,
|
|
springConfig: {
|
|
duration: '0.35s',
|
|
easeFunction: 'cubic-bezier(0.15, 0.3, 0.25, 1)',
|
|
delay: '0s'
|
|
},
|
|
resistance: false
|
|
};
|
|
var _default = SwipeableViews;
|
|
exports.default = _default; |