@capillarytech/creatives-library 0.0.4 → 0.0.6

package/components/CardGrid/index.js

@@ -13,10 +13,18 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
     super(props);
     this.handleOnItemHover = this.handleOnItemHover.bind(this);
     this.handleOnItemClick = this.handleOnItemClick.bind(this);
+    this.delayTimer = 0;
   }
 
   handleOnItemHover(state, id) {
-    this.props.onHoverItem(state, id);
+    this.delay(() => {
+      this.props.onHoverItem(state, id);
+    }, 200);
+  }
+
+  delay(callback, ms) {
+    clearTimeout(this.delayTimer);
+    this.delayTimer = setTimeout(callback, ms);
   }
 
   handleOnItemClick(state, id) {
@@ -27,7 +35,7 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
     return (
       <div className={this.props.className}>
         <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
-        {this.props.listItem && this.props.listItem.length > 0 && <div className={this.props.enablePagination ? 'pagination-container' : ''}>
+        <div className={this.props.enablePagination ? 'pagination-container' : ''}>
           <Row gutter={this.props.gutterSize}>
             { this.props.listItem ? this.props.listItem.map( (item) => (
               <Col style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>
@@ -35,7 +43,7 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
               </Col>
             )) : ''}
           </Row>
-        </div>}
+        </div>
       </div>
     );
   }

package/components/Ckeditor/index.js

@@ -77,6 +77,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
       },
       content: "",
       editorInstance: undefined,
+      setInitData: false,
     };
 
     this.delayTimer = 0;
@@ -86,10 +87,16 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
   componentWillMount() {
     let content = '';
+    this.id = this.props.id;
     if (this.props.content !== '') {
       content = this.props.content;
+      content = content.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, "\"");
     }
-    this.setState({content});
+    this.setState({content}, () => {
+      if (this.editorInstance) {
+        this.editorInstance.setData(content);
+      }
+    });
   }
 
   //load ckeditor script as soon as component mounts if not already loaded
@@ -98,22 +105,12 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   }
 
   componentWillReceiveProps(nextProps) {
+    this.id = this.props.id;
     if (this.editorInstance && this.editorInstance.status === "ready") {
+      // setTimeout(() => {
+      //   this.editorInstance.name = this.id;
+      // }, 5000);
       console.log('nextProps CKEditor', nextProps, this.state.content, this.props.id);
-      // if (!_.isEqual(nextProps.content, this.state.content)) {
-      if (nextProps.content !== this.state.content) {
-        let html = nextProps.content;
-        if (html && html !== "") {
-          console.log('html ckeditor', html);
-          html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, "\"");
-        }
-        console.log("New content", nextProps.content, this.state.content, html);
-        this.setState({content: html}, () => {
-          this.editorInstance.setData(html);
-          // this.editorInstance.insertHtml(html);
-          // this.editorInstance.content = html;
-        });
-      }
     }
   }
 
@@ -135,7 +132,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
     let html = this.props.content;
     html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
-    console.log("ckeditor loading 1", this.node);
+    console.log("ckeditor loading 1", this.node, html);
     this.editorInstance = window.CKEDITOR.appendTo(
       this.node,
       this.state.config,
@@ -144,8 +141,9 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     console.log('2');
 
     if (this.props.getEditorInstanse) {
-      this.props.getEditorInstanse(this.editorInstance);
+      this.props.getEditorInstanse(this.editorInstance, this.props.id);
     }
+    //this.editorInstance.name = this.id;
 
     //Register listener for custom events if any
     this.editorInstance.on('change', this.handleContentChange);
@@ -160,6 +158,10 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   }
 
   handleContentChange = (evt) => {
+    // this.setState({content: this.editorInstance.getData()}, () => {
+    //   this.props.handleContentChange(evt);
+    //   // evt.setData(this.editorInstance.getData());
+    // });
     this.delay(() => {
       this.setState({content: this.editorInstance.getData()}, () => {
         this.props.handleContentChange(evt);
@@ -168,6 +170,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   };
 
   render() {
+    console.log('ckeditor loading render', this.props);
     return (
       <div id={this.props.id} style={{borderRight: "1px solid #000 !important"}}>
         <div className={this.props.activeClass} ref={(node) => (this.node = node)}/>

package/components/CustomPopOver/index.js

@@ -35,7 +35,6 @@ class CustomPopOver extends React.Component { // eslint-disable-line react/prefe
   }
 
   render() {
-    console.log('Test Custom popover', this.props.popOverList.length, this.props.excludeList.length);
     return (
       <div>
         <CapPopover
@@ -43,6 +42,8 @@ class CustomPopOver extends React.Component { // eslint-disable-line react/prefe
           className={this.props.className}
           trigger={this.props.trigger}
           placement={this.props.placement}
+          visible={this.props.visible}
+          onVisibleChange={this.props.onVisibleChange}
           style={{height: '100%'}}
           content={
             this.renderPopoverContent()
@@ -71,6 +72,8 @@ CustomPopOver.propTypes = {
   excludeList: PropTypes.array,
   trigger: PropTypes.string,
   placement: PropTypes.string,
+  visible: PropTypes.bool,
+  onVisibleChange: PropTypes.func,
   handlePopOverClick: PropTypes.func,
 };
 

package/components/EmailPreview/index.js

@@ -91,7 +91,7 @@ EmailPreview.propTypes = {
   content: PropTypes.oneOfType([
     PropTypes.object,
     PropTypes.string,
-  ]).isRequired,
+  ]),
   show: PropTypes.bool,
   device: PropTypes.string,
   handleClose: PropTypes.func,