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

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

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

@@ -1,131 +0,0 @@
-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/CustomizeLayoutOption.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+class CustomizeLayoutOption extends React.Component {
+
+  render() {
+    const { layoutType } = this.props;
+
+    return (
+      <div className="col-sm-4">
+        <h4>
+          <div className="radio radio-primary">
+            <input type="radio" id={`radio-layout-${layoutType}`} checked={this.props.isSelected} onChange={this.props.onSelected} />
+            <label htmlFor={`radio-layout-${layoutType}`}>
+              {/* eslint-disable-next-line react/no-danger */}
+              <span dangerouslySetInnerHTML={{ __html: this.props.labelHtml }} />
+            </label>
+          </div>
+        </h4>
+        <a href={`/images/admin/customize/layout-${layoutType}.gif`} className="ss-container">
+          <img src={`/images/admin/customize/layout-${layoutType}-thumb.gif`} width="240px" />
+        </a>
+        {/* render layout description */}
+        {this.props.children}
+      </div>
+    );
+  }
+
+}
+
+CustomizeLayoutOption.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  layoutType: PropTypes.string.isRequired,
+  labelHtml: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  onSelected: PropTypes.func.isRequired,
+  children: PropTypes.array.isRequired,
+};
+
+export default withTranslation()(CustomizeLayoutOption);

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import CustomizeLayoutOption from './CustomizeLayoutOption';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
+import AppContainer from '../../../services/AppContainer';
+
+class CustomizeLayoutOptions extends React.Component {
+
+  render() {
+    const { adminCustomizeContainer } = this.props;
+
+    return (
+      <React.Fragment>
+        <CustomizeLayoutOption
+          layoutType="crowi-plus"
+          isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
+          onSelected={() => adminCustomizeContainer.switchLayoutType('growi')}
+          labelHtml={'GROWI Enhanced Layout <small className="text-success">(Recommended)</small>'}
+        >
+          {/* TODO i18n */}
+          <h4>Simple and Clear</h4>
+          <ul>
+            <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>
+        </CustomizeLayoutOption>
+
+        <CustomizeLayoutOption
+          layoutType="kibela"
+          isSelected={adminCustomizeContainer.state.currentLayout === 'kibela'}
+          onSelected={() => adminCustomizeContainer.switchLayoutType('kibela')}
+          labelHtml="Kibela Like Layout"
+        >
+          {/* TODO i18n */}
+          <h4>Easy Viewing Structure</h4>
+          <ul>
+            <li>Center aligned contents</li>
+            <li>Show and post comments at the bottom of the page</li>
+            <li>Affix Table-of-contents</li>
+          </ul>
+        </CustomizeLayoutOption>
+
+        <CustomizeLayoutOption
+          layoutType="classic"
+          isSelected={adminCustomizeContainer.state.currentLayout === 'crowi'}
+          onSelected={() => adminCustomizeContainer.switchLayoutType('crowi')}
+          labelHtml="Crowi Classic Layout"
+        >
+          {/* TODO i18n */}
+          <h4>Separated Functions</h4>
+          <ul>
+            <li>Collapsible Sidebar</li>
+            <li>Show and post comments in Sidebar</li>
+            <li>Collapsible Table-of-contents</li>
+          </ul>
+        </CustomizeLayoutOption>
+      </React.Fragment>
+    );
+  }
+
+}
+
+const CustomizeLayoutOptionsWrapper = (props) => {
+  return createSubscribedElement(CustomizeLayoutOptions, props, [AppContainer, AdminCustomizeContainer]);
+};
+
+CustomizeLayoutOptions.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
+};
+
+export default withTranslation()(CustomizeLayoutOptionsWrapper);

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

@@ -8,16 +8,22 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
-import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
-import CustomizeLayoutForm from './CustomizeLayoutForm';
-import CustomizeThemeForm from './CustomizeThemeForm';
+import CustomizeLayoutOptions from './CustomizeLayoutOptions';
+import CustomizeThemeOptions from './CustomizeThemeOptions';
+import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
 const logger = loggerFactory('growi:importer');
 
 
 class CustomizeLayoutSetting extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.onClickSubmit = this.onClickSubmit.bind(this);
+  }
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -37,13 +43,13 @@ class CustomizeLayoutSetting extends React.Component {
     return (
       <React.Fragment>
         <h2>{t('customize_page.Layout')}</h2>
-        <CustomizeLayoutForm />
+        <CustomizeLayoutOptions />
         <h2>{ t('customize_page.Theme') }</h2>
         {/* TODO hide dev mode */}
         <div className="alert alert-warning">
           <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
         </div>
-        <CustomizeThemeForm />
+        <CustomizeThemeOptions />
         <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>

src/client/js/components/Admin/Customize/CustomizeThemeForm.jsx → src/client/js/components/Admin/Customize/CustomizeThemeOptions.jsx

@@ -5,15 +5,15 @@ import { withTranslation } from 'react-i18next';
 import { createSubscribedElement } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
-import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import ThemeColorBox from './ThemeColorBox';
+import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
 
-class CustomizeThemeForm extends React.Component {
+class CustomizeThemeOptions extends React.Component {
 
   render() {
     return (
-      <div id="themeOptions" className={`${this.props.adminCustomizeContainer.state.layoutType === 'kibela' && 'disabled'}`}>
+      <div id="themeOptions" className={`${this.props.adminCustomizeContainer.state.currentLayout === 'kibela' && 'disabled'}`}>
         {/* Light Themes  */}
         <div className="d-flex">
           <ThemeColorBox name="default" bg="#ffffff" topbar="#334455" theme="#112744" />
@@ -37,14 +37,14 @@ class CustomizeThemeForm extends React.Component {
 
 }
 
-const CustomizeThemeFormWrapper = (props) => {
-  return createSubscribedElement(CustomizeThemeForm, props, [AppContainer, AdminCustomizeContainer]);
+const CustomizeThemeOptionsWrapper = (props) => {
+  return createSubscribedElement(CustomizeThemeOptions, props, [AppContainer, AdminCustomizeContainer]);
 };
 
-CustomizeThemeForm.propTypes = {
+CustomizeThemeOptions.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
-export default withTranslation()(CustomizeThemeFormWrapper);
+export default withTranslation()(CustomizeThemeOptionsWrapper);

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

@@ -11,11 +11,12 @@ import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 class ThemeColorBox extends React.Component {
 
   isThemeSelected(name) {
-    return (this.props.adminCustomizeContainer.state.themeType === name);
+    return (this.props.adminCustomizeContainer.state.currentTheme === name);
   }
 
   render() {
     const { name } = this.props;
+
     return (
       <div
         id={`theme-option-${name}`}

src/client/js/services/AdminCustomizeContainer.js

@@ -12,8 +12,8 @@ export default class AdminCustomizeContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
-      layoutType: appContainer.config.layoutType,
-      themeType: appContainer.config.themeType,
+      currentTheme: appContainer.config.themeType,
+      currentLayout: appContainer.config.layoutType,
     };
 
     this.switchLayoutType = this.switchLayoutType.bind(this);
@@ -30,7 +30,7 @@ export default class AdminCustomizeContainer extends Container {
    * Switch layoutType
    */
   switchLayoutType(lauoutName) {
-    this.setState({ layoutType: lauoutName });
+    this.setState({ currentLayout: lauoutName });
   }
 
   /**
@@ -38,10 +38,10 @@ export default class AdminCustomizeContainer extends Container {
    */
   switchThemeType(themeName) {
     // can't choose theme when kibela
-    if (this.state.layoutType === 'kibela') {
+    if (this.state.currentLayout === 'kibela') {
       return;
     }
-    this.setState({ themeType: themeName });
+    this.setState({ currentTheme: themeName });
   }
 
   updateCustomizeLayout() {