@capillarytech/creatives-library 2.0.13 → 2.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,6 +24,7 @@ import '../Create/_smsCreate.scss';
24
24
  import messages from './messages';
25
25
  import * as globalActions from '../../../containers/Cap/actions';
26
26
  import {getMessageObject} from '../../../utils/messageUtils';
27
+ import callNativeEvent from '../../../utils/callNativeEvent';
27
28
 
28
29
  export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
29
30
  constructor(props) {
@@ -443,487 +444,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
443
444
  }
444
445
 
445
446
  resetSchema() {
446
- //const schema =
447
- // {
448
- // standalone: {
449
- // sections: [
450
- // {
451
- // type: "multicols",
452
- // inputFields: [
453
- // {
454
- // cols: [
455
- // {
456
- // id: "template-name",
457
- // placeholder: "Enter template name",
458
- // type: "input", //Resembles component to be used
459
- // metaType: "text",
460
- // datatype: "string",
461
- // required: true,
462
- // fluid: true,
463
- // style: {
464
- // fontSize: '20px',
465
- // fontFamily: 'proxima-nova,sans-serif',
466
- // fontStyle: 'normal',
467
- // fontWeight: 600,
468
- // marginBottom: '16px',
469
- // },
470
- // styling: "semantic",
471
- // order: 1,
472
- // width: 9,
473
- // // offSet: 10,
474
- // customComponent: false,
475
- // standalone: true,
476
- // supportedEvents: {
477
- // onChange: this.onTemplateNameChange,
478
- // },
479
- // },
480
- // {
481
- // id: "discard-button",
482
- // width: 3,
483
- // offset: 8,
484
- // metaType: "submit-button",
485
- // colStyle: {
486
- // // marginLeft: '47.833%',
487
- // textAlign: 'right',
488
- // paddingRight: '12px',
489
- // },
490
- // type: "button",
491
- // buttonType: "cancel",
492
- // value: "Discard",
493
- // customComponent: false,
494
- // standalone: true,
495
- // styling: "semantic",
496
- // order: 3,
497
- // fluid: false,
498
- // submitAction: "discardValues",
499
- // supportedEvents: {
500
- // discardValues: this.discardValues,
501
- // },
502
- // },
503
- // {
504
- // id: "cancel-button",
505
- // width: 2,
506
- // // offset: 11,
507
- // metaType: "submit-button",
508
- // colStyle: {
509
- // textAlign: 'right',
510
- // width: '9%',
511
- // },
512
- // type: "button",
513
- // buttonType: "cancel",
514
- // value: "Cancel",
515
- // customComponent: false,
516
- // standalone: true,
517
- // styling: "semantic",
518
- // order: 3,
519
- // fluid: false,
520
- // submitAction: "cancelTemplate",
521
- // supportedEvents: {
522
- // cancelTemplate: this.cancelTemplate,
523
- // },
524
- // },
525
- // {
526
- // id: "save-button",
527
- // width: 2,
528
- // metaType: "submit-button",
529
- // colStyle: {
530
- // textAlign: 'right',
531
- // width: '7%',
532
- // },
533
- // type: "button",
534
- // buttonType: "primary",
535
- // value: "Save",
536
- // customComponent: false,
537
- // styling: "semantic",
538
- // order: 3,
539
- // fluid: false,
540
- // standalone: true,
541
- // submitAction: "saveFormData",
542
- // supportedEvents: {
543
- // saveFormData: this.saveFormData,
544
- // },
545
- // },
546
- // ],
547
- // },
548
- // ],
549
- // actionFields: [],
550
- // },
551
- // ],
552
- // },
553
- // containers: [
554
- // {
555
- // panes: [
556
- // {
557
- // sections: [
558
- // {
559
- // type: "parent",
560
- // width: 16,
561
- // rowStyle: {
562
- // height: '100%',
563
- // },
564
- // childSections: [
565
- // {
566
- // colStyle: {
567
- // paddingTop: '16px',
568
- // borderRight: '1px solid #d9d9d9',
569
- // height: '100%',
570
- // },
571
- // width: 16,
572
- // type: "parent",
573
- // childSections: [
574
- // {
575
- // type: "col-label",
576
- // inputFields: [
577
- // {
578
- // id: "sms-editor",
579
- // label: "Message",
580
- // labelStyle: {
581
- // backgroundColor: 'white',
582
- // textAlign: 'left',
583
- // color: '#333333',
584
- // lineHeight: '24px',
585
- // fontSize: '16px',
586
- // fontWeight: '600',
587
- // fontFamily: 'proxima-nova, sans-serif',
588
- // fontStyle: 'normal',
589
- // },
590
- // style: {
591
- // textAlign: 'left',
592
- // color: '#333333',
593
- // fontFamily: 'Open-Sans',
594
- // lineHeight: '24px',
595
- // fontSize: '14px',
596
- // },
597
- // type: "textarea",
598
- // metaType: "text",
599
- // datatype: "string",
600
- // required: true,
601
- // placeholder: "Please input sms template content.",
602
- // fluid: false,
603
- // styling: "semantic",
604
- // onlyDisplay: false,
605
- // width: 18,
606
- // autosize: true,
607
- // autosizeParams: {
608
- // minRows: 3,
609
- // },
610
- // order: 2,
611
- // customComponent: true,
612
- // supportedEvents: {
613
- // onChange: this.onTemplateContentChange,
614
- // },
615
- // },
616
- // ],
617
- // actionFields: [
618
- // ],
619
- // },
620
- // {
621
- // type: "multicols",
622
- // inputFields: [
623
- // {
624
- // cols: [
625
- // {
626
- // offset: 19,
627
- // id: "tagList",
628
- // label: "Tags",
629
- // type: "tag-list", //Resembles component to be used
630
- // metaType: "List",
631
- // datatype: "select",
632
- // required: true,
633
- // fluid: true,
634
- // onlyDisplay: true,
635
- // styling: "semantic",
636
- // order: 1,
637
- // customComponent: true,
638
- // supportedEvents: {
639
- // onTagSelect: this.onTagSelect,
640
- // },
641
- // },
642
- // ],
643
- // },
644
- // {
645
- // cols: [
646
- // {
647
- // id: "unicode-validity",
648
- // label: "Allow Unicode characters?",
649
- // labelStyle: {
650
- // backgroundColor: "white",
651
- // },
652
- // style: {
653
- // textAlign: 'left',
654
- // color: '#262626',
655
- // fontFamily: 'Open-Sans',
656
- // lineHeight: '24px',
657
- // fontSize: '14px',
658
- // },
659
- // type: "checkbox", //Resembles component to be used
660
- // metaType: "text",
661
- // datatype: "boolean",
662
- // required: true,
663
- // fluid: true,
664
- // styling: "semantic",
665
- // order: 1,
666
- // width: 10,
667
- // offset: 4,
668
- // onlyDisplay: false,
669
- // customComponent: false,
670
- // supportedEvents: {
671
- // onChange: this.onTemplateNameChange,
672
- // },
673
- // },
674
- // ],
675
- // },
676
- // ],
677
- // actionFields: [],
678
- // },
679
- // ],
680
- // },
681
- // {
682
- // width: 6,
683
- // type: "multicols",
684
- // offset: 1,
685
- // colStyle: {
686
- // paddingTop: '16px',
687
- // },
688
- // inputFields: [
689
- // {
690
- // cols: [
691
- // {
692
- // id: "sms-preview",
693
- // type: "sms-preview", //Resembles component to be used
694
- // customComponent: true,
695
- // customStyling: { padding: '0' },
696
- // metaType: "preview",
697
- // required: true,
698
- // fluid: true,
699
- // styling: "semantic",
700
- // order: 1,
701
- // width: 5,
702
- // onlyDisplay: true,
703
- // offset: 7,
704
- // channel: 'SMS',
705
- // supportedEvents: {
706
- // onChange: this.onTemplateNameChange,
707
- // },
708
- // },
709
- // ],
710
- // },
711
- // ],
712
- // },
713
- // ],
714
- // },
715
- // ],
716
- // },
717
- // ],
718
- // type: "tabs",
719
- // defaultPanes: 1,
720
- // additionalPanes: 0,
721
- // id: "pane",
722
- // tabBarExtraContent: {
723
- // sections: [
724
- // {
725
- // type: "multicols",
726
- // actionFields: [
727
- // {
728
- // cols: [
729
- // {
730
- // id: "add-version-button",
731
- // metaType: "submit-button",
732
- // type: "button",
733
- // buttonType: "cancel",
734
- // icon: "plus-circle-o",
735
- // value: "New Version",
736
- // customComponent: false,
737
- // onlyDisplay: true,
738
- // styling: "semantic",
739
- // order: 3,
740
- // fluid: false,
741
- // submitAction: "addVersion",
742
- // supportedEvents: {
743
- // addVersion: this.addVersion,
744
- // },
745
- // },
746
- // ],
747
- // },
748
- // ],
749
- // inputFields: [],
750
- // },
751
- // ],
752
- // },
753
- // tabContent: {
754
- // sections: [
755
- // {
756
- // type: "multicols",
757
- // inputFields: [
758
- // {
759
- // rowStyle: {
760
- // display: "flex",
761
- // flex: 1,
762
- // },
763
- // cols: [
764
- // {
765
- // id: "tab-header",
766
- // metaType: "label",
767
- // value: "Version",
768
- // primitive: true,
769
- // dynamicTab: true,
770
- // type: "div",
771
- // width: 5,
772
- // offset: 0,
773
- // onlyDisplay: true,
774
- // colStyle: {
775
- // flex: 1,
776
- // },
777
- // supportedEvents: {
778
- // onChange: this.onVersionNameChange,
779
- // },
780
- // },
781
- // {
782
- // id: "tab-options-popover",
783
- // metaType: "display",
784
- // colStyle: {
785
- // flex: 0,
786
- // },
787
- // type: "popover",
788
- // customComponent: false,
789
- // styling: "semantic",
790
- // order: 3,
791
- // fluid: false,
792
- // onlyDisplay: true,
793
- // submitAction: "onTabOptionSelect",
794
- // supportedEvents: {
795
- // onTabOptionSelect: this.onTabOptionSelect,
796
- // },
797
- // content: {
798
- // sections: [
799
- // {
800
- // type: "multicols",
801
- // inputFields: [
802
- // {
803
- // cols: [
804
- // {
805
- // id: "mark-final-version-label",
806
- // metaType: "label",
807
- // type: "div",
808
- // primitive: true,
809
- // value: "Mark as Final",
810
- // onlyDisplay: true,
811
- // customComponent: false,
812
- // order: 3,
813
- // fluid: false,
814
- // submitAction: "markFinalVersion",
815
- // supportedEvents: {
816
- // markFinalVersion: this.markFinalVersion,
817
- // },
818
- // },
819
- // ],
820
- // },
821
- // {
822
- // cols: [
823
- // {
824
- // id: "duplicate-version-label",
825
- // metaType: "label",
826
- // type: "div",
827
- // primitive: true,
828
- // value: "Duplicate",
829
- // onlyDisplay: true,
830
- // customComponent: false,
831
- // order: 3,
832
- // fluid: false,
833
- // submitAction: "duplicateVersion",
834
- // supportedEvents: {
835
- // duplicateVersion: this.duplicateVersion,
836
- // },
837
- // },
838
- // ],
839
- // },
840
- // {
841
- // cols: [
842
- // {
843
- // id: "rename-version-label",
844
- // metaType: "label",
845
- // type: "div",
846
- // primitive: true,
847
- // value: "Rename",
848
- // onlyDisplay: true,
849
- // customComponent: false,
850
- // order: 3,
851
- // fluid: false,
852
- // submitAction: "renameVersion",
853
- // supportedEvents: {
854
- // renameVersion: this.renameVersion,
855
- // },
856
- // },
857
- // ],
858
- // },
859
- // {
860
- // cols: [
861
- // {
862
- // id: "delete-version-label",
863
- // metaType: "label",
864
- // type: "div",
865
- // primitive: true,
866
- // value: "Delete",
867
- // onlyDisplay: true,
868
- // customComponent: false,
869
- // order: 3,
870
- // fluid: false,
871
- // submitAction: "deleteVersion",
872
- // supportedEvents: {
873
- // deleteVersion: this.deleteVersion,
874
- // },
875
- // },
876
- // ],
877
- // },
878
- // ],
879
- // actionFields: [],
880
- // },
881
- // ],
882
- // },
883
- // value: {
884
- // sections: [
885
- // {
886
- // type: "multicols",
887
- // inputFields: [
888
- // {
889
- // cols: [
890
- // {
891
- // id: "tab-option-icon",
892
- // metaType: "display",
893
- // type: "icon",
894
- // onlyDisplay: true,
895
- // primitive: false,
896
- // value: "",
897
- // customComponent: false,
898
- // order: 3,
899
- // fluid: false,
900
- // },
901
- // ],
902
- // },
903
- // ],
904
- // actionFields: [],
905
- // },
906
- // ],
907
- // },
908
- // trigger: "click",
909
- // placement: "bottomRight",
910
- // },
911
- // ],
912
- // },
913
- // ],
914
- // actionFields: [],
915
- // },
916
- // ],
917
- // },
918
- // label: "Version",
919
- // supportedEvents: {
920
- // onTabChange: this.onTabChange,
921
- // },
922
- // },
923
- // ],
924
- // channel: "SMS",
925
- // module: "Campaigns",
926
- // };
927
447
  this.setState({ schema: this.props.metaEntities.layouts[0].definition });
928
448
  }
929
449
 
@@ -1235,7 +755,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
1235
755
  }
1236
756
  }
1237
757
  }
1238
-
1239
758
  insertAtCursor(field, myValue) {
1240
759
  //IE support
1241
760
  const myField = field;
@@ -1255,7 +774,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
1255
774
  myField.value += myValue;
1256
775
  }
1257
776
  const event = new Event('input', { bubbles: true });
1258
- myField.dispatchEvent(event);
777
+ callNativeEvent({field, value: myField.value, event});
1259
778
  }
1260
779
 
1261
780
  handleFrameTasks = (e) => {
@@ -27,6 +27,7 @@ import {getMessageObject} from '../../utils/messageUtils';
27
27
  // import SlideBox from '../../components/SlideBox';
28
28
  // import PageHeader from '../../components/PageHeader';
29
29
  import './_wechat.scss';
30
+ import callNativeEvent from '../../utils/callNativeEvent';
30
31
 
31
32
  // const Option = Select.Option;
32
33
 
@@ -483,7 +484,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
483
484
  this.setState({isEdit: true});
484
485
  }
485
486
  if (this.state.isEdit && _.isEmpty(this.state.editTemplateData) && !_.isEmpty(nextProps.WeChat.weChatTemplates)) {
486
- const templateIndex = _.findIndex(nextProps.WeChat.weChatTemplates, {"_id": nextProps.params.id});
487
+ const templateIndex = _.findIndex(nextProps.WeChat.weChatTemplates, {_id: nextProps.params.id});
487
488
  this.setState({editTemplateData: nextProps.WeChat.weChatTemplates[templateIndex]}, () => {
488
489
  if (_.isEmpty(this.state.baseSchema)) {
489
490
  this.setState({ baseSchema: _.cloneDeep(this.state.schema)}, () => {
@@ -694,8 +695,8 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
694
695
  console.log('posting final result', this.state.formData, this.state.editTemplateData);
695
696
  const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
696
697
  const data = {
697
- "template_id": this.state.editTemplateData.versions.base.template_id,
698
- "Title": this.state.editTemplateData.versions.base.Title,
698
+ template_id: this.state.editTemplateData.versions.base.template_id,
699
+ Title: this.state.editTemplateData.versions.base.Title,
699
700
  Tag: [],
700
701
  url: this.state.formData['is-internal-url'] ? this.maskTemplateUrl(this.state.formData['template-link']) : this.state.formData['template-link'],
701
702
  TopColor: "#000000",
@@ -1287,7 +1288,7 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
1287
1288
  myField.value += myValue;
1288
1289
  }
1289
1290
  const event = new Event('input', { bubbles: true });
1290
- myField.dispatchEvent(event);
1291
+ callNativeEvent({field, value: myField.value, event});
1291
1292
  }
1292
1293
 
1293
1294
  internalUrlChecked() {
@@ -1561,7 +1562,6 @@ export class WeChat extends React.Component { // eslint-disable-line react/prefe
1561
1562
  <Helmet
1562
1563
  title="WeChat"
1563
1564
  />
1564
- {/* <CapSelect options={options} /> */}
1565
1565
  <Row className="wechat-container">
1566
1566
  <Col>
1567
1567
  <FormBuilder
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "2.0.13",
4
+ "version": "2.0.14",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
@@ -0,0 +1,15 @@
1
+ //https://github.com/facebook/react/issues/11488#issuecomment-470623779
2
+ export default function callNativeEvent({field, value, ev}) {
3
+ const event = ev;
4
+ const input = field;
5
+ const lastValue = input.value;
6
+ input.value = value;
7
+ // hack React15
8
+ event.simulated = true;
9
+ // hack React16 内部定义了descriptor拦截value,此处重置状态
10
+ const tracker = input._valueTracker;
11
+ if (tracker) {
12
+ tracker.setValue(lastValue);
13
+ }
14
+ input.dispatchEvent(event);
15
+ }