Update Maintenance Mode

src/container/GeneralSetting/MaintenanceMode.js

@@ -73,6 +73,7 @@ class MaintenanceMode extends Component {
         super(props)
         this.editorRef = React.createRef();
         this.editorRefEmail = React.createRef();
+        this.editorRefContent = React.createRef();
         // this.handleChange = this.handleChange.bind(this)
         this.state = {
             load: false,
@@ -81,7 +82,7 @@ class MaintenanceMode extends Component {
             mailcontentModeNonActive: "",
             checkedB: true,
             headline: '',
-            maintenanceContent: '',
+            maintenanceContent: "",
             subjectMailActive: '',
             subjectMailNonActive: '',
             maintenanceID: null,
@@ -464,6 +465,88 @@ class MaintenanceMode extends Component {
         reader.readAsDataURL(uploadFile);
     }
 
+    handleImageUploadBeforeContent(files, info, uploadHandler) {
+        // uploadHandler is a function
+        console.log(files, info, uploadHandler)
+        try {
+            this.ResizeImage(files, uploadHandler)
+        } catch (err) {
+            uploadHandler(err.toString())
+        }
+    }
+    handleImageUploadContent(targetImgElement, index, state, imageInfo, remainingFilesCount) {
+        console.log(targetImgElement, index, state, imageInfo, remainingFilesCount)
+    }
+
+    handleImageUploadErrorContent(errorMessage, result) {
+        console.log(errorMessage, result)
+    }
+
+    handleEditorChangeContent(value) {
+        // console.log(value);
+        this.setState({ maintenanceContent: value })
+
+        // setContent(value)
+    }
+
+    handleDropContent(event) {
+        console.log(event); //Get the drop event
+    }
+
+    handleBlurContent(event, editorContents) {
+        console.log(event, editorContents); //Get the blur event
+    }
+
+    imageUploadHandlerContent(xmlHttpRequest, info, core) {
+        console.log(xmlHttpRequest, info, core)
+    }
+
+    ResizeImageContent(files, uploadHandler) {
+        const uploadFile = files[0];
+        const img = document.createElement('img');
+        const canvas = document.createElement('canvas');
+        const reader = new FileReader();
+
+        console.log(uploadFile);
+
+        reader.onload = function (e) {
+            img.src = e.target.result
+            img.onload = function () {
+                let ctx = canvas.getContext("2d");
+                ctx.drawImage(img, 0, 0);
+
+                const MAX_WIDTH = 200;
+                const MAX_HEIGHT = 100;
+                let width = img.width;
+                let height = img.height;
+
+                if (width > height) {
+                    if (width > MAX_WIDTH) {
+                        height *= MAX_WIDTH / width;
+                        width = MAX_WIDTH;
+                    }
+                } else {
+                    if (height > MAX_HEIGHT) {
+                        width *= MAX_HEIGHT / height;
+                        height = MAX_HEIGHT;
+                    }
+                }
+
+                canvas.width = width;
+                canvas.height = height;
+
+                ctx = canvas.getContext("2d");
+                ctx.drawImage(img, 0, 0, width, height);
+
+                canvas.toBlob(function (blob) {
+                    uploadHandler([new File([blob], uploadFile.name)])
+                }, uploadFile.type, 1);
+            }
+        }
+
+        reader.readAsDataURL(uploadFile);
+    }
+
     render() {
 
         const loadingComponent = (
@@ -490,7 +573,7 @@ class MaintenanceMode extends Component {
                         <Typography style={{ fontSize: '16px', color: 'white' }}>Maintenance Mode</Typography>
                     </div>
                     <div style={{ padding: 20, width: '100%' }}>
-                        <Paper style={{ paddingTop: 10, paddingBottom: 50}}>
+                        <Paper style={{ paddingTop: 10, paddingBottom: 50 }}>
                             <div style={{ display: 'flex', justifyContent: 'space-between', margin: 10, borderBottom: 'solid 2px #00000057', height: '100%' }}>
                                 <div >
                                     <Typography style={{ fontSize: '17px', color: '#4b4b4b', margin: 10 }}>General Setting - Maintenance Mode</Typography>
@@ -560,20 +643,39 @@ class MaintenanceMode extends Component {
                                         </div>
                                     </div>
                                 </div>
-                                <div style={{ display: 'flex', marginTop: 20, width: '100%', justifyContent: 'space-between' }}>
+                                <div style={{ display: 'flex', marginTop: 15, width: '100%', justifyContent: 'space-between' }}>
                                     <Typography style={{ marginTop: 13, width: '20%', color: '#656565', fontSize: 14 }}>Content</Typography>
                                     <div style={{ width: '80%', margin: 0, marginTop: 10 }}>
-                                        <div>
-                                            <TextField
-                                                variant="outlined"
-                                                id="maintenanceContent"
-                                                name="maintenanceContent"
-                                                onChange={(e) => this.handleChange(e, '')}
-                                                value={this.state.maintenanceContent}
-                                                style={{ width: '80%' }}
-                                                multiline
-                                                maxRows={4}
-                                                inputProps={{ style: { color: '#656565' } }}
+                                        <div style={{ marginTop: 20 }}>
+                                            <SunEditor
+                                                showToolbar={true}
+                                                enableToolbar={true}
+                                                ref={this.editorRefContent}
+                                                width={"100%"}
+                                                setOptions={{
+                                                    width: '80%',
+                                                    height: 300,
+                                                    buttonList: [
+                                                        // default
+                                                        ['undo', 'redo'],
+                                                        ['font', 'fontSize', 'formatBlock'],
+                                                        ['paragraphStyle', 'blockquote'],
+                                                        ['fontColor', 'hiliteColor', 'textStyle'],
+                                                        ['bold', 'underline', 'italic', 'list', 'align'],
+                                                        ['table', 'link', 'image'],
+                                                        ['fullScreen']
+                                                    ]
+                                                    // buttonList: buttonList.formatting // Or Array of button list, eg. [['font', 'align'], ['image']]
+                                                    // Other option
+                                                }}
+                                                onChange={this.handleEditorChangeContent.bind(this)}
+                                                setContents={this.state.maintenanceContent}
+                                                onDrop={this.handleDropContent.bind(this)}
+                                                imageUploadHandler={this.imageUploadHandlerContent.bind(this)}
+                                                onBlur={this.handleBlurContent.bind(this)}
+                                                onImageUploadBefore={this.handleImageUploadBeforeContent.bind(this)}
+                                                onImageUpload={this.handleImageUploadContent.bind(this)}
+                                                onImageUploadError={this.handleImageUploadErrorContent.bind(this)}
                                             />
                                         </div>
                                     </div>