TagNodeView.js

import React, { useState } from 'react';
import { LayoutAnimation } from 'react-native';

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

import PropTypes from 'prop-types';

// Paper
import {
  Surface,
  Paragraph,
  Title,
  TouchableRipple,
  IconButton,
  Portal,
  Dialog,
  Button,
  withTheme,
} from 'react-native-paper';

'use strict';

const styles = StyleSheet.create({
  container: {
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  titleBar: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingRight: 8,
    paddingLeft: 8,
  },
  titleBarText: {
    flex: 1.0,
    color: 'black', // Paper themeing doesn't separate the text styles.
  },
  titleBarExpand: {
    fontSize: 24,
  },
  tagsText: {
    margin: 8,
  },
  utilityButton: {
    width: 32,
    height: 32,
    margin: 0,
  }
});

// TagNodeView acts as a tree-view visual node, showing each node's
// data, and a list of children underneath, each of which can be
// expanded, edited, and selected.
// TODO: Serialization
const TagNodeView = (props) => {
  const [expanded, setExpanded] = useState(false);
  const [deleteNodeDialogVisible, setDeleteNodeDialogVisible] = useState(false);

  const path = Array.prototype.concat(props.parentPath, props.nodeData.path);

  showEditModal = () => {
    props.nagivation.push("Edit", {})
  }

  getContentView = () => {
    if (props.nodeData.children && expanded) {
      return (
        <View style={{ flexDirection: 'column', flex: 1.0, margin: props.style.margin }}>
          {
            props.nodeData.children.map((nodeData, idx) =>
              <TagNodeView
                {...props}
                key={idx}
                nodeData={nodeData}
                parentPath={path} />)
          }
        </View>
      );
    }
  }

  const selectedPredicate = (path) => {
    const pathStr = path.toString();
    return !!props.selectionState.find((x) => x.toString() == pathStr)
  }

  const childrenSelectedPredicate = (path) => {
    const pathStr = path.toString();
    return !!props.selectionState.find((x) => x.length > path.length && x.slice(0, path.length).toString() === pathStr)
  }

  const onEditNode = () => {
    props.onEditNode(path);
  }

  const onExpandPress = () => {
    LayoutAnimation.easeInEaseOut();
    setExpanded(!expanded);
  }

  const onLongPress = () => {
    props.onNodeLongPress(path);
  }

  const onNodePress = () => {
    props.onNodePress(path);
  }

  const onAddNode = () => {
    props.onAddNode(path);
    setExpanded(true);
  }

  const hideDeleteNodeDialog = () => {
    setDeleteNodeDialogVisible(false);
  }

  const onDeleteNode = () => {
    hideDeleteNodeDialog();
    props.onDeleteNode(path);
  }

  const onHighPriority = () => {
    props.onHighPriority(path);
  }

  const getUtilityButtons = (selected) => {
    switch (props.mode) {
      case 'selection': {
        const color = props.nodeData.highPriority ? 'red' : null;
        return (
          selected && <IconButton style={styles.utilityButton} iconColor={color} onPress={onHighPriority} icon="priority-high" />
        );
      }
      case 'edit':
        return ([
          <IconButton style={styles.utilityButton} key="4" onPress={() => setDeleteNodeDialogVisible(true)} icon="delete-sweep" />,
          <IconButton style={styles.utilityButton} key="5" onPress={onAddNode} icon="plus" />,
        ]);
      default:
        return ([
          <IconButton style={styles.utilityButton} key="6" onPress={onEditNode} icon="pencil" />,
        ]);
    };
  }

  const hasData = props.nodeData.data && props.nodeData.data.length > 0;
  const tagsText = hasData && props.nodeData.data.map((x) => "#" + x).join(" ");
  const selected = selectedPredicate(path);
  const childrenSelected = childrenSelectedPredicate(path);
  const selectedStyle = selected ? props.selectedStyle : null;
  const expandable = props.nodeData.children && props.nodeData.children.length > 0;
  let defaultAction = () => { };

  if (props.mode == 'selection') {
    defaultAction = onNodePress;
  } else if (expandable) {
    defaultAction = onExpandPress
  }

  return (
    <Surface style={[styles.container, props.style, selectedStyle]}>
      <TouchableRipple
        borderless
        onPress={defaultAction}
        onLongPress={onLongPress}>
        <View>
          <Portal>
            <Dialog
              visible={deleteNodeDialogVisible}
              onDismiss={hideDeleteNodeDialog}>
              <Dialog.Title>Warning</Dialog.Title>
              <Dialog.Content>
                <Paragraph>Are you sure you want to delete {props.nodeData.title}?</Paragraph>
              </Dialog.Content>
              <Dialog.Actions>
                <Button onPress={hideDeleteNodeDialog}>Cancel</Button>
                <Button onPress={onDeleteNode}>Delete</Button>
              </Dialog.Actions>
            </Dialog>
          </Portal>
          <View style={styles.titleBar}>
            {
              expandable &&
              <IconButton
                disabled={childrenSelected}
                style={styles.utilityButton}
                onPress={onExpandPress}
                icon={expanded ? "chevron-down" : "chevron-right"} />
            }
            <Title style={[styles.titleBarText, { opacity: props.nodeData.title ? 1.0 : 0.5 }]}>
              {props.nodeData.title || "Untitled"}
              {
                expandable &&
                <Title style={{ fontSize: 12, color: 'lightgray' }} opacity={0.2}> +{props.nodeData.children.length}</Title>
              }
            </Title>
            {getUtilityButtons(selected)}
          </View>
          {hasData && <Paragraph style={styles.tagsText}>{tagsText}</Paragraph>}
          <View>
            {
              getContentView(expanded)
            }
          </View>
        </View>
      </TouchableRipple>
    </Surface>
  );
}

TagNodeView.propTypes = {
  selectedColor: PropTypes.string,
};

export default withTheme(TagNodeView);