native-base#Title JavaScript Examples

The following examples show how to use native-base#Title. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
CatalogScreenHeader = ({ collection, navigation }) => {
  const savedRecords = useSelector(savedRecordsSelector).length;
  return (
    <Header style={styles.header}>
      <Left>
        {/* }<TouchableOpacity onPress={() => navigation.goBack()}> */}
        <TouchableOpacity onPress={() => navigation.navigate('CollectionsList')}>
          <Entypo name="chevron-thin-left" size={20} color={Colors.headerIcon} />
        </TouchableOpacity>
      </Left>
      <View style={styles.headerTitleContainer}>
        <HeaderCountIcon count={savedRecords} outline />
        <Title style={styles.collectionLabel}>{collection?.label}</Title>
      </View>
      <Right>

        <CatalogModal collectionId={collection.id} />
      </Right>
    </Header>
  );
}
Example #2
Source File: CollectionsIndexHeader.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
CollectionsIndexHeader = ({
  showNewCollectionButton,
  collectionsCounter,
  navigation,
  updateIsAddingNewCollectionAction,
}) => {
  const [collectionsDialogText, setCollectionsDialogText] = useState(null);
  const totalCollectionsCount = collectionsCounter.customCount + collectionsCounter.preBuiltCount;

  const handleNewCollectionPress = () => {
    updateIsAddingNewCollectionAction(true);
    navigation.navigate('CollectionInput');
  };

  return (
    <>
      <StatusBar backgroundColor={Colors.primary} barStyle="dark-content" />
      <Header style={styles.header}>
        <Left />
        <View style={styles.headerTitleContainer}>
          {totalCollectionsCount > 0 && <HeaderCountIcon count={totalCollectionsCount} />}
          <Title style={styles.headerText}>Collections</Title>
        </View>
        <Right>
          {showNewCollectionButton
            && <AddCollectionInputButton onPress={handleNewCollectionPress} />}

        </Right>
      </Header>
      {collectionsDialogText && (
        <CollectionsDialog
          collectionsDialogText={collectionsDialogText}
          setCollectionsDialogText={setCollectionsDialogText}
        />
      )}
    </>
  );
}
Example #3
Source File: ProfileScreen.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
ProfileScreen = () => (
  <SafeAreaView style={styles.root}>
    <StatusBar backgroundColor={Colors.primary} barStyle="dark-content" />
    <Header style={styles.header}>
      <Body>
        <Title style={styles.headerText}>Profile</Title>
      </Body>
    </Header>
    <UserInfo />
    <ScrollView style={styles.scrollContainer}>
      <Demographics />
      <Data />
    </ScrollView>
    <View style={styles.logoutContainer}>
      <Logout>
        <TouchableOpacity style={styles.logout}>
          <Text style={styles.logoutText}>
            Logout
          </Text>
        </TouchableOpacity>
      </Logout>
    </View>
  </SafeAreaView>
)
Example #4
Source File: SummaryScreen.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
SummaryScreen = () => (
  <SafeAreaView style={styles.root}>
    <StatusBar backgroundColor={Colors.primary} barStyle="dark-content" />
    <Header style={styles.header}>
      <Body>
        <Title style={styles.headerText}>Summary</Title>
      </Body>
    </Header>
    <Tab.Navigator
      initialRouteName="Records"
      style={styles.tabs}
      tabBarOptions={{
        labelStyle: styles.tabText,
        indicatorStyle: {
          backgroundColor: Colors.primary,
        },
      }}
    >
      <Tab.Screen
        name="Records"
        component={RecordsSummary}
      />
      <Tab.Screen
        name="Providers"
        component={ProvidersSummary}
      />
    </Tab.Navigator>
  </SafeAreaView>
)
Example #5
Source File: SettingsScreen.js    From pandoa with GNU General Public License v3.0 6 votes vote down vote up 
render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Settings</Title>
          </Body>
        </Header>
        <Content>
          <List>
            <ListItem
              first
              onPress={() => this.props.navigation.navigate("Billing")}
            >
              <Text>Notifications</Text>
            </ListItem>
            <ListItem>
              <Text>User Settings</Text>
            </ListItem>
            <ListItem>
              <Text>Billing</Text>
            </ListItem>
            <ListItem onPress={this.logout}>
              <Text style={styles.logout}>Logout</Text>
            </ListItem>
          </List>
        </Content>
      </Container>
    );
  }
Example #6
Source File: index.js    From discovery-mobile-ui with MIT License 5 votes vote down vote up 
DetailsPanel = ({
  navigation, collection, savedRecordsGroupedByType, savedRecords,
}) => {
  const { detailsPanelSortingState: sortingState } = collection;
  const { RECORD_TYPE, RECORD_DATE, TIME_SAVED } = sortFields;
  const hasSavedRecords = Object.entries(savedRecords).length > 0;
  const hasMultipleSavedRecords = Object.entries(savedRecords).length > 1;
  const savedItemsCount = useSelector(savedRecordsSelector).length;

  const handlePressNoteIcon = () => {
    navigation.navigate('Notes');
  };

  const displayAccordion = () => {
    switch (sortingState.activeSortField) {
      case RECORD_TYPE:
        return (
          <SubTypeAccordionsContainer
            data={savedRecordsGroupedByType}
            fromDetailsPanel
          />
        );
      case RECORD_DATE:
        return (
          <DateAccordionsContainer
            fromDetailsPanel
          />
        );
      case TIME_SAVED:
        return (
          <TimeSavedAccordionsContainer
            fromDetailsPanel
          />
        );
      default:
        console.warn('No activeSortField in DetailsPanel'); // eslint-disable-line no-console
        return null;
    }
  };

  return (
    <SafeAreaView style={styles.root}>
      <Header style={styles.header}>
        <Left>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Entypo name="chevron-thin-left" size={20} color={Colors.headerIcon} />
          </TouchableOpacity>
        </Left>
        <View style={styles.headerTitleContainer}>
          {savedItemsCount > 0 && <HeaderCountIcon count={savedItemsCount} outline />}
          <Title style={styles.headerText}>{collection?.label}</Title>
        </View>
        <Right>
          <TouchableOpacity onPress={handlePressNoteIcon}>
            <FontAwesome name="sticky-note-o" size={20} color={Colors.headerIcon} />
          </TouchableOpacity>
        </Right>
      </Header>
      {!hasSavedRecords && (
        <View style={styles.zeroStateContainer}>
          <Text style={styles.zeroStateText}>No Records in Collection.</Text>
        </View>
      )}
      {hasSavedRecords && (
        <>
          <SortingHeader
            sortingState={sortingState}
            hasMultipleSavedRecords={hasMultipleSavedRecords}
          />
          <ScrollView>
            {displayAccordion()}
          </ScrollView>
        </>
      )}
    </SafeAreaView>
  );
}
Example #7
Source File: CollectionInputScreen.js    From discovery-mobile-ui with MIT License 4 votes vote down vote up 
CollectionInputScreen = ({
  collection,
  createCollectionAction,
  selectCollectionAction,
  editCollectionDetailsAction,
  creatingCollection,
  collectionsLabels,
  collections,
  renameCollectionAction,
}) => {
  const navigation = useNavigation();
  const [title, onChangeTitle] = useState(creatingCollection ? DEFAULT_COLLECTION_NAME : collection.label); // eslint-disable-line max-len
  const [purpose, onChangePurpose] = useState(creatingCollection ? '' : collection?.purpose);
  const [current, currentSelection] = useState(creatingCollection ? false : collection?.current);
  const [urgent, urgentSelection] = useState(creatingCollection ? false : collection?.urgent);
  const [newCollectionID, setCollectionID] = useState('');
  const [isAddingCollection, setIsAddingCollection] = useState(false);
  const [collectionsDialogText, setCollectionsDialogText] = useState(null);
  const [open, setOpen] = useState(false);
  const [hasTextValue, setHasTextValue] = useState(false);
  const [sameName, setSameName] = useState(false);
  const [moveToCatalog, setMoveToCatalog] = useState(false);

  const itemsList = [

  ];
  const itemNames = [];
  const collectionNames = [];
  if (Object.keys(collections).length > 0) {
    Object.keys(collections).forEach((key) => {
      if (collections[key] != null) {
        collectionNames.push(collections[key].label);
        for (let j = 0; j < collections[key].tags.length; j += 1) {
          if (!itemNames.includes(collections[key].tags[j])) {
            itemNames.push(collections[key].tags[j]);
          }
        }
      }
    });
  }
  for (let i = 0; i < itemNames.length; i += 1) {
    itemsList.push({ label: itemNames[i], value: itemNames[i] });
  }
  const [items, setItems] = useState(itemsList);
  const [value, setValue] = useState(creatingCollection ? [] : collection.tags);

  const discardInputAlert = () => {
    Alert.alert(
      'Discard Edits',
      'Are you sure you want to discard edits to this collection?',
      [
        {
          text: 'Cancel',
          onPress: () => {},
          style: 'cancel',
        },
        {
          text: 'Discard',
          onPress: () => handleCloseInput(),
          style: 'destructive',
        },
      ],
    );
  };

  const handleCloseInput = ({ alert }) => {
    if (alert) {
      discardInputAlert();
    }
  };

  const handleSave = () => {
    if (creatingCollection) {
      if (!collectionNames.includes(title)) {
        if (hasTextValue) {
          if (hasInputErrors({ text: title, isRename: false, label: title })) {
            return;
          }
          createCollectionAction(title);
          setIsAddingCollection(true);
        }
      }
    } else {
      if (hasInputErrors({ text: title, isRename: true, label: title })) {
        return;
      }
      renameCollectionAction(newCollectionID, title);

      editCollectionDetailsAction(purpose, value, (current || urgent), urgent);
    }
  };
  const saveCollection = () => {
    handleSave();
    navigation.navigate('CollectionsList');
  };
  const saveAndContinue = () => {
    if (creatingCollection) {
      if (!collectionNames.includes(title)) {
        if (hasTextValue) {
          if (hasInputErrors({ text: title, isRename: false, label: title })) {
            return;
          }
          createCollectionAction(title);
          setIsAddingCollection(true);
        }
      }
    } else {
      if (hasInputErrors({ text: title, isRename: true, label: title })) {
        return;
      }
      renameCollectionAction(newCollectionID, title);

      editCollectionDetailsAction(purpose, value, (current || urgent), urgent);
    }
    setMoveToCatalog(true);
    //
  };
  const discardChanges = () => {
    setCollectionsDialogText(CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DISCARD]);
  };

  const discardChangesCreate = () => {
    setCollectionsDialogText(CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DISCARD_CREATE]);
  };
    // selectCollectionAction(title);

  // console.log(collection)
  // collection.label = title
  // collection.tags = tags

  useEffect(() => {
    if (Object.keys(collections).length > 0) {
      setCollectionID(Object.keys(collections)[Object.keys(collections).length - 1]);

      if (isAddingCollection) {
        selectCollectionAction(Object.keys(collections)[Object.keys(collections).length - 1]);
        editCollectionDetailsAction(purpose, value, (current || urgent), urgent);
        setIsAddingCollection(false);
      }
    }
    if (moveToCatalog) {
      navigation.navigate('Catalog');
    }

    // if (useState(collections )!== collections) {
    // }
  }, [collections, isAddingCollection, moveToCatalog]);

  useEffect(() => {
    setSameName(false);
    if (title.length > 0) {
      setHasTextValue(true);
    }
    if (creatingCollection) {
      for (let i = 0; i < collectionNames.length; i += 1) {
        if (collectionNames[i].toLowerCase() === title.toLowerCase()) {
          setHasTextValue(false);
          setSameName(true);
        }
      }
    }
  }, [title]);

  const saveButtonTextStyle = hasTextValue ? styles.saveButtonText : styles.disabledSaveButtonText;

  // PLACEHOLDERS
  const placeholderTitle = creatingCollection ? '' : collection.label;

  const isUniqueName = ({ text, isRename, label }) => {
    // if action is rename, new label can be same as old label
    if (isRename && (text.toLowerCase() === label.toLowerCase())) {
      return true;
    }
    return !((collectionsLabels).includes(text.toLowerCase()));
  };
  const hasMinLength = (text) => text.length > 0;

  const hasInputErrors = ({ text, isRename, label }) => {
    if (!hasMinLength(text)) {
      return true;
    }
    if (!isUniqueName({ text, isRename, label })) {
      return true;
    }
    return false;
  };
  const reduceInputs = () => {
    Keyboard.dismiss();
    setOpen(false);
  };

  return (

    <SafeAreaView style={styles.root}>

      <Header style={styles.header}>
        <Left>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Entypo name="chevron-thin-left" size={20} color="black" />
          </TouchableOpacity>
        </Left>
        <TouchableWithoutFeedback onPress={reduceInputs}>
          <View style={styles.headerTitleContainer}>
            <Title style={styles.headerText}><Text>{title}</Text></Title>
          </View>
        </TouchableWithoutFeedback>
        <Right>
          <TouchableWithoutFeedback style={styles.empty_toucable} onPress={reduceInputs}>
            <View style={styles.headerTitleContainer}>

              <Text style={styles.header_empty_text}> </Text>

            </View>

          </TouchableWithoutFeedback>
        </Right>
      </Header>

      <View style={styles.inputField}>

        <KeyboardAvoidingView behavior="padding">
          <TouchableWithoutFeedback onPress={reduceInputs}>

            <View style={styles.textInputDiv}>
              <Text variant="title" style={styles.formHeader}>Title</Text>
            </View>
          </TouchableWithoutFeedback>

          <View style={styles.titleTextInputContainer}>
            <TextInput
              style={styles.textInput}
              onChangeText={onChangeTitle}
              placeholder={placeholderTitle}
              value={title}
              onTouchStart={() => setOpen(false)}
              multiline={false}
              autoFocus
            />
          </View>

          <View style={styles.titleFooter}>
            {sameName
            && (
            <View style={styles.sameNameAlertContainer}>
              <Text style={{ color: Colors.destructive }}>Collection name must be unique</Text>
            </View>
            )}
          </View>

        </KeyboardAvoidingView>

        <KeyboardAvoidingView behavior="padding">

          <TouchableWithoutFeedback onPress={reduceInputs}>

            <View style={styles.textInputDiv}>

              <TouchableOpacity style={styles.textInputHeader} disabled>
                <Text variant="title" style={styles.formHeader}>Purpose</Text>
              </TouchableOpacity>
            </View>
          </TouchableWithoutFeedback>

          <View style={styles.purposeTextInputContainer}>
            <TextInput
              style={styles.textInput}
              onChangeText={onChangePurpose}
              placeholder="add purpose"
              onSubmitEditing={Keyboard.dismiss}
              value={purpose}
              onTouchStart={() => setOpen(false)}
              multiline={false}
              autoFocus
            />
          </View>
        </KeyboardAvoidingView>

        <View style={styles.tagTextHeader}>
          <TouchableWithoutFeedback disabled onPress={reduceInputs}>
            <Text variant="title" style={styles.formHeader}>Collection Tags</Text>
          </TouchableWithoutFeedback>
        </View>

        <View style={{ zIndex: 100, backgroundColor: '#fff' }}>
          <Picker
            multiple
            min={0}
            max={5}
            open={open}
            value={value}
            setOpen={setOpen}
            setValue={setValue}
            items={items}
            setItems={setItems}
            searchable
            placeholder="add new or existing tags "
          />
        </View>
        <View style={styles.switchTextHeader}>
          <TouchableWithoutFeedback disabled onPress={reduceInputs}>

            <Text variant="title" style={styles.formHeader}>Priority</Text>
          </TouchableWithoutFeedback>

        </View>

        <View style={styles.switchRow}>
          <View style={styles.currentTextField}>

            <Feather name="watch" size={18} color={Colors.currentCollectionColor} />

            <Text style={styles.switchText}>Current</Text>
          </View>

          <Switch
            trackColor={{
              false: Colors.mediumgrey,
              true: Platform.OS === 'ios' ? Colors.primary : Colors.primaryLight,
            }}
            thumbColor={(Platform.OS === 'ios') ? 'white' : Colors[(current ? 'primary' : 'primaryLight')]}
            onValueChange={() => currentSelection(!current)}
            value={current || urgent}
            disabled={urgent}
          />
          <View style={styles.leftRightPadding}>
            <Feather name="alert-triangle" size={18} color={Colors.destructive} />

            <Text variant="title" style={styles.switchText}>Urgent</Text>
          </View>

          <Switch
            trackColor={{
              false: Colors.mediumgrey,
              true: Platform.OS === 'ios' ? Colors.primary : Colors.primaryLight,
            }}
            thumbColor={(Platform.OS === 'ios') ? 'white' : Colors[(urgent ? 'primary' : 'primaryLight')]}
            onValueChange={() => urgentSelection(!urgent)}
            value={urgent}
          />
        </View>
      </View>

      <KeyboardAvoidingView style={styles.textRow}>
        <TouchableOpacity
          style={styles.saveButton}
          onPress={() => {
            if (creatingCollection) {
              discardChangesCreate();
            } else {
              discardChanges();
            }
          }}
        >
          <BaseText variant="title" style={styles.discardButtonText}>Discard</BaseText>
        </TouchableOpacity>

        {collectionsDialogText && (
        <CollectionsDialog
          collectionsDialogText={collectionsDialogText}
          setCollectionsDialogText={setCollectionsDialogText}
        />
        )}
        <View style={styles.saveCol}>
          <TouchableOpacity
            style={styles.saveButton}
            onPress={saveCollection}
            disabled={!hasTextValue}
          >
            <BaseText variant="title" style={saveButtonTextStyle}>Save</BaseText>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.saveButton}
            onPress={saveAndContinue}
            disabled={!hasTextValue}
          >
            <BaseText variant="title" style={saveButtonTextStyle}>Save and Continue</BaseText>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>

    </SafeAreaView>
  );
}
Example #8
Source File: NotesScreen.js    From discovery-mobile-ui with MIT License 4 votes vote down vote up 
NotesScreen = ({
  resource,
  createRecordNoteAction,
  editRecordNoteAction,
  collection,
  createCollectionNoteAction,
  editCollectionNoteAction,
}) => {
  const navigation = useNavigation();
  const route = useRoute();
  const editingNote = route?.params?.editingNote;
  const [text, onChangeText] = useState('');
  const [editNoteId, setEditNoteId] = useState(null);
  const [showNoteInput, setShowNoteInput] = useState(false);
  const isResourceNotes = !!resource;

  const closeInput = () => {
    onChangeText('');
    setEditNoteId(null);
    setShowNoteInput(false);
  };

  const discardInputAlert = () => {
    Alert.alert(
      'Discard Edits',
      'Are you sure you want to discard edits to this note?',
      [
        {
          text: 'Cancel',
          onPress: () => {},
          style: 'cancel',
        },
        {
          text: 'Discard',
          onPress: () => closeInput(),
          style: 'destructive',
        },
      ],
    );
  };

  const handleCloseInput = ({ alert }) => {
    if (alert) {
      discardInputAlert();
    } else {
      closeInput();
    }
  };

  const handleSave = () => {
    if (isResourceNotes) {
      if (editNoteId) {
        editRecordNoteAction(resource.id, text, editNoteId);
      } else {
        createRecordNoteAction(resource.id, text);
      }
    } else if (editNoteId) {
      editCollectionNoteAction(editNoteId, text);
    } else {
      createCollectionNoteAction(text);
    }
    closeInput();
  };

  const handleCreateNote = () => {
    setShowNoteInput(true);
  };

  const handleEditNote = (noteId, noteText) => {
    setEditNoteId(noteId);
    onChangeText(noteText);
    setShowNoteInput(true);
  };

  useEffect(() => {
    if (editingNote) {
      handleEditNote(editingNote.id, editingNote.text);
    } else {
      handleCreateNote();
    }
  }, []);

  const hasTextValue = text.length > 0;
  const saveButtonTextStyle = hasTextValue ? styles.saveButtonText : styles.disabledSaveButtonText;
  const noteCount = isResourceNotes
    ? collection.records[resource.id]?.notes && Object.keys(collection.records[resource?.id]?.notes).length // eslint-disable-line max-len
    : Object.keys(collection.notes).length;

  return (
    <SafeAreaView style={styles.root}>
      <Header style={styles.header}>
        <Left>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Entypo name="chevron-thin-left" size={20} color="black" />
          </TouchableOpacity>
        </Left>
        <View style={styles.headerTitleContainer}>
          {noteCount > 0 && <HeaderCountIcon count={noteCount} outline />}
          <Title style={styles.headerText}><Text>Notes</Text></Title>
        </View>
        <Right>
          {!showNoteInput && (
            <TouchableOpacity onPress={handleCreateNote} disabled={showNoteInput}>
              <Feather name="plus-square" size={24} color="black" />
            </TouchableOpacity>
          )}
        </Right>
      </Header>
      <ScrollView>
        {isResourceNotes && (
          <View style={styles.resourceCardContainer}>
            <ResourceCard
              resourceId={resource.id}
              resource={resource}
              handleEditNote={handleEditNote}
              editNoteId={editNoteId}
              fromNotesScreen
            />
          </View>
        )}
        {!isResourceNotes && (
          <>
            <View style={styles.collectionHeaderContainer}>
              <View style={styles.collectionLabelContainer}>
                <Text>{collection.label}</Text>
              </View>
            </View>
            <CollectionNotes
              editNoteId={editNoteId}
              handleEditNote={handleEditNote}
              fromNotesScreen
            />
          </>
        )}
      </ScrollView>
      {showNoteInput && (
      <KeyboardAvoidingView behavior="padding">
        <View style={styles.noteEditingActions}>
          <TouchableOpacity onPress={() => handleCloseInput({ alert: true })}>
            <Ionicons name="ios-close-outline" size={24} color="black" />
          </TouchableOpacity>
          <TouchableOpacity style={styles.saveButton} onPress={handleSave} disabled={!hasTextValue}>
            <BaseText variant="title" style={saveButtonTextStyle}>Save</BaseText>
          </TouchableOpacity>
        </View>
        <View style={styles.textInputContainer}>
          <TextInput
            style={styles.textInput}
            onChangeText={onChangeText}
            multiline
            value={text}
            autoFocus
          />
        </View>
      </KeyboardAvoidingView>
      )}
    </SafeAreaView>
  );
}