wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-06-27 19:33:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-391] Fix jankiness when opening reply box of last comment in Stream (#2447)

Browse Source 
* feat: add useResizeObserver hook

* fix: stream jumps when clicking on the last reply button when scrolled to the bottom

* chore: use resize observer in auth popup and simplify resize handling

* fix: snapshots and remove resize observer from stream

* fix: focus unmounted rte
This commit is contained in:
Vinh
2019-08-08 02:26:30 +07:00
committed by Kim Gardner
parent b41ddbc22f
commit 3f307002e2
37 changed files with 772 additions and 837 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+7 -1
View File
@@ -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",
package.json
+1
View File
@@ -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",
src/core/client/auth/App/App.tsx
+13 -6
View File
@@ -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<AppProps> = props => (
<>
{process.env.NODE_ENV !== "test" && <ViewRouter />}
<div>{render(props)}</div>
</>
);
const App: FunctionComponent<AppProps> = props => {
const ref = useResizeObserver(entry => {
resizePopup();
});
return (
<div ref={ref}>
{process.env.NODE_ENV !== "test" && <ViewRouter />}
<div>{render(props)}</div>
</div>
);
};
export default App;
src/core/client/auth/App/__snapshots__/App.spec.tsx.snap
+2 -2
View File
@@ -1,11 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders sign in 1`] = `
<React.Fragment>
<div>
<div>
<withContext(withMutation(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(SignInContainer)))))))))
auth={Object {}}
/>
</div>
</React.Fragment>
</div>
`;
src/core/client/auth/components/AutoHeight.tsx
-25
View File
@@ -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;
}
}
src/core/client/auth/index.tsx
+3 -4
View File
@@ -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 <AutoHeight /> 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();
src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+161 -159
View File
@@ -341,171 +341,173 @@ Your email address will be used to:
exports[`renders addEmailAddress view 1`] = `
<div>
<div
data-testid="addEmailAddress-container"
>
<div>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
data-testid="addEmailAddress-container"
>
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Add Email Address
</h1>
</div>
</div>
<div
className="Main-root"
data-testid="addEmailAddress-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
</p>
<ul
className="UnorderedList-root"
>
<li
className="ListItem-root"
>
<div
className="ListItem-leftCol"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</div>
<div>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
</div>
</div>
</li>
<li
className="ListItem-root"
>
<div
className="ListItem-leftCol"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</div>
<div>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Allow you to download your comments.
</div>
</div>
</li>
<li
className="ListItem-root"
>
<div
className="ListItem-leftCol"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</div>
<div>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Send comment notifications that you have chosen to receive.
</div>
</div>
</li>
</ul>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="email"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="confirmEmail"
name="confirmEmail"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Confirm Email Address"
type="text"
value=""
/>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Add Email Address
</button>
</h1>
</div>
</form>
</div>
<div
className="Main-root"
data-testid="addEmailAddress-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
</p>
<ul
className="UnorderedList-root"
>
<li
className="ListItem-root"
>
<div
className="ListItem-leftCol"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</div>
<div>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
</div>
</div>
</li>
<li
className="ListItem-root"
>
<div
className="ListItem-leftCol"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</div>
<div>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Allow you to download your comments.
</div>
</div>
</li>
<li
className="ListItem-root"
>
<div
className="ListItem-leftCol"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
done
</span>
</div>
<div>
<div
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Send comment notifications that you have chosen to receive.
</div>
</div>
</li>
</ul>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="email"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="confirmEmail"
name="confirmEmail"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Confirm Email Address"
type="text"
value=""
/>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Add Email Address
</button>
</div>
</form>
</div>
</div>
</div>
</div>
src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+81 -79
View File
@@ -98,104 +98,106 @@ we require users to create a password.
exports[`renders createPassword view 1`] = `
<div>
<div
data-testid="createPassword-container"
>
<div>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
data-testid="createPassword-container"
>
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Create Password
</h1>
</div>
</div>
<div
className="Main-root"
data-testid="createPassword-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Create Password
</h1>
</div>
</div>
<div
className="Main-root"
data-testid="createPassword-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Must be at least 8 characters
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="PasswordField-fullWidth PasswordField-root"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<div
className="PasswordField-wrapper"
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
role="button"
tabIndex={0}
title="Show password"
className="PasswordField-wrapper"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
role="button"
tabIndex={0}
title="Show password"
>
visibility
</span>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</div>
</div>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Create Password
</button>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Create Password
</button>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
+71 -69
View File
@@ -75,81 +75,83 @@ exports[`checks for invalid username 1`] = `
exports[`renders createUsername view 1`] = `
<div>
<div
data-testid="createUsername-container"
>
<div>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
data-testid="createUsername-container"
>
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Create Username
</h1>
</div>
</div>
<div
className="Main-root"
data-testid="createUsername-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Username"
type="text"
value=""
/>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Create Username
</button>
</h1>
</div>
</form>
</div>
<div
className="Main-root"
data-testid="createUsername-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Username"
type="text"
value=""
/>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Create Username
</button>
</div>
</form>
</div>
</div>
</div>
</div>
src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
+85 -83
View File
@@ -2,94 +2,96 @@
exports[`renders forgot password view 1`] = `
<div>
<div
data-testid="forgotPassword-container"
>
<div>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
data-testid="forgotPassword-container"
>
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Forgot Password?
</h1>
</div>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_IN"
onClick={[Function]}
>
Go back to sign in page
</a>
</div>
</div>
</div>
<div
className="Main-root"
data-testid="forgotPassword-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Enter your email address below and we will send you a link to
reset your password.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="text"
value=""
/>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Send Email
</button>
Forgot Password?
</h1>
</div>
</form>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_IN"
onClick={[Function]}
>
Go back to sign in page
</a>
</div>
</div>
</div>
<div
className="Main-root"
data-testid="forgotPassword-main"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Enter your email address below and we will send you a link to
reset your password.
</p>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="text"
value=""
/>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
Send Email
</button>
</div>
</form>
</div>
</div>
</div>
</div>
src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+142 -140
View File
@@ -697,173 +697,175 @@ exports[`checks for invalid email 1`] = `
exports[`renders sign in view 1`] = `
<div>
<div
data-testid="signIn-container"
>
<div>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Sign In
</h1>
<h1
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
>
to join the conversation
</h1>
</div>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<span>
Don't have an account? 
</span>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_UP"
onClick={[Function]}
>
Sign Up
</a>
</div>
</div>
</div>
<div
className="Main-root"
data-testid="signIn-main"
data-testid="signIn-container"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Sign In
</h1>
<h1
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
>
to join the conversation
</h1>
</div>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<span>
Don't have an account? 
</span>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_UP"
onClick={[Function]}
>
Sign Up
</a>
</div>
</div>
</div>
<div
className="Main-root"
data-testid="signIn-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="email"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="PasswordField-wrapper"
className="TextField-root TextField-fullWidth"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
className="TextField-input TextField-colorRegular"
disabled={false}
id="password"
name="password"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
placeholder="Email Address"
type="email"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
role="button"
tabIndex={0}
title="Show password"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</div>
</div>
</div>
<div
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
<a
className="TextLink-root"
href="http://localhost/?view=FORGOT_PASSWORD"
onClick={[Function]}
Password
</label>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<div
className="PasswordField-wrapper"
>
Forgot your password?
</a>
</p>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
role="button"
tabIndex={0}
title="Show password"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</div>
</div>
</div>
<div
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
href="http://localhost/?view=FORGOT_PASSWORD"
onClick={[Function]}
>
Forgot your password?
</a>
</p>
</div>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
<span
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
email
</span>
<span>
Sign in with Email
</span>
</button>
</div>
</form>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
<span
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
<span>
Sign in with Email
</span>
</button>
</div>
</form>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
</div>
</div>
src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+164 -162
View File
@@ -1808,194 +1808,196 @@ exports[`checks for too short username 1`] = `
exports[`renders sign up form 1`] = `
<div>
<div
data-testid="signUp-container"
>
<div>
<div
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Sign Up
</h1>
<h1
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
>
to join the conversation
</h1>
</div>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<span>
Already have an account? 
</span>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_IN"
onClick={[Function]}
>
Sign In
</a>
</div>
</div>
</div>
<div
className="Main-root"
data-testid="signUp-main"
data-testid="signUp-container"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div>
<h1
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Sign Up
</h1>
<h1
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
>
to join the conversation
</h1>
</div>
</div>
<div
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<span>
Already have an account? 
</span>
<a
className="TextLink-root"
href="http://localhost/?view=SIGN_IN"
onClick={[Function]}
>
Sign In
</a>
</div>
</div>
</div>
<div
className="Main-root"
data-testid="signUp-main"
>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Email Address"
type="email"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Username"
type="text"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
<div
className="PasswordField-fullWidth PasswordField-root"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
</label>
<div
className="PasswordField-wrapper"
className="TextField-root TextField-fullWidth"
>
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
className="TextField-input TextField-colorRegular"
disabled={false}
id="password"
name="password"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
placeholder="Email Address"
type="email"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
<div
className="TextField-root TextField-fullWidth"
>
<input
className="TextField-input TextField-colorRegular"
disabled={false}
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Username"
type="text"
value=""
/>
</div>
</div>
<div
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
<div
className="PasswordField-fullWidth PasswordField-root"
>
<div
className="PasswordField-icon"
onClick={[Function]}
role="button"
tabIndex={0}
title="Show password"
className="PasswordField-wrapper"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
<input
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
disabled={false}
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Password"
spellCheck={false}
type="password"
value=""
/>
<div
className="PasswordField-icon"
onClick={[Function]}
role="button"
tabIndex={0}
title="Show password"
>
visibility
</span>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</div>
</div>
</div>
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
<span
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorBrand Button-variantFilled Button-fullWidth"
disabled={false}
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="submit"
>
email
</span>
<span>
Sign up with Email
</span>
</button>
</div>
</form>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
<span
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
<span>
Sign up with Email
</span>
</button>
</div>
</form>
<div
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
</div>
</div>
src/core/client/auth/test/accountCompletion.spec.tsx
-1
View File
@@ -62,7 +62,6 @@ beforeEach(async () => {
});
afterEach(async () => {
await wait(() => expect(windowMock.resizeStub.called).toBe(true));
windowMock.restore();
});
src/core/client/auth/test/addEmailAddress.spec.tsx
-12
View File
@@ -11,9 +11,6 @@ import {
import create from "./create";
import { settings } from "./fixtures";
import mockWindow from "./mockWindow";
let windowMock: ReturnType<typeof mockWindow>;
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();
src/core/client/auth/test/createPassword.spec.tsx
-12
View File
@@ -11,9 +11,6 @@ import {
import create from "./create";
import { settings } from "./fixtures";
import mockWindow from "./mockWindow";
let windowMock: ReturnType<typeof mockWindow>;
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();
src/core/client/auth/test/createUsername.spec.tsx
-12
View File
@@ -11,9 +11,6 @@ import {
import create from "./create";
import { settings } from "./fixtures";
import mockWindow from "./mockWindow";
let windowMock: ReturnType<typeof mockWindow>;
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();
src/core/client/auth/test/forgotPassword.spec.tsx
-2
View File
@@ -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();
});
src/core/client/auth/test/navigation.spec.tsx
+1 -12
View File
@@ -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<typeof mockWindow>;
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(() =>
src/core/client/auth/test/signIn.spec.tsx
-12
View File
@@ -12,9 +12,6 @@ import {
import create from "./create";
import { settings } from "./fixtures";
import mockWindow from "./mockWindow";
let windowMock: ReturnType<typeof mockWindow>;
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();
src/core/client/auth/test/signUp.spec.tsx
-12
View File
@@ -11,9 +11,6 @@ import {
import create from "./create";
import { settings } from "./fixtures";
import mockWindow from "./mockWindow";
let windowMock: ReturnType<typeof mockWindow>;
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();
src/core/client/auth/views/AddEmailAddress/AddEmailAddress.tsx
-2
View File
@@ -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<Props> {
<Form onSubmit={this.handleSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeight />
<HorizontalGutter size="oneAndAHalf">
<Localized id="addEmailAddress-whatItIs">
<Typography variant="bodyCopy">
src/core/client/auth/views/CreatePassword/CreatePassword.tsx
-2
View File
@@ -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<Props> {
<Form onSubmit={this.handleSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeight />
<HorizontalGutter size="oneAndAHalf">
<Localized id="createPassword-whatItIs">
<Typography variant="bodyCopy">
src/core/client/auth/views/CreateUsername/CreateUsername.tsx
-2
View File
@@ -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<Props> {
<Form onSubmit={this.handleSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeight />
<HorizontalGutter size="oneAndAHalf">
<Localized id="createUsername-whatItIs">
<Typography variant="bodyCopy">
src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx
-2
View File
@@ -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<Props> = ({
<Form onSubmit={onSubmit} initialValues={{ email }}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeight />
<HorizontalGutter size="full">
<Localized id="forgotPassword-enterEmailAndGetALink">
<Typography variant="bodyCopy">
src/core/client/auth/views/SignIn/SignIn.tsx
-2
View File
@@ -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<SignInForm> = ({
facebookEnabled || googleEnabled || oidcEnabled;
return (
<div data-testid="signIn-container">
<AutoHeight />
<Localized
id="signIn-signInToJoinHeader"
title={<Title />}
src/core/client/auth/views/SignIn/SignInWithEmail.tsx
-2
View File
@@ -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<SignInWithEmailForm> = props => {
<Form onSubmit={props.onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeight />
<HorizontalGutter size="full">
{submitError && (
<CallOut color="error" fullWidth>
src/core/client/auth/views/SignIn/__snapshots__/SignIn.spec.tsx.snap
-3
View File
@@ -4,7 +4,6 @@ exports[`renders correctly 1`] = `
<div
data-testid="signIn-container"
>
<AutoHeight />
<Localized
id="signIn-signInToJoinHeader"
subtitle={<Subtitle />}
@@ -65,7 +64,6 @@ exports[`renders error 1`] = `
<div
data-testid="signIn-container"
>
<AutoHeight />
<Localized
id="signIn-signInToJoinHeader"
subtitle={<Subtitle />}
@@ -132,7 +130,6 @@ exports[`renders without email login 1`] = `
<div
data-testid="signIn-container"
>
<AutoHeight />
<Localized
id="signIn-signInToJoinHeader"
subtitle={<Subtitle />}
src/core/client/auth/views/SignUp/SignUp.tsx
-2
View File
@@ -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<Props> = ({
facebookEnabled || googleEnabled || oidcEnabled;
return (
<div data-testid="signUp-container">
<AutoHeight />
<Localized
id="signUp-signUpToJoinHeader"
title={<Title />}
src/core/client/auth/views/SignUp/SignUpWithEmail.tsx
-2
View File
@@ -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> = props => {
<Form onSubmit={props.onSubmit}>
{({ handleSubmit, submitting, submitError }) => (
<form autoComplete="off" onSubmit={handleSubmit}>
<AutoHeight />
<HorizontalGutter size="full">
{submitError && (
<CallOut color="error" fullWidth>
src/core/client/auth/views/SignUp/__snapshots__/SignUp.spec.tsx.snap
-2
View File
@@ -4,7 +4,6 @@ exports[`renders correctly 1`] = `
<div
data-testid="signUp-container"
>
<AutoHeight />
<Localized
id="signUp-signUpToJoinHeader"
subtitle={<Subtitle />}
@@ -65,7 +64,6 @@ exports[`renders without email sign up 1`] = `
<div
data-testid="signUp-container"
>
<AutoHeight />
<Localized
id="signUp-signUpToJoinHeader"
subtitle={<Subtitle />}
src/core/client/embed/decorators/withAutoHeight.spec.ts
+1 -5
View File
@@ -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 = "<span>Hello World </span>";
withAutoHeight(fakePym as any);
expect(fakePym.el.innerHTML).toBe(
'<span style="height: 100px;">Hello World </span>'
);
});
src/core/client/embed/decorators/withAutoHeight.ts
+1 -1
View File
@@ -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;
}
});
src/core/client/framework/hooks/index.ts
+1
View File
@@ -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";
src/core/client/framework/hooks/useResizeObserver.ts
+28
View File
@@ -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<any>(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;
}
src/core/client/stream/index.tsx
+3 -1
View File
@@ -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 = () => (
src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.spec.tsx
+2 -2
View File
@@ -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 () => {
src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx
+5 -2
View File
@@ -59,6 +59,7 @@ export class ReplyCommentFormContainer extends Component<Props, State> {
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<Props, State> {
}
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);
}
};