cm-page-builder - npm Package Compare versions

Comparing version 1.2.20 to 1.2.21

lib/components/AddComponent.js

@@ -64,2 +64,3 @@ 'use strict';
     };
+    AddComponent.contextType = _permissionContext.PermissionContext;
     return _this;
@@ -69,12 +70,16 @@ }
   _createClass(AddComponent, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
+    key: 'componentWillMount',
+    value: function componentWillMount() {
       this.checkAndFocus(this.props);
-      AddComponent.contextType = _permissionContext.PermissionContext;
     }
   }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this.checkAndFocus(this.props);
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      this.checkAndFocus(nextProps);
     }
+  }, {
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      return this.props.id !== nextProps.id || this.state.showHandle !== nextState.showHandle || this.state.showActionBtn !== nextState.showActionBtn || this.state.isFocused !== nextState.isFocused;
+    }
 
@@ -103,89 +108,83 @@ // For newly created component to change the focus
 
+
       var isEdit = this.context.status === 'Edit';
-      // console.log(this.state)
+      var allActions = isEdit ? {
+        'onMouseUp': this.handleMouseUp,
+        'onMouseDown': this.handleMouseDown,
+        'onKeyDown': this.handleKeyDown,
+        'data-component-type': data.componentType,
+        'onBlur': this.handleBlur,
+        'onInput': this.handleInput,
+        'onFocus': this.handleFocus,
+        'onMouseEnter': function onMouseEnter() {
+          return _this2.setState({ showHandle: true });
+        },
+        'onMouseLeave': function onMouseLeave() {
+          return _this2.setState({ showHandle: false });
+        }
+      } : {};
+
       return _react2.default.createElement(
-        _permissionContext.PermissionContext.Consumer,
-        null,
-        function (value) {
-          var isEdit = value.status === 'Edit';
-          var allActions = isEdit ? {
-            'onMouseUp': _this2.handleMouseUp,
-            'onMouseDown': _this2.onMouseDown,
-            'onKeyDown': _this2.handleKeyDown,
-            'data-component-type': data.componentType,
-            'onBlur': _this2.handleBlur,
-            'onInput': _this2.handleInput,
-            'onFocus': _this2.handleFocus,
-            'onMouseEnter': function onMouseEnter() {
-              return _this2.setState({ showHandle: true });
+        'div',
+        _extends({
+          ref: function ref(node) {
+            return _this2.elem = node;
+          },
+          className: 'widget-container',
+          'data-block-id': this.props.id,
+          style: this.handleInlineStyles(data.componentType)
+        }, allActions),
+        isEdit && (showHandle || isFocused) && _react2.default.createElement(_DragHandle2.default, { id: data.id }),
+        _react2.default.cloneElement(this.props.children, _extends({}, this.props.children.props, data)),
+        _react2.default.createElement(
+          _reactTransitionGroup.CSSTransition,
+          {
+            'in': isEdit && showActionBtn,
+            timeout: 300,
+            classNames: 'fade',
+            unmountOnExit: true
+          },
+          _react2.default.createElement(
+            'div',
+            { className: 'text-type-tools',
+              'data-block-type': 'component-select-div',
+              style: { display: showActionBtn && !['Divider', 'Upload'].includes(data.componentType) ? 'flex' : 'none' }
             },
-            'onMouseLeave': function onMouseLeave() {
-              return _this2.setState({ showHandle: false });
-            }
-          } : {};
-          return _react2.default.createElement(
-            'div',
-            _extends({
-              ref: function ref(node) {
-                return _this2.elem = node;
-              },
-              className: 'widget-container',
-              'data-block-id': _this2.props.id,
-              style: _this2.handleInlineStyles(data.componentType)
-            }, allActions),
-            isEdit && (showHandle || isFocused) && _react2.default.createElement(_DragHandle2.default, { id: data.id }),
-            _react2.default.cloneElement(_this2.props.children, _extends({}, _this2.props.children.props, data)),
             _react2.default.createElement(
-              _reactTransitionGroup.CSSTransition,
-              {
-                'in': isEdit && showActionBtn,
-                timeout: 300,
-                classNames: 'fade',
-                unmountOnExit: true
-              },
-              _react2.default.createElement(
-                'div',
-                { className: 'text-type-tools',
-                  'data-block-type': 'component-select-div',
-                  style: { display: showActionBtn && !['Divider', 'Upload'].includes(data.componentType) ? 'flex' : 'none' }
-                },
-                _react2.default.createElement(
-                  'div',
-                  { 'data-type': 'Header1' },
-                  _react2.default.createElement('i', { className: 'cm-icon-h1' })
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { 'data-type': 'Header2' },
-                  _react2.default.createElement('i', { className: 'cm-icon-h2' })
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { 'data-type': 'Olist' },
-                  _react2.default.createElement('i', { className: 'cm-icon-numbers' })
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { 'data-type': 'Ulist' },
-                  _react2.default.createElement('i', { className: 'cm-icon-bullets' })
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { 'data-type': 'Upload' },
-                  _react2.default.createElement('i', { className: 'cm-icon-picture' })
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { 'data-type': 'Embed' },
-                  _react2.default.createElement('i', { className: 'cm-icon-video' })
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { 'data-type': 'Divider' },
-                  _react2.default.createElement('i', { className: 'cm-icon-divider' })
-                )
-              )
+              'div',
+              { 'data-type': 'Header1' },
+              _react2.default.createElement('i', { className: 'cm-icon-h1' })
+            ),
+            _react2.default.createElement(
+              'div',
+              { 'data-type': 'Header2' },
+              _react2.default.createElement('i', { className: 'cm-icon-h2' })
+            ),
+            _react2.default.createElement(
+              'div',
+              { 'data-type': 'Olist' },
+              _react2.default.createElement('i', { className: 'cm-icon-numbers' })
+            ),
+            _react2.default.createElement(
+              'div',
+              { 'data-type': 'Ulist' },
+              _react2.default.createElement('i', { className: 'cm-icon-bullets' })
+            ),
+            _react2.default.createElement(
+              'div',
+              { 'data-type': 'Upload' },
+              _react2.default.createElement('i', { className: 'cm-icon-picture' })
+            ),
+            _react2.default.createElement(
+              'div',
+              { 'data-type': 'Embed' },
+              _react2.default.createElement('i', { className: 'cm-icon-video' })
+            ),
+            _react2.default.createElement(
+              'div',
+              { 'data-type': 'Divider' },
+              _react2.default.createElement('i', { className: 'cm-icon-divider' })
             )
-          );
-        }
+          )
+        )
       );
@@ -208,9 +207,6 @@ }
     if (currentElem.elemId && id === currentElem.elemId) {
-      //Get the dom not if it has changed
-      var elem = _reactDom2.default.findDOMNode(_this3).querySelector('[data-root="true"]');
       //check if focused or not
       if (!isFocused) {
-        _this3.setState({ showActionBtn: true, isFocused: true });
+        _this3.setState({ isFocused: true });
       }
-      //if current state is focus the element
     } else {
@@ -223,3 +219,2 @@ //when focus is removed doesn't show the handle and the btns
   this.handleMouseUp = function (e) {
-    _this3.setState({ showActionBtn: e.target.innerHTML === '', isFocused: true });
     var comSelDiv = _this3.elem.querySelector('[data-block-type="component-select-div"]');
@@ -326,3 +321,3 @@ if (comSelDiv && comSelDiv.contains(e.target)) {
   this.handleInput = function (e) {
-    _this3.setState({ showActionBtn: e.target.innerHTML === '' });
+    _this3.setState({ showActionBtn: e.target.innerHTML === '' && !e.target.value });
   };
@@ -332,2 +327,3 @@
     e.persist();
+    _this3.setState({ showActionBtn: e.target.innerHTML === '', isFocused: true });
     var _props2 = _this3.props,
@@ -350,8 +346,9 @@ appData = _props2.appData,
 
-  this.onMouseDown = function (e) {
-    _this3.props.setCurrentElem(_this3.props.id);
+  this.handleMouseDown = function (e) {
+    var handle = document.getElementById('drag-handle');
+    if (!(handle && handle.contains(e.target))) _this3.props.setCurrentElem(_this3.props.id);
   };
 
   this.handleBlur = function (e) {
-    if (_this3.props.data.componentType !== 'Embed') _this3.props.updateComponent({ id: _this3.props.id, newState: { content: e.target.innerHTML } });
+    if (_this3.props.data.componentType !== 'Embed' && _this3.props.id !== _this3.props.currentElem.elemId) _this3.props.updateComponent({ id: _this3.props.id, newState: { content: e.target.innerHTML } });
   };
@@ -358,0 +355,0 @@

lib/components/ContentEditable.js

@@ -60,3 +60,3 @@ 'use strict';
     _this.handleMouseUp = function (e) {
-      !_this.props.componentType && _this.props.setCurrentElem(_this.props.id);
+      if (!_this.props.componentType) _this.props.setCurrentElem(_this.props.id);
     };
@@ -66,3 +66,3 @@
       e.persist();
-      !_this.props.componentType && (0, _helpers.setCursorToEnd)(e);
+      if (!_this.props.componentType) (0, _helpers.setCursorToEnd)(e);
     };
@@ -69,0 +69,0 @@

lib/components/DragHandle.js

@@ -49,3 +49,3 @@ 'use strict';
       e.preventDefault();
-      _this.setState({ showMoreOptions: !_this.state.showMoreOptions });
+      // this.setState({showMoreOptions: !this.state.showMoreOptions})
     };
@@ -87,2 +87,4 @@
     value: function render() {
+      var _this2 = this;
+
       return _react2.default.createElement(
@@ -95,6 +97,29 @@ 'div',
           onClick: this.optionHandleClick,
+          onMouseUp: function onMouseUp(e) {
+            return e.stopPropagation();
+          },
           style: { cursor: 'grab' }
         },
-        _react2.default.createElement('i', { className: 'cm cm-icon-handle' }),
         _react2.default.createElement(
+          'div',
+          {
+            className: 'delete-btn',
+            onMouseDown: function onMouseDown(e) {
+              return e.stopPropagation();
+            },
+            onMouseUp: function onMouseUp(e) {
+              return e.stopPropagation();
+            },
+            onClick: function onClick(e) {
+              e.stopPropagation();_this2.props.removeComponent({ blockId: _this2.props.id });
+            }
+          },
+          _react2.default.createElement('i', { className: 'cm-icon-trash' })
+        ),
+        _react2.default.createElement(
+          'span',
+          { className: 'handle-icon' },
+          _react2.default.createElement('i', { className: 'cm cm-icon-handle' })
+        ),
+        _react2.default.createElement(
           _reactTransitionGroup.CSSTransition,
@@ -101,0 +126,0 @@ {

lib/page/PageContainer.js

@@ -112,3 +112,3 @@ 'use strict';
 			var conElem = document.querySelector('[data-container-block="true"]');
-			if (conElem.offsetHeight < e.pageY) {
+			if (conElem.getBoundingClientRect().bottom < e.pageY) {
 				var appData = _this.props.appData;
@@ -236,3 +236,3 @@
 			this.initWindowVar(this.props);
-			this.props.initComponents(this.props.pageComponents);
+			if (!this.props.newPage) this.props.initComponents(this.props.pageComponents);
 		}
@@ -310,2 +310,3 @@ }, {
 			var isEdit = this.props.status === 'Edit';
+			console.log();
 			return _react2.default.createElement(
@@ -312,0 +313,0 @@ 'div',

lib/redux/reducers/appDataReducers.js

@@ -54,6 +54,15 @@ 'use strict';
 
-var initComponents = exports.initComponents = function initComponents(data) {
+var initComponents = exports.initComponents = function initComponents() {
+  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
   return function (dispatch) {
-    dispatch({ type: INIT_COMPONENTS, data: data });
-    // dispatch({ type: ADD_COMPONENT })
+    var newId = createID();
+    dispatch({
+      type: INIT_COMPONENTS,
+      data: data.length === 0 ? [{ content: '', position: 1, componentType: 'Text', id: newId }] : data
+    });
+    dispatch({
+      type: _currentElemReducer.SET_CURRENT_ELEM,
+      elemId: data.length === 0 ? newId : null
+    });
   };
@@ -60,0 +69,0 @@ };

package.json

 {
   "name": "cm-page-builder",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "description": "Awesome react starter kit",
@@ -5,0 +5,0 @@ "main": "lib/page/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

134363

increased by0.88%

Lines of code

3146

increased by1.13%

No dependency changes