@capillarytech/creatives-library 0.1.32 → 1.0.0

package/components/CardGrid/index.js

@@ -1,69 +0,0 @@
-/**
-*
-* CardGrid
-*
-*/
-
-import React, {PropTypes} from 'react';
-import { Row, Col } from 'antd';
-import CustomCard from '../Card';
-
-class CardGrid extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.handleOnItemHover = this.handleOnItemHover.bind(this);
-    this.handleOnItemClick = this.handleOnItemClick.bind(this);
-    this.delayTimer = 0;
-  }
-
-  handleOnItemHover(state, id) {
-    this.delay(() => {
-      this.props.onHoverItem(state, id);
-    }, 200);
-  }
-
-  delay(callback, ms) {
-    clearTimeout(this.delayTimer);
-    this.delayTimer = setTimeout(callback, ms);
-  }
-
-  handleOnItemClick(state, id) {
-    this.props.onItemClick(state, id);
-  }
-
-  render() {
-    return (
-      <div className={this.props.className}>
-        <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
-        <div className={this.props.enablePagination ? 'pagination-container' : ''}>
-          <Row gutter={this.props.gutterSize}>
-            { this.props.listItem.length > 0 ? this.props.listItem.map( (item) => (
-              <Col style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>
-                <CustomCard id={item.id} onHover={this.handleOnItemHover} onClick={this.handleOnItemClick} content={item.content} footer={item.footer} height={item.footer ? "312px" : "258px"}></CustomCard>
-              </Col>
-            )) : ''}
-          </Row>
-        </div>
-      </div>
-    );
-  }
-}
-
-CardGrid.propTypes = {
-  listItem: PropTypes.array.isRequired,
-  filterContent: PropTypes.element,
-  colNumber: PropTypes.number,
-  gutterSize: PropTypes.number,
-  onHoverItem: PropTypes.func,
-  onItemClick: PropTypes.func,
-  className: PropTypes.string,
-  enablePagination: PropTypes.bool,
-};
-
-CardGrid.defaultProps = {
-  gutterSize: 16,
-  colNumber: 4,
-  className: '',
-};
-
-export default CardGrid;

package/components/CardGrid/tests/index.test.js

@@ -1,10 +0,0 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import CardGrid from '../index';
-
-describe('<CardGrid />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});

package/components/Ckeditor/index.js

@@ -1,204 +0,0 @@
-/**
-*
-* Ckeditor
-*
-*/
-
-import React, { PropTypes } from 'react';
-// import styled from 'styled-components';
-
-// import { FormattedMessage } from 'react-intl';
-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 user = localStorage.getItem('user');
-let locale = 'en';
-if (user && JSON.parse(user).lang) {
-  locale = JSON.parse(user).lang;
-}
-const CKEditorConfig = {
-  skin: 'moono',
-  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);
-
-    //State initialization
-    this.state = {
-      config: CKEditorConfig,
-      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);
-      console.log('nextProps CKEditor', nextProps, this.state.content, this.props.id);
-    }
-  }
-
-  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;
-
-    console.log('CKEditor Loading');
-    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, "\"");
-    console.log("ckeditor loading 1", this.node, html);
-    this.editorInstance = window.CKEDITOR.appendTo(
-      this.node,
-      this.state.config,
-      html
-    );
-    console.log('2');
-
-    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);
-    });
-  }
-
-  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() {
-    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)}/>
-      </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,
-};
-
-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: 'app.components.Ckeditor.header',
-    defaultMessage: 'This is the Ckeditor component !',
-  },
-});

package/components/Ckeditor/tests/index.test.js

@@ -1,10 +0,0 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import Ckeditor from '../index';
-
-describe('<Ckeditor />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});

package/components/Component/index.js

@@ -1,27 +0,0 @@
-/**
- *
- * Component
- *
- */
-
-import React, {PropTypes} 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/Component/tests/index.test.js

@@ -1,10 +0,0 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import Component from '../index';
-
-// describe('<Component />', () => {
-//   it('Expect to have unit tests specified', () => {
-//     expect(true).toEqual(false);
-//   });
-// });

package/components/CustomPopOver/index.js

@@ -1,80 +0,0 @@
-/**
-*
-* CustomPopOver
-*
-*/
-
-import React, { PropTypes } from 'react';
-// import styled from 'styled-components';
-import {CapPopover} from '@capillarytech/cap-react-ui-library';
-// import { FormattedMessage } from 'react-intl';
-// import messages from './messages';
-import _ from "lodash";
-
-class CustomPopOver extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  componentWillMount() {
-    console.log('popOver List ', this.props.popOverList, this.props.excludeList);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    console.log('next popOver List ', nextProps.popOverList, nextProps.excludeList);
-  }
-
-  renderPopoverContent() {
-    const elem = [];
-    _.forEach(this.props.popOverList, (content, index) => {
-      console.log('PopOver Content', content);
-      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' : ''}`}}>+ 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,13 +0,0 @@
-/*
- * CustomPopOver Messages
- *
- * This contains all the text for the CustomPopOver component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  header: {
-    id: 'app.components.CustomPopOver.header',
-    defaultMessage: 'This is the CustomPopOver component !',
-  },
-});

package/components/CustomPopOver/tests/index.test.js

@@ -1,10 +0,0 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-
-// import CustomPopOver from '../index';
-
-describe('<CustomPopOver />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false);
-  });
-});