From f998c8300252735fe9d0269383ea10da7fdefcd5 Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Tue, 11 Jan 2022 11:59:25 +0100 Subject: [PATCH 1/3] Fixing removal of transform template --- CHANGELOG.md | 6 ++ src/motion/__tests__/component.test.tsx | 55 ----------- .../__tests__/transformTemplate.test.tsx | 97 +++++++++++++++++++ src/render/html/utils/build-styles.ts | 2 + src/render/index.ts | 4 + 5 files changed, 109 insertions(+), 55 deletions(-) create mode 100644 src/motion/__tests__/transformTemplate.test.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 4acb6e789d..b86b2c3469 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/). +## [5.5.8] 2022-01-12 + +### Fixed + +- Removing `transformTemplate` prop correctly rerenders element. + ## [5.5.7] 2022-01-11 ### Fixed diff --git a/src/motion/__tests__/component.test.tsx b/src/motion/__tests__/component.test.tsx index 296a9a0456..0f23badd8c 100644 --- a/src/motion/__tests__/component.test.tsx +++ b/src/motion/__tests__/component.test.tsx @@ -257,20 +257,6 @@ describe("motion component rendering and styles", () => { expect(container.firstChild).toHaveStyle("background-color: #f00") }) - it("applies transformTemplate on initial render", () => { - const { container } = render( - - `translateY(${x}) ${generated}` - } - /> - ) - expect(container.firstChild).toHaveStyle( - "transform: translateY(10px) translateX(10px) translateZ(0)" - ) - }) - it("renders transform", () => { const { container } = render( @@ -278,47 +264,6 @@ describe("motion component rendering and styles", () => { expect(container.firstChild).toHaveStyle("transform: translateX(10px)") }) - it("applies updated transformTemplate", () => { - const { container, rerender } = render( - - `translateY(${x}) ${generated}` - } - /> - ) - expect(container.firstChild).toHaveStyle( - "transform: translateY(10px) translateX(10px) translateZ(0)" - ) - - rerender( - { - const newX = typeof x === "string" ? parseFloat(x) : x - return `translateY(${(newX as number) * 2}px) ${generated}` - }} - /> - ) - expect(container.firstChild).toHaveStyle( - "transform: translateY(20px) translateX(10px) translateZ(0)" - ) - }) - - it("renders transform with transformTemplate", () => { - const { container } = render( - - `translateY(20px) ${generated}` - } - style={{ x: 10 }} - /> - ) - expect(container.firstChild).toHaveStyle( - "transform: translateY(20px) translateX(10px) translateZ(0)" - ) - }) - it("filters MotionProps from the DOM", () => { const { container } = render() expect(container.firstChild).not.toHaveAttribute("initial") diff --git a/src/motion/__tests__/transformTemplate.test.tsx b/src/motion/__tests__/transformTemplate.test.tsx new file mode 100644 index 0000000000..0e5e97c317 --- /dev/null +++ b/src/motion/__tests__/transformTemplate.test.tsx @@ -0,0 +1,97 @@ +import { render } from "../../../jest.setup" +import { motion } from "../../" +import * as React from "react" +import sync from "framesync" + +describe("transformTemplate", () => { + it("applies transformTemplate on initial render", () => { + const { container } = render( + + `translateY(${x}) ${generated}` + } + /> + ) + expect(container.firstChild).toHaveStyle( + "transform: translateY(10px) translateX(10px) translateZ(0)" + ) + }) + + it("applies updated transformTemplate", () => { + const { container, rerender } = render( + + `translateY(${x}) ${generated}` + } + /> + ) + expect(container.firstChild).toHaveStyle( + "transform: translateY(10px) translateX(10px) translateZ(0)" + ) + + rerender( + { + const newX = typeof x === "string" ? parseFloat(x) : x + return `translateY(${(newX as number) * 2}px) ${generated}` + }} + /> + ) + expect(container.firstChild).toHaveStyle( + "transform: translateY(20px) translateX(10px) translateZ(0)" + ) + }) + + it("renders transform with transformTemplate", () => { + const { container } = render( + + `translateY(20px) ${generated}` + } + style={{ x: 10 }} + /> + ) + expect(container.firstChild).toHaveStyle( + "transform: translateY(20px) translateX(10px) translateZ(0)" + ) + }) + + it("renders transformTemplate without any transform", () => { + const { container } = render( + `translateY(20px)`} /> + ) + expect(container.firstChild).toHaveStyle("transform: translateY(20px)") + }) + + it("removes transformTemplate if prop is removed and translate is defined", async () => { + const { container, rerender } = render( + `translateY(20px)`} + style={{ x: 10 }} + /> + ) + expect(container.firstChild).toHaveStyle("transform: translateY(20px)") + rerender() + + await new Promise((resolve) => sync.postRender(resolve)) + + expect(container.firstChild).toHaveStyle( + "transform: translateX(20px) translateZ(0)" + ) + }) + + it("removes transformTemplate if prop is removed", async () => { + const { container, rerender } = render( + `translateY(20px)`} /> + ) + expect(container.firstChild).toHaveStyle("transform: translateY(20px)") + rerender() + + await new Promise((resolve) => sync.postRender(resolve)) + + expect(container.firstChild).toHaveStyle("transform: none") + }) +}) diff --git a/src/render/html/utils/build-styles.ts b/src/render/html/utils/build-styles.ts index 60026d9757..71f45100f9 100644 --- a/src/render/html/utils/build-styles.ts +++ b/src/render/html/utils/build-styles.ts @@ -79,6 +79,8 @@ export function buildHTMLStyles( ) } else if (transformTemplate) { style.transform = transformTemplate({}, "") + } else if (style.transform) { + style.transform = "none" } if (hasTransformOrigin) { diff --git a/src/render/index.ts b/src/render/index.ts index 1c421eb978..6810681674 100644 --- a/src/render/index.ts +++ b/src/render/index.ts @@ -449,6 +449,10 @@ export const visualElement = * added to our map, old ones removed, and listeners updated. */ setProps(newProps) { + if (newProps.transformTemplate || props.transformTemplate) { + element.scheduleRender() + } + props = newProps lifecycles.updatePropListeners(newProps) From 6657b7093eb989ba41df0fa0774cd69d6b420eaa Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Tue, 11 Jan 2022 11:59:54 +0100 Subject: [PATCH 2/3] Updating test --- .../__tests__/transformTemplate.test.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/motion/__tests__/transformTemplate.test.tsx b/src/motion/__tests__/transformTemplate.test.tsx index 0e5e97c317..1d581c504c 100644 --- a/src/motion/__tests__/transformTemplate.test.tsx +++ b/src/motion/__tests__/transformTemplate.test.tsx @@ -66,7 +66,7 @@ describe("transformTemplate", () => { expect(container.firstChild).toHaveStyle("transform: translateY(20px)") }) - it("removes transformTemplate if prop is removed and translate is defined", async () => { + it("removes transformTemplate if prop is removed and transform is changed", async () => { const { container, rerender } = render( `translateY(20px)`} @@ -83,6 +83,23 @@ describe("transformTemplate", () => { ) }) + it("removes transformTemplate if prop is removed and transform is not changed", async () => { + const { container, rerender } = render( + `translateY(20px)`} + style={{ x: 10 }} + /> + ) + expect(container.firstChild).toHaveStyle("transform: translateY(20px)") + rerender() + + await new Promise((resolve) => sync.postRender(resolve)) + + expect(container.firstChild).toHaveStyle( + "transform: translateX(10px) translateZ(0)" + ) + }) + it("removes transformTemplate if prop is removed", async () => { const { container, rerender } = render( `translateY(20px)`} /> From 9af14441d727a9cf77d21242b657688c6be9ea2d Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Tue, 11 Jan 2022 12:07:57 +0100 Subject: [PATCH 3/3] Fixing tests --- src/render/html/utils/build-styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/render/html/utils/build-styles.ts b/src/render/html/utils/build-styles.ts index 71f45100f9..7b0f270633 100644 --- a/src/render/html/utils/build-styles.ts +++ b/src/render/html/utils/build-styles.ts @@ -79,7 +79,7 @@ export function buildHTMLStyles( ) } else if (transformTemplate) { style.transform = transformTemplate({}, "") - } else if (style.transform) { + } else if (!latestValues.transform && style.transform) { style.transform = "none" }