wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-12 13:01:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

replaced eslint:recommended with prettier

Browse Source
This commit is contained in:
Wyatt Johnson
2018-01-11 20:00:34 -07:00
parent d56c19016a
commit 0abc2ca243
649 changed files with 16235 additions and 13008 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-framework/components/ClickOutside.js
+10 -8
View File
@@ -1,6 +1,6 @@
import {Component, cloneElement, Children} from 'react';
import { Component, cloneElement, Children } from 'react';
import PropTypes from 'prop-types';
import {findDOMNode} from 'react-dom';
import { findDOMNode } from 'react-dom';
export default class ClickOutside extends Component {
static propTypes = {
@@ -14,15 +14,15 @@ export default class ClickOutside extends Component {
domNode = null;
handleClick = (e) => {
const {onClickOutside} = this.props;
handleClick = e => {
const { onClickOutside } = this.props;
if (!e || !this.domNode.contains(e.target)) {
onClickOutside && onClickOutside(e);
}
};
componentDidMount() {
const {pym} = this.context;
const { pym } = this.context;
this.domNode = findDOMNode(this);
document.addEventListener('click', this.handleClick, true);
if (pym) {
@@ -31,15 +31,17 @@ export default class ClickOutside extends Component {
}
componentWillUnmount() {
const {pym} = this.context;
const { pym } = this.context;
document.removeEventListener('click', this.handleClick, true);
if (pym) {
pym.messageHandlers.click = pym.messageHandlers.click.filter((h) => h !== this.handleClick);
pym.messageHandlers.click = pym.messageHandlers.click.filter(
h => h !== this.handleClick
);
}
}
render() {
const {children, onClickOutside: _, ...rest} = this.props;
const { children, onClickOutside: _, ...rest } = this.props;
return cloneElement(Children.only(children), rest);
}
}
client/coral-framework/components/CommentAuthorName.js
+3 -4
View File
@@ -1,9 +1,8 @@
import React from 'react';
import styles from './CommentAuthorName.css';
const CommentAuthorName = ({comment}) =>
<span className={styles.authorName}>
{comment.user.username}
</span>;
const CommentAuthorName = ({ comment }) => (
<span className={styles.authorName}>{comment.user.username}</span>
);
export default CommentAuthorName;
client/coral-framework/components/CommentContent.js
+10 -8
View File
@@ -1,19 +1,21 @@
import React from 'react';
const CommentContent = ({comment}) => {
const CommentContent = ({ comment }) => {
const textbreaks = comment.body.split('\n');
return <span className={`${name}-text`}>
{
textbreaks.map((line, i) => {
return (
<span className={`${name}-text`}>
{textbreaks.map((line, i) => {
return (
<span key={i} className={`${name}-line`}>
{line}
{i === textbreaks.length - 1 && <br className={`${name}-linebreak`}/>}
{i === textbreaks.length - 1 && (
<br className={`${name}-linebreak`} />
)}
</span>
);
})
}
</span>;
})}
</span>
);
};
export default CommentContent;
client/coral-framework/components/CommentDetail.js
+4 -8
View File
@@ -2,21 +2,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './CommentDetail.css';
import {Icon} from 'coral-ui';
import { Icon } from 'coral-ui';
const CommentDetail = ({icon, header, info, children, className}) => {
const CommentDetail = ({ icon, header, info, children, className }) => {
return (
<div className={cn(className, styles.root)}>
<div className={styles.headerContainer}>
{icon && <Icon className={styles.icon} name={icon}/>}
{icon && <Icon className={styles.icon} name={icon} />}
<h3 className={styles.header}>{header}:</h3>
<div className={styles.info}>{info}</div>
</div>
{children &&
<div className={styles.details}>
{children}
</div>
}
{children && <div className={styles.details}>{children}</div>}
</div>
);
};
client/coral-framework/components/CommentTimestamp.js
+2 -2
View File
@@ -1,10 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import {timeago} from 'coral-framework/services/i18n';
import { timeago } from 'coral-framework/services/i18n';
import cn from 'classnames';
import styles from './CommentTimestamp.css';
const CommentTimestamp = ({className, created_at}) => (
const CommentTimestamp = ({ className, created_at }) => (
<div className={cn(className, styles.timestamp, 'talk-comment-timestamp')}>
{timeago(created_at)}
</div>
client/coral-framework/components/ConfigureCard.js
+28 -20
View File
@@ -1,33 +1,41 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './ConfigureCard.css';
import {Card} from 'coral-ui';
import {Checkbox} from 'react-mdl';
import { Card } from 'coral-ui';
import { Checkbox } from 'react-mdl';
import cn from 'classnames';
const ConfigureCard = ({title, children, className, onCheckbox, checked, ...rest}) => (
<Card {...rest} className={cn(
styles.card,
className,
{
const ConfigureCard = ({
title,
children,
className,
onCheckbox,
checked,
...rest
}) => (
<Card
{...rest}
className={cn(styles.card, className, {
[styles.enabledSetting]: checked === true,
[styles.disabledSetting]: checked === false,
},
)}>
{checked !== undefined &&
})}
>
{checked !== undefined && (
<div className={styles.action}>
<Checkbox
onChange={onCheckbox}
checked={checked} />
<Checkbox onChange={onCheckbox} checked={checked} />
</div>
}
<div className={cn(styles.wrapper, {
[styles.content]: checked !== undefined,
})}>
)}
<div
className={cn(styles.wrapper, {
[styles.content]: checked !== undefined,
})}
>
<div className={styles.header}>{title}</div>
<div className={cn({
[styles.disabledSettingText]: checked === false,
})}>
<div
className={cn({
[styles.disabledSettingText]: checked === false,
})}
>
{children}
</div>
</div>
client/coral-framework/components/IfSlotIsEmpty.js
+17 -9
View File
@@ -1,7 +1,7 @@
import React, {Children} from 'react';
import {connect} from 'react-redux';
import React, { Children } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {getShallowChanges} from 'coral-framework/utils';
import { getShallowChanges } from 'coral-framework/utils';
class IfSlotIsEmpty extends React.Component {
static contextTypes = {
@@ -9,7 +9,6 @@ class IfSlotIsEmpty extends React.Component {
};
shouldComponentUpdate(next) {
// Prevent Slot from rerendering when only reduxState has changed and
// it does not result in a change.
const changes = getShallowChanges(this.props, next);
@@ -22,13 +21,23 @@ class IfSlotIsEmpty extends React.Component {
}
isSlotEmpty(props = this.props) {
const {slot, className: _a, reduxState, component: _b = 'div', children: _c, queryData, ...rest} = props;
const {
slot,
className: _a,
reduxState,
component: _b = 'div',
children: _c,
queryData,
...rest
} = props;
const slots = Array.isArray(slot) ? slot : [slot];
return slots.every((slot) => this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData));
return slots.every(slot =>
this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData)
);
}
render() {
const {children} = this.props;
const { children } = this.props;
return this.isSlotEmpty() ? Children.only(children) : null;
}
}
@@ -37,9 +46,8 @@ IfSlotIsEmpty.propTypes = {
slot: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
};
const mapStateToProps = (state) => ({
const mapStateToProps = state => ({
reduxState: state,
});
export default connect(mapStateToProps, null)(IfSlotIsEmpty);
client/coral-framework/components/IfSlotIsNotEmpty.js
+17 -9
View File
@@ -1,7 +1,7 @@
import React, {Children} from 'react';
import {connect} from 'react-redux';
import React, { Children } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {getShallowChanges} from 'coral-framework/utils';
import { getShallowChanges } from 'coral-framework/utils';
class IfSlotIsNotEmpty extends React.Component {
static contextTypes = {
@@ -9,7 +9,6 @@ class IfSlotIsNotEmpty extends React.Component {
};
shouldComponentUpdate(next) {
// Prevent Slot from rerendering when only reduxState has changed and
// it does not result in a change.
const changes = getShallowChanges(this.props, next);
@@ -22,13 +21,23 @@ class IfSlotIsNotEmpty extends React.Component {
}
isSlotEmpty(props = this.props) {
const {slot, className: _a, reduxState, component: _b = 'div', children: _c, queryData, ...rest} = props;
const {
slot,
className: _a,
reduxState,
component: _b = 'div',
children: _c,
queryData,
...rest
} = props;
const slots = Array.isArray(slot) ? slot : [slot];
return slots.every((slot) => this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData));
return slots.every(slot =>
this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData)
);
}
render() {
const {children} = this.props;
const { children } = this.props;
return this.isSlotEmpty() ? null : Children.only(children);
}
}
@@ -37,9 +46,8 @@ IfSlotIsNotEmpty.propTypes = {
slot: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
};
const mapStateToProps = (state) => ({
const mapStateToProps = state => ({
reduxState: state,
});
export default connect(mapStateToProps, null)(IfSlotIsNotEmpty);
client/coral-framework/components/Markdown.js
+7 -6
View File
@@ -1,4 +1,4 @@
import React, {PureComponent} from 'react';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import marked from 'marked';
@@ -6,19 +6,20 @@ const renderer = new marked.Renderer();
// Set link target to `_parent` to work properly in an embed.
renderer.link = (href, title, text) =>
`<a target="_parent" href="${href}" ${title ? `title="${title}"` : ''}>${text}</a>`;
`<a target="_parent" href="${href}" ${
title ? `title="${title}"` : ''
}>${text}</a>`;
marked.setOptions({renderer});
marked.setOptions({ renderer });
export default class Markdown extends PureComponent {
render() {
const {content, ...rest} = this.props;
const { content, ...rest } = this.props;
const __html = marked(content);
return <div {...rest} dangerouslySetInnerHTML={{__html}} />;
return <div {...rest} dangerouslySetInnerHTML={{ __html }} />;
}
}
Markdown.propTypes = {
content: PropTypes.string,
};
client/coral-framework/components/MarkdownEditor.js
+10 -9
View File
@@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import SimpleMDE from 'simplemde';
import cn from 'classnames';
@@ -95,12 +95,11 @@ const config = {
],
};
export default class MarkdownEditor extends Component {
export default class MarkdownEditor extends Component {
textarea = null;
editor = null;
textarea = null
editor = null
onRef = (ref) => this.textarea = ref
onRef = ref => (this.textarea = ref);
componentDidMount() {
this.editor = new SimpleMDE({
@@ -116,13 +115,15 @@ export default class MarkdownEditor extends Component {
}
componentWillReceiveProps(nextProps) {
if (this.props.value !== nextProps.value && nextProps.value !== this.editor.value()) {
if (
this.props.value !== nextProps.value &&
nextProps.value !== this.editor.value()
) {
this.editor.value(nextProps.value);
}
}
componentDidUpdate() {
// Workaround empty render issue.
// https://github.com/NextStepWebs/simplemde-markdown-editor/issues/313
this.editor.codemirror.refresh();
@@ -136,7 +137,7 @@ export default class MarkdownEditor extends Component {
if (this.props.onChange) {
this.props.onChange(this.editor.value());
}
}
};
render() {
return (
client/coral-framework/components/Popup.js
+7 -11
View File
@@ -1,4 +1,4 @@
import {Component} from 'react';
import { Component } from 'react';
import PropTypes from 'prop-types';
export default class Popup extends Component {
@@ -15,11 +15,7 @@ export default class Popup extends Component {
}
openWindow(props = this.props) {
this.ref = window.open(
props.href,
props.title,
props.features,
);
this.ref = window.open(props.href, props.title, props.features);
this.setCallbacks();
@@ -96,31 +92,31 @@ export default class Popup extends Component {
if (this.props.onLoad) {
this.props.onLoad();
}
}
};
onUnload = () => {
if (this.props.onUnload) {
this.props.onUnload();
}
}
};
onClose = () => {
if (this.props.onClose) {
this.props.onClose();
}
}
};
onFocus = () => {
if (this.props.onFocus) {
this.props.onFocus();
}
}
};
onBlur = () => {
if (this.props.onBlur) {
this.props.onBlur();
}
}
};
componentWillReceiveProps(nextProps) {
if (nextProps.open && !this.ref) {
client/coral-framework/components/RestrictedContent.js
+12 -7
View File
@@ -3,15 +3,20 @@ import PropTypes from 'prop-types';
import t from 'coral-framework/services/i18n';
import RestrictedMessageBox from './RestrictedMessageBox';
const RestrictedContent = ({children, restricted, message = t('framework.content_not_available'), restrictedComp}) => {
const RestrictedContent = ({
children,
restricted,
message = t('framework.content_not_available'),
restrictedComp,
}) => {
if (restricted) {
return restrictedComp ? restrictedComp : <RestrictedMessageBox message={message} />;
} else {
return (
<div className="talk-restricted-content">
{children}
</div>
return restrictedComp ? (
restrictedComp
) : (
<RestrictedMessageBox message={message} />
);
} else {
return <div className="talk-restricted-content">{children}</div>;
}
};
client/coral-framework/components/RestrictedMessageBox.js
+5 -2
View File
@@ -3,8 +3,11 @@ import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './RestrictedMessageBox.css';
const RestrictedMessageBox = ({children}) =>
<div className={cn(styles.message, 'talk-restricted-message-box')}>{children}</div>;
const RestrictedMessageBox = ({ children }) => (
<div className={cn(styles.message, 'talk-restricted-message-box')}>
{children}
</div>
);
RestrictedMessageBox.propTypes = {
children: PropTypes.node,
client/coral-framework/components/Slot.js
+30 -20
View File
@@ -1,11 +1,11 @@
import React from 'react';
import cn from 'classnames';
import styles from './Slot.css';
import {connect} from 'react-redux';
import { connect } from 'react-redux';
import kebabCase from 'lodash/kebabCase';
import PropTypes from 'prop-types';
import isEqual from 'lodash/isEqual';
import {getShallowChanges} from 'coral-framework/utils';
import { getShallowChanges } from 'coral-framework/utils';
const emptyConfig = {};
@@ -15,13 +15,14 @@ class Slot extends React.Component {
};
shouldComponentUpdate(next) {
// Prevent Slot from rerendering when only reduxState has changed and
// it does not result in a change of slot children.
const changes = getShallowChanges(this.props, next);
if (changes.length === 1 && changes[0] === 'reduxState') {
const prevChildrenKeys = this.getChildren(this.props).map((child) => child.key);
const nextChildrenKeys = this.getChildren(next).map((child) => child.key);
const prevChildrenKeys = this.getChildren(this.props).map(
child => child.key
);
const nextChildrenKeys = this.getChildren(next).map(child => child.key);
return !isEqual(prevChildrenKeys, nextChildrenKeys);
}
@@ -45,8 +46,13 @@ class Slot extends React.Component {
}
getChildren(props = this.props) {
const {plugins} = this.context;
return plugins.getSlotElements(props.fill, props.reduxState, this.getSlotProps(props), props.queryData);
const { plugins } = this.context;
return plugins.getSlotElements(
props.fill,
props.reduxState,
this.getSlotProps(props),
props.queryData
);
}
render() {
@@ -60,11 +66,16 @@ class Slot extends React.Component {
queryData,
fill,
} = this.props;
const {plugins} = this.context;
const { plugins } = this.context;
let children = this.getChildren();
const pluginConfig = reduxState.config.pluginConfig || emptyConfig;
if (children.length === 0 && DefaultComponent) {
const props = plugins.getSlotComponentProps(DefaultComponent, reduxState, this.getSlotProps(this.props), queryData);
const props = plugins.getSlotComponentProps(
DefaultComponent,
reduxState,
this.getSlotProps(this.props),
queryData
);
children = <DefaultComponent {...props} />;
}
@@ -73,7 +84,13 @@ class Slot extends React.Component {
}
return (
<Component className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className, `talk-slot-${kebabCase(fill)}`)}>
<Component
className={cn(
{ [styles.inline]: inline, [styles.debug]: pluginConfig.debug },
className,
`talk-slot-${kebabCase(fill)}`
)}
>
{children}
</Component>
);
@@ -89,19 +106,13 @@ Slot.propTypes = {
inline: PropTypes.bool,
className: PropTypes.string,
reduxState: PropTypes.object,
defaultComponent: PropTypes.oneOfType([
PropTypes.func,
PropTypes.string,
]),
defaultComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
/**
* You may specify the component to use as the root wrapper.
* Defaults to 'div'.
*/
component: PropTypes.oneOfType([
PropTypes.func,
PropTypes.string,
]),
component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
// props coming from graphql must be passed through this property.
queryData: PropTypes.object,
@@ -119,9 +130,8 @@ Slot.propTypes = {
childFactory: PropTypes.func,
};
const mapStateToProps = (state) => ({
const mapStateToProps = state => ({
reduxState: state,
});
export default connect(mapStateToProps, null)(Slot);
client/coral-framework/components/StreamConfiguration.js
+22 -12
View File
@@ -6,30 +6,40 @@ import styles from './StreamConfiguration.css';
import uuid from 'uuid/v4';
class Configuration extends React.Component {
id = uuid();
render() {
const {title, description, children, className, onCheckbox, checked, ...rest} = this.props;
const {
title,
description,
children,
className,
onCheckbox,
checked,
...rest
} = this.props;
return (
<div {...rest} className={cn(styles.root, className)}>
{checked !== undefined &&
{checked !== undefined && (
<div className={styles.action}>
<Checkbox
id={this.id}
className={styles.checkbox}
onChange={onCheckbox}
checked={checked} />
checked={checked}
/>
</div>
}
<div className={cn(styles.wrapper, {
[styles.content]: checked !== undefined,
})}>
<label htmlFor={this.id} className={styles.title}>{title}</label>
)}
<div
className={cn(styles.wrapper, {
[styles.content]: checked !== undefined,
})}
>
<label htmlFor={this.id} className={styles.title}>
{title}
</label>
<div className={styles.description}>{description}</div>
<div>
{children}
</div>
<div>{children}</div>
</div>
</div>
);
client/coral-framework/components/TalkProvider.js
+3 -7
View File
@@ -1,6 +1,6 @@
import React from 'react';
const PropTypes = require('prop-types');
import {ApolloProvider} from 'react-apollo';
import { ApolloProvider } from 'react-apollo';
class TalkProvider extends React.Component {
getChildContext() {
@@ -18,12 +18,8 @@ class TalkProvider extends React.Component {
}
render() {
const {children, client} = this.props;
return (
<ApolloProvider client={client}>
{children}
</ApolloProvider>
);
const { children, client } = this.props;
return <ApolloProvider client={client}>{children}</ApolloProvider>;
}
}
client/coral-framework/components/__tests__/Markdown.spec.js
+4 -4
View File
@@ -1,18 +1,18 @@
import React from 'react';
import {shallow} from 'enzyme';
import { shallow } from 'enzyme';
import Markdown from '../Markdown';
const render = (props) => shallow(<Markdown {...props} />);
const render = props => shallow(<Markdown {...props} />);
describe('Markdown', () => {
it('should convert Markdown to html', () => {
const wrapper = render({content: '*test*'});
const wrapper = render({ content: '*test*' });
const html = wrapper.html();
expect(html).toMatch('<em>');
});
it('should set target="_parent" for links', () => {
const wrapper = render({content: '[link](https://coralproject.net)'});
const wrapper = render({ content: '[link](https://coralproject.net)' });
const html = wrapper.html();
expect(html).toMatch('target="_parent"');
});
client/coral-framework/components/index.js
+2 -2
View File
@@ -1,2 +1,2 @@
export {default as Slot} from './Slot';
export {default as CommentAuthorName} from './CommentAuthorName';
export { default as Slot } from './Slot';
export { default as CommentAuthorName } from './CommentAuthorName';