fix(components): event props not firing correctly (#13)

- Updated package.json dependencies
- Fixed issues with event props

Author: robertfyffe

.babelrc

@@ -1,19 +1,4 @@
 {
   "plugins": ["@babel/plugin-proposal-class-properties"],
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "loose": true
-      }
-    ],
-    "@babel/preset-react",
-    [
-      "@emotion/babel-preset-css-prop",
-      {
-        "autoLabel": false,
-        "labelFormat": "[filename]--[local]"
-      }
-    ]
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

dist/react-editable-textbox.js

@@ -55,9 +55,9 @@ const App = () => (
     allowedAttributes={{
       a: ['href']
     }}
-    onFocus={(resp) => {}}
-    onBlur={(resp) => {}}
-    onInput={(resp) => {}}
+    onFocus={(resp) => console.log(resp)}
+    onBlur={(resp) => console.log(resp)}
+    onInput={(resp) => console.log(resp)}
   />
 );
 

dist/react-editable-textbox.min.js

@@ -37,19 +37,18 @@
     "@emotion/core": "^10.0.28",
     "@emotion/css": "^10.0.27",
     "@emotion/styled": "^10.0.27",
-    "coveralls": "^3.1.0",
     "dompurify": "^2.0.10",
     "emotion-theming": "^10.0.27"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
+    "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@emotion/babel-preset-css-prop": "^10.0.27",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
-    "babel-plugin-add-module-exports": "^1.0.2",
-    "babel-preset-react-app": "^9.1.2",
     "commitizen": "^4.0.4",
+    "coveralls": "^3.1.0",
     "cross-env": "^7.0.2",
     "cz-customizable": "^6.2.0",
     "cz-customizable-ghooks": "^1.5.0",

examples/advanced/app.js

@@ -10,7 +10,6 @@ import {
   cleanHtml,
   getTheme,
   getCustomStyling,
-  createEvents,
   handleEvent,
   setText
 } from './utils';
@@ -47,10 +46,6 @@ const Container = styled('div')`
 `;
 
 class Editor extends PureComponent {
-  static propTypes = propTypes.editor;
-
-  static defaultProps = defaultProps.editor;
-
   constructor(props) {
     super(props);
     const { defaultText, allowedTags, allowedAttributes } = props;
@@ -132,7 +127,8 @@ class Editor extends PureComponent {
     const propManager = {
       [EDITOR]: {
         ref: (ref) => this.createRef(ref, EDITOR),
-        ...createEvents([onFocus, onBlur], this.state),
+        onFocus: () => handleEvent(onFocus, this.state),
+        onBlur: () => handleEvent(onBlur, this.state),
         ...getCustomStyling(EDITOR, styles),
         disabled
       },
@@ -176,4 +172,7 @@ class Editor extends PureComponent {
   };
 }
 
+Editor.propTypes = propTypes.editor;
+Editor.defaultProps = defaultProps.editor;
+
 export default Editor;

package.json

@@ -9,13 +9,6 @@ const getEvent = (ev, props) => callEvent(ev)(props);
 
 export const handleEvent = (ev, props) => getEvent(ev, props);
 
-export const createEvents = (events, props) =>
-  events.map((ev) => {
-    return {
-      [ev]: handleEvent(ev, props)
-    };
-  });
-
 export const cleanHtml = ({ text, allowedAttributes, allowedTags, tags }) => {
   return sanitize(text, {
     ALLOWED_ATTR: allowedAttributes,
@@ -27,7 +20,7 @@ export const setText = (text) => text || DEFAULT_ELEMENT;
 
 export const getCustomStyling = (element, styles) => {
   return {
-    customStyling: styles[element]
+    customStyling: styles[element] || {}
   };
 };