v5.5 react,
Would be good to see live example or minimal JSFiddle with the issue to see the relevant code
1 Like
Hi, my code =>
<Page ptr infinite
noSwipeback
ptrMousewheel={true}
infiniteDistance={50}
infinitePreloader={this.state.showPreloader}
onInfinite={this.loadMore.bind(this)}
onPtrRefresh={(done) => this.refresh(done, true)}
hideNavbarOnScroll
hideToolbarOnScroll
style={{background: "#f8f9ff"}}
>
<Toolbar tabbar labels bottom className='toolbar-navi' noHairline>
<Link tabLink='#' onClick={() => this.$f7router.navigate("/", { animate: false })} text='Trang chủ' iconF7='house_alt' />
<Link tabLink='#' onClick={() => this.$f7router.navigate("/analystics/cases-lists/", { animate: false })} text='Hồ sơ' iconF7='folder' />
<Link tabLink='#' onClick={() => this.$f7router.navigate("/campaign-lists/", { animate: false })} tabLinkActive text='Chiến dịch' iconF7='flame_fill' style={{ color: '#34c759' }} />
<Link tabLink="#" onClick={() => this.$f7router.navigate('/dashboard-statics/', { animate: false })} text="Báo cáo" iconF7="chart_bar"></Link>
<Link tabLink="#" onClick={() => this.$f7router.navigate('/academy/', { animate: false})} text="Academy" iconF7="book"></Link>
<Link tabLink='#' onClick={() => this.$f7router.navigate("/setting/", { animate: false })} text='Cá nhân' iconF7='person_crop_circle' />
</Toolbar>
<Navbar large noHairline noShadow>
{/* <NavLeft backLink='Trở về'>
</NavLeft> */}
<NavTitle style={{color:'#2196F3'}}>Chiến dịch <Badge color='red'>Beta</Badge></NavTitle>
<NavTitleLarge style={{color:'#2196F3'}}>Chiến dịch <Badge color='red'>Beta</Badge></NavTitleLarge>
<Subnavbar >
<Segmented strong>
<Button active={this.state.status === ''} onClick={() => this.activeTab('')}>Tất cả</Button>
<Button active={this.state.status === 'APPROVED'} onClick={() => this.activeTab('APPROVED')}>Đã duyệt</Button>
<Button active={this.state.type === 'D2C'} onClick={() => this.activeTab('D2C')}>D2C</Button>
<Button>Nổi bật</Button>
</Segmented>
</Subnavbar>
<NavRight>
<Link iconOnly >
<Icon f7='link_circle'>
</Icon>
</Link>
<Link iconOnly >
<Icon f7='slider_horizontal_3'>
</Icon>
</Link>
<Link iconOnly searchbarEnable=".searchbar-campaign">
<Icon f7='search'>
</Icon>
</Link>
</NavRight>
<Searchbar
bgColor='white'
customSearch={true}
className='searchbar-campaign'
expandable
placeholder='Tìm Chiến dịch'
disableButtonText='Hủy'
onSearchbarSearch={(searchbar, query, previousQuery) => self.onSearch(searchbar, query, previousQuery)}
/>
</Navbar>
{this.state.total == 0 && !this.state.showPreloader ?
<Block className='text-align-center'>
<img src='./static/img/empty.png'></img>
</Block> : null
}
{/* DANH SÁCH CHIẾN DỊCH */}
<List className='search-list searchbar-found' style={{ margin: "auto" }}>
{this.state.listAll.map((x, i) => (
<Card key={i} className='demo-facebook-card' style={{background: x.mc_case_status === 1007 ? '#FFF9C4' : null}}>
<Link onClick={() => this.routerCampain(x.id, x.type)} style={{ display: "inline", color: "unset" }}>
<CardHeader
className='no-border'
style={{ padding: "5px 10px", minHeight:"fit-content", display:'flex' }}>
<div style={{fontWeight:600}} style={{color:"#263238", fontSize:14, fontWeight:600, textOverflow: "ellipsis", overflow:"hidden",whiteSpace:"nowrap" }}>{x.providerName}</div>
<div style={{fontWeight:600}} style={{color:"#263238", fontSize:14, fontWeight:600, textOverflow: "ellipsis", overflow:"hidden",whiteSpace:"nowrap" }}>{"#" + x.provider_no}</div>
</CardHeader>
<CardContent style={{ padding: "5px 10px", fontSize: "13px", display: "flex" }}>
<Block style={{margin:0, padding:0}}>
<div style={{backgroundImage: "url(" + x.image + ")", width:70, height:70, backgroundSize:"contain", backgroundColor: "#eaeaea", borderRadius: 20, border:"1px solid #CFD8DC"}} />
</Block>
<Block style={{margin:0, padding:"0 10px",width:"-webkit-fill-available", color:"#455A64"}}>
<Row noGap>
<Col width='50'>Hoa hồng</Col>
<Col width='50' textColor='pink' style={{fontWeight: "bold", fontSize:16}}>
{/* <Badge style={{fontWeight: "bold", fontSize:14}} color='pink'>{this.formatNumberThousand(x.commission) + " " + this.comType(x.comission_type)}</Badge> */}
{this.formatNumberThousand(x.commission) + " " + this.comType(x.comission_type)}
</Col>
</Row>
<Row noGap>
<Col width='50'>Hình thức</Col>
<Col width='50' style={{fontWeight: "bold"}}>
{x.type + ' | ' + x.affliate_3rd}
</Col>
</Row>
{/* <Row noGap>
<Col width='50'>Loại</Col>
<Col width='50' style={{fontWeight: "bold"}} textColor='deeppurple'>{x.affliate_3rd}</Col>
</Row> */}
<Row noGap>
<Col width='50'>Trạng thái</Col>
<Col width='50' style={{fontWeight: 600,fontWeight: "bold", color:(this.colorStatusCampaign(x.approved_status))}}>{x.approved_status ? x.approved_status : 'UNREGISTER'}</Col>
</Row>
<Row noGap>
<Col width='50'>Danh mục</Col>
<Col width='50' style={{fontWeight: "bold"}}>
{x.category.description}
</Col>
</Row>
</Block>
</CardContent>
</Link>
</Card>
))}
</List>
</Page>