Improve PluginLeftMenu library

2025-09-22 14:59:07 +00:00 · 2017-08-23 09:17:50 +02:00 · 2017-08-23 09:17:50 +02:00 · 25b1f8088d
commit 25b1f8088d
parent ed3b54cc0a
9 changed files with 108 additions and 68 deletions
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/LiTableList/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/LiTableList/index.js
@ -5,7 +5,7 @@
 */

 import React from 'react';
-import { includes, startCase } from 'lodash';
+import { startCase } from 'lodash';
 import styles from 'components/TableList/styles.scss';
 import { router } from 'app';
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@ -23,7 +23,7 @@ class LiTableList extends React.Component { // eslint-disable-line react/prefer-
    console.log('delete', this.props.rowItem.name);
  }

-  goTo = (e) => {
+  goTo = () => {
    router.push(`/plugins/content-type-builder/${this.props.rowItem.name}`);
  }

--- a/packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js
@ -5,7 +5,7 @@
 */

 import React from 'react';
-import { get, forEach, filter, has, map, size } from 'lodash';
+import { has, map, size } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 import ButtonPrimaryHotline from 'components/Button';
 import AttributeRow from 'components/AttributeRow';
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/PluginLeftMenu/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/PluginLeftMenu/index.js
@ -1,50 +1,44 @@
+/*
+*
+* PluginLeftMenu
+*
+*   - Required props :
+*     - {array} sections : Menu section
+*
+*   - Optionnal props :
+*     - {function} addCustomSection : Allows to add the menu a custom section
+*     - {function} renderCustomLink : Overrides the link behavior
+*
+*/
+
+
+
 import React from 'react';
 import { map } from 'lodash';
-import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
 import PluginLeftMenuSection from 'components/PluginLeftMenuSection';
 import styles from './styles.scss';

 class PluginLeftMenu extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
+    const customSection = this.props.addCustomSection(styles) || '';
    return (
      <div className={`${styles.pluginLeftMenu} col-md-3`}>
        {map(this.props.sections, (section, index) => (
          <PluginLeftMenuSection
            key={index}
            section={section}
+            renderCustomLink={this.props.renderCustomLink}
          />
        ))}
-        <div className={styles.pluginLeftMenuSection}>
-          <p>
-            <FormattedMessage id={'menu.section.documentation.name'} />
-          </p>
-          <ul>
-            <li>
-              <FormattedMessage id={'menu.section.documentation.guide'} />&nbsp;
-              <FormattedMessage id={'menu.section.documentation.guideLink'}>
-                {(message) => (
-                  <Link to="#" target="_blank">{message}</Link>
-                )}
-              </FormattedMessage>
-            </li>
-            <li>
-              <FormattedMessage id={'menu.section.documentation.tutorial'} />&nbsp;
-              <FormattedMessage id={'menu.section.documentation.tutorialLink'}>
-                {(mess) => (
-                  <Link to="#" target="_blank">{mess}</Link>
-                )}
-              </FormattedMessage>
-            </li>
-
-          </ul>
-        </div>
+        {customSection}
      </div>
    );
  }
 }

 PluginLeftMenu.propTypes = {
+  addCustomSection: React.PropTypes.func,
+  renderCustomLink: React.PropTypes.func,
  sections: React.PropTypes.array.isRequired,
 };

--- a/packages/strapi-plugin-content-type-builder/admin/src/components/PluginLeftMenuLink/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/PluginLeftMenuLink/index.js
@ -1,34 +1,21 @@
 /**
 *
 * PluginLeftMenuLink
+*   - Required props:
+*     - {object} Link
+*
+*   - Optionnal props:
+*     - {function} renderCustomLink : overrides the behavior of the link
 *
 */

 import React from 'react';
-import { startCase } from 'lodash';
 import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
 import styles from './styles.scss';

 class PluginLeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  /* eslint-disable jsx-a11y/no-static-element-interactions */
-  onClick =  () => {
-    console.log('click');
-  }
-
-  renderAddLink = () => (
-    <li className={styles.pluginLeftMenuLink}>
-      <div className={styles.liInnerContainer} onClick={this.onClick}>
-        <div>
-          <i className={`fa ${this.props.link.icon}`} />
-        </div>
-        <span><FormattedMessage id={this.props.link.name} /></span>
-      </div>
-    </li>
-  )
-
  render() {
-    if (this.props.link.name === 'button.contentType.add') return this.renderAddLink();
+    if (this.props.renderCustomLink) return this.props.renderCustomLink(this.props, styles);

    return (
      <li className={styles.pluginLeftMenuLink}>
@ -36,7 +23,7 @@ class PluginLeftMenuLink extends React.Component { // eslint-disable-line react/
          <div>
            <i className={`fa ${this.props.link.icon}`} />
          </div>
-          <span>{startCase(this.props.link.name)}</span>
+          <span>{this.props.link.name}</span>
        </Link>
      </li>
    );
@ -45,6 +32,7 @@ class PluginLeftMenuLink extends React.Component { // eslint-disable-line react/

 PluginLeftMenuLink.propTypes = {
  link: React.PropTypes.object.isRequired,
+  renderCustomLink: React.PropTypes.func,
 };

 export default PluginLeftMenuLink;
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/PluginLeftMenuSection/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/PluginLeftMenuSection/index.js
@ -2,6 +2,10 @@
 *
 * PluginLeftMenuSection
 *
+*   - Required props:
+*     - {object} section
+*
+*
 */

 import React from 'react';
@ -17,6 +21,7 @@ class PluginLeftMenuSection extends React.Component { // eslint-disable-line rea
      <PluginLeftMenuLink
        key={index}
        link={item}
+        renderCustomLink={this.props.renderCustomLink}
      />
    ));
    return (
@ -33,6 +38,7 @@ class PluginLeftMenuSection extends React.Component { // eslint-disable-line rea
 }

 PluginLeftMenuSection.propTypes = {
+  renderCustomLink: React.PropTypes.func,
  section: React.PropTypes.object.isRequired,
 };

--- a/packages/strapi-plugin-content-type-builder/admin/src/components/PopUpForm/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/PopUpForm/index.js
@ -26,6 +26,7 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st
  }

  renderNavContainer = () => {
+    console.log('ok');
    return (
      <div className={styles.navContainer}>
        <PopUpHeaderNavLink
@ -83,10 +84,3 @@ PopUpForm.propTypes = {
 }

 export default PopUpForm;
-
-// <div>
-//   <FormattedMessage id={'popUpForm.navContainer.base'} />
-// </div>
-// <div>
-//   <FormattedMessage id={'popUpForm.navContainer.advanced'} />
-// </div>
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/PopUpHeaderNavLink/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/PopUpHeaderNavLink/index.js
@ -8,6 +8,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import styles from './styles.scss';

+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 class PopUpHeaderNavLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
  goTo = () => {
    this.props.handleClick(this.props.name);
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js
@ -3,7 +3,7 @@
 * App actions
 *
 */
-import { size, forEach } from 'lodash';
+import { size, map } from 'lodash';
 import { MODELS_FETCH, MODELS_FETCH_SUCCEEDED } from './constants';

 export function modelsFetch() {
@ -14,15 +14,9 @@ export function modelsFetch() {

 export function modelsFetchSucceeded(data) {
  const modelNumber = size(data.models) > 1 ? 'plural' : 'singular';
-  const sections = [];
+  const sections = map(data.models, (model) => ({icon: 'fa-caret-square-o-right', name: model.name }));
+  sections.push({ icon: 'fa-plus', name: 'button.contentType.add' });

-  forEach(data.models, (model) => {
-    // TODO uncomment if we use icon from the API
-    // sections.push({icon: model.icon, name: model.name});
-    sections.push({icon: 'fa-caret-square-o-right', name: model.name});
-  });
-
-  sections.push({ icon: 'fa-plus', name: 'button.contentType.add' })
  const menu = {
    sections: [
      {
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
@ -8,7 +8,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { size } from 'lodash';
+import { size, startCase } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';

 // Global selectors
 import { makeSelectMenu } from 'containers/App/selectors';
@ -23,6 +25,8 @@ import { modelFetch } from './actions';
 import selectModelPage from './selectors';
 import styles from './styles.scss';

+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 export class ModelPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
  componentDidMount() {
    this.props.modelFetch(this.props.params.modelName);
@ -38,18 +42,76 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr
    console.log('click');
  }

+  addCustomSection = (sectionStyles) => (
+    <div className={sectionStyles.pluginLeftMenuSection}>
+      <p>
+        <FormattedMessage id={'menu.section.documentation.name'} />
+      </p>
+      <ul>
+        <li>
+          <FormattedMessage id={'menu.section.documentation.guide'} />&nbsp;
+          <FormattedMessage id={'menu.section.documentation.guideLink'}>
+            {(message) => (
+              <Link to="#" target="_blank">{message}</Link>
+            )}
+          </FormattedMessage>
+        </li>
+        <li>
+          <FormattedMessage id={'menu.section.documentation.tutorial'} />&nbsp;
+          <FormattedMessage id={'menu.section.documentation.tutorialLink'}>
+            {(mess) => (
+              <Link to="#" target="_blank">{mess}</Link>
+            )}
+          </FormattedMessage>
+        </li>
+      </ul>
+    </div>
+  )
+
+
+  handleAddLinkClick = () => {
+    console.log('click bla');
+  }
+
+  renderAddLink = (props, customLinkStyles) => (
+    <li className={customLinkStyles.pluginLeftMenuLink}>
+      <div className={customLinkStyles.liInnerContainer} onClick={this.handleAddLinkClick}>
+        <div>
+          <i className={`fa ${props.link.icon}`} />
+        </div>
+        <span><FormattedMessage id={props.link.name} /></span>
+      </div>
+    </li>
+  )
+
+  renderCustomLink = (props, linkStyles) => {
+    if (props.link.name === 'button.contentType.add') return this.renderAddLink(props, linkStyles);
+
+    return (
+      <li className={linkStyles.pluginLeftMenuLink}>
+        <Link className={linkStyles.link} to={`/plugins/content-type-builder/${props.link.name}`} activeClassName={linkStyles.linkActive}>
+          <div>
+            <i className={`fa ${props.link.icon}`} />
+          </div>
+          <span>{startCase(props.link.name)}</span>
+        </Link>
+      </li>
+    );
+  }
+
  render() {
    const content = size(this.props.modelPage.model.attributes) === 0 ?
      <EmptyAttributesView handleClick={this.handleClick} /> :
        <List model={this.props.modelPage.model} />;

-        console.log(this.props.modelPage)
    return (
      <div className={styles.modelPage}>
        <div className="container-fluid">
          <div className="row">
            <PluginLeftMenu
              sections={this.props.menu}
+              addCustomSection={this.addCustomSection}
+              renderCustomLink={this.renderCustomLink}
            />
            <div className="col-md-9">
              <div className={styles.componentsContainer}>