react-native-gesture-handler#RectButton JavaScript Examples

export function TapField({
  value,
  children,
  disabled,
  rightContent,
  style,
  textStyle,
  onTap
}) {
  return (
    <RectButton
      onPress={!disabled && onTap}
      style={{ backgroundColor: 'white' }}
      activeOpacity={0.05}
    >
      <View
        style={[
          valueStyle,
          { flexDirection: 'row', alignItems: 'center' },
          disabled && { backgroundColor: colors.n11 },
          style
        ]}
      >
        {children ? (
          children
        ) : (
          <Text style={[{ flex: 1 }, textStyle]}>{value}</Text>
        )}
        {!disabled && rightContent}
      </View>
    </RectButton>
  );
}

function File({ file, showActionSheetWithOptions, onSelect, onDelete }) {
  return (
    <ListItem
      style={{
        paddingHorizontal: 0,
        alignItems: 'stretch',
        flexDirection: 'column'
      }}
    >
      <RectButton onPress={onSelect}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 15,
            height: ROW_HEIGHT
          }}
        >
          <FileIcon state={file.state} />
          <Text
            style={[
              styles.text,
              { flex: 1, marginLeft: 7 },
              file.state === 'broken' && { color: colors.n7 }
            ]}
          >
            {file.name}
          </Text>
          <DetailsButton
            file={file}
            showActionSheetWithOptions={showActionSheetWithOptions}
            onDelete={() => onDelete(file)}
          />
        </View>
      </RectButton>
    </ListItem>
  );
}

function OptionButton({ icon, label, onPress, isLastOption }) {
  return (
    <RectButton
      style={[styles.option, isLastOption && styles.lastOption]}
      onPress={onPress}
    >
      <View style={{ flexDirection: "row" }}>
        <View style={styles.optionIconContainer}>
          <Ionicons name={icon} size={22} color="rgba(0,0,0,0.35)" />
        </View>
        <View style={styles.optionTextContainer}>
          <Text style={styles.optionText}>{label}</Text>
        </View>
      </View>
    </RectButton>
  );
}

render() {
    const { textStyle, style, focusedStyle, buttonProps } = this.props;
    const { focused } = this.state;

    return (
      <View testID="scroll-to-boundary">
        <AmountInputWithContext
          {...this.props}
          ref={el => (this.amount = el)}
          onBlur={this.onBlur}
          focused={focused}
          style={[
            {
              width: 80,
              transform: [{ translateX: 6 }],
              justifyContent: 'center'
            },
            style,
            focusedStyle,
            !focused && {
              opacity: 0,
              position: 'absolute',
              top: 0
            }
          ]}
          textStyle={[{ fontSize: 15, textAlign: 'right' }, textStyle]}
        />

        <RectButton
          onPress={this.onFocus}
          hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }}
          {...buttonProps}
          style={[
            buttonProps && buttonProps.style,
            focused && { display: 'none' }
          ]}
        >
          <View
            style={[
              {
                borderBottomWidth: 1,
                borderColor: '#e0e0e0',
                justifyContent: 'center',
                transform: [{ translateY: 0.5 }]
              },
              style
            ]}
          >
            <Text style={[{ fontSize: 15 }, textStyle]}>
              {amountToCurrency(this.props.value)}
            </Text>
          </View>
        </RectButton>
      </View>
    );
  }

function AccountRoutes() {
  return (
    <AccountsStack.Navigator>
      <AccountsStack.Screen
        name="Accounts"
        component={Accounts}
        options={({ navigation }) => ({
          headerStyle: {
            backgroundColor: colors.b2
          },
          headerTintColor: '#fff',
          headerRight: () => (
            <Button
              bare
              style={{ padding: 10, backgroundColor: 'transparent' }}
              onPress={() => navigation.navigate('AddAccountModal')}
            >
              <Add width={20} height={20} style={{ color: 'white' }} />
            </Button>
          )
        })}
      />
      <AccountsStack.Screen
        name="Account"
        component={Account}
        options={({ route, navigation }) => ({
          title: route.params.title || 'Account',
          headerShadowVisible: false,
          headerRight: () => (
            <RectButton
              onPress={() => {
                navigation.navigate('Transaction', {
                  transactions: null,
                  accountId: route.params.id
                });
              }}
              style={{ padding: 10 }}
            >
              <Add width={20} height={20} color={colors.p4} />
            </RectButton>
          )
        })}
      />
    </AccountsStack.Navigator>
  );
}

render() {
    let { navigation } = this.props;
    let { name, balance, offbudget, type } = this.state;

    return (
      <Modal
        title="Add an account"
        rightButton={<CloseButton navigation={navigation} />}
      >
        <FieldLabel title="Name" style={{ marginTop: 15 }} />
        <InputField
          value={name}
          onChange={e => this.onChange('name', e.nativeEvent.text)}
          onSubmitEditing={this.onAdd}
          autoFocus
        />

        <FieldLabel title="Balance" />
        <InputField
          value={balance}
          onChange={e => this.onChange('balance', e.nativeEvent.text)}
          onSubmitEditing={this.onAdd}
          placeholder="0"
          keyboardType="numeric"
        />

        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View style={{ flex: 1 }}>
            <FieldLabel title="Type" />
            <RectButton
              onPress={this.selectType}
              style={{
                marginLeft: EDITING_PADDING,
                backgroundColor: 'white',
                height: FIELD_HEIGHT,
                justifyContent: 'center',
                paddingHorizontal: 15,
                borderColor: colors.n9,
                borderWidth: 1,
                borderRadius: 4
              }}
            >
              <Text style={!type && { color: '#b0b0b0' }}>
                {type ? getTypeLabel(type) : 'Checking'}
              </Text>
            </RectButton>
          </View>

          <View style={{ marginHorizontal: 30 }}>
            <FieldLabel title="Off budget" />
            <BooleanField
              value={offbudget}
              onUpdate={value => this.onChange('offbudget', value)}
            />
          </View>
        </View>

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'flex-end',
            padding: 15,
            marginTop: 5
          }}
        >
          <Button
            style={{ marginRight: 10 }}
            onPress={() => navigation.goBack(null)}
          >
            Back
          </Button>
          <Button primary onPress={this.onAdd}>
            Add
          </Button>
        </View>
      </Modal>
    );
  }

export default function Account({ account, style, rightContent, onPress }) {
  return (
    <View
      style={[
        styles.shadow,
        {
          backgroundColor: 'white',
          marginBottom: 15,
          borderRadius: 6
        },
        style
      ]}
    >
      <RectButton onPress={onPress} style={{ borderRadius: 6 }}>
        <View
          style={[{ padding: 12, flexDirection: 'row', alignItems: 'center' }]}
        >
          <View style={{ flex: 1 }}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Text style={[styles.text, { fontWeight: '500' }]}>
                {account.name}
              </Text>
            </View>
            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
              <Text
                style={{ fontSize: 13, color: colors.n5, fontWeight: '500' }}
              >
                {prettyAccountType(
                  fromPlaidAccountType(account.type, account.subtype)
                )}
              </Text>
              <Text style={{ fontSize: 13, color: colors.n5, marginLeft: 3 }}>
                ...{account.mask}
              </Text>
            </View>
          </View>
          {rightContent}
        </View>
      </RectButton>
    </View>
  );
}

export function Account({
  account,
  updated,
  getBalanceQuery,
  index,
  onSelect
}) {
  return (
    <View
      style={{
        flexDirection: 'row',
        backgroundColor: 'white',
        marginHorizontal: 10,
        marginTop: 10,
        shadowColor: '#9594A8',
        shadowOffset: { width: 0, height: 1 },
        shadowRadius: 1,
        shadowOpacity: 1,
        borderRadius: 6
      }}
    >
      <RectButton
        onPress={() => onSelect(account.id)}
        activeOpacity={0.1}
        style={{
          flexDirection: 'row',
          flex: 1,
          alignItems: 'center',
          borderRadius: 6,
          paddingHorizontal: 16,
          paddingVertical: 15
        }}
      >
        <View style={{ flex: 1 }}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center'
            }}
          >
            <TextOneLine
              style={[
                styles.text,
                {
                  fontSize: 17,
                  fontWeight: '600',
                  color: updated ? colors.b2 : colors.n2,
                  paddingRight: 30
                }
              ]}
            >
              {account.name}
            </TextOneLine>
            {account.bankId && (
              <View
                style={{
                  backgroundColor: colors.g5,
                  marginLeft: -23,
                  width: 8,
                  height: 8,
                  borderRadius: 8
                }}
              />
            )}
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginTop: 4
            }}
          >
            <Text
              style={[
                styles.text,
                { fontSize: 13, lineHeight: 13, color: colors.n5 }
              ]}
            >
              {prettyAccountType(account.type)}
            </Text>
            <Wallet
              style={{
                width: 15,
                height: 15,
                color: colors.n9,
                marginLeft: 8,
                marginBottom: 2
              }}
            />
          </View>
        </View>
        <CellValue
          binding={getBalanceQuery(account)}
          type="financial"
          style={{ fontSize: 16, color: colors.n3 }}
          getStyle={value => value < 0 && { color: colors.r4 }}
        />
      </RectButton>
    </View>
  );
}

render() {
    let { group, editMode, onAddCategory } = this.props;

    let content = (
      <ListItem
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          backgroundColor: colors.n11
        }}
        data-testid="totals"
      >
        <View style={{ flex: 1 }}>
          <Text
            style={[styles.smallText, { fontWeight: '500' }]}
            data-testid="name"
          >
            {group.name}
          </Text>
        </View>
        <Animated.View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            opacity: this.animation
          }}
        >
          <CellValue
            binding={rolloverBudget.groupBudgeted(group.id)}
            style={[
              styles.smallText,
              { width: 90, fontWeight: '500', textAlign: 'right' }
            ]}
            type="financial"
          />
          <CellValue
            binding={rolloverBudget.groupBalance(group.id)}
            style={[
              styles.smallText,
              { width: 90, fontWeight: '500', textAlign: 'right' }
            ]}
            type="financial"
          />
        </Animated.View>

        {editMode && (
          <Animated.View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              opacity: this.opacity,
              position: 'absolute',
              top: 0,
              bottom: 0,
              right: this.animation.interpolate({
                inputRange: [0, 1],
                outputRange: [5, -30]
              })
            }}
          >
            <RectButton
              onPress={() => onAddCategory(group.id)}
              style={{ padding: 10 }}
            >
              <Add width={15} height={15} color={colors.n1} />
            </RectButton>
          </Animated.View>
        )}
      </ListItem>
    );

    if (!editMode) {
      return content;
    }

    return (
      <Droppable
        type="category"
        getActiveStatus={(x, y, { layout }, { id }) => {
          return 'bottom';
        }}
        onDrop={(id, type, droppable, status) =>
          this.props.onReorderCategory(id, { inGroup: group.id })
        }
      >
        {() => content}
      </Droppable>
    );
  }

render() {
    const {
      children,
      pressed,
      primary,
      hover,
      bare,
      style,
      contentStyle,
      textStyle,
      disabled,
      onPress,
      hitSlop = { top: 5, left: 5, bottom: 5, right: 5 },
      ...nativeProps
    } = this.props;

    // This sucks. Unfortunatey RNGH's RectButton does not properly
    // implement all the style props. border and padding do not work
    // on Android, which means we need to use an inner View for that.
    // We apply the user style on the inner view, but we need to apply
    // the margin on the outer view so we strip it off. It's annoying,
    // and hopefully RectButton will be fixed in the future.

    return (
      <RectButton
        onPress={onPress}
        hitSlop={hitSlop}
        style={[
          { overflow: 'visible', borderRadius: 4 },
          {
            backgroundColor: bare
              ? 'transparent'
              : primary
              ? disabled
                ? colors.n6
                : colors.p5
              : 'white',
            alignItems: 'stretch',
            justifyContent: 'center'
          },
          style
        ]}
        disabled={disabled}
        {...nativeProps}
      >
        <View
          style={[
            {
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              borderWidth: bare ? 0 : 1,
              borderColor: primary ? colors.p5 : colors.n9,
              borderRadius: 4
            },
            !bare && {
              paddingVertical: 8,
              paddingHorizontal: 20
            },
            contentStyle
          ]}
        >
          {typeof children === 'string' ? (
            <Text
              style={[
                {
                  color: primary ? 'white' : disabled ? colors.n6 : colors.n1,
                  fontSize: 16
                },
                textStyle
              ]}
            >
              {children}
            </Text>
          ) : (
            children
          )}
        </View>
      </RectButton>
    );
  }

render() {
    const {
      transaction,
      accounts,
      categories,
      payees,
      showCategory,
      added,
      onSelect,
      style
    } = this.props;
    let {
      id,
      payee: payeeId,
      amount,
      category,
      cleared,
      is_parent,
      notes,
      schedule
    } = transaction;
    let categoryName = category ? lookupName(categories, category) : null;

    let payee = payees && payeeId && getPayeesById(payees)[payeeId];
    let transferAcct =
      payee &&
      payee.transfer_acct &&
      getAccountsById(accounts)[payee.transfer_acct];

    let prettyDescription = getDescriptionPretty(
      transaction,
      payee,
      transferAcct
    );
    let prettyCategory = transferAcct
      ? 'Transfer'
      : is_parent
        ? 'Split'
        : categoryName;

    let isPreview = isPreviewId(id);
    let textStyle = isPreview && {
      fontStyle: 'italic',
      color: colors.n5
    };
    let textStyleWithColor = [
      textStyle,
      isPreview && {
        color:
          notes === 'missed'
            ? colors.r6
            : notes === 'due'
              ? colors.y4
              : colors.n5
      }
    ];

    return (
      <RectButton
        onPress={() => onSelect(transaction)}
        style={{ backgroundColor: 'white' }}
        activeOpacity={0.1}
      >
        <ListItem
          style={[
            { flex: 1, height: 60 },
            isPreview && { backgroundColor: colors.n11 },
            style
          ]}
        >
          <View style={[{ flex: 1 }]}>
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              {schedule && (
                <ArrowsSynchronize
                  style={{
                    width: 12,
                    height: 12,
                    marginRight: 5,
                    color: textStyle.color || colors.n1
                  }}
                />
              )}
              <TextOneLine
                style={[
                  styles.text,
                  textStyle,
                  { fontSize: 14, fontWeight: added ? '600' : '400' },
                  prettyDescription === '' && {
                    color: colors.n6,
                    fontStyle: 'italic'
                  }
                ]}
              >
                {prettyDescription || 'Empty'}
              </TextOneLine>
            </View>
            {isPreview ? (
              <Status status={notes} />
            ) : (
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <CheckCircle1
                  style={{
                    width: 11,
                    height: 11,
                    color: cleared ? colors.g6 : colors.n8,
                    marginRight: 5
                  }}
                />
                {showCategory && (
                  <TextOneLine
                    style={{
                      fontSize: 11,
                      marginTop: 1,
                      fontWeight: '400',
                      color: prettyCategory ? colors.n3 : colors.p7,
                      fontStyle: prettyCategory ? null : 'italic',
                      textAlign: 'left'
                    }}
                  >
                    {prettyCategory || 'Uncategorized'}
                  </TextOneLine>
                )}
              </View>
            )}
          </View>
          <Text
            style={[
              styles.text,
              textStyle,
              { marginLeft: 25, marginRight: 5, fontSize: 14 }
            ]}
          >
            {integerToCurrency(amount)}
          </Text>
        </ListItem>
      </RectButton>
    );
  }

export default function GenericSearchableSelect({
  title,
  dataName,
  canAdd,
  formatItem,
  onSelect
}) {
  let [text, setText] = useState('');
  let inputRef = useRef(null);
  let scrollRef = useRef(null);

  let { data: allData } = useLiveQuery(
    queries[dataName] || throwError(new Error('Unknown data type: ' + dataName))
  );

  let data = useMemo(() => {
    if (allData) {
      let data = allData.filter(item => {
        if (text != '' && text != null) {
          return item.name.toLowerCase().includes(text.toLowerCase());
        }
        return item.name !== '';
      });

      if (canAdd) {
        data.unshift({ id: 'new', name: '' });
      }
      return data;
    }
    return allData;
  }, [allData, text, canAdd]);

  useEffect(() => {
    let list = scrollRef.current;
    if (list) {
      ACTScrollViewManager.activate(
        (list.getNode ? list.getNode() : list).getScrollableNode()
      );
    }

    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  let onFilter = text => {
    setText(text);
  };

  let renderItem = ({ item }) => {
    let isNew = item.id === 'new';

    if (isNew && text === '') {
      return null;
    }

    let display = formatItem ? formatItem(item) : item.name;

    return (
      <RectButton
        onPress={() => onSelect && onSelect(isNew ? 'new:' + text : item.id)}
        underlayColor="#f0f0f0"
        activeOpacity={1}
        style={{ backgroundColor: 'white' }}
      >
        <ListItem
          style={{
            backgroundColor: 'transparent',
            borderColor: '#e0e0e0'
          }}
        >
          {isNew ? (
            <>
              <Add
                width={10}
                height={10}
                style={{ color: colors.g3, marginRight: 5 }}
              />
              <Text style={[{ fontSize: 15, flex: 1, color: colors.g3 }]}>
                {'Create Payee ' + text}
              </Text>
            </>
          ) : typeof display === 'string' ? (
            <Text style={[{ fontSize: 15, flex: 1 }]}>{display}</Text>
          ) : (
            display
          )}
        </ListItem>
      </RectButton>
    );
  };

  return (
    <KeyboardAvoidingView>
      <FocusAwareStatusBar barStyle="light-content" />
      <View style={{ padding: 10 }}>
        <Text
          style={{
            textAlign: 'center',
            color: '#505050',
            marginBottom: 10,
            fontSize: 15,
            fontWeight: '600',
            marginVertical: 10
          }}
        >
          {title}
        </Text>
        <TextInput
          ref={inputRef}
          autoCorrect={false}
          blurOnSubmit={false}
          placeholder="Search"
          onChangeText={onFilter}
          style={{
            borderWidth: 1,
            borderColor: '#e0e0e0',
            padding: 5,
            backgroundColor: 'white',
            borderRadius: 4,
            fontSize: 15
          }}
        />
      </View>
      {data == null ? null : (
        <FlatList
          ref={scrollRef}
          data={data}
          renderItem={renderItem}
          keyboardShouldPersistTaps={true}
          automaticallyAdjustContentInsets={false}
          keyExtractor={item => item.id}
          style={{ flex: 1 }}
        />
      )}
    </KeyboardAvoidingView>
  );
}