mattermost-mobile/app/components/file_upload_preview/file_upload_remove.js
Amit Uttam ef0274cad8 [MM-16263] UI/UX Improvements to the mobile post draft area (#3807)
* Adding base button functionality

Moving file upload previews to be under textbox

* Ensuring textbox is scrollable when in landscape mode

* Updated image picker to use mixed camera option

* Added unit tests, fixed other tests affected by dependency update

* Updated patch for react-native-image-picker to 1.1.0

* Fixing incorrect import of DocumentPicker

* MM-20989: Ensuring keyboard doesn't dismiss while submitting post (#3758)

* Ensuring keyboard doesn't dismiss while submitting post

* Update snapshot

* Preventing the @ icon from being repeatedly tappable (#3777)

* Fix snapshot from merge

* MM-21736 Select/Take images and videos for Android

* MM-21737 Fix attachment error message position on iOS

* Remove FileUploadPreview from the iOS Thread screen

* Fix android camera permissions

* Fix post input box sizing and disable scrollview

* Fix iOS photo gallery videos

Co-authored-by: Andre Vasconcelos <andre.onogoro@gmail.com>
Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
2020-01-16 22:17:03 -03:00

69 lines
2 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 {Platform} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {makeStyleSheetFromTheme} from 'app/utils/theme';
import TouchableWithFeedback from 'app/components/touchable_with_feedback';
export default class FileUploadRemove extends PureComponent {
static propTypes = {
channelId: PropTypes.string,
clientId: PropTypes.string,
onPress: PropTypes.func.isRequired,
rootId: PropTypes.string,
theme: PropTypes.object.isRequired,
};
handleOnPress = () => {
const {channelId, clientId, onPress, rootId} = this.props;
onPress(clientId, channelId, rootId);
};
render() {
const style = getStyleSheet(this.props.theme);
return (
<TouchableWithFeedback
style={style.removeButtonWrapper}
onPress={this.handleOnPress}
type={'opacity'}
>
<Icon
name='close-circle'
color={this.props.theme.centerChannelColor}
size={20}
style={style.removeButtonIcon}
/>
</TouchableWithFeedback>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
removeButtonIcon: Platform.select({
ios: {
marginTop: 2,
},
}),
removeButtonWrapper: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
overflow: 'hidden',
elevation: 11,
top: 7,
right: 7,
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: theme.centerChannelBg,
borderWidth: 2,
borderColor: theme.centerChannelBg,
},
};
});