I have React app that (strange, I know) needs to detect hover action on react-select form and react in a certain way.
<Select
className="select-top"
id="Select-Section-Unsplash"
value={getValues}
isClearable={true}
menuIsOpen={true}
onChange={selectValue => {
fetchImages(selectValue.value);
history("./images");
}}
options={hints}
/>
I have solved that partially with the following code
function getHovered(node: HTMLElement | null) {
if (!node) return null;
const elements = node.querySelectorAll(":hover");
if (!elements) return null;
const arr = Array.from(elements);
return arr[arr.length - 1];
}
However, I really do not like the solution. Looked for something like onHover or onMouseEnter, but none of them seem to be available. Is there a simple bypass to get currently hovered item (OK, I know that basically I should use ref and not ID, but this is not something to consider now, perhaps the function also could be simplified, but I am in quest for something really different).
Related
When I have a textarea like
<textarea v-model="foo.abc.text"></textarea>
and either foo or foo.abc does not exist yet then
vue removes either parts of the DOM or is giving me a blank page.
It does never recover.
That alone is annoying, regardless of if I am using a debug version of vue or not.
If I try to use an approach that I have been advised to use earlier like
<textarea v-model="foo?.abc?.text"></textarea>
then I am still out of luck, I presume that I get a "rvalue" using those question marks and what I need rather is a variable location.
How do I, with as little trickery as possible, allow v-model to exist later on even if it doesnt exist now (late binding)?
Just shape your data accordingly and initialize it with empty values:
data(){
return {
foo: {
abc: {
text: ''
}
}
}
}
You can later populate it e.g. with the result of api call, but it's still better to initialize data properly
I would suggest going the :value + #input way. It allow more control over the input model, and does not require hiding it.
<textarea :value="!!foo && foo.abc.text" #input="(val) => !!foo && (foo.abc.text = val)" />
You can even hook in a validator:
<textarea
:value="!!foo && foo.abc.text"
#input="(val) => !!foo && (foo.abc.text = val)"
:rules="v => !v && 'The object has not been initialised'"
/>
I found a solution I can live with and then I got a comment in the same direction:
Conditionally showing the textarea.
v-if seems to do it but it falls under the "trickery" category, I think (angularjs would be more relaxed).
<textarea v-if="foo!=null" v-model="foo.abc"></textarea>
The symptom to hiding components if something is not all correct is not the best part of vue.js. Better show them and color them red.
So while testing my application, I am using a data set. Since the data set has many entries, I am using FlatList to display my list. After creating the list, I want to be able to verify and tap on certain list items. Below, I have attached the code which I am trying to use and it does not work for me. If anyone has a better idea to do this, please let me know.
The approach I think should be taken. I can't think of anything else to make the FlatList scroll and find the item I am looking for.
let isNotFound = true;
while (isNotFound) {
try {
await waitFor(element(by.id((edit_details.index).toString()))).toBeVisible().withTimeout(2000)
isNotFound = false;
} catch (e) {
await element(by.id('credit_history_list')).swipe('up', 'slow', 0.2)
}
}
await element(by.id((edit_details.index).toString())).tap();
It does help scroll the list and it keeps scrolling while it actually finds the entry I am looking for. But the .tap() function does not work. Instead, detox moves on with the next line of code.
Is there a better way to do this?
Thanks in advance!
This sounds spot-on with Detox' whileElement() API.
I think that what you're looking for is this:
const itemId = (edit_details.index).toString();
const listId = 'credit_history_list';
await waitFor(element(by.id(itemId))).toBeVisible()
.whileElement(by.id(listId))
.scroll(100, 'down');
I am doing an app that gets information about a sports game from a provider. They provide goals and assists in two different objects, looks something like this:
incidents: {
1: {
id: 1,
type: 'goal'
},
2: {
id: 2
type: 'assist'
referto: 1
}
As you can see in the object above, the object with id 2 is an assist which refers to object with id 1.
So I want to map this object and return a <View> with the data, and if type = assist, I want it to append to the View which the id refers to.
Below is a mix of jQuery and React, but I hope you understand.
Object.map(incident => {
if (incident.type === 'assist') {
incident.referto.append( //refer to the View with key = incident.referto
<View><Text>I am an assist to the goal above</Text></View>
);
}
)};
How can I do something like this?
Thanks in advance!
EDIT:
I want to add "assist" view component inside the "goal" view component. I hope that will make it a bit clearer, sorry.
Best way of going at it is to use a conditional render.
{
incident.type === 'assist' &&
<View>
<Text>I am an assist to the goal above</Text>
</View>
}
By doing so you add the views only when incident type is assist, otherwise they are non-existent.
While not advised, another way of going at it would be to abuse React.createElement(component, props, ...children). However, such a solution is likely not what you want, and probably what you wish to achieve can be achieved using JSX.
Say you have a list of People incoming from your API.
[{content: 'John'},
{content: 'Tim'},
{content: 'Harry J. Epstein'}]
And you're looking to put people who are first-name-basis friends (John and Tim) under a section 'Friends' and people who are not (Harry J. Epstein) under 'Contacts'.
Tapping a friend selects them with a blue highlight, but tapping a 'contact' selects them with a red highlight.
Would the proper approach be to take the incoming data from the API, add a type: 'Friend', ... or type: 'Contact', ... around it, and section based on that type with separate a FriendItem and ContactItem class so I can split the highlighting function?
I've got a bunch of just basic ListView code that does this exact approach, but I'm basically looking for the easy way out, like Angulars ng-repeat equivalent.
So what's the React Native version of
var friends = api.getFriends()
var contacts = api.getContacts()
<div ng-repeat="friend in friends" ng-click="highlightFriend()"> ... </div>
<div ng-repeat="contact in contacts" ng-click="highlightContact()"> ... </div>
I'm struggling to understand how to split it. Do I need a FriendsPage, FriendsItem, and ContactsItem? Or put everything into one array in FriendsPage and use a FriendsItem that checks if it's a friend or contact and adds a function separately?
I feel like I'm slightly lost coming from MVC. I've got Redux running too, if there's an easy way using that.
Here is a nice example on how you can create section-dependent rows: https://github.com/spoeck/ListViewExample
The idea is basically to create the data blob properly, which is a bit tricky, and then in your renderRow callback, check the sectionID parameter:
_renderRow(rowData: any, sectionID: any, rowID: number) {
if (sectionID === this.data[0].section) {
return <MyFriends />
} else if (sectionID === this.data[1].section) {
return <MyContacts />
}else{
// ...
}
}
why don't you try SectionList
Use the new FlatList or SectionList component instead. Besides
simplifying the API, the new list components also have significant
performance enhancements, the main one being nearly constant memory
usage for any number of rows.
I'm having a look at Vue.js with a view to simplifying an application which is starting to get a bit too complex with jQuery. I want to utilise the data binding so that the state of an 'Order' object automatically enables or disables certain buttons (e.g., I want the submit button to be automatically disabled unless an order, containing items, exists). I have something which partly works, with this declaration:
var content = new Vue({
el: '#content',
computed: {
orderExists: function () {
return (shopOrder != null && !isEmpty(shopOrder.items));
}
}
});
I use it in a button like this:
<button type="button" id="btnDisplay" v-bind:disabled="!orderExists">Show Selected</button>
On page load, the buttons using this technique are indeed enabled/disabled correctly. However, when I add items to the order object, thereby changing its state, I'm not seeing any update in the buttons' states - they should be being enabled.
I assume I'm misunderstanding something basic about how this works with Vue.js, as I've only spent a couple of hours with it, so any help would be appreciated.
Hmmm why not pass the property as reactive data?
You can do something like:
...
computed: {
orderExists: function () {
this.disabled = (shopOrder != null && !isEmpty(shopOrder.items));
}
}
Fiddle.
DP: the example is in Vue 2
The issue is that Vue has to manage your data objects in order to set them up in a way where it can observe the changes to them (i.e. be made reactive). This is done by specifying the data option to your Vue creation. Something like:
data: {
shopOrder: null
}
Then update your code like this:
orderExists: function () {
return (this.shopOrder != null && !isEmpty(this.shopOrder.items));
}
And of course at some point you need to set this.shopOrder to a valid order object.