I am trying to reset my collection without triggering the 'reset' event. I have set up my collection to listen to both 'reset' and 'add' events
#.listenTo(#options.muses, 'add', #addOne)
#.listenTo(#options.muses, 'reset', #addAll)
When I click on a button, the first thing I want to do is to clear out the collection
optionButtonClicked: (e) ->
e.preventDefault()
target = #$(e.currentTarget)
//step to clear out the collection
#options.muses.reset({silent:true})
However when I did some logging and checking, I realize that the 'reset' event was still being triggered i.e. the #addAll function was still being called.
Am I missing something here? Isn't silent:true supposed to suppress the reset event?
reset takes two optional parameters, models 1st, options 2nd. From the docs: resetcollection.reset([models], [options]).
so you need to pass in the silent option as the second parameter.
#options.muses.reset(undefined, {silent:true});
Related
I'm using a realtime listener on a firestore collection to get the latest data. The function I'm using is like below,the function is attached to a button press.
function getItems(selectedCategory){
const subscriber = firestore()
.collection('CollectionName')
.doc('documentName')
.collection('CollectionName2')
.where("category", "==", selectedCategory)
.onSnapshot(documentSnapshot => {
console.log('Total Docs: ', documentSnapshot.size)
documentSnapshot.forEach(documentSnapshot => {
console.log('doc ID: ', documentSnapshot.id);
});
});
unSubscriptions.push(subscriber); //to detach the listener when page is changed(usefocuseffect)
}
when I call the function I can get the results and render them accordingly. But if I invoke the function again with a different input variable for "selectedCategory" it also logs the results. The thing is if any changes happened with the first occurrence (the first input variable) it also gets logged. I believe this happens because the listener for the first input parameter is still being active. Is there a way I can detach the first listener before invoking a second one.
P.S : I'm using a return function with useFocusEffect to cleanup the listeners when the page goes out of focus(which works) but I want to do a similar thing with a button press.
onSnapshot() returns a function that you need to call to detach your listener.
So you need to simply do subscriber() (note the parentheses) when clicking your button.
The specific doc is here.
I am writing a wrapper for material-ui/AutoComplete.
I want it to:
set value and submit on clicking the suggestions,
set value and submit on pressing enter on the suggestions,
navigate through list by pressing arrow keys
submit on clicking a submit button next to the AutoComplete button.
I realise that I need to capture three events:
onKeyDownCapture
onKeyDown
onNewRequest
All the events are handled using the same handler.
Among these events, onNewRequest is triggered as usual but onKeyDown is triggered when I press the enter button while onKeyDownCapture captures a click.
When the value updates, the component also triggers onNewRequest automatically, leading to duplicate and expensive calls to my search service.
Is there a way to block duplicate calls for search service?
Here is the code for my component:
handler(){
// calls search service.
}
render(){
return (
<AutoComplete
...{props}
onKeyDownCapture={this.handler}
onKeyDown={this.handler}
onNewRequest={this.handler}
/>
}
I tried an ugly "newRequestDuplicatesHandler" which basically keeps track of the last search request text and prevents the duplicate requests by comparing the new search request text. However this is not a clean solution.
The original code, as shown above causes duplicate requests.
However, the newRequestDuplicatesHandler does the trick. But this is not a clean solution.
With react-color https://casesandberg.github.io/react-color/ .
I can use ready-made onChangeComplete function from react-color.
But I wonder how can I create that onChangeComplete by using input type color tag.
I tried onBlur but the color won't change until user clicks or presses tab
On the other hand, using onChange keep firing updates.
Because currently I'm using redux state, so dispatching update continuously when I drag and choose color isn't a good way.
Any ideas how to create onChangeComplete?
It depends on how you'd like to define a change. To prevent continuous updates every time the mouse moves, you'll probably want to update Redux state only when the mouse stops moving. (This seems to be the behaviour on the page you linked to).
You could use the following JavaScript to detect when the mouse stops moving:
let timer;
window.addEventListener('mousemove', function (e) {
console.log('Mouse moving');
clearTimeout(timer);
timer = setTimeout(() => console.log('Mouse stopped'), 300);
});
Then, try putting the above code inside your ComponentDidMount() method and replace console.log('Mouse stopped') with whatever Redux action you want to dispatch!
300 is the number of milliseconds without movement that will trigger the action, which could be changed depending on how sensitive you want your app to feel.
Lastly, remember to remove the event listener in your ComponentWillUnmount() method.
https://github.com/casesandberg/react-color/blob/7ee60d845e5d5e11e4f6ecb895b2d9755c59d09d/src/components/common/ColorWrap.js#L30
Here is the code that how react-color implemented onChangeComplete.
It is hard coded using debounce.
I put the link there for anyone interested in using that solution
I have React code like this:
handleTransitionEnd() {
console.log('ended');
}
<div onTransitionEnd={(ev) => this.handleTransitionEnd(ev)}....
The peculiar thing is that my logs are filling up with ended. Even if I don't have any transition css logic tied to the element at all. It seems to be firing on every state change or re render. Is this normal? I would expect it to only fire when a css transition ends.
Is there some other way this callback should be achieved?
Thanks
UPDATE:
here is a sandbox showing some strangeness: https://codesandbox.io/s/vy5wwyq5v3
Clicking the first button causes the callback to be called 3 times, then if you click the second button it gets called another 2 times even tho a transition doesn't happen. My app is even more extreme than this with it getting called a lot more often.
The css transition being used transition: "all 3s" is causing transitions on multiple properties, not just margin-left.
In the example provided, outline-color and outline-width were transitioned as well. They were then transitioned again when clicking anywhere else (not just on the second button).
You can see this by checking the event:
onTransitionEnd={e => {
e.persist(); // see: https://reactjs.org/docs/events.html#event-pooling
console.log(e.propertyName);
}}
The css transition could be more specific: transition: "margin-left 3s" to avoid this.
Alternatively, test e.propertyName for the desired case.
To add on to what dabs said in his answer, the transitionend event bubbles. This means if any children of your element have transitions on them, they will trigger the transitionend event on themselves, then bubble up to their parent, triggering on each of them, including the current element that you have the listener on.
A simple way to check that you're only running your logic for the element your listener is on is to compare e.target and e.currentTarget like so:
onTransitionEnd={e => {
if ( e.target === e.currentTarget ) {
// your logic here
}}
e.target is the element that starts the event, which can be one of the children, for example, not just the element with the listener on it.
e.currentTarget however always points to the element that has the listener on it, regardless of if it initiated the event or not.
By comparing the two, you can check that you're only running logic when it's the element with the listener on it that initiated it.
Which event fires after form load? My requirement is at the time of view load based on some condation some controls set to disable mode(read only)
so how to handle this (which event)
i have try this formpanel.on({ actioncomplete: function (form, action) {} but ist not fired
thanks in advance
I just struggled with this today. The important thing to keep in mind is that there is no event fired on form.loadRecord() as it is simply a setValues() wrapper. If you want an event to be fired on loadRecord(), you will need to define it yourself by extending Ext.form.Basic (and potentially adding the event to relayEvents in Ext.form.Panel).
I assume you a event after a record/data has loaded into the form. The action get handled in the basicForm and calls. Within the basicForm the load() calls doAction() so you should be able to use the following events from the basicForm
actioncomplete : ( Form this, Action
action ) Fires when an action is
completed.
actionfailed : ( Form this, Action
action ) Fires when an action fails.
beforeaction : ( Form this, Action
action ) Fires before any action is
performed. Return false to cancel the
action.
You can observe the events on an Observable using Ext.util.Observable.capture. Here is an example of observing a form, which is loaded and then submitted:
http://jsfiddle.net/el_chief/HBah5/4/
I saw these events:
fieldvaliditychange
fielderrorchange
validitychange
dirtychange
beforeaction (i hit submit)
afterlayout
actionfailed (it did not submit to anywhere)
Don't forget, BasicForm has its own events (though I believe they are all relayed to Form), as do Fields inside a form.
Changing basic.trackResetOnLoad changes some of the events too, in particular "dirtychange"