isEnableTimeline

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

@@ -5,11 +5,22 @@ import { withTranslation } from 'react-i18next';
 class CustomizeFunctionOption extends React.PureComponent {
 
   render() {
-    const { t } = this.props;
-
     return (
-      <div>
-        <label htmlFor="settingForm[customize:isEnabledTimeline]" className="col-xs-3 control-label">{ t('customize_page.Timeline function') }</label>
+      <div className="form-group row">
+        <div className="col-xs-offset-4 col-xs-6 text-left">
+          <div className="checkbox checkbox-success">
+            <input
+              type="checkbox"
+              id={this.props.optionId}
+              checked={this.props.isChecked}
+              onChange={this.props.onChecked}
+            />
+            <label htmlFor={this.props.optionId}>
+              {this.props.label}
+            </label>
+          </div>
+          {this.props.children}
+        </div>
       </div>
     );
   }
@@ -19,11 +30,11 @@ class CustomizeFunctionOption extends React.PureComponent {
 CustomizeFunctionOption.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
-  behaviorType: PropTypes.string.isRequired,
-  labelHtml: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-  onSelected: PropTypes.func.isRequired,
-  children: PropTypes.object.isRequired,
+  optionId: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  isChecked: PropTypes.bool.isRequired,
+  onChecked: PropTypes.func.isRequired,
+  children: PropTypes.array.isRequired,
 };
 
 export default withTranslation()(CustomizeFunctionOption);

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

@@ -37,13 +37,28 @@ class CustomizeBehaviorSetting extends React.Component {
   }
 
   render() {
-    const { t } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <React.Fragment>
         <h2>{t('customize_page.Function')}</h2>
         <p className="well">{ t('customize_page.function_choose') }</p>
-        <CustomizeFunctionOption />
+
+        <CustomizeFunctionOption
+          optionId="isEnabledTimeline"
+          label={t('customize_page.Timeline function')}
+          isChecked={adminCustomizeContainer.state.isEnabledTimeline}
+          onChecked={() => { adminCustomizeContainer.switchEnableTimeline() }}
+        >
+          <p className="help-block">
+            { t('customize_page.subpage_display') }
+          </p>
+          <p className="help-block">
+            { t('customize_page.performance_decrease') }<br />
+            { t('customize_page.list_page_display') }
+          </p>
+        </CustomizeFunctionOption>
+
         <AdminUpdateButtonRow onClick={this.onClickSubmit} />
       </React.Fragment>
     );

src/client/js/services/AdminCustomizeContainer.js

@@ -15,6 +15,7 @@ export default class AdminCustomizeContainer extends Container {
       currentTheme: appContainer.config.themeType,
       currentLayout: appContainer.config.layoutType,
       currentBehavior: appContainer.config.behaviorType,
+      isEnabledTimeline: appContainer.config.isEnabledTimeline,
     };
 
   }
@@ -51,6 +52,13 @@ export default class AdminCustomizeContainer extends Container {
     this.setState({ currentBehavior: behaviorName });
   }
 
+  /**
+   * Switch enabledTimeLine
+   */
+  switchEnableTimeline() {
+    this.setState({ isEnabledTimeline:  !this.state.isEnabledTimeline });
+  }
+
   /**
    * Update layout
    * @memberOf AdminCustomizeContainer