@capillarytech/creatives-library 8.0.136 → 8.0.137-alpha.0

package/components/Ckeditor/index.js

@@ -1,238 +0,0 @@
-/**
-*
-* 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

@@ -1,13 +0,0 @@
-/*
- * 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

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

package/components/Component/index.js

@@ -1,29 +0,0 @@
-/**
- *
- * 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

@@ -1,81 +0,0 @@
-/**
-*
-* 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

@@ -1,17 +0,0 @@
-/*
- * 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',
-  },
-});