Implement basic UI of NewTopicPage

Author: imWildCat

package.json

@@ -19,7 +19,7 @@
     "react-native-gifted-listview": "BelinChung/react-native-gifted-listview#a64c4a5d66",
     "react-native-htmlview": "^0.5.0",
     "react-native-root-toast": "^1.0.3",
-    "react-native-router-flux": "^3.31.0",
+    "react-native-router-flux": "^3.35.0",
     "react-native-vector-icons": "^2.0.3",
     "react-native-viewpager": "^0.2.11",
     "react-redux": "^4.4.5",

src/components/assets/new_topic_icon.png

@@ -0,0 +1,36 @@
+import React, {Component, PropTypes} from 'react';
+import {View, Text, Image} from 'react-native';
+
+import Style from '../../utilities/style';
+import NewTopicIconImg from '../assets/new_topic_icon.png';
+
+class NewTopicButton extends Component {
+  static defaultProps = {};
+  static propTypes = {
+    onPress: PropTypes.func.isRequired
+  };
+  state = {};
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <View>
+        <Image style={styles.image} source={NewTopicIconImg} />
+      </View>
+    );
+  }
+
+}
+
+const styles = Style.create({
+  image: {
+    width: 25,
+    height: 25,
+  }
+});
+
+
+export default NewTopicButton;

src/components/assets/[email protected]

@@ -0,0 +1,165 @@
+import React, {Component, PropTypes} from 'react';
+import {View, Text, TextInput, TouchableOpacity} from 'react-native';
+import {Actions} from 'react-native-router-flux';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import Style from '../../../utilities/style';
+import NodeListManager from '../../../utilities/node_list_manager';
+import PageContainer from '../../common/PageContainer';
+
+class NewTopicPage extends Component {
+  static propTypes = {
+    nodeSlug: PropTypes.string,
+  };
+  state = {
+    nodeName: '问与答（默认）',
+    nodeSlug: 'qna',
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.setUpNavigationBar();
+    this.setUpNode();
+  }
+
+  setUpNode = () => {
+    const { nodeSlug } = this.props;
+    if (nodeSlug) {
+      NodeListManager.getNodes().then(nodes => {
+        const filteredNodes = nodes.filter((node) => {
+          const { slug, name } = node;
+          if (slug && name && (slug.toLowerCase().indexOf(nodeSlug) > -1 || name.toLowerCase().indexOf(nodeSlug) > -1)) {
+            return true;
+          } else {
+            return false;
+          }
+        });
+        if (filteredNodes.length > 0) {
+          const currentNode = filteredNodes[0];
+          const { slug, name } = currentNode;
+          this.setState({ nodeName: name, nodeSlug: slug });
+        } else {
+          this.setState({ nodeName: '(未知)', nodeSlug: null });
+        }
+      }, error => {
+        alert('Error getting nodes:' + error);
+      });
+    }
+  };
+
+  setUpNavigationBar = () => {
+    Actions.refresh({
+      rightTitle: '发布',
+      onRight: this.onRightButtonPress,
+      rightButtonTextStyle: { color: 'white' },
+    });
+  };
+
+  onRightButtonPress = () => {
+    this.refs['titleTextInput'].blur();
+    this.refs['contentTextInput'].blur();
+  };
+
+  async requestOnceCode() {
+    // TODO: Implement get once code: $('input[name="once"]')
+  }
+
+  render() {
+    const { nodeName } = this.state;
+    return (
+      <PageContainer>
+        <View style={styles.nodeSelectorWrapper}>
+          <Text style={styles.nodeSelectorTitle}>节点：</Text>
+          <TouchableOpacity style={styles.nodeSelectorTouchable}>
+            <View style={styles.nodeSelectorTouchableInnerWrapper}>
+              <Text style={styles.nodeSelectorText}>{nodeName}</Text>
+              <Icon style={styles.nodeSelectorIcon} size={13} name="chevron-right" color="#329EED" />
+            </View>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.titleTextInputWrapper}>
+          <TextInput
+            ref="titleTextInput"
+            returnKeyType="next"
+            style={styles.titleTextInput}
+            onSubmitEditing={this.onTitleTextInputSubmit}
+            placeholder="标题" />
+        </View>
+        <View style={styles.contentTextInputWrapper}>
+          <TextInput
+            ref="contentTextInput"
+            style={styles.contentTextInput}
+            multiline={true}
+            placeholder="内容" />
+        </View>
+      </PageContainer>
+    );
+  }
+
+  onTitleTextInputSubmit = () => {
+    this.refs['contentTextInput'].focus();
+  };
+
+}
+
+const styles = Style.create({
+  nodeSelectorWrapper: {
+    backgroundColor: '#F7F8F9',
+    height: 40,
+    borderBottomColor: '#D8D8D8',
+    borderBottomWidth: 1,
+    alignItems: 'center',
+    paddingLeft: 12,
+    paddingRight: 12,
+    flexDirection: 'row',
+  },
+  nodeSelectorText: {
+    color: '#329EED',
+    fontSize: 14,
+    flex: 1,
+  },
+  nodeSelectorTitle: {
+    color: '#A4A4A4',
+    fontSize: 14,
+
+  },
+  nodeSelectorTouchable: {
+    flex: 1,
+  },
+  nodeSelectorTouchableInnerWrapper: {
+    flexDirection: 'row',
+  },
+  nodeSelectorIcon: {
+    marginTop: 2,
+  },
+
+  titleTextInputWrapper: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#D8E0E4',
+    marginLeft: 12,
+    marginRight: 12,
+    marginTop: 10,
+  },
+  titleTextInput: {
+    flex: 1,
+    height: 25,
+    fontSize: 16,
+  },
+
+  contentTextInputWrapper: {
+    flex: 1,
+    marginLeft: 12,
+    marginRight: 12,
+    marginTop: 10,
+    marginBottom: 12,
+  },
+  contentTextInput: {
+    flex: 1,
+    fontSize: 14,
+  },
+});
+
+export default NewTopicPage;

src/components/assets/[email protected]

@@ -1,8 +1,12 @@
 import React, {Component, PropTypes} from 'react';
+import {Actions} from 'react-native-router-flux';
 
 import Style from '../../../utilities/style';
 import TopicList from '../../common/TopicList';
 import PageContainer from '../../common/PageContainer';
+import NewTopicButton from '../../common/NewTopicButton';
+
+import NewTopicButtonImage from '../../assets/new_topic_icon.png';
 
 class NodePage extends Component {
   static propTypes = {
@@ -15,14 +19,25 @@ class NodePage extends Component {
   }
 
   render() {
-    const {slug} = this.props;
+    const { slug } = this.props;
     return (
       <PageContainer>
         <TopicList isNode={true} slug={slug} />
       </PageContainer>
     );
   }
 
+  componentDidMount() {
+    Actions.refresh({
+      rightButtonImage: NewTopicButtonImage,
+      onRight: this.onNewTopicButtonPress
+    });
+  }
+
+  onNewTopicButtonPress = () => {
+    Actions.newTopic({ nodeSlug: this.props.slug });
+  }
+
 }
 
 export default NodePage;

src/components/common/NewTopicButton.js

@@ -18,6 +18,7 @@ import UserTopicPageContainer from './UserTopicPage';
 import NodeListPage from '../components/pages/NodeList';
 import NodePage from '../components/pages/Node';
 import LoginPage from '../components/pages/Login';
+import NewTopicPage from '../components/pages/NewTopic';
 
 const store = configureStore();
 
@@ -66,6 +67,7 @@ class App extends Component {
             <Scene key="user_topic" component={UserTopicPageContainer} title="用户话题" />
             <Scene key="node" component={NodePage} title="节点" />
             <Scene key="login" component={LoginPage} direction="vertical" hideNavBar={true} />
+            <Scene key="newTopic" component={NewTopicPage} title="创建话题" />
           </Scene>
         </RouterWithRedux>
       </Provider>