@@ -19,7 +20,7 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
>
- {value}
+ {currentOption?.display ?? value}
@@ -43,19 +44,19 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
{options.map((item, i) => (
- {item}
+ {item?.display ?? item}
- {value === item && (
+ {value === (item?.value ?? item) && (
diff --git a/client/src/utils/screenshotContext.jsx b/client/src/utils/screenshotContext.jsx
index cc0ecfc640..c51ccdea78 100644
--- a/client/src/utils/screenshotContext.jsx
+++ b/client/src/utils/screenshotContext.jsx
@@ -1,14 +1,37 @@
import React, { createContext, useRef, useContext, useCallback } from 'react';
-import { useScreenshot as useScreenshot_ } from 'use-react-screenshot';
+import html2canvas from 'html2canvas';
const ScreenshotContext = createContext({});
export const useScreenshot = () => {
const { ref } = useContext(ScreenshotContext);
- const [image, takeScreenshot] = useScreenshot_();
+
+ const takeScreenShot = node => {
+ if (!node) {
+ throw new Error('You should provide correct html node.');
+ }
+ return html2canvas(node).then(canvas => {
+ const croppedCanvas = document.createElement('canvas');
+ const croppedCanvasContext = croppedCanvas.getContext('2d');
+ // init data
+ const cropPositionTop = 0;
+ const cropPositionLeft = 0;
+ const cropWidth = canvas.width;
+ const cropHeight = canvas.height;
+
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+
+ croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);
+
+ const base64Image = croppedCanvas.toDataURL('image/png', 1);
+
+ return base64Image;
+ });
+ };
const captureScreenshot = () => {
- return takeScreenshot(ref.current);
+ return takeScreenShot(ref.current);
};
return { screenshotTargetRef: ref, captureScreenshot };