native-base Left JavaScript Examples

Source File: HeaderView.js From inventory-management-rn with MIT License

6 votes

HeaderView = ({ navigation,title }) => {
  return (
    <Header style={{ backgroundColor: '#4796BD', flexDirection: 'row' }} androidStatusBarColor="#247095" >
      <Left>
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Icon name="menu" color="white" size={35} />
        </TouchableOpacity>
      </Left>
      <Body>
        <Text style={{fontSize: 21, color: '#fff'}}>{title}</Text>
      </Body>
      <Right>
        <TouchableOpacity onPress={() => navigation.replace('ProfilePage')}>
          <Icon name="user" color="white" size={35} />
        </TouchableOpacity>
      </Right>
    </Header>
  );
}

Source File: DrawerScreen2.js From inventory-management-rn with MIT License

6 votes

MyHeader = ({ navigation }) => {
  return (
    <Header style={{ backgroundColor: '#4796BD', flexDirection: 'row' }}>
      <Left>
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon name="menu" color="white" size={35} />
        </TouchableOpacity>
      </Left>
      <Body>
        <Text style={{ fontSize: 21, color: '#fff' }}>Drawer</Text>
      </Body>
      <Right>
        <TouchableOpacity onPress={() => { }}>
          <Icon name="user" color="white" size={35} />
        </TouchableOpacity>
      </Right>
    </Header>
  );
}

Source File: index.js From discovery-mobile-ui with MIT License

6 votes

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>
  );
}

Source File: CollectionsIndexHeader.js From discovery-mobile-ui with MIT License

6 votes

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}
        />
      )}
    </>
  );
}

Source File: index.js From discovery-mobile-ui with MIT License

6 votes

Timeline = ({ handleOpenDrawer, noRecords }) => {
  const [showTimeline, setShowTimeline] = useState(true);

  return (
    <View style={styles.root}>
      <View style={styles.dateRangeContainer}>
        <Left>
          <TouchableOpacity
            style={styles.drawerIcon}
            onPress={handleOpenDrawer}
          >
            <MaterialCommunityIcons
              name="filter-outline"
              size={24}
              color={Colors.primary}
            />
          </TouchableOpacity>
        </Left>
        <DateRangePicker />
        <Right>
          {!noRecords && (
            <TouchableOpacity
              style={styles.expandIcon}
              onPress={() => setShowTimeline(!showTimeline)}
            >
              <Ionicons
                name={showTimeline ? 'chevron-up' : 'chevron-down'}
                size={24}
                color={Colors.expandTimeline}
              />
            </TouchableOpacity>
          )}
        </Right>
      </View>
      {showTimeline && !noRecords && <TimelineChart />}
    </View>
  );
}

Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution

5 votes

function Catalog(props) {

    const [loading, setLoading] = useState(false);
    const [products, setProducts] = useState([]);
    const order = useSelector(state => state.order);
    const dispatch = useDispatch();

    useEffect(() => {
        fetchProducts();
    }, []);

    async function fetchProducts() {
        const data = await DataStore.query(Product);
        setProducts(data);
    };

    function checkoutBtnHandler() {
        return props.navigation.push('Checkout');
    }

    function addProductHandler(product) {
        dispatch(addLineItem(product));
    }
    
    const productList = products.map(product => (
        <ListItem thumbnail key={product.id}>
            <Left>
                <Thumbnail square source={{ uri: product.image }} />
            </Left>
            <Body>
                <Text>{product.name}</Text>
                <Text note numberOfLines={1}>${product.price}</Text>
            </Body>
            <Right>
                <Button onPress={() => addProductHandler(product)}>
                    <Text>Add</Text>
                </Button>
            </Right>
        </ListItem>
    ));

    return (
        <Container>
            <Content refreshControl={
                <RefreshControl
                    onRefresh={fetchProducts}
                    refreshing={loading}
                />
            }>
                <Button block info style={styles.checkoutBtn} onPress={checkoutBtnHandler}>
                    <Text style={styles.quantityText}>{order.totalQty}</Text>
                    <Text style={styles.subtotalTxt}>Subtotal ${order.subtotal.toFixed(2)}</Text>
                </Button>
                <List>
                    {productList}
                </List>
            </Content>
        </Container>
    );
}

Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution

5 votes

Receipt = ({ route }) => {
    
    const { order } = route.params;
    const lineItemList = order.lineItems.map(lineItem => (
        <ListItem icon key={lineItem.id}>
            <Left>
                <Text>{lineItem.qty}</Text>
            </Left>
            <Body>
                <Text>{lineItem.description}</Text>
            </Body>
            <Right>
                <Text>${lineItem.total.toFixed(2)}</Text>
            </Right>
        </ListItem>
    ));

    return (
        <Container>
            <Content>
                <List>
                    <ListItem itemDivider>
                        <Text>&nbsp;</Text>
                    </ListItem>
                    <ListItem>
                        <Body>
                            <Text>Order Number</Text>
                            <Text note>{order.id}</Text>
                        </Body>
                    </ListItem>
                    <ListItem>
                        <Body>
                            <Text>Date</Text>
                            <Text note>{moment(order.createdAt).format('YYYY-MM-DD hh:mm A')}</Text>
                        </Body>
                    </ListItem>
                    <ListItem itemDivider>
                        <Text>&nbsp;</Text>
                    </ListItem>
                    {lineItemList}
                    <ListItem itemDivider>
                        <Text>&nbsp;</Text>
                    </ListItem>
                    <ListItem>
                        <Body>
                            <Text style={styles.subtotalsTxt}>Subtotal</Text>
                        </Body>
                        <Right>
                            <Text>${order.subtotal.toFixed(2)}</Text>
                        </Right>
                    </ListItem>
                    <ListItem>
                        <Body>
                            <Text style={styles.subtotalsTxt}>Tax</Text>
                        </Body>
                        <Right>
                            <Text>${order.tax.toFixed(2)}</Text>
                        </Right>
                    </ListItem>
                    <ListItem>
                        <Body>
                            <Text style={styles.subtotalsTxt}>Total</Text>
                        </Body>
                        <Right>
                            <Text>${order.total.toFixed(2)}</Text>
                        </Right>
                    </ListItem>
                    <ListItem itemDivider>
                        <Text>&nbsp;</Text>
                    </ListItem>
                </List>
            </Content>
        </Container>
    );
}

Source File: index.js From discovery-mobile-ui with MIT License

5 votes

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>
  );
}

Source File: Welcome.js From expo-ticket-app with MIT License

5 votes

render() {
        const { loading } = this.props;

        return (<Container style={{ backgroundColor: commonColor.backgroundColor }}>
            <StatusBar style="light"/>
            <Content padder style={{ flex: 1 }}>
                <Spacer size={60}/>
                <Text style={{
                    flex: 1,
                    fontSize: 55,
                    fontWeight: '400',
                    fontFamily: 'Montserrat_Bold',
                    color: 'white',
                    textAlign: 'center',
                }}>
                    {'Expo\nTicket App'}
                </Text>
                <LottieView
                    loop={true}
                    autoPlay
                    speed={1.5}
                    style={{ width: '100%' }}
                    source={require('../../../images/home')}
                />
                {!loading && <View>
                    <Card style={{ backgroundColor: commonColor.brandStyle }}>
                        <ListItem onPress={Actions.login} icon first>
                            <Left>
                                <Icon name="log-in" style={{ color: 'white' }}/>
                            </Left>
                            <Body style={{ borderBottomWidth: 0 }}>
                                <TextI18n style={{
                                    color: 'white',
                                    fontSize: 20
                                }}>
                                    login.connect
                                </TextI18n>
                            </Body>
                        </ListItem>
                        <ListItem onPress={Actions.signUp} icon>
                            <Left>
                                <Icon name="add-circle" style={{ color: 'white' }}/>
                            </Left>
                            <Body style={{ borderBottomWidth: 0 }}>
                                <TextI18n style={{
                                    color: 'white',
                                    fontSize: 20
                                }}>
                                    login.signUp
                                </TextI18n>
                            </Body>
                        </ListItem>
                    </Card>
                    <TextI18n
                        onPress={Actions.tabbar}
                        style={{
                            flex: 1,
                            fontSize: 13,
                            fontWeight: '400',
                            fontFamily: 'Montserrat',
                            paddingTop: 10,
                            color: 'white',
                            textAlign: 'center',
                            textDecorationLine: 'underline',
                        }}>
                        login.withoutAccount
                    </TextI18n>
                </View>}
                {loading && <Loading/>}
            </Content>
        </Container>);
    }

Source File: index.js From aws-appsync-refarch-offline with MIT No Attribution

4 votes

Checkout = (props) => {
    
    const order = useSelector(state => state.order);
    const dispatch = useDispatch();

    async function submitOrder() {
        const now = new Date().toISOString();
        const newOrder = await DataStore.save(
            new Order({
                total: order.total,
                subtotal: order.subtotal,
                tax: order.tax,
                createdAt: now,
            })
        );

        const promises = order.lineItems.map(lineItem => {
            return DataStore.save(
                new LineItem({
                    qty: lineItem.qty,
                    description: lineItem.description,
                    price: lineItem.price,
                    total: lineItem.total,
                    order: newOrder, // associate to order
                    product: lineItem.product, // associate to product
                })
            );
        });

        await Promise.all(promises);
    }

    async function checkoutBtnHandler() {
        await submitOrder();
        dispatch(startNewOrder());
        props.navigation.goBack();
    }

    const lineItemList = order.lineItems.map(lineItem => (
        <ListItem icon key={lineItem.sku}>
            <Left>
                <Text>{lineItem.qty}</Text>
            </Left>
            <Body>
                <Text>{lineItem.description}</Text>
            </Body>
            <Right>
                <Text>${lineItem.total.toFixed(2)}</Text>
            </Right>
        </ListItem>
    ));

    return (
        <Container>
            <Content>
                <Text style={styles.totalTxt}>TOTAL</Text>
                <Text style={styles.totalQty}>${order.total.toFixed(2)}</Text>
                <List>
                    <ListItem itemDivider>
                        <Text>&nbsp;</Text>
                    </ListItem>
                    {lineItemList}
                    <ListItem itemDivider>
                        <Text>&nbsp;</Text>
                    </ListItem>
                    <ListItem>
                        <Body>
                            <Text style={styles.subtotalsTxt}>Subtotal</Text>
                        </Body>
                        <Right>
                            <Text>${order.subtotal.toFixed(2)}</Text>
                        </Right>
                    </ListItem>
                    <ListItem>
                        <Body>
                            <Text style={styles.subtotalsTxt}>Tax</Text>
                        </Body>
                        <Right>
                            <Text>${order.tax.toFixed(2)}</Text>
                        </Right>
                    </ListItem>
                    <ListItem>
                        <Body>
                            <Text style={styles.subtotalsTxt}>Total</Text>
                        </Body>
                        <Right>
                            <Text>${order.total.toFixed(2)}</Text>
                        </Right>
                    </ListItem>
                </List>
                <Button block info style={styles.checkoutBtn} onPress={checkoutBtnHandler} disabled={order.lineItems.length === 0}>
                    <Text style={styles.checkoutTxt}>Checkout</Text>
                </Button>
            </Content>
        </Container>
    );
}

Source File: ProfilePage.js From inventory-management-rn with MIT License

4 votes

ProfilePage = ({ navigation }) => {

    const [editMode, toggleEditMode] = useState(false)

    const [firstName, updateFirstName] = useState('John')
    const [lastName, updateLastName] = useState('Doe')
    const [email, updateEmail] = useState('[email protected]')
    const [gender, updateGender] = useState('M')
    const [age, updateAge] = useState('20')
    const [isStaff, updateIsStaff] = useState(false)

    const [isReady, setReady] = useState(false);

    
    useEffect(() => {
        getCurrentUserInfo();
    }, []);     //called only when component mounted 

    const getCurrentUserInfo = async () => {

        try {
            const tokenValidity = await isTokenValid(navigation)
            console.log('token valid? ',tokenValidity)
            if (tokenValidity){
                const auth_key = await AsyncStorage.getItem('auth_key');

                const res = await fetch('http://chouhanaryan.pythonanywhere.com/auth/users/me/', {
                    method: 'GET',
                    headers: {
                        Authorization: `Token ${auth_key}`,
                    },
                })
    
                const data = await res.json()
                console.log(data)
                const firstName = data.first_name
                const lastName = data.last_name
                const age = data.age.toString()
                const email = data.email
                const gender = data.gender === 'F' ? 'Female' : 'Male'
                const isStaff = data.is_staff
    
                //set user details to state
                updateAge(age)
                updateEmail(email)
                updateFirstName(firstName)
                updateLastName(lastName)
                updateGender(gender)
                updateIsStaff(isStaff)
    
                if (res.status === 200) {
                    setReady(true);
                }
            } else {
                logout(navigation)
            }

        } catch (err) {
            console.log('error' , err)
        }
    }

    const onSavePressed = async () => {

        // validation
        if (firstName === "" || lastName === "" || age === "") {
            if (firstName === "")
                Alert.alert('please enter firstName')
            else if (lastName === "")
                Alert.alert('please enter lastName')
            else if (age === "")
                Alert.alert('please enter age')
        }
        else {
            try {
                let formData = new FormData()
                formData.append('email', email)
                formData.append('first_name', firstName)
                formData.append('last_name', lastName)
                formData.append('age', age)
                // console.log(formData)

                const auth_key = await AsyncStorage.getItem('auth_key');

                const res = await fetch('http://chouhanaryan.pythonanywhere.com/auth/user_update/', {
                    method: 'POST',
                    headers: {
                        Authorization: `Token ${auth_key}`,
                    },
                    body: formData,
                })
                console.log(res)
                console.log(res.status)
                const resJson = await res.json()
                console.log(resJson)
                if (res.status === 200) {
                    Alert.alert('details updated')
                } else {
                    Alert.alert('Error in updating details')
                }
                toggleEditMode(!editMode)
            } catch (err) {
                console.log(err)
            }
        }
    }

    return (
        <ScrollView style={{ flex: 1 }}>
            <Header style={{ backgroundColor: '#4796BD', flexDirection: 'row' }} androidStatusBarColor="#247096">
                <Left>
                    <TouchableOpacity onPress={() => { navigation.navigate('Drawer') }}>
                        <Icon name="home" color="white" size={35} />
                    </TouchableOpacity>
                </Left>
                <Body>
                    <Text style={{ fontSize: 21, color: '#fff' }}>Profile</Text>
                </Body>

            </Header>

            {/* container */}

            {!isReady &&
                <Body style={{ justifyContent: 'center' }}>
                    <ActivityIndicator size="large" color="#000" />
                </Body>
            }

            {
                isReady &&
                <View >
                    <View style={{ alignItems:'center',marginTop: 20, }}>
                        {/* <Text style={styles.profileTitle}>  </Text> */}

                        {!editMode && <TouchableOpacity style={styles.editButton} onPress={() => toggleEditMode(!editMode)}>
                            <Icon name="edit" color="#4796BD" size={25} />
                            <Text style={styles.editText}> Edit </Text>
                        </TouchableOpacity>}


                    </View>

                    <View style={{ alignItems: 'center' }}>
                        <View floatingLabel style={styles.inputBox}>
                            <Label style={styles.label}>First Name</Label>
                            <Input
                                style={editMode ? styles.inputAreaEditMode : styles.inputAreaViewMode}
                                // placeholder="Username"
                                value={firstName}
                                disabled={editMode ? false : true}
                                onChangeText={val => updateFirstName(val.trim())}
                            />
                        </View>

                        <View floatingLabel style={styles.inputBox}>
                            <Label style={styles.label}>Last Name</Label>
                            <Input
                                style={editMode ? styles.inputAreaEditMode : styles.inputAreaViewMode}
                                // placeholder="Username"
                                value={lastName}
                                disabled={editMode ? false : true}
                                onChangeText={val => updateLastName(val.trim())}
                            />
                        </View>

                        <View style={styles.inputBox}>
                            <Label style={styles.label}>Email</Label>
                            <Input
                                style={styles.inputAreaViewMode}
                                // placeholder="Username"
                                value={email}
                                disabled={true}
                            />
                        </View>


                        <View style={styles.inputBox}>
                            <Label style={styles.label}>Gender</Label>

                            <Input
                                style={styles.inputAreaViewMode}
                                // placeholder="Username"
                                value={gender}
                                disabled={true}
                            />
                        </View>

                        <View style={styles.inputBox}>

                            <Label style={styles.label}>Age</Label>
                            <Input
                                keyboardType="numeric"
                                style={editMode ? styles.inputAreaEditMode : styles.inputAreaViewMode}
                                onChangeText={val => updateAge(val.trim())}
                                value={age}
                                disabled={editMode ? false : true}
                            />
                        </View>


                        <View style={styles.inputBox}>

                            <Label style={styles.label}>is staff?</Label>
                            <Text style={styles.inputAreaViewMode}> {isStaff ? "true" : "false"}</Text>
                        </View>



                        {/* {
                            editMode &&
                            <View style={styles.inputBox}>

                                <Label style={styles.label}> is staff? </Label>
                                <View style={styles.radioGroup}>
                                    <Text style={styles.isStaffText}> true </Text>
                                    <Radio selected={isStaff} />

                                    <Text style={styles.isStaffText}> false </Text>
                                    <Radio selected={!isStaff} />
                                </View>
                            </View>
                        } */}

                        {/* end of userinput */}

                    </View>
                    {/* end of form */}
                    {
                        editMode &&
                        <TouchableOpacity style={styles.saveButton} onPress={() => onSavePressed()}>
                            {/* <Icon name="edit" color="#4796BD" size={25} /> */}
                            <Text style={styles.editText}> Save </Text>
                        </TouchableOpacity>
                    }


                    <TouchableOpacity
                        style={styles.logoutButton}
                        onPress={() => {
                            logout(navigation)
                        }}>
                        <Text style={styles.logoutText}>Logout</Text>
                    </TouchableOpacity>

                </View>}
        </ScrollView>
    );
}

Source File: indexSearch.js From discovery-mobile-ui with MIT License

4 votes

CollectionsIndexSearch = ({
  navigation,
  collections,
}) => {
  const [open, setOpen] = useState(false);

  /* var itemsList =
    [

    ]
  var itemNames = []
  var collectionNames = []
  if (Object.keys(collections).length > 0){
    for (const [key, value] of Object.entries(collections)) {

      if (collections[key] != null){
      collectionNames.push(collections[key].label);
      for (var j = 0; j < collections[key].tags.length; j++) {
        if (!itemNames.includes(collections[key].tags[j])) {
          itemNames.push(collections[key].tags[j])
        }
      }
    }
    }
  }

  for (var i in itemNames) {
    itemsList.push({label: itemNames[i], value: itemNames[i]})
  } */
  // const [items, setItems] = useState(itemsList);
  const [items, setItems] = useState([]);
  const [value, setValue] = useState([]);
  const [current, currentSelection] = useState(false);
  const [urgent, urgentSelection] = useState(false);
  const [collectionsList, editCollectionsList] = useState(collections);
  const [showSearch, setShowSearch] = useState(false);
  const [title, onChangeTitle] = useState('');
  const [notCurrent, setNotCurrent] = useState('');
  const [notUrgent, setNotUrgent] = useState('');

  const [showSearchText, setShowSearchText] = useState(false);
  const [threeLineDiv, setThreeLineDiv] = useState([]);
  const [disableReset, setDisableReset] = useState(true);

  // console.log("HOME PAGE")
  // console.log(collectionNames);
  useEffect(() => {
    const newCollectionsList = {};

    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] });
    }

    setItems(itemsList);
    Object.keys(collections).forEach((i) => {
      let toAdd = true;
      if (title.length > 0 && toAdd) {
        if (!(collections[i].label.includes(title)) && !(collections[i].purpose.includes(title))) {
          toAdd = false;
          // console.log("oof urgent")
        }
      }
      for (let j = 0; j < value.length; j += 1) {
        if (toAdd && !(collections[i].tags.includes(value[j]))) {
          toAdd = false;
          // console.log("oof current")
        }
      }

      if (urgent && !(collections[i].urgent)) {
        toAdd = false;
      } else if (current && !(collections[i].current)) {
        toAdd = false;
      }
      if (notCurrent && (collections[i].current)) {
        toAdd = false;
      } else if (notUrgent && (collections[i].urgent)) {
        toAdd = false;
      }

      if (toAdd) {
        newCollectionsList[i] = collections[i];
      }
    });
    const searchText = [];
    // console.log(collectionsList)
    const threeLineSearchText = [];
    editCollectionsList(newCollectionsList);
    if (title.length > 0) {
      searchText.push(
        <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
          {' '}
          {'phrase: '}
        </Text>,
      );
      searchText.push(
        <Text style={{ padding: 0 }}>
          {' '}
          {title}
        </Text>,
      );
      threeLineSearchText.push(
        <View style={styles.threeLineSummary}>
          <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
            {' '}
            {'phrase: '}
          </Text>
          <Text style={{ padding: 0 }}>
            {' '}
            {`${title}; `}
          </Text>
          <Text style={{ padding: 0 }}>
            {' '}
            {}
          </Text>
        </View>,
      );
    }

    if (value.length > 0) {
      let tagList = '';
      for (let j = 0; j < value.length; j += 1) {
        tagList += value[j];
        if (j === value.length - 1) {
          tagList += ';';
        } else {
          tagList += ', ';
        }
      }
      threeLineSearchText.push(
        <View style={styles.threeLineSummary}>
          <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
            {' '}
            {'tags: '}
          </Text>
          <Text style={{ padding: 0 }}>
            {' '}
            {tagList}
          </Text>
        </View>,
      );

      if (title.length > 0) {
        searchText.push(<Text style={{ padding: 0 }}>{'; '}</Text>);
      }
      searchText.push(
        <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
          {' '}
          {'selected tags: '}
        </Text>,
      );
      for (let j = 0; j < value.length; j += 1) {
        searchText.push(
          <Text style={{ padding: 0 }}>
            {' '}
            {value[j]}
          </Text>,
        );
        if (j !== value.length - 1) {
          searchText.push(<Text style={{ padding: 0 }}>{', '}</Text>);
        }
        if (j === value.length - 1 && (current || urgent || notCurrent || notUrgent)) {
          searchText.push(<Text style={{ padding: 0 }}>{'; '}</Text>);
        }
      }
    } else if (title.length > 0 && (current || urgent || notCurrent || notUrgent)) {
      searchText.push(<Text style={{ padding: 0 }}>{'; '}</Text>);
    }
    let priorityText = '';

    if (urgent) {
      searchText.push(<Text style={{ fontWeight: 'bold', padding: 0 }}>{'priority: '}</Text>);
      searchText.push(<Text>current, urgent;</Text>);
      priorityText = 'current, urgent;';
    } else if (current) {
      if (notUrgent) {
        searchText.push(<Text style={{ fontWeight: 'bold' }}>{'priority: '}</Text>);
        searchText.push(<Text>current, not urgent;</Text>);
        priorityText = 'current, not urgent;';
      } else {
        searchText.push(<Text style={{ fontWeight: 'bold' }}>{'priority: '}</Text>);
        searchText.push(<Text>current;</Text>);
        priorityText = 'current;';
      }
    }
    if (notCurrent) {
      searchText.push(<Text style={{ fontWeight: 'bold' }}>{'priority: '}</Text>);
      searchText.push(<Text>{'not current, not urgent; '}</Text>);
      priorityText = 'not current, not urgent;';
    } else if (!current && notUrgent) {
      searchText.push(<Text style={{ fontWeight: 'bold' }}>{'priority: '}</Text>);
      searchText.push(<Text>not urgent;</Text>);
      priorityText = 'not urgent;';
    }
    if (current || urgent || notCurrent || notUrgent) {
      threeLineSearchText.push(
        <View style={styles.threeLineSummary}>
          <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
            {' '}
            {'priority: '}
          </Text>
          <Text style={{ padding: 0 }}>
            {' '}
            {priorityText}
          </Text>
        </View>,
      );
    }

    setThreeLineDiv(threeLineSearchText);

    if ((value.length > 0
      || title.length > 0 || current || urgent || notCurrent || notUrgent) && !showSearch) {
      setShowSearchText(true);
    } else {
      setShowSearchText(false);
    }
    if (value.length > 0
      || title.length > 0 || current || urgent || notCurrent || notUrgent) {
      setDisableReset(false);
    } else {
      setDisableReset(true);
    }
  }, [title, value, current, urgent, notCurrent, notUrgent, collections, showSearch]);
  Object.size = function (obj) {
    let size = 0;
    Object.keys(obj).forEach(() => {
      size += 1;
    });
    if (size === 1) {
      return ('1 Result');
    }
    return (`${size.toString()} Results`);
  };

  function reset() {
    onChangeTitle('');
    urgentSelection(false);
    currentSelection(false);
    setNotCurrent(false);
    setNotUrgent(false);
    setValue([]);
  }
  useEffect(() => { setOpen(false); }, [title, showSearch]);
  return (

    <SafeAreaView style={[styles.safeAreaView]}>
      {/* onPress={() => setShowSearch(!showSearch)}

      <TouchableOpacity
      style={styles.expandIcon}

      > */}

      <View style={styles.root}>
        <View style={styles.dateRangeContainer}>

          <Left>
            {!disableReset
            && (
            <Button
              style={styles.reset_button}
              color={Colors.destructive}
              mode="text"
              onPress={reset} /* eslint-disable-line react/jsx-no-bind */
            >
              RESET
            </Button>
            )}

          </Left>
          <TouchableOpacity onPress={() => setShowSearch(!showSearch)}>
            <View><Text style={styles.dash}>Search Collections</Text></View>
          </TouchableOpacity>

          <Right onPress={() => setShowSearch(!showSearch)}>
            <TouchableOpacity
              style={styles.leftRightPadding}
              onPress={() => setShowSearch(!showSearch)}
            >

              <Ionicons
                name={showSearch ? 'chevron-up' : 'chevron-down'}
                size={24}
                color={Colors.expandTimeline}
              />
            </TouchableOpacity>

          </Right>

        </View>
      </View>
      {/* </TouchableOpacity> */}

      {showSearch

    && (
    <KeyboardAvoidingView style={[styles.searchItemsDiv, styles.zindex]}>

      <View style={styles.searchBoxDiv}>

        <View style={styles.textInputContainer}>

          <TextInput
            onTouchStart={() => setOpen(false)}
            style={styles.textInput}
            value={title}
            onChangeText={onChangeTitle}
            placeholder="search Collections' names and purposes"
            placeholderTextColor="#777777"
            autoFocus
          />
        </View>
      </View>

      { // <View style={styles.dropDown}>
        // <Text style={styles.dropDowntextInstructions}>Specify tags
        // that Collections must include</Text>

        // </View>
      }

      <Picker
        multiple
        min={0}
        max={5}
        open={open}
        value={value}
        setOpen={setOpen}
        setValue={setValue}
        items={items}
        setItems={setItems}
        searchable
        placeholder="specify tags that Collections must include"
      />

      <View>
        <Text style={styles.switchTextInstructions}>Collection must be</Text>

        <View style={styles.switchRow}>
          <View style={styles.setChipWidth} />
          <View style={styles.currentPadding}>
            <Chip
              style={[styles.button, (urgent || current) ? styles.selected : null]}
              disabled={(notCurrent)}
              selected={urgent || current}
              onPress={() => currentSelection(!current)}
            >
              Current
            </Chip>
          </View>
          <View style={styles.urgentPadding}>

            <Chip
              style={[styles.button, (urgent) ? styles.selected : null]}
              disabled={(notCurrent || notUrgent)}
              selected={urgent}
              onPress={() => urgentSelection(!urgent)}
            >
              Urgent
            </Chip>
          </View>

        </View>
        <View style={styles.switchRow}>
          <View style={styles.setChipWidth} />

          <View style={styles.notCurrentPadding}>
            <Chip
              style={[styles.button, (notCurrent) ? styles.selected : null]}
              disabled={(current || urgent)}
              selected={notCurrent}
              onPress={() => setNotCurrent(!notCurrent)}
            >
              Not Current
            </Chip>
          </View>

          <View style={styles.notUrgentPadding}>
            <Chip
              style={[styles.button, (notUrgent || notCurrent) ? styles.selected : null]}
              disabled={(urgent)}
              selected={(notUrgent || notCurrent)}
              onPress={() => setNotUrgent(!notUrgent)}
            >
              Not Urgent
            </Chip>
          </View>

        </View>
      </View>

    </KeyboardAvoidingView>
    )}
      {/** <View  style = {(showSearchText)? styles.searchSummary : {display: 'none'}}>
      {showSearchText && tempSearchText}
    </View>* */}

      <View style={(showSearchText) ? styles.threeLineSummaryDiv : { display: 'none' }}>
        {showSearchText && threeLineDiv}
      </View>
      <View style={(!disableReset) ? styles.numResultsView : { display: 'none' }}>
        <Text style={styles.dash}>{ Object.size(collectionsList)}</Text>
      </View>

      <TouchableWithoutFeedback onPress={() => setOpen(false)}>

        <ScrollView
          contentContainerStyle={styles.collectionRowContainer}
          keyboardShouldPersistTaps="handled"
        >
          {Object.entries(collectionsList).map(([id, { label }]) => (
            <CollectionRow
              key={id}
              collectionId={id}
              label={label}
              navigation={navigation}
            />
          ))}

        </ScrollView>
      </TouchableWithoutFeedback>

    </SafeAreaView>
  );
}

Source File: CollectionInputScreen.js From discovery-mobile-ui with MIT License

4 votes

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>
  );
}

Source File: NotesScreen.js From discovery-mobile-ui with MIT License

4 votes

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>
  );
}

Source File: Login.js From expo-ticket-app with MIT License

4 votes

render () {
        const { loading, error, success } = this.props;
        const { email } = this.state;

        return (
            <KeyboardAvoidingView
                style={{ backgroundColor: commonColor.backgroundColor, flex: 1 }}
                behavior={(Platform.OS === 'ios') ? 'padding' : null}
                enabled
                keyboardVerticalOffset={Platform.select({ ios: 80, android: 500 })}>
                <StatusBar style="light"/>
                <ScrollView>
                    <Container style={{ backgroundColor: commonColor.backgroundColor }}>
                        <Content padder>
                            <Spacer size={60}/>
                            <Text style={{
                                flex: 1,
                                fontSize: 75,
                                fontWeight: '400',
                                fontFamily: 'Montserrat_Bold',
                                color: 'white',
                                textAlign: 'center',
                            }}>
                                {'H2T.'}
                            </Text>
                            <Spacer size={60}/>
                            <Card style={{ backgroundColor: commonColor.backgroundColor }}>
                                {error && <View style={{ margin: 10 }}><Messages message={error}/></View>}
                                {success &&
                                <View style={{ margin: 10 }}><Messages type="success" message={success}/></View>}
                                <Form>
                                    <Item floatingLabel style={{ margin: 15 }}>
                                        <Label style={{
                                            color: '#fff',
                                            fontFamily: 'Montserrat',
                                        }}>{i18n.t('login.fields.email')}</Label>
                                        <Input
                                            style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                            autoCapitalize="none"
                                            value={email}
                                            keyboardType="email-address"
                                            disabled={loading}
                                            returnKeyType={'next'}
                                            onChangeText={v => this.handleChange('email', v)}
                                            onSubmitEditing={() => { this.focusTheField('field2'); }}
                                            blurOnSubmit={false}
                                        />
                                    </Item>
                                    <Item floatingLabel style={{ margin: 15 }}>
                                        <Label style={{
                                            color: '#fff',
                                            fontFamily: 'Montserrat',
                                        }}>{i18n.t('login.fields.password')}</Label>
                                        <Input
                                            getRef={input => { this.inputs['field2'] = input; }}
                                            style={{ color: '#fff', fontFamily: 'Montserrat' }}
                                            secureTextEntry
                                            disabled={loading}
                                            returnKeyType={'go'}
                                            onChangeText={v => this.handleChange('password', v)}
                                            onSubmitEditing={this.handleSubmit}
                                        />
                                    </Item>

                                    <Spacer size={20}/>

                                    <ButtonH2t text={'login.connect'} loading={loading} onPress={this.handleSubmit}/>
                                </Form>
                                <ListItem onPress={Actions.forgotPassword} icon>
                                    <Left>
                                        <Icon style={{ color: 'white' }} name="help-buoy"/>
                                    </Left>
                                    <Body style={{ borderBottomWidth: 0 }}>
                                        <TextI18n style={{ color: 'white' }}>
                                            login.forgotPassword
                                        </TextI18n>
                                    </Body>
                                </ListItem>
                            </Card>
                        </Content>
                    </Container>
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }

Source File: Profile.js From expo-ticket-app with MIT License

4 votes

Profile = ({ member, logout, switchLanguage }) => (
    <Container style={{ backgroundColor: commonColor.backgroundColor }}>
        <StatusBar style="light"/>
        <Content>
            <Spacer size={50}/>
            <List>
                {(member && member.email) ? (
                    <View>
                        <Content padder>
                            <Header
                                title={`${member.firstName}`}
                                content={`${i18n.t('profile.connectWith')} : ${member.email}`}
                            />
                        </Content>
                        <ListItem onPress={switchLanguage} icon>
                            <Left>
                                <Icon style={{ color: '#fff' }} name="language"
                                      type="MaterialIcons"/>
                            </Left>
                            <Body style={{
                                flexDirection: 'row',
                                justifyContent: 'flex-start',
                                alignItems: 'center',
                            }}>
                                <TextI18n>
                                    global.currentLanguage
                                </TextI18n>
                                <TextH2t style={{ fontSize: 20, marginRight: 20 }}>
                                    {member.locale === 'fr' && 'Fr ??'}
                                    {member.locale === 'en' && 'En ??'}
                                </TextH2t>
                            </Body>
                        </ListItem>
                        <ListItem onPress={Actions.updateProfile} icon>
                            <Left>
                                <Icon style={{ color: '#fff' }} name="person-add"/>
                            </Left>
                            <Body>
                                <TextI18n>profile.myAccount</TextI18n>
                            </Body>
                        </ListItem>
                        <ListItem onPress={logout} icon>
                            <Left>
                                <Icon style={{ color: '#fff' }} name="power"/>
                            </Left>
                            <Body>
                                <TextI18n>profile.logout</TextI18n>
                            </Body>
                        </ListItem>
                        <Spacer size={20}/>
                        {member.role && member.role.toLowerCase().includes('admin') &&
                        <ListItem onPress={Actions.scan} icon>
                            <Left>
                                <Icon style={{ fontSize: 23, color: '#fff' }} type="AntDesign" name="scan1"/>
                            </Left>
                            <Body>
                                <TextI18n>profile.scan</TextI18n>
                            </Body>
                        </ListItem>}
                    </View>
                ) : (
                    <View>
                        <Spacer size={40}/>
                        <ListItem onPress={switchLanguage} icon>
                            <Left>
                                <Icon style={{ color: '#fff' }} name="language"
                                      type="MaterialIcons"/>
                            </Left>
                            <Body style={{
                                flexDirection: 'row',
                                justifyContent: 'flex-start',
                                alignItems: 'center',
                                borderBottomWidth: 0,
                            }}>
                                <TextI18n>
                                    global.currentLanguage
                                </TextI18n>
                                <TextH2t style={{ fontSize: 20, marginRight: 20 }}>
                                    {member.locale === 'fr' ? 'Fr ??' : 'En ??'}
                                </TextH2t>
                            </Body>
                        </ListItem>
                        <CardH2t
                            source={require('../../../images/Events/account.jpg')}
                            onPress={Actions.login}
                            text1="login.connect"
                            text2="login.connectText"
                        />
                        <CardH2t
                            source={require('../../../images/Events/signIn.jpg')}
                            onPress={Actions.signUp}
                            text1="login.signUp"
                            text2="login.signUpText"
                        />
                        <Spacer size={80}/>
                    </View>
                )}
            </List>
        </Content>
    </Container>
)

native-base#Left JavaScript Examples