apply map to show all grid-division-menu-options

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

@@ -124,40 +124,29 @@ export default class GridEditModal extends React.PureComponent {
 }
 
 function GridDivisionMenu() {
+  const gridDivisions = geu.mappingAllGridDivisionPatterns;
   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>
+        {gridDivisions.map((gridDivion, i) => {
+          return (
+            <div className="col-md-4 text-center">
+              <h6 className="dropdown-header">{i + 2}分割</h6>
+              {gridDivion.map((gridOneDivision) => {
+                return (
+                  <a className="dropdown-item" href="#">
+                    <div className="row">
+                      {gridOneDivision.map((gtd) => {
+                        const className = `bg-info col-${gtd} border`;
+                        return <span className={className}>{gtd}</span>;
+                      })}
+                    </div>
+                  </a>
+                );
+              })}
             </div>
-          </a>
-        </div>
+          );
+        })}
       </div>
     </div>
   );