react-native-story-component
Version:
Story component for React Native.
230 lines (229 loc) • 8.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
const {
width,
height
} = _reactNative.Dimensions.get('window');
const PESPECTIVE = _reactNative.Platform.OS === 'ios' ? 2.38 : 1.7;
const TR_POSITION = _reactNative.Platform.OS === 'ios' ? 2 : 1.5;
const CubeNavigationHorizontal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
let {
loop = false,
responderCaptureDx = 60,
...props
} = _ref;
const {
pages,
fullWidth
} = (0, _react.useMemo)(() => ({
pages: props.children.map((_child, index) => width * -index),
fullWidth: (props.children.length - 1) * width
}), [props.children]);
const [currentPage, setCurrentPage] = (0, _react.useState)(0);
const _animatedValue = (0, _react.useRef)(new _reactNative.Animated.ValueXY({
x: 0,
y: 0
})).current;
const _value = (0, _react.useRef)({
x: 0,
y: 0
});
const _panResponder = _reactNative.PanResponder.create({
onMoveShouldSetPanResponderCapture: (_evt, gestureState) => Math.abs(gestureState.dx) > responderCaptureDx,
onPanResponderGrant: (_e, _gestureState) => {
if (props.callbackOnSwipe) {
props.callbackOnSwipe(true);
}
_animatedValue.stopAnimation();
_animatedValue.setOffset(_value.current);
},
onPanResponderMove: (e, gestureState) => {
if (loop) {
if (gestureState.dx < 0 && _value.current.x < -fullWidth) {
_animatedValue.setOffset({
x: width,
y: 0
});
} else if (gestureState.dx > 0 && _value.current.x > 0) {
_animatedValue.setOffset({
x: -(fullWidth + width),
y: 0
});
}
}
_reactNative.Animated.event([null, {
dx: _animatedValue.x
}], {
useNativeDriver: false
})(e, gestureState);
},
onPanResponderRelease: (_e, gestureState) => {
onDoneSwiping(gestureState);
},
onPanResponderTerminate: (_e, gestureState) => {
onDoneSwiping(gestureState);
}
});
(0, _react.useEffect)(() => {
_animatedValue.addListener(value => {
_value.current = value;
});
}, [_animatedValue]);
(0, _react.useImperativeHandle)(ref, () => ({
scrollTo(page) {
let animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
const x = pages[page];
if (animated) {
_reactNative.Animated.spring(_animatedValue, {
toValue: {
x,
y: 0
},
friction: 5,
tension: 0.6,
useNativeDriver: false
}).start();
} else {
_animatedValue.setValue({
x,
y: 0
});
}
setCurrentPage(page);
}
}));
const onDoneSwiping = gestureState => {
if (props.callbackOnSwipe) {
props.callbackOnSwipe(false);
}
const mod = gestureState.dx > 0 ? 100 : -100;
const _currentPage = _closest(_value.current.x + mod);
const x = pages[_currentPage];
_animatedValue.flattenOffset();
_reactNative.Animated.spring(_animatedValue, {
toValue: {
x,
y: 0
},
friction: 5,
tension: 0.6,
useNativeDriver: false
}).start();
setTimeout(() => {
setCurrentPage(currentPage);
if (props.callBackAfterSwipe) props.callBackAfterSwipe(currentPage);
}, 500);
};
const _getTransformsFor = i => {
let scrollX = _animatedValue.x;
let pageX = -width * i;
const loopVariable = function (variable) {
let sign = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
return variable + Math.sign(sign) * (fullWidth + width);
};
const padInput = variables => {
if (!loop) return variables;
const returnedVariables = [...variables];
returnedVariables.unshift(...variables.map(variable => loopVariable(variable, -1)));
returnedVariables.push(...variables.map(variable => loopVariable(variable, 1)));
return returnedVariables;
};
function padOutput(variables) {
if (!loop) return variables;
const returnedVariables = [...variables];
returnedVariables.unshift(...variables);
returnedVariables.push(...variables);
return returnedVariables;
}
let translateX = scrollX.interpolate({
inputRange: padInput([pageX - width, pageX, pageX + width]),
outputRange: padOutput([(-width - 1) / TR_POSITION, 0, (width + 1) / TR_POSITION]),
extrapolate: 'clamp'
});
let rotateY = scrollX.interpolate({
inputRange: padInput([pageX - width, pageX, pageX + width]),
outputRange: padOutput(['-60deg', '0deg', '60deg']),
extrapolate: 'clamp'
});
let translateXAfterRotate = scrollX.interpolate({
inputRange: padInput([pageX - width, pageX - width + 0.1, pageX, pageX + width - 0.1, pageX + width]),
outputRange: padOutput([-width - 1, (-width - 1) / PESPECTIVE, 0, (width + 1) / PESPECTIVE, +width + 1]),
extrapolate: 'clamp'
});
let opacity = scrollX.interpolate({
inputRange: padInput([pageX - width, pageX - width + 10, pageX, pageX + width - 250, pageX + width]),
outputRange: padOutput([0, 0.6, 1, 0.6, 0]),
extrapolate: 'clamp'
});
return {
transform: [{
perspective: width
}, {
translateX
}, {
rotateY
}, {
translateX: translateXAfterRotate
}],
opacity
};
};
const _renderChild = (child, i) => {
let style = [child.props.style, {
width,
height
}];
let element = /*#__PURE__*/_react.default.cloneElement(child, {
i,
style
});
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
style: [_reactNative.StyleSheet.absoluteFill, styles.child, _getTransformsFor(i)],
key: `cube-child-${i}`,
pointerEvents: currentPage === i ? 'auto' : 'none'
}, element);
};
const _closest = num => {
let array = pages;
let minDiff = 1000;
let ans;
for (let i of array) {
let m = Math.abs(num - array[i]);
if (m < minDiff) {
minDiff = m;
ans = i;
}
}
return ans;
};
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
style: styles.container
}, _panResponder.panHandlers), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
style: styles.content
}, props.children.map(_renderChild)));
});
const styles = _reactNative.StyleSheet.create({
container: {
position: 'absolute'
},
child: {
backgroundColor: 'transparent'
},
content: {
backgroundColor: '#000',
position: 'absolute',
width,
height
}
});
var _default = CubeNavigationHorizontal;
exports.default = _default;
//# sourceMappingURL=CubeNavigationHorizontal.js.map