native-base Right 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

OrderList = ({ orders, onSelectOrder }) => {

    function onPress(orderId) {
        if (onSelectOrder) {
            onSelectOrder(orderId);
        }
    }

    const ordersByDay = _.groupBy(orders, order => moment(order.createdAt).format('YYYY-MM-DD'));
    const days = _.keys(ordersByDay);
    const ordersByDayList = days.map(day => {
        const sorted = ordersByDay[day].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
        const orderList = sorted.map(order => (
            <ListItem thumbnail button key={order.id} onPress={() => onPress(order.id)}>
                <Body>
                    <Text style={styles.orderTitle}>
                        {moment(order.createdAt).format('hh:mm A')}
                    </Text>
                    <Text note>{order.id}</Text>
                </Body>
                <Right>
                    <Text note>
                        ${order.total.toFixed(2)}
                    </Text>
                    <Icon name="arrow-forward" />
                </Right>
            </ListItem>
        ));

        const sectionTitle = (
            <ListItem itemDivider key={day}>
                <Text>{moment(day).format('MMM Do, YYYY')}</Text>
            </ListItem>
        );
        
        return [sectionTitle, ...orderList];
    });

    return (
        <List>
            {ordersByDayList}
        </List>
    );
}

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: index.js From pandoa with GNU General Public License v3.0

5 votes

function WarningList({ navigation, setDetailTrigger, warnings }) {
  const filteredWarnings = warnings.filter(
    e => e.matches && e.matches.length >= 1
  );
  if (filteredWarnings.length === 0) {
    return (
      <View style={styles.introWrapper}>
        <SoapImage width={220} style={styles.image} />
        <Text style={styles.title}>No warning</Text>
        <Text style={styles.subTitle}>
          There is currently no contact reported.
        </Text>
      </View>
    );
  }

  return (
    <List>
      {filteredWarnings.map((e, i) => {
        const geocode =
          e.position.geocode && e.position.geocode[0]
            ? e.position.geocode[0]
            : {};
        return (
          <ListItem key={i} onPress={() => setDetailTrigger(e)}>
            <Body>
              <Text>{e.title}</Text>
              <Text numberOfLines={1} style={styles.date}>
                {new Date(e.position.time).toLocaleDateString("de-DE", options)}
              </Text>
              <Text note style={styles.location}>
                {geocode.name}, {geocode.postalCode} {geocode.city}
              </Text>
              <Text note style={styles.time}>
                {e.matches &&
                  e.matches.length >= 1 &&
                  contactLengthText(e.duration)}
              </Text>
            </Body>
            <Right>
              <Text
                style={[
                  styles.right,
                  {
                    color:
                      e.duration > 10
                        ? commonColor.brandDanger
                        : commonColor.brandWarning
                  }
                ]}
              >
                {e.matches &&
                  e.matches.length >= 1 &&
                  contactLengthText(e.duration, "short")}
              </Text>
            </Right>
          </ListItem>
        );
      })}
    </List>
  );
}

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

native-base#Right JavaScript Examples