Skip to content
This repository has been archived by the owner on Jan 5, 2023. It is now read-only.

Commit

Permalink
React transition group v4 (#89)
Browse files Browse the repository at this point in the history
* Update react-transition-group to v4

* Upgrade react-transition-group to v4
  • Loading branch information
kevinbarabash authored Jan 12, 2021
1 parent 7827cc1 commit 77ad8cb
Show file tree
Hide file tree
Showing 6 changed files with 158 additions and 65 deletions.
87 changes: 87 additions & 0 deletions flow-typed/npm/react-transition-group_v2.x.x.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
// flow-typed signature: e8479156f9001d8e633a0294717b4c83
// flow-typed version: c6154227d1/react-transition-group_v2.x.x/flow_>=v0.104.x

// @flow

declare module 'react-transition-group' {
declare export type CSSTransitionClassNames = {
appear?: string,
appearActive?: string,
enter?: string,
enterActive?: string,
enterDone?: string,
exit?: string,
exitActive?: string,
exitDone?: string,
...
};

declare export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';

declare export type EndHandler = (node: HTMLElement, done: () => void) => void;
declare export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
declare export type ExitHandler = (node: HTMLElement) => void;

declare type TransitionActions = {
appear?: boolean,
enter?: boolean,
exit?: boolean,
...
}

declare type TransitionProps = TransitionActions & {
mountOnEnter?: boolean,
unmountOnExit?: boolean,
onEnter?: EnterHandler,
onEntering?: EnterHandler,
onEntered?: EnterHandler,
onExit?: ExitHandler,
onExiting?: ExitHandler,
onExited?: ExitHandler,
...
} & ({
timeout: number | {
enter?: number,
exit?: number,
...
},
addEndListener?: null,
...
} | {
timeout?: number | {
enter?: number,
exit?: number,
...
},
addEndListener: EndHandler,
...
})

declare export class Transition extends React$Component<TransitionProps & {
in?: boolean,
// KA>
children: ((status: TransitionStatus) => React$Element<any>) | React$Element<any>,
// <KA
...
}> {}

declare export class TransitionGroup extends React$Component<TransitionActions & {
component?: React$ElementType | null,
children?: React$Node,
childFactory?: (child: React$Node) => React$Node,
...
}> {}

declare export class ReplaceTransition extends React$Component<TransitionProps & {
in: boolean,
children: React$Node,
...
}> {}

declare export class CSSTransition extends React$Component<TransitionProps & {
in?: boolean,
classNames: string | CSSTransitionClassNames,
children?: ((status: TransitionStatus) => React$Node) | React$Node,
...
}> {}
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
"react": "16.5",
"react-dom": "16.5",
"react-router-dom": "^4.2.2",
"react-transition-group": "1.2.1",
"react-transition-group": "^4.4.1",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1"
Expand Down
39 changes: 21 additions & 18 deletions src/components/echo-manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

const React = require("react");
const PropTypes = require("prop-types");
const {CSSTransitionGroup} = require("react-transition-group");
const {TransitionGroup, CSSTransition} = require("react-transition-group");
const KeypadButton = require("./keypad-button");
const KeyConfigs = require("../data/key-configs");
const {KeyTypes, EchoAnimationTypes} = require("../consts");
Expand Down Expand Up @@ -124,29 +124,32 @@ class EchoManager extends React.Component {
// See: https://github.com/Khan/aphrodite/issues/68.
// As such, we have to do this with a stylesheet.
return (
<CSSTransitionGroup
transitionName={animationTransitionName}
transitionEnter={true}
transitionLeave={false}
transitionEnterTimeout={animationDurationMs}
key={animationType}
>
<TransitionGroup key={animationType}>
{echoesForType.map((echo) => {
const {animationId} = echo;
return (
<Echo
<CSSTransition
classNames={animationTransitionName}
enter={true}
exit={false}
timeout={{
enter: animationDurationMs,
}}
key={animationId}
animationDurationMs={
animationDurationMs
}
onAnimationFinish={() =>
onAnimationFinish(animationId)
}
{...echo}
/>
>
<Echo
animationDurationMs={
animationDurationMs
}
onAnimationFinish={() =>
onAnimationFinish(animationId)
}
{...echo}
/>
</CSSTransition>
);
})}
</CSSTransitionGroup>
</TransitionGroup>
);
})}
</span>
Expand Down
13 changes: 8 additions & 5 deletions src/components/keypad.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,20 @@ const {echoPropType, popoverPropType} = require("./prop-types");

class Keypad extends React.Component {
static propTypes = {
// Whether the keypad is active, i.e., whether it should be rendered as
// visible or invisible.
active: PropTypes.bool,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
echoes: PropTypes.arrayOf(echoPropType).isRequired,
popover: popoverPropType,
removeEcho: PropTypes.func.isRequired,
style: PropTypes.any,

// The props below are injected by redux

// Whether the keypad is active, i.e., whether it should be rendered as
// visible or invisible.
active: PropTypes.bool,
echoes: PropTypes.arrayOf(echoPropType).isRequired,
popover: popoverPropType,
};

componentDidMount() {
Expand Down
32 changes: 16 additions & 16 deletions src/components/popover-manager.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

const React = require("react");
const PropTypes = require("prop-types");
const {CSSTransitionGroup} = require("react-transition-group");
const {TransitionGroup, CSSTransition} = require("react-transition-group");

const KeyConfigs = require("../data/key-configs");
const MultiSymbolPopover = require("./multi-symbol-popover");
Expand Down Expand Up @@ -53,22 +53,22 @@ class PopoverManager extends React.Component {
const {popover} = this.props;

return (
<CSSTransitionGroup
transitionName={animationTransitionName}
transitionEnter={true}
transitionLeave={false}
transitionEnterTimeout={animationDurationMs}
popover ? <CSSTransition
in={true}
classNames={animationTransitionName}
enter={true}
exit={false}
timeout={{
enter: animationDurationMs,
}}
>
{popover && (
<PopoverContainer
key={popover.childKeyIds[0]}
bounds={popover.bounds}
childKeys={popover.childKeyIds.map(
(id) => KeyConfigs[id],
)}
/>
)}
</CSSTransitionGroup>
<PopoverContainer
key={popover.childKeyIds[0]}
bounds={popover.bounds}
childKeys={popover.childKeyIds.map((id) => KeyConfigs[id])}
/>
</CSSTransition>
: null
);
}
}
Expand Down
50 changes: 25 additions & 25 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4152,11 +4152,6 @@ caseless@~0.12.0:
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=

chain-function@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
integrity sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==

chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
Expand Down Expand Up @@ -4845,6 +4840,11 @@ csstype@^2.2.0, csstype@^2.5.7:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==

csstype@^3.0.2:
version "3.0.6"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.6.tgz#865d0b5833d7d8d40f4e5b8a6d76aea3de4725ef"
integrity sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==

cyclist@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
Expand Down Expand Up @@ -5101,13 +5101,21 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"

dom-helpers@^3.2.0, dom-helpers@^3.4.0:
dom-helpers@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
dependencies:
"@babel/runtime" "^7.1.2"

dom-helpers@^5.0.1:
version "5.2.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
dependencies:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"

dom-serializer@0:
version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
Expand Down Expand Up @@ -9784,7 +9792,7 @@ prop-types@15.6.1:
loose-envify "^1.3.1"
object-assign "^4.1.1"

prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
Expand Down Expand Up @@ -10251,17 +10259,6 @@ react-textarea-autosize@^7.1.0:
"@babel/runtime" "^7.1.2"
prop-types "^15.6.0"

react-transition-group@1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
integrity sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==
dependencies:
chain-function "^1.0.0"
dom-helpers "^3.2.0"
loose-envify "^1.3.1"
prop-types "^15.5.6"
warning "^3.0.0"

react-transition-group@^2.2.1:
version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
Expand All @@ -10272,6 +10269,16 @@ react-transition-group@^2.2.1:
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"

react-transition-group@^4.4.1:
version "4.4.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"

react@16.5:
version "16.5.2"
resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
Expand Down Expand Up @@ -12145,13 +12152,6 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"

warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
dependencies:
loose-envify "^1.0.0"

warning@^4.0.1, warning@^4.0.2, warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
Expand Down

0 comments on commit 77ad8cb

Please sign in to comment.