@capillarytech/creatives-library 0.1.31 → 0.1.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/components/NewSidebar/_newsidebar.scss

@@ -1,115 +0,0 @@
-#cap-sidebar{
-  padding: 8px 0 8px 0;
-  max-width: 200px;
-  min-width: 200px;
-  width: 16%;
-  overflow-y: hidden;
-  // height: 100%;
-  // display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-  // display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-  // display: -ms-flexbox;      /* TWEENER - IE 10 */
-  // display: -webkit-flex;     /* NEW - Chrome */
-  // display: flex;
-  overflow-x: hidden;
-  .header.item{
-    padding-left: 8px !important;
-  }
-}
-
-.sidebar-container {
-  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-  display: -ms-flexbox;      /* TWEENER - IE 10 */
-  display: -webkit-flex;     /* NEW - Chrome */
-  display: flex;
-  flex: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-}
-
-.sidebar-accordian .content .item.menu-item:hover{
-  margin-left: 0 !important;
-  text-indent: 0 !important;
-}
-.sidebar-accordian .content .item.menu-item.selected{
-  margin-left: 0 !important;
-  text-indent: 0 !important;
-}
-.ui.accordion.sidebar-accordian .content .item.selected{
-  background: #F2F3F7 !important;
-  padding-left: 40px !important;
-}
-
-.item.menu-item{
-  // margin-left: 0px;
-  padding-left: 40px !important;
-  border-left-width: 0 !important;
-  text-decoration: none;
-}
-.item.menu-item.selected{
-  border-left: 4px solid #2e89df !important;
-}
-
-.item.menu-item.assetItem{
-  padding-left: 28px !important;
-  line-height: 28px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.ui.accordion.sidebar-accordian {
-  padding-top: 8px !important;
-  margin-left: 0;
-}
-
-.ui.accordion.sidebar-accordian .title{
-  font-size: 12px !important;
-  line-height: 32px !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-.sidebar-width {
-  // width: 200px !important;
-  max-width: 250px;
-  min-width: 190px;
-  width: 200px;
-}
-.module-menu-header {
-  padding-top: 8px!important;
-  line-height: 32px!important;
-  font-size: 16px!important;
-  margin-left: 0!important;
-  padding-left: 8px;
-}
-
-// .searchbar {
-//   height: 32px;
-//   padding-left: 8px;
-// }
-
-.menu-header {
-  font-size: 12px!important;
-  line-height: 32px!important;
-  margin: 0!important;
-  padding: 0 0 0 8px!important;
-  width: 100%;
-}
-.menu-title {
-  flex: 0 0 90%!important;
-}
-
-.product-select-menu {
-  width: 100%;
-  padding-left: 2px;
-  background: #F2F3F7;
-  font-family: proxima-nova;
-  font-size: 16px !important;
-  font-weight: 600;
-
-  .ant-select-selection {
-    background: #F2F3F7;
-    border: none !important;
-  }
-}

package/components/NewSidebar/index.js

@@ -1,234 +0,0 @@
-import React, { PropTypes } from 'react';
-// import styled from 'styled-components';
-import { Accordion, Icon, Button, Input } 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 './_newsidebar.scss';
-
-const Option = Select.Option;
-
-class NewSidebar 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>
-    );
-  }
-}
-
-NewSidebar.propTypes = {
-  menuData: PropTypes.array.isRequired,
-  productMenuData: PropTypes.array.isRequired,
-  actionComponents: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-};
-
-export default NewSidebar;

package/components/NewSidebar/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/NewSidebar/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/NewTopBar/_newtopbar.scss

@@ -1,84 +0,0 @@
-.ui.navbar.menu {
-  height: 40px !important;
-}
-.ui.menu.navbar .item>img.logo{
-  height: 1.5rem !important;
-  padding: 0!important;
-  margin: 0rem;
-  width: 2rem;
-}
-.ui.menu.navbar .ui.selection.dropdown{
-  height: 40px !important;
-}
-.ui.menu .ui.dropdown .menu>.selected.item {
-  background: #151821;
-}
-.org-list-drp-dwn .menu > .item{
-  height: 40px !important;
-}
-.ui.menu.navbar .ui.dropdown .menu>.item{
-  height: 40px !important;
-}
-
-.ui.search.selection.dropdown>input.search{
-  padding-left: 12px !important;
-  padding-top: 8px !important;
-  padding-bottom: 8px !important;
-}
-
-.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
-  padding-right: 4px;
-}
-
-// .ui.menu .item {
-  
-// }
-
-.ui.secondary.vertical.menu>.item {
-  margin-bottom: 0 !important;
-  padding: 8px 16px !important;
-}
-
-.ui.menu.navbar .item.dropdownItem {
-  padding: 0px !important;
-}
-
-.navbarPopover {
-  left: 0 !important;
-  top: 40px !important;
-  padding-top: 0px !important;
-}
-.navbarPopover .ant-popover-arrow {
-  display: none;
-}
-.navbarPopover .ant-popover-inner-content {
-  padding: 0 !important;
-}
-.displayOrg {
-  color: white;
-  cursor: pointer;
-}
-.orgDetails {
-  display: flex;
-}
-.popoverTitle {
-  padding: 1rem 1rem 0.5rem 1rem;
-}
-.org-list-drp-dwn {
-  border-top: none !important;
-  border-left: none !important;
-  border-right: none !important;
-  height: 2.5rem;
-}
-.productOption {
-  height: 2rem;
-  padding-left: 1rem;
-}
-.navbarMenuOptions {
-  padding: 0 0 0 24px !important;
-  margin: 0 !important;
-}
-.navbarIcon {
-  color: white !important;
-  font-size: 1rem;
-}

package/components/NewTopBar/index.js

@@ -1,195 +0,0 @@
-import React, { PropTypes } from 'react';
-// import styled from 'styled-components';
-
-import { Menu, Image, Dropdown, Popup } from 'semantic-ui-react';
-import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router';
-import { loadItem } from 'services/localStorageApi';
-import messages from './messages';
-import './_newtopbar.scss';
-import { CapPopover, CapTreeSelect } from '@capillarytech/cap-react-ui-library';
-
-const logo = require('./assets/images/capillary_logo_2.png');
-
-class NewTopBar extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: '',
-      orgList: [],
-      subOrgList: [],
-      selectedOrg: loadItem('orgID'),
-      selectedSubOrg: loadItem('subOrgID'),
-    };
-    this.handleItemClick = this.handleItemClick.bind(this);
-    this.logout = this.logout.bind(this);
-    this.handleOrgChange = this.handleOrgChange.bind(this);
-    this.handleSubOrgChange = this.handleSubOrgChange.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.orgID !== this.props.orgID) {
-      this.props.navigateToDashboard();
-    }
-  }
-
-  handleOrgChange(data) {
-    const orgId = data.value;
-    if (this.state.selectedOrg !== orgId) {
-      this.props.changeOrg(orgId);
-      this.setState({ selectedOrg: orgId });
-    }
-  } 
- 
-  handleSubOrgChange(data) {
-    const subOrgId = data.value;
-    if (this.state.selectedSubOrg !== subOrgId) {
-      this.props.changeSubOrg(subOrgId);
-      this.setState({ selectedSubOrg: subOrgId });
-    }
-  }
-
-  handleItemClick(e) {
-    this.setState({ activeItem: e.target.id });
-  }
-
-  logout(e) {
-    e.preventDefault();
-    this.props.logout();
-  }
-
-  render() {
-    console.log("topbarprops", this.props);
-    const proxyOrgList = this.props.proxyOrgList;
-    const proxySubOrgList = this.props.proxySubOrgList;
-    const defaultOrgName = this.props.orgName;
-    const defaultSubOrgName = this.props.subOrgName;
-    const currentOrgName = this.props.currentOrgName;
-    const selectedOrg = loadItem('orgID');
-    const selectedSubOrg = loadItem('subOrgID');
-    const productOptions = [];
-    if (this.props.productMenuData.length > 1) {
-      _.forEach(this.props.productMenuData, (product) => {
-        productOptions.push(
-          <li className="productOption" key={product.text} value={product.text}>{product.text}</li>
-        );
-      });
-    }
-
-    const content = (
-      <div>
-      { proxyOrgList.length > 1 ?
-        <Menu.Item className="dropdownItem" key="orgSelection">
-          <div className="popoverTitle">Organization</div>
-          <FormattedMessage {...messages.dropdownMessage}>
-            {(message) => <CapTreeSelect
-              showSearch="true"
-              placeholder={message}
-              className="org-list-drp-dwn"
-              defaultValue={selectedOrg}
-              treeData={proxyOrgList}
-              onChange={(data) => this.handleOrgChange(data)}  
-            />}
-          </FormattedMessage>
-        </Menu.Item> :
-        <Menu.Item key="default-org">
-          {defaultOrgName}
-        </Menu.Item>
-      }
-      { proxySubOrgList.length > 1 ?
-        <Menu.Item className="dropdownItem" key="subOrgSelection">
-          <FormattedMessage {...messages.dropdownMessage}>
-            {(message) => <Dropdown
-              placeholder={message}
-              className="org-list-drp-dwn"
-              defaultValue={selectedSubOrg}
-              search
-              options={proxySubOrgList}
-              selection
-              onChange={(event, data) => this.handleSubOrgChange(data)}
-            />}
-          </FormattedMessage>
-        </Menu.Item> :
-        <Menu.Item key="default-subOrg">
-          {defaultSubOrgName}
-        </Menu.Item>
-      }      
-      { this.props.productMenuData.length > 1 ?
-        <div>
-          <div className="popoverTitle">Products</div>
-          <ul defaultValue={'CAMPAIGNS'}  >
-            {productOptions}
-          </ul>
-        </div>
-        :
-        <div className="module-menu-header">{this.props.productMenuData[0].text}</div>
-      }
-      
-      </div>
-    );
-    
-    return (
-      <Menu className="navbar" key="navbar">
-
-        <Menu.Item key="logo" as={Link} to="/" name="logo" className="logo-container" onClick={this.handleItemClick}>
-          <Image className="logo" src={logo} alt="Capillary Technologies" />
-        </Menu.Item>
-        
-        <CapPopover overlayClassName="navbarPopover" placement="topLeft" content={content} trigger="click">
-          <div className="displayOrg">
-            <div className="orgDetails">
-              <div className="orgName">{currentOrgName}</div>
-              <div className="subOrgName">/ {this.props.subOrgName}</div>
-            </div>
-            <div className="moduleName">Campaigns
-            </div>
-          </div>
-        </CapPopover>
-        
-        <Menu.Menu position="right">
-          <Menu.Item className="navbarMenuOptions" key="name">
-            {this.props.firstName}&nbsp;{this.props.lastName}
-          </Menu.Item>
-          <Menu.Item className="navbarMenuOptions" key="notifications">
-            <i className="material-icons navbarIcon">notifications</i>
-          </Menu.Item>
-          <Menu.Item className="navbarMenuOptions" key="user-details">
-            <Popup
-              trigger={<i className="material-icons navbarIcon">person</i>}
-              content={< div className="ui secondary vertical menu">
-                <a href="" className="item hide"><FormattedMessage {...messages.profile} /><i className="user icon" /></a>
-                <a href="" className="item hide"><FormattedMessage {...messages.settings} /> <i className="settings icon" /></a>
-                <a href="" className="item" onClick={this.logout}><FormattedMessage {...messages.logout} />
-                  <i className="sign out icon" /></a> </div >}
-              on="click" position="bottom right" offset={7}
-            />
-          </Menu.Item>
-          <Menu.Item className="navbarMenuOptions" key="help">
-            <i className="material-icons navbarIcon">help</i>
-          </Menu.Item>
-        </Menu.Menu>
-      </Menu>
-
-    );
-  }
-}
-
-NewTopBar.propTypes = {
-  userName: PropTypes.string,
-  firstName: PropTypes.string,
-  lastName: PropTypes.string,
-  proxyOrgList: PropTypes.array,
-  proxySubOrgList: PropTypes.array,
-  orgName: PropTypes.string,
-  currentOrgName: PropTypes.string,
-  subOrgName: PropTypes.string,
-  orgID: PropTypes.number,
-  subOrgID: PropTypes.number,
-  navigateToDashboard: PropTypes.func,
-  changeOrg: PropTypes.func,
-  changeSubOrg: PropTypes.func,
-  logout: PropTypes.func,
-  productMenuData: PropTypes.array.isRequired,
-};
-
-export default NewTopBar;

package/components/NewTopBar/messages.js

@@ -1,29 +0,0 @@
-/*
- * TopBar Messages
- *
- * This contains all the text for the TopBar component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  profile: {
-    id: 'reon.components.TopBar.profile',
-    defaultMessage: 'Profile',
-  },
-  settings: {
-    id: 'reon.components.TopBar.settings',
-    defaultMessage: 'Settings',
-  },
-  logout: {
-    id: 'reon.components.TopBar.logout',
-    defaultMessage: 'Logout',
-  },
-  dropdownMessage: {
-    id: 'reon.components.TopBar.brand.dropdown',
-    defaultMessage: 'Select Brand',
-  },
-  hi: {
-    id: 'app.components.TopBar.brand.dropdown',
-    defaultMessage: 'Hi',
-  },
-});

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

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