@capillarytech/creatives-library 2.0.66 → 2.0.69

package/components/Ckeditor/index.js

@@ -13,7 +13,7 @@ import React from 'react';
 import _ from 'lodash';
 // import messages from './messages';
 const loadScript = require('load-script');
-const defaultScriptUrl = "https://cdn.ckeditor.com/4.5.0/full/ckeditor.js";
+const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.11.4/ckeditor.js";
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {
@@ -70,10 +70,16 @@ const CKEditorConfig = {
 class Ckeditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-
+    const config = CKEditorConfig;
+    if (this.props.channel && this.props.channel.toLowerCase() === 'wechat') {
+      config.startupFocus = false;
+      config.toolbar[6].items = ['Table', 'HorizontalRule', 'Smiley'];
+      config.width = 'calc(100% - 70px)';
+      config.height = 'calc(100vh - 450px)';
+    }
     //State initialization
     this.state = {
-      config: CKEditorConfig,
+      config,
       events: {
         blur: this.onBlur,
         afterPaste: this.afterPaste,
@@ -157,6 +163,24 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     _.forEach(this.props.events, (event, index) => {
       this.editorInstance.on(index, event);
     });
+    if (this.props.channel.toLowerCase() === 'wechat') {
+      this.editorInstance.on('blur', this.onFocusOut);
+      _.forEach(this.props.events, (event, index) => {
+        this.editorInstance.on(index, event);
+      });
+      this.editorInstance.on('focus', this.onFocusIn);
+      _.forEach(this.props.events, (event, index) => {
+        this.editorInstance.on(index, event);
+      });
+    }
+  }
+
+  onFocusOut = () => {
+    this.props.onFocusOut();
+  }
+
+  onFocusIn = () => {
+    this.props.onFocusIn();
   }
 
   delay(callback, ms) {
@@ -201,6 +225,9 @@ Ckeditor.propTypes = {
   events: PropTypes.object,
   getEditorInstanse: PropTypes.func,
   handleContentChange: PropTypes.func,
+  channel: PropTypes.string,
+  onFocusOut: PropTypes.func,
+  onFocusIn: PropTypes.func,
 };
 
 export default Ckeditor;

package/components/FormBuilder/index.js

@@ -1967,10 +1967,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       // }
       return;
     }
-    val.injectedEvents[event].call(this.props.parent, data);
+    console.log('Call Event ', event, data, this.props.parent);
+    // val.injectedEvents[event].call(this.props.parent, data);
+    val.injectedEvents[event].call(this.props.parent, data, val.id);
   }
-  openFileDialog = () => {
-    document.getElementById("fileName").click();
+  openFileDialog = (e, parentID) => {
+    console.log("filedialog: ");
+    document.querySelector(`#${parentID} #fileName`).click();
   };
   handleOk = (ev) => {
     const id = ev.target.id;
@@ -2036,6 +2039,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     e.preventDefault();
     const _URL = window.URL || window.webkitURL;
     const file = files[0];
+    if (val.supportedExtensions) {
+      const allowedExtensions = /(\.bmp|\.jpeg|\.png|\.gif|\.jpg)$/i;
+      if (!allowedExtensions.exec(file.name)) {
+        this.callChildEvent({file, type: 'wrong file'}, val, val.submitAction);
+      }
+    }
     const img = new Image();
     img.src = _URL.createObjectURL(file);
     img.onload = () => {
@@ -2689,8 +2698,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               <CapColumn span={val.width} offset={val.offset} style={val.style}>
                 {val.showPreview && <WithLabel key={`${val.id}-with-label`} {...rest} errorMessage={ifError && errorMessage}/>}
                 <form encType="multipart/form-data" id={val.id}>
-                  <input key={val.id} style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files}, val)} accept="image/*" />
-                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e)} style={{float: 'right', marginTop: '-68px'}}>
+                  <input key={val.id} style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files}, val)} accept={val.supportedExtensions ? val.supportedExtensions : "image/*"} />
+                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right'}}>
                     {val.label}
                   </CapButton>
                 </form>
@@ -2891,31 +2900,46 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
             break;
           case "ckeditor": {
-            if (_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`])) {
-              return true;
-            }
-            let langIndex = 0;
-            if (val.id.indexOf('template-content') > -1 && val.id !== 'template-content') {
-              langIndex = parseInt(val.id.replace('template-content', ''), 10) - 1;
-            }
-
-            const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
-            const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '');
-
-            if (this.state.formData[`${this.state.currentTab - 1}`][currentLang].is_drag_drop) {
-              // content = "";
-            }
-            columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+            if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toLowerCase() === 'wechat' ) {
+              const content = !_.isEmpty(this.state.formData) && this.state.formData['content-value'] ? this.state.formData['content-value'] : '';
+              columns.push(
                 <CKEditor
                   id={val.id}
                   content={content}
                   events={val.events}
                   getEditorInstanse={(evt, id) => val.injectedEvents.getEditorInstanse.call(this, evt, id)}
                   handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
-                />
-              </CapColumn>
-            );
+                  channel="wechat"
+                  onFocusOut={(event) => this.callChildEvent(event, val, 'onFocusOut')}
+                  onFocusIn={(event) => this.callChildEvent(event, val, 'onFocusIn')}
+              /> );
+            } else {
+              if (_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`])) {
+                return true;
+              }
+              let langIndex = 0;
+              if (val.id.indexOf('template-content') > -1 && val.id !== 'template-content') {
+                langIndex = parseInt(val.id.replace('template-content', ''), 10) - 1;
+              }
+              console.log('CKEditor Data 2', this.state.formData, this.state.formData[`${this.state.currentTab - 1}`], val, this.state.currentTab, this.state.currentLangTab, langIndex);
+              const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
+              const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '');
+              console.log('ckeditor current lang', currentLang, content);
+              if (this.state.formData[`${this.state.currentTab - 1}`][currentLang].is_drag_drop) {
+                // content = "";
+              }
+              columns.push(
+                <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                  <CKEditor
+                    id={val.id}
+                    content={content}
+                    events={val.events}
+                    getEditorInstanse={(evt, id) => val.injectedEvents.getEditorInstanse.call(this, evt, id)}
+                    handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
+                  />
+                </CapColumn>
+              );
+            }
           }
             break;
           case "edmeditor": {
@@ -3167,10 +3191,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
 
       allElements.push(renderedContainers);
-
-      const modal = this.getModal();
-      allElements.push(modal);
     }
+    const modal = this.getModal();
+    allElements.push(modal);
     return allElements;
   }