@capillarytech/creatives-library 2.0.13 → 2.0.15

package/containers/Templates/index.js

@@ -370,18 +370,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     });
   }
 
-  setLocale = () => {
-    const user = localStorage.getItem('user');
-    let locale = 'en';
-    if (user) {
-      locale = JSON.parse(user).lang;
-    }
-    locale = this.getMappedLocale(locale);
-    //locale = 'zh';
-    console.log('Setting final locale as', locale);
-    moment.locale(locale);
-  };
-
   getMappedLocale = (locale) => {
     const map = {
       'en': 'en',
@@ -435,7 +423,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
   };
-
+  onPaginationChange = () => { this.getAllTemplates({getNextPage: true}); }
+  setLocale = () => {
+    const user = localStorage.getItem('user');
+    let locale = 'en';
+    if (user) {
+      locale = JSON.parse(user).lang;
+    }
+    locale = this.getMappedLocale(locale);
+    //locale = 'zh';
+    console.log('Setting final locale as', locale);
+    moment.locale(locale);
+  };
   getCurrentWindow(e) {
     console.log('in sms templates', e);
     const response = {
@@ -731,7 +730,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     } else {
       this.props.router.push({
-        pathname: `/${this.state.channel.toLowerCase()}/create`,
+        pathname: `/templates/${this.state.channel.toLowerCase()}/create`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
       });
     }
@@ -1207,7 +1206,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       />
     );
   }
-
   render() {
     console.log('templates props', this.props);
     let pageHeaderText = '';
@@ -1227,30 +1225,30 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pageHeaderText = this.props.intl.formatMessage(messages.lineHeader);
       }
     }
-    const options = [
-      {
-        value: "Most Recent",
-        label: this.props.intl.formatMessage(messages.mostRecentOption),
-      },
-      {
-        value: "Alphabetically",
-        label: this.props.intl.formatMessage(messages.alphabeticallyOption),
-      },
-    ];
-    const typeOptions = [
-      {
-        value: "All",
-        label: "All",
-      },
-      {
-        label: "Text",
-        value: 'Text',
-      },
-      {
-        label: "Image",
-        value: "Image",
-      },
-    ];
+    // const options = [
+    //   {
+    //     value: "Most Recent",
+    //     label: this.props.intl.formatMessage(messages.mostRecentOption),
+    //   },
+    //   {
+    //     value: "Alphabetically",
+    //     label: this.props.intl.formatMessage(messages.alphabeticallyOption),
+    //   },
+    // ];
+    // const typeOptions = [
+    //   {
+    //     value: "All",
+    //     label: "All",
+    //   },
+    //   {
+    //     label: "Text",
+    //     value: 'Text',
+    //   },
+    //   {
+    //     label: "Image",
+    //     value: "Image",
+    //   },
+    // ];
     const filterContent = (
       <div className="action-container">
         <CapInput
@@ -1261,24 +1259,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           value={this.state.searchText}
           onChange={(e) => this.searchTemplate(e.target.value)}
         />
-        {this.props.isComponent ? <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-          <CapButton type="secondary" onClick={() => this.props.isComponent ? this.handleBlankTemplateAction() : this.createTemplate()}>{ this.props.intl.formatMessage(messages.createNewActionButton) }</CapButton>
+        <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+          <CapButton
+            type={this.props.isComponent ? "secondary" : "primary"}
+            onClick={(ev) => this.props.isComponent ? this.handleBlankTemplateAction() : this.createTemplate(ev)} >
+            { this.props.intl.formatMessage(messages.createNewActionButton) }
+          </CapButton>
         </div>
-        :
-        <div className="action-container">
-          <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-            <div className="select-font">{this.props.intl.formatMessage(messages.sortBy)}</div>
-            <CapSelect key={"select-account"} style={{width: '120px', marginLeft: '16px', minWidth: 'initial'}} defaultValue="Most Recent" onChange={this.handleSortBy} options={options}>
-            </CapSelect>
-          </div>
-          { (this.state.channel.toLowerCase() === 'mobilepush' || this.state.channel.toLowerCase() === 'line') &&
-            <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center', marginLeft: '16px'}}>
-              <div className="select-font">Type</div>
-              <CapSelect key={"select-type"} style={{width: '120px', marginLeft: '16px', minWidth: 'initial'}} defaultValue="All" onChange={this.handleType} options={typeOptions}>
-              </CapSelect>
-            </div>
-          }
-        </div>}
+
       </div>
     );
     const accountOptions = [];
@@ -1481,7 +1469,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </Row>
           <Row className="template-header-container">
             <div className="template-header">{(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? pageHeaderDvs : pageHeader}</div>
-            {!this.props.isComponent && actionButton}
           </Row>
           <Row>
             <Helmet
@@ -1491,9 +1478,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               ]}
             />
             {this.props.renderNewCardGrid && templateList && templateList.length > 0 &&
-              this.props.renderNewCardGrid({templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})
+              <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
+                  {this.props.renderNewCardGrid({templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+              </Pagination>
             }
-            {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) && <Pagination onPageChange={() => { console.log('getting all templates pagination'); this.getAllTemplates({getNextPage: true}); }} paginationSelector="pagination-container">
+            {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) &&
+            <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
               <CardGrid
                 className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
                 listItem={templateList}

package/containers/TemplatesV2/index.js

@@ -44,7 +44,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       }));
     return (<div>
       {filterContent}
-      <CapCustomCardList cardList={cardDataList} type="SMS" />
+      <div className="pagination-container">
+        <CapCustomCardList cardList={cardDataList} type="SMS" />
+      </div>
     </div>);
   }
   getTemplatesComponent(channel) {
@@ -83,7 +85,13 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   render() {
     return (
       <div>
-        <CapTab panes={this.state.panes} onChange={this.channelChange} activeKey={this.state.selectedChannel} defaultActiveKey={this.state.selectedChannel}/>
+        <CapTab
+          panes={this.state.panes}
+          onChange={this.channelChange}
+          activeKey={this.state.selectedChannel}
+          defaultActiveKey={this.state.selectedChannel}/>
+
+
       </div>
 
     );

package/containers/WeChat/index.js

@@ -27,6 +27,7 @@ import {getMessageObject} from '../../utils/messageUtils';
 // import SlideBox from '../../components/SlideBox';
 // import PageHeader from '../../components/PageHeader';
 import './_wechat.scss';
+import callNativeEvent from '../../utils/callNativeEvent';
 
 // const Option = Select.Option;
 
@@ -483,7 +484,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
         this.setState({isEdit: true});
       }
       if (this.state.isEdit && _.isEmpty(this.state.editTemplateData) && !_.isEmpty(nextProps.WeChat.weChatTemplates)) {
-        const templateIndex = _.findIndex(nextProps.WeChat.weChatTemplates, {"_id": nextProps.params.id});
+        const templateIndex = _.findIndex(nextProps.WeChat.weChatTemplates, {_id: nextProps.params.id});
         this.setState({editTemplateData: nextProps.WeChat.weChatTemplates[templateIndex]}, () => {
           if (_.isEmpty(this.state.baseSchema)) {
             this.setState({ baseSchema: _.cloneDeep(this.state.schema)}, () => {
@@ -694,8 +695,8 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
     console.log('posting final result', this.state.formData, this.state.editTemplateData);
     const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
     const data = {
-      "template_id": this.state.editTemplateData.versions.base.template_id,
-      "Title": this.state.editTemplateData.versions.base.Title,
+      template_id: this.state.editTemplateData.versions.base.template_id,
+      Title: this.state.editTemplateData.versions.base.Title,
       Tag: [],
       url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
       TopColor: "#000000",
@@ -1287,7 +1288,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
       myField.value += myValue;
     }
     const event = new Event('input', { bubbles: true });
-    myField.dispatchEvent(event);
+    callNativeEvent({field, value: myField.value, event});
   }
 
   internalUrlChecked() {
@@ -1561,7 +1562,6 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
         <Helmet
           title="WeChat"
         />
-        {/* <CapSelect options={options} /> */}
         <Row className="wechat-container">
           <Col>
             <FormBuilder

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -61,7 +61,7 @@
     "sanitize.css": "4.1.0",
     "semantic-ui-react": "0.68.3",
     "source-map-loader": "^0.2.4",
-    "styled-components": "1.1.2",
+    "styled-components": "2",
     "warning": "3.0.0",
     "whatwg-fetch": "2.0.1"
   }

package/utils/callNativeEvent.js

@@ -0,0 +1,15 @@
+//https://github.com/facebook/react/issues/11488#issuecomment-470623779
+export default function callNativeEvent({field, value, ev}) {
+  const event = ev;
+  const input = field;
+  const lastValue = input.value;
+  input.value = value;
+// hack React15
+  event.simulated = true;
+// hack React16 内部定义了descriptor拦截value，此处重置状态
+  const tracker = input._valueTracker;
+  if (tracker) {
+    tracker.setValue(lastValue);
+  }
+  input.dispatchEvent(event);
+}