TagEditModal.js

import React from 'react';

import TagData from './TagData'

import {
  ActivityIndicator,
  SafeAreaView,
  View,
  StyleSheet,
} from 'react-native';

// Local Imports
import TagEditorView from './TagEditorView'

// Paper
import { Appbar, FAB, TextInput } from "react-native-paper";

'use strict';

export default class TagEditModal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editModalVisible: false,
      items: [],
      nodeData: undefined,
    }
    this.newNode = true;
    this.input = React.createRef();
  }

  componentDidMount = async () => {
    this.tagData = await TagData.getRoot();
    var node = this.tagData.getNodeByPath(this.props.route.params.path)
    if (node) {
      this.newNode = false;
      this.title = node.title;
      this.setState({ nodeData: this.tagData.rootNode, items: node.data ?? [] });
    } else {
      this.setState({ nodeData: this.tagData.rootNode });
    }
  }

  onRemove = (text) => {
    console.log("Removing #" + text);
    var newItems = this.state.items ? this.state.items.slice(0) : new Array();
    var idx = newItems.indexOf(text);
    newItems.splice(idx, 1);
    this.setState({ items: newItems });
    return true;
  }

  onAddItems = (items) => {
    this.setState({ items: this.state.items.concat(items), editModalVisible: false });
  }

  onReorderItems = (items) => {
    // We're going to trust that the items are all there. Right?
    let itemsText = items.map(({ text }) => text);
    this.setState({ items: itemsText });
  };

  render() {
    if (this.state.nodeData) {
      return (
        <View style={{ flex: 1 }}>
          <Appbar.Header>
            <Appbar.Content
              title="Edit Section"
            />
            <Appbar.BackAction
              onPress={async () => {
                this.setState({ nodeData: null })
                if (this.tagData.updatePath(this.props.route.params.path, this.state.items, this.title)) {
                  await this.tagData.commit();
                  this.props.navigation.push("Root", { nodeData: this.tagData.rootNode });
                  return;
                }
                this.props.navigation.goBack();
              }}
            />
          </Appbar.Header>
          <SafeAreaView style={{ flex: 1.0, flexDirection: 'column' }}>
            <TextInput
              style={{ margin: 8, minWidth: 160, backgroundColor: '#fff1' }}
              label="Section Title"
              autoFocus={this.newNode}
              defaultValue={this.title}
              onChangeText={(value) => { this.title = value }}
            />
            <View style={{ margin: 8, borderWidth: 1, borderRadius: 4, borderColor: "#0004", flex: 1 }}>
              <TagEditorView
                style={{ width: '100%', height: '100%' }}
                items={this.state.items.map(x => { return { text: x } })}
                onRemoveItem={this.onRemove}
                onAddItems={this.onAddItems}
                onReorderItems={this.onReorderItems}
                editModalVisible={this.state.editModalVisible}
                onRequestModalClose={() => this.setState({ editModalVisible: false })} />
            </View>
            <FAB style={styles.bottomFab} icon="plus" onPress={() => this.setState({ editModalVisible: true })} />
          </SafeAreaView>
        </View>
      );
    } else {
      return (
        <View style={{ justifyContent: 'center' }}>
          <ActivityIndicator size="large" style={{ padding: 32 }} />
        </View>
      );
    }
  }
};

const styles = StyleSheet.create({
  bottomFab: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    margin: 16,
  },
})