[Docs] Use sentence case instead of title case
ClosedPublic
Actions

// @flow		// @flow

import Icon from '@expo/vector-icons/Feather.js';		import Icon from '@expo/vector-icons/Feather.js';
import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { StyleSheet, View } from 'react-native';		import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated';		import Animated, {
		useDerivedValue,
		withTiming,
		interpolateColor,
		useAnimatedStyle,
		} from 'react-native-reanimated';

import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';		import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js';		import { createMessageReply } from 'lib/shared/message-utils.js';
import { assertComposableMessageType } from 'lib/types/message-types.js';		import { assertComposableMessageType } from 'lib/types/message-types.js';

import {		import {
clusterEndHeight,		clusterEndHeight,
composedMessageStyle,		composedMessageStyle,
Show All 34 Lines	type Props = {
+composedMessageMaxWidth: number,		+composedMessageMaxWidth: number,
+colors: Colors,		+colors: Colors,
+contentAndHeaderOpacity: number \| Node,		+contentAndHeaderOpacity: number \| Node,
+deliveryIconOpacity: number \| Node,		+deliveryIconOpacity: number \| Node,
// withInputState		// withInputState
+inputState: ?InputState,		+inputState: ?InputState,
+navigateToSidebar: () => mixed,		+navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean,		+shouldRenderAvatars: boolean,
		+editedMessageStyle: AnimatedStyleObj,
};		};
class ComposedMessage extends React.PureComponent<Props> {		class ComposedMessage extends React.PureComponent<Props> {
render() {		render() {
assertComposableMessageType(this.props.item.messageInfo.type);		assertComposableMessageType(this.props.item.messageInfo.type);
const {		const {
item,		item,
sendFailed,		sendFailed,
focused,		focused,
swipeOptions,		swipeOptions,
shouldDisplayPinIndicator,		shouldDisplayPinIndicator,
children,		children,
composedMessageMaxWidth,		composedMessageMaxWidth,
colors,		colors,
inputState,		inputState,
navigateToSidebar,		navigateToSidebar,
contentAndHeaderOpacity,		contentAndHeaderOpacity,
deliveryIconOpacity,		deliveryIconOpacity,
shouldRenderAvatars,		shouldRenderAvatars,
		editedMessageStyle,
...viewProps		...viewProps
} = this.props;		} = this.props;
const { id, creator } = item.messageInfo;		const { id, creator } = item.messageInfo;
const { hasBeenEdited, isPinned } = item;		const { hasBeenEdited, isPinned } = item;

const { isViewer } = creator;		const { isViewer } = creator;
const alignStyle = isViewer		const alignStyle = isViewer
? styles.rightChatBubble		? styles.rightChatBubble
: styles.leftChatBubble;		: styles.leftChatBubble;

let containerMarginBottom = 5;		let containerMarginBottom = 5;
if (item.endsCluster) {		if (item.endsCluster) {
containerMarginBottom += clusterEndHeight;		containerMarginBottom += clusterEndHeight;
}		}
		const containerStyle = { marginBottom: containerMarginBottom };
const highlightStyle =
id && this.props.inputState?.editState.editedMessage?.id === id
? { backgroundColor: `#${item.threadInfo.color}40` }
: null;

const containerStyle = [
{ marginBottom: containerMarginBottom },
highlightStyle,
];

const messageBoxContainerStyle = [styles.messageBoxContainer];		const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer		const positioningStyle = isViewer
? styles.rightChatContainer		? styles.rightChatContainer
: styles.leftChatContainer;		: styles.leftChatContainer;
messageBoxContainerStyle.push(positioningStyle);		messageBoxContainerStyle.push(positioningStyle);

let deliveryIcon = null;		let deliveryIcon = null;
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines	) {
);		);
}		}

return (		return (
<View {...viewProps}>		<View {...viewProps}>
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}>		<AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" />		<MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView>		</AnimatedView>
<View style={containerStyle}>		<AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}>		<View style={styles.alignment}>
<View style={[styles.content, alignStyle]}>		<View style={[styles.content, alignStyle]}>
{deliveryIcon}		{deliveryIcon}
{messageBox}		{messageBox}
</View>		</View>
{failedSendInfo}		{failedSendInfo}
{inlineEngagement}		{inlineEngagement}
</View>		</View>
</View>		</AnimatedView>
</View>		</View>
);		);
}		}

reply = () => {		reply = () => {
const { inputState, item } = this.props;		const { inputState, item } = this.props;
invariant(inputState, 'inputState should be set in reply');		invariant(inputState, 'inputState should be set in reply');
invariant(item.messageInfo.text, 'text should be set in reply');		invariant(item.messageInfo.text, 'text should be set in reply');
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Lines	const ConnectedComposedMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {		React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
const composedMessageMaxWidth = useComposedMessageMaxWidth();		const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors();		const colors = useColors();
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const navigateToSidebar = useNavigateToSidebar(props.item);		const navigateToSidebar = useNavigateToSidebar(props.item);
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);		const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item);		const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars();		const shouldRenderAvatars = useShouldRenderAvatars();
		const progress = useDerivedValue(() => {
		const isHighlighted =
		inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
		return withTiming(isHighlighted ? 1 : 0);
		});
		const editedMessageStyle = useAnimatedStyle(() => {
		const backgroundColor = interpolateColor(
		progress.value,
		[0, 1],
		['transparent', `#${props.item.threadInfo.color}40`],
		);
		return {
		backgroundColor,
		};
		});

return (		return (
<ComposedMessage		<ComposedMessage
{...props}		{...props}
composedMessageMaxWidth={composedMessageMaxWidth}		composedMessageMaxWidth={composedMessageMaxWidth}
colors={colors}		colors={colors}
inputState={inputState}		inputState={inputState}
navigateToSidebar={navigateToSidebar}		navigateToSidebar={navigateToSidebar}
contentAndHeaderOpacity={contentAndHeaderOpacity}		contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity}		deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars}		shouldRenderAvatars={shouldRenderAvatars}
		editedMessageStyle={editedMessageStyle}
/>		/>
);		);
});		});

export default ConnectedComposedMessage;		export default ConnectedComposedMessage;

[Docs] Use sentence case instead of title caseClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 16870

docs/nix_dev_env.md

[Docs] Use sentence case instead of title case
ClosedPublic
Actions

Revision Contents
Changeset List