yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-13 17:15:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove legacy context api in admin

Browse Source
This commit is contained in:
soupette 2019-09-16 12:07:05 +02:00
parent b4bf897016
commit 0592f5a32e
3 changed files with 111 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
packages/strapi-admin/admin/src/components/InstallPluginPopup/index.js
View File

@ -1,8 +1,8 @@
/*
*
* InstallPluginPopup
*
*/
*
* InstallPluginPopup
*
*/
import React from 'react';
import PropTypes from 'prop-types';
@ -10,26 +10,28 @@ import { FormattedMessage } from 'react-intl';
import { Modal, ModalHeader, ModalBody } from 'reactstrap';
import { map } from 'lodash';
import cn from 'classnames';
import { MarketPlaceContext } from '../../contexts/MarketPlace';
import Official from '../Official';
// import StarsContainer from 'components/StarsContainer';
import styles from './styles.scss';
class InstallPluginPopup extends React.Component {
static contextType = MarketPlaceContext;
handleClick = () => {
this.props.history.push({ pathname: this.props.history.location.pathname });
if (!this.props.isAlreadyInstalled) {
this.context.downloadPlugin(this.props.plugin.id);
}
}
};
toggle = () => {
this.props.history.push({
pathname: this.props.history.location.pathname,
});
}
};
navLinks = [
{
@ -56,19 +58,42 @@ class InstallPluginPopup extends React.Component {
render() {
const descriptions = {
short: this.props.plugin.id === 'support-us' ? <FormattedMessage id={this.props.plugin.description.short} /> : this.props.plugin.description.short,
long: this.props.plugin.id === 'support-us' ? <FormattedMessage id={this.props.plugin.description.long || this.props.plugin.description.short} /> : this.props.plugin.description.long || this.props.plugin.description.short,
short:
this.props.plugin.id === 'support-us' ? (
<FormattedMessage id={this.props.plugin.description.short} />
) : (
this.props.plugin.description.short
),
long:
this.props.plugin.id === 'support-us' ? (
<FormattedMessage
id={
this.props.plugin.description.long ||
this.props.plugin.description.short
}
/>
) : (
this.props.plugin.description.long ||
this.props.plugin.description.short
),
};
const buttonName = this.props.isAlreadyInstalled ? 'app.components.PluginCard.Button.label.install' : 'app.components.InstallPluginPopup.downloads';
const buttonName = this.props.isAlreadyInstalled
? 'app.components.PluginCard.Button.label.install'
: 'app.components.InstallPluginPopup.downloads';
return (
<Modal isOpen={this.props.isOpen} toggle={this.toggle} className={styles.modalPosition}>
<Modal
isOpen={this.props.isOpen}
toggle={this.toggle}
className={styles.modalPosition}
>
<ModalHeader toggle={this.toggle} className={styles.modalHeader} />
<ModalBody className={styles.modalBody}>
<div className={styles.wrapper}>
<div className={styles.headerWrapper}>
<div className={styles.logo}><img src={`${this.props.plugin.logo}`} alt="icon" /></div>
<div className={styles.logo}>
<img src={`${this.props.plugin.logo}`} alt="icon" />
</div>
<div className={styles.headerInfo}>
<div className={styles.name}>{this.props.plugin.name}</div>
<div className={styles.ratings}>
@ -86,8 +111,16 @@ class InstallPluginPopup extends React.Component {
</div>
<div className={styles.headerButtonContainer}>
<div>
<i className={`fa fa-${this.props.plugin.isCompatible ? 'check' : 'times'}`} />
<FormattedMessage id={`app.components.PluginCard.compatible${this.props.plugin.id === 'support-us' ? 'Community' : ''}`} />
<i
className={`fa fa-${
this.props.plugin.isCompatible ? 'check' : 'times'
}`}
/>
<FormattedMessage
id={`app.components.PluginCard.compatible${
this.props.plugin.id === 'support-us' ? 'Community' : ''
}`}
/>
</div>
<div>
<div>
@ -95,7 +128,10 @@ class InstallPluginPopup extends React.Component {
<span style={{ fontWeight: '600' }}>+{this.props.plugin.downloads_nb}k&nbsp;</span><FormattedMessage id="app.components.InstallPluginPopup.downloads" />
*/}
</div>
<div className={styles.buttonWrapper} onClick={this.handleClick}>
<div
className={styles.buttonWrapper}
onClick={this.handleClick}
>
<div>
<FormattedMessage id={buttonName} />
</div>
@ -110,37 +146,40 @@ class InstallPluginPopup extends React.Component {
</div>
<div className={styles.navContainer}>
{map(this.navLinks, link => {
const isActive = this.props.history.location.hash.split('::')[1] === link.name;
const isActive =
this.props.history.location.hash.split('::')[1] === link.name;
return (
<div
key={link.name}
className={cn(isActive ? styles.navLink : '', link.name !== 'description' ? styles.notAllowed : '')}
className={cn(
isActive ? styles.navLink : '',
link.name !== 'description' ? styles.notAllowed : ''
)}
onClick={() => {
if (link.name === 'description') {
this.props.history.push({ pathname: this.props.history.location.pathname, hash: `${this.props.plugin.id}::${link.name}` });
this.props.history.push({
pathname: this.props.history.location.pathname,
hash: `${this.props.plugin.id}::${link.name}`,
});
}
}}
style={isActive ? { paddingTop: '4px'} : { paddingTop: '6px' }}
style={
isActive ? { paddingTop: '4px' } : { paddingTop: '6px' }
}
>
<FormattedMessage id={link.content} />
</div>
);
})}
</div>
<div className={styles.pluginDescription}>
{descriptions.long}
</div>
<div className={styles.pluginDescription}>{descriptions.long}</div>
</ModalBody>
</Modal>
);
}
}
InstallPluginPopup.contextTypes = {
downloadPlugin: PropTypes.func.isRequired,
};
InstallPluginPopup.defaultProps = {
description: {
short: 'app.Components.InstallPluginPopup.noDescription',

39
packages/strapi-admin/admin/src/containers/Marketplace/index.js
View File

@ -13,6 +13,7 @@ import cn from 'classnames';
import { LoadingIndicatorPage, PluginHeader } from 'strapi-helper-plugin';
import { MarketPlaceContextProvider } from '../../contexts/MarketPlace';
// Design
import PageTitle from '../../components/PageTitle';
import PluginCard from '../../components/PluginCard';
@ -33,10 +34,6 @@ import saga from './saga';
import styles from './styles.scss';
class Marketplace extends React.Component {
getChildContext = () => ({
downloadPlugin: this.props.downloadPlugin,
});
componentDidMount() {
// Fetch the available and installed plugins
this.props.getAvailableAndInstalledPlugins();
@ -87,29 +84,29 @@ class Marketplace extends React.Component {
}
return (
<div>
<FormattedMessage id="app.components.InstallPluginPage.helmet">
{this.renderHelmet}
</FormattedMessage>
<div className={cn('container-fluid', styles.containerFluid)}>
<PluginHeader
title={{ id: 'app.components.InstallPluginPage.title' }}
description={{ id: 'app.components.InstallPluginPage.description' }}
actions={[]}
/>
<div className={cn('row', styles.wrapper)}>
{Object.keys(availablePlugins).map(this.renderPluginCard)}
<MarketPlaceContextProvider downloadPlugin={this.props.downloadPlugin}>
<div>
<FormattedMessage id="app.components.InstallPluginPage.helmet">
{this.renderHelmet}
</FormattedMessage>
<div className={cn('container-fluid', styles.containerFluid)}>
<PluginHeader
title={{ id: 'app.components.InstallPluginPage.title' }}
description={{
id: 'app.components.InstallPluginPage.description',
}}
actions={[]}
/>
<div className={cn('row', styles.wrapper)}>
{Object.keys(availablePlugins).map(this.renderPluginCard)}
</div>
</div>
</div>
</div>
</MarketPlaceContextProvider>
);
}
}
Marketplace.childContextTypes = {
downloadPlugin: PropTypes.func.isRequired,
};
Marketplace.defaultProps = {};
Marketplace.propTypes = {

27
packages/strapi-admin/admin/src/contexts/MarketPlace/index.js Normal file
View File

@ -0,0 +1,27 @@
import React, { createContext, useContext } from 'react';
import PropTypes from 'prop-types';
const MarketPlaceContext = createContext({});
const MarketPlaceContextProvider = ({ children, ...rest }) => {
return (
<MarketPlaceContext.Provider value={rest}>
{children}
</MarketPlaceContext.Provider>
);
};
const useMarketPlaceContext = () => useContext(MarketPlaceContext);
MarketPlaceContextProvider.defaultProps = {};
MarketPlaceContextProvider.propTypes = {
children: PropTypes.node.isRequired,
dowloadPlugin: PropTypes.func.isRequired,
};
export {
MarketPlaceContext,
MarketPlaceContextProvider,
useMarketPlaceContext,
};