ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2025-01-03 03:25:24 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

architecture created for image and video select

Browse Source
This commit is contained in:
ue 2018-11-28 13:14:19 +03:00
parent ed0d58c99d
commit 6908ea07ac
13 changed files with 226 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/editorElements/tagArea/view/tagAreaView.js
View File

@ -81,7 +81,9 @@ export default class TagAreaView extends Component {
};
render() {
const { isPreviewActive, draftChips, intl } = this.props;
const {
isPreviewActive, draftChips, intl, autoFocus,
} = this.props;
const { chips } = this.state;
return (
@ -100,7 +102,7 @@ export default class TagAreaView extends Component {
placeholder={intl.formatMessage({
id: 'editor.tags',
})}
autoFocus={i !== 0 && chips.length - 1 === i}
autoFocus={autoFocus ? i !== 0 && chips.length - 1 === i : false}
multiline={false}
handleOnChange={text => this._handleOnChange(text, i)}
handleOnBlur={() => this._handleOnBlur(i)}

6
src/components/editorElements/titleArea/view/titleAreaView.js
View File

@ -35,7 +35,9 @@ export default class TitleAreaView extends Component {
};
render() {
const { value, isPreviewActive, intl } = this.props;
const {
intl, isPreviewActive, value, autoFocus,
} = this.props;
return (
<View style={globalStyles.containerHorizontal16}>
@ -48,7 +50,7 @@ export default class TitleAreaView extends Component {
id: 'editor.title',
})}
multiline
autoFocus
autoFocus={autoFocus}
numberOfLines={4}
onChangeText={text => this._handleOnChange(text)}
value={value}

16
src/components/markdownEditor/view/formats/formats.js
View File

@ -13,6 +13,14 @@ export default [
onPress: applyWrapFormat,
// style: { fontWeight: 'bold' },
},
{
key: 'I',
title: 'I',
icon: 'italic',
iconType: 'FontAwesome',
wrapper: '*',
onPress: applyWrapFormat,
},
{
key: 'H1',
title: 'H1',
@ -36,14 +44,6 @@ export default [
wrapper: '`',
onPress: applyWrapFormat,
},
{
key: 'I',
title: 'I',
icon: 'italic',
iconType: 'FontAwesome',
wrapper: '*',
onPress: applyWrapFormat,
},
{
key: 'U',
title: 'U',

4
src/components/markdownEditor/view/markdownEditorStyles.js
View File

@ -22,7 +22,7 @@ export default EStyleSheet.create({
marginLeft: 16,
flexDirection: 'row',
alignItems: 'center',
maxWidth: '$deviceWidth / 1.85',
maxWidth: '$deviceWidth / 2',
},
rightButtonsWrapper: {
marginRight: 16,
@ -44,6 +44,6 @@ export default EStyleSheet.create({
color: '$primaryDarkGray',
},
icon: {
color: '$iconColor',
color: '$editorButtonColor',
},
});

81
src/components/markdownEditor/view/markdownEditorView.js
View File

@ -3,7 +3,6 @@ import {
View, KeyboardAvoidingView, ScrollView, FlatList, Text,
} from 'react-native';
import Markdown, { getUniqueID } from 'react-native-markdown-renderer';
import ImagePicker from 'react-native-image-crop-picker';
// Components
import Formats from './formats/formats';
import { IconButton } from '../../iconButton';
@ -106,48 +105,52 @@ export default class MarkdownEditorView extends Component {
</View>
);
_renderEditorButtons = ({ getState, setState }) => (
<StickyBar>
<View style={styles.leftButtonsWrapper}>
<FlatList
data={Formats}
keyboardShouldPersistTaps="always"
renderItem={({ item, index }) => index !== 9 && this._renderMarkupButton({ item, getState, setState })
}
horizontal
/>
</View>
<View style={styles.rightButtonsWrapper}>
<IconButton
size={20}
style={styles.rightIcons}
iconStyle={styles.icon}
iconType="FontAwesome"
name="link"
onPress={() => Formats[9].onPress({ getState, setState })}
/>
<IconButton style={styles.rightIcons} size={20} iconType="Feather" name="image" />
<DropdownButton
style={styles.dropdownStyle}
options={['option1', 'option2', 'option3', 'option4']}
iconName="md-more"
iconStyle={styles.dropdownIconStyle}
isHasChildIcon
/>
</View>
</StickyBar>
);
_renderEditorButtons = ({ getState, setState }) => {
const { handleOpenImagePicker } = this.props;
return (
<StickyBar>
<View style={styles.leftButtonsWrapper}>
<FlatList
data={Formats}
keyboardShouldPersistTaps="always"
renderItem={({ item, index }) => index !== 9 && this._renderMarkupButton({ item, getState, setState })
}
horizontal
/>
</View>
<View style={styles.rightButtonsWrapper}>
<IconButton
size={20}
style={styles.rightIcons}
iconStyle={styles.icon}
iconType="FontAwesome"
name="link"
onPress={() => Formats[9].onPress({ getState, setState })}
/>
<IconButton
onPress={() => handleOpenImagePicker()}
style={styles.rightIcons}
size={20}
iconStyle={styles.icon}
iconType="FontAwesome"
name="image"
/>
<DropdownButton
style={styles.dropdownStyle}
options={['option1', 'option2', 'option3', 'option4']}
iconName="md-more"
iconStyle={styles.dropdownIconStyle}
isHasChildIcon
/>
</View>
</StickyBar>
);
};
render() {
const { isPreviewActive, intl } = this.props;
const { text, selection } = this.state;
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image);
});
return (
<KeyboardAvoidingView style={styles.container} behavior="padding">
{!isPreviewActive ? (

26
src/components/modal/view/modalStyles.js
View File

@ -15,4 +15,30 @@ export default EStyleSheet.create({
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
},
modalHeader: {
backgroundColor: '$primaryBackgroundColor',
flexDirection: 'row',
height: 40,
justifyContent: 'center',
},
headerTitle: {
color: '$iconColor',
alignSelf: 'center',
fontSize: 24,
marginLeft: 16,
flexGrow: 1,
fontWeight: '500',
},
closeButton: {
marginRight: 24,
justifyContent: 'center',
alignSelf: 'center',
},
closeIcon: {
fontSize: 24,
color: '$iconColor',
},
safeArea: {
backgroundColor: '$primaryBackgroundColor',
},
});

31
src/components/modal/view/modalView.js
View File

@ -1,6 +1,8 @@
import React, { Component } from 'react';
import { Modal as ModalBox } from 'react-native';
import {
Modal as ModalBox, View, Text, SafeAreaView,
} from 'react-native';
import { IconButton } from '../../iconButton';
import styles from './modalStyles';
/*
@ -32,7 +34,14 @@ export default class Modal extends Component {
render() {
const {
isFullScreen, isOpen, children, isRadius, isTransparent,
isFullScreen,
isOpen,
children,
isRadius,
isTransparent,
title,
animationType,
isCloseButton,
} = this.props;
return (
<ModalBox
@ -47,6 +56,22 @@ export default class Modal extends Component {
onShow={() => this._handleOnOpen(this)}
{...this.props}
>
{title && (
<SafeAreaView style={styles.safeArea}>
<View style={styles.modalHeader}>
<Text style={styles.headerTitle}>{title}</Text>
{isCloseButton && (
<IconButton
style={styles.closeButton}
iconType="FontAwesome"
iconStyle={styles.closeIcon}
name="close"
onPress={() => this._handleOnClose()}
/>
)}
</View>
</SafeAreaView>
)}
{children}
</ModalBox>
);

11
src/components/postButton/container/postButtonContainer.js
View File

@ -15,10 +15,17 @@ class PostButtonContainer extends Component {
// Component Functions
_handleSubButtonPress = (route) => {
_handleSubButtonPress = (route, action) => {
const { navigation } = this.props;
navigation.navigate(route);
navigation.navigate({
routeName: route,
params: {
action,
},
});
// navigation.navigate(route);
};
render() {

10
src/components/postButton/view/postButtonView.js
View File

@ -84,7 +84,7 @@ class PostButtonView extends Component {
});
const thirdX = this.icon3.interpolate({
inputRange: [0, 1],
outputRange: [25, 90],
outputRange: [25, 85],
});
const thirdY = this.icon3.interpolate({
inputRange: [0, 1],
@ -106,8 +106,8 @@ class PostButtonView extends Component {
left: firstX,
top: firstY,
}}
icon="camera"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
icon="video-camera"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'camera')}
/>
<SubPostButton
size={SIZE}
@ -124,8 +124,8 @@ class PostButtonView extends Component {
left: thirdX,
top: thirdY,
}}
icon="video-camera"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR)}
icon="camera"
onPress={() => handleSubButtonPress(ROUTES.SCREENS.EDITOR, 'image')}
/>
<TouchableOpacity onPress={this.toggleView} activeOpacity={1}>
<Animated.View

84
src/screens/editor/container/editorContainer.js
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import ImagePicker from 'react-native-image-crop-picker';
// Services and Actions
import { postContent } from '../../../providers/steem/dsteem';
@ -32,6 +33,8 @@ class ExampleContainer extends Component {
isDraftSaving: false,
isDraftSaved: false,
draftPost: null,
isCameraOrPickerOpen: false,
autoFocusText: false,
};
}
@ -39,8 +42,16 @@ class ExampleContainer extends Component {
// Component Functions
componentWillMount() {
const { currentAccount } = this.props;
const { currentAccount, navigation } = this.props;
const username = currentAccount && currentAccount.name ? currentAccount.name : '';
const routingAction = navigation.state && navigation.state.params;
// Routing action state ex if coming for video or image or only text
if (routingAction && routingAction.action) {
this._handleRoutingAction(routingAction.action);
} else {
this.setState({ autoFocusText: true });
}
getDraftPost(username)
.then((result) => {
@ -53,6 +64,60 @@ class ExampleContainer extends Component {
});
}
_handleRoutingAction = (routingAction) => {
this.setState({ isCameraOrPickerOpen: true });
if (routingAction === 'camera') {
this._handleOpenCamera();
} else if (routingAction === 'image') {
this._handleOpenImagePicker();
}
};
// Media select functions <- START ->
_handleOpenImagePicker = () => {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true,
// multiple: true,
})
.then((image) => {
this._handleMediaOnSelected(image);
})
.catch((e) => {
this._handleMediaOnSelectFailure(e);
});
};
_handleOpenCamera = () => {
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true,
})
.then((image) => {
this._handleMediaOnSelected(image);
})
.catch((e) => {
this._handleMediaOnSelectFailure(e);
});
};
// TODO: keyboard opening bug fixed
_handleMediaOnSelected = (media) => {
this.setState({ isCameraOrPickerOpen: false });
console.log(media);
};
_handleMediaOnSelectFailure = (error) => {
const { navigation } = this.props;
this.setState({ isCameraOrPickerOpen: false });
navigation.navigate(ROUTES.SCREENS.HOME);
};
// Media select functions <- END ->
_handleOnSaveButtonPress = (fields) => {
const { isDraftSaved } = this.state;
if (!isDraftSaved) {
@ -112,13 +177,21 @@ class ExampleContainer extends Component {
_handleFormChanged = () => {
const { isDraftSaved } = this.state;
isDraftSaved && this.setState({ isDraftSaved: false });
if (isDraftSaved) {
this.setState({ isDraftSaved: false });
}
};
render() {
const { isLoggedIn, isDarkTheme } = this.props;
const {
isPostSending, isDraftSaving, isDraftSaved, draftPost,
draftPost,
isDraftSaved,
isDraftSaving,
isOpenCamera,
isCameraOrPickerOpen,
autoFocusText,
} = this.state;
return (
@ -127,11 +200,14 @@ class ExampleContainer extends Component {
handleFormChanged={this._handleFormChanged}
handleOnSaveButtonPress={this._handleOnSaveButtonPress}
handleOnSubmit={this._handleSubmit}
handleOnImagePicker={this._handleOpenImagePicker}
isDarkTheme={isDarkTheme}
isDraftSaved={isDraftSaved}
isDraftSaving={isDraftSaving}
isLoggedIn={isLoggedIn}
isPostSending={isPostSending}
isOpenCamera={isOpenCamera}
isCameraOrPickerOpen={isCameraOrPickerOpen}
autoFocusText={autoFocusText}
/>
);
}

22
src/screens/editor/screen/editorScreen.js
View File

@ -26,7 +26,6 @@ class EditorScreen extends Component {
isPreviewActive: false,
wordsCount: null,
isFormValid: false,
isChanged: false,
fields: {
title: (props.draftPost && props.draftPost.title) || '',
body: (props.draftPost && props.draftPost.body) || '',
@ -109,8 +108,6 @@ class EditorScreen extends Component {
handleFormChanged();
this._handleIsFormValid();
this.setState({ isChanged: true });
};
_handleOnTagAdded = (tags) => {
@ -123,10 +120,16 @@ class EditorScreen extends Component {
render() {
const {
isPreviewActive, wordsCount, isFormValid, fields, isChanged,
isPreviewActive, wordsCount, isFormValid, fields,
} = this.state;
const {
isLoggedIn, isPostSending, isDraftSaving, isDraftSaved, draftPost, intl
isLoggedIn,
isPostSending,
isDraftSaving,
isDraftSaved,
intl,
handleOnImagePicker,
autoFocusText,
} = this.props;
return (
@ -150,8 +153,14 @@ class EditorScreen extends Component {
isPreviewActive={isPreviewActive}
isFormValid={isFormValid}
>
<TitleArea value={fields.title} componentID="title" intl={intl} />
<TitleArea
autoFocus={autoFocusText}
value={fields.title}
componentID="title"
intl={intl}
/>
<TagArea
autoFocus={autoFocusText}
draftChips={fields.tags}
componentID="tag-area"
handleTagChanged={this._handleOnTagAdded}
@ -162,6 +171,7 @@ class EditorScreen extends Component {
handleOnTextChange={this._setWordsCount}
componentID="body"
intl={intl}
handleOpenImagePicker={handleOnImagePicker}
/>
</PostForm>
</View>

2
src/themes/darkTheme.js
View File

@ -28,7 +28,7 @@ export default {
$disableButton: '#fff',
$shadowColor: '#b0b0b0',
$disableGray: '#fff',
$editorButtonColor: '#fff',
// Devices Sizes
$deviceHeight: Dimensions.get('window').height,
$deviceWidth: Dimensions.get('window').width,

2
src/themes/lightTheme.js
View File

@ -28,7 +28,7 @@ export default {
$disableButton: '#fff',
$shadowColor: '#b0b0b0',
$disableGray: '#fff',
$editorButtonColor: '#3c4449',
// Devices Sizes
$deviceHeight: Dimensions.get('window').height,
$deviceWidth: Dimensions.get('window').width,