@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/components/Ckeditor/index.js

@@ -0,0 +1,238 @@
+/**
+*
+* Ckeditor
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+
+// import { FormattedMessage } from 'react-intl';
+import _ from 'lodash';
+// import messages from './messages';
+import './style.scss';
+const loadScript = require('load-script');
+// fetching ckeditor from s3 by rerouting through arya whitelisted services
+const defaultScriptUrl = `${window.location.origin}/arya/ui/library/ckeditor/ckeditor.js`;
+//Uncomment the above line to use CKEDITOR in local
+// const defaultScriptUrl = 'https://crm-nightly-new.cc.capillarytech.com/arya/ui/library/ckeditor/ckeditor.js';
+const user = localStorage.getItem('user');
+let locale = 'en';
+if (user && JSON.parse(user).lang) {
+  locale = JSON.parse(user).lang;
+}
+const CKEditorConfig = {
+  skin: 'moono-lisa',
+  toolbar: [
+    { name: 'document', items: ['Source', '-'] },
+    { name: 'clipboard', items: ['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
+    { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-'] },
+    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
+    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language'] },
+    { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
+    { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'Smiley'] },
+    // '/',
+    { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
+    { name: 'colors', items: ['TextColor', 'BGColor'] },
+    { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
+  ],
+  format_tags: 'p;h1;h2;h3;pre',
+  toolbarCanCollapse: true,
+  toolbarStartupExpanded: true,
+  uiColor: '#e3e3e3',
+  width: 'calc(100% - 2px)',
+  height: 'calc(100vh - 290px)',
+  fullPage: true,
+  htmlEncodeOutput: true,
+  startupFocus: true,
+  allowedContent: {
+  // Allow all content.
+    $1: {
+      // elements: this.editorInstance.dtd,
+      //elements: window.CKEDITOR.dtd,
+      attributes: true,
+      styles: true,
+      classes: true,
+    },
+  },
+  disallowedContent: 'script; *[on*]',
+  language: locale,
+  toolbar_Basic:
+  [
+    ['SwitchBar', '-', 'Source', '-', 'Bold', 'Italic', 'Underline'],
+    ['NumberedList', 'BulletedList'],
+    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
+    ['Link', 'Unlink', 'Anchor'],
+    ['Image', 'Table'],
+    ['Font', 'FontSize'],
+    ['TextColor', 'BGColor'],
+  ],
+};
+
+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,
+      events: {
+        blur: this.onBlur,
+        afterPaste: this.afterPaste,
+        change: this.onChange,
+      },
+      content: "",
+      editorInstance: undefined,
+      setInitData: false,
+    };
+
+    this.delayTimer = 0;
+    //Bindings
+    this.onLoad = this.onLoad.bind(this);
+  }
+
+  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}, () => {
+      if (this.editorInstance) {
+        this.editorInstance.setData(content);
+      }
+    });
+  }
+
+  //load ckeditor script as soon as component mounts if not already loaded
+  componentDidMount() {
+    loadScript(defaultScriptUrl, this.onLoad);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.id = this.props.id;
+    if (this.editorInstance && this.editorInstance.status === "ready") {
+      // setTimeout(() => {
+      //   this.editorInstance.name = this.id;
+      // }, 5000);
+      
+    }
+  }
+
+  componentWillUnmount() {
+    this.unmounting = true;
+    if (this.editorInstance) {
+      this.editorInstance.destroy();
+      if (window.CKEDITOR && !_.isEmpty(window.CKEDITOR.instances)) {
+        window.CKEDITOR.instances = {};
+      }
+    }
+  }
+
+  onLoad() {
+    if (this.unmounting) return;
+
+    
+    if (!window.CKEDITOR) {
+      console.error("CKEditor not found");
+      return;
+    }
+
+    let html = this.props.content;
+    html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
+    
+    this.editorInstance = window.CKEDITOR.appendTo(
+      this.node,
+      this.state.config,
+      html
+    );
+    
+
+    if (this.props.getEditorInstanse) {
+      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);
+    _.forEach(this.props.events, (event, index) => {
+      this.editorInstance.on(index, event);
+    });
+    const channel = _.get(this.props, 'channel', '');
+    if (channel === '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) {
+    clearTimeout(this.delayTimer);
+    this.delayTimer = setTimeout(callback, ms);
+  }
+
+  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);
+      });
+    }, 1000);
+  };
+
+  render() {
+    
+    return (
+      <div id={this.props.id} style={{borderRight: "1px solid #000 !important"}}>
+        <div className={this.props.activeClass} ref={(node) => (this.node = node)}/>
+      </div>
+    );
+  }
+}
+
+Ckeditor.defaultProps = {
+  id: 'ckeditor',
+  content: "<html><body></body></html>",
+  config: {},
+  activeClass: "",
+  events: {},
+};
+
+Ckeditor.propTypes = {
+  id: PropTypes.string,
+  content: PropTypes.any,
+  activeClass: PropTypes.string,
+  events: PropTypes.object,
+  getEditorInstanse: PropTypes.func,
+  handleContentChange: PropTypes.func,
+  channel: PropTypes.string,
+  onFocusOut: PropTypes.func,
+  onFocusIn: PropTypes.func,
+};
+
+export default Ckeditor;

package/components/Ckeditor/messages.js

@@ -0,0 +1,13 @@
+/*
+ * Ckeditor Messages
+ *
+ * This contains all the text for the Ckeditor component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.Ckeditor.header',
+    defaultMessage: 'This is the Ckeditor component !',
+  },
+});

package/components/Ckeditor/style.scss

@@ -0,0 +1,3 @@
+.cke_notification_warning {
+    display: none;
+}

package/components/Component/index.js

@@ -0,0 +1,29 @@
+/**
+ *
+ * Component
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from "react";
+// import styled from 'styled-components';
+
+
+class Component extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    const className = this.props.name;
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+Component.propTypes = {
+  name: PropTypes.string.isRequired,
+  children: PropTypes.array,
+};
+
+export default Component;

package/components/CustomPopOver/index.js

@@ -0,0 +1,81 @@
+/**
+*
+* CustomPopOver
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import {CapPopover} from '@capillarytech/cap-react-ui-library';
+import _ from "lodash";
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+
+class CustomPopOver extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  componentWillMount() {
+    
+  }
+
+  componentWillReceiveProps(nextProps) {
+    
+  }
+
+  renderPopoverContent() {
+    const elem = [];
+    _.forEach(this.props.popOverList, (content, index) => {
+      
+      if (this.props.excludeList.indexOf(content.iso_code) === -1) {
+        elem.push(
+          <p style={{ cursor: "pointer"}} key={index} onClick={() => this.props.handlePopOverClick(content)}>{content.language}</p>
+        );
+      }
+    });
+
+    return elem;
+  }
+
+  render() {
+    return (
+      <div>
+        <CapPopover
+          id={this.props.id}
+          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()
+          }
+        >
+          <p style={{fontFamily: "open-sans", fontWeight: '600', display: `${this.props.popOverList.length === this.props.excludeList.length ? 'none' : ''}`}}><FormattedMessage {...messages.languages} /></p>
+        </CapPopover>
+      </div>
+    );
+  }
+}
+
+CustomPopOver.defaultProps = {
+  id: 'popover',
+  className: '',
+  trigger: "click",
+  placement: "bottomLeft",
+  popOverList: [],
+  excludeList: [],
+};
+
+CustomPopOver.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  popOverList: PropTypes.array,
+  excludeList: PropTypes.array,
+  trigger: PropTypes.string,
+  placement: PropTypes.string,
+  visible: PropTypes.bool,
+  onVisibleChange: PropTypes.func,
+  handlePopOverClick: PropTypes.func,
+};
+
+export default CustomPopOver;

package/components/CustomPopOver/messages.js

@@ -0,0 +1,17 @@
+/*
+ * CustomPopOver Messages
+ *
+ * This contains all the text for the CustomPopOver component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.CustomPopOver.header',
+    defaultMessage: 'This is the CustomPopOver component !',
+  },
+  languages: {
+    id: 'creatives.components.CustomPopOver.languages',
+    defaultMessage: '+ Languages',
+  },
+});