wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-31 12:50:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into flex-improvments

Browse Source
This commit is contained in:
Kiwi
2018-08-09 20:12:23 +02:00
committed by GitHub
parent 15038fc8ab 60843f2322
commit 3eceb22198
20 changed files with 105 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+7 -7
View File
@@ -15001,9 +15001,9 @@
"dev": true
},
"matchmediaquery": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz",
"integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=",
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz",
"integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==",
"dev": true,
"requires": {
"css-mediaquery": "^0.1.2"
@@ -19584,13 +19584,13 @@
}
},
"react-responsive": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz",
"integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==",
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-5.0.0.tgz",
"integrity": "sha512-oEimZ0FTCC3/pjGDEBHOz06nWbBNDIbMGOdRYp6K9SBUmrqgNAX77hTiqvmRQeLyI97zz4F4kiaFRxFspDxE+w==",
"dev": true,
"requires": {
"hyphenate-style-name": "^1.0.0",
"matchmediaquery": "^0.2.1",
"matchmediaquery": "^0.3.0",
"prop-types": "^15.6.1"
}
},
package.json
+1 -1
View File
@@ -176,7 +176,7 @@
"react-final-form": "^3.6.4",
"react-popper": "^1.0.0-beta.6",
"react-relay": "github:coralproject/patched#react-relay",
"react-responsive": "^4.1.0",
"react-responsive": "^5.0.0",
"react-test-renderer": "^16.4.1",
"react-timeago": "^4.1.9",
"react-with-state-props": "^2.0.4",
src/core/client/embed/index.html
+1 -1
View File
@@ -16,7 +16,7 @@
<body>
<h1 style="text-align: center" }>Talk 5.0 – Embed Stream</h1>
<div id="coralStreamEmbed" style="max-width: 600px; margin: 0 auto"></div>
<div id="coralStreamEmbed" style="max-width: 640px; margin: 0 auto"></div>
<script>
window.TalkEmbed = Talk.render(document.getElementById('coralStreamEmbed'));
</script>
src/core/client/framework/lib/bootstrap/TalkContext.tsx
+5
View File
@@ -2,6 +2,7 @@ import { LocalizationProvider } from "fluent-react/compat";
import { MessageContext } from "fluent/compat";
import { Child as PymChild } from "pym.js";
import React, { StatelessComponent } from "react";
import { MediaQueryMatchers } from "react-responsive";
import { Formatter } from "react-timeago";
import { Environment } from "relay-runtime";
@@ -18,6 +19,9 @@ export interface TalkContext {
/** formatter for timeago. */
timeagoFormatter?: Formatter;
/** media query values for testing purposes */
mediaQueryValues?: MediaQueryMatchers;
/**
* A way to listen for clicks that are e.g. outside of the
* current frame for `ClickOutside`
@@ -48,6 +52,7 @@ export const TalkContextProvider: StatelessComponent<{
value={{
timeagoFormatter: value.timeagoFormatter,
registerClickFarAway: value.registerClickFarAway,
mediaQueryValues: value.mediaQueryValues,
}}
>
{children}
src/core/client/stream/components/Comment/TopBar.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export interface TopBarProps {
const TopBar: StatelessComponent<TopBarProps> = props => {
const rootClassName = cn(styles.root, props.className);
return (
<MatchMedia minWidth="xs">
<MatchMedia gtWidth="xs">
{matches => (
<Flex
className={rootClassName}
src/core/client/stream/components/Comment/Username.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export interface UsernameProps {
const Username: StatelessComponent<UsernameProps> = props => {
return (
<MatchMedia minWidth="xs">
<MatchMedia gtWidth="xs">
{matches => (
<Typography
variant={matches ? "heading2" : "heading3"}
src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ class Permalink extends React.Component<PermalinkProps> {
active={visible}
size="small"
>
<MatchMedia minWidth="xs">
<MatchMedia gtWidth="xs">
<ButtonIcon>share</ButtonIcon>
</MatchMedia>
<Localized id="comments-permalinkButton-share">
src/core/client/stream/components/UserBoxUnauthenticated.tsx
+14 -11
View File
@@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react";
import { Button, Flex, Typography } from "talk-ui/components";
import MatchMedia from "talk-ui/components/MatchMedia";
import * as styles from "./UserBoxUnauthenticated.css";
export interface UserBoxUnauthenticatedProps {
@@ -15,18 +16,20 @@ const UserBoxUnauthenticated: StatelessComponent<
> = props => {
return (
<Flex>
<Localized id="comments-userBoxUnauthenticated-joinTheConversation">
<Typography
className={styles.joinText}
variant="bodyCopyBold"
component="span"
>
Join the conversation
<MatchMedia gteWidth="sm">
<Localized id="comments-userBoxUnauthenticated-joinTheConversation">
<Typography
className={styles.joinText}
variant="bodyCopyBold"
component="span"
>
Join the conversation
</Typography>
</Localized>
<Typography variant="bodyCopyBold" component="span">
|
</Typography>
</Localized>
<Typography variant="bodyCopyBold" component="span">
|
</Typography>
</MatchMedia>
<Localized id="comments-userBoxUnauthenticated-signIn">
<Button color="primary" size="small" onClick={props.onSignIn}>
Sign in
src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+15 -11
View File
@@ -2,23 +2,27 @@
exports[`renders correctly 1`] = `
<withPropsOnChange(Flex)>
<Localized
id="comments-userBoxUnauthenticated-joinTheConversation"
<MatchMediaWithContext
gteWidth="sm"
>
<Localized
id="comments-userBoxUnauthenticated-joinTheConversation"
>
<withPropsOnChange(Typography)
className="UserBoxUnauthenticated-joinText"
component="span"
variant="bodyCopyBold"
>
Join the conversation
</withPropsOnChange(Typography)>
</Localized>
<withPropsOnChange(Typography)
className="UserBoxUnauthenticated-joinText"
component="span"
variant="bodyCopyBold"
>
Join the conversation
|
</withPropsOnChange(Typography)>
</Localized>
<withPropsOnChange(Typography)
component="span"
variant="bodyCopyBold"
>
|
</withPropsOnChange(Typography)>
</MatchMediaWithContext>
<Localized
id="comments-userBoxUnauthenticated-signIn"
>
src/core/client/stream/index.tsx
+3 -1
View File
@@ -32,7 +32,9 @@ async function main() {
});
const Index: StatelessComponent = () => (
<TalkContextProvider value={context}>
<TalkContextProvider
value={{ ...context, mediaQueryValues: { width: 640 } }}
>
<AppContainer />
</TalkContextProvider>
);
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
-20
View File
@@ -19,16 +19,6 @@ exports[`loads more comments 1`] = `
<div
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -244,16 +234,6 @@ exports[`renders comment stream 1`] = `
<div
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
-10
View File
@@ -90,16 +90,6 @@ exports[`show all comments 1`] = `
<div
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
-10
View File
@@ -54,16 +54,6 @@ exports[`show all comments 1`] = `
<div
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
-10
View File
@@ -19,16 +19,6 @@ exports[`renders comment stream 1`] = `
<div
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
-10
View File
@@ -19,16 +19,6 @@ exports[`renders comment stream 1`] = `
<div
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
-20
View File
@@ -19,16 +19,6 @@ exports[`renders comment stream 1`] = `
<div
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -224,16 +214,6 @@ exports[`show all replies 1`] = `
<div
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
src/core/client/ui/components/MatchMedia/MatchMedia.mdx
+7 -7
View File
@@ -12,29 +12,29 @@ import MatchMedia from './MatchMedia'
## Basic usage
<Playground>
<MatchMedia maxWidth="xs">
<MatchMedia lteWidth="xs">
I'm a very small screen
</MatchMedia>
<MatchMedia minWidth="xs" maxWidth="sm">
<MatchMedia gtWidth="xs" lteWidth="sm">
I'm a small screen
</MatchMedia>
<MatchMedia minWidth="sm" maxWidth="md">
<MatchMedia gtWidth="sm" lteWidth="md">
I'm a medium screen
</MatchMedia>
<MatchMedia minWidth="md" maxWidth="lg">
<MatchMedia gtWidth="md" lteWidth="lg">
I'm a large screen
</MatchMedia>
<MatchMedia minWidth="lg" maxWidth="xl">
<MatchMedia gtWidth="lg" lteWidth="xl">
I'm a very large screen
</MatchMedia>
<MatchMedia minWidth="xl">
<MatchMedia gtWidth="xl">
I'm a super large screen
</MatchMedia>
</Playground>
## Using render props
<Playground>
<MatchMedia minWidth="lg">
<MatchMedia lteWidth="lg">
{matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
</MatchMedia>
</Playground>
src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
+13 -3
View File
@@ -9,8 +9,8 @@ import { default as MatchMediaWithContext, MatchMedia } from "./MatchMedia";
it("renders correctly", () => {
const props: PropTypesOf<typeof MatchMedia> = {
minWidth: "xs",
maxWidth: "sm",
lteWidth: "xs",
gteWidth: "sm",
component: "div",
screen: true,
children: <div>Hello World</div>,
@@ -19,6 +19,16 @@ it("renders correctly", () => {
expect(wrapper).toMatchSnapshot();
});
it("renders less than and great than correctly", () => {
const props: PropTypesOf<typeof MatchMedia> = {
ltWidth: "xs",
gtWidth: "sm",
children: <div>Hello World</div>,
};
const wrapper = shallow(<MatchMedia {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("map new speech prop to older aural prop", () => {
const props: PropTypesOf<typeof MatchMedia> = {
speech: true,
@@ -37,7 +47,7 @@ it("should get mediaQueryValues from context", () => {
};
const wrapper = mount(
<UIContext.Provider value={context}>
<MatchMediaWithContext maxWidth="xs">
<MatchMediaWithContext lteWidth="xs">
<span>Hello World</span>
</MatchMediaWithContext>
</UIContext.Provider>
src/core/client/ui/components/MatchMedia/MatchMedia.tsx
+22 -5
View File
@@ -10,8 +10,17 @@ import UIContext from "../UIContext";
type Breakpoints = keyof typeof theme.breakpoints;
interface InnerProps {
minWidth?: Breakpoints;
maxWidth?: Breakpoints;
/** greater than or equal width. */
gteWidth?: Breakpoints;
/** greater than width. */
gtWidth?: Breakpoints;
/** less than equals width. */
lteWidth?: Breakpoints;
/** less than equals width. */
ltWidth?: Breakpoints;
children: ReactNode | ((matches: boolean) => React.ReactNode);
className?: string;
component?:
@@ -27,13 +36,21 @@ interface InnerProps {
}
export const MatchMedia: StatelessComponent<InnerProps> = props => {
const { speech, minWidth, maxWidth, ...rest } = props;
const { speech, gteWidth, gtWidth, lteWidth, ltWidth, ...rest } = props;
const mapped = {
// TODO: Temporarily map newer speech to older aural type until
// react-responsive supports the speech prop.
aural: speech,
minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
minWidth: gtWidth
? theme.breakpoints[gtWidth] + 1
: gteWidth
? theme.breakpoints[gteWidth]
: undefined,
maxWidth: ltWidth
? theme.breakpoints[ltWidth] - 1
: lteWidth
? theme.breakpoints[lteWidth]
: undefined,
};
return <Responsive {...rest} {...mapped} />;
};
src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
+14 -2
View File
@@ -14,8 +14,8 @@ exports[`map new speech prop to older aural prop 1`] = `
exports[`renders correctly 1`] = `
<MediaQuery
component="div"
maxWidth={640}
minWidth={321}
maxWidth={320}
minWidth={640}
screen={true}
values={Object {}}
>
@@ -24,3 +24,15 @@ exports[`renders correctly 1`] = `
</div>
</MediaQuery>
`;
exports[`renders less than and great than correctly 1`] = `
<MediaQuery
maxWidth={319}
minWidth={641}
values={Object {}}
>
<div>
Hello World
</div>
</MediaQuery>
`;