@times-stories/page
Advanced tools
+5
-4
| { | ||
| "name": "@times-stories/page", | ||
| "version": "1.0.4", | ||
| "main": "src/index.js", | ||
| "module": "src/index.js", | ||
| "version": "1.0.6", | ||
| "main": "lib/index.js", | ||
| "module": "lib/index.js", | ||
| "dev": "src/index.js", | ||
| "scripts": { | ||
@@ -23,3 +24,3 @@ "lint": "eslint .", | ||
| }, | ||
| "gitHead": "3223cc3fd1e029d8c79010ac53cb9d8111464676" | ||
| "gitHead": "eab2c93feda8daf0f77da24ecc71ca00aec5efe8" | ||
| } |
-59
| import React from "react"; | ||
| import StoryContext from "@times-stories/context"; | ||
| import style from "./style.scss"; | ||
| export const Page = ({ | ||
| pageIndex, | ||
| onInbound = () => {}, | ||
| onActive = () => {}, | ||
| onOutbound = () => {}, | ||
| children | ||
| }) => ( | ||
| <StoryContext.Consumer> | ||
| {({ | ||
| activePage, | ||
| outboundPage, | ||
| inboundPage, | ||
| isMuted, | ||
| withAnimations, | ||
| handlers | ||
| }) => { | ||
| const isActive = pageIndex === activePage; | ||
| const isOutbound = pageIndex === outboundPage; | ||
| const isInbound = pageIndex === inboundPage; | ||
| const isUpcoming = | ||
| pageIndex === activePage + 1 || pageIndex === activePage - 1; | ||
| if (isInbound) onInbound(); | ||
| if (isActive) onActive(); | ||
| if (isOutbound) onOutbound(); | ||
| return ( | ||
| <div | ||
| className={[style.page, withAnimations && style.withAnimations].join( | ||
| " " | ||
| )} | ||
| style={{ | ||
| opacity: isActive ? 1 : 0, | ||
| pointerEvents: isActive ? "initial" : "none" | ||
| }} | ||
| > | ||
| {children({ | ||
| pageIndex, | ||
| isActive, | ||
| isOutbound, | ||
| isInbound, | ||
| isUpcoming, | ||
| isMuted, | ||
| withAnimations, | ||
| handlers | ||
| })} | ||
| </div> | ||
| ); | ||
| }} | ||
| </StoryContext.Consumer> | ||
| ); | ||
| export default Page; |
| .page { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| z-index: 1; | ||
| &.withAnimations { | ||
| transition: opacity 0.4s ease; | ||
| } | ||
| } |
3499
-29.48%4
-33.33%41
-56.38%