I've been searching for about an hour now with 0 results to this question. I'm just looking for a list of the props that can be used when calling navigator.push, specifically how I can use the sceneConfig prop in the call, but a whole list would be really helpful. Of course like always Facebooks documentation is only half baked and quite vague.
What do I pass to navigator.push? I need all the keys and values for the object that could be passed into the function.
like this you can pass
this.props.navigator.push({
title: "NextPage",
component: NextPage,
passProps: {username: this.state.username, password: this.state.password},
});
and in NextPage you can get using this
constructor(props) {
super(props);
this.state = {
username: this.props.username,
password: this.props.password
};
}
When calling Navigator.push, you can provide an argument that is an object with any number of keys and values. The navigator doesn't actually use the values in this for anything, it just gets passed along to your callbacks, renderScene and configureScene.
The prop renderScene gets the object you called push with, allowing you to examine its contents and return the view you'd like to render.
The prop configureScene gets the object you called push with, along with the other routes on the stack (the initialRoute prop, and any other objects you previously called push with and haven't popped). Here, you can return something from Navigator.SceneConfigs to describe how the route should animate
Are you trying to pass properties to the next scene or are your trying to set different transitions between scenes?
If its the former you just pass an object into navigator.push and you can access the values from navigator.state.routeStack which will give you an array of all your current routes and the name and whatever other properties you passed into the push object.
If you're trying to set different transitions between scenes then I think you have to go to wherever you're using and inside configureScene={route, routeStack) => } you should be able to give options like if (route.name === 'Welcome') { return Navigator.SceneConfigs.FloatFromRight}
Not sure if this was exactly what you were looking for!
Related
I'm building an autocomplete text field component. We will show popup of items filtered based on what users type. It is going to be async, I will get the details from the server and do some filtering based on the text typed in the field.
So here, I have run this filtering logic whenever I send new data to the component.
I come from angular, there we used to have ngOnChange(). Is there something similar available in svelte3.
Right now, I'm filtering by calling the method from outside by binding bind:this. I don't feel like this is a correct approach.
https://github.com/manojp1988/svelte3-autocomplete/blob/master/dev/App.svelte
Without stores, using a prop
Just using a prop:
export let search = '';
....
$: if (search !== '') { // make it react to changes (in the parent)
doSomeThing(search);
};
Stores
Svelte also has stores. A store is an observable object which can be observed everywhere even beyond you project with RxJS.
Example:
const unsubscribe = search.subscribe(s) => {
doSomeThing(s);
});
onDestroy(unsubscribe);
In another component you can use search.set('Hi');
But looking forward for other solutions to handle these kind of changes in parent <-> child components or calling child Component methods.
From child to parent we can fire events.
But from parent to child ...? we can use a store or Component bind:this or ..? but ....
I have a component, that takes a balance prop, and this balance prop can change over time.
I then have a React Final Form to send a transaction, with usual fields amount to send, receiver... And in my validate, I just check that the user has enough balance to send the transaction.
However, if my balance changes when the user is inputting something, then the whole form resets. How would you only reset part of the form state?
See this codesandbox for an example: https://codesandbox.io/s/jn69xql7y3:
input something
wait 5s
see that the form state is blank again
I just ran into this issue with react-final-form where the form completely resets when any state change happens in a wrapping component.
The problem is here (from your codesandbox)
<Form
initialValues={{ amount: 0, balance }} <-- creates a new object on every render
The problem is that when initialValues changes the entire form reinitialises. By default, whatever you pass to initialValues is compared against the previous one using shallow equals, i.e. comparing reference.
This means that if you create a new object in the render, even if it's the same, the entire form resets when some state changes, the render function re-runs, and a new object with a new reference is created for initialValues.
To solve the general problem, if you just want to turn off the form resetting, what I've done is just move my initialState, which never changes, out to a variable so that it's the same reference on every render and therefore always appears to be the same to final-form with the default behaviour. I would prefer a configuration to actually completely turn off this reinitialisation behaviour, but I can't find one in the docs.
However if you actually want this, but need to modify it, the comparison behaviour can be configured using the initialValuesEqual prop (docs here), to do a deep comparison on the initialValues object for example.
You can also use the keepDirtyOnReinitialize prop to only reset the parts of your form that haven't been touched.
I would guess some combination of the above might solve your usecase, depending on the exact UX you need.
Adding onto what #davnicwil mentioned, my solution is useMemo() hook in func components:
const initialValues = useMemo(() => ({ amount: 0, balance }), [])
By using useMemo it creates only 1 object during the life of the component and subsequent re-renders don't cause initialValues to overwrite the form values.
Another solution is to use react-final-form Form prop initialValuesEqual={() => true}
<Form initialValues={{ amount: 0, balance }} initialValuesEqual={() => true} .../>
ref: https://github.com/final-form/react-final-form/issues/246
My top-level component includes a settings dialog that includes the user's credentials. When a change is made in that dialog and the dialog is dismissed (state is changed to dialogOpen=false), I want to force a new fetch from the server since the credentials may have changed. In Relay classic, the top-level component includes a Relay.RootContainer and so I just passed forceFetch=true to that RootContainer. In Relay modern, my top-level component includes a QueryRenderer. So how do I force the refetch in this case?
I found this issue, https://github.com/facebook/relay/issues/1684, which seems to indicate that the QueryRenderer always refetches, but this doesn't seem to be the case in my testing. At least, I'm not seeing my fetchQuery get called after the state change/refresh when the settings dialog is closed. I think I'm probably not completely understanding the statements in that issue.
Can anyone clarify?
OK, I think I figured out my disconnect here. In checking the source for QueryRenderer (don't know why I didn't do this in the first place), I saw that a fetch will occur if props.variables changes. So I just defined a boolean instance variable called refetch and flip its value when my dialog is dismissed:
<QueryRenderer
environment={environment}
query={query}
variables={{refetch: this.refetch}}
Since this doesn't seem to well documented, I'll mention here that QueryRenderer will re-fetch when any of the following conditions is true:
current query parameter is not equal to the previous query parameter.
current environment parameter is not equal to the previous environment parameter.
current variables parameter is not equal to the previous variables parameter.
You can use the retry function that's passed to QueryRenderer's render.
<QueryRenderer
environment={environment}
query={graphql`
query MyQuery($exampleUserId: String!) {
user(userId: $exampleUserId) {
favoriteIceCream
}
}
`}
render={({ error, props, retry }) => {
// Here, you could call `retry()` to refetch data
// or pass it as a prop to a child component.
return (
<IceCreamSelectionView refetchData={retry} user={props.user} />
)
}} />
I want to push some parsed JSON data from my controller into a SC.SourceListView(Sproutcore Showcase). I use a SC.TreeController and set the parsed JSON as content:
MyApp.thisController = SC.TreeController.create({
treeItemChildrenKey: 'children',
content: []
});
The property treeItemChild is set accordingly to the property in the objects and leads to the child objects.
The content in the SC.TreeController contains several objects (JSON data) which base on the following structure (this is an example of one of those objects I want to push into the tree view):
children: Array[3]
0: Object
children: Array[1]
data: "Boogie"
metadata: Object
__proto__: Object
1: Object
2: Object
data: "Blues"
metadata: Object
__proto__: Object
I want to put the data property in my SC.SourceListView so that it reads.
Blues
Boogie
...
...
This content is now binded to the SC.SourceListView and should show the data property on the screen:
viewname: SC.SourceListView.extend({
contentBinding: SC.Binding.oneWay('MyApp.thisController.arrangedObjects'),
exampleView: SC.ListItemView.extend({
contentValueKey: 'data'
}),
groupExampleView: SC.ListItemView.extend({
contentValueKey: 'data'
})
})
With this I am able to get the data of the top layer of the different objects. But there is no dropdown, which consists of the objects in the deeper layers. How do I set up this view properly? What is the difference between SC.SourceListView and SC.SourceListGroupView?
(Google Group Link)
The SC.SourceListGroupView is the actual list-item view used to render the group within the SC.SourceListView. Currently, you're using
groupExampleView: SC.ListItemView.extend()
However, SC.ListItemView doesn't, by default, know how to render itself as a group, so you should probably change this to
groupExampleView: SC.SourceListGroupView.extend()
After that, it should show you the tree.
Lastly (and I'm assuming this is just a typo in the question): you have
MyApp.thisController.anrrangedObjects
I'm pretty sure you really meant
MyApp.thisController.arrangedObjects
Please add a comment or update your question if changing it to SC.SourceListGroupView doesn't solve your problem! If you still need help, it would also be helpful to see the JSON structure that you are attempting to render :-)
Edit: Okay, so, I'm not 100% sure on this as I can't seem to find any documentation, but according to the SproutCore Showcase, you may need to ensure that your parent objects (those that have children) have a group attribute set to true. Please let us know if that helps or not!
Is there any simple way to achieve a temporary disabling of notifications of an object property or properties?
I know you can defer them with beginPropertyChanges() and endPropertyChanges() but I don't want those changes to be notified at all until I explicitly enable them.
Thank you in advance.
Use case:
I have to set a property of an object (A) with another object (B). Properties of B are being observed by several methods of other objects. At some time the B object's data gets cleared and the observers get notified, later an HTTP response sets them with something useful. I would not want the observers get notified when clearing the object because the properties values are not valid at that moment.
Ember doesn't support suspending notifications. I would strongly suggest against toying with the private APIs mentioned in the above comments.
I wonder why you bother clearing the object's data prior to the HTTP request? Seems strange.
Using a flag will cause the computed to still trigger.
The best I've come up with is to override the computed with the last known value. Later you can enable it by setting the computed property definition again.
let _myComputedProperty = Ember.computed('foobar', function() {
let foobar = this.get('foobar');
console.log('myComputedProperty triggered >', foobar);
return '_' + foobar + '_';
});
Controller.extend({
turnOffComputed: function() {
let myComputedProperty = this.get('myComputedProperty');
this.set('myComputedProperty', myComputedProperty);
},
turnOnComputed: function() {
this.set('myComputedProperty', _myComputedProperty);
}
})
Full example: Conditional binding for a computed property
This is an old question, but it appears high in Google search for suspending observers, so I would comment.
There are evident use cases for such a feature, for example, an enum property of an object is represented by a list box and the object may change. If the list box is used to request property changes from the server and to set the new value on success, the natural way to do things is to use a controller property with the list box, set that property to the object property when the object changes, and observe it to make requests to the server. In this case whenever the object changes the observer will receive an unwanted notification.
However, I agree that these use cases are so diverse that there is no way Ember can support them.
Thus, a possible work around is to declare a variable in the controller and use it whenever you change a property so that you react only to changes made by the User:
doNotReact: false,
updateManually: function() {
this.doNotReact = true;
Ember.run.scheduleOnce('actions', this, function() {
this.doNotReact = false;
});
............
this.set('something', somevalue);
............
},
onChange: function() {
if (this.doNotReact) return;
...............
}.observes('something')
The value of doNotReact will be reset after the observer gets a chance to run. I do not recommend to reset the stopper variable in the observer since it will not run if you set the property to the same value it already has.