fullpage-react-fs

208 | {currentPointer !== 0 &&

} 209 |

213 | {props.children} 214 | {showIndicators && ( 215 | 220 | )} 221 |

222 |

223 | ) 224 | } 225 | 226 | const NavIndicators = ({ count, activeIndex, setIndicator }) => { 227 | let indicatorHtml = null 228 | if (count) { 229 | indicatorHtml = Array(count) 230 | .fill(0) 231 | .map((item, i) => { 232 | const indicatorstyles = [styles.indicator] 233 | if (i === activeIndex - 1) { 234 | indicatorstyles.push(styles.active) 235 | } 236 | return ( 237 |

{ 241 | setIndicator(i + 1) 242 | }} 243 | > 244 | ⬤ 245 |

246 | ) 247 | }) 248 | } 249 | return

{indicatorHtml}

250 | } 251 | 252 | export const FullPagePanel = ({ bgColor, ...props }) => { 253 | return ( 254 |

255 |

{props.children}

256 |

257 | ) 258 | } 259 | -------------------------------------------------------------------------------- /dist/index.modern.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState, useEffect } from 'react'; 2 | 3 | function _extends() { 4 | _extends = Object.assign || function (target) { 5 | for (var i = 1; i < arguments.length; i++) { 6 | var source = arguments[i]; 7 | 8 | for (var key in source) { 9 | if (Object.prototype.hasOwnProperty.call(source, key)) { 10 | target[key] = source[key]; 11 | } 12 | } 13 | } 14 | 15 | return target; 16 | }; 17 | 18 | return _extends.apply(this, arguments); 19 | } 20 | 21 | function _objectWithoutPropertiesLoose(source, excluded) { 22 | if (source == null) return {}; 23 | var target = {}; 24 | var sourceKeys = Object.keys(source); 25 | var key, i; 26 | 27 | for (i = 0; i < sourceKeys.length; i++) { 28 | key = sourceKeys[i]; 29 | if (excluded.indexOf(key) >= 0) continue; 30 | target[key] = source[key]; 31 | } 32 | 33 | return target; 34 | } 35 | 36 | var styles = {"fullPanel":"_1X2N_","screenPane":"_3cHdp","panelsContainer":"_ytvCK","panelTransitioning":"_13cd7","navIndicators":"_2g5Xg","indicator":"_3klkV","active":"_3sodH","clickMask":"_2690c"}; 37 | 38 | var FullPageContainer = function FullPageContainer(_ref) { 39 | var _ref$showIndicators = _ref.showIndicators, 40 | showIndicators = _ref$showIndicators === void 0 ? true : _ref$showIndicators, 41 | props = _objectWithoutPropertiesLoose(_ref, ["showIndicators"]); 42 | 43 | var panelsCount = React.Children.count(props.children); 44 | var windowHeight = useRef(window.innerHeight); 45 | 46 | var _useState = useState({ 47 | currentPanel: 1, 48 | transitioning: false, 49 | currentTop: 0 50 | }), 51 | viewState = _useState[0], 52 | setViewState = _useState[1]; 53 | 54 | var prevSection = function prevSection() { 55 | setViewState(function (prev) { 56 | if (prev.transitioning) return prev; 57 | if (prev.currentPanel <= 1) return _extends(_extends({}, prev), {}, { 58 | currentTop: 0 59 | }); 60 | setTimeout(function () { 61 | setViewState(function (prev) { 62 | return _extends(_extends({}, prev), {}, { 63 | transitioning: false 64 | }); 65 | }); 66 | }, 1000); 67 | return { 68 | transitioning: true, 69 | currentPanel: prev.currentPanel - 1, 70 | currentTop: -windowHeight.current * (prev.currentPanel - 2) 71 | }; 72 | }); 73 | }; 74 | 75 | var nextSection = function nextSection() { 76 | setViewState(function (prev) { 77 | if (prev.transitioning) return prev; 78 | if (prev.currentPanel >= panelsCount) return _extends(_extends({}, prev), {}, { 79 | currentTop: -windowHeight.current * (panelsCount - 1) 80 | }); 81 | setTimeout(function () { 82 | setViewState(function (prev) { 83 | return _extends(_extends({}, prev), {}, { 84 | transitioning: false 85 | }); 86 | }); 87 | }, 1000); 88 | return { 89 | transitioning: true, 90 | currentPanel: prev.currentPanel + 1, 91 | currentTop: -windowHeight.current * prev.currentPanel 92 | }; 93 | }); 94 | }; 95 | 96 | var restoreSection = function restoreSection() { 97 | setViewState(function (prev) { 98 | return _extends(_extends({}, prev), {}, { 99 | currentTop: -windowHeight.current * (prev.currentPanel - 1) 100 | }); 101 | }); 102 | }; 103 | 104 | var handleScroll = function handleScroll(e) { 105 | if (e.deltaY > 40 && viewState.currentPanel < panelsCount) { 106 | nextSection(); 107 | } else if (e.deltaY < -40 && viewState.currentPanel > 0) { 108 | prevSection(); 109 | } 110 | }; 111 | 112 | var onSetSection = function onSetSection(sectionNumber) { 113 | setViewState(function (prev) { 114 | setTimeout(function () { 115 | setViewState(function (prev) { 116 | return _extends(_extends({}, prev), {}, { 117 | transitioning: false 118 | }); 119 | }); 120 | }, 1000); 121 | return { 122 | transitioning: true, 123 | currentPanel: sectionNumber, 124 | currentTop: -windowHeight.current * (sectionNumber - 1) 125 | }; 126 | }); 127 | }; 128 | 129 | var removeEventListeners = function removeEventListeners() { 130 | window.removeEventListener('wheel', function (e) { 131 | handleScroll(e); 132 | }); 133 | window.removeEventListener('touchstart', function (e) { 134 | handleSwipe(e, true); 135 | }); 136 | window.removeEventListener('touchend', function (e) { 137 | handleSwipe(e, false); 138 | }); 139 | window.removeEventListener('pointerdown', function (e) { 140 | handleSwipe(e.changedTouches[0].screenY, true); 141 | }); 142 | window.removeEventListener('pointerup', function (e) { 143 | handleSwipe(e.changedTouches[0].screenY, false); 144 | }); 145 | window.removeEventListener('pointermove', function (e) { 146 | handleDrag(e.screenY); 147 | }); 148 | window.removeEventListener('resize', function () { 149 | windowHeight.current = window.innerHeight; 150 | }); 151 | }; 152 | 153 | useEffect(function () { 154 | removeEventListeners(); 155 | window.addEventListener('wheel', function (e) { 156 | handleScroll(e); 157 | }); 158 | window.addEventListener('touchstart', function (e) { 159 | handleSwipe(e.changedTouches[0].screenY, true); 160 | }); 161 | window.addEventListener('touchend', function (e) { 162 | handleSwipe(e.changedTouches[0].screenY, false); 163 | }); 164 | window.addEventListener('pointerdown', function (e) { 165 | handleSwipe(e.screenY, true); 166 | }); 167 | window.addEventListener('pointerup', function (e) { 168 | handleSwipe(e.screenY, false); 169 | }); 170 | window.addEventListener('pointermove', function (e) { 171 | handleDrag(e.screenY); 172 | }); 173 | window.addEventListener('touchmove', function (e) { 174 | handleDrag(e.changedTouches[0].screenY); 175 | }); 176 | window.addEventListener('resize', function () { 177 | windowHeight.current = window.innerHeight; 178 | }); 179 | return function () { 180 | removeEventListeners(); 181 | }; 182 | }, []); 183 | var touchStartY = useRef(0); 184 | 185 | var _useState2 = useState(0), 186 | currentPointer = _useState2[0], 187 | setCurrentPointer = _useState2[1]; 188 | 189 | var handleDrag = function handleDrag(screenY) { 190 | if (touchStartY.current === 0) { 191 | return; 192 | } 193 | 194 | var initialSet = false; 195 | var difference = 0; 196 | setCurrentPointer(function (prev) { 197 | if (prev === 0) { 198 | initialSet = true; 199 | return screenY; 200 | } 201 | 202 | difference = prev - screenY; 203 | 204 | if (difference < 0 && difference > -2 || difference > 0 && difference < 2) { 205 | initialSet = true; 206 | return prev; 207 | } 208 | 209 | return screenY; 210 | }); 211 | if (initialSet) return; 212 | setViewState(function (prev) { 213 | if (prev.transitioning) { 214 | return prev; 215 | } 216 | 217 | return _extends(_extends({}, prev), {}, { 218 | currentTop: prev.currentTop - difference 219 | }); 220 | }); 221 | }; 222 | 223 | var handleSwipe = function handleSwipe(screenY, isStart, event) { 224 | if (isStart) { 225 | touchStartY.current = screenY; 226 | return; 227 | } 228 | 229 | var touchEndY = screenY; 230 | var touchDifference = touchStartY.current - touchEndY; 231 | 232 | if (touchDifference < -100) { 233 | prevSection(); 234 | } else if (touchDifference > 100) { 235 | nextSection(); 236 | } else { 237 | restoreSection(); 238 | } 239 | 240 | touchStartY.current = 0; 241 | setCurrentPointer(0); 242 | }; 243 | 244 | var panelsstyles = [styles.panelsContainer]; 245 | 246 | if (viewState.transitioning) { 247 | panelsstyles.push(styles.panelTransitioning); 248 | } 249 | 250 | return /*#__PURE__*/React.createElement("div", { 251 | className: styles.screenPane 252 | }, currentPointer !== 0 && /*#__PURE__*/React.createElement("div", { 253 | className: styles.clickMask 254 | }), /*#__PURE__*/React.createElement("div", { 255 | className: panelsstyles.join(' '), 256 | style: { 257 | top: viewState.currentTop + "px" 258 | } 259 | }, props.children, showIndicators && /*#__PURE__*/React.createElement(NavIndicators, { 260 | count: panelsCount, 261 | activeIndex: viewState.currentPanel, 262 | setIndicator: onSetSection 263 | }))); 264 | }; 265 | 266 | var NavIndicators = function NavIndicators(_ref2) { 267 | var count = _ref2.count, 268 | activeIndex = _ref2.activeIndex, 269 | setIndicator = _ref2.setIndicator; 270 | var indicatorHtml = null; 271 | 272 | if (count) { 273 | indicatorHtml = Array(count).fill(0).map(function (item, i) { 274 | var indicatorstyles = [styles.indicator]; 275 | 276 | if (i === activeIndex - 1) { 277 | indicatorstyles.push(styles.active); 278 | } 279 | 280 | return /*#__PURE__*/React.createElement("div", { 281 | key: i, 282 | className: indicatorstyles.join(' '), 283 | onClick: function onClick() { 284 | setIndicator(i + 1); 285 | } 286 | }, "\u2B24"); 287 | }); 288 | } 289 | 290 | return /*#__PURE__*/React.createElement("div", { 291 | className: styles.navIndicators 292 | }, indicatorHtml); 293 | }; 294 | 295 | var FullPagePanel = function FullPagePanel(_ref3) { 296 | var bgColor = _ref3.bgColor, 297 | props = _objectWithoutPropertiesLoose(_ref3, ["bgColor"]); 298 | 299 | return /*#__PURE__*/React.createElement("div", { 300 | className: styles.fullPanel, 301 | style: { 302 | backgroundColor: bgColor 303 | } 304 | }, /*#__PURE__*/React.createElement("div", { 305 | className: styles.panelContent 306 | }, props.children)); 307 | }; 308 | 309 | export { FullPageContainer, FullPagePanel }; 310 | //# sourceMappingURL=index.modern.js.map 311 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } 2 | 3 | var React = require('react'); 4 | var React__default = _interopDefault(React); 5 | 6 | function _extends() { 7 | _extends = Object.assign || function (target) { 8 | for (var i = 1; i < arguments.length; i++) { 9 | var source = arguments[i]; 10 | 11 | for (var key in source) { 12 | if (Object.prototype.hasOwnProperty.call(source, key)) { 13 | target[key] = source[key]; 14 | } 15 | } 16 | } 17 | 18 | return target; 19 | }; 20 | 21 | return _extends.apply(this, arguments); 22 | } 23 | 24 | function _objectWithoutPropertiesLoose(source, excluded) { 25 | if (source == null) return {}; 26 | var target = {}; 27 | var sourceKeys = Object.keys(source); 28 | var key, i; 29 | 30 | for (i = 0; i < sourceKeys.length; i++) { 31 | key = sourceKeys[i]; 32 | if (excluded.indexOf(key) >= 0) continue; 33 | target[key] = source[key]; 34 | } 35 | 36 | return target; 37 | } 38 | 39 | var styles = {"fullPanel":"_1X2N_","screenPane":"_3cHdp","panelsContainer":"_ytvCK","panelTransitioning":"_13cd7","navIndicators":"_2g5Xg","indicator":"_3klkV","active":"_3sodH","clickMask":"_2690c"}; 40 | 41 | var FullPageContainer = function FullPageContainer(_ref) { 42 | var _ref$showIndicators = _ref.showIndicators, 43 | showIndicators = _ref$showIndicators === void 0 ? true : _ref$showIndicators, 44 | props = _objectWithoutPropertiesLoose(_ref, ["showIndicators"]); 45 | 46 | var panelsCount = React__default.Children.count(props.children); 47 | var windowHeight = React.useRef(window.innerHeight); 48 | 49 | var _useState = React.useState({ 50 | currentPanel: 1, 51 | transitioning: false, 52 | currentTop: 0 53 | }), 54 | viewState = _useState[0], 55 | setViewState = _useState[1]; 56 | 57 | var prevSection = function prevSection() { 58 | setViewState(function (prev) { 59 | if (prev.transitioning) return prev; 60 | if (prev.currentPanel <= 1) return _extends(_extends({}, prev), {}, { 61 | currentTop: 0 62 | }); 63 | setTimeout(function () { 64 | setViewState(function (prev) { 65 | return _extends(_extends({}, prev), {}, { 66 | transitioning: false 67 | }); 68 | }); 69 | }, 1000); 70 | return { 71 | transitioning: true, 72 | currentPanel: prev.currentPanel - 1, 73 | currentTop: -windowHeight.current * (prev.currentPanel - 2) 74 | }; 75 | }); 76 | }; 77 | 78 | var nextSection = function nextSection() { 79 | setViewState(function (prev) { 80 | if (prev.transitioning) return prev; 81 | if (prev.currentPanel >= panelsCount) return _extends(_extends({}, prev), {}, { 82 | currentTop: -windowHeight.current * (panelsCount - 1) 83 | }); 84 | setTimeout(function () { 85 | setViewState(function (prev) { 86 | return _extends(_extends({}, prev), {}, { 87 | transitioning: false 88 | }); 89 | }); 90 | }, 1000); 91 | return { 92 | transitioning: true, 93 | currentPanel: prev.currentPanel + 1, 94 | currentTop: -windowHeight.current * prev.currentPanel 95 | }; 96 | }); 97 | }; 98 | 99 | var restoreSection = function restoreSection() { 100 | setViewState(function (prev) { 101 | return _extends(_extends({}, prev), {}, { 102 | currentTop: -windowHeight.current * (prev.currentPanel - 1) 103 | }); 104 | }); 105 | }; 106 | 107 | var handleScroll = function handleScroll(e) { 108 | if (e.deltaY > 40 && viewState.currentPanel < panelsCount) { 109 | nextSection(); 110 | } else if (e.deltaY < -40 && viewState.currentPanel > 0) { 111 | prevSection(); 112 | } 113 | }; 114 | 115 | var onSetSection = function onSetSection(sectionNumber) { 116 | setViewState(function (prev) { 117 | setTimeout(function () { 118 | setViewState(function (prev) { 119 | return _extends(_extends({}, prev), {}, { 120 | transitioning: false 121 | }); 122 | }); 123 | }, 1000); 124 | return { 125 | transitioning: true, 126 | currentPanel: sectionNumber, 127 | currentTop: -windowHeight.current * (sectionNumber - 1) 128 | }; 129 | }); 130 | }; 131 | 132 | var removeEventListeners = function removeEventListeners() { 133 | window.removeEventListener('wheel', function (e) { 134 | handleScroll(e); 135 | }); 136 | window.removeEventListener('touchstart', function (e) { 137 | handleSwipe(e, true); 138 | }); 139 | window.removeEventListener('touchend', function (e) { 140 | handleSwipe(e, false); 141 | }); 142 | window.removeEventListener('pointerdown', function (e) { 143 | handleSwipe(e.changedTouches[0].screenY, true); 144 | }); 145 | window.removeEventListener('pointerup', function (e) { 146 | handleSwipe(e.changedTouches[0].screenY, false); 147 | }); 148 | window.removeEventListener('pointermove', function (e) { 149 | handleDrag(e.screenY); 150 | }); 151 | window.removeEventListener('resize', function () { 152 | windowHeight.current = window.innerHeight; 153 | }); 154 | }; 155 | 156 | React.useEffect(function () { 157 | removeEventListeners(); 158 | window.addEventListener('wheel', function (e) { 159 | handleScroll(e); 160 | }); 161 | window.addEventListener('touchstart', function (e) { 162 | handleSwipe(e.changedTouches[0].screenY, true); 163 | }); 164 | window.addEventListener('touchend', function (e) { 165 | handleSwipe(e.changedTouches[0].screenY, false); 166 | }); 167 | window.addEventListener('pointerdown', function (e) { 168 | handleSwipe(e.screenY, true); 169 | }); 170 | window.addEventListener('pointerup', function (e) { 171 | handleSwipe(e.screenY, false); 172 | }); 173 | window.addEventListener('pointermove', function (e) { 174 | handleDrag(e.screenY); 175 | }); 176 | window.addEventListener('touchmove', function (e) { 177 | handleDrag(e.changedTouches[0].screenY); 178 | }); 179 | window.addEventListener('resize', function () { 180 | windowHeight.current = window.innerHeight; 181 | }); 182 | return function () { 183 | removeEventListeners(); 184 | }; 185 | }, []); 186 | var touchStartY = React.useRef(0); 187 | 188 | var _useState2 = React.useState(0), 189 | currentPointer = _useState2[0], 190 | setCurrentPointer = _useState2[1]; 191 | 192 | var handleDrag = function handleDrag(screenY) { 193 | if (touchStartY.current === 0) { 194 | return; 195 | } 196 | 197 | var initialSet = false; 198 | var difference = 0; 199 | setCurrentPointer(function (prev) { 200 | if (prev === 0) { 201 | initialSet = true; 202 | return screenY; 203 | } 204 | 205 | difference = prev - screenY; 206 | 207 | if (difference < 0 && difference > -2 || difference > 0 && difference < 2) { 208 | initialSet = true; 209 | return prev; 210 | } 211 | 212 | return screenY; 213 | }); 214 | if (initialSet) return; 215 | setViewState(function (prev) { 216 | if (prev.transitioning) { 217 | return prev; 218 | } 219 | 220 | return _extends(_extends({}, prev), {}, { 221 | currentTop: prev.currentTop - difference 222 | }); 223 | }); 224 | }; 225 | 226 | var handleSwipe = function handleSwipe(screenY, isStart, event) { 227 | if (isStart) { 228 | touchStartY.current = screenY; 229 | return; 230 | } 231 | 232 | var touchEndY = screenY; 233 | var touchDifference = touchStartY.current - touchEndY; 234 | 235 | if (touchDifference < -100) { 236 | prevSection(); 237 | } else if (touchDifference > 100) { 238 | nextSection(); 239 | } else { 240 | restoreSection(); 241 | } 242 | 243 | touchStartY.current = 0; 244 | setCurrentPointer(0); 245 | }; 246 | 247 | var panelsstyles = [styles.panelsContainer]; 248 | 249 | if (viewState.transitioning) { 250 | panelsstyles.push(styles.panelTransitioning); 251 | } 252 | 253 | return /*#__PURE__*/React__default.createElement("div", { 254 | className: styles.screenPane 255 | }, currentPointer !== 0 && /*#__PURE__*/React__default.createElement("div", { 256 | className: styles.clickMask 257 | }), /*#__PURE__*/React__default.createElement("div", { 258 | className: panelsstyles.join(' '), 259 | style: { 260 | top: viewState.currentTop + "px" 261 | } 262 | }, props.children, showIndicators && /*#__PURE__*/React__default.createElement(NavIndicators, { 263 | count: panelsCount, 264 | activeIndex: viewState.currentPanel, 265 | setIndicator: onSetSection 266 | }))); 267 | }; 268 | 269 | var NavIndicators = function NavIndicators(_ref2) { 270 | var count = _ref2.count, 271 | activeIndex = _ref2.activeIndex, 272 | setIndicator = _ref2.setIndicator; 273 | var indicatorHtml = null; 274 | 275 | if (count) { 276 | indicatorHtml = Array(count).fill(0).map(function (item, i) { 277 | var indicatorstyles = [styles.indicator]; 278 | 279 | if (i === activeIndex - 1) { 280 | indicatorstyles.push(styles.active); 281 | } 282 | 283 | return /*#__PURE__*/React__default.createElement("div", { 284 | key: i, 285 | className: indicatorstyles.join(' '), 286 | onClick: function onClick() { 287 | setIndicator(i + 1); 288 | } 289 | }, "\u2B24"); 290 | }); 291 | } 292 | 293 | return /*#__PURE__*/React__default.createElement("div", { 294 | className: styles.navIndicators 295 | }, indicatorHtml); 296 | }; 297 | 298 | var FullPagePanel = function FullPagePanel(_ref3) { 299 | var bgColor = _ref3.bgColor, 300 | props = _objectWithoutPropertiesLoose(_ref3, ["bgColor"]); 301 | 302 | return /*#__PURE__*/React__default.createElement("div", { 303 | className: styles.fullPanel, 304 | style: { 305 | backgroundColor: bgColor 306 | } 307 | }, /*#__PURE__*/React__default.createElement("div", { 308 | className: styles.panelContent 309 | }, props.children)); 310 | }; 311 | 312 | exports.FullPageContainer = FullPageContainer; 313 | exports.FullPagePanel = FullPagePanel; 314 | //# sourceMappingURL=index.js.map 315 | -------------------------------------------------------------------------------- /dist/index.modern.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.modern.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react'\nimport styles from './styles.module.css'\n\nexport const FullPageContainer = ({ showIndicators = true, ...props }) => {\n const panelsCount = React.Children.count(props.children)\n\n const windowHeight = useRef(window.innerHeight)\n\n const [viewState, setViewState] = useState({\n currentPanel: 1,\n transitioning: false,\n currentTop: 0\n })\n const prevSection = () => {\n setViewState((prev) => {\n if (prev.transitioning) return prev\n if (prev.currentPanel <= 1)\n return {\n ...prev,\n currentTop: 0\n }\n setTimeout(() => {\n setViewState((prev) => ({ ...prev, transitioning: false }))\n }, 1000)\n return {\n transitioning: true,\n currentPanel: prev.currentPanel - 1,\n currentTop: -windowHeight.current * (prev.currentPanel - 2)\n }\n })\n }\n\n const nextSection = () => {\n setViewState((prev) => {\n if (prev.transitioning) return prev\n\n if (prev.currentPanel >= panelsCount)\n return {\n ...prev,\n currentTop: -windowHeight.current * (panelsCount - 1)\n }\n setTimeout(() => {\n setViewState((prev) => ({ ...prev, transitioning: false }))\n }, 1000)\n return {\n transitioning: true,\n currentPanel: prev.currentPanel + 1,\n currentTop: -windowHeight.current * prev.currentPanel\n }\n })\n }\n\n const restoreSection = () => {\n setViewState((prev) => {\n return {\n ...prev,\n currentTop: -windowHeight.current * (prev.currentPanel - 1)\n }\n })\n }\n\n const handleScroll = (e) => {\n if (e.deltaY > 40 && viewState.currentPanel < panelsCount) {\n nextSection()\n } else if (e.deltaY < -40 && viewState.currentPanel > 0) {\n prevSection()\n }\n }\n\n const onSetSection = (sectionNumber) => {\n setViewState((prev) => {\n setTimeout(() => {\n setViewState((prev) => ({ ...prev, transitioning: false }))\n }, 1000)\n return {\n transitioning: true,\n currentPanel: sectionNumber,\n currentTop: -windowHeight.current * (sectionNumber - 1)\n }\n })\n }\n\n const removeEventListeners = () => {\n window.removeEventListener('wheel', (e) => {\n handleScroll(e)\n })\n window.removeEventListener('touchstart', (e) => {\n handleSwipe(e, true)\n })\n window.removeEventListener('touchend', (e) => {\n handleSwipe(e, false)\n })\n window.removeEventListener('pointerdown', (e) => {\n handleSwipe(e.changedTouches[0].screenY, true)\n })\n window.removeEventListener('pointerup', (e) => {\n handleSwipe(e.changedTouches[0].screenY, false)\n })\n window.removeEventListener('pointermove', (e) => {\n handleDrag(e.screenY)\n })\n\n window.removeEventListener('resize', () => {\n windowHeight.current = window.innerHeight\n })\n }\n\n useEffect(() => {\n removeEventListeners()\n window.addEventListener('wheel', (e) => {\n handleScroll(e)\n })\n window.addEventListener('touchstart', (e) => {\n handleSwipe(e.changedTouches[0].screenY, true, e)\n })\n window.addEventListener('touchend', (e) => {\n handleSwipe(e.changedTouches[0].screenY, false, e)\n })\n window.addEventListener('pointerdown', (e) => {\n handleSwipe(e.screenY, true, e)\n })\n window.addEventListener('pointerup', (e) => {\n handleSwipe(e.screenY, false, e)\n })\n\n window.addEventListener('pointermove', (e) => {\n handleDrag(e.screenY)\n })\n window.addEventListener('touchmove', (e) => {\n handleDrag(e.changedTouches[0].screenY)\n })\n\n window.addEventListener('resize', () => {\n windowHeight.current = window.innerHeight\n })\n return () => {\n removeEventListeners()\n }\n }, [])\n\n const touchStartY = useRef(0)\n\n const [currentPointer, setCurrentPointer] = useState(0)\n\n const handleDrag = (screenY) => {\n if (touchStartY.current === 0) {\n return\n }\n\n let initialSet = false\n let difference = 0\n setCurrentPointer((prev) => {\n if (prev === 0) {\n initialSet = true\n return screenY\n }\n\n difference = prev - screenY\n\n if (\n (difference < 0 && difference > -2) ||\n (difference > 0 && difference < 2)\n ) {\n initialSet = true\n return prev\n }\n return screenY\n })\n if (initialSet) return\n\n setViewState((prev) => {\n if (prev.transitioning) {\n return prev\n }\n return { ...prev, currentTop: prev.currentTop - difference }\n })\n }\n\n const handleSwipe = (screenY, isStart, event) => {\n if (isStart) {\n touchStartY.current = screenY\n return\n }\n\n const touchEndY = screenY\n\n const touchDifference = touchStartY.current - touchEndY\n\n if (touchDifference < -100) {\n prevSection()\n } else if (touchDifference > 100) {\n nextSection()\n } else {\n restoreSection()\n }\n\n touchStartY.current = 0\n setCurrentPointer(0)\n }\n\n const panelsstyles = [styles.panelsContainer]\n if (viewState.transitioning) {\n panelsstyles.push(styles.panelTransitioning)\n }\n\n return (\n

\n {currentPointer !== 0 &&

}\n \n {props.children}\n {showIndicators && (\n \n )}\n

\n )\n}\n\nconst NavIndicators = ({ count, activeIndex, setIndicator }) => {\n let indicatorHtml = null\n if (count) {\n indicatorHtml = Array(count)\n .fill(0)\n .map((item, i) => {\n const indicatorstyles = [styles.indicator]\n if (i === activeIndex - 1) {\n indicatorstyles.push(styles.active)\n }\n return (\n {\n setIndicator(i + 1)\n }}\n >\n ⬤\n

here