switch currentBehavior

src/client/js/components/Admin/Customize/CustomizeBehaviorOption.jsx

@@ -7,8 +7,18 @@ class CustomizeBehaviorOption extends React.Component {
   render() {
 
     return (
-      <div className="col-sm-4">
-        <p>hoge</p>
+      <div className="col-xs-6">
+        <h4>
+          <div className="radio radio-primary">
+            <input type="radio" id={`radioBehavior${this.props.behaviorType}`} checked={this.props.isSelected} onChange={this.props.onSelected} />
+            <label htmlFor={`radioBehavior${this.props.behaviorType}`}>
+              {/* eslint-disable-next-line react/no-danger */}
+              <span dangerouslySetInnerHTML={{ __html: this.props.labelHtml }} />
+            </label>
+          </div>
+        </h4>
+        {/* render layout description */}
+        {this.props.children}
       </div>
     );
   }
@@ -18,11 +28,11 @@ class CustomizeBehaviorOption extends React.Component {
 CustomizeBehaviorOption.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
-  layoutType: PropTypes.string.isRequired,
+  behaviorType: PropTypes.string.isRequired,
   labelHtml: PropTypes.string.isRequired,
   isSelected: PropTypes.bool.isRequired,
   onSelected: PropTypes.func.isRequired,
-  children: PropTypes.array.isRequired,
+  children: PropTypes.object.isRequired,
 };
 
 export default withTranslation()(CustomizeBehaviorOption);

src/client/js/components/Admin/Customize/CustomizeBehaviorSetting.jsx

@@ -36,36 +36,32 @@ class CustomizeBehaviorSetting extends React.Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
-        <CustomizeBehaviorOption />
         <h2>{t('customize_page.Behavior')}</h2>
-        <div className="col-xs-6">
-          <h4>
-            <div className="radio radio-primary">
-              <input type="radio" id="radioBehaviorGrowi" name="settingForm[customize:behavior]" value="growi" />
-              <label htmlFor="radioBehaviorGrowi">
-              GROWI Simplified Behavior <small className="text-success">(Recommended)</small>
-              </label>
-            </div>
-          </h4>
+        <CustomizeBehaviorOption
+          behaviorType="growi"
+          isSelected={adminCustomizeContainer.state.currentBehavior === 'growi'}
+          onSelected={() => adminCustomizeContainer.switchBehaviorType('growi')}
+          labelHtml='GROWI Simplified Behavior <small className="text-success">(Recommended)</small>'
+        >
+          {/* TODO i18n */}
           <ul>
             <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
             <li><code>/nonexistent_page</code> shows editing form</li>
             <li>All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b></li>
           </ul>
-        </div>
-        <div className="col-xs-6">
-          <h4>
-            <div className="radio radio-primary">
-              <input type="radio" id="radioBehaviorCrowi" name="settingForm[customize:behavior]" value="crowi" />
-              <label htmlFor="radioBehaviorCrowi">
-              Crowi Classic Behavior
-              </label>
-            </div>
-          </h4>
+        </CustomizeBehaviorOption>
+
+        <CustomizeBehaviorOption
+          behaviorType="crowi-plus"
+          isSelected={adminCustomizeContainer.state.currentBehavior === 'crowi-plus'}
+          onSelected={() => adminCustomizeContainer.switchBehaviorType('crowi-plus')}
+          labelHtml="Crowi Classic Behavior"
+        >
+          {/* TODO i18n */}
           <ul>
             <li><code>/page</code> shows the page</li>
             <li><code>/page/</code> shows the list of sub pages</li>
@@ -75,7 +71,7 @@ class CustomizeBehaviorSetting extends React.Component {
             <li><code>/nonexistent_page</code> shows editing form</li>
             <li><code>/nonexistent_page/</code> the list of sub pages</li>
           </ul>
-        </div>
+        </CustomizeBehaviorOption>
 
         <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">

src/client/js/services/AdminCustomizeContainer.js

@@ -18,6 +18,7 @@ export default class AdminCustomizeContainer extends Container {
     };
 
     this.switchLayoutType = this.switchLayoutType.bind(this);
+    this.switchBehaviorType = this.switchBehaviorType.bind(this);
   }
 
   /**
@@ -45,6 +46,13 @@ export default class AdminCustomizeContainer extends Container {
     this.setState({ currentTheme: themeName });
   }
 
+  /**
+   * Switch behaviorType
+   */
+  switchBehaviorType(behaviorName) {
+    this.setState({ currentBehavior: behaviorName });
+  }
+
   /**
    * Update layout
    * @memberOf AdminCustomizeContainer