image crop modalization

src/client/js/components/ProfileImageUploader.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Modal from 'react-bootstrap/es/Modal';
 import { withTranslation } from 'react-i18next';
 
 import ReactCrop from 'react-image-crop';
@@ -19,6 +20,7 @@ class ProfileImageUploader extends React.Component {
         unit: '%',
         width: 30,
         aspect: 1,
+        show: true,
       },
     };
 
@@ -29,6 +31,7 @@ class ProfileImageUploader extends React.Component {
     this.makeClientCrop = this.makeClientCrop.bind(this);
     this.getCroppedImg = this.getCroppedImg.bind(this);
     this.hanndleSubmit = this.handleSubmit.bind(this);
+    this.cancel = this.cancel.bind(this);
   }
 
   onSelectFile(e) {
@@ -37,6 +40,7 @@ class ProfileImageUploader extends React.Component {
       reader.addEventListener('load', () => this.setState({ src: reader.result }));
       reader.readAsDataURL(e.target.files[0]);
     }
+    this.show();
   }
 
   // If you setState the crop in here you should return false.
@@ -94,29 +98,57 @@ class ProfileImageUploader extends React.Component {
     // の処理を node で記述
   }
 
+  show() {
+    this.setState({ show: true });
+  }
+
+  hide() {
+    this.setState({ show: false });
+  }
+
+
+  cancel() {
+    this.hide();
+  }
+
   render() {
+    const { t } = this.props;
     const { crop, src } = this.state;
 
     return (
-      <div className="App">
+      <div className="ProfileImageUploader">
+        <div className="form-group">
+          <label htmlFfor="" className="col-sm-4 control-label">
+            {t('Upload new image')}
+          </label>
+        </div>
         <input type="file" onChange={this.onSelectFile} name="profileImage" accept="image/*" />
         {src
         && (
-        <div>
-          <ReactCrop
-            src={src}
-            crop={crop}
-            onImageLoaded={this.onImageLoaded}
-            onComplete={this.onCropComplete}
-            onChange={this.onCropChange}
-          />
-          <button
-            type="button"
-            onClick={this.handleSubmit}
-          >
-          完了
-          </button>
-        </div>
+          <Modal show={this.state.show} onHide={this.cancel}>
+            <Modal.Header closeButton>
+              <Modal.Title>Modal heading</Modal.Title>
+            </Modal.Header>
+            <Modal.Body className="my-5">
+              <ReactCrop
+                src={src}
+                crop={crop}
+                circularCrop
+                onImageLoaded={this.onImageLoaded}
+                onComplete={this.onCropComplete}
+                onChange={this.onCropChange}
+              />
+              <button
+                type="button"
+                onClick={this.handleSubmit}
+                className="my-3"
+              >
+              完了
+              </button>
+            </Modal.Body>
+            <Modal.Footer>
+            </Modal.Footer>
+          </Modal>
         )}
       </div>
     );
@@ -132,6 +164,7 @@ const ProfileImageFormWrapper = (props) => {
 };
 
 ProfileImageUploader.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 

src/server/views/me/index.html

@@ -137,6 +137,8 @@
         <img src="{{ user|gravatar }}" width="64">
       </div><!-- /.col-sm* -->
 
+    <!-- 削除ここから -->
+
       <div class="form-group col-md-4 col-sm-7">
         <h4>
           <div class="radio radio-primary">
@@ -163,24 +165,24 @@
             </form>
             </p>
           </div>
-        </div><!-- /.form-group -->
+        </div> <!-- /.form-group -->
 
         <div class="form-group">
-          <label for="" class="col-sm-4 control-label">
+          <div id="profile-image-uploader"></div>
+          <!-- <label for="" class="col-sm-4 control-label">
             {{ t('Upload new image') }}
           </label>
           <div class="col-sm-8">
             {% if fileUploadService.getIsUploadable() %}
             <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-horizontal" role="form">
               <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <div id="profile-image-uploader"></div>
               <div id="pictureUploadFormProgress" class="d-flex align-items-center">
               </div>
             </form>
             {% else %}
             * {{ t('page_me.form_help.profile_image1') }}<br>
             * {{ t('page_me.form_help.profile_image2') }}<br>
-            {% endif %}
+            {% endif %} -->
           </div>
         </div><!-- /.form-group -->
 
@@ -192,6 +194,8 @@
         </div>
       </div>
 
+      <!-- 削除ここまで -->
+
     </fieldset>
   </div><!-- /.form-box -->