1.1.2; Fixed incorrect onCursorDropdownChange name

Author: danrpts

README.md

@@ -21,7 +21,7 @@ import { WithCursorDropdown, CursorDropdown } from "react-cursor-dropdown";
 import SomeListComponent from "SomeListComponent";
 
 const Input = props => <input {...props} />;
-const InputCursorDropdown = WithCursorDropdown(Input);
+const InputWithCursorDropdown = WithCursorDropdown(Input);
 
 class App extends Component {
   constructor(props) {
@@ -44,15 +44,15 @@ class App extends Component {
 
   render() {
     return (
-      <InputCursorDropdown
+      <InputWithCursorDropdown
         value={this.state.value}
         onChange={this.handleChange}
         onCursorDropdownChange={this.handleCursorDropdownChange}
       >
         // Specify the regex to match against the current word (capture group
         required)
         <CursorDropdown pattern={/^:(\w*)$/} component={SomeListComponent} />
-      </InputCursorDropdown>
+      </InputWithCursorDropdown>
     );
   }
 }

example/src/App.js

@@ -33,7 +33,7 @@ export default class App extends Component {
       });
     };
 
-    this.handleDropdownChange = ({ value, cursor }) => {
+    this.handleCursorDropdownChange = ({ value, cursor }) => {
       this.setState({
         value:
           this.state.value.substring(0, cursor.start) +
@@ -85,7 +85,7 @@ export default class App extends Component {
               <InputCursorDropdown
                 value={this.state.value}
                 onChange={this.handleChange}
-                onDropdownChange={this.handleDropdownChange}
+                onCursorDropdownChange={this.handleCursorDropdownChange}
               >
                 <CursorDropdown
                   pattern={/^:([\w+-]*)$/}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cursor-dropdown",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A React HOC for adding cursor dropdown menus to textareas and text inputs.",
   "author": "danrpts",
   "license": "MIT",

src/components/CursorDropdown.jsx

@@ -4,30 +4,28 @@ import { DropdownContext } from "./WithCursorDropdown.jsx";
 
 import styles from "../styles.css";
 
-export default class CursorDropdown extends Component {
-  static propTypes = {
-    pattern: PropTypes.instanceOf(RegExp).isRequired,
-    component: PropTypes.oneOfType([
-      PropTypes.node.isRequired,
-      PropTypes.func.isRequired
-    ])
-  };
-
-  render() {
-    return (
-      <DropdownContext.Consumer>
-        {context => {
-          const { cursor, handleDropdownChange } = context;
-          // NOTE: the provided regex needs to have a capture group
-          const match = cursor.value.match(this.props.pattern);
-          return match
-            ? React.createElement(this.props.component, {
-                filterText: match[1],
-                onChange: handleDropdownChange
-              })
-            : null;
-        }}
-      </DropdownContext.Consumer>
-    );
-  }
+export default function CursorDropdown(props) {
+  return (
+    <DropdownContext.Consumer>
+      {context => {
+        const { cursor, handleCursorDropdownChange } = context;
+        // NOTE: the provided regex needs to have a capture group
+        const match = cursor.value.match(props.pattern);
+        return match
+          ? React.createElement(props.component, {
+              filterText: match[1],
+              onChange: handleCursorDropdownChange
+            })
+          : null;
+      }}
+    </DropdownContext.Consumer>
+  );
 }
+
+CursorDropdown.propTypes = {
+  pattern: PropTypes.instanceOf(RegExp).isRequired,
+  component: PropTypes.oneOfType([
+    PropTypes.node.isRequired,
+    PropTypes.func.isRequired
+  ])
+};

src/components/WithCursorDropdown.jsx

@@ -9,14 +9,16 @@ function WithCursorDropdown(WrappedComponent) {
   class InputWithCursorDropdown extends Component {
     // TODO:
     // static propTypes = {
-    //   onDropdownChange: PropTypes.func,
+    //   onCursorDropdownChange: PropTypes.func,
     //   forwardedRef: PropTypes.node
     // };
 
     constructor(props) {
       super(props);
       this.wrapperRef = React.createRef();
-      this.handleDropdownChange = this.handleDropdownChange.bind(this);
+      this.handleCursorDropdownChange = this.handleCursorDropdownChange.bind(
+        this
+      );
       this.state = {
         cursor: {
           word: { value: "", start: 0, end: 0 },
@@ -32,8 +34,8 @@ function WithCursorDropdown(WrappedComponent) {
         : this.wrapperRef.current.firstChild;
     }
 
-    handleDropdownChange(value) {
-      this.props.onDropdownChange({
+    handleCursorDropdownChange(value) {
+      this.props.onCursorDropdownChange({
         value,
         cursor: this.state.cursor.word
       });
@@ -63,7 +65,7 @@ function WithCursorDropdown(WrappedComponent) {
     render() {
       const {
         children,
-        onCursorDropdownChange, // just toremove from passed remainingProps
+        onCursorDropdownChange, // just to remove from passed remainingProps
         forwardedRef,
         ...remainingProps
       } = this.props;
@@ -83,7 +85,7 @@ function WithCursorDropdown(WrappedComponent) {
             <DropdownContext.Provider
               value={{
                 cursor: this.state.cursor.word,
-                handleDropdownChange: this.handleDropdownChange
+                handleCursorDropdownChange: this.handleCursorDropdownChange
               }}
             >
               {children}