I am trying to make Mui select scrollbar position on center of the list by default and keep this field empty on start. Now whenever user clicks the select it shows values starting from the first one. For example in this select example here, I would like it to show values with the "100" on the center of the list. Now it shows "10" on top of the list what is by default.
I want it to look like that without user interaction - empty field:
After user click - it is now:
after user click - What I want to achieve:
Thanks in advance.
You set it in the in the default value in your useState which is what i recommend.
const [value, setValue] = useState("100");
or if for any reason you don't want this approach you can write it in the value of the Select like this:
<Select
label={null}
MenuProps={{ style: { maxHeight: "300px" } }}
IconComponent={() => null}
name={"example_name"}
value={value || 100}
onChange={handleChange}
>
Related
I was wondering how I would go about dragging/sliding left to reveal the timestamp on react native. I am using a flatlist in react-native and I have the timestamp data but I am unsure of how to render the timestamps on slight drag. Anyone have detailed ideas on how to do this. I have included images of current implementation and iMessage slide/drag. This feature is also on Instagram (ios version at least). I should add that I'm not trying to do a drag and drop feature more like just a solution review what is not currently in the view from a slide/drag
Current App
Current iMessage
This is the eventual solution i came up with all credit from #Abe and reading the gesture-handler documentation referenced above. I
import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
const translateX = useSharedValue(0)
const startX = useRef(0)
My flatlist renders elements like this now
<Animated.View
className="mx-2 flex-1 flex-row"
style={sty}
onTouchStart={(e) => {
startX.current = e.nativeEvent.pageX
}}
onTouchMove={(e) => {
const delta = startX.current - e.nativeEvent.pageX
if (delta > 0) {
translateX.value = -delta / 2
}
}}
onTouchEnd={() => {
translateX.value = withSpring(0)
}}>
...
</Animated.View>
The most common way to handle this is with a PanGestureHandler from react-native-gesture-handler and an Animated.View from react-native-reanimated.
Wrap your component in one, and make the View that you want to move into an Animated.View. (The component that the PanGestureHandler wraps also should be an Animated.View.) Create a shared value (from Reanimated) that represents the x offset of the component. Then create a handler method that responds to the drag gesture and changes the shared value. You may want to add some limits, like not scrolling past a certain offset in either direction. Then, use the shared value in an animated style (something like left: offsetX,) that you apply to your Animated.View.
Since you're using this inside a scrollable list, make sure to set the activeOffsetX prop to something like [-5, 5]. This means that if the user is only trying to scroll up and down, your gesture handler won't steal that touch.
The example in the gesture-handler docs should help.
I would really like to make this design but I don't know how to implement it in code, any suggestions?The issue is:I don't know how to show only one item at a time on the FlatList and how to make the centered item look closer.Lastly,How can I make the scroll go from one item to the other,without beeing sort of in the middle?
I tried looking online but I haven't been able to find what I need, if you found something please let me know.
I think you are looking for a carousel. Please refer to this library.
A list that allows both dragging and pressing a button.
For that i would use a horizontal FlatList. Then, make each item in the list take up 100% of the screen width and use the FlatList's ref param to scroll to the next item in the list when pressing a button and have a useState to keep track of which index the user is at to align button and swiping.
Heres how i would do it.
Get 100% screen width
import { Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
Set up horizontal FlatList
The key here is the params: pagingEnabled and horizontal.
onViewableItemsChanged is called whenever focused item changes.
useCallback is for optimization. import it with useState
// Method passed to FlatList. Displays the data's text.
const renderItem = useCallback(
({ item }) => (
<View style={[styles.card, { width }]}>
<Text style={styles.cardItem}>{item.text}</Text>
</View>
),
[]
);
<FlatList
ref={flatListRef} // Reference to list. Used to scroll to specific items.
horizontal
pagingEnabled // cause snapping to items
data={data}
renderItem={renderItem}
onViewableItemsChanged={onScroll} // Calling with anonymous function here causes issues
viewabilityConfig={{
itemVisiblePercentThreshold: 100,
}}
/>
Button
Using the flatListRef and my useState, to scroll to the next index and keep track of where the user is at.
import React, { useState, useRef, useCallbac } from 'react';
const flatListRef = useRef(null);
const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
const onButtonPress = useCallback(() => {
if (currentSectionIndex === data.length - 1) {
// What you want to do at the end of the list.
} else if (flatListRef.current) {
// Go to the next item
flatListRef.current.scrollToIndex({
index: currentSectionIndex + 1,
});
setCurrentSectionIndex(currentSectionIndex + 1);
}
}, [currentSectionIndex, data.length]);
OnScroll function
We wanted to allow dragging and pressing a button to go move on in the list.
So when the user scrolls, we use this function, which we passed to the FlatLists onViewableItemsChanged
// When scrolling set useState to keep track of where the user is at.
const onScroll = useCallback(({ viewableItems }) => {
if (viewableItems.length === 1) {
setCurrentSectionIndex(viewableItems[0].index);
}
}, []);
I am trying to get my text to wrap around and display in multiple lines in Office UI Fabric's DetailsRow. At the moment some of my rows that have long text go off the screen, and I would like them to wrap around so the user does not have to scroll to read the entire row.
This is my GroupedList
<GroupedList
items={this._items}
onRenderCell={this._onRenderCell}
groups={this._groups}
selectionMode={SelectionMode.none}
compact={true}
/>
This is my render method for each cell.
_onRenderCell = (nestingDepth, item, itemIndex) => {
return (
<DetailsRow
columns={this._columns}
groupNestingDepth={nestingDepth}
item={item}
itemIndex={itemIndex}
selection={this._selection}
selectionMode={SelectionMode.none}
onClick={() => this.insertComment(item.key, item.link)}
/>
);
};
Any ideas on how to make the text wrap? I am a beginner when it comes to styling.
If you have specific columns whose text are known to require more than "1 line" of text, you can use the isMultiLine property on the column. This is the example that sets isMultiLine to true for a column to wrap the text, which in turn enlarges the height of the corresponding row: "DetailsList - Variable Row Heights".
As a means to learn, I am trying to build an autocomplete feature. I am following this example:
https://codesandbox.io/s/8lyp733pj0.
I see two issues with this solution:
1.) Conflict with mouse hover and keydown. If I use the keypad to navigate the list the active item gets highlighted and if I use my mouse at the same time another item will get highlighted. This results in 2 highlighted fields.
2.) If i select an item by pressing enter it will fill the input field with the selected text but if I press enter again it will change that text to the index 0 item I believe.
Can someone please help me in understanding how to resolve these issues. I have tried hover and focus for css but it still doesn't achieve the expected outcome.
My approach (not sure if this is the correct one):
If keyboard is being used then the mouse event should be disabled and vice versa.
I've also tried removing this.setState({activeSuggestion: 0}) for the enter event.
Thanks for your help - it's taking me some time to grasp the concepts of state with React.
The onKeyDown function updates correctly the value ofactiveSuggestion. I sugest you to add a scroll in the select when activeSuggestion is not vissible.
In my opinion, you need to update the value of activeSuggestion with theonMouseEnter function.
When you do that, remember to remove the line 32 from styles.css: .suggestions li:hover.
Only the element with .suggestion-active must have the active styles. Not the hovered ones. The idea is that onMouseEnter must update the value of activeSuggestion.
Here is the code:
// Autocomplete.jsx
//in line 84, after function onKeyDown, add:
onMouseEnter = e => {
try {
e.persist();
const currentIndex = parseInt(e.target.dataset.index, 10);
this.setState({ activeSuggestion: currentIndex });
} catch (reason) {
console.error(reason);
}
}
// then, create const onMouseEnter after the render() method:
render() {
const {
onChange,
onClick,
onKeyDown,
onMouseEnter,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
// In the li nodes (line 123), add props onMouseEnter and data-index:
<li
className={className}
key={suggestion}
onClick={onClick}
onMouseEnter={onMouseEnter}
data-index={index}
>
{suggestion}
</li>
Remember to remove the line 32 from styles.css: .suggestions li:hover.
Hope it helps.
I have added the button in bottom of simple screen and I want to scroll top whenever I press the button. what code to add to button onPress?, Please suggest any solution, Thanks in advance.
I am assuming you are using a ScrollView on your page since you want to scroll to the top whenever a button is pressed at the bottom. In that case, you can use scrollTo({x: 0, y: 0, animated: true}) method of ScrollView. You can call a function before the render method like this:
goToTop = () => {
this.scroll.scrollTo({x: 0, y: 0, animated: true});
}
render() {
return (
<ScrollView
ref={(c) => {this.scroll = c}}
>
// [rest of your code here...]
<Button title='Go To Top' onPress={this.goToTop} />
</ScrollView>
)
}
Basically, you have to create a reference(ref) to your scrollView and then you can call its method anywhere in your code.
In case you are not using ScrollView, but instead, you are using the Flatlist component, it also has a method exposed via its refs called scrollToOffset().
In React Native for functional component, need to do following things to work scroll Top in ScrollView-
1.Define globally in functional component :-
const scroll = React.createRef();
then, do add :- ref={scroll} in ScrollView.
3.Finally, on click add :-
scroll.current.scrollTo(0); // will scroll to the top at y-position 0
// const scroll = React.createRef();
if u get Error that scroll.current is Null then try this
const scroll = React.useRef();
This worked in my Case.