@capillarytech/creatives-library 0.1.32 → 1.0.0

package/components/Sidebar/index.js

@@ -1,234 +0,0 @@
-import React, { PropTypes } from 'react';
-// import styled from 'styled-components';
-import { Accordion, Icon, Input, Button } from 'semantic-ui-react';
-import { Select } from 'antd';
-import { FormattedMessage } from 'react-intl';
-import _ from 'lodash';
-import { Link } from 'react-router';
-import messages from './messages';
-import './_sidebar.scss';
-
-const Option = Select.Option;
-
-class Sidebar extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      activeItem: '',
-      activeIndex: 0,
-      menuItems: this.props.menuData,
-      searchText: '',
-      visible: true,
-    };
-    this.handleItemClick = this.handleItemClick.bind(this);
-    this.handleTitleClick = this.handleTitleClick.bind(this);
-    this.handleSearch = this.handleSearch.bind(this);
-    this.toggleSideNav = this.toggleSideNav.bind(this);
-    this.getLinkElement = this.getLinkElement.bind(this);
-    this.selectActiveLinkFromUrl = this.selectActiveLinkFromUrl.bind(this);
-    this.onProductChange = this.onProductChange.bind(this);
-  }
-
-  componentWillMount() {
-    this.selectActiveLinkFromUrl(this.props);
-  }
-
-  componentWillReceiveProps(nextProp) {
-    this.selectActiveLinkFromUrl(nextProp);
-    this.setState({ menuItems: nextProp.menuData });
-  }
-
-  onProductChange(value) {
-    const selectedProductIndex = _.findIndex(this.props.productMenuData, {value: value.toLowerCase()});
-    window.location = this.props.productMenuData[selectedProductIndex].url;
-    // console.log('On Product selected ', value, selectedProductIndex);
-  }
-
-  getAccordian(content, keyValue) {
-    return (<Accordion key={keyValue}>{content}</Accordion>);
-  }
-
-  getAccordionTitle(title) {
-    return (<Accordion.Title>
-      <div className="header item">
-        <Icon name="dropdown" /> {title}
-      </div>
-    </Accordion.Title>);
-  }
-
-  getAccordionContent(links, keyValue) {
-    return (<Accordion.Content key={keyValue}>{links}</Accordion.Content>);
-  }
-
-  getLinkElement(to, text, value, isExternal) {
-    const selectedItem = (value && value.trim().toLowerCase() === this.state.activeItem) ? 'selected' : '';
-    if (text.toLowerCase().includes(this.state.searchText.toLowerCase())) {
-      if (isExternal) {
-        return ((text.toLowerCase().includes(this.state.searchText.toLowerCase())) ? <a key={to} className={`item menu-item ${selectedItem}`} href={to}>{text}</a> : '');
-      }
-      return (
-          (text.toLowerCase().includes(this.state.searchText.toLowerCase())) ?
-            <Link to={to} className={`item menu-item ${selectedItem}`} onClick={this.handleItemClick} key={to} title={text}>{text}</Link>
-              : ''
-      );
-    }
-    return '';
-  }
-
-  selectActiveLinkFromUrl(props) {
-    const activeRoute = props.router.routes[props.router.routes.length - 1];
-    const activeRouteName = (activeRoute.name && activeRoute.name.trim().toLowerCase()) || '';
-    let selectedItem = '';
-    let selectedIndex = -1;
-    _.forEach(props.menuData, (menuItem, menuIndex) => {
-      if (menuItem.items && typeof menuItem.items === 'object') {
-        _.forEach(menuItem.items, (menuData) => {
-          // console.log('Menua Data ', menuData, activeRouteName, menuItem);
-          if ((menuItem.id && menuData.id.toLowerCase() === activeRouteName.toLowerCase()) || (menuData.value.toLowerCase() === activeRouteName.toLowerCase())) {
-            selectedIndex = menuIndex;
-            selectedItem = activeRouteName.toLowerCase();
-          } else if (activeRouteName === 'assets') {
-            selectedIndex = menuIndex;
-            selectedItem = 'gallery';
-          }
-        });
-      } else if (menuItem.value.toLowerCase() === activeRouteName.toLowerCase()) {
-        selectedIndex = menuIndex;
-        selectedItem = activeRouteName.toLowerCase();
-      }
-    });
-    this.setState({ activeIndex: selectedIndex, activeItem: selectedItem });
-  }
-
-  toggleSideNav(e) {
-    e.preventDefault();
-    this.setState({ visible: !this.state.visible }, () => {
-      window.dispatchEvent(new Event('resize'));
-      if (!this.state.visible) {
-        document.getElementById('cap-sidebar').classList.add('sidebar-collapse');
-      } else {
-        document.getElementById('cap-sidebar').classList.remove('sidebar-collapse');
-      }
-    });
-  }
-
-  createAccordianElements(title, contentItems) {
-    const accordian = [];
-    accordian.push(this.getAccordionTitle(title));
-    const contentLink = contentItems.map((key) =>
-      this.getLinkElement(key.link, key.text, key.value, key.external),
-    );
-    accordian.push(this.getAccordionContent(contentLink));
-    return accordian;
-  }
-
-  createNavigationElement(menuItems) {
-    const navArray = [];
-    _.forEach(menuItems, (key, index) => {
-      const headerTitle = key.group;
-      const isCategory = Object.prototype.hasOwnProperty.call(key, 'categories');
-      if (isCategory) { // attach nested Accordion
-        const accordian = [];
-        const nestedAcordian = [];
-        accordian.push(this.getAccordionTitle(headerTitle));
-        const contentAccordian = this.getAccordian(this.createNavigationElement(key.categories), `nestedAccordian-${index}`);
-        nestedAcordian.push(contentAccordian);
-        const content = this.getAccordionContent(nestedAcordian, `content-${index}`);
-        accordian.push(content);
-        navArray.push(accordian);
-      } else { // attach items to existing accordian
-        const accordianElem = this.createAccordianElements(headerTitle, key.items);
-        navArray.push(accordianElem);
-      }
-    });
-    // const selectedItem = (this.state.activeItem === 'gallery') ? 'selected' : '';
-    // navArray.push(
-    //   <Link
-    //     to={'/assets'}
-    //     className={`item menu-item ${selectedItem} assetItem`}
-    //     key={'assets'}
-    //     title={'Gallery'}
-    //     onClick={(e) => this.handleItemClick(e)}
-    //   >Gallery</Link>
-    // );
-    return navArray;
-  }
-
-  handleOpen() {
-    this.setState({ isOpen: true });
-  }
-
-  handleClose() {
-    this.setState({ isOpen: false });
-  }
-
-  handleItemClick(e) {
-    this.setState({ activeItem: (e.target.text && e.target.text.trim().toLowerCase()) || '' });
-  }
-
-  handleTitleClick(e, i) {
-    this.setState({ activeIndex: this.state.activeIndex === i ? -1 : i });
-  }
-
-  handleSearch(e) {
-    this.setState({ searchText: e.target.value });
-  }
-
-
-  render() {
-    const visible = this.state.visible;
-    const push = !visible ? 'push' : '';
-    const collapse = !visible ? 'collapse' : '';
-    const toggle = visible ? 'hide' : '';
-
-    // const types = [{ text: 'Creatives', value: 'Creatives' }];
-    const productOptions = [];
-    if (this.props.productMenuData.length > 1) {
-      _.forEach(this.props.productMenuData, (product) => {
-        productOptions.push(
-          <Option key={product.text} value={product.text}>{product.text}</Option>
-        );
-      });
-    }
-    return (
-      <div className="sidebar-container">
-        <div className={`sidebar sidebar-width ${collapse}`}>
-          <div className="searchbar">
-            <FormattedMessage {...messages.inputPlaceholder}>{(message) => <Input icon="search" className="sidebar-search" placeholder={message} fluid onChange={this.handleSearch} />}</FormattedMessage>
-            <a href="" onClick={this.toggleSideNav}><i className="material-icons control-arrow">arrow_back</i></a>
-          </div>
-
-          { this.props.productMenuData.length > 1 ?
-            <Select className="icon product-select-menu" defaultValue={'CAMPAIGNS'} onChange={this.onProductChange}>
-              {productOptions}
-            </Select>
-            :
-            <div className="module-menu-header">{this.props.productMenuData[0].text}</div>
-          }
-
-          <div className="menu-header">
-            <span className="menu-title"><FormattedMessage {...messages.menuTitle} /> </span>
-            {this.props.actionComponents}
-          </div>
-          <Accordion className="sidebar-accordian" activeIndex={this.state.activeIndex} onTitleClick={this.handleTitleClick}>
-            {this.props.menuData && this.createNavigationElement(this.props.menuData)}
-          </Accordion>
-        </div>
-        <div className={`togglebar ${toggle} ${push}`}>
-          <Button icon className="btn-toggle" onClick={this.toggleSideNav}>
-            <Icon name="bars" />
-          </Button>
-        </div>
-      </div>
-    );
-  }
-}
-
-Sidebar.propTypes = {
-  menuData: PropTypes.array.isRequired,
-  productMenuData: PropTypes.array.isRequired,
-  actionComponents: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-};
-
-export default Sidebar;

package/components/Sidebar/messages.js

@@ -1,21 +0,0 @@
-/*
- * Sidebar Messages
- *
- * This contains all the text for the Sidebar component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  inputPlaceholder: {
-    id: 'app.components.Sidebar.input.placeholder',
-    defaultMessage: 'Search...',
-  },
-  menuTitle: {
-    id: 'app.components.Sidebar.menuTitle',
-    defaultMessage: 'Menu',
-  },
-  creatives: {
-    id: 'app.components.Sidebar.creatives',
-    defaultMessage: 'Creatives',
-  },
-});

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

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

package/components/SlideBox/_slideBox.scss

@@ -1,63 +0,0 @@
-.modal-slidebox-wrapper {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(0,0,0,0.56);
-  z-index: 10002;
-
-  #slidebox-container {
-    position: relative;
-    left: 40vw;
-    width: 60vw;
-    height: 100vh;
-    background: rgba(255,255,255,1);
-    // padding: 0 24px 0 24px;
-    overflow-y: auto;
-    // font-family: 'proxima-nova';
-
-    .slidebox-header {
-      display: inline-flex;
-      width: 100%;
-      padding: 16px 24px;
-      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
-      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
-      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
-      margin-bottom: 6px;
-      height: 56px;
-      align-items: center;
-      .heading-title {
-        font-size: 20px;
-        line-height: 24px;
-        font-weight: 600;
-        width: 97%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-
-        &:first-letter{
-          text-transform: capitalize;
-        }
-      }
-      .close-slidebox{
-        cursor: pointer;
-      }
-    }
-
-    #slidebox-content {
-      padding: 0 0px 0 24px;
-    }
-  }
-}
-
-.show-slidebox {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 1s linear 0.33s, opacity 0.33s linear;
-}
-.hide-slidebox {
-  visibility: hidden;
-  opacity: 0;
-  transition-delay: 0s;
-}

package/components/SlideBox/index.js

@@ -1,47 +0,0 @@
-import React, { PropTypes } from 'react';
-import './_slideBox.scss';
-
-class SlideBox extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <div className={this.props.show ? "modal-slidebox-wrapper show-slidebox" : "modal-slidebox-wrapper hide-slidebox"}>
-        <div id="slidebox-container" style={{ width: `${this.props.width}vw`, left: `${100 - this.props.width}vw`}}>
-          <div className="slidebox-header">
-            <div className="heading-title">
-              {this.props.header}
-            </div>
-            <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
-              <i className="material-icons close-slidebox">close</i>
-            </div>
-          </div>
-
-          <div id="slidebox-content">
-            {this.props.isLoading ? <div style={{height: '100%', lineHeight: '90vh', textAlign: 'center', fontSize: '18px', fontFamily: "open-sans"}}>{this.props.loadingText}</div> : this.props.content}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-SlideBox.defaultProps = {
-  show: false,
-  width: 40,
-  loadingText: 'loading',
-  isLoading: false,
-};
-
-SlideBox.propTypes = {
-  header: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.string,
-  ]).isRequired,
-  content: PropTypes.element.isRequired,
-  show: PropTypes.bool,
-  handleClose: PropTypes.func.isRequired,
-  width: PropTypes.number,
-  loadingText: PropTypes.string,
-  isLoading: PropTypes.bool,
-};
-
-export default SlideBox;

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

@@ -1,103 +0,0 @@
-import React from 'react';
-import {mount, shallow} from 'enzyme';
-import SlideBox from '../index';
-
-describe('<SlideBox />', () => {
-  let props;
-  let mountedSlideBox;
-
-  const slideBox = () => {
-    if (!mountedSlideBox) {
-      mountedSlideBox = mount(
-        <SlideBox {...props} />
-      );
-    }
-    return mountedSlideBox;
-  };
-
-  beforeEach(() => {
-    props = {
-      header: <h1>Header</h1>,
-      content: <p>Content</p>,
-      show: undefined,
-      handleClose: jest.fn(),
-    };
-    mountedSlideBox = undefined;
-  });
-
-  it('always renders a wrapping div', () => {
-    const divs = slideBox().find("div");
-    expect(divs.length).toBeGreaterThan(0);
-  });
-
-  describe('the rendered div', () => {
-    it('contains everything else that gets rendered', () => {
-      const divs = slideBox().find("div");
-      const wrappingDiv = divs.first();
-      expect(wrappingDiv.children()).toEqual(slideBox().children());
-    });
-
-    it('has a className of show-slidebox if "show" props is true', () => {
-      props.show = true;
-      const divs = slideBox().find("div");
-      const wrappingDiv = divs.first();
-      expect(wrappingDiv.props().className).toBe('modal-slidebox-wrapper show-slidebox');
-    });
-
-    it('has a className of hide-slidebox if "show" props is false', () => {
-      props.show = false;
-      const divs = slideBox().find("div");
-      const wrappingDiv = divs.first();
-      expect(wrappingDiv.props().className).toBe('modal-slidebox-wrapper hide-slidebox');
-    });
-
-    it('should render a div with class heading-title', () => {
-      const divs = slideBox().find("div");
-      const header = divs.find('.heading-title');
-      expect(header.length).toBe(1);
-    });
-
-    it('should render a div with id box-actions', () => {
-      const divs = slideBox().find("div");
-      const header = divs.find('#box-actions');
-      expect(header.length).toBe(1);
-    });
-  });
-
-  describe('Slidebox header', () => {
-    it('renders the element passed as header prop', () => {
-      const renderedComponent = shallow(<SlideBox {...props}/>);
-      expect(renderedComponent.find('.heading-title').contains(props.header)).toBe(true);
-    });
-  });
-
-  describe('Slidebox Content', () => {
-    it('renders the element passed as content prop', () => {
-      const renderedComponent = shallow(<SlideBox {...props}/>);
-      expect(renderedComponent.find('#slidebox-content').contains(props.content)).toBe(true);
-    });
-  });
-
-  describe('when handleClose is defined', () => {
-    it('sets onClick action of action box to be same as handleClose ', () => {
-      const actionBox = slideBox().find('#box-actions');
-      expect(actionBox.props().onClick).toBe(props.handleClose);
-    });
-  });
-
-  describe('Box Actions Div', () => {
-    it('renders one icon', () => {
-      const renderedComponent = shallow(<SlideBox {...props}/>);
-      const boxActionDiv = renderedComponent.find('#box-actions').first();
-      const icon = boxActionDiv.find('i');
-      expect(icon.length).toBe(1);
-    });
-
-    it('has close as the content for rendered icon', () => {
-      const renderedComponent = shallow(<SlideBox {...props}/>);
-      const boxActionDiv = renderedComponent.find('#box-actions').first();
-      const icon = boxActionDiv.find('i');
-      expect(icon.node.props.children).toBe('close');
-    });
-  });
-});

package/components/SmsEditor/index.js

@@ -1,53 +0,0 @@
-/**
-*
-* SmsEditor
-*
-*/
-
-import React, {PropTypes} from 'react';
-// import styled from 'styled-components';
-import {TextArea} from 'semantic-ui-react';
-
-
-class SmsEditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    if (this.props.content) {
-      this.state = {
-        content: this.props.content,
-      };
-    } else {
-      this.state = {
-        content: '',
-      };
-    }
-    this.onContentChange = this.onContentChange.bind(this);
-  }
-
-  onContentChange(e, data) {
-    this.props.onDataChange(data);
-    this.setState({
-      content: data,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <TextArea
-          autoHeight
-          style={{minHeight: 100}}
-          value={this.props.content}
-          onChange={(e, data) => { this.onContentChange(e, data); }}
-        />
-      </div>
-    );
-  }
-}
-
-SmsEditor.propTypes = {
-  content: PropTypes.string,
-  onDataChange: PropTypes.func,
-};
-
-export default SmsEditor;

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

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

package/components/SmsTest/index.js

@@ -1,115 +0,0 @@
-/**
-*
-* SmsTest
-*
-*/
-
-import React from 'react';
-// import styled from 'styled-components';
-
-// import { FormattedMessage } from 'react-intl';
-// import messages from './messages';
-import FormBuilder from '../FormBuilder';
-
-class SmsTest extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.saveFormData = this.saveFormData.bind(this);
-    this.onFormDataChange = this.onFormDataChange.bind(this);
-    this.onTemplateNameChange = this.onTemplateNameChange.bind(this);
-    this.onTemplateContentChange = this.onTemplateContentChange.bind(this);
-  }
-
-  onTemplateNameChange(name) {
-    console.log('Template name changed to ', name);
-  }
-
-  onTemplateContentChange(content) {
-    console.log('Template content changed to ', content);
-  }
-
-  onFormDataChange(formData) {
-    console.log('Form data changed is ', formData);
-  }
-
-  saveFormData(formData) {
-    //Logic to save in db etc
-    console.log('Saving form data', formData);
-  }
-  render() {
-    const schema = {
-      inputFields: [
-        {
-          id: "template-name",
-          label: "Template Name",
-          type: "input",  //Resembles component to be used
-          metaType: "text",
-          datatype: "string",
-          required: true,
-          placeholder: "Please input template name.",
-          fluid: true,
-          styling: "semantic",
-          order: 1,
-          customComponent: false,
-          supportedEvents: {
-            onChange: this.onTemplateNameChange,
-          },
-        },
-        {
-          id: "sms-editor",
-          label: "Template Content",
-          type: "SmsEditor",
-          metaType: "text",
-          datatype: "string",
-          required: true,
-          placeholder: "Please input sms template content.",
-          fluid: false,
-          styling: "custom",
-          order: 2,
-          customComponent: true,
-          supportedEvents: {
-            onChange: this.onTemplateContentChange,
-          },
-        },
-      ],
-      actionFields: [
-        {
-          id: "submit-button",
-          metaType: "submit-button",
-          type: "button",
-          value: "Create Template",
-          customComponent: false,
-          styling: "semantic",
-          order: 3,
-          fluid: false,
-          supportedEvents: {
-            onClick: this.saveFormData,
-          },
-        },
-      ],
-      channel: "SMS",
-      module: "Campaigns",
-    };
-    const json = {
-      "sms-editor": "asa121s",
-      "template-name": "台北",
-    };
-    return (
-      <div>
-        <FormBuilder
-          formData={json}
-          schema={schema}
-          onSubmit={this.saveFormData}
-          onChange={this.onFormDataChange}
-          usingTabContainer
-         />
-      </div>
-    );
-  }
-}
-
-SmsTest.propTypes = {
-
-};
-
-export default SmsTest;

package/components/SmsTest/messages.js

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

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

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