This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 55
chore(Animation): move to function component, styles in theme are not required #2258
Merged
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
af2af43
chore(Animation): refactor to FC
layershifter af260bb
update changelog
layershifter 1a599dd
cleanup tests
layershifter 34b0685
fix className issue
layershifter 4a61e5a
Merge branches 'chore/move-animation-to-fc' and 'master' of https://g…
layershifter 70675ac
fix review comments
layershifter 05b95f3
fix merge issues
layershifter 3832332
remove comment
layershifter File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
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 |
---|---|---|
@@ -1,17 +1,20 @@ | ||
import * as PropTypes from 'prop-types' | ||
import * as React from 'react' | ||
import { | ||
ComponentAnimationProp, | ||
getUnhandledProps, | ||
unstable_createAnimationStyles as createAnimationStyles, | ||
unstable_getStyles as getStyles, | ||
useTelemetry, | ||
} from '@fluentui/react-bindings' | ||
import cx from 'classnames' | ||
import * as _ from 'lodash' | ||
import * as PropTypes from 'prop-types' | ||
import * as React from 'react' | ||
// @ts-ignore | ||
import { ThemeContext } from 'react-fela' | ||
import { Transition } from 'react-transition-group' | ||
|
||
import { | ||
UIComponent, | ||
childrenExist, | ||
StyledComponentProps, | ||
commonPropTypes, | ||
ShorthandFactory, | ||
} from '../../utils' | ||
import { ComponentEventHandler } from '../../types' | ||
import { childrenExist, StyledComponentProps, commonPropTypes } from '../../utils' | ||
import { ComponentEventHandler, ProviderContextPrepared } from '../../types' | ||
|
||
export type AnimationChildrenProp = (props: { classes: string }) => React.ReactNode | ||
|
||
|
@@ -139,92 +142,156 @@ export interface AnimationProps extends StyledComponentProps { | |
/** | ||
* An Animation provides animation effects to rendered elements. | ||
*/ | ||
class Animation extends UIComponent<AnimationProps, any> { | ||
static create: ShorthandFactory<AnimationProps> | ||
|
||
static className = 'ui-animation' | ||
|
||
static displayName = 'Animation' | ||
|
||
static propTypes = { | ||
...commonPropTypes.createCommon({ | ||
accessibility: false, | ||
as: false, | ||
content: false, | ||
children: false, | ||
}), | ||
children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), | ||
name: PropTypes.string, | ||
delay: PropTypes.string, | ||
direction: PropTypes.string, | ||
duration: PropTypes.string, | ||
fillMode: PropTypes.string, | ||
iterationCount: PropTypes.string, | ||
keyframeParams: PropTypes.object, | ||
playState: PropTypes.string, | ||
timingFunction: PropTypes.string, | ||
visible: PropTypes.bool, | ||
appear: PropTypes.bool, | ||
mountOnEnter: PropTypes.bool, | ||
unmountOnExit: PropTypes.bool, | ||
timeout: PropTypes.oneOfType([ | ||
PropTypes.number, | ||
PropTypes.shape({ | ||
appear: PropTypes.number, | ||
enter: PropTypes.number, | ||
exit: PropTypes.number, | ||
}), | ||
]), | ||
onEnter: PropTypes.func, | ||
onEntering: PropTypes.func, | ||
onEntered: PropTypes.func, | ||
onExit: PropTypes.func, | ||
onExiting: PropTypes.func, | ||
onExited: PropTypes.func, | ||
} | ||
|
||
static defaultProps = { | ||
timeout: 0, | ||
} | ||
|
||
handleAnimationEvent = ( | ||
const Animation: React.FC<AnimationProps> & { | ||
className: string | ||
handledProps: (keyof AnimationProps)[] | ||
} = props => { | ||
const context: ProviderContextPrepared = React.useContext(ThemeContext) | ||
const { setStart, setEnd } = useTelemetry(Animation.displayName, context.telemetry) | ||
setStart() | ||
|
||
const { | ||
appear, | ||
children, | ||
className, | ||
delay, | ||
direction, | ||
duration, | ||
fillMode, | ||
iterationCount, | ||
keyframeParams, | ||
mountOnEnter, | ||
name, | ||
playState, | ||
timeout, | ||
timingFunction, | ||
visible, | ||
unmountOnExit, | ||
} = props | ||
|
||
const handleAnimationEvent = ( | ||
event: 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited', | ||
) => () => { | ||
_.invoke(this.props, event, null, this.props) | ||
_.invoke(props, event, null, props) | ||
} | ||
|
||
renderComponent({ ElementType, classes, unhandledProps }) { | ||
const { children, mountOnEnter, unmountOnExit, timeout, appear, visible } = this.props | ||
|
||
const isChildrenFunction = typeof children === 'function' | ||
|
||
const child = | ||
childrenExist(children) && | ||
!isChildrenFunction && | ||
(React.Children.only(children) as React.ReactElement<any>) | ||
|
||
return ( | ||
<Transition | ||
in={visible} | ||
appear={appear} | ||
mountOnEnter={mountOnEnter} | ||
unmountOnExit={unmountOnExit} | ||
timeout={timeout} | ||
onEnter={this.handleAnimationEvent('onEnter')} | ||
onEntering={this.handleAnimationEvent('onEntering')} | ||
onEntered={this.handleAnimationEvent('onEntered')} | ||
onExit={this.handleAnimationEvent('onExit')} | ||
onExiting={this.handleAnimationEvent('onExiting')} | ||
onExited={this.handleAnimationEvent('onExited')} | ||
{...unhandledProps} | ||
className={!isChildrenFunction ? cx(classes.root, (child as any).props.className) : ''} | ||
> | ||
{isChildrenFunction | ||
? () => (children as AnimationChildrenProp)({ classes: classes.root }) | ||
: child} | ||
</Transition> | ||
) | ||
} | ||
const { classes } = React.useMemo(() => { | ||
const animation: ComponentAnimationProp = { | ||
name, | ||
keyframeParams, | ||
duration, | ||
delay, | ||
iterationCount, | ||
direction, | ||
fillMode, | ||
playState, | ||
timingFunction, | ||
} | ||
|
||
return getStyles({ | ||
className: Animation.className, | ||
displayName: Animation.displayName, | ||
props: { | ||
className, | ||
styles: createAnimationStyles(animation, context.theme), | ||
}, | ||
|
||
disableAnimations: context.disableAnimations, | ||
renderer: context.renderer, | ||
rtl: context.rtl, | ||
performance: {}, | ||
saveDebug: _.noop, | ||
theme: context.theme, | ||
}) | ||
}, [ | ||
className, | ||
context, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Are we using everything from the context? Should we maybe list the things used from the context There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Almost everything... So I don't see any benefits in destructing it... |
||
name, | ||
delay, | ||
direction, | ||
duration, | ||
fillMode, | ||
iterationCount, | ||
keyframeParams, | ||
playState, | ||
timingFunction, | ||
]) | ||
const unhandledProps = getUnhandledProps(Animation.handledProps, props) | ||
|
||
const isChildrenFunction = typeof children === 'function' | ||
const child = | ||
childrenExist(children) && | ||
!isChildrenFunction && | ||
(React.Children.only(children) as React.ReactElement) | ||
|
||
const element = ( | ||
<Transition | ||
in={visible} | ||
appear={appear} | ||
mountOnEnter={mountOnEnter} | ||
unmountOnExit={unmountOnExit} | ||
timeout={timeout} | ||
onEnter={handleAnimationEvent('onEnter')} | ||
onEntering={handleAnimationEvent('onEntering')} | ||
onEntered={handleAnimationEvent('onEntered')} | ||
onExit={handleAnimationEvent('onExit')} | ||
onExiting={handleAnimationEvent('onExiting')} | ||
onExited={handleAnimationEvent('onExited')} | ||
{...unhandledProps} | ||
className={!isChildrenFunction ? cx(classes.root, (child as any).props.className) : ''} | ||
> | ||
{isChildrenFunction | ||
? () => (children as AnimationChildrenProp)({ classes: classes.root }) | ||
: child} | ||
</Transition> | ||
) | ||
setEnd() | ||
|
||
return element | ||
} | ||
|
||
Animation.className = 'ui-animation' | ||
Animation.displayName = 'Animation' | ||
|
||
Animation.defaultProps = { | ||
timeout: 0, | ||
} | ||
Animation.propTypes = { | ||
...commonPropTypes.createCommon({ | ||
accessibility: false, | ||
as: false, | ||
content: false, | ||
children: false, | ||
}), | ||
children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), | ||
name: PropTypes.string, | ||
delay: PropTypes.string, | ||
direction: PropTypes.string, | ||
duration: PropTypes.string, | ||
fillMode: PropTypes.string, | ||
iterationCount: PropTypes.string, | ||
keyframeParams: PropTypes.object, | ||
playState: PropTypes.string, | ||
timingFunction: PropTypes.string, | ||
visible: PropTypes.bool, | ||
appear: PropTypes.bool, | ||
mountOnEnter: PropTypes.bool, | ||
unmountOnExit: PropTypes.bool, | ||
timeout: PropTypes.oneOfType([ | ||
PropTypes.number, | ||
PropTypes.shape({ | ||
appear: PropTypes.number, | ||
enter: PropTypes.number, | ||
exit: PropTypes.number, | ||
}), | ||
]), | ||
onEnter: PropTypes.func, | ||
onEntering: PropTypes.func, | ||
onEntered: PropTypes.func, | ||
onExit: PropTypes.func, | ||
onExiting: PropTypes.func, | ||
onExited: PropTypes.func, | ||
} | ||
Animation.handledProps = Object.keys(Animation.propTypes) as any | ||
|
||
export default Animation |
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
22 changes: 0 additions & 22 deletions
22
packages/react/src/themes/teams/components/Animation/animationStyles.ts
This file was deleted.
Oops, something went wrong.
1 change: 0 additions & 1 deletion
1
packages/react/src/themes/teams/components/Animation/animationVariables.ts
This file was deleted.
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we have
debug
forAnimation
component?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No 👍