127 lines
3.8 KiB
JavaScript
Raw Normal View History

/**
*
* Plugin
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { Collapse } from 'reactstrap';
2017-12-04 15:03:53 +01:00
import { capitalize, get, isEmpty, map } from 'lodash';
import { FormattedMessage } from 'react-intl';
import Controller from 'components/Controller';
import styles from './styles.scss';
class Plugin extends React.Component { // eslint-disable-line react/prefer-stateless-function
state = { collapse: false };
componentDidMount() {
// Open the application's permissions section if there are APIs
if (this.props.name === 'application' && !isEmpty(get(this.props.plugin, 'controllers'))) {
this.props.changePluginSelected('application');
this.setState({ collapse: !this.state.collapse });
}
}
2017-11-16 15:13:46 +01:00
componentWillReceiveProps(nextProps) {
if (nextProps.pluginSelected !== this.props.pluginSelected && nextProps.pluginSelected !== this.props.name) {
this.context.resetShouldDisplayPoliciesHint();
2017-11-16 15:13:46 +01:00
this.setState({ collapse: false });
}
}
handleClick = () => {
this.props.changePluginSelected(this.props.name);
2017-12-04 15:03:53 +01:00
if (!isEmpty(get(this.props.plugin, 'controllers'))) {
this.setState({ collapse: !this.state.collapse });
}
2017-11-30 15:01:19 +01:00
if (this.state.collapse) {
this.context.resetShouldDisplayPoliciesHint();
}
2017-11-16 15:13:46 +01:00
}
render() {
const divStyle = this.state.collapse ? { marginBottom: '.4rem' } : {};
2017-11-23 16:27:41 +01:00
const icon = get(this.context.plugins.toJS(), [this.props.name, 'icon']);
2017-12-14 17:06:26 +01:00
const emptyApplication = !isEmpty(get(this.props.plugin, 'controllers'));
return (
<div className={styles.plugin} style={divStyle}>
<div className={styles.banner} onClick={this.handleClick}>
<div>
2017-11-23 16:27:41 +01:00
{ icon ? (
<div className={styles.iconContainer}>
<img src={this.props.plugin.information.logo} alt="icon" />
2017-11-23 16:27:41 +01:00
</div>
) : ''}
<div className={styles.name}>{this.props.name}</div>
&nbsp;&nbsp;
2017-12-04 15:03:53 +01:00
<div className={styles.description}>
2017-11-16 17:59:41 +01:00
{this.props.name === 'application' ? (
<FormattedMessage
id="users-permissions.Plugin.permissions.application.description"
/>
) : (
<FormattedMessage
id="users-permissions.Plugin.permissions.plugins.description"
values={{ name: capitalize(this.props.name) }}
/>
)}
2017-12-04 15:03:53 +01:00
</div>
</div>
2017-12-14 17:06:26 +01:00
{ emptyApplication ? (
<div className={this.state.collapse ? styles.chevronUp : styles.chevronDown}></div>
) : '' }
</div>
<Collapse isOpen={this.state.collapse}>
<div />
<div className={styles.controllerContainer}>
{map(get(this.props.plugin, 'controllers'), (controllerActions, key) => (
<Controller
inputNamePath={`permissions.${this.props.name}`}
2017-11-30 15:01:19 +01:00
isOpen={this.state.collapse}
key={key}
name={key}
actions={controllerActions}
2017-11-30 15:01:19 +01:00
resetInputBackground={this.state.resetInputBackground}
/>
))}
</div>
</Collapse>
</div>
);
}
}
2017-11-23 16:27:41 +01:00
Plugin.contextTypes = {
plugins: PropTypes.object.isRequired,
resetShouldDisplayPoliciesHint: PropTypes.func.isRequired,
2017-11-23 16:27:41 +01:00
};
Plugin.defaultProps = {
name: '',
plugin: {
description: 'users-permissions.Plugin.permissions.description.empty',
controllers: {},
information: {},
},
};
Plugin.propTypes = {
2017-11-16 15:13:46 +01:00
changePluginSelected: PropTypes.func.isRequired,
name: PropTypes.string,
plugin: PropTypes.shape({
description: PropTypes.string,
information: PropTypes.shape({
logo: PropTypes.string.isRequired,
}).isRequired,
}),
2017-11-16 15:13:46 +01:00
pluginSelected: PropTypes.string.isRequired,
};
export default Plugin;