I'm trying to create a tabbed section for comments in react, one tab for personal comments and one tab for others comments. I'm using react-tabs package for creating tabs and tab panels and simple-react-comment package inside it to show comments.
Loading old comments from database is done, and the user is able to insert new comment. but the problem is that new inserted comment won't be shown unless you change tabs. I tried setting selectedIndex to change selected tab programmatically. but couldn't get what I wanted.
How can I re-render the tabs component so that new comments be shown?
Related
I have a component with some tabs. Each tab selector loads its own datagrid. After a tab has been selected and its datagrid has been loaded, the datagrid should be essentially cached so that toggling away and back to the tab should simply write out the previous datagrid that was loaded/cached. The datagrid entity that gets loaded for each tab/entity essentially looks like this:
<MyDataGrid entity={entity} />
I've wrapped the datagrid component definition with the memo() function like this:
const MyDataGrid = memo((props: IncludeListProps): React.ReactElement => {
debugger;
});
However, the debugger breakpoint is getting hit within the component every time. What is the sequence of steps that you would use to go about troubleshooting something like this?
UPDATE
Providing some additional info based on comments below. A tab strip on top refreshes the display div underneath. So yes the props of MyDataGrid change (eg props.entity.id).
But what I need to do is figure out the best way to cache/memoize each MyDataGrid created per tab. I'm thinking maybe a div collection where each div will be reserved to hold MyDataGrid for a specific tab. Then divs will display inline/none based on the current tab selection. Does this seem like the most straightforward approach?
I'm new using Codename One. I'm doing an app which have a Form, that has a Tab component with 14 tabs inside, every tab has a gridlayout with 42 buttons, and I want to change a property in one button.
The problem is that I don't know how to reach that button.
tabG.getContentPane().components.get(index)
tabG is the tab component, and I can reach the tab that I need, but after that I don't know how to reach the button index I want to change.
I tried
tabG.getContentPane().components.get(index).components.get(indexbutton)
But even can't compile this code.
I'll apprecciate any help.
When you create the tab you need to prepare information to find the component later. E.g. if all tabs derive from the same class then just do something like:
MyBaseContainer cnt = (MyBaseContainer)tabs.getTabComponentAt(index);
Button theButtonINeed cnt.getMyImportantButton();
If this is more complicated you can use setName() or putClientProperty to prepare hints for you during form construction.
I am looking to implement a Tabs component containing lots (7-9) Tab components for a desktop view. I do not want to use the scrollable tabs when it exceeds the viewport width on the Tabs, instead I want the extra Tab items to be in a More dropdown menu just like the example docs show below:
Questions:
What is the intended implementation to achieve this? I actually would like the exact same functionality they describe as well where when I click an item from the dropdown above (for example, books), that will swap positions with the Tab directly to the left of the More dropdown, as shown in this screenshot from the doc:
Specifically, is the More dropdown a Tab component, or a Dropdown Menu component?
When using, how does selecting a tab/option from the More Dropdown work by default? (ex: will the selected tab then get moved to the visible tab portion, just like the screenshots?). Or does this need to be done manually to achieve that result?
Lastly, are there links to any examples of this usage?
Late, but it may help someone.
I was able to achieve dropdown within tabs by using the popover component.
https://codesandbox.io/s/436906013w
It has three tabs - One, Two and Three. Clicking on Tab 'Three' will perform the normal tab change. Clicking on the dropdown arrow next to tab 'Three' will provide the additional options.
It is not an exact solution to the question but can be achieved with a similar approach.
I created logic with MUI List, u can customize it with MUI tabs.
I calculate the width al all items and check if we have enough space, if not I added more button with dropdown and added the rest inside. Be aware that now it does not recalculate if the width or length of items changed
https://codesandbox.io/s/muddy-paper-941ff?file=/src/App.js
I am learning Ionic and I am stuck in one place because I want to change my default tabs layout to other one.
When I change to state where I reload my tabs layout, in new layout there is always selected second one, no matter what I do... I want first tab to be selected.
Here is plnkr. Go to friends, click one and look on tabs at bottom. Second one is active :(
$ionicTabsDelegate is not working (Or I have done something wrong)
http://plnkr.co/edit/AGNLaMqY6Hzbm5SVcgwI
Do you have any ideas why it's happening?
I have a prism application already in production.
I need to create a new module in this application.The module can either exist on not exist in the application depending on the configuration file.
This module view should be dispalyed in a region already existing. The view should only be visible when the module is loaded.
Problem: the existing screen has a region showing 2 tab items from 2 different modules. Now the new view should be part of the first tab and it gives the user the option to select whether to view the previous info or the new info from this new module.
I am stuck and dont know how I am going to show these checkboxes when the new module is loaded and hide it when it is not. Where do I put this logic?
Current scenario:
Very vague images to define what i meant?
Here's an option that will work, and isn't too much effort...
Inside your beautifully illustrated Tab1, add another tab control, and make this a Prism region. Fill this region with both the original view, and the view from your new module.
Then, restyle the inner tab control, if necessary, so the tab headers appear like radio buttons, and set up a datatrigger to hide the tab header strip if the number if tabs is less than or equal to 1.
Thanks for all your help :)
After a lot of RND i figure it out.
I have created a two tabcontrol regions one for the main tab and the other for the child tab.
on the child tab i have return style to display tabitem only if item.count is more then 1 as suggested by mark.
and i have put this code in my existing module.