@capillarytech/creatives-library 2.0.82 → 2.0.83

package/components/CapTagList/index.js

@@ -8,14 +8,15 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 // import styled from 'styled-components';
-import { CapSpin, CapModal, CapButton, CapPopover, CapInput, CapTree, CapSelect } from '@capillarytech/cap-ui-library';
-
+import { Tree, Input, Spin, Modal } from 'antd';
 import _ from 'lodash';
+// import { CapInput } from '@capillarytech/cap-react-ui-library/basic/input';
 import { injectIntl, intlShape } from 'react-intl';
+import { CapButton, CapPopover, CapSelect, CapInput } from '@capillarytech/cap-react-ui-library';
 import messages from './messages';
+const Search = Input.Search;
+const TreeNode = Tree.TreeNode;
 
-const {Search} = CapInput;
-const {CapTreeNode} = CapTree;
 class CapTagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   constructor(props) {
@@ -65,11 +66,13 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     return list;
   }
 
-  handleOnChange = (data) => {
+  handleOnChange = (data, e) => {
+    console.log('module data', data, e);
     this.props.onContextChange(data);
   };
 
-  handleDynamicDateChange = (data) => {
+  handleDynamicDateChange = (data, e) => {
+    console.log('data.target', data.target.value, e);
     this.setState({dynamicDateValue: data.target.value});
   };
 
@@ -79,8 +82,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     tagValue = tagValue.replace("(N)", `${days}`);
     const resultArray = [];
     resultArray.push(tagValue);
-    this.setState({showModal: false, dynamicDateValue: ''});
     this.props.onSelect(resultArray);
+    this.setState({showModal: false, dynamicDateValue: ''});
   };
 
   handleCancel = () => {
@@ -124,6 +127,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     this.setState({expandedKeys, autoExpandParent: false});
   };
   togglePopoverVisibility = (visible) => {
+    console.log('popover ');
     this.setState({visible});
   };
 
@@ -132,6 +136,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   };
 
   renderTags(tags, searchString) {
+    console.log('final tags list', tags);
     const list = [];
     _.forEach(tags, (val, key) => {
       let supportedTagsString = '';
@@ -139,15 +144,16 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
+      console.log('supportedTagsString', supportedTagsString);
       if (_.has(val, 'subtags')) {
         const temp = this.renderTags(val.subtags);
         list.push((
-          <CapTreeNode title={val.name} key={key}>
+          <TreeNode title={val.name} key={key}>
             {temp}
-          </CapTreeNode>
+          </TreeNode>
         ));
       } else if (searchString === '' || !searchString || val.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1) {
-        const tempNode = (<CapTreeNode title={val.name} isLeaf key={key}></CapTreeNode>);
+        const tempNode = (<TreeNode title={val.name} isLeaf key={key}></TreeNode>);
         list.push(tempNode);
       }
     });
@@ -160,17 +166,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       {
         value: "All",
         label: "All",
-        key: 'all',
       },
       {
         value: "Outbound",
         label: "Outbound",
-        key: 'outbound',
       },
       {
         value: "Loyalty",
         label: "Loyalty",
-        key: 'loyalty',
       },
     ];
     return (
@@ -179,12 +182,12 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           visible={this.state.visible}
           onVisibleChange={this.togglePopoverVisibility}
           content={<div>
-            <CapSpin tip="Getting tags..." spinning={this.props.loading}>
+            <Spin tip="Getting tags..." spinning={this.props.loading}>
               <Search style={{ marginBottom: 8, width: '250px'}} placeholder="Search" onChange={this.onChange} />
               {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
               </CapSelect> : ''}
-              <CapTree
-                styling={{height: '350px', overflow: 'auto'}}
+              <Tree
+                styling={{'height': '350px', 'overflow': 'auto'}}
                 onSelect={this.handleOnSelect}
                 selectedKeys={this.state.tagValue}
                 expandedKeys={this.state.expandedKeys}
@@ -192,14 +195,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
                 onExpand={this.onExpand}
               >
                 {this.renderTags(tg, this.state.searchValue)}
-              </CapTree>
-            </CapSpin>
+              </Tree>
+            </Spin>
           </div>}
           trigger="click"
           placement="bottomRight">
-          <CapButton isAddBtn type="flat">{this.props.label !== '' ? this.props.label : ''}</CapButton>
+          <CapButton icon="plus-circle-o" type="secondary">{this.props.label !== '' ? this.props.label : ''}</CapButton>
         </CapPopover>
-        <CapModal
+        <Modal
           visible={this.state.showModal}
           title={this.props.intl.formatMessage(messages["Dynamic Days before Expiry"])}
           onOk={this.handleOk}
@@ -213,7 +216,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         >
           <p>{this.props.intl.formatMessage(messages.numberOfDaysBeforeExpiry)}</p>
           <CapInput onChange={this.handleDynamicDateChange} value={this.state.dynamicDateValue}></CapInput>
-        </CapModal>
+        </Modal>
       </div>
     );
   }

package/components/CardGrid/index.js

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import {CapSpin, CapRow, CapColumn} from '@capillarytech/cap-ui-library';
+import { Row, Col } from 'antd';
 import CustomCard from '../Card';
 
 class CardGrid extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -37,18 +37,15 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
     return (
       <div className={this.props.className}>
         <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
-        <CapSpin spinning={this.props.isLoading} tip={this.props.loadingTip}>
-          <div className={this.props.enablePagination ? 'pagination-container' : ''}>
-            <CapRow gutter={this.props.gutterSize}>
-              { this.props.listItem.length > 0 ? this.props.listItem.map( (item) => (
-                <CapColumn 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>
-                </CapColumn>
-              )) : ''}
-            </CapRow>
-          </div>
-        </CapSpin>
-
+        <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>
     );
   }
@@ -63,15 +60,12 @@ CardGrid.propTypes = {
   onItemClick: PropTypes.func,
   className: PropTypes.string,
   enablePagination: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  loadingTip: PropTypes.string,
 };
 
 CardGrid.defaultProps = {
   gutterSize: 16,
   colNumber: 4,
   className: '',
-  isLoading: false,
 };
 
 export default CardGrid;

package/components/Ckeditor/index.js

@@ -163,8 +163,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     _.forEach(this.props.events, (event, index) => {
       this.editorInstance.on(index, event);
     });
-    const channel = _.get(this.props, 'channel');
-    if (channel && channel.toLowerCase() === 'wechat') {
+    if (this.props.channel.toLowerCase() === 'wechat') {
       this.editorInstance.on('blur', this.onFocusOut);
       _.forEach(this.props.events, (event, index) => {
         this.editorInstance.on(index, event);

package/components/CustomPopOver/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 // import styled from 'styled-components';
-import {CapPopover} from '@capillarytech/cap-ui-library';
+import {CapPopover} from '@capillarytech/cap-react-ui-library';
 // import { FormattedMessage } from 'react-intl';
 // import messages from './messages';
 import _ from "lodash";

package/components/EmailPreview/index.js

@@ -11,10 +11,9 @@ import { FormattedMessage } from 'react-intl';
 import moment from "moment";
 import messages from "./messages";
 import './_emailPreview.scss';
-import tabletBody from '../../assets/iPad.svg';
-import mobileBody from '../../assets/mobile.png';
+const tabletBody = require('./assets/images/iPad.svg');
+const mobileBody = require('./assets/images/mobile.png');
 
-// this component will be deprecated after replacing with the v2 component.
 const deviceAspectRatio = {
   desktop: {
     height: "500",

package/components/FormBuilder/_formBuilder.scss

@@ -1,18 +1,25 @@
-
+.ant-tabs-nav{
+  text-align: center;
+  color: #333333;
+  line-height: 24px;
+  font-size: 16px;
+  font-family: open-sans, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+}
 
 .form-tab-header{
   display: flex;
   align-items: center;
+  font-family: open-sans, sans-serif !important;
   font-style: normal;
   font-weight: 600;
 }
 
-.form-builder-radio-group {
- 
-    .cap-radio-v2{
-      display: inline-block;
-    }
-  
+.ant-tabs-tab{
+  // border: 1px solid #1D5B96;
+  // border-bottom: 2px solid #1D5B96;
+  padding: 0 16px 0 8px !important;
 }
 
 .textarea-error-message {
@@ -64,7 +71,7 @@
     display: inline-block;
     font-size: 16px;
     margin: 4px;
-    // font-family: Open-Sans;
+    font-family: Open-Sans;
     text-align: center;
     width: 24px;
     height: 24px;