mirror of
https://github.com/strapi/strapi.git
synced 2025-11-01 18:33:55 +00:00
handle dynamic left menuplugin
This commit is contained in:
cyril lopez
parent
edd1b91f2b
commit
af672aaf79
@ -41,7 +41,7 @@ class InputToggle extends React.Component { // eslint-disable-line react/prefer-
|
||||
value: isChecked,
|
||||
};
|
||||
this.setState({ isChecked });
|
||||
this.props.handleChange({target});
|
||||
this.props.handleChange({ target });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -10,19 +10,19 @@ import PluginLeftMenuSection from 'components/PluginLeftMenuSection';
|
||||
import styles from './styles.scss';
|
||||
|
||||
class PluginLeftMenu extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={`${styles.pluginLeftMenu} col-md-3`}>
|
||||
{map(this.props.sections, (section, index) => (
|
||||
<PluginLeftMenuSection key={index} section={section} />
|
||||
<PluginLeftMenuSection key={index} section={section} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PluginLeftMenu.propTypes = {
|
||||
sections: React.PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
export default PluginLeftMenu;
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* PluginLeftMenuHeader
|
||||
*
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
|
||||
import styles from './styles.scss';
|
||||
|
||||
function PluginLeftMenuHeader() {
|
||||
return (
|
||||
<div className={styles.pluginLeftMenuHeader}>
|
||||
General
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PluginLeftMenuHeader;
|
||||
@ -1,3 +0,0 @@
|
||||
.pluginLeftMenuHeader { /* stylelint-disable */
|
||||
margin-top: 3rem;
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
/**
|
||||
*
|
||||
* PluginLeftMenuLink
|
||||
*
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import styles from './styles.scss';
|
||||
|
||||
class PluginLeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
||||
render() {
|
||||
return (
|
||||
<li className={styles.pluginLeftMenuLink}>
|
||||
<Link className={styles.link} to={`/plugins/settings-manager/${this.props.link.slug}`} activeClassName={styles.linkActive}>
|
||||
<i className={`fa fa-${this.props.link.icon}`} />
|
||||
<span>{this.props.link.name}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PluginLeftMenuLink.propTypes = {
|
||||
link: React.PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default PluginLeftMenuLink;
|
||||
@ -0,0 +1,29 @@
|
||||
|
||||
.pluginLeftMenuLink { /* stylelint-disable */
|
||||
|
||||
}
|
||||
|
||||
.link {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.2rem;
|
||||
min-height: 4rem;
|
||||
border-left: 0.4rem solid transparent;
|
||||
cursor: pointer;
|
||||
color: #7E8AAA;
|
||||
padding-left: 2.4rem;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background: #151C2E;
|
||||
border-left: 0.4rem solid #1C5DE7;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #7E8AAA;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.linkActive {
|
||||
border-left: 0.4rem solid #1C5DE7;
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
// import PluginLeftMenuHeader from '../index';
|
||||
// import PluginLeftMenuLink from '../index';
|
||||
|
||||
import expect from 'expect';
|
||||
// import { shallow } from 'enzyme';
|
||||
// import React from 'react';
|
||||
|
||||
describe('<PluginLeftMenuHeader />', () => {
|
||||
describe('<PluginLeftMenuLink />', () => {
|
||||
it('Expect to have unit tests specified', () => {
|
||||
expect(true).toEqual(false);
|
||||
});
|
||||
@ -5,17 +5,33 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { map } from 'lodash';
|
||||
import PluginLeftMenuLink from 'components/PluginLeftMenuLink';
|
||||
import styles from './styles.scss';
|
||||
|
||||
class PluginLeftMenuSection extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
||||
render() {
|
||||
const links = map(this.props.section.items, (item, index) => (
|
||||
<PluginLeftMenuLink
|
||||
key={index}
|
||||
link={item}
|
||||
|
||||
/>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className={styles.pluginLeftMenuSection}>
|
||||
{this.props.section.name}
|
||||
<p>{this.props.section.name}</p>
|
||||
<ul>
|
||||
{links}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PluginLeftMenuSection.propTypes = {
|
||||
section: React.PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default PluginLeftMenuSection;
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
.pluginLeftMenuSection { /* stylelint-disable */
|
||||
|
||||
> p {
|
||||
padding-left: 2.4rem;
|
||||
}
|
||||
> ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createStructuredSelector } from 'reselect';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { pluginId } from 'app';
|
||||
import PluginLeftMenu from 'components/PluginLeftMenu';
|
||||
|
||||
@ -17,21 +18,15 @@ import { makeSelectSections } from './selectors';
|
||||
import styles from './styles.scss';
|
||||
|
||||
class App extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: false,
|
||||
value1: null,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.menuFetch();
|
||||
}
|
||||
|
||||
handleChange = ({ target }) => {
|
||||
this.setState({ value: target.value});
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// redirect the user to the first general section
|
||||
if (!this.props.params.slug && !isEmpty(nextProps.sections)) {
|
||||
this.props.history.push(`${this.props.location.pathname}/${nextProps.sections[0].items[0].slug}`)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -43,8 +38,11 @@ class App extends React.Component {
|
||||
);
|
||||
return (
|
||||
<div className={`${pluginId} ${styles.app}`}>
|
||||
<div className={styles.baseline}></div>
|
||||
<div className="container-fluid">
|
||||
{/*
|
||||
|
||||
<div className={styles.baseline}></div>
|
||||
*/}
|
||||
<div className={`container-fluid ${styles.noPadding}`}>
|
||||
<div className="row">
|
||||
<PluginLeftMenu sections={this.props.sections} />
|
||||
{React.Children.toArray(content)}
|
||||
@ -62,6 +60,11 @@ App.contextTypes = {
|
||||
App.propTypes = {
|
||||
children: React.PropTypes.node.isRequired,
|
||||
exposedComponents: React.PropTypes.object.isRequired,
|
||||
history: React.PropTypes.object,
|
||||
location: React.PropTypes.object,
|
||||
menuFetch: React.PropTypes.func,
|
||||
params: React.PropTypes.object,
|
||||
sections: React.PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
export function mapDispatchToProps(dispatch) {
|
||||
|
||||
@ -10,13 +10,13 @@ import {
|
||||
} from './constants';
|
||||
|
||||
const initialState = fromJS({
|
||||
sections: List(),
|
||||
sections: List(), // eslint-disable-line new-cap
|
||||
});
|
||||
|
||||
function appReducer(state = initialState, action) {
|
||||
switch (action.type) {
|
||||
case MENU_FETCH_SUCCEEDED:
|
||||
return state.set('sections', List(action.menu.sections));
|
||||
return state.set('sections', List(action.menu.sections)); // eslint-disable-line new-cap
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
@ -15,3 +15,7 @@
|
||||
// background: url('../../assets/images/baseline-20.png');
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.noPadding {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
@ -7,59 +7,20 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Helmet from 'react-helmet';
|
||||
import PluginLeftMenu from 'components/PluginLeftMenu';
|
||||
import InputToggle from 'components/InputToggle';
|
||||
import selectHome from './selectors';
|
||||
import styles from './styles.scss';
|
||||
|
||||
export class Home extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: false,
|
||||
value1: null,
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = ({ target }) => {
|
||||
console.log('ok');
|
||||
console.log(target);
|
||||
this.setState({ value: !this.state.value});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const test = {
|
||||
"name": "bame",
|
||||
"slug": "name",
|
||||
"target": "general.name",
|
||||
"type": "text",
|
||||
"value": "ExperienceApp",
|
||||
"validations" : {
|
||||
"maxLength": 12,
|
||||
"required": true,
|
||||
"regex": /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.home}>
|
||||
<div className={styles.baseline}></div>
|
||||
|
||||
<Helmet
|
||||
title="Home"
|
||||
meta={[
|
||||
{ name: 'description', content: 'Description of Home' },
|
||||
]}
|
||||
/>
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
|
||||
<div className="col-md-9">
|
||||
<div className="form-group">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"/": {
|
||||
|
||||
"(/:slug)": {
|
||||
"name": "home",
|
||||
"container": "Home"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user