Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onPressEvent not working properly #1017

Open
Featuredutka opened this issue Feb 13, 2024 · 0 comments
Open

onPressEvent not working properly #1017

Featuredutka opened this issue Feb 13, 2024 · 0 comments

Comments

@Featuredutka
Copy link

Featuredutka commented Feb 13, 2024

I have created two custom event renderers for my component

For month view:

const renderMonthCircular = (data) => {
    if (data.name === events[0].name){
      return (
        <View style={{
          backgroundColor:theme.colors.primary, 
          borderRadius:10, 
          marginTop:'5%',
          height:'70%',
          alignContent:'center',
          alignItems:'center',
          justifyContent:'center'
        }}>
          <Text style={{
            color:'white'
          }}>Termine heute - {events.length}</Text>
        </View>
        )
    }
    return null
  }

For day view:

const renderDay = (data) => {
      console.log(data.end)
      return (
        <TouchableOpacity>
        <Container fluid>
          <View style={{
            backgroundColor:theme.colors.primary, 
            borderRadius:10, 
            // marginTop:'5%',
            height:70,
            alignContent:'center',
            alignItems:'center',
            justifyContent:'center',
            flexDirection:'row'
          }}>
            <Col sm={2}>
              <View style={{flexDirection:'column', justifyContent:'center', alignItems:'center', height:'100%'}}>
                <Text style={{color: '#ffffff', fontSize: 12}}>
                  {dayjs(data.start).format('HH:mm') + ' - ' +  dayjs(data.end).format('HH:mm')}
                </Text>
              </View>
            </Col>

            <Col sm={7}>
              <View style={{flexDirection:'column', justifyContent:'center', alignItems:'center', height:'100%', justifyContent:'space-evenly'}}>
                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={12}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.NAME1}
                    </Text>
                  </Col>
                </View>

                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={6}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.EBELN}
                    </Text>
                  </Col>

                  <Col sm={3}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.ZHOLZ}
                    </Text>
                  </Col>

                  <Col sm={3}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.FM + ' FM'}
                    </Text>
                  </Col>
                </View>

              
                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={6}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      Auftragsnummer
                    </Text>
                  </Col>

                  <Col sm={3}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.LOSNR}
                    </Text>
                  </Col>
                </View>
              </View>
            </Col>

            <Col sm={3}>
              <View style={{flexDirection:'column', justifyContent:'center', alignItems:'center', height:'100%', justifyContent:'space-evenly'}}>
                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={12}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.REVIER}
                    </Text>
                  </Col>
                </View>

                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={12}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                      {data.common.STK + ' Stk.'}
                    </Text>
                  </Col>
                </View>

                <View style={{flexDirection:'row', justifyContent:'flex-start', width:'100%'}}>
                  <Col sm={12}>
                    <Text style={{color: '#ffffff', fontSize: 12}}>
                    </Text>
                  </Col>
                </View>
              </View>
            </Col>
          </View>
        </Container> 
        </TouchableOpacity>
        
      )
  }

The Calendar component should render elements and choose onEventPress action based on current active view - I am using state to manage that.

Surprisingly enough only the monthly onEventPress works - no matter how I change the structure of the returned daily component - onPress is not doing anything at all - even if I make those custom events identical

Could you please explain if there's a misnderstanding about Calendar component functionality from my side or some kind of error

Calendar component code:

                <Calendar
                    hourRowHeight={50}
                    swipeEnabled={false}
                    renderEvent={
                        calendar_view === 'month' ? renderMonthCircular : 
                        calendar_view === 'day' || calendar_view === 'schedule' ? renderDay : null
                    }
                    style={{
                      flexDirection: 'row',
                    }}
                    locale="de"
                    onPressEvent={calendar_view !== 'month' ? 

                    (event) => {
                      console.log('event fired', event)
                      let transfer_uid = event.uid;
                      props.navigation.navigate('Home', {
                        json_data,
                        angnummer: transfer_uid,
                        lieferant: '',
                        date: '',
                        status: 'all',
                        refresh_block: refresh_block,
                        setRefBlock: setRefBlock,
                        filtered_termin: 1,
                        postfilter_list: [event.name],
                        sync_date
                      });
                    }

                    :

                    (event)=> {
                      console.log(event.start)
                      setCalendarView('day');
                      setTDate(dayjs(event.start));
                      setHeaderDate(
                        dayjs(event.start).format('dddd, DD.MM.YYYY'),
                      );
                      forceUpdate();
                    }
                  }
                    
                    onPressCell={date => {
                      if (calendar_view === 'month') {
                        setCalendarView('day');
                        setTDate(dayjs(date));
                        setHeaderDate(
                          dayjs(date).format('dddd, DD.MM.YYYY'),
                        );
                        forceUpdate();
                      }
                    }}
                    showAllDayEventCell={true}
                    events={events}
                    mode={calendar_view}
                    weekStartsOn={1}
                    height={calendarUpdateHeight()}
                    sortedMonthView={false}
                    showTime={true}
                    date={transfer_date === '' ? dayjs() : transfer_date} // To switch to current date
                    // hourRowHeight={30}
                    theme={{
                      palette: {
                        primary: {
                          main: theme.colors.primary,
                          contrastText: '#fff',
                        },
                      },
                    }}
                    headerContainerStyle={[
                      calendar_view === 'day' ? {display: 'none'} : '',
                      calendar_view === 'month'
                        ? {
                            width: '100%',
                          }
                        : '',
                    ]}
                    bodyContainerStyle={
                      calendar_view === 'month'
                        ? {
                            width: '100%',
                          }
                        : ''
                    }
                    hourStyle={{
                      fontSize: 16,
                    }}
                    dayHeaderStyle={{
                      fontSize: 36,
                    }}
                    dayHeaderHighlightColor={theme.colors.primary}
                  />

EDIT - While in my case it is not painful to migrate all onPressEvent functionality to the TouchableOpacity onPress method I am still curious why it does not work)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant