strip out sample bits (moved to demo repository)
This commit is contained in:
Jesse Hallam
parent
7641f7cf17
commit
daaf7822ea
36 changed files with 12 additions and 1239 deletions
|
|
@ -1,7 +0,0 @@
|
|||
import PluginId from './plugin_id';
|
||||
|
||||
// Namespace your actions to avoid collisions.
|
||||
export const STATUS_CHANGE = PluginId + '_status_change';
|
||||
|
||||
export const OPEN_ROOT_MODAL = PluginId + '_open_root_modal';
|
||||
export const CLOSE_ROOT_MODAL = PluginId + '_close_root_modal';
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import PluginId from './plugin_id';
|
||||
import {STATUS_CHANGE, OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL} from './action_types';
|
||||
|
||||
export const openRootModal = () => (dispatch) => {
|
||||
dispatch({
|
||||
type: OPEN_ROOT_MODAL,
|
||||
});
|
||||
};
|
||||
|
||||
export const closeRootModal = () => (dispatch) => {
|
||||
dispatch({
|
||||
type: CLOSE_ROOT_MODAL,
|
||||
});
|
||||
};
|
||||
|
||||
export const mainMenuAction = openRootModal;
|
||||
export const channelHeaderButtonAction = openRootModal;
|
||||
|
||||
export const getStatus = () => (dispatch) => {
|
||||
fetch('/plugins/' + PluginId + '/').then((r) => r.json()).then((r) => {
|
||||
dispatch({
|
||||
type: STATUS_CHANGE,
|
||||
data: r.enabled,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const websocketStatusChange = (message) => (dispatch) => dispatch({
|
||||
type: STATUS_CHANGE,
|
||||
data: message.data.enabled,
|
||||
});
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
const BottomTeamSidebarComponent = () => (
|
||||
<i
|
||||
className='icon fa fa-plug'
|
||||
style={{color: 'white'}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default BottomTeamSidebarComponent;
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
export const MainMenuMobileIcon = () => (
|
||||
<i className='icon fa fa-plug'/>
|
||||
);
|
||||
|
||||
export const ChannelHeaderButtonIcon = () => (
|
||||
<i className='icon fa fa-plug'/>
|
||||
);
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {connect} from 'react-redux';
|
||||
|
||||
import {isEnabled} from 'selectors';
|
||||
|
||||
import LeftSidebarHeader from './left_sidebar_header';
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
enabled: isEnabled(state),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(LeftSidebarHeader);
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// LeftSidebarHeader is a pure component, later connected to the Redux store so as to
|
||||
// show the plugin's enabled / disabled status.
|
||||
export default class LeftSidebarHeader extends React.PureComponent {
|
||||
static propTypes = {
|
||||
enabled: PropTypes.bool.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const iconStyle = {
|
||||
display: 'inline-block',
|
||||
margin: '0 7px 0 1px',
|
||||
};
|
||||
const style = {
|
||||
margin: '.5em 0 .5em',
|
||||
padding: '0 12px 0 15px',
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
<i
|
||||
className='icon fa fa-plug'
|
||||
style={iconStyle}
|
||||
/>
|
||||
{'Sample Plugin: '} {this.props.enabled ? <span>{ 'Enabled' }</span> : <span>{ 'Disabled' }</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const {formatText, messageHtmlToComponent} = window.PostUtils;
|
||||
|
||||
export default class PostType extends React.PureComponent {
|
||||
static propTypes = {
|
||||
post: PropTypes.object.isRequired,
|
||||
theme: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const style = getStyle(this.props.theme);
|
||||
const post = {...this.props.post};
|
||||
const message = post.message || '';
|
||||
|
||||
const formattedText = messageHtmlToComponent(formatText(message));
|
||||
|
||||
return (
|
||||
<div>
|
||||
{formattedText}
|
||||
<pre style={style.configuration}>
|
||||
{JSON.stringify(post.props, null, 4)}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const getStyle = (theme) => ({
|
||||
configuration: {
|
||||
padding: '1em',
|
||||
color: theme.centerChannelBg,
|
||||
backgroundColor: theme.centerChannelColor,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
|
||||
import {closeRootModal} from 'actions';
|
||||
import {isRootModalVisible} from 'selectors';
|
||||
|
||||
import Root from './root';
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
visible: isRootModalVisible(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => bindActionCreators({
|
||||
close: closeRootModal,
|
||||
}, dispatch);
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Root);
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Root = ({visible, close, theme}) => {
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const style = getStyle(theme);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={style.backdrop}
|
||||
onClick={close}
|
||||
>
|
||||
<div style={style.modal}>
|
||||
{ 'You have triggered the root component of the sample plugin.' }
|
||||
<br/>
|
||||
<br/>
|
||||
{ 'Click anywhere to close.' }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Root.propTypes = {
|
||||
visible: PropTypes.bool.isRequired,
|
||||
close: PropTypes.func.isRequired,
|
||||
theme: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const getStyle = (theme) => ({
|
||||
backdrop: {
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.50)',
|
||||
zIndex: 2000,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
modal: {
|
||||
height: '250px',
|
||||
width: '400px',
|
||||
padding: '1em',
|
||||
color: theme.centerChannelColor,
|
||||
backgroundColor: theme.centerChannelBg,
|
||||
},
|
||||
});
|
||||
|
||||
export default Root;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
|
||||
import {openRootModal} from 'actions';
|
||||
|
||||
import UserActions from './user_actions';
|
||||
|
||||
const mapDispatchToProps = (dispatch) => bindActionCreators({
|
||||
openRootModal,
|
||||
}, dispatch);
|
||||
|
||||
export default connect(null, mapDispatchToProps)(UserActions);
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default class UserActionsComponent extends React.PureComponent {
|
||||
static propTypes = {
|
||||
openRootModal: PropTypes.func.isRequired,
|
||||
theme: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
this.props.openRootModal();
|
||||
}
|
||||
|
||||
render() {
|
||||
const style = getStyle(this.props.theme);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ 'Sample Plugin: '}
|
||||
<button
|
||||
style={style.button}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{'Action'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const getStyle = (theme) => ({
|
||||
button: {
|
||||
color: theme.buttonColor,
|
||||
backgroundColor: theme.buttonBg,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
export default class UserAttributes extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<div>{'Sample Plugin: User Attributes'}</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,10 @@
|
|||
import Plugin from './plugin';
|
||||
import PluginId from './plugin_id';
|
||||
|
||||
export default class Plugin {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
initialize(registry, store) {
|
||||
// @see https://developers.mattermost.com/extend/plugins/webapp/reference/
|
||||
}
|
||||
}
|
||||
|
||||
window.registerPlugin(PluginId, new Plugin());
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import PluginId from './plugin_id';
|
||||
|
||||
import Root from './components/root';
|
||||
import BottomTeamSidebar from './components/bottom_team_sidebar';
|
||||
import LeftSidebarHeader from './components/left_sidebar_header';
|
||||
import UserAttributes from './components/user_attributes';
|
||||
import UserActions from './components/user_actions';
|
||||
import PostType from './components/post_type';
|
||||
import {
|
||||
MainMenuMobileIcon,
|
||||
ChannelHeaderButtonIcon,
|
||||
} from './components/icons';
|
||||
import {
|
||||
mainMenuAction,
|
||||
channelHeaderButtonAction,
|
||||
websocketStatusChange,
|
||||
getStatus,
|
||||
} from './actions';
|
||||
import reducer from './reducer';
|
||||
|
||||
export default class SamplePlugin {
|
||||
initialize(registry, store) {
|
||||
registry.registerRootComponent(Root);
|
||||
registry.registerPopoverUserAttributesComponent(UserAttributes);
|
||||
registry.registerPopoverUserActionsComponent(UserActions);
|
||||
registry.registerLeftSidebarHeaderComponent(LeftSidebarHeader);
|
||||
registry.registerBottomTeamSidebarComponent(
|
||||
BottomTeamSidebar,
|
||||
);
|
||||
|
||||
registry.registerChannelHeaderButtonAction(
|
||||
<ChannelHeaderButtonIcon/>,
|
||||
() => store.dispatch(channelHeaderButtonAction()),
|
||||
'Sample Plugin',
|
||||
);
|
||||
|
||||
registry.registerPostTypeComponent('custom_sample_plugin', PostType);
|
||||
|
||||
registry.registerMainMenuAction(
|
||||
'Sample Plugin',
|
||||
() => store.dispatch(mainMenuAction()),
|
||||
<MainMenuMobileIcon/>,
|
||||
);
|
||||
|
||||
registry.registerWebSocketEventHandler(
|
||||
'custom_' + PluginId + '_status_change',
|
||||
(message) => {
|
||||
store.dispatch(websocketStatusChange(message));
|
||||
},
|
||||
);
|
||||
|
||||
registry.registerReducer(reducer);
|
||||
|
||||
// Immediately fetch the current plugin status.
|
||||
store.dispatch(getStatus());
|
||||
|
||||
// Fetch the current status whenever we recover an internet connection.
|
||||
registry.registerReconnectHandler(() => {
|
||||
store.dispatch(getStatus());
|
||||
});
|
||||
}
|
||||
|
||||
uninitialize() {
|
||||
//eslint-disable-next-line no-console
|
||||
console.log(PluginId + '::uninitialize()');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import {combineReducers} from 'redux';
|
||||
|
||||
import {STATUS_CHANGE, OPEN_ROOT_MODAL, CLOSE_ROOT_MODAL} from './action_types';
|
||||
|
||||
const enabled = (state = false, action) => {
|
||||
switch (action.type) {
|
||||
case STATUS_CHANGE:
|
||||
return action.data;
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const rootModalVisible = (state = false, action) => {
|
||||
switch (action.type) {
|
||||
case OPEN_ROOT_MODAL:
|
||||
return true;
|
||||
case CLOSE_ROOT_MODAL:
|
||||
return false;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
export default combineReducers({
|
||||
enabled,
|
||||
rootModalVisible,
|
||||
});
|
||||
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import PluginId from './plugin_id';
|
||||
|
||||
const getPluginState = (state) => state['plugins-' + PluginId] || {};
|
||||
|
||||
export const isEnabled = (state) => getPluginState(state).enabled;
|
||||
|
||||
export const isRootModalVisible = (state) => getPluginState(state).rootModalVisible;
|
||||
Reference in a new issue