diff --git a/package-lock.json b/package-lock.json index 2dfa74dab..e664bbed3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23643,7 +23643,7 @@ "dependencies": { "async": { "version": "1.5.2", - "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", "dev": true } @@ -29512,6 +29512,12 @@ "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=", "dev": true }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", + "dev": true + }, "resolve": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", diff --git a/package.json b/package.json index f132b9537..3d276d30b 100644 --- a/package.json +++ b/package.json @@ -313,6 +313,7 @@ "relay-compiler-language-typescript": "^4.1.0", "relay-local-schema": "^0.8.0", "relay-runtime": "^4.0.0", + "resize-observer-polyfill": "^1.5.1", "sane": "^4.1.0", "shallow-equals": "^1.0.0", "simplemde": "^1.11.2", diff --git a/src/core/client/auth/App/App.tsx b/src/core/client/auth/App/App.tsx index 33badaed1..7bf1c3243 100644 --- a/src/core/client/auth/App/App.tsx +++ b/src/core/client/auth/App/App.tsx @@ -1,7 +1,9 @@ import React, { FunctionComponent } from "react"; +import { useResizeObserver } from "coral-framework/hooks"; import { PropTypesOf } from "coral-framework/types"; +import resizePopup from "../dom/resizePopup"; import AddEmailAddress from "../views/AddEmailAddress"; import CreatePassword from "../views/CreatePassword"; import CreateUsername from "../views/CreateUsername"; @@ -47,11 +49,16 @@ const render = ({ view, auth, viewer }: AppProps) => { } }; -const App: FunctionComponent = props => ( - <> - {process.env.NODE_ENV !== "test" && } -
{render(props)}
- -); +const App: FunctionComponent = props => { + const ref = useResizeObserver(entry => { + resizePopup(); + }); + return ( +
+ {process.env.NODE_ENV !== "test" && } +
{render(props)}
+
+ ); +}; export default App; diff --git a/src/core/client/auth/App/__snapshots__/App.spec.tsx.snap b/src/core/client/auth/App/__snapshots__/App.spec.tsx.snap index a80bb0ca6..783e0f3f2 100644 --- a/src/core/client/auth/App/__snapshots__/App.spec.tsx.snap +++ b/src/core/client/auth/App/__snapshots__/App.spec.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders sign in 1`] = ` - +
- +
`; diff --git a/src/core/client/auth/components/AutoHeight.tsx b/src/core/client/auth/components/AutoHeight.tsx deleted file mode 100644 index c94fcacce..000000000 --- a/src/core/client/auth/components/AutoHeight.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Component } from "react"; - -import resizePopup from "../dom/resizePopup"; - -/** - * This component adapts the window height to the current body size - * when this is mounted or updated. - */ -export default class AutoHeight extends Component { - private updateWindowSize() { - window.requestAnimationFrame(() => setTimeout(resizePopup, 0)); - } - - public componentDidMount() { - this.updateWindowSize(); - } - - public componentDidUpdate() { - this.updateWindowSize(); - } - - public render() { - return null; - } -} diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx index ff7a4252f..f8229b6d1 100644 --- a/src/core/client/auth/index.tsx +++ b/src/core/client/auth/index.tsx @@ -12,16 +12,15 @@ import localesData from "./locales"; import "coral-ui/theme/variables.css"; /** - * Adapt popup height to current content every 100ms. + * Adapt popup height to current content every 200ms. * * The goal is to smooth out height inconsistensies e.g. when fonts * are switched out or other resources being loaded that React has no influence * over. * - * This works in addition to which - * adapt popup height when React does an update. + * This works in addition to the ResizeObserver in App.tsx */ -function pollPopupHeight(interval: number = 100) { +function pollPopupHeight(interval: number = 200) { setTimeout(() => { window.requestAnimationFrame(() => { resizePopup(); diff --git a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap index b2f04bdf2..c87ec3bac 100644 --- a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap @@ -341,171 +341,173 @@ Your email address will be used to: exports[`renders addEmailAddress view 1`] = `
-
+
-
-

- Add Email Address -

-
-
-
-
-
-

- For your added security, we require users to add an email address to their accounts. -Your email address will be used to: -

-
    -
  • -
    - -
    -
    -
    - Receive updates regarding any changes to your account -(email address, username, password, etc.) -
    -
    -
    • -
  • -
    - -
    -
    -
    - Allow you to download your comments. -
    -
    -
    • -
  • -
    - -
    -
    -
    - Send comment notifications that you have chosen to receive. -
    -
    -
    • -
-
- -
- -
-
-
- -
- -
-
- +
-
+
+
+
+
+

+ For your added security, we require users to add an email address to their accounts. +Your email address will be used to: +

+
    +
  • +
    + +
    +
    +
    + Receive updates regarding any changes to your account +(email address, username, password, etc.) +
    +
    +
    • +
  • +
    + +
    +
    +
    + Allow you to download your comments. +
    +
    +
    • +
  • +
    + +
    +
    +
    + Send comment notifications that you have chosen to receive. +
    +
    +
    • +
+
+ +
+ +
+
+
+ +
+ +
+
+ +
+
+
diff --git a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap index d9222eba9..236e39e9e 100644 --- a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap @@ -98,104 +98,106 @@ we require users to create a password. exports[`renders createPassword view 1`] = `
-
+
-
-

- Create Password -

-
-
-
-
-
+

+ Create Password +

+
+
+
+ -

- To protect against unauthorized changes to your account, -we require users to create a password. -

-

- Must be at least 8 characters + To protect against unauthorized changes to your account, +we require users to create a password.

-
+ Password + +

+ Must be at least 8 characters +

+
-
-
+
- -
- + +
diff --git a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap index bb65a0538..2914ab079 100644 --- a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap @@ -75,81 +75,83 @@ exports[`checks for invalid username 1`] = ` exports[`renders createUsername view 1`] = `
-
+
-
-

- Create Username -

-
-
-
-
-
-

- Your username is an identifier that will appear on all of your comments. -

-
- -

- You may use “_” and “.” Spaces not permitted. -

-
- -
-
- +
-
+
+
+
+
+

+ Your username is an identifier that will appear on all of your comments. +

+
+ +

+ You may use “_” and “.” Spaces not permitted. +

+
+ +
+
+ +
+
+
diff --git a/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap index 5a414e677..fb73586d0 100644 --- a/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap @@ -2,94 +2,96 @@ exports[`renders forgot password view 1`] = `
-
+
-
-

- Forgot Password? -

-
-
- -
-
-
-

+

- Enter your email address below and we will send you a link to -reset your password. -

-
- -
- -
-
- + Forgot Password? +

-
+
+ +
+
+
+

+ Enter your email address below and we will send you a link to +reset your password. +

+
+ +
+ +
+
+ +
+
+
diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap index 455992f50..1cf3d72af 100644 --- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap @@ -697,173 +697,175 @@ exports[`checks for invalid email 1`] = ` exports[`renders sign in view 1`] = `
-
+
-
-

- Sign In -

-

- to join the conversation -

-
-
-
-
-
- - Don't have an account?  - - - Sign Up - -
-
-
-
-
+
+

+ Sign In +

+

+ to join the conversation +

+
+
+
+
+ + Don't have an account?  + + + Sign Up + +
+
+
+
+
+
-
- -
-
-
- -
+
-
- -
-

- +

+
- Forgot your password? - -

+ +
+ +
+
+
+
-
- -
- -
+ + + Sign in with Email + + +
+ +
+
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap index d67c39464..3420f18a5 100644 --- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap @@ -1808,194 +1808,196 @@ exports[`checks for too short username 1`] = ` exports[`renders sign up form 1`] = `
-
+
-
-

- Sign Up -

-

- to join the conversation -

-
-
-
-
-
- - Already have an account?  - - - Sign In - -
-
-
-
-
+
+

+ Sign Up +

+

+ to join the conversation +

+
+
+
+
+ + Already have an account?  + + + Sign In + +
+
+
+
+
+
-
- -
-
-
- -

- You may use “_” and “.” Spaces not permitted. -

-
- -
-
-
- -

- Must be at least 8 characters -

-
+
+
+
+
+ +

+ You may use “_” and “.” Spaces not permitted. +

+
+ +
+
+
+ +

+ Must be at least 8 characters +

+
-
-
- -
- -
+ + + Sign up with Email + + +
+ +
+
diff --git a/src/core/client/auth/test/accountCompletion.spec.tsx b/src/core/client/auth/test/accountCompletion.spec.tsx index 41cbb7f5f..e7c8d9810 100644 --- a/src/core/client/auth/test/accountCompletion.spec.tsx +++ b/src/core/client/auth/test/accountCompletion.spec.tsx @@ -62,7 +62,6 @@ beforeEach(async () => { }); afterEach(async () => { - await wait(() => expect(windowMock.resizeStub.called).toBe(true)); windowMock.restore(); }); diff --git a/src/core/client/auth/test/addEmailAddress.spec.tsx b/src/core/client/auth/test/addEmailAddress.spec.tsx index 399c9c6b4..d6d1c1771 100644 --- a/src/core/client/auth/test/addEmailAddress.spec.tsx +++ b/src/core/client/auth/test/addEmailAddress.spec.tsx @@ -11,9 +11,6 @@ import { import create from "./create"; import { settings } from "./fixtures"; -import mockWindow from "./mockWindow"; - -let windowMock: ReturnType; async function createTestRenderer( customResolver: any = {}, @@ -60,15 +57,6 @@ async function createTestRenderer( }; } -beforeEach(async () => { - windowMock = mockWindow(); -}); - -afterEach(async () => { - await wait(() => expect(windowMock.resizeStub.called).toBe(true)); - windowMock.restore(); -}); - it("renders addEmailAddress view", async () => { const { root } = await createTestRenderer(); expect(toJSON(root)).toMatchSnapshot(); diff --git a/src/core/client/auth/test/createPassword.spec.tsx b/src/core/client/auth/test/createPassword.spec.tsx index 983d82280..1e06ed27c 100644 --- a/src/core/client/auth/test/createPassword.spec.tsx +++ b/src/core/client/auth/test/createPassword.spec.tsx @@ -11,9 +11,6 @@ import { import create from "./create"; import { settings } from "./fixtures"; -import mockWindow from "./mockWindow"; - -let windowMock: ReturnType; async function createTestRenderer( customResolver: any = {}, @@ -56,15 +53,6 @@ async function createTestRenderer( }; } -beforeEach(async () => { - windowMock = mockWindow(); -}); - -afterEach(async () => { - await wait(() => expect(windowMock.resizeStub.called).toBe(true)); - windowMock.restore(); -}); - it("renders createPassword view", async () => { const { root } = await createTestRenderer(); expect(toJSON(root)).toMatchSnapshot(); diff --git a/src/core/client/auth/test/createUsername.spec.tsx b/src/core/client/auth/test/createUsername.spec.tsx index 0bcfe7a4f..766dbca7c 100644 --- a/src/core/client/auth/test/createUsername.spec.tsx +++ b/src/core/client/auth/test/createUsername.spec.tsx @@ -11,9 +11,6 @@ import { import create from "./create"; import { settings } from "./fixtures"; -import mockWindow from "./mockWindow"; - -let windowMock: ReturnType; async function createTestRenderer( customResolver: any = {}, @@ -56,15 +53,6 @@ async function createTestRenderer( }; } -beforeEach(async () => { - windowMock = mockWindow(); -}); - -afterEach(async () => { - await wait(() => expect(windowMock.resizeStub.called).toBe(true)); - windowMock.restore(); -}); - it("renders createUsername view", async () => { const { root } = await createTestRenderer(); expect(toJSON(root)).toMatchSnapshot(); diff --git a/src/core/client/auth/test/forgotPassword.spec.tsx b/src/core/client/auth/test/forgotPassword.spec.tsx index 3d39552b7..cc76a07d7 100644 --- a/src/core/client/auth/test/forgotPassword.spec.tsx +++ b/src/core/client/auth/test/forgotPassword.spec.tsx @@ -6,7 +6,6 @@ import { act, createResolversStub, CreateTestRendererParams, - wait, waitForElement, within, } from "coral-framework/testHelpers"; @@ -59,7 +58,6 @@ beforeEach(async () => { }); afterEach(async () => { - await wait(() => expect(windowMock.resizeStub.called).toBe(true)); windowMock.restore(); }); diff --git a/src/core/client/auth/test/navigation.spec.tsx b/src/core/client/auth/test/navigation.spec.tsx index 7214fd219..fb759f97b 100644 --- a/src/core/client/auth/test/navigation.spec.tsx +++ b/src/core/client/auth/test/navigation.spec.tsx @@ -1,11 +1,10 @@ import { ReactTestRenderer } from "react-test-renderer"; import sinon from "sinon"; -import { wait, waitForElement, within } from "coral-framework/testHelpers"; +import { waitForElement, within } from "coral-framework/testHelpers"; import create from "./create"; import { settings } from "./fixtures"; -import mockWindow from "./mockWindow"; async function createTestRenderer( initialView: string @@ -26,16 +25,6 @@ async function createTestRenderer( return testRenderer; } -let windowMock: ReturnType; -beforeEach(() => { - windowMock = mockWindow(); -}); - -afterEach(async () => { - await wait(() => expect(windowMock.resizeStub.called).toBe(true)); - windowMock.restore(); -}); - it("renders sign in form", async () => { const testRenderer = await createTestRenderer("SIGN_IN"); await waitForElement(() => diff --git a/src/core/client/auth/test/signIn.spec.tsx b/src/core/client/auth/test/signIn.spec.tsx index ed6cb605c..c8a1e884b 100644 --- a/src/core/client/auth/test/signIn.spec.tsx +++ b/src/core/client/auth/test/signIn.spec.tsx @@ -12,9 +12,6 @@ import { import create from "./create"; import { settings } from "./fixtures"; -import mockWindow from "./mockWindow"; - -let windowMock: ReturnType; async function createTestRenderer( customResolver: any = {}, @@ -54,15 +51,6 @@ async function createTestRenderer( }; } -beforeEach(async () => { - windowMock = mockWindow(); -}); - -afterEach(async () => { - await wait(() => expect(windowMock.resizeStub.called).toBe(true)); - windowMock.restore(); -}); - it("renders sign in view", async () => { const { testRenderer } = await createTestRenderer(); expect(testRenderer.toJSON()).toMatchSnapshot(); diff --git a/src/core/client/auth/test/signUp.spec.tsx b/src/core/client/auth/test/signUp.spec.tsx index 0eab6eb51..9506490ca 100644 --- a/src/core/client/auth/test/signUp.spec.tsx +++ b/src/core/client/auth/test/signUp.spec.tsx @@ -11,9 +11,6 @@ import { import create from "./create"; import { settings } from "./fixtures"; -import mockWindow from "./mockWindow"; - -let windowMock: ReturnType; async function createTestRenderer(customResolver: any = {}) { const resolvers = { @@ -49,15 +46,6 @@ async function createTestRenderer(customResolver: any = {}) { }; } -beforeEach(async () => { - windowMock = mockWindow(); -}); - -afterEach(async () => { - await wait(() => expect(windowMock.resizeStub.called).toBe(true)); - windowMock.restore(); -}); - it("renders sign up form", async () => { const { testRenderer } = await createTestRenderer(); expect(testRenderer.toJSON()).toMatchSnapshot(); diff --git a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx index b88a6f543..a88ffb695 100644 --- a/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx +++ b/src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx @@ -4,7 +4,6 @@ import React, { Component } from "react"; import { Form } from "react-final-form"; import { Bar, Title } from "coral-auth/components//Header"; -import AutoHeight from "coral-auth/components/AutoHeight"; import ConfirmEmailField from "coral-auth/components/ConfirmEmailField"; import EmailField from "coral-auth/components/EmailField"; import Main from "coral-auth/components/Main"; @@ -51,7 +50,6 @@ class AddEmailAddressContainer extends Component {
{({ handleSubmit, submitting, submitError }) => ( - diff --git a/src/core/client/auth/views/CreatePassword/CreatePassword.tsx b/src/core/client/auth/views/CreatePassword/CreatePassword.tsx index d431e479c..eabe1276d 100644 --- a/src/core/client/auth/views/CreatePassword/CreatePassword.tsx +++ b/src/core/client/auth/views/CreatePassword/CreatePassword.tsx @@ -4,7 +4,6 @@ import React, { Component } from "react"; import { Form } from "react-final-form"; import { Bar, Title } from "coral-auth/components//Header"; -import AutoHeight from "coral-auth/components/AutoHeight"; import Main from "coral-auth/components/Main"; import SetPasswordField from "coral-auth/components/SetPasswordField"; import { OnSubmit } from "coral-framework/lib/form"; @@ -50,7 +49,6 @@ class CreatePasswordContainer extends Component { {({ handleSubmit, submitting, submitError }) => ( - diff --git a/src/core/client/auth/views/CreateUsername/CreateUsername.tsx b/src/core/client/auth/views/CreateUsername/CreateUsername.tsx index 6d893a77b..9e4e46004 100644 --- a/src/core/client/auth/views/CreateUsername/CreateUsername.tsx +++ b/src/core/client/auth/views/CreateUsername/CreateUsername.tsx @@ -4,7 +4,6 @@ import React, { Component } from "react"; import { Form } from "react-final-form"; import { Bar, Title } from "coral-auth/components//Header"; -import AutoHeight from "coral-auth/components/AutoHeight"; import Main from "coral-auth/components/Main"; import UsernameField from "coral-auth/components/UsernameField"; import { OnSubmit } from "coral-framework/lib/form"; @@ -51,7 +50,6 @@ class CreateUsernameContainer extends Component { {({ handleSubmit, submitting, submitError }) => ( - diff --git a/src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx b/src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx index a8ce0b206..ca95897f2 100644 --- a/src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx +++ b/src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx @@ -3,7 +3,6 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent, useCallback } from "react"; import { Field, Form } from "react-final-form"; -import AutoHeight from "coral-auth/components/AutoHeight"; import { Bar, SubBar, Title } from "coral-auth/components/Header"; import Main from "coral-auth/components/Main"; import { getViewURL } from "coral-auth/helpers"; @@ -94,7 +93,6 @@ const ForgotPasswordForm: FunctionComponent = ({ {({ handleSubmit, submitting, submitError }) => ( - diff --git a/src/core/client/auth/views/SignIn/SignIn.tsx b/src/core/client/auth/views/SignIn/SignIn.tsx index 50fdda9a1..fcd6acd97 100644 --- a/src/core/client/auth/views/SignIn/SignIn.tsx +++ b/src/core/client/auth/views/SignIn/SignIn.tsx @@ -1,7 +1,6 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; -import AutoHeight from "coral-auth/components/AutoHeight"; import { Bar, SubBar, Subtitle, Title } from "coral-auth/components/Header"; import Main from "coral-auth/components/Main"; import OrSeparator from "coral-auth/components/OrSeparator"; @@ -46,7 +45,6 @@ const SignIn: FunctionComponent = ({ facebookEnabled || googleEnabled || oidcEnabled; return (
- } diff --git a/src/core/client/auth/views/SignIn/SignInWithEmail.tsx b/src/core/client/auth/views/SignIn/SignInWithEmail.tsx index a576d0429..204ef8b97 100644 --- a/src/core/client/auth/views/SignIn/SignInWithEmail.tsx +++ b/src/core/client/auth/views/SignIn/SignInWithEmail.tsx @@ -2,7 +2,6 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import { Field, Form } from "react-final-form"; -import AutoHeight from "coral-auth/components/AutoHeight"; import EmailField from "coral-auth/components/EmailField"; import { PasswordField } from "coral-framework/components"; import { @@ -39,7 +38,6 @@ const SignInWithEmail: FunctionComponent = props => { {({ handleSubmit, submitting, submitError }) => ( - {submitError && ( diff --git a/src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap b/src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap index e3aae1a5b..7b7800ce1 100644 --- a/src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap +++ b/src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap @@ -4,7 +4,6 @@ exports[`renders correctly 1`] = `
- } @@ -65,7 +64,6 @@ exports[`renders error 1`] = `
- } @@ -132,7 +130,6 @@ exports[`renders without email login 1`] = `
- } diff --git a/src/core/client/auth/views/SignUp/SignUp.tsx b/src/core/client/auth/views/SignUp/SignUp.tsx index d3e5880dc..b9950bceb 100644 --- a/src/core/client/auth/views/SignUp/SignUp.tsx +++ b/src/core/client/auth/views/SignUp/SignUp.tsx @@ -2,7 +2,6 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import { Bar, SubBar, Subtitle, Title } from "coral-auth/components//Header"; -import AutoHeight from "coral-auth/components/AutoHeight"; import Main from "coral-auth/components/Main"; import OrSeparator from "coral-auth/components/OrSeparator"; import { PropTypesOf } from "coral-framework/types"; @@ -43,7 +42,6 @@ const SignUp: FunctionComponent = ({ facebookEnabled || googleEnabled || oidcEnabled; return (
- } diff --git a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx b/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx index a662b61f0..9a488217b 100644 --- a/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx +++ b/src/core/client/auth/views/SignUp/SignUpWithEmail.tsx @@ -2,7 +2,6 @@ import { Localized } from "fluent-react/compat"; import React, { FunctionComponent } from "react"; import { Form } from "react-final-form"; -import AutoHeight from "coral-auth/components/AutoHeight"; import EmailField from "coral-auth/components/EmailField"; import SetPasswordField from "coral-auth/components/SetPasswordField"; import UsernameField from "coral-auth/components/UsernameField"; @@ -30,7 +29,6 @@ const SignUp: FunctionComponent = props => { {({ handleSubmit, submitting, submitError }) => ( - {submitError && ( diff --git a/src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap b/src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap index 96b4098f7..419fba3d0 100644 --- a/src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap +++ b/src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap @@ -4,7 +4,6 @@ exports[`renders correctly 1`] = `
- } @@ -65,7 +64,6 @@ exports[`renders without email sign up 1`] = `
- } diff --git a/src/core/client/embed/decorators/withAutoHeight.spec.ts b/src/core/client/embed/decorators/withAutoHeight.spec.ts index 23309a838..14f9a8b9d 100644 --- a/src/core/client/embed/decorators/withAutoHeight.spec.ts +++ b/src/core/client/embed/decorators/withAutoHeight.spec.ts @@ -6,11 +6,7 @@ it("should set height", () => { expect(type).toBe("height"); callback("100"); }, - el: document.createElement("div"), + iframe: document.createElement("iframe"), }; - fakePym.el.innerHTML = "Hello World "; withAutoHeight(fakePym as any); - expect(fakePym.el.innerHTML).toBe( - 'Hello World ' - ); }); diff --git a/src/core/client/embed/decorators/withAutoHeight.ts b/src/core/client/embed/decorators/withAutoHeight.ts index a7d0c9011..b85e20bed 100644 --- a/src/core/client/embed/decorators/withAutoHeight.ts +++ b/src/core/client/embed/decorators/withAutoHeight.ts @@ -5,7 +5,7 @@ const withAutoHeight: Decorator = pym => { let cachedHeight: string; pym.onMessage("height", (height: string) => { if (height !== cachedHeight) { - (pym.el.firstChild! as HTMLElement).style.height = `${height}px`; + pym.iframe.style.height = `${height}px`; cachedHeight = height; } }); diff --git a/src/core/client/framework/hooks/index.ts b/src/core/client/framework/hooks/index.ts index 561e5c58f..1a13b3026 100644 --- a/src/core/client/framework/hooks/index.ts +++ b/src/core/client/framework/hooks/index.ts @@ -3,3 +3,4 @@ export { default as usePrevious } from "./usePrevious"; export { default as useEffectWhenChanged } from "./useEffectWhenChanged"; export { default as useUUID } from "./useUUID"; export { default as useToken } from "./useToken"; +export { default as useResizeObserver } from "./useResizeObserver"; diff --git a/src/core/client/framework/hooks/useResizeObserver.ts b/src/core/client/framework/hooks/useResizeObserver.ts new file mode 100644 index 000000000..b6f18abea --- /dev/null +++ b/src/core/client/framework/hooks/useResizeObserver.ts @@ -0,0 +1,28 @@ +import { useEffect, useRef } from "react"; +import ResizeObserver from "resize-observer-polyfill"; + +export default function useResizeObserver( + cb: (entry: ResizeObserverEntry) => void +) { + const ref = useRef(null); + useEffect(() => { + const element = ref.current; + if (element) { + const resizeObserver = new ResizeObserver(entries => { + if (!Array.isArray(entries)) { + return; + } + if (entries.length === 0) { + return; + } + // We are only observing one element. + const entry = entries[0]; + cb(entry); + }); + resizeObserver.observe(element); + return () => resizeObserver.unobserve(element); + } + return; + }, [ref.current]); + return ref; +} diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx index 35efd238a..755d0ae73 100644 --- a/src/core/client/stream/index.tsx +++ b/src/core/client/stream/index.tsx @@ -16,7 +16,9 @@ async function main() { initLocalState, localesData, userLocales: navigator.languages, - pym: new PymChild({ polling: 100 }), + pym: new PymChild({ + polling: 100, + }), }); const Index: FunctionComponent = () => ( diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.spec.tsx index 6ff983062..8978c7128 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.spec.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.spec.tsx @@ -7,7 +7,7 @@ import sinon from "sinon"; import { timeout } from "coral-common/utils"; import { pureMerge } from "coral-common/utils"; import { createPromisifiedStorage } from "coral-framework/lib/storage"; -import { removeFragmentRefs } from "coral-framework/testHelpers"; +import { removeFragmentRefs, wait } from "coral-framework/testHelpers"; import { DeepPartial, PropTypesOf } from "coral-framework/types"; import { ReplyCommentFormContainer } from "./ReplyCommentFormContainer"; @@ -181,7 +181,7 @@ it("autofocuses", async () => { .findWhere(n => n.prop("rteRef")) .props() .rteRef(rte); - expect(focusStub.calledOnce).toBe(true); + await wait(() => expect(focusStub.calledOnce).toBe(true)); }); it("renders when story has been closed", async () => { diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx index e02b653b9..4abc0ab36 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx @@ -59,6 +59,7 @@ export class ReplyCommentFormContainer extends Component { submitStatus: null, }; private contextKey = `replyCommentFormBody-${this.props.comment.id}`; + private rteRef: CoralRTE | null = null; constructor(props: Props) { super(props); @@ -66,8 +67,10 @@ export class ReplyCommentFormContainer extends Component { } private handleRTERef = (rte: CoralRTE | null) => { - if (rte && this.props.autofocus) { - rte.focus(); + this.rteRef = rte; + if (this.rteRef && this.props.autofocus) { + // Delay focus a bit until iframe had a change to resize. + setTimeout(() => this.rteRef && this.rteRef.focus(), 100); } };