refactoring info-view into reusable components

2021-07-18 19:26:34 -07:00
parent fdfede5069
commit 094173fe02
6 changed files with 304 additions and 213 deletions
@@ -0,0 +1,70 @@
+// Edit account parameters.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Cropper from './cropper.jsx';
+import { imageCrop } from '../lib/blob-helpers.js';
+
+export default class AvatarCrop extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+      scale: 1
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  // Cut out in image coordinates and desired scale factor.
+  handleChange(left, top, width, height, scale) {
+    this.setState({
+      left: left,
+      top: top,
+      width: width,
+      height: height,
+      scale: scale
+    });
+  }
+
+  handleSubmit() {
+    imageCrop(this.props.mime, this.props.avatar,
+      this.state.left, this.state.top,
+      this.state.width, this.state.height,
+      this.state.scale,
+      (mime, blob, width, height) => {
+        this.props.onSubmit(mime, blob, width, height);
+      },
+      (err) => {
+        this.props.onError(err);
+      }
+    );
+  }
+
+  render() {
+    return (
+      <div className="panel-form">
+        <div className="panel-form-row">
+          <Cropper
+            source={this.props.avatar}
+            onChange={this.handleChange} />
+        </div>
+        <div className="dialog-buttons">
+          {this.props.onCancel ?
+            <button className="secondary" onClick={this.props.onCancel}>
+              <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
+            </button>
+            : null}
+          <button className="primary" onClick={this.handleSubmit}>
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+};