diff --git a/src/components/buttons/views/iconButtonStyles.js b/src/components/buttons/views/iconButtonStyles.js index 07f5b71b8..18bd17a51 100644 --- a/src/components/buttons/views/iconButtonStyles.js +++ b/src/components/buttons/views/iconButtonStyles.js @@ -1,14 +1,14 @@ -import EStyleSheet from "react-native-extended-stylesheet"; +import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ circleButton: { - alignItems: "center", - backgroundColor: "$white", + alignItems: 'center', + backgroundColor: '$white', height: 60, width: 60, borderRadius: 60 / 2, - justifyContent: "center", - borderColor: "$primaryBlue", + justifyContent: 'center', + borderColor: '$primaryBlue', borderWidth: 1, }, }); diff --git a/src/components/buttons/views/textButtonView.js b/src/components/buttons/views/textButtonView.js index 3d942f0f9..8f4a4f561 100644 --- a/src/components/buttons/views/textButtonView.js +++ b/src/components/buttons/views/textButtonView.js @@ -3,14 +3,13 @@ import { TouchableWithoutFeedback, Text, View } from 'react-native'; import styles from './textButtonStyles'; -const TextButtonView = ({ text, onPress, style }) => ( +const TextButtonView = ({ + text, onPress, style, textStyle, +}) => ( - onPress && onPress()} - > - - {text} + onPress && onPress()}> + + {text} diff --git a/src/components/editorHeader/container/editorHeaderContainer.js b/src/components/editorHeader/container/editorHeaderContainer.js new file mode 100644 index 000000000..ccd046a4e --- /dev/null +++ b/src/components/editorHeader/container/editorHeaderContainer.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react'; +import { withNavigation } from 'react-navigation'; + +// Constants +import { default as ROUTES } from '../../../constants/routeNames'; + +// Components +import { EditorHeaderView } from '..'; + +class EditorHeaderContainer extends Component { + /* Props + * ------------------------------------------------ + * @prop { type } name - Description.... + */ + + constructor(props) { + super(props); + this.state = {}; + } + + // Component Life Cycles + + // Component Functions + _handleOnPressBackButton = () => { + const { navigation } = this.props; + + navigation.navigate(ROUTES.SCREENS.HOME); + }; + + render() { + return ( + + ); + } +} + +export default withNavigation(EditorHeaderContainer); diff --git a/src/components/editorHeader/index.js b/src/components/editorHeader/index.js new file mode 100644 index 000000000..8c1c2c68c --- /dev/null +++ b/src/components/editorHeader/index.js @@ -0,0 +1,5 @@ +import EditorHeaderView from './view/editorHeaderView'; +import EditorHeader from './container/editorHeaderContainer'; + +export { EditorHeaderView, EditorHeader }; +export default EditorHeader; diff --git a/src/components/editorHeader/view/editorHeaderStyles.js b/src/components/editorHeader/view/editorHeaderStyles.js new file mode 100644 index 000000000..3908f9768 --- /dev/null +++ b/src/components/editorHeader/view/editorHeaderStyles.js @@ -0,0 +1,34 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + container: { + // flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + padding: 16, + width: '$deviceWidth', + backgroundColor: '$white', + }, + backIcon: { + fontSize: 24, + color: '$iconColor', + }, + backIconButton: { + flexGrow: 1, + }, + rightIcon: { + color: '$iconColor', + }, + iconButton: { + marginRight: 24, + justifyContent: 'center', + alignSelf: 'center', + }, + textButton: { + color: '$iconColor', + fontSize: 16, + }, + textButtonWrapper: { + justifyContent: 'center', + }, +}); diff --git a/src/components/editorHeader/view/editorHeaderView.js b/src/components/editorHeader/view/editorHeaderView.js new file mode 100644 index 000000000..88e667d40 --- /dev/null +++ b/src/components/editorHeader/view/editorHeaderView.js @@ -0,0 +1,56 @@ +import React, { Component } from 'react'; +import { View } from 'react-native'; +import { TextButton } from '../..'; +import { IconButton } from '../../iconButton'; +// Constants + +// Components + +// Styles +import styles from './editorHeaderStyles'; + +class EditorHeaderView extends Component { + /* Props + * ------------------------------------------------ + * @prop { type } name - Description.... + */ + + constructor(props) { + super(props); + this.state = {}; + } + + // Component Life Cycles + + // Component Functions + + render() { + const { handleOnPressBackButton } = this.props; + + return ( + + handleOnPressBackButton()} + /> + + + + + ); + } +} + +export default EditorHeaderView; diff --git a/src/components/iconButton/view/iconButtonStyles.js b/src/components/iconButton/view/iconButtonStyles.js index 72a06aff2..7bd2e1e4d 100644 --- a/src/components/iconButton/view/iconButtonStyles.js +++ b/src/components/iconButton/view/iconButtonStyles.js @@ -1,13 +1,12 @@ -import EStyleSheet from "react-native-extended-stylesheet"; +import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ iconButton: { width: 30, height: 30, borderRadius: 30 / 2, - justifyContent: "center", - }, - icon: { - textAlign: "center", + justifyContent: 'center', + alignItems: 'center', }, + icon: {}, }); diff --git a/src/components/iconButton/view/iconButtonView.js b/src/components/iconButton/view/iconButtonView.js index b47502428..b08484b51 100644 --- a/src/components/iconButton/view/iconButtonView.js +++ b/src/components/iconButton/view/iconButtonView.js @@ -1,32 +1,35 @@ -import React from "react"; -import { View, TouchableHighlight } from "react-native"; -import Ionicons from "react-native-vector-icons/Ionicons"; +import React, { Fragment } from 'react'; +import { TouchableHighlight } from 'react-native'; +import Ionicons from 'react-native-vector-icons/Ionicons'; -import styles from "./iconButtonStyles"; +import styles from './iconButtonStyles'; /* Props * ------------------------------------------------ * @prop { type } name - Description.... */ -const IconButton = ({ name, color, size, onPress, backgroundColor, style }) => ( - +const IconButton = ({ + name, color, size, onPress, backgroundColor, style, iconStyle, +}) => ( + onPress && onPress()} - underlayColor={backgroundColor} + underlayColor={backgroundColor || 'white'} > - + ); export default IconButton; diff --git a/src/components/numericKeyboard/views/numericKeyboardView.js b/src/components/numericKeyboard/views/numericKeyboardView.js index b7590e263..3fcc9aaf8 100644 --- a/src/components/numericKeyboard/views/numericKeyboardView.js +++ b/src/components/numericKeyboard/views/numericKeyboardView.js @@ -1,15 +1,13 @@ -import React, { Fragment, Component } from "react"; -import { View } from "react-native"; +import React, { Component } from 'react'; +import { View } from 'react-native'; -import { CircularButton, IconButton } from "../../"; +import { CircularButton, IconButton } from '../..'; -import styles from "./numericKeyboardStyles"; +import styles from './numericKeyboardStyles'; class NumericKeyboard extends Component { /* Props - * * @prop { func } onPress - Function will trigger when any button clicked. - * */ constructor(props) { super(props); @@ -20,7 +18,7 @@ class NumericKeyboard extends Component { // Component Functions - _handleOnPress = value => { + _handleOnPress = (value) => { alert(value); }; @@ -98,7 +96,7 @@ class NumericKeyboard extends Component { /> onPress && onPress("clear")} + handleOnPress={() => onPress && onPress('clear')} isCircle style={styles.iconButton} name="close" diff --git a/src/components/postButton/container/postButtonContainer.js b/src/components/postButton/container/postButtonContainer.js new file mode 100644 index 000000000..b3ac01b76 --- /dev/null +++ b/src/components/postButton/container/postButtonContainer.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; +import { withNavigation } from 'react-navigation'; + +// Components +import { PostButtonView } from '..'; + +class PostButtonContainer extends Component { + constructor(props) { + super(props); + this.state = {}; + } + + // Component Life Cycle Functions + + // Component Functions + + _handleSubButtonPress = (route) => { + const { navigation } = this.props; + + navigation.navigate(route); + }; + + render() { + return ; + } +} + +export default withNavigation(PostButtonContainer); diff --git a/src/components/postButton/index.js b/src/components/postButton/index.js index 2f4071e6b..f8f3f91ab 100644 --- a/src/components/postButton/index.js +++ b/src/components/postButton/index.js @@ -1,4 +1,5 @@ -import PostButton from './view/postButtonView'; +import PostButtonView from './view/postButtonView'; +import PostButton from './container/postButtonContainer'; -export { PostButton }; +export { PostButtonView, PostButton }; export default PostButton; diff --git a/src/components/postButton/view/postButtonView.js b/src/components/postButton/view/postButtonView.js index 2089e2bd6..937d1deec 100644 --- a/src/components/postButton/view/postButtonView.js +++ b/src/components/postButton/view/postButtonView.js @@ -81,15 +81,7 @@ class PostButtonView extends Component { outputRange: ['0deg', '45deg'], }); - // const bluring = this.mode.interpolate({ - // inputRange: [0, 1], - // outputRange: [10, 5], - // }); - - // const blurin2 = this.mode.interpolate({ - // inputRange: [0, 1], - // outputRange: [0, -20], - // }); + const { handleSubButtonPress } = this.props; return ( @@ -108,6 +100,7 @@ class PostButtonView extends Component { top: secondY, }} icon="pencil" + onPress={() => handleSubButtonPress('EditorScreen')} /> { + _navigateToRoute = (route = null) => { const { navigation } = this.props; navigation.navigate(route); }; diff --git a/src/components/sideMenu/view/sideMenuView.js b/src/components/sideMenu/view/sideMenuView.js index 58eeb7ab7..8b42e167c 100644 --- a/src/components/sideMenu/view/sideMenuView.js +++ b/src/components/sideMenu/view/sideMenuView.js @@ -28,6 +28,7 @@ class SideMenuView extends Component { render() { const { isLoggedIn, userAvatar, navigateToRoute } = this.props; + return ( diff --git a/src/config/routes.js b/src/config/routes.js index a92b1e883..567744e82 100644 --- a/src/config/routes.js +++ b/src/config/routes.js @@ -3,7 +3,9 @@ import { BaseNavigator } from '../navigation'; import { default as ROUTES } from '../constants/routeNames'; // Screens -import { Splash, Login, PinCode } from '../screens'; +import { + Editor, Login, PinCode, Splash, +} from '../screens'; // Components import { SideMenu } from '../components'; @@ -23,8 +25,9 @@ const mainNavigation = DrawerNavigator( ); export default SwitchNavigator({ - [ROUTES.SCREENS.SPLASH]: { screen: Splash }, + [ROUTES.DRAWER.MAIN]: mainNavigation, + [ROUTES.SCREENS.EDITOR]: { screen: Editor }, [ROUTES.SCREENS.LOGIN]: { screen: Login }, [ROUTES.SCREENS.PINCODE]: { screen: PinCode }, - [ROUTES.DRAWER.MAIN]: mainNavigation, + [ROUTES.SCREENS.SPLASH]: { screen: Splash }, }); diff --git a/src/constants/routeNames.js b/src/constants/routeNames.js index 08ba2c339..fda0f0dad 100644 --- a/src/constants/routeNames.js +++ b/src/constants/routeNames.js @@ -3,10 +3,11 @@ const DRAWER_SUFFIX = 'Drawer'; export default { SCREENS: { - SPLASH: `Splash${SCREEN_SUFFIX}`, + EDITOR: `Editor${SCREEN_SUFFIX}`, + HOME: `Home${SCREEN_SUFFIX}`, LOGIN: `Login${SCREEN_SUFFIX}`, PINCODE: `PinCode${SCREEN_SUFFIX}`, - HOME: `Home${SCREEN_SUFFIX}`, + SPLASH: `Splash${SCREEN_SUFFIX}`, }, DRAWER: { MAIN: `Main${DRAWER_SUFFIX}`, diff --git a/src/constants/sideMenuItems.js b/src/constants/sideMenuItems.js index 565514980..2a3ba79a6 100644 --- a/src/constants/sideMenuItems.js +++ b/src/constants/sideMenuItems.js @@ -39,7 +39,7 @@ const authMenuItems = [ const noAuthMenuItems = [ { name: 'Login', - route: 'Login', + route: 'LoginScreen', icon: 'user-o', }, ]; diff --git a/src/screens/editor/editor.js b/src/screens/_editor/editor.js similarity index 99% rename from src/screens/editor/editor.js rename to src/screens/_editor/editor.js index 816ad25b9..290727c1f 100644 --- a/src/screens/editor/editor.js +++ b/src/screens/_editor/editor.js @@ -106,7 +106,7 @@ class EditorPage extends React.Component { render() { return ( - + props name here description here Value Type Here + * + */ + +class ExampleContainer extends Component { + constructor(props) { + super(props); + this.state = {}; + } + + // Component Life Cycle Functions + + // Component Functions + + render() { + return ; + } +} + +export default ExampleContainer; diff --git a/src/screens/editor/index.js b/src/screens/editor/index.js new file mode 100644 index 000000000..7380ead23 --- /dev/null +++ b/src/screens/editor/index.js @@ -0,0 +1,4 @@ +import Editor from './container/editorContainer'; + +export { Editor }; +export default Editor; diff --git a/src/screens/editor/screen/editorScreen.js b/src/screens/editor/screen/editorScreen.js new file mode 100644 index 000000000..a5dc6fde7 --- /dev/null +++ b/src/screens/editor/screen/editorScreen.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react'; +import { View } from 'react-native'; +import { EditorHeader } from '../../../components/editorHeader'; +// Constants + +// Components + +export class EditorScreen extends Component { + /* Props + * ------------------------------------------------ + * @prop { type } name - Description.... + */ + + constructor(props) { + super(props); + this.state = {}; + } + + // Component Life Cycles + + // Component Functions + + render() { + // eslint-disable-next-line + return ( + + + + ); + } +} diff --git a/src/screens/index.js b/src/screens/index.js index 6c0c9e1ce..ecd20b527 100755 --- a/src/screens/index.js +++ b/src/screens/index.js @@ -1,9 +1,10 @@ import PinCode from './pinCode'; import Splash from './splash'; +import { Editor } from './editor'; import { Home } from './home'; import { Login } from './login'; -import { Profile } from './profile'; import { Notification } from './notification'; +import { Profile } from './profile'; // import Author from './authorProfile'; // import SideMenu from './sideMenuScreen'; @@ -18,12 +19,13 @@ import { Notification } from './notification'; // import { Notification } from './notification'; export { + Editor, Home, Login, - PinCode, - Splash, - Profile, Notification, + PinCode, + Profile, + Splash, // Author, // SideMenu, // Hot,