Merge pull request #17 from rokinsky/fix/component-update

fix: add data attributes and outline class when updating a component

Author: emanuelgsouza

lib/sb-editable.d.ts

@@ -8,9 +8,11 @@ export interface SbEditableContent {
 interface SbEditableProps {
     content: SbEditableContent
 }
-declare class SbEditable extends React.Component<SbEditableProps, {}> {
+declare class SbEditable extends React.PureComponent<SbEditableProps, {}> {
     constructor(props: SbEditableProps)
     componentDidMount(): void
+    componentDidUpdate(): void
+    addPropsOnChildren(): void
     addClass(el: HTMLElement, className: string): void
     render(): React.ReactNode
 }

lib/sb-editable.js

@@ -22,8 +22,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var SbEditable = function (_React$Component) {
-  _inherits(SbEditable, _React$Component);
+var SbEditable = function (_React$PureComponent) {
+  _inherits(SbEditable, _React$PureComponent);
 
   function SbEditable(props) {
     _classCallCheck(this, SbEditable);
@@ -34,6 +34,16 @@ var SbEditable = function (_React$Component) {
   _createClass(SbEditable, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
+      this.addPropsOnChildren();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.addPropsOnChildren();
+    }
+  }, {
+    key: 'addPropsOnChildren',
+    value: function addPropsOnChildren() {
       if (typeof this.props.content._editable === 'undefined' || window.location === window.parent.location) {
         return;
       }
@@ -67,6 +77,6 @@ var SbEditable = function (_React$Component) {
   }]);
 
   return SbEditable;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 exports.default = SbEditable;

src/sb-editable.jsx

@@ -1,19 +1,27 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-class SbEditable extends React.Component {
+class SbEditable extends React.PureComponent {
   constructor(props) {
     super(props)
   }
 
   componentDidMount() {
+    this.addPropsOnChildren()
+  }
+
+  componentDidUpdate() {
+    this.addPropsOnChildren()
+  }
+
+  addPropsOnChildren() {
     if (typeof this.props.content._editable === 'undefined' ||
         window.location === window.parent.location) {
       return
     }
 
-    var el = ReactDOM.findDOMNode(this)
-    var options = JSON.parse(this.props.content._editable.replace(/^<!--#storyblok#/, '').replace(/-->$/, ''))
+    const el = ReactDOM.findDOMNode(this)
+    const options = JSON.parse(this.props.content._editable.replace(/^<!--#storyblok#/, '').replace(/-->$/, ''))
 
     if (el instanceof Object && typeof el.setAttribute === 'function') {
       el.setAttribute('data-blok-c', JSON.stringify(options))