Refacto RelationBoc

packages/strapi-plugin-content-manager/config/layout.json

@@ -1 +1,9 @@
-{}
+{
+  "gvhbjnk": {
+    "attributes": {
+      "te": {
+        "appearance": "WYSIWYG"
+      }
+    }
+  }
+}

packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/index.js

@@ -1,8 +1,8 @@
 /**
-*
+ *
-* RelationBox
+ * RelationBox
-*
+ *
-*/
+ */
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -16,7 +16,8 @@ import styles from './styles.scss';
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable react/jsx-wrap-multilines */
-class RelationBox extends React.Component { // eslint-disable-line react/prefer-stateless-function
+class RelationBox extends React.Component {
+  // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
 
@@ -25,7 +26,20 @@ class RelationBox extends React.Component { // eslint-disable-line react/prefer-
     };
   }
 
-  handleClick = (e) => {
+  getPlaceholder = () => {
+    switch (true) {
+      case this.props.relationType === 'oneToMany' && this.props.isFirstContentType:
+        return pluralize(this.props.contentTypeTargetPlaceholder);
+      case this.props.relationType === 'manyToOne' && !this.props.isFirstContentType:
+        return pluralize(this.props.contentTypeTargetPlaceholder);
+      case this.props.relationType === 'manyToMany':
+        return pluralize(this.props.contentTypeTargetPlaceholder);
+      default:
+        return this.props.contentTypeTargetPlaceholder;
+    }
+  }
+
+  handleClick = e => {
     const value = e.target.id.split('.');
     const target = {
       type: 'string',
@@ -42,41 +56,53 @@ class RelationBox extends React.Component { // eslint-disable-line react/prefer-
         name: 'params.pluginValue',
       },
     });
-  }
+  };
 
   toggle = () => this.setState({ showMenu: !this.state.showMenu });
 
   renderDropdownMenu = () => (
     <div className={styles.dropDown}>
-      <ButtonDropdown isOpen={this.state.showMenu} toggle={this.toggle} style={{ backgroundColor: 'transparent' }}>
+      <ButtonDropdown
-        <DropdownToggle caret>
+        isOpen={this.state.showMenu}
-        </DropdownToggle>
+        toggle={this.toggle}
+        style={{ backgroundColor: 'transparent' }}
+      >
+        <DropdownToggle caret />
         <DropdownMenu className={styles.dropDownContent}>
           {map(this.props.dropDownItems, (value, key) => {
             const id = value.source ? `${value.name}.${value.source}` : `${value.name}. `;
             let divStyle;
 
-            if (get(this.props.header, 'name') === value.name && !isEmpty(get(this.props.header,'source')) && value.source) {
+            if (
-              divStyle = { color: '#323740', fontWeight: 'bold'};
+              get(this.props.header, 'name') === value.name &&
-            } else if (value.source === get(this.props.header, 'source') && value.name === get(this.props.header, 'name')) {
+              !isEmpty(get(this.props.header, 'source')) &&
-              divStyle = { color: '#323740', fontWeight: 'bold'};
+              value.source
+            ) {
+              divStyle = { color: '#323740', fontWeight: 'bold' };
+            } else if (
+              value.source === get(this.props.header, 'source') &&
+              value.name === get(this.props.header, 'name')
+            ) {
+              divStyle = { color: '#323740', fontWeight: 'bold' };
             } else {
               divStyle = { color: 'rgba(50,55,64,0.75)' };
             }
 
             return (
-              <div style={{ height: '3.6rem'}} key={key}>
+              <div style={{ height: '3.6rem' }} key={key}>
                 <DropdownItem onClick={this.handleClick} id={id}>
                   <div style={divStyle} id={`${value.name}.${value.source}`}>
                     <i className={`fa ${value.icon}`} style={divStyle} id={id} />
                     {value.name}&nbsp;
-                    {value.source ? (
+                    {value.source && (
                       <FormattedMessage id="content-type-builder.from">
-                        {(message) => (
+                        {message => (
-                          <span style={{ fontStyle: 'italic' }} id={id}>({message}: {value.source})</span>
+                          <span style={{ fontStyle: 'italic' }} id={id}>
+                            ({message}: {value.source})
+                          </span>
                         )}
                       </FormattedMessage>
-                    ) : ''}
+                    )}
                   </div>
                 </DropdownItem>
               </div>
@@ -85,63 +111,41 @@ class RelationBox extends React.Component { // eslint-disable-line react/prefer-
         </DropdownMenu>
       </ButtonDropdown>
     </div>
-  )
+  );
 
   render() {
-    let placeholder;
-
-    switch (true) {
-      case this.props.relationType === 'oneToMany' && this.props.isFirstContentType:
-        placeholder = pluralize(this.props.contentTypeTargetPlaceholder);
-        break;
-      case this.props.relationType === 'manyToOne' && !this.props.isFirstContentType:
-        placeholder = pluralize(this.props.contentTypeTargetPlaceholder);
-        break;
-      case this.props.relationType === 'manyToMany':
-        placeholder = pluralize(this.props.contentTypeTargetPlaceholder);
-        break;
-      default:
-        placeholder = this.props.contentTypeTargetPlaceholder;
-    }
-
-    const content = isEmpty(this.props.input) ?
-      <div /> :
-      <Input
-        disabled={this.props.relationType === 'oneWay' && this.props.tabIndex === '2'}
-        tabIndex={this.props.tabIndex}
-        type={get(this.props.input, 'type')}
-        onChange={this.props.onChange}
-        label={get(this.props.input, 'label')}
-        name={get(this.props.input, 'name')}
-        value={this.props.value}
-        placeholder={placeholder}
-        customBootstrapClass="col-md-12"
-        validations={get(this.props.input, 'validations')}
-        errors={this.props.errors}
-        didCheckErrors={this.props.didCheckErrors}
-        pluginID="content-type-builder"
-        autoFocus={this.props.autoFocus}
-      />;
-
-    const dropDown = !isEmpty(this.props.dropDownItems) ? this.renderDropdownMenu() : '';
-
     return (
       <div className={styles.relationBox}>
         <div className={styles.headerContainer}>
           <i className={`fa ${get(this.props.header, 'icon')}`} />
           {startCase(get(this.props.header, 'name'))}&nbsp;
           <span style={{ fontStyle: 'italic', fontWeight: '500' }}>
-            {get(this.props.header, 'source') ? (
+            {get(this.props.header, 'source') ? `(${get(this.props.header, 'source')})` : ''}
-              `(${get(this.props.header, 'source')})`
-            ): ''}
           </span>
-          {dropDown}
+          {!isEmpty(this.props.dropDownItems) && this.renderDropdownMenu()}
         </div>
         <div className={styles.inputContainer}>
           <form onSubmit={this.props.onSubmit}>
             <div className="container-fluid">
               <div className={`row ${styles.input}`}>
-                {content}
+                {!isEmpty(this.props.input) && (
+                  <Input
+                    disabled={this.props.relationType === 'oneWay' && this.props.tabIndex === '2'}
+                    tabIndex={this.props.tabIndex}
+                    type={get(this.props.input, 'type')}
+                    onChange={this.props.onChange}
+                    label={get(this.props.input, 'label')}
+                    name={get(this.props.input, 'name')}
+                    value={this.props.value}
+                    placeholder={this.getPlaceholder()}
+                    customBootstrapClass="col-md-12"
+                    validations={get(this.props.input, 'validations')}
+                    errors={this.props.errors}
+                    didCheckErrors={this.props.didCheckErrors}
+                    pluginID="content-type-builder"
+                    autoFocus={this.props.autoFocus}
+                  />
+                )}
               </div>
             </div>
           </form>

packages/strapi-plugin-content-type-builder/admin/src/containers/Form/index.js

@@ -539,7 +539,6 @@ export class Form extends React.Component { // eslint-disable-line react/prefer-
   }
 
   render() {
-
     // Ensure typeof(popUpFormType) is String
     const popUpFormType = split(this.props.hash, '::')[1] || '';
     const popUpTitle = this.generatePopUpTitle(popUpFormType);