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

Port to new Slot property passthrough

Browse Source
This commit is contained in:
Chi Vinh Le
2018-03-09 17:34:05 +01:00
parent 1b55684a73
commit 44b8809db1
23 changed files with 228 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/talk-plugin-author-menu/client/components/AuthorName.js
+17 -13
View File
@@ -1,14 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import Menu from './Menu';
import styles from './AuthorName.css';
import { ClickOutside } from 'plugin-api/beta/client/components';
import cn from 'classnames';
export default ({
data,
root,
asset,
comment,
const AuthorName = ({
slotPassthrough,
username,
contentSlot,
menuVisible,
toggleMenu,
@@ -21,18 +20,23 @@ export default ({
className={cn(styles.button, 'talk-plugin-author-menu-button')}
onClick={toggleMenu}
>
<span className={styles.name}>{comment.user.username}</span>
<span className={styles.name}>{username}</span>
</button>
{menuVisible && (
<Menu
data={data}
root={root}
asset={asset}
comment={comment}
contentSlot={contentSlot}
/>
<Menu slotPassthrough={slotPassthrough} contentSlot={contentSlot} />
)}
</div>
</ClickOutside>
);
};
AuthorName.propTypes = {
slotPassthrough: PropTypes.object.isRequired,
username: PropTypes.string.isRequired,
menuVisible: PropTypes.bool.isRequired,
toggleMenu: PropTypes.func.isRequired,
hideMenu: PropTypes.func.isRequired,
contentSlot: PropTypes.string,
};
export default AuthorName;
plugins/talk-plugin-author-menu/client/components/Menu.js
+12 -10
View File
@@ -1,17 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './Menu.css';
import { Slot } from 'plugin-api/beta/client/components';
import cn from 'classnames';
export default ({ data, root, asset, comment, contentSlot }) => {
const Menu = ({ slotPassthrough, contentSlot }) => {
if (contentSlot) {
return (
<div className={cn(styles.menu, 'talk-plugin-author-menu-popup')}>
<Slot
fill={contentSlot}
data={data}
queryData={{ asset, root, comment }}
/>
<Slot fill={contentSlot} passthrough={slotPassthrough} />
</div>
);
}
@@ -21,15 +18,20 @@ export default ({ data, root, asset, comment, contentSlot }) => {
<Slot
className={cn('talk-plugin-author-menu-infos')}
fill={'authorMenuInfos'}
data={data}
queryData={{ asset, root, comment }}
passthrough={slotPassthrough}
/>
<Slot
className={cn(styles.actions, 'talk-plugin-author-menu-actions')}
fill={'authorMenuActions'}
data={data}
queryData={{ asset, root, comment }}
passthrough={slotPassthrough}
/>
</div>
);
};
Menu.propTypes = {
slotPassthrough: PropTypes.object.isRequired,
contentSlot: PropTypes.string,
};
export default Menu;
plugins/talk-plugin-author-menu/client/containers/AuthorName.js
+27 -6
View File
@@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect, withFragments } from 'plugin-api/beta/client/hocs';
import { bindActionCreators } from 'redux';
import AuthorName from '../components/AuthorName';
@@ -47,21 +48,41 @@ class AuthorNameContainer extends React.Component {
};
render() {
const {
data,
root,
asset,
comment,
contentSlot,
showMenuForComment,
} = this.props;
const slotPassthrough = { data, root, asset, comment };
return (
<AuthorName
data={this.props.data}
root={this.props.root}
asset={this.props.asset}
comment={this.props.comment}
contentSlot={this.props.contentSlot}
menuVisible={this.props.showMenuForComment === this.props.comment.id}
username={comment.user.username}
contentSlot={contentSlot}
menuVisible={showMenuForComment === comment.id}
toggleMenu={this.toggleMenu}
hideMenu={this.hideMenu}
slotPassthrough={slotPassthrough}
/>
);
}
}
AuthorNameContainer.propTypes = {
data: PropTypes.object.isRequired,
root: PropTypes.object.isRequired,
asset: PropTypes.object.isRequired,
comment: PropTypes.object.isRequired,
contentSlot: PropTypes.string,
showMenuForComment: PropTypes.string,
openMenu: PropTypes.func.isRequired,
closeMenu: PropTypes.func.isRequired,
};
const slots = ['authorMenuInfos', 'authorMenuActions'];
const mapStateToProps = ({ talkPluginAuthorMenu: state }) => ({
plugins/talk-plugin-featured-comments/client/components/Comment.js
+5 -12
View File
@@ -19,7 +19,7 @@ class Comment extends React.Component {
render() {
const { comment, asset, root, data } = this.props;
const queryData = { comment, asset, root };
const slotPassthrough = { data, comment, asset, root };
return (
<div className={cn(styles.root, `${pluginName}-comment`)}>
<Slot
@@ -27,8 +27,7 @@ class Comment extends React.Component {
className={cn(styles.quote, `${pluginName}-comment-body`)}
fill="commentContent"
defaultComponent={CommentContent}
data={data}
queryData={queryData}
passthrough={slotPassthrough}
/>
<div className={cn(`${pluginName}-comment-username-box`)}>
@@ -36,8 +35,7 @@ class Comment extends React.Component {
className={cn(styles.username, `${pluginName}-comment-username`)}
fill="commentAuthorName"
defaultComponent={CommentAuthorName}
queryData={queryData}
data={data}
passthrough={slotPassthrough}
inline
/>
@@ -45,9 +43,7 @@ class Comment extends React.Component {
fill="commentTimestamp"
defaultComponent={CommentTimestamp}
className={cn(styles.timestamp, `${pluginName}-comment-timestamp`)}
created_at={comment.created_at}
data={data}
queryData={queryData}
passthrough={{ created_at: comment.created_at, ...slotPassthrough }}
inline
/>
</div>
@@ -62,10 +58,7 @@ class Comment extends React.Component {
>
<Slot
fill="commentReactions"
root={root}
data={data}
comment={comment}
asset={asset}
passthrough={slotPassthrough}
inline
/>
plugins/talk-plugin-flag-details/client/components/FlagDetails.js
+4 -4
View File
@@ -26,7 +26,8 @@ class FlagDetails extends Component {
}, {});
const reasons = Object.keys(summaries);
const queryData = {
const slotPassthrough = {
data,
root,
comment,
};
@@ -52,12 +53,11 @@ class FlagDetails extends Component {
{more && (
<IfSlotIsNotEmpty
slot="adminCommentMoreFlagDetails"
queryData={queryData}
passthrough={slotPassthrough}
>
<Slot
fill="adminCommentMoreFlagDetails"
data={data}
queryData={queryData}
passthrough={slotPassthrough}
/>
</IfSlotIsNotEmpty>
)}
plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+7 -2
View File
@@ -22,6 +22,12 @@ export default class ModerationActions extends React.Component {
hideMenu,
} = this.props;
const slotPassthrough = {
comment,
asset,
data,
};
return (
<ClickOutside onClickOutside={hideMenu}>
<div
@@ -45,8 +51,7 @@ export default class ModerationActions extends React.Component {
<Slot
className="talk-plugin-modetarion-actions-slot"
fill="moderationActions"
queryData={{ comment, asset }}
data={data}
passthrough={slotPassthrough}
/>
<ApproveCommentAction comment={comment} hideMenu={hideMenu} />
<RejectCommentAction comment={comment} hideMenu={hideMenu} />
plugins/talk-plugin-notifications/client/components/Settings.js
+9 -5
View File
@@ -29,8 +29,15 @@ class Settings extends React.Component {
email,
} = this.props;
const slotPassthrough = {
root,
setTurnOffInputFragment,
updateNotificationSettings,
disabled: needEmailVerification,
};
return (
<IfSlotIsNotEmpty slot="notificationSettings" queryData={{ root }}>
<IfSlotIsNotEmpty slot="notificationSettings" passthrough={slotPassthrough}>
<div className={styles.root}>
<h3>{t('talk-plugin-notifications.settings_title')}</h3>
{needEmailVerification && <EmailVerificationBanner email={email} />}
@@ -45,11 +52,8 @@ class Settings extends React.Component {
<Slot
className={styles.notifcationSettingsSlot}
fill="notificationSettings"
queryData={{ root }}
childFactory={this.childFactory}
setTurnOffInputFragment={setTurnOffInputFragment}
updateNotificationSettings={updateNotificationSettings}
disabled={needEmailVerification}
passthrough={slotPassthrough}
/>
<BareButton
className={styles.turnOffButton}
plugins/talk-plugin-profile-settings/client/components/TabPane.js
+2 -1
View File
@@ -5,9 +5,10 @@ import { Slot } from 'plugin-api/beta/client/components';
class TabPane extends React.Component {
render() {
const { data, root } = this.props;
const slotPassthrough = { data, root };
return (
<div>
<Slot fill="profileSettings" data={data} queryData={{ root }} />
<Slot fill="profileSettings" passthrough={slotPassthrough} />
</div>
);
}
plugins/talk-plugin-viewing-options/client/components/Category.js
+10 -4
View File
@@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import styles from './Category.css';
import { Slot } from 'plugin-api/beta/client/components';
@@ -8,7 +9,7 @@ const childFactory = child => (
</li>
);
const ViewingOptions = ({ slot, title, data, asset, root }) => {
const Category = ({ slot, title, slotPassthrough }) => {
return (
<div className={styles.root}>
<div className={styles.title}>{title}</div>
@@ -17,11 +18,16 @@ const ViewingOptions = ({ slot, title, data, asset, root }) => {
childFactory={childFactory}
className={styles.list}
component={'ul'}
data={data}
queryData={{ asset, root }}
passthrough={slotPassthrough}
/>
</div>
);
};
export default ViewingOptions;
Category.propTypes = {
slot: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
slotPassthrough: PropTypes.object.isRequired,
};
export default Category;
plugins/talk-plugin-viewing-options/client/components/Menu.js
+8
View File
@@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './Menu.css';
import { capitalize } from 'plugin-api/beta/client/utils';
@@ -13,16 +14,19 @@ class Menu extends React.Component {
};
render() {
const { slotPassthrough } = this.props;
return (
<div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
{Object.keys(this.categories).map(category => (
<IfSlotIsNotEmpty
slot={`viewingOptions${capitalize(category)}`}
key={category}
passthrough={slotPassthrough}
>
<Category
slot={`viewingOptions${capitalize(category)}`}
title={this.categories[category]}
passthrough={slotPassthrough}
/>
</IfSlotIsNotEmpty>
))}
@@ -31,4 +35,8 @@ class Menu extends React.Component {
}
}
Menu.propTypes = {
slotPassthrough: PropTypes.object.isRequired,
};
export default Menu;
plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js
+10 -2
View File
@@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './ViewingOptions.css';
import { t } from 'plugin-api/beta/client/services';
@@ -24,7 +25,7 @@ class ViewingOptions extends React.Component {
};
render() {
const { open, data, root, asset } = this.props;
const { open, slotPassthrough } = this.props;
return (
<ClickOutside onClickOutside={this.handleClickOutside}>
<div className={cn([styles.root, 'talk-plugin-viewing-options'])}>
@@ -41,11 +42,18 @@ class ViewingOptions extends React.Component {
)}
</button>
</div>
{open && <Menu data={data} root={root} asset={asset} />}
{open && <Menu slotPassthrough={slotPassthrough} />}
</div>
</ClickOutside>
);
}
}
ViewingOptions.propTypes = {
slotPassthrough: PropTypes.object.isRequired,
open: PropTypes.bool.isRequired,
openMenu: PropTypes.func.isRequired,
closeMenu: PropTypes.func.isRequired,
};
export default ViewingOptions;
plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js
+12 -1
View File
@@ -4,6 +4,7 @@ import ViewingOptions from '../components/ViewingOptions';
import { openMenu, closeMenu } from '../actions';
import { compose, gql } from 'react-apollo';
import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
import { mapProps } from 'recompose';
const slots = ['viewingOptionsSort', 'viewingOptionsFilter'];
@@ -29,7 +30,17 @@ const withViewingOptionsFragments = withFragments({
const enhance = compose(
connect(mapStateToProps, mapDispatchToProps),
withViewingOptionsFragments
withViewingOptionsFragments,
mapProps(({ root, asset, data, open, openMenu, closeMenu }) => ({
slotPassthrough: {
data,
root,
asset,
},
open,
openMenu,
closeMenu,
}))
);
export default enhance(ViewingOptions);