[docs] Animate component's mounting and unmounting (#24049)

mui · Dec 20, 2020 · 9eba24e · 9eba24e
1 parent 5722e75
commit 9eba24e
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 1 deletion.
diff --git a/docs/package.json b/docs/package.json
@@ -105,6 +105,7 @@
     "react-spring": "^8.0.27",
     "react-swipeable-views": "^0.13.9",
     "react-text-mask": "^5.0.2",
+    "react-transition-group": "^4.4.1",
     "react-virtualized": "^9.21.1",
     "react-window": "^1.8.5",
     "recast": "^0.20.2",

diff --git a/docs/src/pages/components/transitions/TransitionGroupExample.js b/docs/src/pages/components/transitions/TransitionGroupExample.js
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Collapse from '@material-ui/core/Collapse';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { TransitionGroup } from 'react-transition-group';
+
+const FRUITS = [
+  '🍏 Apple',
+  '🍌 Banana',
+  '🍍 Pineapple',
+  '🥥 Coconut',
+  '🍉 Watermelon',
+];
+
+function renderItem({ item, handleRemoveFruit }) {
+  return (
+    <ListItem>
+      <ListItemText primary={item} />
+      <ListItemSecondaryAction>
+        <IconButton
+          edge="end"
+          aria-label="delete"
+          title="Delete"
+          onClick={() => handleRemoveFruit(item)}
+        >
+          <DeleteIcon />
+        </IconButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+}
+
+export default function TransitionGroupExample() {
+  const [fruitsInBasket, setFruitsInBasket] = React.useState(FRUITS.slice(0, 3));
+
+  const handleAddFruit = () => {
+    const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i));
+    if (nextHiddenItem) {
+      setFruitsInBasket((prev) => [nextHiddenItem, ...prev]);
+    }
+  };
+
+  const handleRemoveFruit = (item) => {
+    setFruitsInBasket((prev) => [...prev.filter((i) => i !== item)]);
+  };
+
+  const addFruitButton = (
+    <Button
+      variant="contained"
+      disabled={fruitsInBasket.length >= FRUITS.length}
+      onClick={handleAddFruit}
+    >
+      Add fruit to basket
+    </Button>
+  );
+
+  return (
+    <div>
+      {addFruitButton}
+      <Box sx={{ mt: 1 }}>
+        <List>
+          <TransitionGroup>
+            {fruitsInBasket.map((item) => (
+              <Collapse key={item}>
+                {renderItem({ item, handleRemoveFruit })}
+              </Collapse>
+            ))}
+          </TransitionGroup>
+        </List>
+      </Box>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/transitions/TransitionGroupExample.tsx b/docs/src/pages/components/transitions/TransitionGroupExample.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Collapse from '@material-ui/core/Collapse';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { TransitionGroup } from 'react-transition-group';
+
+const FRUITS = [
+  '🍏 Apple',
+  '🍌 Banana',
+  '🍍 Pineapple',
+  '🥥 Coconut',
+  '🍉 Watermelon',
+];
+
+interface RenderItemOptions {
+  item: string;
+  handleRemoveFruit: (item: string) => void;
+}
+
+function renderItem({ item, handleRemoveFruit }: RenderItemOptions) {
+  return (
+    <ListItem>
+      <ListItemText primary={item} />
+      <ListItemSecondaryAction>
+        <IconButton
+          edge="end"
+          aria-label="delete"
+          title="Delete"
+          onClick={() => handleRemoveFruit(item)}
+        >
+          <DeleteIcon />
+        </IconButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+}
+
+export default function TransitionGroupExample() {
+  const [fruitsInBasket, setFruitsInBasket] = React.useState(FRUITS.slice(0, 3));
+
+  const handleAddFruit = () => {
+    const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i));
+    if (nextHiddenItem) {
+      setFruitsInBasket((prev) => [nextHiddenItem, ...prev]);
+    }
+  };
+
+  const handleRemoveFruit = (item: string) => {
+    setFruitsInBasket((prev) => [...prev.filter((i) => i !== item)]);
+  };
+
+  const addFruitButton = (
+    <Button
+      variant="contained"
+      disabled={fruitsInBasket.length >= FRUITS.length}
+      onClick={handleAddFruit}
+    >
+      Add fruit to basket
+    </Button>
+  );
+
+  return (
+    <div>
+      {addFruitButton}
+      <Box sx={{ mt: 1 }}>
+        <List>
+          <TransitionGroup>
+            {fruitsInBasket.map((item) => (
+              <Collapse key={item}>
+                {renderItem({ item, handleRemoveFruit })}
+              </Collapse>
+            ))}
+          </TransitionGroup>
+        </List>
+      </Box>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/transitions/transitions.md b/docs/src/pages/components/transitions/transitions.md
@@ -81,6 +81,13 @@ This example also demonstrates how to delay the enter transition.
 
 {{"demo": "pages/components/transitions/SimpleZoom.js", "bg": true}}
 
+## TransitionGroup
+
+To animate a component when it is mounted or unmounted, you can use the [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group) component from _react-transition-group_.
+As components are added or removed, the `in` prop is toggled automatically by `TransitionGroup`.
+
+{{"demo": "pages/components/transitions/TransitionGroupExample.js"}}
+
 ## TransitionComponent prop
 
 Some Material-UI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition.
@@ -92,7 +99,7 @@ It should respect the following conditions:
 - Call the `onExited` callback prop when the exit transition is completed.
   These two callbacks allow to unmount the children when in a closed state and fully transitioned.
 
-For more information on creating a custom transition, visit the _react-transition-group_ [Transition docs](http://reactcommunity.org/react-transition-group/transition).
+For more information on creating a custom transition, visit the _react-transition-group_ [`Transition` documentation](http://reactcommunity.org/react-transition-group/transition).
 You can also visit the dedicated sections of some of the components:
 
 - [Modal](/components/modal/#transitions)