Skip to content

Commit

Permalink
[Native] Migrate focus/blur to call TextInputState with the host comp…
Browse files Browse the repository at this point in the history
…onent (#18068)
  • Loading branch information
elicwhite committed Feb 19, 2020
1 parent edab5c0 commit ad84625
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 5 deletions.
4 changes: 2 additions & 2 deletions packages/react-native-renderer/src/ReactFabricHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,11 @@ class ReactFabricHostComponent {
}

blur() {
TextInputState.blurTextInput(this._nativeTag);
TextInputState.blurTextInput(this);
}

focus() {
TextInputState.focusTextInput(this._nativeTag);
TextInputState.focusTextInput(this);
}

measure(callback: MeasureOnSuccessCallback) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ class ReactNativeFiberHostComponent {
}

blur() {
TextInputState.blurTextInput(this._nativeTag);
TextInputState.blurTextInput(this);
}

focus() {
TextInputState.focusTextInput(this._nativeTag);
TextInputState.focusTextInput(this);
}

measure(callback: MeasureOnSuccessCallback) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
// Mock of the Native Hooks
// TODO: Should this move into the components themselves? E.g. focusable

const TextInputState = {};
const TextInputState = {
blurTextInput: jest.fn(),
focusTextInput: jest.fn(),
};

module.exports = TextInputState;
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ let ReactFeatureFlags;
let createReactNativeComponentClass;
let UIManager;
let StrictMode;
let TextInputState;

const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
'Warning: setNativeProps is not currently supported in Fabric';
Expand All @@ -42,6 +43,8 @@ describe('ReactFabric', () => {
.UIManager;
createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
.ReactNativeViewConfigRegistry.register;
TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
.TextInputState;
});

it('should be able to create and render a native component', () => {
Expand Down Expand Up @@ -991,4 +994,38 @@ describe('ReactFabric', () => {
]);
expect(match).toBe(child._nativeTag);
});

it('blur on host component calls TextInputState', () => {
const View = createReactNativeComponentClass('RCTView', () => ({
validAttributes: {foo: true},
uiViewClassName: 'RCTView',
}));

let viewRef = React.createRef();
ReactFabric.render(<View ref={viewRef} />, 11);

expect(TextInputState.blurTextInput).not.toBeCalled();

viewRef.current.blur();

expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);
expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
});

it('focus on host component calls TextInputState', () => {
const View = createReactNativeComponentClass('RCTView', () => ({
validAttributes: {foo: true},
uiViewClassName: 'RCTView',
}));

let viewRef = React.createRef();
ReactFabric.render(<View ref={viewRef} />, 11);

expect(TextInputState.focusTextInput).not.toBeCalled();

viewRef.current.focus();

expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ let StrictMode;
let ReactNative;
let createReactNativeComponentClass;
let UIManager;
let TextInputState;

const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
"Warning: dispatchCommand was called with a ref that isn't a " +
Expand All @@ -31,6 +32,8 @@ describe('ReactNative', () => {
.UIManager;
createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
.ReactNativeViewConfigRegistry.register;
TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
.TextInputState;
});

it('should be able to create and render a native component', () => {
Expand Down Expand Up @@ -594,4 +597,38 @@ describe('ReactNative', () => {
]);
expect(match).toBe(child._nativeTag);
});

it('blur on host component calls TextInputState', () => {
const View = createReactNativeComponentClass('RCTView', () => ({
validAttributes: {foo: true},
uiViewClassName: 'RCTView',
}));

let viewRef = React.createRef();
ReactNative.render(<View ref={viewRef} />, 11);

expect(TextInputState.blurTextInput).not.toBeCalled();

viewRef.current.blur();

expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);
expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
});

it('focus on host component calls TextInputState', () => {
const View = createReactNativeComponentClass('RCTView', () => ({
validAttributes: {foo: true},
uiViewClassName: 'RCTView',
}));

let viewRef = React.createRef();
ReactNative.render(<View ref={viewRef} />, 11);

expect(TextInputState.focusTextInput).not.toBeCalled();

viewRef.current.focus();

expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
});
});

0 comments on commit ad84625

Please sign in to comment.