react-native-paper#Chip JavaScript Examples

function CustomChip({label,onPress}) {
  return <Chip style={{margin:4}} mode="outlined" textStyle={font()} onPress={onPress}>{label}</Chip>
}

AutoFillMS = (props) => {
  const [fields, setFields] = useState([]);
  const [query, setQuery] = useState('');
  const [values, setValues] = useState(null);
  const [selectedValues, setSelectedValues] = useState([]);

  useEffect(() => {
    const { parameter } = props;
    async function fetchAutofill() {
      return getData('autofill_information');
    }
    fetchAutofill().then((data) => {
      const result = data[parameter];
      setFields(result.sort());
      setValues(result.length > 0);
    });
  }, []);

  const findField = () => {
    if (query === '') {
      return [];
    }
    const regex = new RegExp(`${query.trim()}`, 'i');
    return fields.filter((field) => field.search(regex) >= 0);
  };

  const fieldz = findField(query);
  const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();
  const {
    label, translatedLabel, formikProps, formikKey, scrollViewScroll, setScrollViewScroll
  } = props;

  const placeholder = I18n.t(label);

  return (
    <View style={styles.container}>
      <View style={styles.chipRow}>
        {selectedValues.map((item) => (
          <TouchableOpacity
            key={item}
            style={styles.chip}
            onPress={() => {
              const arr = selectedValues.filter((itm) => itm !== item);
              setSelectedValues(arr);
              formikProps.setFieldValue(formikKey, arr);
            }}
          >
            <Chip key={item}>
              {item}
            </Chip>
          </TouchableOpacity>
        ))}
      </View>
      {!values && (
        <TextInput
          label={translatedLabel.length > 40 ? '' : translatedLabel}
          onChangeText={formikProps.handleChange(formikKey)}
          onBlur={formikProps.handleBlur(formikKey)}
          mode="outlined"
          theme={stylesPaper}
          style={stylesDefault.label}
        />
      )}
      {values && Platform.OS === 'ios' && (
        <View>
          <Autocomplete
            autoCapitalize="none"
            autoCorrect={false}
            containerStyle={styles.autocompleteContainer}
            inputContainerStyle={styles.textInputContainer}
            data={fieldz.length === 1 && comp(query, fieldz[0]) ? [] : fieldz}
            defaultValue={query}
            onChangeText={(text) => {
              setQuery(text);
            }}
            placeholder={placeholder}
            placeholderTextColor="black"
            listStyle={styles.listContainer}
            keyExtractor={() => uuid.v4()}
            onStartShouldSetResponderCapture={() => {
              setScrollViewScroll(false);
              if (fieldz.length === 0
                    && scrollViewScroll === false) {
                setScrollViewScroll(true);
              }
            }}
            renderItem={({ item }) => (
              <TouchableOpacity
                key={`${item}`}
                onPress={() => {
                  setQuery(item);
                  selectedValues.push(item);
                  setSelectedValues([...new Set(selectedValues)]);
                  formikProps.setFieldValue(formikKey, selectedValues);
                  setQuery('');
                }}
              >
                <Text style={styles.itemText} key={item}>
                  {item}
                </Text>
              </TouchableOpacity>
            )}
          />
        </View>
      )}
      {values && Platform.OS === 'android' && (
        <View>
          <Autocomplete
            autoCapitalize="none"
            autoCorrect={false}
            containerStyle={styles.autocompleteContainer}
            inputContainerStyle={styles.textInputContainer}
            data={fieldz.length === 1 && comp(query, fieldz[0]) ? [] : fieldz}
            defaultValue={query}
            onChangeText={(text) => {
              setQuery(text);
            }}
            placeholder={placeholder}
            placeholderTextColor="black"
            listStyle={styles.listContainer}
            keyExtractor={() => uuid.v4()}
            renderItem={({ item }) => (
              <TouchableOpacity
                key={`${item}`}
                onPress={() => {
                  setQuery(item);
                  selectedValues.push(item);
                  setSelectedValues([...new Set(selectedValues)]);
                  formikProps.setFieldValue(formikKey, selectedValues);
                  setQuery('');
                }}
              >
                <Text style={styles.itemText} key={item}>
                  {item}
                </Text>
              </TouchableOpacity>
            )}
          />
        </View>
      )}
    </View>
  );
}

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