74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
// Metro module 9925 (f9926).
|
|
import { useState, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import { Fonts } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { isAndroid } from "../../../utils/PlatformUtils";
|
|
import useMessageMaxLength from "../../messages/useMessageMaxLength";
|
|
import FormInput from "../../../design/void/Form/native/FormInput";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
backgroundColor: Module712.colors.SHARE_CHAT_INPUT_BACKGROUND,
|
|
borderRadius: Module712.modules.mobile.CHAT_INPUT_BORDER_RADIUS,
|
|
borderWidth: Module712.modules.mobile.CHAT_INPUT_PILL_BORDER_WIDTH,
|
|
borderColor: Module712.colors.MOBILE_CHATINPUT_BORDER_DEFAULT,
|
|
paddingHorizontal: Module712.space.PX_12
|
|
},
|
|
chatInput: {
|
|
flex: 1,
|
|
paddingVertical: 0,
|
|
paddingHorizontal: Module712.space.PX_4,
|
|
maxHeight: 80
|
|
},
|
|
chatText: {
|
|
fontSize: 16,
|
|
lineHeight: 20,
|
|
fontFamily: Fonts.PRIMARY_NORMAL,
|
|
color: Module712.colors.TEXT_STRONG,
|
|
paddingTop: Module712.space.PX_8 + (isAndroid() ? 0 : 2),
|
|
paddingBottom: Module712.space.PX_8
|
|
},
|
|
inputPlaceholder: {
|
|
color: Module712.colors.TEXT_MUTED
|
|
},
|
|
emojiButton: {
|
|
paddingTop: Module712.space.PX_8,
|
|
paddingBottom: Module712.space.PX_8,
|
|
alignSelf: "flex-end"
|
|
},
|
|
focused: {
|
|
borderColor: Module712.colors.MOBILE_CHATINPUT_BORDER_ACTIVE
|
|
}
|
|
});
|
|
export default function ShareChatInput(props) {
|
|
const { text, inputRef, onChange, onSelectionChange, onFocus, onBlur, onPressEmoji, onSend, disabled = false } = props;
|
|
const styles = useStyles();
|
|
const messageMaxLength = useMessageMaxLength();
|
|
let [state, setState] = useState(false);
|
|
const callback = useCallback(() => {
|
|
setState(true);
|
|
onFocus();
|
|
}, [onFocus]);
|
|
const callback2 = useCallback(() => {
|
|
setState(false);
|
|
onBlur();
|
|
}, [onBlur]);
|
|
const style = [styles.container, ,];
|
|
if (state) {
|
|
state = styles.focused;
|
|
}
|
|
style[1] = state;
|
|
return <View style={style}>
|
|
<FormInput ref={inputRef} maxLength={messageMaxLength} placeholder={intl.string(t.ZroO3G)} placeholderTextColor={styles.inputPlaceholder.color} accessibilityLabel={intl.string(t["/+MXmw"])} onSubmitEditing={onSend} onSelectionChange={onSelectionChange} style={styles.chatInput} value={text} onChange={onChange} onFocus={callback} onBlur={callback2} multiline showBorder={false} showTopContainer={false} textAlignVertical="center" inputTextStyle={styles.chatText} editable={!disabled} />
|
|
<PressableOpacity accessibilityLabel={intl.string(t.iZ7Mz9)} accessibilityRole="button" onPress={onPressEmoji} style={styles.emojiButton} disabled={disabled}>
|
|
<ReactionIcon size="md" />
|
|
</PressableOpacity>
|
|
</View>;
|
|
};
|