Skip to content

Commit

Permalink
Extract Breadcrumbs to a Component, close #51
Browse files Browse the repository at this point in the history
  • Loading branch information
Jovert Lota Palonpon committed Apr 28, 2019
1 parent 86f718e commit f924fef
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 86 deletions.
106 changes: 106 additions & 0 deletions resources/js/ui/Breadcrumbs.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link as RouterLink } from 'react-router-dom';

import { Link, Typography, withStyles } from '@material-ui/core';

import { Breadcrumbs as MuiBreadcrumbs } from '@material-ui/lab';

import { Home as HomeIcon } from '@material-ui/icons';

import * as NavigationUtils from '../utils/Navigation';
import * as StringUtils from '../utils/String';

function Breadcrumbs(props) {
const { classes, segments, blacklistedSegments, ...other } = props;

return (
<MuiBreadcrumbs arial-label="Breadcrumb" {...other}>
{segments.length > 0 ? (
<Link
color="inherit"
component={linkProps => (
<RouterLink
{...linkProps}
to={NavigationUtils.route('backoffice.home')}
/>
)}
className={classes.breadcrumb}
>
<HomeIcon className={classes.icon} />
</Link>
) : (
<HomeIcon className={classes.icon} />
)}

{segments.map((segment, key) => {
const renderText = (
<Typography key={key} className={classes.breadcrumb}>
{StringUtils.uppercaseFirst(segment)}
</Typography>
);

// Make a blacklisted segment plain text
if (blacklistedSegments.indexOf(segment) > -1) {
return renderText;
}

// The last segment should be plain text
if (key + 1 === segments.length) {
return renderText;
}

// Make numeric segment hidden
if (!isNaN(parseInt(segment))) {
return null;
}

return (
<Link
key={key}
color="inherit"
component={linkProps => (
<RouterLink
{...linkProps}
to={
'/' +
segments
.filter(
(s, i) =>
i <= segments.indexOf(segment),
)
.join('/')
}
/>
)}
className={classes.breadcrumb}
>
{StringUtils.uppercaseFirst(segment)}
</Link>
);
})}
</MuiBreadcrumbs>
);
}

Breadcrumbs.propTypes = {
segments: PropTypes.array.isRequired,
blacklistedSegments: PropTypes.array,
};

Breadcrumbs.defaultProps = {
blacklistedSegments: [],
};

const styles = theme => ({
breadcrumb: {
display: 'flex',
},

icon: {
marginRight: theme.spacing.unit / 2,
width: 20,
},
});

export default withStyles(styles)(Breadcrumbs);
2 changes: 1 addition & 1 deletion resources/js/ui/Dropzone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ function Dropzone(props) {
classes.fileName,
)}
>
{StringUtils._limit(file.name, 10)}
{StringUtils.limit(file.name, 10)}
</Typography>

<Tooltip
Expand Down
1 change: 1 addition & 0 deletions resources/js/ui/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import loadable from '@loadable/component';

export const Breadcrumbs = loadable(() => import('./Breadcrumbs'));
export const Dropzone = loadable(() => import('./Dropzone'));
export const Modal = loadable(() => import('./Modal'));
export const Skeleton = loadable(() => import('./Skeleton'));
Expand Down
93 changes: 8 additions & 85 deletions resources/js/views/__backoffice/layouts/Master.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link as RouterLink } from 'react-router-dom';

import classNames from 'classnames';
import {
Expand All @@ -9,18 +8,10 @@ import {
CssBaseline,
Grid,
Hidden,
Link,
Typography,
withStyles,
} from '@material-ui/core';

import { Breadcrumbs } from '@material-ui/lab';

import { Home as HomeIcon } from '@material-ui/icons';

import * as NavigationUtils from '../../../utils/Navigation';
import * as StringUtils from '../../../utils/String';
import { Snackbar, Modal } from '../../../ui';
import { Breadcrumbs, Snackbar, Modal } from '../../../ui';
import { LinearDeterminate } from '../../../ui/Loaders';
import { Footer, Header, Sidebar } from '../partials';

Expand Down Expand Up @@ -91,13 +82,6 @@ function Master(props) {
} = props;
const { nightMode } = pageProps;

const segments = location.pathname
.split('/')
.splice(1)
.filter(segment => segment.length > 0);

const segmentBlacklist = ['resources', 'analytics'];

const renderLoading = (
<Grid
container
Expand All @@ -123,65 +107,13 @@ function Master(props) {
}}
>
<div className={classes.breadcrumbWrapper}>
<Breadcrumbs arial-label="Breadcrumb">
{segments.length > 0 ? (
<Link
color="inherit"
component={linkProps => (
<RouterLink
{...linkProps}
to={NavigationUtils.route(
'backoffice.home',
)}
/>
)}
className={classes.breadcrumbItem}
>
<HomeIcon className={classes.breadcrumbItemIcon} />
</Link>
) : (
<HomeIcon className={classes.breadcrumbItemIcon} />
)}

{segments.map((segment, key) => {
const renderText = (
<Typography
key={key}
className={classes.breadcrumbItem}
>
{StringUtils.uppercaseFirst(segment)}
</Typography>
);

if (segmentBlacklist.indexOf(segment) > -1) {
return renderText;
}

if (key + 1 === segments.length) {
return renderText;
}

if (!isNaN(parseInt(segment))) {
return null;
}

return (
<Link
key={key}
color="inherit"
component={linkProps => (
<RouterLink
{...linkProps}
to={'/' + segment.split('/').join('.')}
/>
)}
className={classes.breadcrumbItem}
>
{StringUtils.uppercaseFirst(segment)}
</Link>
);
})}
</Breadcrumbs>
<Breadcrumbs
segments={location.pathname
.split('/')
.splice(1)
.filter(segment => segment.length > 0)}
blacklistedSegments={['resources', 'analytics']}
/>
</div>
</AppBar>
);
Expand Down Expand Up @@ -318,15 +250,6 @@ const styles = theme => ({
padding: theme.spacing.unit * 3,
},

breadcrumbItemIcon: {
marginRight: theme.spacing.unit / 2,
width: 20,
},

breadcrumbItem: {
display: 'flex',
},

contentWrapper: {
flex: 1,
display: 'flex',
Expand Down

0 comments on commit f924fef

Please sign in to comment.