b5038ba55e
* added chevron to menu item component * starting with the skeleton * starting with the skeleton * starting with the skeleton * starting with the skeleton * remove extra line * tested on tablets * some corrections * corrections as per review * starting with notification skeleton * attached notification settings to navigation * added auto responder * update translation * update snapshot * updated snapshot * correction after review * removed unnecessary screen * refactored * updated the testIDs * Update Package.resolved * refactor * removed Mattermost as default server name * fix ts * refactored settings constant * display settings skeleton - pending: query for allowed themes * added 'allowedThemes' query * added section item * mention screen skeleton in place * added section and sectionItem component * added reply section to the mention screen * update i18n * rename screens properly * update i18n * Refactored to MentionSettings component * Refactored to ReplySettings component * style clean up * textTransform uppercase * rename Section/SectionItem to Block/BlockItem * adding text to those two components * correction following review
94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import {MessageDescriptor} from '@formatjs/intl/src/types';
|
|
import React from 'react';
|
|
import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
|
|
|
|
import FormattedText from '@components/formatted_text';
|
|
import {useTheme} from '@context/theme';
|
|
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
|
|
return {
|
|
container: {
|
|
marginBottom: 30,
|
|
},
|
|
header: {
|
|
marginHorizontal: 15,
|
|
marginBottom: 10,
|
|
fontSize: 13,
|
|
color: changeOpacity(theme.centerChannelColor, 0.5),
|
|
},
|
|
items: {
|
|
backgroundColor: theme.centerChannelBg,
|
|
borderTopWidth: 1,
|
|
borderBottomWidth: 1,
|
|
borderTopColor: changeOpacity(theme.centerChannelColor, 0.1),
|
|
borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1),
|
|
},
|
|
footer: {
|
|
marginTop: 10,
|
|
marginHorizontal: 15,
|
|
fontSize: 12,
|
|
color: changeOpacity(theme.centerChannelColor, 0.5),
|
|
},
|
|
};
|
|
});
|
|
|
|
type SectionText = {
|
|
id: string;
|
|
defaultMessage: string;
|
|
values?: MessageDescriptor;
|
|
}
|
|
|
|
type SectionProps = {
|
|
children: React.ReactNode;
|
|
disableFooter?: boolean;
|
|
disableHeader?: boolean;
|
|
footerText?: SectionText;
|
|
headerText: SectionText;
|
|
containerStyles?: StyleProp<ViewStyle>;
|
|
headerStyles?: StyleProp<TextStyle>;
|
|
footerStyles?: StyleProp<TextStyle>;
|
|
}
|
|
|
|
const Block = ({
|
|
children,
|
|
containerStyles,
|
|
disableFooter,
|
|
disableHeader,
|
|
footerText,
|
|
headerStyles,
|
|
headerText,
|
|
footerStyles,
|
|
}: SectionProps) => {
|
|
const theme = useTheme();
|
|
const styles = getStyleSheet(theme);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{(headerText && !disableHeader) &&
|
|
<FormattedText
|
|
defaultMessage={headerText.defaultMessage}
|
|
id={headerText.id}
|
|
values={headerText.values}
|
|
style={[styles.header, headerStyles]}
|
|
/>
|
|
}
|
|
<View style={[styles.items, containerStyles]}>
|
|
{children}
|
|
</View>
|
|
{(footerText && !disableFooter) &&
|
|
<FormattedText
|
|
defaultMessage={footerText.defaultMessage}
|
|
id={footerText.id}
|
|
style={[styles.footer, footerStyles]}
|
|
values={footerText.values}
|
|
/>
|
|
}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Block;
|