I'm talking about the UI as seen in this screenshot. In that program, macOS Finder, you have a column on the left, which lists all the items inside a directory. If you click an item, and that item is itself a directory, a new column opens on the right containing all its entries, and this repeats forever.
I'd like to write a UI like this using React for a simple text-editing web application. Each column would contain folders or text 'files'. Clicking a folder would open that folder's children in the next column over; clicking a text 'file' would place its text in a textarea element for reading or editing.
But I can't figure out how to structure the data.
I think I'd want a sort of tree, where nodes can be either text-files or folders/trees themselves. But how would I then render that tree in React, what pattern of components could I use? Would I render the top level of the current tree into one column component, and have an onclick handler in that component that adds a new column to the parent if a subfolder gets clicked? And if so, would I pass that component some reference to a sub-part of the tree, or pass over the entire portion of that tree?
You can use the material UI Menu component. It lets you have subMenus as well
http://www.material-ui.com/#/components/menu
Related
I'm using a Material UI table and trying to expand the TableRow inside collapse table but I have a problem. Currently, my list all have collapses but they are linked to one state for "open" so if I open one list, all the other lists open.
What is the best way to keep the collapses separate from each other without having a lot of states for each list.
Please check the code here:
https://codesandbox.io/s/collapsetable-2wp59
What am I doing wrong? Could you show me how to do it?
Just move a row with Collapse into separate component and handle open/close logic inside.
Thus every row will have own open state and update function.
Here is your updated example: https://codesandbox.io/s/collapsetable-forked-kj8v6
I'm new to reactJS, get confused when trying to create dynamic (antd) tab.
Basically, i have two layers in Application, the first one is Sidemenu Bar, located on left of the screen, and the second layer is content pages, which represented with Tabs.
The Sidemenu has some variable numbers of menu buttons (modules). When each button are pressed, then React will render that module (each module represent by individual JSfile) to the content layer, inside a new Tab panel. The module page itself, can be duplicated on the Tab.
To do that I created a sidemenu.js which contain a menu buttons (and its corresponding URL), and appPages.js to hold that Tabs that will render the specific module(s).
How to make it possible ? where I should write the routes (react-router-dom) ?
I search for this topic, and found it solved using the same js file, not the separated file or component.
Please check my sandbox here : https://codesandbox.io/s/dynamictabs-83mop
Thank you. Really appreciated for any help, and so sorry about my english.
My aim is create custom event on Text Component. When I choose one word or when I highlight couple of words, event should fire to open a "buble view" upon, below or near that specific text.
I have found this package here react-native-selectable-text but it does not provide the functionality that I want.
https://github.com/Astrocoders/react-native-selectable-text
Two steps
1) How to create that selectable action. I am not talking about Text prop selectable which only opens a menu of copy, paste, select all options. I want to open a view like that menu. A view which will contain information about highlighted text.
2) How I can render a small box(View comp.) with specific coordinates. Like when I choose that text, box has to be rendered upon or below of the text.
I know direct manipulation. But hard part is how am I going to give that select&highlight action to text component?
I'm using 3 levels tree VO's. All three VO's has bind variables. The VO's are connected via View link. I'm using createViewLinkAccessorRS in order to pass the variables from parent to child VO.. i defined Target Data Source (EL_expression) for second and third level.The tree works fine, and the nodes filled correctly (all the way down). The Problem is that the second and the third tree level attributes are only shown in the tree component. anywhere else in the page it looks like they are empty ({bindings.(attname).inputValue} = null) (E.g - after dragging the third tree level "FlowOrder" from the AppModuleDataControl and create a form out of it, and selecting the second node of the tree will update all the third level tree node (please see attached image), but will leave the entire form which was just created empty)
Any idea why the FlowOrder bindings are empty? i assume that maybe it has to do with the bind variable of the VO .. i even thought i would change the tree selection listener so on the second level click it will perform a full query of "FlowOrder" via executewithparams, but it does not make any sense because the data was fetched already after clicking level 2 tree)
(Jdeveloper : 12.2.1.2.0)
attached image: Details
Check out my explanation on trees and example application in another post: ADF filter table based on tree selection The tree shows data from view link accessors. The form shows data from view instance. They are in different state.
I have just started using visual studio c++ (2010) with windows forms, but have cannot for the life of me find out how to create new UI items in response to events. What I would want to happen is click a button, and have a new row, with a couple of text boxes and buttons appear, with onebutton to delete the row if I keep clicking, more rows will appear, named row0, row1 etcv. I looked at this page, (http://msdn.microsoft.com/en-us/library/aa984255(v=vs.71).aspx), about adding controls programmatically, but when I add a new text box inside a click event, the text box is only created inside the scope of the event (as expected!), but I want to be able to create it insde the newRow click event, but access it and . I thought of making a 'row' class, with row.text and row.deleteButton properties, and at each creation of a row, respective events will be created for button clicks and text edits.
Is there anyway to do this, ie a function that can be created that creates new objects by passing the required name?
The trick for this to work is that you need to have declarations outside of the event handler to keep track of the newly added UI components. In the link you've given the added TextBox is locally scoped within the event function, and this will be removed from the heap (i.e. memory) when the event is finished.
So one solution would be to add a list of UI components to your form, and then have the events add to or remove from this list of components. To get this solution working you possibly need to read up on lists of objects (or possibly dictionaries) and how to handle these.
Sorry for a rather general answer, but the question is also very broad... :)