I'm currently using the antd carousel which use react-slick. What I'm going to do is to display a list of clickable cards. Assume that I have 10 cards in total. I've set settings as follow:
slideToShow: 4
slideToScroll : 4
Infinite: true
The carousel now displays cards as shown below.
(The number represents the card number and ">>" represents the next arrow of carousel.)
1 2 3 4 >> 5 6 7 8 >> 7 8 9 10 >> 1 2 3 4
The problem is that when I reach the page contains cards no.7 8 9 10. I can't click card no.7 and 8 while no.9 and no.10 work normally. But if I go back to the page contains cards no. 5 6 7 8, I can click all cards.
How do I make card no.7 and 8 clickable?
This is my carousel code:
<CarouselWrapper
infinite={recommendedCourses.length > 4}
slidesToShow={4}
slidesToScroll={4}
arrows={true}
prevArrow={<LeftOutlined style={{ color: 'black' }} />}
nextArrow={<RightOutlined style={{ color: 'black' }} />}
className="px-12"
dots={false}
>
{recommendedCourses?.map((sampleCourse) => {
return (
<Col className="flex justify-center py-5">
<CourseCard
key={sampleCourse.slug}
course={sampleCourse}
onClick={() => {
myAnalytics.track(
AMPLITUDE_EVENT.CLICK_VIEW_COURSE,
sampleCourse,
AMPLITUDE_MODULE.COURSE
);
}}
/>
</Col>
);
})}
</CarouselWrapper>
Any help would be appreciated.
Related
my test result is number 1 instead of the name of the icon. Do you know how can I test the image source?
Code:
<Image
source={buttonVisibility ? arrowRight : arrowDown}
style={{ width: 20, height: 20 }}
testID="image-source"
/>
My test:
it('icon should be arrowRight', () => {
const wrapper = shallow(<DetailsPageLastPosition bike={bike} buttonVisibility={true} />);
expect(wrapper.find({ testID: 'image-source' }).props().source).toEqual('arrowRight');
});
Test result:
● DetailsPageLastPosition component › icon should be arrowRight
expect(received).toEqual(expected) // deep equality
Expected: "arrowRight"
Received: 1
73 | it('icon should be arrowRight', () => {
74 | const wrapper = shallow(<DetailsPageLastPosition bike={bike} buttonVisibility={true} />);
> 75 | expect(wrapper.find({ testID: 'image-source' }).props().source).toEqual('arrowRight');
| ^
76 | });
77 | });
78 |
Local image assets always resolve to a number (see here in the docs). One easy way around this would be to dynamically assign a test ID based on your conditional.
<Image
source={buttonVisibility ? arrowRight : arrowDown}
style={{ width: 20, height: 20 }}
testID={`image-source-${buttonVisibilty ? 'arrowRight' : 'arrowDown'}`}
/>
// in test
expect(wrapper.find({ testID: 'image-source-arrowRight' }) // etc
Hey I have a FlatList with Cards Items. And I want to achieve this scenario.
Scenario:
When Scrolling for example through 5 items in the Flatlist I want to show a feedback card instead of an item Card
How Can this by Implemented ?
In the renderItem method, you can access the index of the current card.
My suggestion would be rendering the feedback card right after every 5th item card.
A rough example will look like this (Not tested yet)
const SampleApp = () => {
const renderItem = ({ item, index }) => {
return (
<>
<ItemCard item={item} />
{(index > 0 && index % 5 === 0) ? <FeedbackCard /> : null}
</>
);
};
return <FlatList data={DATA} renderItem={renderItem} />;
};
You can try following - track onScroll event for FlatList, check if you passed enough offset for 5 Rows, compute target row position and insert feedback card there in FlatList data.
I am new to UI, and currently working on making on creating options using Fluent UI ChoiceGroup. I have 10 entries, let's say 0,1,2,3,4,5,6,7,8,9. I am trying to force UI to always show like
0 1 2 3 4
5 6 7 8 9
but it changes according to width.
There is no property that I can attach in the choiceGroup as well. It looks like some CSS stuff.
Please guide me with this. Thank you.
I don't see better way to achieve that scenario then to put fixed width of ChoiceGroup root element:
<ChoiceGroup styles={{ root: { width: 500 } }} label="Pick one icon" defaultSelectedKey="day" options={options} />
Items inside ChoiceGroup are wrapped with flexContainer which includes:
display: flex;
flex-wrap: wrap;
You can modify it if you need:
<ChoiceGroup styles={{ flexContainer: { flexWrap: 'nowrap' } }} defaultSelectedKey="day" options={options} />
Codepen working example.
I am trying to build a reset button by following the instructions for "key-changing" as shown in this blog post. Here is the code:
<template>
<view>
<text-input
:style="{ borderColor: 'gray', borderWidth: 1, backgroundColor: 'white', padding: 10, margin: 5, textAlign: 'right' }"
v-model="testInput"
keyboardType="decimal-pad"
:componentKey="componentKey"
/>
<button title="reset" :on-press="reset"/>
</view>
</template>
<script>
export default {
data() {
return {
componentKey: 0,
testInput: '14'
}
},
methods: {
reset() {
this.componentKey += 1;
console.log('parent ' + this.componentKey);
}
}
}
</script>
When initially rendered a text box appears with the value 14 inside. When the user types more digits in, it changes, as expected. However, when the user clicks the Reset button nothing happens. What ever the last number was that the user entered is still displayed. I would've expected the number in the text box to be reset to 14. The reset method is being called and the componentKey is incrementing correctly everytime the Reset button is clicked because this is visible:
parent 1
parent 2
parent 3
parent 4
parent 5
This example shows what appears in the console for 5 button presses. So why isn't the value in the text box being reset to 14?
It happens because in the memory testInput is already what is changed
reset() {
this.componentKey += 1;
this.testInput = 14; //ADD THIS
console.log('parent ' + this.componentKey);
}
I have a Flatlist that displays cards and information in it, I have to apply pagination to it i.e at first only 3 cards should load on reaching end more 3 cards should load.
Below is my code :
<FlatList
style={{ height: HEIGHT, flex: 1 }} // declared a HEIGHT const with value of windows height
data={this.state.show_data_list} // data to be shown in flatlist
keyExtractor={(x, i) => x + i}
extraData={this.state.refresh} // to sort the data based on condition.
initialNumToRender={3} // data to be loaded initially
onEndReached={() => this.loadMoreData()} // function which add 3 more items to show_data_list state to be shown in flatlist
onEndReachedThreshold={10}
renderItem={({ item }) =>
<ContentCard
// content to display
/>
}
/>
As soon as the view renders all data is shown, in other words, onEndReached is called before I reach at the end.
Can any of u guys know why this is happening ????
Implement onMomentumScrollBegin or check the distance from the end
onEndReached={({ distanceFromEnd }) => {
if (distanceFromEnd < 0) return;
}
Please refer link