59045e3bb0
* WIP: slash suggestion autocomplete * WIP: patched styles a bit * WIP: Adding styles * Adding active state to autocomplete items * Fixing style for channel mention item * Fixing bugs + styling issues for Android * Updating snapshot * Fixing autocomplete to render on top of post draft - Misc style fixes * Renaming props, patching slash suggestion icon * Fixing tests and lint errors * Resolving post-merge issue with slash commands * Fixing android positioning for autocomplete * Fixing autocomplete not scrolling in edit_channel_info * WIP: Fixing things according to UX Review * UX Fixes to autocomplete * Updating snapshots * Updating snapshots, replacing slash-command icons * Fixing android scrolling and positioning issues * Fixing issues with date_suggestion not rendering * Making use of the "ShowFullName" config in at_mention_item * Removing top border on first autocomplete section * Allowing autocomplete to be smaller than its maxWidth * Fixing slash_suggestion padding * removing "componentWillReceiveProps" from date_suggestion * Changing edit_channel_info autocomplete offset * Replacing toUpperCase() with textTransform: uppercase * Fixing odd border issues + prop validation warning * Restore section header background & add paddingBottom * Patching up padding on channel mentions - Reverting previous incorrect padding adjustments * Removing inline 'completeSuggestion' function * Removing brackets from style prop
81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React, {PureComponent} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {ActivityIndicator, View} from 'react-native';
|
|
|
|
import FormattedText from 'app/components/formatted_text';
|
|
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
|
|
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
|
|
|
|
export default class AutocompleteSectionHeader extends PureComponent {
|
|
static propTypes = {
|
|
defaultMessage: PropTypes.string.isRequired,
|
|
id: PropTypes.string.isRequired,
|
|
loading: PropTypes.bool,
|
|
theme: PropTypes.object.isRequired,
|
|
isLandscape: PropTypes.bool.isRequired,
|
|
isFirstSection: PropTypes.bool,
|
|
};
|
|
|
|
static defaultProps = {
|
|
isLandscape: false,
|
|
};
|
|
|
|
render() {
|
|
const {defaultMessage, id, loading, theme, isLandscape, isFirstSection} = this.props;
|
|
const style = getStyleFromTheme(theme);
|
|
const sectionStyles = [style.section, padding(isLandscape)];
|
|
|
|
if (!isFirstSection) {
|
|
sectionStyles.push(style.borderTop);
|
|
}
|
|
|
|
return (
|
|
<View style={style.sectionWrapper}>
|
|
<View style={sectionStyles}>
|
|
<FormattedText
|
|
id={id}
|
|
defaultMessage={defaultMessage}
|
|
style={style.sectionText}
|
|
/>
|
|
{loading &&
|
|
<ActivityIndicator
|
|
color={theme.centerChannelColor}
|
|
size='small'
|
|
/>
|
|
}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
|
|
return {
|
|
borderTop: {
|
|
borderTopWidth: 1,
|
|
borderTopColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
},
|
|
section: {
|
|
justifyContent: 'center',
|
|
position: 'relative',
|
|
top: -1,
|
|
flexDirection: 'row',
|
|
},
|
|
sectionText: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
textTransform: 'uppercase',
|
|
color: changeOpacity(theme.centerChannelColor, 0.56),
|
|
paddingTop: 16,
|
|
paddingBottom: 8,
|
|
paddingHorizontal: 16,
|
|
flex: 1,
|
|
},
|
|
sectionWrapper: {
|
|
backgroundColor: theme.centerChannelBg,
|
|
},
|
|
};
|
|
});
|