Merge branch 'reactify-admin/create-layout-setting-frontside' into reactify-admin/create-customize-container

# Conflicts:
#	src/client/js/components/Admin/Customize/CustomizeLayoutSetting.jsx

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

@@ -19,8 +19,6 @@ class Customize extends React.Component {
           <h2>{t('customize_page.Layout')}</h2>
           <CustomizeLayoutSetting />
         </div>
-        <legend>{t('customize_page.Theme')}</legend>
-        {/* テーマフォームの react componentをここで呼ぶ(GW-245) */}
         <legend>{t('customize_page.Behavior')}</legend>
         {/* 挙動フォームの react componentをここで呼ぶ(GW-246) */}
         <legend>{t('customize_page.Function')}</legend>

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
+
+
+class CustomizeLayoutForm extends React.Component {
+
+  growiLayout() {
+    const { adminCustomizeContainer } = this.props;
+
+    return (
+      <div className="col-sm-4">
+        <h4>
+          <div className="radio radio-primary">
+            <input
+              type="radio"
+              id="radioLayoutGrowi"
+              checked={adminCustomizeContainer.state.layoutType === 'growi'}
+              onChange={() => adminCustomizeContainer.switchLayoutType('growi')}
+            />
+            <label htmlFor="radioLayoutGrowi">
+              GROWI Enhanced Layout <small className="text-success">(Recommended)</small>
+            </label>
+          </div>
+        </h4>
+        <a href="/images/admin/customize/layout-crowi-plus.gif" className="ss-container">
+          <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px" />
+        </a>
+        <h4>Simple and Clear</h4>
+        <ul>
+          {/* TODO i18n */}
+          <li>Full screen layout and thin margins/paddings</li>
+          <li>Show and post comments at the bottom of the page</li>
+          <li>Affix Table-of-contents</li>
+        </ul>
+      </div>
+    );
+  }
+
+  kibelaLayout() {
+    const { adminCustomizeContainer } = this.props;
+
+    return (
+      <div className="col-sm-4">
+        <h4>
+          <div className="radio radio-primary">
+            <input
+              type="radio"
+              id="radioLayoutKibela"
+              checked={adminCustomizeContainer.state.layoutType === 'kibela'}
+              onChange={() => adminCustomizeContainer.switchLayoutType('kibela')}
+            />
+            <label htmlFor="radioLayoutKibela">
+              Kibela Like Layout
+            </label>
+          </div>
+        </h4>
+        <a href="/images/admin/customize/layout-kibela.gif" className="ss-container">
+          <img src="/images/admin/customize/layout-kibela-thumb.gif" width="240px" />
+        </a>
+        <h4>Easy Viewing Structure</h4>
+        <ul>
+          {/* TODO i18n */}
+          <li>Center aligned contents</li>
+          <li>Show and post comments at the bottom of the page</li>
+          <li>Affix Table-of-contents</li>
+        </ul>
+      </div>
+    );
+  }
+
+  classicLayout() {
+    const { adminCustomizeContainer } = this.props;
+
+    return (
+      <div className="col-sm-4">
+        <h4>
+          <div className="radio radio-primary">
+            <input
+              type="radio"
+              id="radioLayoutCrowi"
+              checked={adminCustomizeContainer.state.layoutType === 'crowi'}
+              onChange={() => adminCustomizeContainer.switchLayoutType('crowi')}
+            />
+            <label htmlFor="radioLayoutCrowi">
+              Crowi Classic Layout
+            </label>
+          </div>
+        </h4>
+        <a href="/images/admin/customize/layout-classic.gif" className="ss-container">
+          <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px" />
+        </a>
+        <h4>Separated Functions</h4>
+        <ul>
+          {/* TODO i18n */}
+          <li>Collapsible Sidebar</li>
+          <li>Show and post comments in Sidebar</li>
+          <li>Collapsible Table-of-contents</li>
+        </ul>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <form>
+        {this.growiLayout()}
+        {this.kibelaLayout()}
+        {this.classicLayout()}
+      </form>
+    );
+  }
+
+}
+
+const CustomizeLayoutFormWrapper = (props) => {
+  return createSubscribedElement(CustomizeLayoutForm, props, [AppContainer, AdminCustomizeContainer]);
+};
+
+CustomizeLayoutForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
+};
+
+export default withTranslation()(CustomizeLayoutFormWrapper);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+
 import loggerFactory from '@alias/logger';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
@@ -9,15 +10,12 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AppContainer from '../../../services/AppContainer';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
-const logger = loggerFactory('growi:importer');
+import CustomizeLayoutForm from './CustomizeLayoutForm';
 
-class CustomizeLayoutSetting extends React.Component {
+const logger = loggerFactory('growi:importer');
 
-  constructor(props) {
-    super(props);
 
-    this.onClickSubmit = this.onClickSubmit.bind(this);
-  }
+class CustomizeLayoutSetting extends React.Component {
 
   async onClickSubmit() {
     const { t } = this.props;
@@ -32,117 +30,19 @@ class CustomizeLayoutSetting extends React.Component {
     }
   }
 
-  growiLayout() {
-    const { adminCustomizeContainer } = this.props;
-
-    return (
-      <div className="col-sm-4">
-        <h4>
-          <div className="radio radio-primary">
-            <input
-              type="radio"
-              id="radioLayoutGrowi"
-              checked={adminCustomizeContainer.state.layoutType === 'growi'}
-              onChange={() => adminCustomizeContainer.switchLayoutType('growi')}
-            />
-            <label htmlFor="radioLayoutGrowi">
-              GROWI Enhanced Layout <small className="text-success">(Recommended)</small>
-            </label>
-          </div>
-        </h4>
-        <a href="/images/admin/customize/layout-crowi-plus.gif" className="ss-container">
-          <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px" />
-        </a>
-        <h4>Simple and Clear</h4>
-        <ul>
-          {/* TODO i18n */}
-          <li>Full screen layout and thin margins/paddings</li>
-          <li>Show and post comments at the bottom of the page</li>
-          <li>Affix Table-of-contents</li>
-        </ul>
-      </div>
-    );
-  }
-
-  kibelaLayout() {
-    const { adminCustomizeContainer } = this.props;
-
-    return (
-      <div className="col-sm-4">
-        <h4>
-          <div className="radio radio-primary">
-            <input
-              type="radio"
-              id="radioLayoutKibela"
-              checked={adminCustomizeContainer.state.layoutType === 'kibela'}
-              onChange={() => adminCustomizeContainer.switchLayoutType('kibela')}
-            />
-            <label htmlFor="radioLayoutKibela">
-              Kibela Like Layout
-            </label>
-          </div>
-        </h4>
-        <a href="/images/admin/customize/layout-kibela.gif" className="ss-container">
-          <img src="/images/admin/customize/layout-kibela-thumb.gif" width="240px" />
-        </a>
-        <h4>Easy Viewing Structure</h4>
-        <ul>
-          {/* TODO i18n */}
-          <li>Center aligned contents</li>
-          <li>Show and post comments at the bottom of the page</li>
-          <li>Affix Table-of-contents</li>
-        </ul>
-      </div>
-    );
-  }
-
-  classicLayout() {
-    const { adminCustomizeContainer } = this.props;
-
-    return (
-      <div className="col-sm-4">
-        <h4>
-          <div className="radio radio-primary">
-            <input
-              type="radio"
-              id="radioLayoutCrowi"
-              checked={adminCustomizeContainer.state.layoutType === 'crowi'}
-              onChange={() => adminCustomizeContainer.switchLayoutType('crowi')}
-            />
-            <label htmlFor="radioLayoutCrowi">
-              Crowi Classic Layout
-            </label>
-          </div>
-        </h4>
-        <a href="/images/admin/customize/layout-classic.gif" className="ss-container">
-          <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px" />
-        </a>
-        <h4>Separated Functions</h4>
-        <ul>
-          {/* TODO i18n */}
-          <li>Collapsible Sidebar</li>
-          <li>Show and post comments in Sidebar</li>
-          <li>Collapsible Table-of-contents</li>
-        </ul>
-      </div>
-    );
-  }
-
   render() {
     const { t } = this.props;
 
-
     return (
-      <form>
-        {this.growiLayout()}
-        {this.kibelaLayout()}
-        {this.classicLayout()}
+      <React.Fragment>
+        <CustomizeLayoutForm />
+        {/* TODO GW-245 create themeForm Component */}
         <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <div className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</div>
           </div>
         </div>
-      </form>
+      </React.Fragment>
     );
   }