I would like to implement in React Js an application which can read file from a directory. Basically, given the root dir what we want is to run trough all the sub dirs and build a tree structure, maybe in JSON format but any suggestion is apprechiated.
I tried using node.js filesystem readdir function but how to build a tree of subfolders?
Below is the JSON I would like to build automatically after reading from the root folder.
Thanks to anyone who will answer me.
[
{
value: '/app',
label: 'app',
children: [
{
value: '/app/Http',
label: 'Http',
children: [
{
value: '/app/Http/Controllers',
label: 'Controllers',
children: [{
value: '/app/Http/Controllers/WelcomeController.js',
label: 'WelcomeController.js',
}],
},
{
value: '/app/Http/routes.js',
label: 'routes.js',
},
],
},
{
value: '/app/Providers',
label: 'Providers',
children: [{
value: '/app/Providers/EventServiceProvider.js',
label: 'EventServiceProvider.js',
}],
},
],
},
{
value: '/config',
label: 'config',
children: [
{
value: '/config/app.js',
label: 'app.js',
},
{
value: '/config/database.js',
label: 'database.js',
},
],
},
{
value: '/public',
label: 'public',
children: [
{
value: '/public/assets/',
label: 'assets',
children: [{
value: '/public/assets/style.css',
label: 'style.css',
}],
},
{
value: '/public/index.html',
label: 'index.html',
},
],
},
{
value: '/.env',
label: '.env',
},
{
value: '/.gitignore',
label: '.gitignore',
},
{
value: '/README.md',
label: 'README.md',
},
];
Related
I am trying to change a hardcoded array within another JSX file.
the first file routes.js. I tried loading the array then changing it . it just changes the loaded data not the array directly from the other file. How do i write to the other JSX array from the main component.
const routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
{
type: "collapse",
name: "Products",
key: "products",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
export default routes;
code used in main jsx file. I want to be able to write to the remote array changing its values.
const handleSubmit = (event) => {
event.preventDefault();
// I want to push or filter with the code below
{
routes.length = 0;
routes.map((route) => console.log({ route }));
}
};
You can't change the array itself because it's a const. You could change it to a let and then export it like this:
EDIT
export let routes = [
{
type: "collapse",
name: "Our Mission",
key: "dashboards",
icon: <Shop size="12px" />,
collapse: [
{
name: "Ways We can Help",
key: "default",
route: "/dashboards/default",
component: Default,
},
{
name: "How It Works",
key: "automotive",
route: "/dashboards/automotive",
component: Automotive,
},
{
name: "Who We Are",
key: "smart-home",
route: "/dashboards/smart-home",
component: SmartHome,
},
],
},
{ type: "title", title: " ", key: "space1" },
{
type: "collapse",
name: "Services",
key: "services",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
{
type: "collapse",
name: "Products",
key: "products",
icon: <Shop size="12px" />,
href: "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro-material-ui/blob/main/CHANGELOG.md",
component: Default,
noCollapse: true,
},
];
Then to use it in another jsx component you can import it like this.
import {routes} from '../yourPathToIt/main'
I have the following custom JointJS element defined:
joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
{
size: { width: 400, height: 100 },
attrs: {
body: {
strokeWidth: 2,
stroke: '#000000',
fill: '#FFFFFF',
},
},
},
{
markup: [
{
tagName: 'g',
selector: 'g1',
attributes: {
class: 'rotatable',
},
children: [
{
tagName: 'g',
selector: 'g2',
attributes: {
class: 'scalable',
},
children: [
{
tagName: 'path',
selector: 'body',
attributes: {
d: 'm0,0l0,100l200,-25l200,25l0,-100l-200,25l-200,-25',
},
},
]
}
]
},
],
});
Using resize or scale on the shape does not resize it, however. It always ends up being 400x100.
I thought the issue originally was that it needed to be wrapped in a class="scalable" <g> but that didn't fix it either.
I also tried using<line>s instead of <path> but no luck.
Thanks!
The answer is in the refDResetOffset attribute, which (like the other ref custom attributes scales with the parent):
joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
{
attrs: {
body: {
strokeWidth: 2,
stroke: '#000000',
fill: '#FFFFFF',
refDResetOffset: 'm0,0l0,100l200,-25l200,25l0,-100l-200,25l-200,-25'
},
},
},
{
markup: [
{
tagName: 'g',
selector: 'g1',
attributes: {
class: 'rotatable',
},
children: [
{
tagName: 'g',
selector: 'g2',
attributes: {
class: 'scalable',
},
children: [
{
tagName: 'path',
selector: 'body',
},
]
}
]
},
],
});
i create a json-object and want to write this down to a json-file, but the object is always empty (?)
fs.writeFileSync(__dirname + '/myNewFile.json', JSON.stringify(myObjects));
the content of the written file is now []
fs.writeFileSync(__dirname + '/myNewFile.json', JSON.stringify({bla: myObjects}));
the content of the file is now {"bla":[]}
I doublecheck myObjects and it is not empty.. it is a array with some objects in it.
why is that? what am I doing wrong?
EDIT:
this is the content of myObjects:
[ struct: { id: 'struct',
name: 'Struktur',
icon: 'fa fa-bullseye',
properties: [] },
mp: { id: 'mp',
name: 'Messpunkt',
icon: 'fa fa-circle',
properties: [] },
'356899e5-d8b0-41aa-b7cd-de2135c5a3db': { id: '356899e5-d8b0-41aa-b7cd-de2135c5a3db',
name: 'Untermessung',
icon: 'fa fa-tachometer',
properties: [] },
'8d824cfd-584f-40e9-b9fa-78d7fedcc727': { id: '8d824cfd-584f-40e9-b9fa-78d7fedcc727',
name: 'Kommune',
icon: 'fa fa-thumb-tack',
properties: [] },
'2609b2ac-77aa-42f2-af22-d49fcfc6f0f0': { id: '2609b2ac-77aa-42f2-af22-d49fcfc6f0f0',
name: 'Bereiche',
icon: 'fa fa-circle',
properties: [] },
'a4ac2e52-da95-412f-b431-499f2eff64da': { id: 'a4ac2e52-da95-412f-b431-499f2eff64da',
name: 'Gebäude',
icon: 'fa fa-industry',
properties: [ [Object], [Object] ] } ]
I need an example with sideMenu react-native-navigation v2. Ideally, I want to navigate from side menu component to other screens (e.g stack with bottom tabs, accounts screen, FAQs screen)
currently this is my layout
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'screen.SideMenu',
}
},
center: {
bottomTabs: {
id: 'tabs',
options: {
topbar: {
visible: true,
}
},
children: [
{
stack: {
id: 'tab1',
children: [
{
component: {
name: 'screen.Home',
options: {
topbar: {
visible: true
},
bottomTab: {
fontSize: 12,
text: 'Home',
icon: homeIcon,
textColor: theme.$tabColor,
selectedTextColor: '#000',
selectedIconColor: '#000',
}
}
},
},
]
}
},
{
stack: {
id: 'tab2',
children: [
{
component: {
name: 'screen.Events',
options: {
bottomTab: {
text: 'Events',
fontSize: 12,
icon: eventsIcon,
textColor: theme.$tabColor,
selectedTextColor: '#000',
selectedIconColor: '#000',
}
}
},
},
]
}
},
],
},
}
}
}
});
In my Side Menu component I am calling this function.
goToAccountsScreen = () => {
console.log(this.props.componentId)
Navigation.push(this.props.componentId, {
component: {
name: 'screen.Accounts',
}
})
}
how do I add the Accounts screen to my layout
I'm trying to build my container in the initialize() function by creating all my components then calling this.setItems([...]). For some reason, my components are being placed on top of each other, rather than after each other in the vbox.
I am able to grab the top component and move it down, as is shown in the attached image.
Simplified view with two components:
Ext.define("Sencha.view.DynamicView", {
extend: 'Ext.Container',
xtype: 'dynamic-view',
requires: [],
config: {
layout: {
type: 'vbox'
},
flex: 1,
cls: 'view-container',
store: null
},
createRadioSet: function() {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'About You',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}]
});
return this.radioFieldSet;
},
createCheckboxSet: function() {
this.checkboxFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'Check all that apply',
defaults: {
xtype: 'checkboxfield',
labelWidth: '40%'
},
instructions: 'Tell us all about yourself',
items: [{
name: 'firstName',
value: 'First',
label: 'First Name'
},
{
name: 'lastName',
value: 'Last',
label: 'Last Name'
}
]
}]
});
return this.checkboxFieldSet;
},
initialize: function() {
this.callParent(arguments); // #TDeBailleul - fixed
var r1 = this.createRadioSet();
var cbSet1 = this.createCheckboxSet();
// this.add(cbSet1);
// this.add(r1);
this.setItems([r1, cbSet1]);
}
});
My problem was that I was adding my components incorrectly in a tab controller. I'm including an example that creates buttons on one tab and the checkboxes on another tab.
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : ('SF' || 'SenchaFiddle'),
createRadioSet: function () {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
height: '300px',
width: '300px',
items: [
{
xtype: 'fieldset',
title: 'Title',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [
{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}
]
});
return this.radioFieldSet;
},
createButton: function(i) {
return Ext.create('Ext.Button', {
text: 'hello' + i,
height: '50px',
width: '100px'
});
},
launch: function () {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
padding: 2,
tabBarPosition: 'bottom',
items: [
{
id: 'tab1',
title: 'Home',
layout: 'hbox',
xtype: 'container',
iconCls: 'home'
},
{
id: 'tab2',
title: 'More',
layout: 'hbox',
xtype: 'container',
iconCls: 'star'
}
]
});
Ext.Viewport.add(tabPanel);
var a,b;
for (var i = 0; i < 3; i++) {
a = this.createButton(i);
b = this.createRadioSet();
// tabPanel.getAt(0).add(b); // Reference the proper component: Tab 1
Ext.getCmp('tab1').add(a);
Ext.getCmp('tab2').add(b);
}
}
});