react-native-actionsheet installed

This commit is contained in:
Diego Mello 2017-11-21 09:28:14 -02:00
parent 1ce07fbf82
commit 4d03a2f8d3
3 changed files with 56 additions and 64 deletions

View File

@ -1,13 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet } from 'react-native';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { emojify } from 'react-emojione';
import Markdown from 'react-native-easy-markdown' // eslint-disable-line
import ActionSheet from 'react-native-actionsheet';
import Card from './Card';
import User from './User';
import Avatar from '../Avatar';
const title = 'Message actions';
const options = ['Cancel', 'Reply', 'Edit', 'Permalink', 'Copy', 'Quote', 'Star Message', 'Delete'];
const CANCEL_INDEX = 0;
const DESTRUCTIVE_INDEX = 7;
const styles = StyleSheet.create({
content: {
flexGrow: 1,
@ -29,6 +35,12 @@ export default class Message extends React.PureComponent {
Message_TimeFormat: PropTypes.string.isRequired
}
constructor(props) {
super(props);
this.handleActionPress = this.handleActionPress.bind(this);
this.showActions = this.showActions.bind(this);
}
attachments() {
return this.props.item.attachments.length ? (
<Card
@ -37,6 +49,14 @@ export default class Message extends React.PureComponent {
) : null;
}
showActions() {
this.ActionSheet.show();
}
handleActionPress = (i) => {
console.log(i);
}
render() {
const { item } = this.props;
@ -49,26 +69,36 @@ export default class Message extends React.PureComponent {
const username = item.alias || item.u.username;
return (
<View style={[styles.message, extraStyle]}>
<Avatar
style={{ marginRight: 10 }}
text={item.avatar ? '' : username}
size={40}
baseUrl={this.props.baseUrl}
avatar={item.avatar}
/>
<View style={[styles.content]}>
<User
onPress={this._onPress}
item={item}
Message_TimeFormat={this.props.Message_TimeFormat}
<TouchableOpacity onLongPress={() => this.showActions()}>
<View style={[styles.message, extraStyle]}>
<Avatar
style={{ marginRight: 10 }}
text={item.avatar ? '' : username}
size={40}
baseUrl={this.props.baseUrl}
avatar={item.avatar}
/>
<View style={[styles.content]}>
<User
onPress={this._onPress}
item={item}
Message_TimeFormat={this.props.Message_TimeFormat}
/>
{this.attachments()}
<Markdown>
{msg}
</Markdown>
</View>
<ActionSheet
ref={o => this.ActionSheet = o}
title={title}
options={options}
cancelButtonIndex={CANCEL_INDEX}
destructiveButtonIndex={DESTRUCTIVE_INDEX}
onPress={this.handleActionPress}
/>
{this.attachments()}
<Markdown>
{msg}
</Markdown>
</View>
</View>
</TouchableOpacity>
);
}
}

51
package-lock.json generated
View File

@ -1058,12 +1058,6 @@
"integrity": "sha1-NOmzALFHnd2Y7HfqC76TQt/jloQ=",
"dev": true
},
"babel-helper-is-react-class": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/babel-helper-is-react-class/-/babel-helper-is-react-class-1.0.0.tgz",
"integrity": "sha1-7282eLBcdtve7a3q16+YwnJNhDE=",
"dev": true
},
"babel-helper-is-void-0": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/babel-helper-is-void-0/-/babel-helper-is-void-0-0.2.0.tgz",
@ -1807,15 +1801,6 @@
"babel-runtime": "6.26.0"
}
},
"babel-plugin-transform-react-inline-elements": {
"version": "6.22.0",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-inline-elements/-/babel-plugin-transform-react-inline-elements-6.22.0.tgz",
"integrity": "sha1-ZochGjK0mlLyLFc6K1UEol7xfFM=",
"dev": true,
"requires": {
"babel-runtime": "6.26.0"
}
},
"babel-plugin-transform-react-jsx": {
"version": "6.24.1",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz",
@ -1845,15 +1830,6 @@
"babel-runtime": "6.26.0"
}
},
"babel-plugin-transform-react-pure-class-to-function": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-pure-class-to-function/-/babel-plugin-transform-react-pure-class-to-function-1.0.1.tgz",
"integrity": "sha1-MqZJyX1lMlC0Gc/RSJMxsCkNnuQ=",
"dev": true,
"requires": {
"babel-helper-is-react-class": "1.0.0"
}
},
"babel-plugin-transform-react-remove-prop-types": {
"version": "0.4.10",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.10.tgz",
@ -2178,26 +2154,6 @@
"react-transform-hmr": "1.0.4"
}
},
"babel-preset-react-optimize": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/babel-preset-react-optimize/-/babel-preset-react-optimize-1.0.1.tgz",
"integrity": "sha1-wjUJ+6fLx2195wUOfSa80ivDBOg=",
"dev": true,
"requires": {
"babel-plugin-transform-react-constant-elements": "6.23.0",
"babel-plugin-transform-react-inline-elements": "6.22.0",
"babel-plugin-transform-react-pure-class-to-function": "1.0.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.12"
},
"dependencies": {
"babel-plugin-transform-react-remove-prop-types": {
"version": "0.2.12",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.2.12.tgz",
"integrity": "sha1-NAZpbfC4tFYIn51ybSfn4SPS+Sk=",
"dev": true
}
}
},
"babel-preset-stage-0": {
"version": "6.24.1",
"resolved": "https://registry.npmjs.org/babel-preset-stage-0/-/babel-preset-stage-0-6.24.1.tgz",
@ -12047,6 +12003,11 @@
"prop-types": "15.6.0"
}
},
"react-native-actionsheet": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-native-actionsheet/-/react-native-actionsheet-2.3.0.tgz",
"integrity": "sha1-qVUqNW3Fk5gpBiNTgE1eVgno+Wk="
},
"react-native-animatable": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.2.4.tgz",
@ -14881,4 +14842,4 @@
}
}
}
}
}

View File

@ -22,6 +22,7 @@
"react-emojione": "^5.0.0",
"react-native": "0.50.3",
"react-native-action-button": "^2.8.1",
"react-native-actionsheet": "^2.3.0",
"react-native-animatable": "^1.2.4",
"react-native-card-view": "0.0.3",
"react-native-easy-markdown": "git+https://github.com/lappalj4/react-native-easy-markdown.git",