mattermost-mobile/app/components/post_draft/uploads/upload_item/upload_remove.js
Miguel Alatzar 57d60649f8
[MM-22959] Use Compass icons (#4847)
* Use Compass icons

* Update ChannelInfo and AdvancedSettings

* Fix search modifiers

* Fix Autocomplete item

* Remove VectorIcon component

* Unlink react-native-vector-icons

* Revert ProgressiveImage changes

* Update Mark as Unread icon

* Apply review suggestion

* Replace extension icons

* Update video control button style

* Replace (un)flag with (un)save

* Replace (un)flag with (un)save - take 2

* Use bookmark-outline icon

Co-authored-by: Miguel Alatzar <miguel@Miguels-MacBook-Pro.local>
2020-10-15 15:34:24 -07:00

71 lines
2.1 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 {View, Platform} from 'react-native';
import CompassIcon from '@components/compass_icon';
import TouchableWithFeedback from '@components/touchable_with_feedback';
import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme';
export default class UploadRemove 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 {theme} = this.props;
const style = getStyleSheet(theme);
return (
<TouchableWithFeedback
style={style.tappableContainer}
onPress={this.handleOnPress}
type={'opacity'}
>
<View style={style.removeButton}>
<CompassIcon
name='close-circle'
color={changeOpacity(theme.centerChannelColor, 0.64)}
size={24}
style={style.removeIcon}
/>
</View>
</TouchableWithFeedback>
);
}
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
tappableContainer: {
position: 'absolute',
elevation: 11,
top: -7,
right: -8,
width: 24,
height: 24,
},
removeButton: {
borderRadius: 12,
alignSelf: 'center',
marginTop: Platform.select({
ios: 5.4,
android: 4.75,
}),
backgroundColor: theme.centerChannelBg,
width: 24,
height: 25,
},
};
});