Merge branch 'imprv/change-modal-layout' into implement-layout-in-modal

# Conflicts:
#	src/client/js/components/PageEditor/GridEditModal.jsx
#	src/client/styles/scss/_on-edit.scss

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
+import geu from './GridEditorUtil';
 
 export default class GridEditModal extends React.PureComponent {
 
@@ -44,8 +45,10 @@ export default class GridEditModal extends React.PureComponent {
 
   pasteCodedGrid() {
     // dummy data
-    const pastedGridData = `::: editable-row\n<div class="container">\n  <div class="row">
-    <div class="col-sm-6 col-md-5 col-lg-12">dummy</div>\n  </div>\n</div>\n:::`;
+    const convertedHTML = geu.convertRatiosAndSizeToHTML([1, 5, 6], 'sm');
+    const pastedGridData = `::: editable-row\n<div class="container">\n\t<div class="row">\n${convertedHTML}\n\t</div>\n</div>\n:::`;
+    // display converted html on console
+    console.log(convertedHTML);
 
     if (this.props.onSave != null) {
       this.props.onSave(pastedGridData);
@@ -56,7 +59,7 @@ export default class GridEditModal extends React.PureComponent {
 
   render() {
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl">
+      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl" className="grw-grid-edit-modal">
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
           Create Bootstrap 4 Grid
         </ModalHeader>
@@ -79,11 +82,8 @@ export default class GridEditModal extends React.PureComponent {
                   >
                     Grid Pattern
                   </button>
-                  <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                    {/* TODO GW-3136 implement inside dropdown menu */}
-                    <a className="dropdown-item" href="#">6:6</a>
-                    <a className="dropdown-item" href="#">4:8</a>
-                    <a className="dropdown-item" href="#">8:4</a>
+                  <div className="dropdown-menu grid-division-menu" aria-labelledby="dropdownMenuButton">
+                    <GridDivisionMenu />
                   </div>
                 </div>
               </div>
@@ -181,6 +181,46 @@ export default class GridEditModal extends React.PureComponent {
 
 }
 
+function GridDivisionMenu() {
+  return (
+    <div className="container">
+      <div className="row">
+        {/* TODO: add other grid patterns by GW-3189 */}
+        <div className="col-md-4 text-center">
+          <h6 className="dropdown-header">2分割</h6>
+          <a className="dropdown-item" href="#">
+            <div className="row">
+              <span className="bg-info col-6 border">6</span>
+              <span className="bg-info col-6 border">6</span>
+            </div>
+          </a>
+        </div>
+        <div className="col-md-4 text-center">
+          <h6 className="dropdown-header">3分割</h6>
+          <a className="dropdown-item" href="#">
+            <div className="row">
+              <span className="bg-info col-4 border">4</span>
+              <span className="bg-info col-4 border">4</span>
+              <span className="bg-info col-4 border">4</span>
+            </div>
+          </a>
+        </div>
+        <div className="col-md-4 text-center">
+          <h6 className="dropdown-header">4分割</h6>
+          <a className="dropdown-item" href="#">
+            <div className="row">
+              <span className="bg-info col-3 border">3</span>
+              <span className="bg-info col-3 border">3</span>
+              <span className="bg-info col-3 border">3</span>
+              <span className="bg-info col-3 border">3</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 GridEditModal.propTypes = {
   onSave: PropTypes.func,
 };

src/client/js/components/PageEditor/GridEditorUtil.js

@@ -114,6 +114,14 @@ class GridEditorUtil {
     editor.getDoc().setCursor(curPos.line + 1, 2);
   }
 
+  convertRatiosAndSizeToHTML(ratioNumbers, responsiveSize) {
+    const cols = ratioNumbers.map((ratioNumber, i) => {
+      const className = `col${responsiveSize !== 'xs' ? `-${responsiveSize}` : ''}-${ratioNumber} bsGrid${i + 1}`;
+      return `<div class="${className}"></div>`;
+    });
+    return cols.join('\n');
+  }
+
 }
 
 // singleton pattern

src/client/styles/scss/_on-edit.scss

@@ -323,3 +323,9 @@ body.on-edit {
 .border-mobile {
   height: 200px;
 }
+
+.grw-grid-edit-modal {
+  .grid-division-menu {
+    width: 600px;
+  }
+}