fix: add dts to image cropper

Adslot · Jul 12, 2022 · 8343250 · 8343250
1 parent 221543f
commit 8343250
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ActionPanel/index.d.ts b/src/components/ActionPanel/index.d.ts
@@ -12,6 +12,7 @@ export interface ActionPanelProps {
   closeIcon?: React.ReactNode;
   isModal?: boolean;
   cancelText?: string;
+  dts?: string;
 }
 
 declare const ActionPanel: React.FC<ActionPanelProps>;

diff --git a/src/components/ActionPanel/index.jsx b/src/components/ActionPanel/index.jsx
@@ -2,11 +2,12 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import { expandDts } from '../../lib/utils';
 import Button from '../Button';
 import './styles.css';
 
 const ActionPanel = React.forwardRef((props, ref) => {
-  const { title, className, size, onClose, children, actionButton, isModal, closeIcon, cancelText } = props;
+  const { title, className, size, onClose, children, actionButton, isModal, closeIcon, cancelText, dts } = props;
 
   const addBodyClass = (classname) => document.body.classList.add(classname);
   const removeBodyClass = (classname) => document.body.classList.remove(classname);
@@ -29,6 +30,7 @@ const ActionPanel = React.forwardRef((props, ref) => {
         <div
           data-testid="action-panel-wrapper"
           className={classNames('aui--action-panel', `is-${size}`, { 'action-modal': isModal }, className)}
+          {...expandDts(dts)}
         >
           <div
             data-testid="action-panel-header"
@@ -76,6 +78,7 @@ ActionPanel.propTypes = {
   closeIcon: PropTypes.node,
   isModal: PropTypes.bool,
   cancelText: PropTypes.string,
+  dts: PropTypes.string,
 };
 
 ActionPanel.defaultProps = {

diff --git a/src/components/ImageCropper/index.d.ts b/src/components/ImageCropper/index.d.ts
@@ -11,6 +11,7 @@ export interface ImageCropperProps {
   height?: number;
   aspectRatio?: number;
   isSaving?: boolean;
+  dts?: string;
 }
 
 declare const ImageCropper: React.ForwardRefExoticComponent<

diff --git a/src/components/ImageCropper/index.jsx b/src/components/ImageCropper/index.jsx
@@ -1,9 +1,9 @@
 import React, { useImperativeHandle, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Cropper from 'cropperjs';
-import 'cropperjs/dist/cropper.css';
 import Button from '../Button';
 import ActionPanel from '../ActionPanel';
+import 'cropperjs/dist/cropper.css';
 import './styles.css';
 
 // https://github.com/fengyuanchen/cropperjs/blob/v2/README.md
@@ -17,49 +17,56 @@ const defaultOptions = {
   toggleDragModeOnDblclick: false,
 };
 
-const ImageCropper = forwardRef(({ title, src, alt, onCancel, onCrop, width, height, aspectRatio, isSaving }, ref) => {
-  const cropperRef = React.useRef();
-  const imageRef = React.useRef();
+const ImageCropper = forwardRef(
+  ({ title, src, alt, onCancel, onCrop, width, height, aspectRatio, isSaving, dts }, ref) => {
+    const cropperRef = React.useRef();
+    const imageRef = React.useRef();
 
-  React.useEffect(() => {
-    if (!cropperRef.current) return;
-    cropperRef.current.setAspectRatio(aspectRatio);
-  }, [cropperRef, aspectRatio]);
+    React.useEffect(() => {
+      if (!cropperRef.current) return;
+      cropperRef.current.setAspectRatio(aspectRatio);
+    }, [cropperRef, aspectRatio]);
 
-  React.useEffect(() => {
-    cropperRef.current = new Cropper(imageRef.current, {
-      aspectRatio,
-      ...defaultOptions,
-    });
+    React.useEffect(() => {
+      cropperRef.current = new Cropper(imageRef.current, {
+        aspectRatio,
+        ...defaultOptions,
+      });
 
-    return () => {
-      cropperRef.current.destroy();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+      return () => {
+        cropperRef.current.destroy();
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-  useImperativeHandle(ref, () => ({
-    getCropper: () => cropperRef,
-  }));
+    useImperativeHandle(ref, () => ({
+      getCropper: () => cropperRef,
+    }));
 
-  const uploadButton = (
-    <Button color="primary" onClick={() => onCrop(cropperRef.current.getData())} isLoading={isSaving} variant="inverse">
-      Upload
-    </Button>
-  );
-
-  return (
-    <ActionPanel title={title} onClose={onCancel} actionButton={uploadButton}>
-      <div
-        data-testid="image-cropper"
-        className="image-cropper"
-        style={{ width: width || '100%', height: height || '100%' }}
+    const uploadButton = (
+      <Button
+        color="primary"
+        onClick={() => onCrop(cropperRef.current.getData())}
+        isLoading={isSaving}
+        variant="inverse"
       >
-        <img data-testid="image-cropper-img" src={src} ref={imageRef} alt={alt} />
-      </div>
-    </ActionPanel>
-  );
-});
+        Upload
+      </Button>
+    );
+
+    return (
+      <ActionPanel title={title} onClose={onCancel} actionButton={uploadButton} dts={dts}>
+        <div
+          data-testid="image-cropper"
+          className="image-cropper"
+          style={{ width: width || '100%', height: height || '100%' }}
+        >
+          <img data-testid="image-cropper-img" src={src} ref={imageRef} alt={alt} />
+        </div>
+      </ActionPanel>
+    );
+  }
+);
 
 ImageCropper.propTypes = {
   title: PropTypes.string,
@@ -71,6 +78,7 @@ ImageCropper.propTypes = {
   height: PropTypes.number,
   aspectRatio: PropTypes.number,
   isSaving: PropTypes.bool,
+  dts: PropTypes.string,
 };
 
 ImageCropper.defaultProps = {

diff --git a/www/containers/props.json b/www/containers/props.json
@@ -170,6 +170,13 @@
             "value": "'Cancel'",
             "computed": false
           }
+        },
+        "dts": {
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": ""
         }
       }
     }
@@ -2195,6 +2202,13 @@
             "value": "false",
             "computed": false
           }
+        },
+        "dts": {
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": ""
         }
       }
     }