fix:inputImage 裁剪模式可配置可旋转，但是功能无效 (#2310)

Co-authored-by: sqzhou <zhoushengqiang01@baidu.com>

scss/components/form/_image.scss

@@ -200,6 +200,17 @@
       padding: 2px 5px;
       cursor: pointer;
       font-size: 20px;
+
+      .icon-retry {
+
+        polygon {
+          fill: #fff;
+        }
+
+        path {
+          stroke: #fff;
+        }
+      }
     }
   }
 

src/locale/de-DE.ts

@@ -201,5 +201,6 @@ register('de-DE', {
   'Wizard.prev': 'Zurück',
   'Wizard.saveAndNext': 'Speichern & Weiter',
   'year-to-year': '{{from}} - {{to}}',
-  'Year.placeholder': 'Wählen Sie ein Jahr'
+  'Year.placeholder': 'Wählen Sie ein Jahr',
+  'rotate': 'Drehen'
 });

src/locale/en-US.ts

@@ -201,5 +201,6 @@ register('en-US', {
   'Wizard.prev': 'Prev',
   'Wizard.saveAndNext': 'Save & Next',
   'year-to-year': '{{from}} - {{to}}',
-  'Year.placeholder': 'Select a Year'
+  'Year.placeholder': 'Select a Year',
+  'rotate': 'Rotate'
 });

src/locale/zh-CN.ts

@@ -205,5 +205,6 @@ register('zh-CN', {
   'Wizard.prev': '上一步',
   'Wizard.saveAndNext': '保存并下一步',
   'year-to-year': '{{from}} 年 - {{to}} 年',
-  'Year.placeholder': '请选择年'
+  'Year.placeholder': '请选择年',
+  'rotate': '旋转'
 });

src/renderers/Form/InputImage.tsx

@@ -408,6 +408,7 @@ export default class ImageControl extends React.Component<
     this.handleCrop = this.handleCrop.bind(this);
     this.handleDropRejected = this.handleDropRejected.bind(this);
     this.cancelCrop = this.cancelCrop.bind(this);
+    this.rotatableCrop = this.rotatableCrop.bind(this);
     this.handleImageLoaded = this.handleImageLoaded.bind(this);
     this.handleFrameImageLoaded = this.handleFrameImageLoaded.bind(this);
     this.startUpload = this.startUpload.bind(this);
@@ -875,6 +876,10 @@ export default class ImageControl extends React.Component<
     );
   }
 
+  rotatableCrop() {
+    this.cropper.current!.rotate(90);
+  }
+
   addFiles(files: Array<FileX>) {
     if (!files.length) {
       return;
@@ -1208,6 +1213,17 @@ export default class ImageControl extends React.Component<
               <Cropper {...crop} ref={this.cropper} src={cropFile.preview} />
             </Suspense>
             <div className={cx('ImageControl-croperToolbar')}>
+              {
+                crop.rotatable &&
+                <a
+                  className={cx('ImageControl-cropRotatable')}
+                  onClick={this.rotatableCrop}
+                  data-tooltip={__('rotate')}
+                  data-position="left"
+                >
+                  <Icon icon="retry" className="icon" />
+                </a>
+              }
               <a
                 className={cx('ImageControl-cropCancel')}
                 onClick={this.cancelCrop}