@cake-fxd/rn-case/lib/components/Swiper/index.js

ReactNative Case

"use strict";var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _px2dp=_interopRequireDefault(require("../../util/px2dp"));var Swiper=function Swiper(props){var _a;var _useState=(0,_react.useState)((_a=props.current)!==null&&_a!==void 0?_a:0),_useState2=(0,_slicedToArray2["default"])(_useState,2),current=_useState2[0],setCurrent=_useState2[1];var dots=Array.from(new Array(props.total));var scroll=(0,_react.useRef)(null);var _useState3=(0,_react.useState)(0),_useState4=(0,_slicedToArray2["default"])(_useState3,2),width=_useState4[0],setWidth=_useState4[1];function onMomentumScrollEnd(e){var x=e.nativeEvent.contentOffset.x;var page=Math.ceil(x/width);setCurrent(page);if(props.onPageChange){props.onPageChange(page);}if(props.onMomentumScrollEnd){props.onMomentumScrollEnd(e);}}function handleDotPress(index){var _a;(_a=scroll.current)===null||_a===void 0?void 0:_a.scrollTo({x:index*width});}return _react["default"].createElement(_reactNative.View,{onLayout:function onLayout(e){return setWidth(e.nativeEvent.layout.width);}},_react["default"].createElement(_reactNativeGestureHandler.ScrollView,(0,_extends2["default"])({},props,{onMomentumScrollEnd:onMomentumScrollEnd,ref:scroll,style:[styles.scroll,props.style]}),props.children),props.dotVisible&&dots.length>1&&_react["default"].createElement(_reactNative.View,{style:[styles.dotContainer,props.dotWrapperStyle]},dots.map(function(item,index){return _react["default"].createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){return handleDotPress(index);},key:index},_react["default"].createElement(_reactNative.View,{style:[styles.dot,index===current&&styles.activeDot]}));})));};Swiper.defaultProps={current:0,dotVisible:true};var styles=_reactNative.StyleSheet.create({scroll:{paddingVertical:(0,_px2dp["default"])(30)},dotContainer:{flexDirection:'row',marginTop:(0,_px2dp["default"])(26),justifyContent:'center'},dot:{backgroundColor:'#EBEBEB',width:(0,_px2dp["default"])(14),height:(0,_px2dp["default"])(14),borderRadius:(0,_px2dp["default"])(14),marginHorizontal:(0,_px2dp["default"])(7)},activeDot:{backgroundColor:'#FFD91B'}});var _default=Swiper;exports["default"]=_default;