Merge pull request #131 from b97822302002/master

Expose the onFocus event to custom components

Author: giorgosart

src/lib/EasyCustom.jsx

@@ -8,6 +8,7 @@ export default class EasyCustom extends Component {
     };
     this.setValue = this.setValue.bind(this);
     this.onBlur = this.onBlur.bind(this);
+    this.onFocus = this.onFocus.bind(this);
   }
 
   setValue(value) {
@@ -20,6 +21,10 @@ export default class EasyCustom extends Component {
     this.props.onBlur();
   }
 
+  onFocus() {
+    this.props.onFocus();
+  }
+
   render() {
     const { value } = this.state;
     const { children, cssClassPrefix } = this.props;
@@ -28,6 +33,7 @@ export default class EasyCustom extends Component {
       {
         setParentValue: this.setValue,
         onBlur : this.onBlur,
+        onFocus : this.onFocus,
         value
       }
     );

src/lib/EasyCustom.test.js

@@ -12,6 +12,7 @@ describe('EasyCustom', () => {
   const setValueFunction = jest.fn();
   const blurFn = jest.fn();
   const saveFn = jest.fn();
+  const focusFn = jest.fn();
 
   it('should initially set the value passed in as the state value', () => {
     wrapper = shallow(
@@ -64,6 +65,18 @@ describe('EasyCustom', () => {
     expect(blurFn).toBeCalled();
   });
 
+  it('should trigger the onFocus fn when custom component gains focus', () => {
+    wrapper = mount(
+        <EasyEdit
+            type="text"
+            onFocus={focusFn}
+            editComponent={<CustomComponent />}
+        />);
+    wrapper.simulate('click');
+    wrapper.find('input').simulate('focus');
+    expect(focusFn).toBeCalled();
+  });
+
 });
 
 class CustomComponent extends React.Component{

src/lib/EasyEdit.jsx

@@ -151,6 +151,7 @@ export default class EasyEdit extends React.Component {
         <EasyCustom
           setValue={this.onChange}
           onBlur={this._onBlur}
+          onFocus={this._onFocus()}
           value={this.state.tempValue}
           cssClassPrefix={cssClassPrefix}
         >