From 23d60a626098f23725d1581ca17d042ae7a0b188 Mon Sep 17 00:00:00 2001 From: Alex Holachek Date: Wed, 2 Jan 2019 13:09:21 -0500 Subject: [PATCH] convert to typescript, use rollup to build, remove nwb --- .babelrc | 9 + .eslintrc | 11 - .gitignore | 15 +- .prettierrc | 4 + README.md | 3 +- demo/src/CardsExample/Card.js | 36 +- demo/src/CardsExample/FocusedUser.js | 26 +- demo/src/CardsExample/UserGrid.js | 34 +- demo/src/CardsExample/index.js | 26 +- demo/src/FlipMove/Card.js | 46 +- demo/src/FlipMove/index.js | 93 +- demo/src/GuitarsExample/GuitarItem.js | 28 +- demo/src/GuitarsExample/SelectedGuitar.js | 22 +- demo/src/GuitarsExample/guitarsData.js | 2 +- demo/src/GuitarsExample/index.js | 42 +- .../HandleEnterUpdateDelete/getRandomList.js | 4 +- demo/src/HandleEnterUpdateDelete/index.js | 91 +- demo/src/ListExample/index.js | 99 +- demo/src/PhotoGridExample/index.js | 66 +- demo/src/PortalExample/index.js | 37 +- demo/src/RemountedFlipperExample/index.js | 30 +- demo/src/RotateExample/index.js | 23 +- demo/src/SidebarExample/index.js | 22 +- demo/src/StaggeredList/index.js | 10 +- demo/src/TransformExample/index.js | 40 +- demo/src/TransformFromZeroExample/index.js | 48 +- demo/src/index.html | 13 + demo/src/index.js | 60 +- example/README.md | 2164 +++ example/package.json | 20 + example/public/index.html | 20 + example/public/manifest.json | 8 + example/src/App.js | 13 + example/src/index.css | 5 + example/src/index.js | 7 + jest.config.js | 11 + jest.transform.js | 4 - nwb.config.js | 12 - package-lock.json | 16080 ++++++++++++++++ package.json | 127 +- rollup.config.js | 53 + src/ExitContainer.js | 8 - src/ExitContainer/index.tsx | 10 + src/Flipped.js | 128 - src/Flipped/Flipped.test.tsx | 113 + src/Flipped/index.tsx | 130 + src/Flipped/types.ts | 42 + src/Flipper.js | 86 - src/Flipper/Flipper.test.tsx | 18 + src/Flipper/index.tsx | 98 + src/Flipper/types.ts | 47 + src/__tests__/Flipped.test.js | 110 - src/__tests__/Flipper.test.js | 18 - src/constants.js | 14 +- src/constants.ts | 6 + src/{core.js => core.ts} | 99 +- .../animateFlippedElements.domtest.js | 102 +- .../__tests__/applyStyles.domtest.js | 88 +- .../filterFlipDescendants.domtest.js | 54 +- ...ons.test.js => initiateAnimations.test.ts} | 111 +- .../{matrix.test.js => matrix.test.ts} | 0 ...iewport.test.js => rectInViewport.test.ts} | 12 +- .../{tweenProp.test.js => tweenProp.test.ts} | 6 +- ...escendants.js => filterFlipDescendants.ts} | 55 +- .../{index.js => index.ts} | 207 +- ...ateAnimations.js => initiateAnimations.ts} | 61 +- .../{spring.js => spring/index.ts} | 42 +- src/flip/animateFlippedElements/types.ts | 76 + .../animateUnflippedElements.domtest.js | 48 +- .../{index.js => index.ts} | 59 +- src/flip/animateUnflippedElements/types.js | 2 + src/flip/animateUnflippedElements/types.ts | 7 + .../getFlippedElementPositions.domtest.js | 165 +- .../index.ts | 30 + .../types.ts | 10 + .../index.ts | 116 + .../types.ts | 31 + src/flip/getFlippedElementPositions/index.js | 149 - src/flip/getFlippedElementPositions/types.ts | 13 + .../getFlippedElementPositions/utilities.ts | 18 + src/flip/index.js | 102 - src/flip/index.ts | 139 + src/flip/types.ts | 37 + src/forked-rebound/types.d.ts | 17 + src/index.d.ts | 78 - src/index.js | 14 - src/index.ts | 14 + .../__tests__/{index.js => index.ts} | 18 +- src/springSettings/index.js | 26 - src/springSettings/index.ts | 34 + src/springSettings/types.ts | 15 + src/utilities.js | 30 - src/utilities.ts | 35 + tsconfig.json | 42 + tsconfig.test.json | 6 + tslint.json | 22 + yarn.lock | 6258 +++--- 97 files changed, 23324 insertions(+), 5416 deletions(-) create mode 100644 .babelrc delete mode 100644 .eslintrc create mode 100644 .prettierrc create mode 100644 demo/src/index.html create mode 100644 example/README.md create mode 100644 example/package.json create mode 100644 example/public/index.html create mode 100644 example/public/manifest.json create mode 100644 example/src/App.js create mode 100644 example/src/index.css create mode 100644 example/src/index.js create mode 100644 jest.config.js delete mode 100644 jest.transform.js delete mode 100644 nwb.config.js create mode 100644 package-lock.json create mode 100644 rollup.config.js delete mode 100644 src/ExitContainer.js create mode 100644 src/ExitContainer/index.tsx delete mode 100644 src/Flipped.js create mode 100644 src/Flipped/Flipped.test.tsx create mode 100644 src/Flipped/index.tsx create mode 100644 src/Flipped/types.ts delete mode 100644 src/Flipper.js create mode 100644 src/Flipper/Flipper.test.tsx create mode 100644 src/Flipper/index.tsx create mode 100644 src/Flipper/types.ts delete mode 100644 src/__tests__/Flipped.test.js delete mode 100644 src/__tests__/Flipper.test.js create mode 100644 src/constants.ts rename src/{core.js => core.ts} (51%) rename src/flip/animateFlippedElements/__tests__/{initiateAnimations.test.js => initiateAnimations.test.ts} (56%) rename src/flip/animateFlippedElements/__tests__/{matrix.test.js => matrix.test.ts} (100%) rename src/flip/animateFlippedElements/__tests__/{rectInViewport.test.js => rectInViewport.test.ts} (67%) rename src/flip/animateFlippedElements/__tests__/{tweenProp.test.js => tweenProp.test.ts} (58%) rename src/flip/animateFlippedElements/{filterFlipDescendants.js => filterFlipDescendants.ts} (55%) rename src/flip/animateFlippedElements/{index.js => index.ts} (65%) rename src/flip/animateFlippedElements/{initiateAnimations.js => initiateAnimations.ts} (52%) rename src/flip/animateFlippedElements/{spring.js => spring/index.ts} (67%) create mode 100644 src/flip/animateFlippedElements/types.ts rename src/flip/animateUnflippedElements/{index.js => index.ts} (58%) create mode 100644 src/flip/animateUnflippedElements/types.js create mode 100644 src/flip/animateUnflippedElements/types.ts create mode 100644 src/flip/getFlippedElementPositions/getFlippedElementPositionsAfterUpdate/index.ts create mode 100644 src/flip/getFlippedElementPositions/getFlippedElementPositionsAfterUpdate/types.ts create mode 100644 src/flip/getFlippedElementPositions/getFlippedElementPositionsBeforeUpdate/index.ts create mode 100644 src/flip/getFlippedElementPositions/getFlippedElementPositionsBeforeUpdate/types.ts delete mode 100644 src/flip/getFlippedElementPositions/index.js create mode 100644 src/flip/getFlippedElementPositions/types.ts create mode 100644 src/flip/getFlippedElementPositions/utilities.ts delete mode 100644 src/flip/index.js create mode 100644 src/flip/index.ts create mode 100644 src/flip/types.ts create mode 100644 src/forked-rebound/types.d.ts delete mode 100644 src/index.d.ts delete mode 100644 src/index.js create mode 100644 src/index.ts rename src/springSettings/__tests__/{index.js => index.ts} (52%) delete mode 100644 src/springSettings/index.js create mode 100644 src/springSettings/index.ts create mode 100644 src/springSettings/types.ts delete mode 100644 src/utilities.js create mode 100644 src/utilities.ts create mode 100644 tsconfig.json create mode 100644 tsconfig.test.json create mode 100644 tslint.json diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..7b2e1f41 --- /dev/null +++ b/.babelrc @@ -0,0 +1,9 @@ +// just for tests + parcel demo +{ + "presets": [ + "@babel/preset-typescript", + "@babel/preset-react", + "@babel/preset-env" + ], + "plugins": ["@babel/plugin-proposal-class-properties"] +} diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 46745c48..00000000 --- a/.eslintrc +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": ["react-app", "eslint:recommended"], - "overrides": [ - { - "files": ["*.domtest.js"], - "rules": { - "no-console": "off" - } - } - ] -} diff --git a/.gitignore b/.gitignore index e7d6c694..e81c7ae8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,9 @@ -/coverage -/demo/dist -/es -/lib -/node_modules -/umd +coverage +demo/dist +es +lib +node_modules +umd npm-debug.log* yarn-error.log* TODO @@ -11,3 +11,6 @@ TODO dist stats.json .idea +.DS_STORE +.vscode +.rpt2_cache/ diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..79dcd3a3 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "semi": false, + "singleQuote": true +} diff --git a/README.md b/README.md index 7d9891a9..105d7e5e 100644 --- a/README.md +++ b/README.md @@ -417,7 +417,8 @@ That means any layout styles — padding, flexbox, etc—should be appli ## Library details - Requires React 16+ -- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11 +- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11. +- For IE11 compatability, make sure you're polyfilling the `window.Promise` object. - Uses [Rematrix](https://github.com/jlmakes/rematrix) for matrix calculations and a simplified fork of [Rebound](https://github.com/facebook/rebound-js) for spring animations ## Troubleshooting diff --git a/demo/src/CardsExample/Card.js b/demo/src/CardsExample/Card.js index 08497602..1dedd792 100644 --- a/demo/src/CardsExample/Card.js +++ b/demo/src/CardsExample/Card.js @@ -1,16 +1,16 @@ -import React, { PureComponent } from "react" -import { Flipped } from "../../../src" -import anime from "animejs" +import React, { PureComponent } from "react"; +import { Flipped } from "../../../src"; +import anime from "animejs"; class Card extends PureComponent { hideElements = (el, prev, current) => { - if (prev !== this.props.i) return - const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]")) - elements.forEach(el => (el.style.opacity = "0")) - el.style.zIndex = 2 - } + if (prev !== this.props.i) return; + const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]")); + elements.forEach(el => (el.style.opacity = "0")); + el.style.zIndex = 2; + }; animateIn = (el, prev, current) => { - if (prev !== this.props.i) return + if (prev !== this.props.i) return; anime({ targets: el.querySelectorAll("*[data-fade-in]"), translateY: [-30, 0], @@ -18,16 +18,16 @@ class Card extends PureComponent { duration: 250, easing: "easeOutSine", delay: (d, i) => i * 75 - }) - el.style.zIndex = 1 - } + }); + el.style.zIndex = 1; + }; shouldFlip = (prev, current) => { - if (prev === this.props.i) return true - return false - } + if (prev === this.props.i) return true; + return false; + }; render() { - const { parentFlipId, d, i, setFocusedIndex } = this.props + const { parentFlipId, d, i, setFocusedIndex } = this.props; return (
    • - ) + ); } } -export default Card +export default Card; diff --git a/demo/src/CardsExample/FocusedUser.js b/demo/src/CardsExample/FocusedUser.js index 4802e49f..7bfb9cd1 100644 --- a/demo/src/CardsExample/FocusedUser.js +++ b/demo/src/CardsExample/FocusedUser.js @@ -1,12 +1,12 @@ -import React, { Component } from "react" -import { Flipped } from "../../../src" -import anime from "animejs" +import React, { Component } from "react"; +import { Flipped } from "../../../src"; +import anime from "animejs"; class FocusedUser extends Component { hideElements = el => { - const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]")) - elements.forEach(el => (el.style.opacity = "0")) - } + const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]")); + elements.forEach(el => (el.style.opacity = "0")); + }; animateIn = el => { anime({ targets: el.querySelectorAll("*[data-fade-in]"), @@ -15,14 +15,14 @@ class FocusedUser extends Component { duration: 250, easing: "easeOutSine", delay: (d, i) => i * 75 - }) - } + }); + }; render() { - const { data, index, close } = this.props - const parentFlipId = `card-${index}` + const { data, index, close } = this.props; + const parentFlipId = `card-${index}`; - if (typeof index !== "number") return null + if (typeof index !== "number") return null; return (
    @@ -75,8 +75,8 @@ class FocusedUser extends Component {
    - ) + ); } } -export default FocusedUser +export default FocusedUser; diff --git a/demo/src/CardsExample/UserGrid.js b/demo/src/CardsExample/UserGrid.js index 67efb726..44fa3e2c 100644 --- a/demo/src/CardsExample/UserGrid.js +++ b/demo/src/CardsExample/UserGrid.js @@ -1,16 +1,16 @@ -import React, { Component } from "react" -import Card from "./Card" -import anime from "animejs" +import React, { Component } from "react"; +import Card from "./Card"; +import anime from "animejs"; class UserGrid extends Component { hideElements = (el, startId) => { - if (startId !== "focusedUser") return - const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]")) - elements.forEach(el => (el.style.opacity = "0")) - el.style.zIndex = 2 - } + if (startId !== "focusedUser") return; + const elements = [].slice.apply(el.querySelectorAll("*[data-fade-in]")); + elements.forEach(el => (el.style.opacity = "0")); + el.style.zIndex = 2; + }; animateIn = (el, startId) => { - if (startId !== "focusedUser") return + if (startId !== "focusedUser") return; anime({ targets: el.querySelectorAll("*[data-fade-in]"), translateY: [-30, 0], @@ -18,15 +18,15 @@ class UserGrid extends Component { duration: 250, easing: "easeOutSine", delay: (d, i) => i * 75 - }) - el.style.zIndex = 1 - } + }); + el.style.zIndex = 1; + }; render() { return ( - ) + ); } } -export default UserGrid +export default UserGrid; diff --git a/demo/src/CardsExample/index.js b/demo/src/CardsExample/index.js index 93aaed41..5179b88d 100644 --- a/demo/src/CardsExample/index.js +++ b/demo/src/CardsExample/index.js @@ -1,14 +1,14 @@ -import React, { Component } from "react" -import { Flipper } from "../../../src" -import userData from "./userData.json" -import UserGrid from "./UserGrid" -import FocusedUser from "./FocusedUser" -import "./styles.css" +import React, { Component } from 'react' +import { Flipper } from '../../../src' +import userData from './userData.json' +import UserGrid from './UserGrid' +import FocusedUser from './FocusedUser' +import './styles.css' export default class CardsExample extends Component { state = { focusedIndex: undefined, - speed: "normal", + speed: 'normal', userData: userData } setFocusedIndex = index => { @@ -22,7 +22,7 @@ export default class CardsExample extends Component {
    (this.el = el)}> @@ -49,10 +49,10 @@ export default class CardsExample extends Component { this.setState({ - speed: "normal" + speed: 'normal' }) } /> @@ -62,10 +62,10 @@ export default class CardsExample extends Component { this.setState({ - speed: "slow" + speed: 'slow' }) } /> @@ -84,7 +84,7 @@ export default class CardsExample extends Component { this.setState({ focusedIndex: null }) }} data={ - typeof this.state.focusedIndex === "number" + typeof this.state.focusedIndex === 'number' ? userData[this.state.focusedIndex] : null } diff --git a/demo/src/FlipMove/Card.js b/demo/src/FlipMove/Card.js index a221f3e7..50ac1b8d 100644 --- a/demo/src/FlipMove/Card.js +++ b/demo/src/FlipMove/Card.js @@ -1,6 +1,6 @@ -import React, { PureComponent } from "react" -import { Flipped } from "../../../src" -import anime from "animejs" +import React, { PureComponent } from "react"; +import { Flipped } from "../../../src"; +import anime from "animejs"; const onElementAppear = (el, index) => { anime({ @@ -9,8 +9,8 @@ const onElementAppear = (el, index) => { duration: 400, delay: index * 50, easing: "easeOutSine" - }) -} + }); +}; const onExit = type => (el, index, removeElement) => { anime({ @@ -20,27 +20,27 @@ const onExit = type => (el, index, removeElement) => { duration: 200, complete: removeElement, easing: "easeOutSine" - }).pause + }).pause; return () => { - el.style.opacity = "" - removeElement() - } -} + el.style.opacity = ""; + removeElement(); + }; +}; -const onGridExit = onExit("grid") -const onListExit = onExit("list") +const onGridExit = onExit("grid"); +const onListExit = onExit("list"); class Card extends PureComponent { shouldFlip = (prev, current) => { if (prev.type !== current.type) { - return true + return true; } - return false - } + return false; + }; render() { - const { id, title, type, stagger, addToFilteredIds } = this.props - const flipId = `item-${id}` + const { id, title, type, stagger, addToFilteredIds } = this.props; + const flipId = `item-${id}`; return (
    -

    {title}

    -

    {title}

    +

    + {title} +

    +

    + {title} +

    @@ -76,8 +80,8 @@ class Card extends PureComponent { - ) + ); } } -export default Card +export default Card; diff --git a/demo/src/FlipMove/index.js b/demo/src/FlipMove/index.js index 39ff35d4..cee7d87f 100644 --- a/demo/src/FlipMove/index.js +++ b/demo/src/FlipMove/index.js @@ -1,7 +1,7 @@ -import React, { Component } from "react" -import { Flipper, Flipped } from "../../../src" -import Card from "./Card" -import "./index.css" +import React, { Component } from "react"; +import { Flipper, Flipped } from "../../../src"; +import Card from "./Card"; +import "./index.css"; const data = [ { id: 1, title: "Somebody once told me" }, @@ -17,7 +17,7 @@ const data = [ }, { id: 6, title: "In the Shape of an L on her Forehead" }, { id: 7, title: "Well the years start coming" } -] +]; class ListExample extends Component { state = { @@ -26,15 +26,15 @@ class ListExample extends Component { filteredIds: [], stagger: "forward", spring: "noWobble" - } + }; addToFilteredIds = id => { this.setState(prevState => { return { filteredIds: prevState.filteredIds.concat(id) - } - }) - } + }; + }); + }; render() { return ( @@ -62,7 +62,7 @@ class ListExample extends Component { onClick={() => { this.setState({ sort: "asc" - }) + }); }} > { this.setState({ sort: "desc" - }) + }); }} > { this.setState({ type: "grid" - }) + }); }} > { this.setState({ type: "list" - }) + }); }} > {type} - ) + ); })}
    Spring - {["stiff", "noWobble", "veryGentle", "gentle", "wobbly"].map( - type => { - return ( - - ) - } - )} + {[ + "stiff", + "noWobble", + "veryGentle", + "gentle", + "wobbly" + ].map(type => { + return ( + + ); + })}
    - {!!this.state.filteredIds.length && ( + {!!this.state.filteredIds.length && - )} + }
    @@ -190,12 +193,12 @@ class ListExample extends Component { .filter(d => !this.state.filteredIds.includes(d.id)) .sort((a, b) => { if (this.state.sort === "asc") { - return a.id - b.id + return a.id - b.id; } else { - return b.id - a.id + return b.id - a.id; } }) - .map(({ title, id }) => ( + .map(({ title, id }) => - ))} + )}     - ) + ); } } -export default ListExample +export default ListExample; diff --git a/demo/src/GuitarsExample/GuitarItem.js b/demo/src/GuitarsExample/GuitarItem.js index 077d58e6..10cacee0 100644 --- a/demo/src/GuitarsExample/GuitarItem.js +++ b/demo/src/GuitarsExample/GuitarItem.js @@ -1,18 +1,18 @@ -import React, { Component } from "react" -import { Flipped } from "../../../src" +import React, { Component } from "react"; +import { Flipped } from "../../../src"; class GuitarItem extends Component { - static defaultProps = {} + static defaultProps = {}; - static propTypes = {} + static propTypes = {}; - onStart = el => (el.style.zIndex = 10) + onStart = el => (el.style.zIndex = 10); - onComplete = el => (el.style.zIndex = "") + onComplete = el => (el.style.zIndex = ""); render() { - const { index, title, subtitle, onClick } = this.props - const parentId = `guitar-${index}` + const { index, title, subtitle, onClick } = this.props; + const parentId = `guitar-${index}`; return (
    @@ -33,12 +33,16 @@ class GuitarItem extends Component { src={require(`./img/${index + 1}.png`)} /> -

    {title}

    -

    {subtitle}

    +

    + {title} +

    +

    + {subtitle} +

    - ) + ); } } -export default GuitarItem +export default GuitarItem; diff --git a/demo/src/GuitarsExample/SelectedGuitar.js b/demo/src/GuitarsExample/SelectedGuitar.js index 65d59bcf..ed67c76c 100644 --- a/demo/src/GuitarsExample/SelectedGuitar.js +++ b/demo/src/GuitarsExample/SelectedGuitar.js @@ -1,6 +1,6 @@ -import React, { Component } from "react" -import { Flipped } from "../../../src" -import anime from "animejs" +import React, { Component } from "react"; +import { Flipped } from "../../../src"; +import anime from "animejs"; class SelectedGuitar extends Component { animateIn = () => { @@ -11,8 +11,8 @@ class SelectedGuitar extends Component { duration: 200, easing: "easeOutSine", delay: (d, i) => i * 75 - }) - } + }); + }; animateOut = () => { anime({ @@ -23,12 +23,12 @@ class SelectedGuitar extends Component { easing: "easeOutSine", complete: this.props.closeSelected, delay: (d, i) => i * 50 - }) - } + }); + }; render() { - const { title, subtitle, description, price, index } = this.props - const parentId = `guitar-${index}` + const { title, subtitle, description, price, index } = this.props; + const parentId = `guitar-${index}`; return (
    (this.el = el)}>
    @@ -76,8 +76,8 @@ class SelectedGuitar extends Component {
    - ) + ); } } -export default SelectedGuitar +export default SelectedGuitar; diff --git a/demo/src/GuitarsExample/guitarsData.js b/demo/src/GuitarsExample/guitarsData.js index 21e5d1ba..3cd6f3f1 100644 --- a/demo/src/GuitarsExample/guitarsData.js +++ b/demo/src/GuitarsExample/guitarsData.js @@ -34,4 +34,4 @@ export default [ description: "Single-origin coffee air plant kitsch paleo iPhone vegan cold-pressed slow-carb cornhole dreamcatcher palo santo salvia lo-fi." } -] +]; diff --git a/demo/src/GuitarsExample/index.js b/demo/src/GuitarsExample/index.js index f3ec0208..ab66a7ac 100644 --- a/demo/src/GuitarsExample/index.js +++ b/demo/src/GuitarsExample/index.js @@ -1,19 +1,19 @@ -import React, { Component } from "react" -import { Flipper } from "../../../src" -import GuitarItem from "./GuitarItem" -import SelectedGuitar from "./SelectedGuitar" -import guitarsData from "./guitarsData" -import "./css/base.css" -import "./pater/pater.css" +import React, { Component } from "react"; +import { Flipper } from "../../../src"; +import GuitarItem from "./GuitarItem"; +import SelectedGuitar from "./SelectedGuitar"; +import guitarsData from "./guitarsData"; +import "./css/base.css"; +import "./pater/pater.css"; class GuitarExample extends Component { - static defaultProps = {} + static defaultProps = {}; - static propTypes = {} + static propTypes = {}; state = { focusedGuitarIndex: null - } + }; render() { return ( @@ -33,7 +33,7 @@ class GuitarExample extends Component {