Merge pull request #2834 from weseek/feat/grid-edit-modal-for-master-merge-yan

Feat/grid edit modal for master merge yan

resource/locales/en_US/translation.json

@@ -752,5 +752,8 @@
     "complete_to_install1":"Complete to Install GROWI ! Please login as admin account.",
     "complete_to_install2":"Complete to Install GROWI ! Please check each settings on this page first.",
     "failed_to_create_admin_user":"Failed to create admin user. {{errMessage}}"
+  },
+  "grid_edit":{
+    "create_bootstrap_4_grid":"Create Bootstrap 4 Grid"
   }
 }

resource/locales/ja_JP/translation.json

@@ -745,5 +745,8 @@
     "complete_to_install1":"GROWI のインストールが完了しました！管理者アカウントでログインしてください。",
     "complete_to_install2":"GROWI のインストールが完了しました！はじめに、このページで各種設定を確認してください。",
     "failed_to_create_admin_user":"管理ユーザーの作成に失敗しました。{{errMessage}}"
+  },
+  "grid_edit":{
+    "create_bootstrap_4_grid":"Bootstrap 4 グリッドを作成"
   }
 }

resource/locales/zh_CN/translation.json

@@ -751,5 +751,8 @@
 		"complete_to_install1": "完成安装GROWI！请以管理员帐户登录。",
 		"complete_to_install2": "完成安装GROWI！请先检查此页上的每个设置。",
 		"failed_to_create_admin_user": "无法创建管理用户。{{errMessage}"
-	}
+	},
+  "grid_edit":{
+    "create_bootstrap_4_grid":"创建Bootstrap 4网格"
+  }
 }

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
 import geu from './GridEditorUtil';
 import BootstrapGrid from '../../models/BootstrapGrid';
 
@@ -12,7 +13,7 @@ const resSizeObj = {
   [resSizes.SM_SIZE]: { iconClass: 'icon-screen-tablet', displayText: 'Tablet' },
   [resSizes.MD_SIZE]: { iconClass: 'icon-screen-desktop', displayText: 'Desktop' },
 };
-export default class GridEditModal extends React.Component {
+class GridEditModal extends React.Component {
 
   constructor(props) {
     super(props);
@@ -275,10 +276,11 @@ export default class GridEditModal extends React.Component {
   }
 
   render() {
+    const { t } = this.props;
     return (
       <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
+          {t('grid_edit.create_bootstrap_4_grid')}
         </ModalHeader>
         <ModalBody>
           <div className="container">
@@ -342,4 +344,6 @@ export default class GridEditModal extends React.Component {
 
 GridEditModal.propTypes = {
   onSave: PropTypes.func,
+  t: PropTypes.func.isRequired,
 };
+export default withTranslation('translation', { withRef: true })(GridEditModal);