I have below array of route objects having structure below, i am trying to hide menu option Construction and all submenu's under that menu option with the bool variable
const libraryRoutes = ({ isAuth }) => ({
title: 'Library',
icon: <BookOutlined />,
homePath: '/library',
children: [
{
.......
},
{ isDevelopmentMode && { // at here i am getting syntax error
type: 'subMenu',
title: 'Construction',
icon: <ReconciliationOutlined />,
children: [
{
path: '/library/construction-material-type',
exact: true,
title: 'Construction Material Type',
icon: <ReconciliationOutlined />,
},
{
path: '/library/construction-set',
exact: true,
title: 'Construction Set',
icon: <ReconciliationOutlined />,
}
]
}},
{
.......
}
]
});
I am getting syntax error as shown in above code, could any one please let me know how to hide based on routes variable
Try wrapping your ternary condition in (). Else you can build your object outside of the returned value as follow :
const libraryRoutes = ({ isAuth }) => {
const routesForDev = () => {
if (!isDevelopmentMode){
return {};
}
return {
type: 'subMenu',
title: 'Construction',
icon: <ReconciliationOutlined />,
children: [
{
path: '/library/construction-material-type',
exact: true,
title: 'Construction Material Type',
icon: <ReconciliationOutlined />,
},
{
path: '/library/construction-set',
exact: true,
title: 'Construction Set',
icon: <ReconciliationOutlined />,
}
]
}
}
return {
title: 'Library',
icon: <BookOutlined />,
homePath: '/library',
children: [
{
.......
},
routesForDev(),
{
.......
}
]
}
};
Related
In the project there is an array of objects used for populating the breadcrumb:
export const BREADCRUMBS_LIST = [
{ label: 'Home', path: '/', active: false },
{ label: 'Account', path: '/accounts', active: false },
{ label: 'This Account', path: '/accounts', active: true }
];
it is used to populate the list in the Breadcrumbs component:
import { BREADCRUMBS_LIST } from './...'
...
<Breadcrumbs list={BREADCRUMBS_LIST} />
Everything works fine.
The problem appears when we need to translate those labels based on the user's language. For this, we are using react-intl.
So, I transformed the original array into a component of this form:
import { useIntl } from 'react-intl';
export const BreadcrumbsList = () => {
const intl = useIntl();
return [
{ label: intl.formatMessage({ id: 'Home' }), path: '/', active: false },
{
label: intl.formatMessage({ id: 'Account' }),
path: '/accounts',
active: false
},
{
label: intl.formatMessage({ id: 'This Account' }),
path: '/accounts',
active: true
}
];
};
and use it like this:
<Breadcrumbs list={BreadcrumbsList} />
it seems to be wrong because it returns an error saying:
Cannot read property 'map' of undefined.
In that component, the list was used with map: {list.map(({path, label, active}, index) => {...})
Any ideas how to solve this problem?
Your BreadcrumbsList is actually a custom hook, in order to stick with the Rules of Hooks you need to call it on component's level:
// Add "use" prefix as its a custom hook
const useBreadcrumbsList = () => {
const intl = useIntl();
return [
{ label: intl.formatMessage({ id: "Home" }), path: "/", active: false },
{
label: intl.formatMessage({ id: "Account" }),
path: "/accounts",
active: false,
},
{
label: intl.formatMessage({ id: "This Account" }),
path: "/accounts",
active: true,
},
];
};
// Usage
const Component = () => {
const breadcrumbsList = useBreadcrumbsList();
return <Breadcrumbs list={breadcrumbsList} />;
};
I am trying to send querystring parameters to another page using history object in the button click event like as below
const viewChange = (record) => {
debugger;
history.push('/Viewchange?id=record.id&dataid=record.dataid');
};
and this is route where i have defined in routes.js file
{
path: '/Viewchange/:id/:dataid',
exact: true,
title: 'Viewchange',
icon: 'dashboard',
breadcrumbs: ['dashboard'],
contentComponent: ViewChangeRequest,
isEnabled: () => false,
},
some how i am getting an empty page with url below
http://localhost:3000/Viewchange?id=record.id&dataid=record.dataid#
I am not sure where i am doing wrong in this case, Could any one please let me know how to attach querystring values to url
the below code is the component which i am going to redirect
const ViewChangeRequest = (props) => {
};
export default withRouter(ViewChangeRequest);
many thanks in advance
complete route.js code
[
{
path: '/',
exact: true,
title: 'Dashboard',
icon: 'dashboard',
breadcrumbs: ['Dashboard'],
contentComponent: UserDashboard,
isEnabled: () => true,
},
{
type: 'subMenu',
title: 'Codes and Guidelines',
children: [
{
path: '/LocalCodes',
exact: true,
title: 'Local Codes',
icon: 'dashboard',
breadcrumbs: ['Codes and Guidelines', 'Local Codes'],
contentComponent: AddLocalCode,
isEnabled: () => true,
},
],
},
{
type: 'subMenu',
title: 'Design Criteria',
children: [
{
path: '/Climate',
exact: true,
title: 'Climate',
icon: 'dashboard',
breadcrumbs: ['Design Criteria', 'Climate'],
contentComponent: ContentClimate,
isEnabled: () => true,
},
],
},
{
path: '/Viewchange/:id/:dataid',
title: 'Viewchange',
icon: 'dashboard',
breadcrumbs: ['dashboard'],
contentComponent: ViewChangeRequest,
isEnabled: () => false,
},
];
You need to use backtick character (template literals) to dynamically construct your url.
history.push(`/Viewchange?id=${record.id}&dataid=${record.dataid}`);
There are two ways to construct dynamic Urls:
Using Strings - history.push('/Viewchange?id=' + record.id + '&dataid=' + record.dataid);
Using Bactick -
history.push(`/Viewchange?id=${record.id}&dataid=${record.dataid}`);
Initially at first screen,
const appLaunchedListener = Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
component: {
name: 'StartScreen',
}
}
});
});
Then, using Navigation.push(...) to new page, at this point onwards I want to start using bottomTabs.
I have tried this at NewScreen:
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
children: [{
component: {
name: 'NewScreen',
},
}],
options: {
bottomTab: {
text: 'NEW',
icon: {
scale: 15,
uri: 'new_grey'
},
selectedIcon: {
scale: 15,
uri: 'new_gold'
},
}
},
},
},
{
stack: {
children: [{
component: {
name: 'NotificationScreen',
},
}],
options: {
bottomTab: {
text: 'NOTIFICATION',
icon: {
scale: 15,
uri: 'notification_grey'
},
selectedIcon: {
scale: 15,
uri: 'notification_gold'
},
}
},
},
},
]
}
}
});
With my codes now, the bottom tabs does not appear.
How can I achieved my expceted result?
With V1, I can just use these handler: startSingleScreenApp(...) & startTabBasedApp(...)
The codes provided already worked fine. The problem lies in where to put the codes.
You can call the Navigation.setRoot(...) again in any of your screen but it should be inside of the exported class.
Like this:
...
export default class NewScreen {
constructor(props) {
super(props);
}
startTabScreen = () => {
const tabs = [{ ... }];
Navigation.setRoot({
root: {
bottomTabs: {
children: tabs
}
}
});
}
componentDidMount() {
this.startTabScreen();
}
...
}
I am having a bit of trouble implementing the sideMenu to the following code: (see the startTabs).
I call this after "login" is clicked on my root screen. The root screen looks like the following:
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: "navigation.playground.WelcomeScreen",
passProps: {
text: "stack with one child"
},
alignment: "center",
options: {
topBar: {
visible: true,
title: {
text: "main screen"
}
}
}
}
}]
}
}
});
const startTabs = () => {
Promise.all([
Icon.getImageSource("md-map", 30),
Icon.getImageSource("ios-share-alt", 30)
]).then(sources => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: "navigation.playground.FindPlaceScreen",
options: {
bottomTab: {
text: "Find Place",
icon: sources[0]
},
topBar: {
visible: true,
title: {
text: "Find Place"
}
}
}
}
}
]
}
},
{
stack: {
children: [{
component: {
name: "navigation.playground.SharePlaceScreen",
options: {
bottomTab: {
text: "Share Place",
icon: sources[1]
},
topBar: {
// visible: true,
title: {
text: "Share Place"
}
}
}
}
}]
}
}
]
}
}
});
});
};
Now in order for me to implement sideMenu after login, Would I implement it in the "startTabs"? or elsewhere?
Solved this. Sorry I am a new programmer, so I had a spelling mistake in my sideDrawer component where "render" was spelled "redner". Took me the longest time to figure this out!!!
Otherwise the code I pasted in initial question is correct (for anyone who looks at this for reference). Thanks!
i'm doing a project with VueJS, Lodash and Babel, and my problem is that i need to populate a sidebar in my app with routes from a routes.js file. Problem is i don't really know how i can retrieve the data i need.
export default [
{
path: "/admin/login",
name: "admin.login",
component: Login
},
{
path: "/admin",
component: MasterLayout,
meta: { auth: true },
children: [
{
path: "/admin/dashboard",
alias: "/",
menu: { text: "", icon: ""},
name: "admin.dashboard",
component: DashboardIndex
}
]
},
{
path: '/403',
name: 'error.forbidden',
component: ErrorForbidden
},
{
path: "*",
name: 'error.notfound',
component: ErrorPageNotFound
}
];
That is my routes file, i basically need to iterate over each route, check if it has children or a menu property, if it has a menu it gets added to my list of sidebar items, and it's children get added as well with their own menu properties being withdrawn
In the end i'd like to get something like the following
sidebarItems: [
{
name: 'Dashboard',
icon: 'dashboard',
name: 'admin.dashboard'
},
{
name: 'OtherRoute',
icon: 'other-route',
name: 'admin.other-route',
children: [
{
name: 'SubRoute',
icon: 'sub-route',
name: 'admin.sub'
}
]
}
]
This should only account for the routes that contain a menu property.
You basically need iterate recursive over the array, so please try this:
function iterateArrayRoutes(routeArray) {
if(routeArray instanceof Array) {
var routeFormatted = routeArray.reduce(function(last, route){
if (route.hasOwnProperty("menu")) {
var item = {
name: route.name,
icon: route.menu.icon
};
if(route.hasOwnProperty("children") && route.children.length > 0) {
item.children = iterateArrayRoutes(route.children);
}
last.push(item);
}
return last;
}, []);
return routeFormatted;
}
};
Here you have a Demo https://jsfiddle.net/vm1hrwLL/