21 | 
22 |
24 |
22 |
23 |
24 | {title}
25 |
26 |
27 | {desc}
28 |
29 |
30 | {children}
31 |
32 |
33 |
34 | );
35 | }
36 |
37 | PaperSheet.propTypes = {
38 | classes: PropTypes.object.isRequired,
39 | title: PropTypes.string.isRequired,
40 | desc: PropTypes.string.isRequired,
41 | children: PropTypes.node.isRequired,
42 | whiteBg: PropTypes.bool,
43 | colorMode: PropTypes.bool,
44 | noMargin: PropTypes.bool,
45 | overflowX: PropTypes.bool,
46 | };
47 |
48 | PaperSheet.defaultProps = {
49 | whiteBg: false,
50 | noMargin: false,
51 | colorMode: false,
52 | overflowX: false
53 | };
54 |
55 | export default withStyles(styles)(PaperSheet);
56 |
--------------------------------------------------------------------------------
/src/app/components/PapperBlock/papperStyle-jss.js:
--------------------------------------------------------------------------------
1 | const styles = theme => ({
2 | root: theme.mixins.gutters({
3 | paddingTop: theme.spacing.unit * 3,
4 | paddingBottom: theme.spacing.unit * 3,
5 | marginTop: theme.spacing.unit * 3,
6 | '&$noMargin': {
7 | margin: 0
8 | },
9 | }),
10 | title: {
11 | marginBottom: theme.spacing.unit * 4,
12 | paddingBottom: theme.spacing.unit * 2,
13 | position: 'relative',
14 | textTransform: 'capitalize',
15 | fontSize: 28,
16 | '&:after': {
17 | content: '""',
18 | display: 'block',
19 | position: 'absolute',
20 | bottom: 0,
21 | left: 0,
22 | width: 40,
23 | borderBottom: `4px solid ${theme.palette.primary.main}`
24 | }
25 | },
26 | description: {
27 | maxWidth: 960,
28 | fontSize: 16,
29 | },
30 | content: {
31 | marginTop: theme.spacing.unit * 2,
32 | padding: theme.spacing.unit,
33 | backgroundColor: theme.palette.background.default,
34 | },
35 | whiteBg: {
36 | backgroundColor: 'transparent',
37 | margin: 0,
38 | },
39 | noMargin: {},
40 | colorMode: {
41 | backgroundColor: theme.palette.secondary.main,
42 | '& $title': {
43 | color: theme.palette.grey[100],
44 | '&:after': {
45 | borderBottom: `5px solid ${theme.palette.primary.light}`
46 | }
47 | },
48 | '& $description': {
49 | color: theme.palette.grey[100],
50 | }
51 | },
52 | overflowX: {
53 | width: '100%',
54 | overflowX: 'auto',
55 | }
56 | });
57 |
58 | export default styles;
59 |
--------------------------------------------------------------------------------
/src/app/components/Search/search-jss.js:
--------------------------------------------------------------------------------
1 | const styles = theme => ({
2 | root: {
3 | flexGrow: 1,
4 | marginTop: 20,
5 | marginBottom: 40
6 | },
7 | flex: {
8 | flex: 1,
9 | },
10 | menuButton: {
11 | marginLeft: -12,
12 | marginRight: 20,
13 | },
14 | wrapper: {
15 | fontFamily: theme.typography.fontFamily,
16 | position: 'relative',
17 | marginRight: theme.spacing.unit * 2,
18 | marginLeft: theme.spacing.unit,
19 | borderRadius: 2,
20 | display: 'block',
21 | },
22 | search: {
23 | width: 'auto',
24 | height: '100%',
25 | position: 'absolute',
26 | pointerEvents: 'none',
27 | display: 'flex',
28 | alignItems: 'center',
29 | justifyContent: 'center',
30 | },
31 | input: {
32 | font: 'inherit',
33 | padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit * 4}px`,
34 | border: 0,
35 | display: 'block',
36 | verticalAlign: 'middle',
37 | whiteSpace: 'normal',
38 | background: 'none',
39 | margin: 0, // Reset for Safari
40 | color: 'inherit',
41 | width: '100%',
42 | '&:focus': {
43 | outline: 0,
44 | },
45 | },
46 | });
47 |
48 | export default styles;
49 |
--------------------------------------------------------------------------------
/src/app/components/Sidebar/OtherMenu.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { NavLink } from 'react-router-dom';
4 | import ListItem from '@material-ui/core/ListItem';
5 | import ListItemText from '@material-ui/core/ListItemText';
6 | import OtherMenuContent from 'ba-utils/otherMenu';
7 |
8 | class OtherMenu extends React.Component {
9 | render() {
10 | const { toggleDrawerOpen } = this.props;
11 | const getOtherMenu = menuArray => menuArray.map((item, index) => {
12 | const keyIndex = index.toString();
13 | return (
14 |
15 |
21 |
23 |
24 | );
25 | });
26 |
27 | return (
28 |
29 | {getOtherMenu(OtherMenuContent)}
30 |
31 | );
32 | }
33 | }
34 |
35 | OtherMenu.propTypes = {
36 | toggleDrawerOpen: PropTypes.func.isRequired,
37 | };
38 |
39 | export default OtherMenu;
40 |
--------------------------------------------------------------------------------
/src/app/components/Tables/CrudTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import MainTable from './tableParts/MainTable';
4 |
5 | class CrudTable extends React.Component {
6 | componentDidMount() {
7 | this.props.fetchData(this.props.dataInit, this.props.branch);
8 | }
9 |
10 | render() {
11 | const {
12 | title,
13 | dataTable,
14 | addEmptyRow,
15 | removeRow,
16 | updateRow,
17 | editRow,
18 | finishEditRow,
19 | anchor,
20 | branch
21 | } = this.props;
22 | return (
23 |
8 |
11 | );
12 | }
13 |
14 | export default EmptyData;
15 |
--------------------------------------------------------------------------------
/src/app/components/Tables/tableParts/SelectableCell.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Select from '@material-ui/core/Select';
4 | import MenuItem from '@material-ui/core/MenuItem';
5 | import TableCell from '@material-ui/core/TableCell';
6 | import css from 'ba-components/Table.scss';
7 |
8 | class SelectableCell extends React.Component {
9 | handleChange = event => {
10 | this.props.updateRow(event, this.props.branch);
11 | this.setState({ [event.target.name]: event.target.value });
12 | };
13 | render() {
14 | const {
15 | cellData,
16 | edited,
17 | options,
18 | } = this.props;
19 | return (
20 |
18 |
19 | {title}
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 |
38 |
39 |
44 |
45 | );
46 | }
47 | }
48 |
49 | export default PieCharts;
50 |
--------------------------------------------------------------------------------
/src/app/routes/Charts/RadarCharts.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { SourceReader, PapperBlock } from './../../components';
5 | import {
6 | RadarSimple,
7 | DoubleRadar
8 | } from './demos';
9 |
10 | class RadarCharts extends React.Component {
11 | render() {
12 | const title = brand.name + ' - Chart';
13 | const description = brand.desc;
14 | const docSrc = 'routes/Charts/demos/';
15 | return (
16 |
28 |
31 |
34 |
37 |
40 |
43 |
17 |
18 | {title}
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
31 |
32 |
37 |
38 | );
39 | }
40 | }
41 |
42 | export default RadarCharts;
43 |
--------------------------------------------------------------------------------
/src/app/routes/Charts/demos/AreaNegativePositive.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createMuiTheme } from '@material-ui/core/styles';
3 | import ThemePallete from 'ba-utils/themePalette';
4 | import {
5 | AreaChart,
6 | Area,
7 | XAxis,
8 | YAxis,
9 | CartesianGrid,
10 | Tooltip
11 | } from 'recharts';
12 | import { data2 } from './sampleData';
13 |
14 | const theme = createMuiTheme(ThemePallete.redTheme);
15 | const color = ({
16 | primary: theme.palette.primary.main,
17 | secondary: theme.palette.secondary.main,
18 | });
19 |
20 | const gradientOffset = () => {
21 | const dataMax = Math.max(...data2.map((i) => i.uv));
22 | const dataMin = Math.min(...data2.map((i) => i.uv));
23 |
24 | if (dataMax <= 0) {
25 | return 0;
26 | } else if (dataMin >= 0) {
27 | return 1;
28 | }
29 | return dataMax / (dataMax - dataMin);
30 | };
31 |
32 | const off = gradientOffset();
33 |
34 | function AreaNegativePositive() {
35 | return (
36 |
27 |
30 |
33 |
36 |
34 |
35 |
46 |
54 |
55 |
56 | );
57 | }
58 |
59 | BarResponsive.propTypes = {
60 | classes: PropTypes.object.isRequired,
61 | };
62 |
63 | export default withStyles(styles)(BarResponsive);
64 |
65 |
--------------------------------------------------------------------------------
/src/app/routes/Charts/demos/BarSimple.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createMuiTheme } from '@material-ui/core/styles';
3 | import ThemePallete from 'ba-utils/themePalette';
4 | import {
5 | BarChart,
6 | Bar,
7 | XAxis,
8 | YAxis,
9 | CartesianGrid,
10 | Tooltip,
11 | Legend
12 | } from 'recharts';
13 | import { data1 } from './sampleData';
14 |
15 | const theme = createMuiTheme(ThemePallete.redTheme);
16 | const color = ({
17 | primary: theme.palette.primary.main,
18 | secondary: theme.palette.secondary.main,
19 | });
20 |
21 | function BarSimple() {
22 | return (
23 |
27 |
28 |
39 |
47 |
48 |
49 | );
50 | }
51 |
52 | LineResponsive.propTypes = {
53 | classes: PropTypes.object.isRequired,
54 | };
55 |
56 | export default withStyles(styles)(LineResponsive);
57 |
--------------------------------------------------------------------------------
/src/app/routes/Charts/demos/LineSimple.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | LineChart,
4 | Line,
5 | XAxis,
6 | YAxis,
7 | CartesianGrid,
8 | Tooltip,
9 | Legend
10 | } from 'recharts';
11 | import { data1 } from './sampleData';
12 |
13 | function LineSimple() {
14 | return (
15 |
35 |
36 |
46 |
55 |
56 |
57 | );
58 | }
59 |
60 | ScatterResponsive.propTypes = {
61 | classes: PropTypes.object.isRequired,
62 | };
63 |
64 | export default withStyles(styles)(ScatterResponsive);
65 |
--------------------------------------------------------------------------------
/src/app/routes/Charts/demos/ScatterSimple.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createMuiTheme } from '@material-ui/core/styles';
3 | import ThemePallete from 'ba-utils/themePalette';
4 | import {
5 | ScatterChart,
6 | Scatter,
7 | XAxis,
8 | YAxis,
9 | CartesianGrid,
10 | Tooltip,
11 | } from 'recharts';
12 | import { data8 } from './sampleData';
13 |
14 | const theme = createMuiTheme(ThemePallete.cyanTheme);
15 | const color = ({
16 | primary: theme.palette.primary.main,
17 | });
18 |
19 | function ScatterSimple() {
20 | return (
21 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default DashboardV2;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Dashboard/dashboard-jss.js:
--------------------------------------------------------------------------------
1 | const styles = theme => ({
2 | root: {
3 | flexGrow: 1,
4 | },
5 | divider: {
6 | margin: `${theme.spacing.unit * 2}px 0`,
7 | background: 'none'
8 | },
9 | sliderWrap: {
10 | position: 'relative',
11 | display: 'block',
12 | boxShadow: theme.shadows[1],
13 | width: '100%',
14 | borderRadius: 4
15 | },
16 | dividerMini: {
17 | margin: `${theme.spacing.unit * 1.5}px 0`,
18 | background: 'none'
19 | },
20 | noPadding: {
21 | paddingTop: '0 !important',
22 | paddingBottom: '0 !important',
23 | [theme.breakpoints.up('sm')]: {
24 | padding: '0 !important'
25 | }
26 | }
27 | });
28 |
29 | export default styles;
30 |
--------------------------------------------------------------------------------
/src/app/routes/Forms/Rating.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { withStyles } from '@material-ui/core/styles';
6 | import { MarketingAds } from './../../components';
7 |
8 | const styles = ({
9 | root: {
10 | flexGrow: 1,
11 | }
12 | });
13 |
14 | class DateTime extends React.Component {
15 | render() {
16 | const title = brand.name + ' - Form';
17 | const description = brand.desc;
18 | return (
19 |
20 |
21 | {title}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
34 | );
35 | }
36 | }
37 |
38 | export default withStyles(styles)(DateTime);
39 |
--------------------------------------------------------------------------------
/src/app/routes/Forms/ReduxForm.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { withStyles } from '@material-ui/core/styles';
5 | import { SourceReader, PapperBlock } from './../../components';
6 | import { ReduxFormDemo } from './demos';
7 |
8 | const styles = ({
9 | root: {
10 | flexGrow: 1,
11 | }
12 | });
13 |
14 | class ReduxForm extends React.Component {
15 | state = {
16 | valueForm: []
17 | }
18 |
19 | showResult(values) {
20 | setTimeout(() => {
21 | this.setState({ valueForm: values });
22 | window.alert(`You submitted:\n\n${this.state.valueForm}`);
23 | }, 500); // simulate server latency
24 | }
25 |
26 | render() {
27 | const title = brand.name + ' - Form';
28 | const description = brand.desc;
29 | const docSrc = 'routes/Forms/demos/';
30 | return (
31 |
32 |
33 | {title}
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
46 |
47 | );
48 | }
49 | }
50 |
51 | export default withStyles(styles)(ReduxForm);
52 |
--------------------------------------------------------------------------------
/src/app/routes/Forms/SliderRange.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { withStyles } from '@material-ui/core/styles';
6 | import { MarketingAds } from './../../components';
7 |
8 | const styles = ({
9 | root: {
10 | flexGrow: 1,
11 | }
12 | });
13 |
14 | class DateTime extends React.Component {
15 | render() {
16 | const title = brand.name + ' - Form';
17 | const description = brand.desc;
18 | return (
19 |
42 | this.showResult(values)} />
43 |
45 |
20 |
21 | {title}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
34 | );
35 | }
36 | }
37 |
38 | export default withStyles(styles)(DateTime);
39 |
--------------------------------------------------------------------------------
/src/app/routes/Forms/Switches.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { withStyles } from '@material-ui/core/styles';
5 | import { SourceReader, PapperBlock } from './../../components';
6 | import { SwitchesInput } from './demos';
7 |
8 | const styles = ({
9 | root: {
10 | flexGrow: 1,
11 | }
12 | });
13 |
14 | class DateTime extends React.Component {
15 | render() {
16 | const title = brand.name + ' - Form';
17 | const description = brand.desc;
18 | const docSrc = 'routes/Forms/demos/';
19 | return (
20 |
21 |
22 | {title}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
35 |
36 | );
37 | }
38 | }
39 |
40 | export default withStyles(styles)(DateTime);
41 |
--------------------------------------------------------------------------------
/src/app/routes/Forms/TextEditor.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { withStyles } from '@material-ui/core/styles';
6 | import { MarketingAds } from './../../components';
7 |
8 | const styles = ({
9 | root: {
10 | flexGrow: 1,
11 | }
12 | });
13 |
14 | class DateTime extends React.Component {
15 | render() {
16 | const title = brand.name + ' - Form';
17 | const description = brand.desc;
18 | return (
19 |
31 |
34 |
20 |
21 | {title}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 | );
31 | }
32 | }
33 |
34 | export default withStyles(styles)(DateTime);
35 |
--------------------------------------------------------------------------------
/src/app/routes/Forms/Upload.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { withStyles } from '@material-ui/core/styles';
6 | import { MarketingAds } from './../../components';
7 |
8 | const styles = ({
9 | root: {
10 | flexGrow: 1,
11 | }
12 | });
13 |
14 | class DateTime extends React.Component {
15 | render() {
16 | const title = brand.name + ' - Form';
17 | const description = brand.desc;
18 | return (
19 |
20 |
21 | {title}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
34 | );
35 | }
36 | }
37 |
38 | export default withStyles(styles)(DateTime);
39 |
--------------------------------------------------------------------------------
/src/app/routes/Forms/demos/index.js:
--------------------------------------------------------------------------------
1 | // Redux Form
2 | export ReduxFormDemo from './ReduxFormDemo';
3 | // Date Time Picker
4 | export DateInput from './DateInput';
5 | export TimeInput from './TimeInput';
6 | export DateTimeInput from './DateTimeInput';
7 | // Checkbox and Radio
8 | export Checkboxes from './Checkboxes';
9 | export RadioButton from './RadioButton';
10 | // Switches
11 | export SwitchesInput from './SwitchesInput';
12 | // Selectbox
13 | export SimpleSelectbox from './SimpleSelectbox';
14 | export NativeSelectbox from './NativeSelectbox';
15 | export MultipleSelectbox from './MultipleSelectbox';
16 | export ControlledSelectbox from './ControlledSelectbox';
17 | // Buttons
18 | export StandardButtons from './StandardButtons';
19 | export FloatingButtons from './FloatingButtons';
20 | export CustomButtons from './CustomButtons';
21 | export ComplexButtons from './ComplexButtons';
22 | // Textfield
23 | export TextFields from './TextFields';
24 | export TextFieldsLayout from './TextFieldsLayout';
25 | export InputAdornments from './InputAdornments';
26 | export FormattedInputs from './FormattedInputs';
27 | // Autocomplete
28 | export AutoSuggest from './AutoSuggest';
29 | export TagSuggestions from './TagSuggestions';
30 | export SelectSuggestions from './SelectSuggestions';
31 | export SelectSuggestionTags from './SelectSuggestionTags';
32 | export HighlightSuggest from './HighlightSuggest';
33 |
--------------------------------------------------------------------------------
/src/app/routes/Layouts/demos/Centered.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import Paper from '@material-ui/core/Paper';
5 | import Grid from '@material-ui/core/Grid';
6 |
7 | const styles = theme => ({
8 | root: {
9 | flexGrow: 1,
10 | },
11 | paper: {
12 | padding: theme.spacing.unit * 2,
13 | textAlign: 'center',
14 | color: theme.palette.text.secondary,
15 | backgroundColor: theme.palette.secondary.light,
16 | },
17 | });
18 |
19 | function CenteredGrid(props) {
20 | const { classes } = props;
21 |
22 | return (
23 |
24 |
25 |
26 | xs=12
27 |
28 |
29 | xs=6
30 |
31 |
32 | xs=6
33 |
34 |
35 | xs=3
36 |
37 |
38 | xs=3
39 |
40 |
41 | xs=3
42 |
43 |
44 | xs=3
45 |
46 |
47 |
48 | );
49 | }
50 |
51 | CenteredGrid.propTypes = {
52 | classes: PropTypes.object.isRequired,
53 | };
54 |
55 | export default withStyles(styles)(CenteredGrid);
56 |
--------------------------------------------------------------------------------
/src/app/routes/Layouts/demos/FullWidth.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import Paper from '@material-ui/core/Paper';
5 | import Grid from '@material-ui/core/Grid';
6 |
7 | const styles = theme => ({
8 | root: {
9 | flexGrow: 1,
10 | },
11 | paper: {
12 | padding: theme.spacing.unit * 2,
13 | textAlign: 'center',
14 | color: theme.palette.text.secondary,
15 | backgroundColor: theme.palette.secondary.light
16 | },
17 | });
18 |
19 | function FullWidthGrid(props) {
20 | const { classes } = props;
21 |
22 | return (
23 |
24 |
25 |
26 | xs=12
27 |
28 |
29 | xs=12 sm=6
30 |
31 |
32 | xs=12 sm=6
33 |
34 |
35 | xs=6 sm=3
36 |
37 |
38 | xs=6 sm=3
39 |
40 |
41 | xs=6 sm=3
42 |
43 |
44 | xs=6 sm=3
45 |
46 |
47 |
48 | );
49 | }
50 |
51 | FullWidthGrid.propTypes = {
52 | classes: PropTypes.object.isRequired,
53 | };
54 |
55 | export default withStyles(styles)(FullWidthGrid);
56 |
--------------------------------------------------------------------------------
/src/app/routes/Layouts/demos/MediaQueries.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import Typography from '@material-ui/core/Typography';
5 | import red from '@material-ui/core/colors/red';
6 | import green from '@material-ui/core/colors/green';
7 | import blue from '@material-ui/core/colors/indigo';
8 |
9 | const styles = theme => ({
10 | root: {
11 | padding: theme.spacing.unit,
12 | '& h3': {
13 | color: theme.palette.common.white,
14 | },
15 | [theme.breakpoints.down('sm')]: {
16 | backgroundColor: red[500],
17 | },
18 | [theme.breakpoints.up('md')]: {
19 | backgroundColor: blue[500],
20 | },
21 | [theme.breakpoints.up('lg')]: {
22 | backgroundColor: green[500],
23 | },
24 | },
25 | });
26 |
27 | function MediaQuery(props) {
28 | const { classes } = props;
29 |
30 | return (
31 |
32 | down(sm): red
33 | up(md): blue
34 | up(lg): green
35 |
36 | );
37 | }
38 |
39 | MediaQuery.propTypes = {
40 | classes: PropTypes.object.isRequired,
41 | };
42 |
43 | export default withStyles(styles)(MediaQuery);
44 |
--------------------------------------------------------------------------------
/src/app/routes/Layouts/demos/WIthWIdth.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import withWidth from '@material-ui/core/withWidth';
4 | import Typography from '@material-ui/core/Typography';
5 |
6 | const components = {
7 | sm: 'em',
8 | md: 'u',
9 | lg: 'del',
10 | };
11 |
12 | function WithWidth(props) {
13 | const { width } = props;
14 | const Component = components[width] || 'span';
15 |
16 | return (
17 |
15 |
16 | {title}
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
28 |
29 | );
30 | }
31 | }
32 |
33 | export default MapDirection;
34 |
--------------------------------------------------------------------------------
/src/app/routes/Maps/MapMarker.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { SourceReader, PapperBlock } from './../../components';
5 | import { BasicMarker, PopoverMarker } from './demos';
6 | import Info from './Info';
7 |
8 | class MapMarker extends React.Component {
9 | render() {
10 | const title = brand.name + ' - Map';
11 | const description = brand.desc;
12 | const docSrc = 'routes/Maps/demos/';
13 | return (
14 |
15 |
16 | {title}
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
28 |
29 |
33 |
34 | );
35 | }
36 | }
37 |
38 | export default MapMarker;
39 |
--------------------------------------------------------------------------------
/src/app/routes/Maps/SearchMap.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { SourceReader, PapperBlock } from './../../components';
5 | import { SearchLocation } from './demos';
6 | import Info from './Info';
7 |
8 | class SearchMap extends React.Component {
9 | render() {
10 | const title = brand.name + ' - Map';
11 | const description = brand.desc;
12 | const docSrc = 'routes/Maps/demos/';
13 | return (
14 |
15 |
16 | {title}
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
28 |
29 | );
30 | }
31 | }
32 |
33 | export default SearchMap;
34 |
--------------------------------------------------------------------------------
/src/app/routes/Maps/StreetViewMap.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../components';
6 |
7 | class StreetViewMap extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default StreetViewMap;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Maps/TrafficIndicator.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../components';
6 |
7 | class TrafficIndicator extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default TrafficIndicator;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Maps/demos/BasicMarker.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { compose } from 'recompose';
3 | import {
4 | withScriptjs,
5 | withGoogleMap,
6 | GoogleMap,
7 | Marker,
8 | } from 'react-google-maps';
9 |
10 | const MapWithAMarker = compose(
11 | withScriptjs,
12 | withGoogleMap
13 | )(props => (
14 |
18 |
19 | {title}
20 |
21 |
22 |
23 |
24 |
25 |
26 |
28 | );
29 | }}
30 | />
31 | );
32 |
33 | export default NotFound;
34 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/BlankPage/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { PapperBlock } from './../../../components';
5 |
6 | class BlankPage extends React.Component {
7 | render() {
8 | const title = brand.name + ' - Blank Page';
9 | const description = brand.desc;
10 | return (
11 |
12 |
13 | {title}
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | Content
22 |
23 |
24 | );
25 | }
26 | }
27 |
28 | export default BlankPage;
29 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Chat/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../../components';
6 |
7 | class Chat extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Chat;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Email/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../../components';
6 |
7 | class Email extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Email;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Error/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { Route } from 'react-router-dom';
5 | import { ErrorWrap } from './../../../components';
6 |
7 | const title = brand.name + ' - Aplication Error';
8 | const description = brand.desc;
9 |
10 | const Error = () => (
11 |
18 |
19 | {title}
20 |
21 |
22 |
23 |
24 |
25 |
26 |
28 | );
29 | }}
30 | />
31 | );
32 |
33 | export default Error;
34 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Maintenance/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../../components';
6 |
7 | class Paginations extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Paginations;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Photos/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../../components';
6 |
7 | class Photos extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Photos;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/SocialMedia/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../../components';
6 |
7 | class Chat extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Chat;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Standalone/LoginDedicated.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PropTypes } from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import Hidden from '@material-ui/core/Hidden';
5 | import brand from 'ba-utils/brand';
6 | import logo from 'ba-images/logo.svg';
7 | import styles from './../../../components/App/appStyles-jss';
8 | import Login from './../Users/Login';
9 |
10 | class LoginDedicated extends React.Component {
11 | render() {
12 | const { classes } = this.props;
13 | return (
14 |
15 |
16 |
17 |
22 |
24 |
25 | );
26 | }
27 | }
28 |
29 | LoginDedicated.propTypes = {
30 | classes: PropTypes.object.isRequired,
31 | };
32 |
33 | export default (withStyles(styles)(LoginDedicated));
34 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Standalone/NotFoundDedicated.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PropTypes } from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import styles from './../../../components/App/appStyles-jss';
5 | import Error from './../Error';
6 |
7 | class NotFoundDedicated extends React.Component {
8 | render() {
9 | const { classes } = this.props;
10 | return (
11 |
18 |
19 |
21 | {brand.name}
20 |
12 |
13 |
15 |
16 | );
17 | }
18 | }
19 |
20 | NotFoundDedicated.propTypes = {
21 | classes: PropTypes.object.isRequired,
22 | };
23 |
24 | export default (withStyles(styles)(NotFoundDedicated));
25 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/UserProfile/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../../components';
6 |
7 | class Chat extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Chat;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Users/LockScreen.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../../components';
6 |
7 | class Paginations extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Paginations;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Pages/Users/ResetPassword.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../../components';
6 |
7 | class Paginations extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Paginations;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Tables/AdvancedTable.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { withStyles } from '@material-ui/core/styles';
6 | import { SourceReader, PapperBlock, MarketingAds } from './../../components';
7 | import { AdvTableDemo } from './demos';
8 |
9 | const styles = ({
10 | root: {
11 | flexGrow: 1,
12 | }
13 | });
14 |
15 | class AdvancedTable extends Component {
16 | render() {
17 | const title = brand.name + ' - Table';
18 | const description = brand.desc;
19 | const docSrc = 'routes/Tables/demos/';
20 | return (
21 |
22 |
23 | {title}
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
36 |
38 | );
39 | }
40 | }
41 |
42 | export default withStyles(styles)(AdvancedTable);
43 |
--------------------------------------------------------------------------------
/src/app/routes/Tables/demos/EmptyTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import Toolbar from '@material-ui/core/Toolbar';
5 | import Typography from '@material-ui/core/Typography';
6 | import Table from '@material-ui/core/Table';
7 | import TableCell from '@material-ui/core/TableCell';
8 | import TableHead from '@material-ui/core/TableHead';
9 | import TableRow from '@material-ui/core/TableRow';
10 | import Paper from '@material-ui/core/Paper';
11 | import { EmptyData } from './../../../components';
12 |
13 | const styles = theme => ({
14 | root: {
15 | width: '100%',
16 | marginTop: theme.spacing.unit * 3,
17 | overflowX: 'auto',
18 | },
19 | table: {
20 | minWidth: 700,
21 | },
22 | });
23 |
24 | function EmptyTable(props) {
25 | const { classes } = props;
26 | return (
27 |
32 |
35 |
30 | Nutrition
31 |
32 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default TrackingTable;
28 |
--------------------------------------------------------------------------------
/src/app/routes/Tables/demos/index.js:
--------------------------------------------------------------------------------
1 | export SimpleTable from './SimpleTable';
2 | export StrippedTable from './StrippedTable';
3 | export HoverTable from './HoverTable';
4 | export BorderedTable from './BorderedTable';
5 | export TreeTableDemo from './TreeTableDemo';
6 | export CrudTableDemo from './CrudTableDemo';
7 | export AdvTableDemo from './AdvTableDemo';
8 | export StatusLabel from './StatusLabel';
9 | export StatusColorRow from './StatusColorRow';
10 | export EmptyTable from './EmptyTable';
11 | export TrackingTable from './TrackingTable';
12 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/Avatars.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { SourceReader, PapperBlock } from './../../components';
5 | import { AvatarsDemo, AvatarsPractice } from './demos';
6 |
7 | class Avatars extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | const docSrc = 'routes/UiElements/demos/Avatars/';
12 | return (
13 |
14 |
15 | {title}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
28 |
29 |
34 |
35 | );
36 | }
37 | }
38 |
39 | export default Avatars;
40 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/Badges.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { SourceReader, PapperBlock } from './../../components';
5 | import { CommonBadges, VariantBadges } from './demos';
6 |
7 | class Badges extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | const docSrc = 'routes/UiElements/demos/Badges/';
12 | return (
13 |
24 |
27 |
30 |
33 |
14 |
15 | {title}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
28 |
29 |
34 |
35 | );
36 | }
37 | }
38 |
39 | export default Badges;
40 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/Breadcrumbs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { SourceReader, PapperBlock } from './../../components';
5 | import { ClassicBreadcrumbs, PaperBreadcrumbs } from './demos';
6 |
7 | class BreadCrumbs extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | const docSrc = 'routes/UiElements/demos/Breadcrumbs/';
12 | return (
13 |
24 |
27 |
30 |
33 |
14 |
15 | {title}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
28 |
29 |
34 |
35 | );
36 | }
37 | }
38 |
39 | export default BreadCrumbs;
40 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/Dividers.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../components';
6 |
7 | class Dividers extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
24 |
27 |
30 |
33 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Dividers;
28 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/Paginations.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import ss from 'ba-utils/screenshoot';
5 | import { MarketingAds } from './../../components';
6 |
7 | class Paginations extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 | );
24 | }
25 | }
26 |
27 | export default Paginations;
28 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/SliderCarousel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import ss from 'ba-utils/screenshoot';
4 | import brand from 'ba-utils/brand';
5 | import { MarketingAds } from './../../components';
6 |
7 | class SliderCarousel extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
24 | );
25 | }
26 | }
27 |
28 | export default SliderCarousel;
29 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/Tags.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import brand from 'ba-utils/brand';
4 | import { SourceReader, PapperBlock } from './../../components';
5 | import { BasicTags, ArrayTags } from './demos';
6 |
7 | class Tags extends React.Component {
8 | render() {
9 | const title = brand.name + ' - UI Elements';
10 | const description = brand.desc;
11 | const docSrc = 'routes/UiElements/demos/Tags/';
12 | return (
13 |
14 |
15 | {title}
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
28 |
29 |
34 |
35 | );
36 | }
37 | }
38 |
39 | export default Tags;
40 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Cards/PaperSheet.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import Paper from '@material-ui/core/Paper';
5 | import Typography from '@material-ui/core/Typography';
6 |
7 | const styles = theme => ({
8 | root: theme.mixins.gutters({
9 | paddingTop: 16,
10 | paddingBottom: 16,
11 | marginTop: theme.spacing.unit * 3,
12 | }),
13 | });
14 |
15 | function PaperSheet(props) {
16 | const { classes } = props;
17 | return (
18 |
24 |
27 |
30 |
33 |
19 |
20 |
21 | This is a sheet of paper.
22 |
23 |
24 | Paper can be used to build surface or other elements for your application.
25 |
26 |
27 |
28 | );
29 | }
30 |
31 | PaperSheet.propTypes = {
32 | classes: PropTypes.object.isRequired,
33 | };
34 |
35 | export default withStyles(styles)(PaperSheet);
36 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/ImageGrid/ImageGridList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import GridList from '@material-ui/core/GridList';
5 | import GridListTile from '@material-ui/core/GridListTile';
6 | import imgData from 'ba-utils/imgData';
7 |
8 | const styles = theme => ({
9 | root: {
10 | display: 'flex',
11 | flexWrap: 'wrap',
12 | justifyContent: 'space-around',
13 | overflow: 'hidden',
14 | backgroundColor: theme.palette.background.paper,
15 | },
16 | gridList: {
17 | width: 500,
18 | height: 450,
19 | },
20 | subheader: {
21 | width: '100%',
22 | },
23 | img: {
24 | maxWidth: 'none'
25 | }
26 | });
27 |
28 | /**
29 | * The example data is structured as follows:
30 | *
31 | * import image from 'path/to/image.jpg';
32 | * [etc...]
33 | *
34 | * const tileData = [
35 | * {
36 | * img: image,
37 | * title: 'Image',
38 | * author: 'author',
39 | * cols: 2,
40 | * },
41 | * {
42 | * [etc...]
43 | * },
44 | * ];
45 | */
46 | function ImageGridList(props) {
47 | const { classes } = props;
48 |
49 | return (
50 |
51 |
52 | {imgData.map((tile, index) => (
53 |
54 | 
55 |
56 | ))}
57 |
58 |
59 | );
60 | }
61 |
62 | ImageGridList.propTypes = {
63 | classes: PropTypes.object.isRequired,
64 | };
65 |
66 | export default withStyles(styles)(ImageGridList);
67 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Progress/CircularIndeterminate.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import CircularProgress from '@material-ui/core/CircularProgress';
5 | import purple from '@material-ui/core/colors/purple';
6 |
7 | const styles = theme => ({
8 | progress: {
9 | margin: theme.spacing.unit * 2,
10 | },
11 | });
12 |
13 | function CircularIndeterminate(props) {
14 | const { classes } = props;
15 | return (
16 |
17 |
22 | );
23 | }
24 |
25 | CircularIndeterminate.propTypes = {
26 | classes: PropTypes.object.isRequired,
27 | };
28 |
29 | export default withStyles(styles)(CircularIndeterminate);
30 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Progress/CircularStatic.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import CircularProgress from '@material-ui/core/CircularProgress';
5 |
6 | const styles = theme => ({
7 | progress: {
8 | margin: theme.spacing.unit * 2,
9 | },
10 | });
11 |
12 | function CircularStatic(props) {
13 | const { classes } = props;
14 | return (
15 |
16 |
22 | );
23 | }
24 |
25 | CircularStatic.propTypes = {
26 | classes: PropTypes.object.isRequired,
27 | };
28 |
29 | export default withStyles(styles)(CircularStatic);
30 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Progress/LinearBuffer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import LinearProgress from '@material-ui/core/LinearProgress';
5 |
6 | const styles = {
7 | root: {
8 | flexGrow: 1,
9 | },
10 | };
11 |
12 | class LinearBuffer extends React.Component {
13 | state = {
14 | completed: 0,
15 | buffer: 10,
16 | };
17 |
18 | componentDidMount() {
19 | this.timer = setInterval(this.progress, 500);
20 | }
21 |
22 | componentWillUnmount() {
23 | clearInterval(this.timer);
24 | }
25 |
26 | timer = null;
27 |
28 | progress = () => {
29 | const { completed } = this.state;
30 | if (completed > 100) {
31 | this.setState({ completed: 0, buffer: 10 });
32 | } else {
33 | const diff = Math.random() * 10;
34 | const diff2 = Math.random() * 10;
35 | this.setState({ completed: completed + diff, buffer: completed + diff + diff2 });
36 | }
37 | };
38 |
39 | render() {
40 | const { classes } = this.props;
41 | const { completed, buffer } = this.state;
42 | return (
43 |
44 |
46 |
48 | );
49 | }
50 | }
51 |
52 | LinearBuffer.propTypes = {
53 | classes: PropTypes.object.isRequired,
54 | };
55 |
56 | export default withStyles(styles)(LinearBuffer);
57 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Progress/LinearDeterminate.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import LinearProgress from '@material-ui/core/LinearProgress';
5 |
6 | const styles = {
7 | root: {
8 | flexGrow: 1,
9 | },
10 | };
11 |
12 | class LinearDeterminate extends React.Component {
13 | state = {
14 | completed: 0,
15 | };
16 |
17 | componentDidMount() {
18 | this.timer = setInterval(this.progress, 500);
19 | }
20 |
21 | componentWillUnmount() {
22 | clearInterval(this.timer);
23 | }
24 |
25 | timer = null;
26 |
27 | progress = () => {
28 | const { completed } = this.state;
29 | if (completed === 100) {
30 | this.setState({ completed: 0 });
31 | } else {
32 | const diff = Math.random() * 10;
33 | this.setState({ completed: Math.min(completed + diff, 100) });
34 | }
35 | };
36 |
37 | render() {
38 | const { classes } = this.props;
39 | return (
40 | 46 |
41 |
43 |
45 | );
46 | }
47 | }
48 |
49 | LinearDeterminate.propTypes = {
50 | classes: PropTypes.object.isRequired,
51 | };
52 |
53 | export default withStyles(styles)(LinearDeterminate);
54 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Progress/LinearIndeterminate.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import LinearProgress from '@material-ui/core/LinearProgress';
5 |
6 | const styles = {
7 | root: {
8 | flexGrow: 1,
9 | },
10 | };
11 |
12 | function LinearIndeterminate(props) {
13 | const { classes } = props;
14 | return (
15 | 43 |
16 |
18 |
20 | );
21 | }
22 |
23 | LinearIndeterminate.propTypes = {
24 | classes: PropTypes.object.isRequired,
25 | };
26 |
27 | export default withStyles(styles)(LinearIndeterminate);
28 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Progress/LinearQuery.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import LinearProgress from '@material-ui/core/LinearProgress';
5 |
6 | const styles = {
7 | root: {
8 | flexGrow: 1,
9 | },
10 | };
11 |
12 | function LinearQuery(props) {
13 | const { classes } = props;
14 | return (
15 | 18 |
16 |
18 |
20 | );
21 | }
22 |
23 | LinearQuery.propTypes = {
24 | classes: PropTypes.object.isRequired,
25 | };
26 |
27 | export default withStyles(styles)(LinearQuery);
28 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Progress/LinearStatic.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import LinearProgress from '@material-ui/core/LinearProgress';
5 |
6 | const styles = {
7 | root: {
8 | flexGrow: 1,
9 | },
10 | };
11 |
12 | function LinearIndeterminate(props) {
13 | const { classes } = props;
14 | return (
15 | 18 |
16 |
18 |
20 | );
21 | }
22 |
23 | LinearIndeterminate.propTypes = {
24 | classes: PropTypes.object.isRequired,
25 | };
26 |
27 | export default withStyles(styles)(LinearIndeterminate);
28 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Tabs/CenteredTabs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import Paper from '@material-ui/core/Paper';
5 | import Tabs from '@material-ui/core/Tabs';
6 | import Tab from '@material-ui/core/Tab';
7 |
8 | const styles = {
9 | root: {
10 | flexGrow: 1,
11 | },
12 | };
13 |
14 | class CenteredTabs extends React.Component {
15 | state = {
16 | value: 0,
17 | };
18 |
19 | handleChange = (event, value) => {
20 | this.setState({ value });
21 | };
22 |
23 | render() {
24 | const { classes } = this.props;
25 |
26 | return (
27 | 18 |
43 |
44 |
45 |
49 |
50 | {value === 0 && Item One }
51 | {value === 1 && Item Two }
52 | {value === 2 && Item Three }
53 |
54 | );
55 | }
56 | }
57 |
58 | SimpleTabs.propTypes = {
59 | classes: PropTypes.object.isRequired,
60 | };
61 |
62 | export default withStyles(styles)(SimpleTabs);
63 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Typography/ColouredTypo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Typography from '@material-ui/core/Typography';
3 | import Type from 'ba-components/Typography.scss';
4 |
5 | class ColouredTypo extends React.Component {
6 | render() {
7 | return (
8 |
9 |
10 | Ut sed eros finibus
11 |
12 |
13 | Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus.
14 |
15 |
16 | Aliquam nec ex aliquet
17 |
18 |
19 | Aenean facilisis vitae purus facilisis semper
20 |
21 |
22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.
23 |
24 |
25 | Vivamus et luctus mauris. Maecenas nisl libero, tincidunt id odio id, feugiat vulputate quam.
26 |
27 |
28 | Curabitur egestas consequat lorem, vel fermentum augue porta id.
29 |
30 |
31 | );
32 | }
33 | }
34 |
35 | export default ColouredTypo;
36 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Typography/Heading.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Typography from '@material-ui/core/Typography';
3 |
4 | class Heading extends React.Component {
5 | render() {
6 | return (
7 |
8 |
9 | Disp 4
10 |
11 |
12 | Display 3
13 |
14 |
15 | Display 2
16 |
17 |
18 | Display 1
19 |
20 |
21 | Headline
22 |
23 |
24 | Title
25 |
26 |
27 | Subheading
28 |
29 |
30 | {`
31 | Lorem ipsum dolor sit amet, consectetur adipisicing elit,
32 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
33 | `}
34 |
35 |
36 | );
37 | }
38 | }
39 |
40 | export default Heading;
41 |
--------------------------------------------------------------------------------
/src/app/routes/UiElements/demos/Typography/QuotesDemo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withStyles } from '@material-ui/core/styles';
4 | import { Quote } from './../../../../components';
5 |
6 | const styles = theme => ({
7 | divider: {
8 | margin: `${theme.spacing.unit * 3}px 0`,
9 | }
10 | });
11 |
12 | class QuotesDemo extends React.Component {
13 | render() {
14 | const { classes } = this.props;
15 | return (
16 |
17 |
24 | );
25 | }
26 | }
27 |
28 | QuotesDemo.propTypes = {
29 | classes: PropTypes.object.isRequired,
30 | };
31 |
32 | export default withStyles(styles)(QuotesDemo);
33 |
--------------------------------------------------------------------------------
/src/app/routes/withTracker.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { object } from 'prop-types';
3 | import GoogleAnalytics from 'react-ga';
4 | import { googleAnaliticsId } from '../config';
5 |
6 | if (googleAnaliticsId) {
7 | GoogleAnalytics.initialize(googleAnaliticsId);
8 | }
9 |
10 | export default function withTracker(WrappedComponent, options = {}) {
11 | const trackPage = (page) => {
12 | GoogleAnalytics.set({
13 | page,
14 | ...options
15 | });
16 | GoogleAnalytics.pageview(page);
17 | };
18 |
19 | const HOC = class extends Component {
20 | static propTypes = {
21 | location: object.isRequired,
22 | };
23 |
24 | componentDidMount() {
25 | if (googleAnaliticsId) {
26 | const page = this.props.location.pathname;
27 | trackPage(page);
28 | }
29 | }
30 |
31 | componentWillReceiveProps(nextProps) {
32 | if (googleAnaliticsId) {
33 | const currentPage = this.props.location.pathname;
34 | const nextPage = nextProps.location.pathname;
35 |
36 | if (currentPage !== nextPage) {
37 | trackPage(nextPage);
38 | }
39 | }
40 | }
41 |
42 | render() {
43 | return
18 |
20 | 19 |
21 |
23 | 22 |