1 | import PropTypes from 'prop-types';
|
2 | import React, { useRef } from 'react';
|
3 | import { Platform, StyleSheet, TextInput, } from 'react-native';
|
4 | import { MIN_COMPOSER_HEIGHT, DEFAULT_PLACEHOLDER } from './Constant';
|
5 | import Color from './Color';
|
6 | import { StylePropType } from './utils';
|
7 | import { useCallbackOne } from 'use-memo-one';
|
8 | const styles = StyleSheet.create({
|
9 | textInput: {
|
10 | flex: 1,
|
11 | marginLeft: 10,
|
12 | fontSize: 16,
|
13 | lineHeight: 16,
|
14 | ...Platform.select({
|
15 | web: {
|
16 | paddingTop: 6,
|
17 | paddingLeft: 4,
|
18 | },
|
19 | }),
|
20 | marginTop: Platform.select({
|
21 | ios: 6,
|
22 | android: 0,
|
23 | web: 6,
|
24 | }),
|
25 | marginBottom: Platform.select({
|
26 | ios: 5,
|
27 | android: 3,
|
28 | web: 4,
|
29 | }),
|
30 | },
|
31 | });
|
32 | export function Composer({ composerHeight = MIN_COMPOSER_HEIGHT, disableComposer = false, keyboardAppearance = 'default', multiline = true, onInputSizeChanged = () => { }, onTextChanged = () => { }, placeholder = DEFAULT_PLACEHOLDER, placeholderTextColor = Color.defaultColor, text = '', textInputAutoFocus = false, textInputProps = {}, textInputStyle, }) {
|
33 | const dimensionsRef = useRef();
|
34 | const determineInputSizeChange = useCallbackOne((dimensions) => {
|
35 |
|
36 | if (!dimensions) {
|
37 | return;
|
38 | }
|
39 | if (!dimensionsRef ||
|
40 | !dimensionsRef.current ||
|
41 | (dimensionsRef.current &&
|
42 | (dimensionsRef.current.width !== dimensions.width ||
|
43 | dimensionsRef.current.height !== dimensions.height))) {
|
44 | dimensionsRef.current = dimensions;
|
45 | onInputSizeChanged(dimensions);
|
46 | }
|
47 | }, [onInputSizeChanged]);
|
48 | const handleContentSizeChange = ({ nativeEvent: { contentSize }, }) => determineInputSizeChange(contentSize);
|
49 | return (<TextInput testID={placeholder} accessible accessibilityLabel={placeholder} placeholder={placeholder} placeholderTextColor={placeholderTextColor} multiline={multiline} editable={!disableComposer} onContentSizeChange={handleContentSizeChange} onChangeText={onTextChanged} style={[
|
50 | styles.textInput,
|
51 | textInputStyle,
|
52 | {
|
53 | height: composerHeight,
|
54 | ...Platform.select({
|
55 | web: {
|
56 | outlineWidth: 0,
|
57 | outlineColor: 'transparent',
|
58 | outlineOffset: 0,
|
59 | },
|
60 | }),
|
61 | },
|
62 | ]} autoFocus={textInputAutoFocus} value={text} enablesReturnKeyAutomatically underlineColorAndroid='transparent' keyboardAppearance={keyboardAppearance} {...textInputProps}/>);
|
63 | }
|
64 | Composer.propTypes = {
|
65 | composerHeight: PropTypes.number,
|
66 | text: PropTypes.string,
|
67 | placeholder: PropTypes.string,
|
68 | placeholderTextColor: PropTypes.string,
|
69 | textInputProps: PropTypes.object,
|
70 | onTextChanged: PropTypes.func,
|
71 | onInputSizeChanged: PropTypes.func,
|
72 | multiline: PropTypes.bool,
|
73 | disableComposer: PropTypes.bool,
|
74 | textInputStyle: StylePropType,
|
75 | textInputAutoFocus: PropTypes.bool,
|
76 | keyboardAppearance: PropTypes.string,
|
77 | };
|
78 | //# sourceMappingURL=Composer.js.map |
\ | No newline at end of file |