Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 39 additions & 237 deletions addons/create-react-class/create-react-class.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion addons/create-react-class/create-react-class.min.js

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions addons/create-react-class/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,16 @@
},
"homepage": "https://facebook.github.io/react/",
"dependencies": {
"fbjs": "^0.8.9"
"fbjs": "^0.8.9",
"object-assign": "^4.1.1"
},
"scripts": {
"test": "jest"
},
"devDependencies": {
"jest": "^19.0.2",
"react": "^15.4.2",
"react-addons-test-utils": "^15.4.2",
"react-dom": "^15.4.2"
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-dom": "^15.5.0"
}
}
34 changes: 21 additions & 13 deletions addons/create-react-class/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -581,7 +581,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"

fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9:
fbjs@^0.8.4, fbjs@^0.8.9:
version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
dependencies:
Expand Down Expand Up @@ -1419,7 +1419,7 @@ oauth-sign@~0.8.1:
version "0.8.2"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"

object-assign@^4.1.0:
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"

Expand Down Expand Up @@ -1565,6 +1565,12 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.2, prop-types@~15.5.0:
version "15.5.4"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.4.tgz#2ed3692716a5060f8cc020946d8238e7419d92c0"
dependencies:
fbjs "^0.8.9"

prr@~0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
Expand All @@ -1584,28 +1590,30 @@ randomatic@^1.1.3:
is-number "^2.0.2"
kind-of "^3.0.2"

react-addons-test-utils@^15.4.2:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2"
react-addons-test-utils@^15.5.0:
version "15.5.0"
resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.5.0.tgz#d09f7475ba7728bcdb288303a687b64c75b31a5c"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"

react-dom@^15.4.2:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f"
react-dom@^15.5.0:
version "15.5.3"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.3.tgz#2ee127ce942df55da53111ae303316e68072b5c5"
dependencies:
fbjs "^0.8.1"
fbjs "^0.8.9"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "~15.5.0"

react@^15.4.2:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"
react@^15.5.0:
version "15.5.3"
resolved "https://registry.yarnpkg.com/react/-/react-15.5.3.tgz#84055382c025dec4e3b902bb61a8697cc79c1258"
dependencies:
fbjs "^0.8.4"
fbjs "^0.8.9"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.2"

read-pkg-up@^1.0.1:
version "1.0.1"
Expand Down
76 changes: 74 additions & 2 deletions addons/react-addons-create-fragment/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,77 @@
# react-addons-create-fragment

This package provides the React createFragment add-on.

See <https://facebook.github.io/react/docs/create-fragment.html> for more information.
>**Note:**
>This is a legacy React addon, and is no longer maintained.
>
>We don't encourage using it in new code, but it exists for backwards compatibility.
>The recommended migration path is to use arrays with explicit keys on individual elements.

**Importing**

```javascript
import createFragment from 'react-addons-create-fragment'; // ES6
var createFragment = require('react-addons-create-fragment'); // ES5 with npm
```

If you prefer a `<script>` tag, you can get it from `React.addons.createFragment` with:

```html
<!-- development version -->
<script src="https://unpkg.com/react-addons-create-fragment/react-addons-create-fragment.js"></script>

<!-- production version -->
<script src="https://unpkg.com/react-addons-create-fragment/react-addons-create-fragment.min.js"></script>
```

In this case, make sure to put the `<script>` tag after React.

## Overview

In most cases, you can use the `key` prop to specify keys on the elements you're returning from `render`. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there's no way to put a key on each set without adding a wrapper element.

That is, if you have a component such as:

```js
function Swapper(props) {
let children;
if (props.swapped) {
children = [props.rightChildren, props.leftChildren];
} else {
children = [props.leftChildren, props.rightChildren];
}
return <div>{children}</div>;
}
```

The children will unmount and remount as you change the `swapped` prop because there aren't any keys marked on the two sets of children.

To solve this problem, you can use the `createFragment` add-on to give keys to the sets of children.

#### `Array<ReactNode> createFragment(object children)`

Instead of creating arrays, we write:

```javascript
import createFragment from 'react-addons-create-fragment';

function Swapper(props) {
let children;
if (props.swapped) {
children = createFragment({
right: props.rightChildren,
left: props.leftChildren
});
} else {
children = createFragment({
left: props.leftChildren,
right: props.rightChildren
});
}
return <div>{children}</div>;
}
```

The keys of the passed object (that is, `left` and `right`) are used as keys for the entire set of children, and the order of the object's keys is used to determine the order of the rendered children. With this change, the two sets of children will be properly reordered in the DOM without unmounting.

The return value of `createFragment` should be treated as an opaque object; you can use the [`React.Children`](https://facebook.github.io/react/docs/react-api.html#react.children) helpers to loop through a fragment but should not access it directly. Note also that we're relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.
Loading