-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #639 from szhsin/feat/switch-transition
feat: switch transition
- Loading branch information
Showing
12 changed files
with
209 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| const CodeSandbox = ({ href }) => ( | ||
| <div className="code-sandbox"> | ||
| <a href={href}>Edit on CodeSandbox</a> | ||
| </div> | ||
| ); | ||
|
|
||
| export { CodeSandbox }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { SwitchTransition } from './SwitchTransition'; | ||
| import { SwitchTransitionMap } from './SwitchTransitionMap'; | ||
| import { CodeSandbox } from './CodeSandbox'; | ||
|
|
||
| const SwitchExample = () => ( | ||
| <div className="switch-example"> | ||
| <h1>Switch Transition example</h1> | ||
| <h3>Two elements switching</h3> | ||
| <SwitchTransition /> | ||
| <h3>Any number of elements switching</h3> | ||
| <SwitchTransitionMap /> | ||
| <CodeSandbox href="https://codesandbox.io/p/sandbox/react-switch-transition-x87jt8" /> | ||
| </div> | ||
| ); | ||
|
|
||
| export { SwitchExample }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { useTransition } from 'react-transition-state'; | ||
|
|
||
| // Ideal for creating switch transition for a small number of elements | ||
| // Use `useTransition` hook once for each element in the switch transition | ||
| export const SwitchTransition = () => { | ||
| const transitionProps = { | ||
| timeout: 300, | ||
| mountOnEnter: true, | ||
| unmountOnExit: true, | ||
| preEnter: true | ||
| }; | ||
|
|
||
| const [state1, toggle1] = useTransition({ | ||
| ...transitionProps, | ||
| initialEntered: true | ||
| }); | ||
| const [state2, toggle2] = useTransition(transitionProps); | ||
| const toggle = () => { | ||
| toggle1(); | ||
| toggle2(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="switch-container"> | ||
| <SwitchButton state={state1} onClick={toggle}> | ||
| Button 1 | ||
| </SwitchButton> | ||
| <SwitchButton state={state2} onClick={toggle}> | ||
| Button 2 | ||
| </SwitchButton> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const SwitchButton = ({ state: { status, isMounted }, onClick, children }) => { | ||
| if (!isMounted) return null; | ||
|
|
||
| return ( | ||
| <button className={`btn switch ${status}`} onClick={onClick}> | ||
| {children} | ||
| </button> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { useEffect } from 'react'; | ||
| import { useTransitionMap } from 'react-transition-state'; | ||
|
|
||
| // Creating switch transitions for a large number of elements, | ||
| // or the number of elements is only known at runtime. | ||
| // `useTransition` doesn't suffice as React hook has the limitation that it cannot be called in a loop | ||
| const NUMBER_OF_BUTTONS = 5; | ||
| const buttonArray = new Array(NUMBER_OF_BUTTONS).fill(0).map((_, i) => `Button ${i + 1}`); | ||
|
|
||
| export const SwitchTransitionMap = () => { | ||
| const transition = useTransitionMap({ | ||
| timeout: 300, | ||
| mountOnEnter: true, | ||
| unmountOnExit: true, | ||
| preEnter: true | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="switch-container"> | ||
| {buttonArray.map((button, index) => ( | ||
| <SwitchButton | ||
| key={index} | ||
| itemKey={index} | ||
| nextItemKey={(index + 1) % buttonArray.length} | ||
| initialEntered={index === 0} | ||
| {...transition} | ||
| > | ||
| {button} | ||
| </SwitchButton> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const SwitchButton = ({ | ||
| itemKey, | ||
| nextItemKey, | ||
| initialEntered, | ||
| children, | ||
| stateMap, | ||
| toggle, | ||
| setItem, | ||
| deleteItem | ||
| }) => { | ||
| useEffect(() => { | ||
| setItem(itemKey, { initialEntered }); | ||
| return () => void deleteItem(itemKey); | ||
| }, [setItem, deleteItem, itemKey, initialEntered]); | ||
|
|
||
| const { status, isMounted } = stateMap.get(itemKey) || {}; | ||
|
|
||
| if (!isMounted) return null; | ||
|
|
||
| return ( | ||
| <button className={`btn switch ${status}`} onClick={() => toggle(nextItemKey)}> | ||
| {children} | ||
| </button> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.