Merged react-motion-gestures

Author: absurdprofit

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 
+
 # testing
 /coverage
 
@@ -21,3 +22,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json
+.vscode

README.md

@@ -1,8 +1,14 @@
-# React Motion Router
+<p align="center">
+    <img src="logo.png" />
+</p>
+
+<h1 align="center">
+    React Motion Router
+</h1>
 
 Declarative routing library for React ⚛ with page transitions and animations 🚀. Under Development 🧪. Based on React Router and React Navigation.
 
-#### [Demo](https://router.nxtetechnologies.com)
+#### [Demo](https://router.nxtetechnologies.com) 
 
 # [![version](https://img.shields.io/npm/v/react-motion-router)](https://www.npmjs.com/package/react-motion-router)  [![downloads](https://img.shields.io/npm/dm/react-motion-router)](https://www.npmjs.com/package/react-motion-router) [![license](https://img.shields.io/npm/l/react-motion-router)](https://github.com/nxtexe/react-motion-router/blob/main/LICENSE)
 
@@ -17,6 +23,7 @@ Declarative routing library for React ⚛ with page transitions and animations 
   - [Transitions](#transitions)
   - [Shared Element Transition](#shared-element-transition)
 - [API Documentation](#api-documentation)
+  - [Stack.Screen](#stackscreen)
   - [Router Config](#router-config)
   - [Animation Config](#animation-config)
   - [Shared Element Config](#sharedelementconfig)
@@ -33,7 +40,7 @@ npm install react-motion-router
 
 #### Basic
 
-Use the `Router` component to place your screens. Pass a React component to the component prop of `Stack.Screen` to be rendered when navigated to.
+Use the `Router` component to render your screens. Pass a React component to the component prop of `Stack.Screen` to be rendered when the path prop of the screen has been navigated to.
 
 ```
 ...
@@ -103,11 +110,11 @@ All data passed to the navigate function is accessible on the target screen thro
 
 #### Default Parameters
 
-A default parameter can be passed to the screen by passing a value to the default_params prop on `Stack.Screen` component.
+A default parameter can be passed to the screen by passing a value to the defaultParams prop on `Stack.Screen` component.
 
 ```
 ...
-<Stack.Screen path="/posts" component={Posts} default_params={{
+<Stack.Screen path="/posts" component={Posts} defaultParams={{
     post: {
         title: "Default Title"
     }
@@ -131,6 +138,27 @@ Transitions are a feature baked into react-motion-router; hence the name... To t
 </Router>
 ```
 
+You can subscribe to the transition progress by using the motion consumer component.
+
+```
+import {Motion} from 'react-motion-router';
+
+...
+<Motion.Consumer>
+    {(progress) => {
+        return (
+            <div>{progress}</div>
+        );
+    }}
+</Motion.Consumer>
+
+// OR Class.contextType
+
+static contextType = Motion;
+```
+
+The progress is updated as the animation plays and can be used to update DOM style attributes or control playback of an animation.
+
 #### Shared Element Transition
 
 To do a shared element transition wrap the component you would like shared between screens and supply it with a unique ID prop.
@@ -173,24 +201,34 @@ That's it! The element will transition from one screen to the next seemlessly. T
 This way the X and Y axis are animated independently and can alter the path of the shared element while transitioning.
 
 ## API Documentation
+#### Stack.Screen
+| Property | Type | Description |
+| ------ | ------ | ------ |
+| path | string | Pathname of the screen.|
+| animation | AnimationConfig | Config object used to modify the router's transition behaviour. In and out animation can also be set independently.|
+| component | any | A valid React Component to be rendered. |
+| defaultParams | Object | A dictionary of parameters that can be accessed by the rendered component. |
 
 #### Router Config
 
 Config object used to modify the behaviour of the Router.
 | Property | Type | Description |
 | ------ | ------ | ------ |
-| default_route | string | If the user navigates directly to a route other than the default and navigate.go_back() is called the app will navigate to the default route instead of closing. |
-| page_load_transition | boolean | Set to false if you wish to disable page transitions when the application first loads. |
-| animation | AnimationConfig | Config object used to modify the router's transition behaviour. |
+| defaultRoute | string | If the user navigates directly to a route other than the default and navigate.goBack() is called the app will navigate to the default route instead of leaving the website. |
+| pageLoadTransition | boolean | Set to false if you wish to disable page transitions when the application first loads. |
+| animation | AnimationConfig | Config object used to modify the router's global transition behaviour. In and out animation can also be set independently. |
+| swipeAreaWidth | number | Area in pixels from the left edge of the screen that gesture navigation can be triggered from. |
+| hysteresis | number | Percent from 0-100 which specifies minimum gesture progress before navigation is triggered. |
+| minFlingVelocity | number | Minimum average velocity of swipe gesture before navigation is triggered even if hysteresis was not reached. |
 
 #### Animation Config
 
 Config object used to modify the router's transition behaviour.
 | Property | Type | Description |
 | ------ | ------ | ------ |
-| type | "slide" or "fade" | The animation type used for page transitions. |
+| type | "slide", "fade", "zoom" or "none" | The animation type used for page transitions. |
 | duration | number | The time in milliseconds for how long page transitions are from start to end. |
-| direction | "left", "right", "up" or "down" | The direction used for slide transitions. The direction is swapped automatically on back navigation. i.e. The user presses their browser back button or navigation.go_back() is called. |
+| direction | "left", "right", "up", "down", "in" or "out" | The direction used for slide transitions. The direction is swapped automatically on back navigation. i.e. The user presses their browser back button or navigation.goBack() is called. |
 
 #### Shared Element Transitions
 
@@ -204,17 +242,17 @@ Config object used to modify the router's transition behaviour.
 
 | Property         | Type                        | Description                                                                                                                                                                 |
 | ---------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| transform_origin | TransformOrigin             | Changes transform alignment of shared element.                                                                                                                              |
+| transformOrigin | TransformOrigin             | Changes transform alignment of shared element.                                                                                                                              |
 | duration         | number                      | The time in milliseconds for how long the shared element transition is from start to end                                                                                    |
-| easing_function  | CSS &lt;easing-function&gt; | Denotes a mathematical function that describes the rate at which a numerical value changes.<sup>[1](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function)</sup> |
+| easingFunction  | CSS &lt;easing-function&gt; | Denotes a mathematical function that describes the rate at which a numerical value changes.<sup>[1](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function)</sup> |
 
 It is useful to note that the duration and easing function properties can also be set on the X and Y axis as independent values by specifying an X or Y property on the shared element config object.
 
 ```
 ...
 config={{
     x: {
-        easing_function: "ease-in-out",
+        easingFunction: "ease-in-out",
         duration: 500
     }
 }}

build.py

@@ -2,6 +2,7 @@
 import threading
 import os
 from progress.spinner import Spinner
+from datetime import datetime
 
 def compile_func():
     print("Creating an optimised build of React Motion Router ⚛\n")
@@ -66,7 +67,8 @@ def main():
     # load.join(5)
 
     clear()
-    print("Done!")
+    end = datetime.now().strftime("%H:%M:%S")
+    print(f"Done! {end}")
     exit(0)
 
 

example/src/App.tsx

@@ -12,17 +12,18 @@ function App() {
   return (
     <div className="App">
       <Router config={{
-        default_route: '/',
-        page_load_transition: false,
+        defaultRoute: '/',
+        pageLoadTransition: false,
         animation: {
-          type: "zoom",
-          duration: 300,
+            type: "slide",
+            direction: "right",
+            duration: 350,
         }
       }}>
         <Stack.Screen
           path={'/slides'}
           component={Slides}
-          default_params={{hero: 0}}
+          defaultParams={{hero: 0}}
         />
         <Stack.Screen
           path={'/cards'}
@@ -31,8 +32,7 @@ function App() {
         <Stack.Screen
           path={"/details"}
           component={Details}
-          default_params={{data: "Default"}}
-          
+          defaultParams={{data: "Default"}}
         />
         <Stack.Screen
           path={"/"}
@@ -41,12 +41,12 @@ function App() {
         <Stack.Screen
           path={"/post"}
           component={Post}
-          default_params={{data: "Default"}}
+          defaultParams={{data: "Default"}}
         />
         <Stack.Screen
           path={"/tiles"}
           component={Tiles}
-          default_params={{params: "data"}}
+          defaultParams={{params: "data"}}
         />
       </Router>
     </div>  

example/src/Components/Navbar.tsx

@@ -1,20 +1,23 @@
 import React from 'react';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import IconButton from '@mui/material/IconButton';
+import { SharedElement } from 'react-motion-router';
 import '../css/Navbar.css';
 
 interface NavbarProps {
     title: string;
-    on_back?: React.MouseEventHandler<HTMLButtonElement>;
+    onBack?: React.MouseEventHandler<HTMLButtonElement>;
 }
 export default function Navbar(props: NavbarProps) {
     return (
         <div className="navbar">
             <div className="back">
                 {
-                    props.on_back ?
-                    <IconButton onClick={props.on_back}>
-                        <ChevronLeftIcon />
+                    props.onBack ?
+                    <IconButton onClick={props.onBack}>
+                        <SharedElement id="back">
+                            <ChevronLeftIcon />
+                        </SharedElement>
                     </IconButton>
                     :
                     undefined

example/src/Screens/Cards.tsx

@@ -16,7 +16,7 @@ export default function Cards(props: CardsProps) {
     return (
         <div className="cards">
             <SharedElement id="navbar">
-                <Navbar title="Cards Demo" on_back={() => props.navigation.go_back()} />
+                <Navbar title="Cards Demo" onBack={() => props.navigation.goBack()} />
             </SharedElement>
             <div className="card-list">
             {
@@ -25,6 +25,9 @@ export default function Cards(props: CardsProps) {
                         <ButtonBase key={index} onClick={() => props.navigation.navigate('/details', {
                             profile: hero
                         })}>
+                            <SharedElement id={`${hero.id}-card-bg`}>
+                                <div className="card-bg"></div>
+                            </SharedElement>
                             <Card sx={{ width: 345 }}>
                                 <SharedElement id={hero.id}>
                                     <CardMedia
@@ -38,7 +41,11 @@ export default function Cards(props: CardsProps) {
                                     <SharedElement id={`title-${hero.id}`}>
                                         <Typography gutterBottom variant="h5" component="h5">{hero.name}</Typography>
                                     </SharedElement>
-                                    <p>{hero.description}</p>
+                                    <SharedElement id={`description-${hero.id}`}>
+                                        <p style={{
+                                            fontSize: '16px'
+                                        }}>{hero.description}</p>
+                                    </SharedElement>
                                 </CardContent>
                             </Card>
                         </ButtonBase>

example/src/Screens/Details.tsx

@@ -17,28 +17,35 @@ export default function Details(props: DetailsProps) {
     if (props.route.params.profile) {
         return (
             <div className="details" style={{width: "100%", height: "100%"}}>
-                <IconButton style={{position: "absolute", color: 'white'}} onClick={() => {props.navigation.go_back()}}>
-                    <ClearIcon />
+                <SharedElement id={`${props.route.params.profile.id}-card-bg`}>
+                    <div className="card-bg"></div>
+                </SharedElement>
+                <IconButton style={{
+                    position: "absolute",
+                    color: 'grey',
+                    zIndex: 10000
+                }} onClick={() => {props.navigation.goBack()}}>
+                    <SharedElement id="back" config={{
+                        type: 'fade-through'
+                    }}>
+                        <ClearIcon />
+                    </SharedElement>
                 </IconButton>
                 <div className="profile-info">
-                    <SharedElement config={{
-                        transform_origin: 'bottom bottom',
-                        x: {
-                            duration: 300,
-                            easing_function: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
-                        },
-                        y: {
-                            duration: 250,
-                            easing_function: 'ease-out'
-                        }
-                    }} id={props.route.params.profile.id}>
+                    <SharedElement id={props.route.params.profile.id}>
                         <img src={props.route.params.profile.photo} alt="profile-details" />
                     </SharedElement>
                     <div className="text-content">
-                        <SharedElement id={`title-${props.route.params.profile.id}`}>
+                        <SharedElement id={`title-${props.route.params.profile.id}`} config={{
+                            type: 'fade-through'
+                        }}>
                             <h1>{props.route.params.profile.name}</h1>
                         </SharedElement>
-                        <p>{props.route.params.profile.description}</p>
+                        <div className="description">
+                            <SharedElement id={`description-${props.route.params.profile.id}`}>
+                                <p>{props.route.params.profile.description}</p>
+                            </SharedElement>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -47,7 +54,7 @@ export default function Details(props: DetailsProps) {
         return (
             <div className="details">
                 <h1>Return Home</h1>
-                <button onClick={() => {props.navigation.go_back()}}>Back</button>
+                <button onClick={() => {props.navigation.goBack()}}>Back</button>
             </div>
         );
     }

example/src/Screens/Home.tsx

@@ -26,12 +26,15 @@ export default function Home(props: HomeProps) {
             onClick: () => props.navigation.navigate('/cards')
         }
     ]
+
     return (
         <div className="home">
-            <SharedElement id="navbar">
+            <SharedElement id="navbar" config={{
+                type: 'fade'
+            }}>
                 <Navbar title="Shared Element Demo" />
             </SharedElement>
-            <div className="list">
+            <div className={`list`}>
                 {
                     list.map((item: ListItem, index: number) => {
                         return <ListItemComponent

example/src/Screens/Post.tsx

@@ -15,7 +15,7 @@ export default class Post extends React.Component<PostProps, {}> {
         if (this.props.route.params.post) {
             return (
                 <div className="post">
-                    <button style={{position: "absolute"}} onClick={() => {this.props.navigation.go_back()}}>Back</button>
+                    <button style={{position: "absolute"}} onClick={() => {this.props.navigation.goBack()}}>Back</button>
                     <div className="picture">
                         <SharedElement id={this.props.route.params.post.id}>
                             <img src={this.props.route.params.post.picture} alt="post" />