Skip to content

Commit

Permalink
Removing optional chaining operators
Browse files Browse the repository at this point in the history
  • Loading branch information
mattgperry committed Feb 14, 2023
1 parent ca6df6b commit 211446c
Showing 15 changed files with 136 additions and 86 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -14,6 +14,10 @@ Undocumented APIs should be considered internal and may change without warning.

- Fallback behavior for missing `IntersectionObserver`.

### Changed

- No longer making `ProjectionNode` for `display: contents` nodes.

## [9.0.2] 2023-02-07

### Changed
10 changes: 5 additions & 5 deletions packages/framer-motion/package.json
Original file line number Diff line number Diff line change
@@ -72,31 +72,31 @@
"bundlesize": [
{
"path": "./dist/size-rollup-motion.js",
"maxSize": "30.09 kB"
"maxSize": "29.89 kB"
},
{
"path": "./dist/size-rollup-m.js",
"maxSize": "4.68 kB"
},
{
"path": "./dist/size-rollup-dom-animation.js",
"maxSize": "14.95 kB"
"maxSize": "14.83 kB"
},
{
"path": "./dist/size-rollup-dom-max.js",
"maxSize": "25.85 kB"
"maxSize": "25.65 kB"
},
{
"path": "./dist/size-webpack-m.js",
"maxSize": "4.8 kB"
},
{
"path": "./dist/size-webpack-dom-animation.js",
"maxSize": "18.96 kB"
"maxSize": "18.85 kB"
},
{
"path": "./dist/size-webpack-dom-max.js",
"maxSize": "30.73 kB"
"maxSize": "30.5 kB"
}
],
"gitHead": "ee87da357b48f83024e97e581157a5d6f620ce30"
9 changes: 3 additions & 6 deletions packages/framer-motion/src/animation/index.ts
Original file line number Diff line number Diff line change
@@ -116,16 +116,13 @@ export const createMotionValueAnimation = (
options.repeatDelay = secondsToMilliseconds(options.repeatDelay)
}

const visualElement = value.owner
const element = visualElement && visualElement.current

/**
* Animate via WAAPI if possible.
*/
if (
visualElement &&
element instanceof HTMLElement &&
!visualElement?.getProps().onUpdate
value.owner &&
value.owner.current instanceof HTMLElement &&
!value.owner.getProps().onUpdate
) {
const acceleratedAnimation = createAcceleratedAnimation(
value,
Original file line number Diff line number Diff line change
@@ -81,7 +81,12 @@ export function animate<V = number>({

let state = { done: false, value: origin }

if ((animator as any).needsInterpolation?.(origin, target)) {
/**
* If this value needs interpolation (ie is non-numerical), set up an interpolator.
* TODO: Keyframes animation also performs this step. This could be removed so it only happens here.
*/
const { needsInterpolation } = animator as any
if (needsInterpolation && needsInterpolation(origin, target)) {
interpolateFromNumber = interpolate([0, 100], [origin, target], {
clamp: false,
}) as (t: number) => V
Original file line number Diff line number Diff line change
@@ -35,16 +35,16 @@ export function inertia({
}

function startAnimation(options: Partial<AnimationOptions<number>>) {
currentAnimation?.stop()
currentAnimation && currentAnimation.stop()

currentAnimation = animate({
keyframes: [0, 1],
velocity: 0,
...options,
driver,
onUpdate: (v: number) => {
onUpdate?.(v)
options.onUpdate?.(v)
onUpdate && onUpdate(v)
options.onUpdate && options.onUpdate(v)
},
onComplete,
onStop,
@@ -109,6 +109,6 @@ export function inertia({
}

return {
stop: () => currentAnimation?.stop(),
stop: () => currentAnimation && currentAnimation.stop(),
}
}
Original file line number Diff line number Diff line change
@@ -88,7 +88,8 @@ export class VisualElementDragControls {
/**
* Don't start dragging if this component is exiting
*/
if (this.visualElement.presenceContext?.isPresent === false) return
const { presenceContext } = this.visualElement
if (presenceContext && presenceContext.isPresent === false) return

const onSessionStart = (event: PointerEvent) => {
// Stop any animations on both axis values immediately. This allows the user to throw and catch
@@ -133,24 +134,25 @@ export class VisualElementDragControls {
* If the MotionValue is a percentage value convert to px
*/
if (percent.test(current)) {
const measuredAxis =
this.visualElement.projection?.layout?.layoutBox[axis]
const { projection } = this.visualElement

if (measuredAxis) {
const length = calcLength(measuredAxis)
current = length * (parseFloat(current) / 100)
if (projection && projection.layout) {
const measuredAxis = projection.layout.layoutBox[axis]

if (measuredAxis) {
const length = calcLength(measuredAxis)
current = length * (parseFloat(current) / 100)
}
}
}

this.originPoint[axis] = current
})

// Fire onDragStart event
onDragStart?.(event, info)
this.visualElement.animationState?.setActive(
AnimationType.Drag,
true
)
onDragStart && onDragStart(event, info)
const { animationState } = this.visualElement
animationState && animationState.setActive(AnimationType.Drag, true)
}

const onMove = (event: PointerEvent, info: PanInfo) => {
@@ -173,7 +175,7 @@ export class VisualElementDragControls {

// If we've successfully set a direction, notify listener
if (this.currentDirection !== null) {
onDirectionLock?.(this.currentDirection)
onDirectionLock && onDirectionLock(this.currentDirection)
}

return
@@ -195,7 +197,7 @@ export class VisualElementDragControls {
* This must fire after the render call as it might trigger a state
* change which itself might trigger a layout update.
*/
onDrag?.(event, info)
onDrag && onDrag(event, info)
}

const onSessionEnd = (event: PointerEvent, info: PanInfo) =>
@@ -222,15 +224,16 @@ export class VisualElementDragControls {
this.startAnimation(velocity)

const { onDragEnd } = this.getProps()
onDragEnd?.(event, info)
onDragEnd && onDragEnd(event, info)
}

private cancel() {
this.isDragging = false
if (this.visualElement.projection) {
this.visualElement.projection.isAnimationBlocked = false
const { projection, animationState } = this.visualElement
if (projection) {
projection.isAnimationBlocked = false
}
this.panSession?.end()
this.panSession && this.panSession.end()
this.panSession = undefined

const { dragPropagation } = this.getProps()
@@ -239,7 +242,7 @@ export class VisualElementDragControls {
this.openGlobalLock = null
}

this.visualElement.animationState?.setActive(AnimationType.Drag, false)
animationState && animationState.setActive(AnimationType.Drag, false)
}

private updateAxis(axis: DragDirection, _point: Point, offset?: Point) {
@@ -370,7 +373,7 @@ export class VisualElementDragControls {
return
}

let transition = constraints?.[axis] || {}
let transition = (constraints && constraints[axis]) || {}

if (dragSnapToOrigin) transition = { min: 0, max: 0 }

@@ -427,13 +430,14 @@ export class VisualElementDragControls {
*/
private getAxisMotionValue(axis: DragDirection) {
const dragKey = "_drag" + axis.toUpperCase()
const externalMotionValue = this.visualElement.getProps()[dragKey]
const props = this.visualElement.getProps()
const externalMotionValue = props[dragKey]

return externalMotionValue
? externalMotionValue
: this.visualElement.getValue(
axis,
this.visualElement.getProps().initial?.[axis] || 0
(props.initial && props.initial[axis]) || 0
)
}

@@ -497,7 +501,7 @@ export class VisualElementDragControls {
this.visualElement.current.style.transform = transformTemplate
? transformTemplate({}, "")
: "none"
projection.root?.updateScroll()
projection.root && projection.root.updateScroll()
projection.updateLayout()
this.resolveConstraints()

@@ -549,7 +553,7 @@ export class VisualElementDragControls {
)

if (projection && !projection!.layout) {
projection.root?.updateScroll()
projection.root && projection.root.updateScroll()
projection.updateLayout()
}

@@ -590,7 +594,7 @@ export class VisualElementDragControls {
stopResizeListener()
stopPointerListener()
stopMeasureLayoutListener()
stopLayoutUpdateListener?.()
stopLayoutUpdateListener && stopLayoutUpdateListener()
}
}

Original file line number Diff line number Diff line change
@@ -91,7 +91,8 @@ class MeasureLayoutWithContext extends React.Component<MeasureProps> {
* be in charge of the safe to remove. Otherwise we call it here.
*/
sync.postRender(() => {
if (!projection.getStack()?.members.length) {
const stack = projection.getStack()
if (!stack || !stack.members.length) {
this.safeToRemove()
}
})
@@ -121,15 +122,16 @@ class MeasureLayoutWithContext extends React.Component<MeasureProps> {

if (projection) {
projection.scheduleCheckAfterUnmount()
if (layoutGroup?.group) layoutGroup.group.remove(projection)
if (promoteContext?.deregister)
if (layoutGroup && layoutGroup.group)
layoutGroup.group.remove(projection)
if (promoteContext && promoteContext.deregister)
promoteContext.deregister(projection)
}
}

safeToRemove() {
const { safeToRemove } = this.props
safeToRemove?.()
safeToRemove && safeToRemove()
}

render() {
14 changes: 13 additions & 1 deletion packages/framer-motion/src/projection/geometry/delta-apply.ts
Original file line number Diff line number Diff line change
@@ -89,7 +89,19 @@ export function applyTreeDeltas(
for (let i = 0; i < treeLength; i++) {
node = treePath[i]
delta = node.projectionDelta
if ((node.instance as any)?.style?.display === "contents") continue

/**
* TODO: Prefer to remove this, but currently we have motion components with
* display: contents in Framer.
*/
const instance = node.instance as any
if (
instance &&
instance.style &&
instance.style.display === "contents"
) {
continue
}

if (
isSharedTransition &&
Loading

0 comments on commit 211446c

Please sign in to comment.