From 6195597d68c531c1da6616efb6bf29970c13c694 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Dugue=CC=81?= Date: Tue, 10 Apr 2018 13:44:27 +0200 Subject: [PATCH] added render Prop, removed babelrc due to rollup issues, (patch) --- .babelrc | 9 -- README.md | 15 ++- examples/create-react-app/package.json | 2 +- examples/create-react-app/src/App.css | 5 + examples/create-react-app/src/App.js | 11 +- examples/create-react-app/yarn.lock | 6 +- package.json | 22 ++-- src/index.js | 48 +++++-- src/util.js | 5 + stories/.eslintrc | 16 +++ stories/index.stories.js | 171 ++++++++++++++----------- stories/yarn.lock | 97 ++++++++++++++ yarn.lock | 4 +- 13 files changed, 286 insertions(+), 125 deletions(-) delete mode 100644 .babelrc create mode 100644 stories/.eslintrc create mode 100644 stories/yarn.lock diff --git a/.babelrc b/.babelrc deleted file mode 100644 index adbe37b..0000000 --- a/.babelrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "presets": ["react"], - "plugins": ["transform-object-rest-spread", "transform-class-properties"], - "env": { - "test": { - "presets": [["env"], "react"] - } - } -} diff --git a/README.md b/README.md index e9dd010..20233dd 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Ever wanted to implement one of those incredible designs you find on [dribble](h * [Props](#props) * [dipId](#dipid) * [children](#children) - * [render (TODO)](#render-todo) + * [render](#render) * [duration](#duration) * [easing](#easing) * [element](#element) @@ -147,11 +147,13 @@ The `id` that groups two different dip elements. React-dip will only create anim > `React Element` | **Required unless using `render`-prop!** -Content that is rendered as part of that `dip`. +Content that is rendered as part of that `Dip`. -### render (TODO) +### render -> `function({})` | **Required unless using `children`-prop!** +> `function({ref: function(), styles: {}})` | **Required unless using `children`-prop!** + +Function that should return the content that is rendered as part of that `Dip`. Allows for more advanced pattern and skips the wrapping Element. See [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) for further details. **Warning:** `` takes precedence over `` so donโ€™t use both in the same ``. @@ -231,6 +233,7 @@ No _DEEEE-EYE-PEEE_, just **dip** your taco into some tasty salsa. ๐ŸŒฎ * Block-Elements h1 etc * nested Elements * transitioning to elements in scrolled lists (via browser back) +* text can get distorted ## Inspired by @@ -246,10 +249,10 @@ No _DEEEE-EYE-PEEE_, just **dip** your taco into some tasty salsa. ๐ŸŒฎ There are tons of ideas for improving `react-dip` such as adding fine grained control to your transitions, but the primary goal will stay to keep the API as symple as possible. * [x] add chapter about polyfilling -* [ ] render props (of course) +* [x] render props (of course) * [x] add support for custom timing functions * [ ] add support for staggering -* [ ] add complex examples with routing etc. +* [ ] add complex examples with renderProps, routing etc. * [ ] add real tests * [ ] add possibility of declaring alternative components that are shown whilst animating * [ ] export types for flow and typescript diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json index ecdbf1c..dbc66c2 100644 --- a/examples/create-react-app/package.json +++ b/examples/create-react-app/package.json @@ -7,7 +7,7 @@ "flow-bin": "^0.69.0", "prettier": "^1.11.1", "react": "^16.3.1", - "react-dip": "^0.0.3-4", + "react-dip": "^0.0.3-beta.1", "react-dom": "^16.3.1", "react-router-dom": "^4.2.2", "react-scripts": "^1.1.4", diff --git a/examples/create-react-app/src/App.css b/examples/create-react-app/src/App.css index 0adcf4d..3810e31 100644 --- a/examples/create-react-app/src/App.css +++ b/examples/create-react-app/src/App.css @@ -5,6 +5,11 @@ color: white; } +h1 { + display: inline-block; + color: #4abdac; +} + .App-title { font-size: 1.5em; } diff --git a/examples/create-react-app/src/App.js b/examples/create-react-app/src/App.js index 1e3f7b4..6a4c8cc 100644 --- a/examples/create-react-app/src/App.js +++ b/examples/create-react-app/src/App.js @@ -3,7 +3,6 @@ import React from 'react' import './App.css' import Dip from 'react-dip' import {BrowserRouter as Router, Route, Link} from 'react-router-dom' -import avatar from './Avatar.svg' const contacts = [ { @@ -90,7 +89,12 @@ const List = () => ( {contacts.map(contact => (
  • - {contact.firstName} + + {contact.firstName} +
    • ))} @@ -102,8 +106,7 @@ const Profile = ({match}) => { const contact = contactsById[match.params.id] return (
    - Profile - + {contact.firstName} {contact.lastName}
    diff --git a/examples/create-react-app/yarn.lock b/examples/create-react-app/yarn.lock index 4344246..a9e246e 100644 --- a/examples/create-react-app/yarn.lock +++ b/examples/create-react-app/yarn.lock @@ -5592,9 +5592,9 @@ react-dev-utils@^5.0.1: strip-ansi "3.0.1" text-table "0.2.0" -react-dip@^0.0.3-4: - version "0.0.3-4" - resolved "https://registry.yarnpkg.com/react-dip/-/react-dip-0.0.3-4.tgz#e96d96d430d919d9793c8ca4b9f332a16b8f9d74" +react-dip@^0.0.3-beta.1: + version "0.0.3-beta.1" + resolved "https://registry.yarnpkg.com/react-dip/-/react-dip-0.0.3-beta.1.tgz#a3de907f9cf3e233e0aa61eb143f7e59eddbc5a6" react-dom@^16.3.1: version "16.3.1" diff --git a/package.json b/package.json index 76b5553..8a0cd68 100644 --- a/package.json +++ b/package.json @@ -3,18 +3,19 @@ "version": "0.0.3-beta.1", "description": "Simple & declarative transition animations for React", "main": "dist/react-dip.cjs.js", - "module": "dist/react-dip.esm.js", "jsnext:main": "dist/react-dip.esm.js", + "module": "dist/react-dip.esm.js", + "pure-module": true, "scripts": { "build": "kcd-scripts build --bundle", + "copyFlowSource": "node ./buildscripts/createFlowLinks", "flow": "flow", "lint": "kcd-scripts lint", + "postbuild": "npm run copyFlowSource", "precommit": "kcd-scripts precommit", "storybook": "start-storybook -p 6006", "storybook:build": "build-storybook", - "test": "flow && jest", - "copyFlowSource": "node ./buildscripts/createFlowLinks", - "postbuild": "npm run copyFlowSource" + "test": "flow && jest" }, "files": ["dist", "preact", "src"], "repository": { @@ -44,24 +45,24 @@ "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-jest": "^22.4.3", - "babel-plugin-transform-class-properties": "^6.24.1", - "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-plugin-transform-react-jsx": "^6.24.1", "babel-preset-env": "^1.6.1", "babel-preset-flow": "^6.23.0", - "babel-preset-react": "^6.24.1", "babel-runtime": "^6.26.0", "cross-env": "^5.1.4", "flow-bin": "^0.69.0", "jest": "^22.4.3", "kcd-scripts": "^0.37.0", "prettier": "^1.11.1", + "prop-types": "^15.6.1", + "react": "^16.3.1", + "react-dom": "^16.3.1", "regenerator-runtime": "^0.11.1" }, "dependencies": {}, "peerDependencies": { - "react": "^16.0.0", - "react-dom": "^16.0.0" + "react": ">=15.0.0", + "react-dom": ">=15.0.0" }, "eslintConfig": { "extends": "./node_modules/kcd-scripts/eslint.js", @@ -78,7 +79,8 @@ "coverage", "dist", "storybook-static", - "examples" + "examples", + "stories" ], "jest": { "rootDir": "./src/" diff --git a/src/index.js b/src/index.js index e18d2df..f5083a3 100644 --- a/src/index.js +++ b/src/index.js @@ -25,7 +25,7 @@ type Props = { easing?: string, element?: string, optInCssStyles: string[], - render?: () => Node, + render?: ({ref: (?AnimatableElement) => void, style: {}}) => Node, style?: CSSStyleDeclaration, } @@ -100,17 +100,11 @@ class Dip extends Component { ref != null && Dip.registerFromNode(this.props.dipId, ref) } - render() { - const { - children, - dipId, - duration: _ignoreDuration_, // eslint-disable-line no-unused-vars - element: Element = 'div', - optInCssStyles: _ignoreOptInCssStyles_, // eslint-disable-line no-unused-vars - render, - style, - ...rest - } = this.props + /** + * notify the user if props are not set correctly via console.log / console.warn + */ + logWarnings = () => { + const {children, dipId, element, render} = this.props // eslint-disable-line no-unused-vars // eslint-disable-line no-unused-vars /* eslint-disable */ if (dipId == null) { console.error( @@ -122,7 +116,37 @@ class Dip extends Component { 'please specify either a `children` or a `render`-Prop. See https://github.com/mdugue/react-dip', ) } + if (render != null && element != null) { + console.warn( + 'the `element`-Prop will be ignored as you specified a `render`-Prop. See https://github.com/mdugue/react-dip', + ) + } /* eslint-disable */ + } + + render() { + const { + children, + dipId: _ignoreDipId_, // eslint-disable-line no-unused-vars, + duration: _ignoreDuration_, // eslint-disable-line no-unused-vars + element: Element = 'div', + optInCssStyles: _ignoreOptInCssStyles_, // eslint-disable-line no-unused-vars + render, + style, + ...rest + } = this.props + + this.logWarnings() + + if (render != null) + return render({ + ...rest, + ref: this.addRef, + style: { + ...style, + transformOrigin: 'left top', + }, + }) return ( + + {this.state.isInitialState + ? this.props.state1Component + : this.props.state2Component} + + ) + } +} + const Comp1 = props => ( ( ) -class MinimalSetup extends Component { - state = {isInitialState: true} - render() { - return ( -
    - - {this.state.isInitialState ? ( - - ) : ( - - )} -
    - ) - } -} +const CompRenderProp = props => ( +
    with RenderProp
    } + /> +) -class Morphing extends Component { - state = {isInitialState: true} - render() { - return ( -
    - - {this.state.isInitialState ? ( - - ) : ( - - )} -
    - ) - } -} +const MinimalSetup = () => ( + } + state2Component={} + /> +) -class Timing extends Component { - state = {isInitialState: true} - render() { - return ( -
    - - {this.state.isInitialState ? ( - - ) : ( - - )} -
    - ) - } -} +const Timing = () => ( + } + state2Component={} + /> +) + +const Morphing = () => ( + + } + state2Component={ + + } + /> +) + +const RenderProps = () => ( + + } + state2Component={ + + } + /> +) storiesOf('Basic React-Dip examples', module) .add('minimal setup ๐ŸŽ‰', () => ) .add( - 'with Timing', + 'with Timing ๐Ÿ•ฐ', withMarkdownNotes(` # Timing @@ -130,4 +144,5 @@ eg \`\` )), ) - .add('with morphing ๐Ÿ•ฐ', () => ) + .add('with advanved morphing โœจ', () => ) + .add('with renderProps ๐Ÿคฉ', () => ) diff --git a/stories/yarn.lock b/stories/yarn.lock new file mode 100644 index 0000000..2c1157c --- /dev/null +++ b/stories/yarn.lock @@ -0,0 +1,97 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +asap@~2.0.3: + version "2.0.6" + resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" + +core-js@^1.0.0: + version "1.2.7" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" + +encoding@^0.1.11: + version "0.1.12" + resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" + dependencies: + iconv-lite "~0.4.13" + +fbjs@^0.8.16: + version "0.8.16" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.9" + +iconv-lite@~0.4.13: + version "0.4.21" + resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.21.tgz#c47f8733d02171189ebc4a400f3218d348094798" + dependencies: + safer-buffer "^2.1.0" + +is-stream@^1.0.1: + version "1.1.0" + resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" + +isomorphic-fetch@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" + dependencies: + node-fetch "^1.0.1" + whatwg-fetch ">=0.10.0" + +js-tokens@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" + +loose-envify@^1.0.0, loose-envify@^1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" + dependencies: + js-tokens "^3.0.0" + +node-fetch@^1.0.1: + version "1.7.3" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" + dependencies: + encoding "^0.1.11" + is-stream "^1.0.1" + +object-assign@^4.1.0, object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + +promise@^7.1.1: + version "7.3.1" + resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" + dependencies: + asap "~2.0.3" + +prop-types@^15.6.1: + version "15.6.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.3.1" + object-assign "^4.1.1" + +safer-buffer@^2.1.0: + version "2.1.2" + resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" + +setimmediate@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" + +ua-parser-js@^0.7.9: + version "0.7.17" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac" + +whatwg-fetch@>=0.10.0: + version "2.0.4" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f" diff --git a/yarn.lock b/yarn.lock index 7ccf8c7..d1a2b92 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7262,7 +7262,7 @@ react-docgen@^3.0.0-beta11: node-dir "^0.1.10" recast "^0.12.6" -react-dom@^16.0.0: +react-dom@^16.0.0, react-dom@^16.3.1: version "16.3.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.1.tgz#6a3c90a4fb62f915bdbcf6204422d93a7d4ca573" dependencies: @@ -7350,7 +7350,7 @@ react-treebeard@^2.1.0: shallowequal "^0.2.2" velocity-react "^1.3.1" -react@^16.0.0: +react@^16.0.0, react@^16.3.1: version "16.3.1" resolved "https://registry.yarnpkg.com/react/-/react-16.3.1.tgz#4a2da433d471251c69b6033ada30e2ed1202cfd8" dependencies: