Files
react-native/ReactCommon/react/renderer/components/textinput/iostextinput/TextInputEventEmitter.cpp
T
Wojciech Lewicki 97c7c6a4b6 fix: dispatch ContentSizeChange event on Fabric on iOS (#35816)
Summary:
On Fabric, `onContentSizeChange` of `TextInput` component was never fired on `iOS`, since the logic dispatching it was implemented in `RCTBaseTextInputShadowView` on Paper: https://github.com/facebook/react-native/blob/0f8dc067ac079f7b14696cfcafa37e3ec19a0409/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m#L105. This class is not used on Fabric, therefore the event was never dispatched. On Paper, it was dispatched in `dirtyLayout` method,  so I added dispatching of this event based on the change of content size in `layoutSubviews` method, since this method seems the closest one on Fabric. I am not sure if it is the best place for it though.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[IOS] [ADDED] - dispatch `onContentSizeChange` event on Fabric.

Pull Request resolved: https://github.com/facebook/react-native/pull/35816

Test Plan:
Try to use `onContentSizeChange` callback in `TextInput` component:
```tsx
import React from 'react';
import {TextInput, SafeAreaView} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: 'red'}}>
      <TextInput
        multiline={true}
        placeholder="type here"
        onContentSizeChange={e => console.log(e)}
      />
    </SafeAreaView>
  );
};

export default App;

```

Reviewed By: christophpurrer

Differential Revision: D42499974

Pulled By: sammy-SC

fbshipit-source-id: 3e010ff096cf91cb3e7b87ed2753e9d0e7be9650
2023-01-13 09:34:03 -08:00

171 lines
4.8 KiB
C++

/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#include "TextInputEventEmitter.h"
namespace facebook::react {
static jsi::Value textInputMetricsPayload(
jsi::Runtime &runtime,
TextInputMetrics const &textInputMetrics) {
auto payload = jsi::Object(runtime);
payload.setProperty(
runtime,
"text",
jsi::String::createFromUtf8(runtime, textInputMetrics.text));
payload.setProperty(runtime, "eventCount", textInputMetrics.eventCount);
{
auto selection = jsi::Object(runtime);
selection.setProperty(
runtime, "start", textInputMetrics.selectionRange.location);
selection.setProperty(
runtime,
"end",
textInputMetrics.selectionRange.location +
textInputMetrics.selectionRange.length);
payload.setProperty(runtime, "selection", selection);
}
return payload;
};
static jsi::Value textInputMetricsContentSizePayload(
jsi::Runtime &runtime,
TextInputMetrics const &textInputMetrics) {
auto payload = jsi::Object(runtime);
{
auto contentSize = jsi::Object(runtime);
contentSize.setProperty(
runtime, "width", textInputMetrics.contentSize.width);
contentSize.setProperty(
runtime, "height", textInputMetrics.contentSize.height);
payload.setProperty(runtime, "contentSize", contentSize);
}
return payload;
};
static jsi::Value keyPressMetricsPayload(
jsi::Runtime &runtime,
KeyPressMetrics const &keyPressMetrics) {
auto payload = jsi::Object(runtime);
payload.setProperty(runtime, "eventCount", keyPressMetrics.eventCount);
std::string key;
if (keyPressMetrics.text.empty()) {
key = "Backspace";
} else {
if (keyPressMetrics.text.front() == '\n') {
key = "Enter";
} else if (keyPressMetrics.text.front() == '\t') {
key = "Tab";
} else {
key = keyPressMetrics.text.front();
}
}
payload.setProperty(
runtime, "key", jsi::String::createFromUtf8(runtime, key));
return payload;
};
void TextInputEventEmitter::onFocus(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputEvent("focus", textInputMetrics);
}
void TextInputEventEmitter::onBlur(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputEvent("blur", textInputMetrics);
}
void TextInputEventEmitter::onChange(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputEvent("change", textInputMetrics);
}
void TextInputEventEmitter::onChangeSync(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputEvent(
"changeSync", textInputMetrics, EventPriority::SynchronousBatched);
}
void TextInputEventEmitter::onContentSizeChange(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputContentSizeChangeEvent(
"contentSizeChange", textInputMetrics);
}
void TextInputEventEmitter::onSelectionChange(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputEvent("selectionChange", textInputMetrics);
}
void TextInputEventEmitter::onEndEditing(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputEvent("endEditing", textInputMetrics);
}
void TextInputEventEmitter::onSubmitEditing(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputEvent("submitEditing", textInputMetrics);
}
void TextInputEventEmitter::onKeyPress(
KeyPressMetrics const &keyPressMetrics) const {
dispatchEvent(
"keyPress",
[keyPressMetrics](jsi::Runtime &runtime) {
return keyPressMetricsPayload(runtime, keyPressMetrics);
},
EventPriority::AsynchronousBatched);
}
void TextInputEventEmitter::onKeyPressSync(
KeyPressMetrics const &keyPressMetrics) const {
dispatchEvent(
"keyPressSync",
[keyPressMetrics](jsi::Runtime &runtime) {
return keyPressMetricsPayload(runtime, keyPressMetrics);
},
EventPriority::SynchronousBatched);
}
void TextInputEventEmitter::onScroll(
TextInputMetrics const &textInputMetrics) const {
dispatchTextInputEvent("scroll", textInputMetrics);
}
void TextInputEventEmitter::dispatchTextInputEvent(
std::string const &name,
TextInputMetrics const &textInputMetrics,
EventPriority priority) const {
dispatchEvent(
name,
[textInputMetrics](jsi::Runtime &runtime) {
return textInputMetricsPayload(runtime, textInputMetrics);
},
priority);
}
void TextInputEventEmitter::dispatchTextInputContentSizeChangeEvent(
std::string const &name,
TextInputMetrics const &textInputMetrics,
EventPriority priority) const {
dispatchEvent(
name,
[textInputMetrics](jsi::Runtime &runtime) {
return textInputMetricsContentSizePayload(runtime, textInputMetrics);
},
priority);
}
} // namespace facebook::react