I've created a simple calendar app using Bootstrap-Vue b-container, 5 b-rows and 7 b-cols. Each cell is a day. Within that cell is child component called Day. Each day has a Date component that shows that cell's date. Each day can have 0 or more Payment components. When a Payment component is clicked on, the number in that component is highlighted, as shown in the right cell, below:
enter image description here
When a different cell is clicked, I need to remove the highlight from the original Payment and then highlight the newly clicked Payment. How can I determine which Payment component needs to have the highlight removed?
Not sure this is a coding question, feels more like app design. But if I were you, I'd have a "selectedDay" property in the parent Vue element that would point to the highlighted cell. And then I'd raise a "clicked" or "selected" event in the child element. In the parent, you can hook a method up for to event raised by the child and act accordingly.
Related
I'm making a custom calendar component with a month view where each day is a specialized component. When the user puts his finger on a day and moves across the screen I want to do something in each touched day component. In other words I need something like onMouseEnter event from standard react.
Here's what I've tried:
Passing gesture handlers to View inside each day.
I've added onStartShouldSetResponder, onMoveShouldSetResponder, onResponderTerminationRequest (all 3 return true), onResponderGrant and onResponderMove to a View in my custom day component and that works for a single day, but when the user moves his finger to the next day its handlers are not called until the finger is lifted and put on it again.
Creating a PanResponder in the calendar component and passing its handlers to all days.
Well this one was a blind try. It wouldn't have much sense if it did work :)
I've created a PanResponder in the parent calendar component and passed panResponder.panHandlers to every day. It works the same as method 1.
The method I'm sure would work:
attach onLayout to each day
store bounding boxes of each day in the state of the calendar component
attach gesture handlers to the calendar view itself
in the gesture handlers using current touch coords (x,y) and stored bounding boxes figure out which day is touched
But there's got to be a simpler, elegant method for a more civilized age, right? :)
In my React-Native app, I have a ListView with each row being rendered by following "Solution 2". Inside my row, I have a couple of custom TouchableHighlight components. When I press the "Delete" button in my row, I'd like it to replace the entire row or all the button components in the row, with a Text component saying, "This item has been deleted".
Does anyone have any idea of how to accomplish this? I'm not sure how to link my child component's onPress method (Delete button) to the parent component (Row) and have the Row replace its content with a Text component.
I created this code snippet to reproduce what you have described: https://snack.expo.io/Bk9-6VNLW.
You can accomplish the UI change by mutating the state of your row component which will trigger the update of your component. And by reading the deleted state, you can decide what components to render whether is a set of <TouchableHighlight>' buttons or just a` component.
I have a form in a UIView which consist of multiple textfields, couple of textviews and two fields that are interacted with by the means of an invisible button overlaid on them. When you click on a textfield, the keyboard pops up for text entry and I added a toolbar on it for navigating to the previous and next data entry (whatever the data entry is, be it a textfield, textview or one of the two special cases that are interacted with a button). Now, when I navigate with between textfields with those buttons everything works fine. My scrollview's content moves along the element that becomes the firstresponder (with the help of a piece of code from stackoverflow that scrolls the view while taking into account the height of the keyboard that hides a good portion of it). Here is a visual example.
The problem arises when I want to switch out of a specific data entry (date) that interacts with a hidden button. I'll give some context first. Those data entries show datepickers (one for the date, another for the time) in action sheets, and those action sheets also have navigating button in a toolbar, like so.
The code from stackoverflow that readjust the view do so in the didBeginEditing delegate methods of the textfields and textviews, so when I assign them first responder the scrollview adjust itself while taking into account the keyboard.
This means that, in the case that I switch into a special data entry, I manually move the scrollview's content so I can view the next element. When I switch from a special entry into a textfield I assume that the previously mentioned code from stackoverflow kicks in and adjust the view. It actually does when I move from the hour data entry (which uses a datepicker in an actionsheet) into the next element which is a textfield. However, when I'm at the date data entry (which is directly before the hour data entry) and press previous to assign the first responder to the textfield above it, the scrollview goes way ahead the text field, like so.
What's important to note is that this problem only occurs when the textfield is not in view. This makes me suspect that I'm incorrectly using the code that readjust the view. For instance, there is a constant in the code that represents the height of the keyboard. I tried changing it from 216 to 260 (so it takes into account my toolbar added on top of the keyboard) but this results in strange black artifacts near the buttom that only occasionally appears.
I'm kind of lost in this bug, and my post is already pretty long. I've prepared an example of my problem in a new project, if any of you could take a look into it I'd be very appreciative.
Here it is
I have a row of 5 buttons, of which only one button should be "selected" at once. I call
[button setSelected:YES]
triggered by the corresponding IBAction to set the state of a touched button to "selected".
Is it possible to create some sort of button group where only the latest touched button of the row shows as selected and all others switch back to their "default" state? (kind of like radio buttons)
Is it possible to create some sort of button group where only the
latest touched button of the row shows as selected and all others
switch back to their "default" state? (kind of like radio buttons)
So radiobuttons then? A nice implementation called MNMRadioGroup does exactly that.
However, iOS also includes the native UISegmentedControl object which only allows one section to be selected at a time.
I have a tabpanel with 4 lists as child items. When each list is shown I want to load it's data. When I launch the app all 4 show events fire even though only the first tab is active. Is this how it's supposed to be? I could use activeitemchange of the tabpanel to populate the lists but I want to keep the code separate for each list. It doesn't make sense having the tabpanel control it's child items.
There's another event call 'painted' which fires whenever a component as actually shown to the user. I don't know what the difference between 'show' and 'painted' is but this seems to fix my problem.