split option

src/client/js/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -33,40 +33,56 @@ class LineBreakForm extends React.Component {
     }
   }
 
-
-  render() {
+  renderLineBreakOption() {
     const { t, markDownSettingContainer } = this.props;
-    const { isEnabledLinebreaks, isEnabledLinebreaksInComments } = markDownSettingContainer.state;
+    const { isEnabledLinebreaks } = markDownSettingContainer.state;
 
     return (
-      // TODO GW-322 adjust layout
-      <React.Fragment>
-        <fieldset className="row">
-          <div className="form-group">
-            <div className="col-xs-4 text-right">
-              <div className="checkbox checkbox-success" onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}>
-                <input type="checkbox" name="isEnabledLinebreaks" checked={isEnabledLinebreaks} />
-                <label>
-                  { t('markdown_setting.Enable Line Break') }
-                </label>
-                <p className="help-block">{ t('markdown_setting.Enable Line Break desc') }</p>
-              </div>
+      <fieldset className="row">
+        <div className="form-group">
+          <div className="col-xs-4 text-right">
+            <div className="checkbox checkbox-success" onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}>
+              <input type="checkbox" name="isEnabledLinebreaks" checked={isEnabledLinebreaks} />
+              <label>
+                { t('markdown_setting.Enable Line Break') }
+              </label>
+              <p className="help-block">{ t('markdown_setting.Enable Line Break desc') }</p>
             </div>
           </div>
-        </fieldset>
-        <fieldset className="row">
-          <div className="form-group my-3">
-            <div className="col-xs-4 text-right">
-              <div className="checkbox checkbox-success" onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}>
-                <input type="checkbox" name="isEnabledLinebreaksInComments" checked={isEnabledLinebreaksInComments} />
-                <label>
-                  { t('markdown_setting.Enable Line Break for comment') }
-                </label>
-                <p className="help-block">{ t('markdown_setting.Enable Line Break for comment desc') }</p>
-              </div>
+        </div>
+      </fieldset>
+    );
+  }
+
+  renderLineBreakInCommentOption() {
+    const { t, markDownSettingContainer } = this.props;
+    const { isEnabledLinebreaksInComments } = markDownSettingContainer.state;
+
+    return (
+      <fieldset className="row">
+        <div className="form-group my-3">
+          <div className="col-xs-4 text-right">
+            <div className="checkbox checkbox-success" onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}>
+              <input type="checkbox" name="isEnabledLinebreaksInComments" checked={isEnabledLinebreaksInComments} />
+              <label>
+                { t('markdown_setting.Enable Line Break for comment') }
+              </label>
+              <p className="help-block">{ t('markdown_setting.Enable Line Break for comment desc') }</p>
             </div>
           </div>
-        </fieldset>
+        </div>
+      </fieldset>
+    );
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      // TODO GW-322 adjust layout
+      <React.Fragment>
+        {this.renderLineBreakOption()}
+        {this.renderLineBreakInCommentOption()}
         <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <button type="submit" className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</button>