input.onChange(value)}
+ />
+);
+
+// validation functions
+const required = value => (value == null ? 'Required' : undefined);
+const email = value => (
+ value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+ ? 'Invalid email'
+ : undefined
+);
+
+const styles = ({
+ root: {
+ flexGrow: 1,
+ },
+ field: {
+ width: '100%',
+ marginBottom: 20
+ },
+ fieldBasic: {
+ width: '100%',
+ marginBottom: 20,
+ marginTop: 10
+ },
+ inlineWrap: {
+ display: 'flex',
+ flexDirection: 'row'
+ }
+});
+
+class CrudTbFormDemo extends Component {
+ saveRef = ref => {
+ this.ref = ref;
+ return this.ref;
+ };
+
+ render() {
+ const {
+ classes,
+ fetchData,
+ addNew,
+ closeForm,
+ submit,
+ removeRow,
+ editRow,
+ dataTable,
+ openForm,
+ initValues,
+ closeNotif,
+ messageNotif,
+ } = this.props;
+ const trueBool = true;
+ return (
+
+
closeNotif(branch)} message={messageNotif} />
+
+
+ {/* Create Your own form, then arrange or custom it as You like */}
+
+
+
+
+
+
+
+ Choose One Option
+
+ } label="Option 1" />
+ } label="Option 2" />
+
+
+
+
+ Selection
+
+
+
+
+
+
+
+
+
Toggle Input
+
+ } label="On/OF Switch" />
+ } label="Checkbox" />
+
+
+
+
+ {/* No need create button or submit, because that already made in this component */}
+
+
+
+ Nutrition
+
+
+
+
+
+ Dessert (100g serving)
+ Calories
+ Fat (g)
+ Carbs (g)
+ Protein (g)
+
+
+
+
+
+ );
+}
+
+EmptyTable.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(EmptyTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/HoverTable.js b/front/odiparpack/app/containers/Tables/demos/HoverTable.js
new file mode 100644
index 0000000..48047c6
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/HoverTable.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+
+import {
+ Toolbar,
+ Typography,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Paper,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ table: {
+ minWidth: 700,
+ },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+ id += 1;
+ return {
+ id,
+ name,
+ calories,
+ fat,
+ carbs,
+ protein
+ };
+}
+
+const data = [
+ createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+ createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+ createData('Eclair', 262, 16.0, 24, 6.0),
+ createData('Cupcake', 305, 3.7, 67, 4.3),
+ createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+function HoverTable(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+ Nutrition
+
+
+
+
+
+ Dessert (100g serving)
+ Calories
+ Fat (g)
+ Carbs (g)
+ Protein (g)
+
+
+
+ {data.map(n => ([
+
+ {n.name}
+ {n.calories}
+ {n.fat}
+ {n.carbs}
+ {n.protein}
+
+ ])
+ )}
+
+
+
+ );
+}
+
+HoverTable.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(HoverTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/SimpleTable.js b/front/odiparpack/app/containers/Tables/demos/SimpleTable.js
new file mode 100644
index 0000000..e064d5e
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/SimpleTable.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+import {
+ Toolbar,
+ Typography,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Paper,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ table: {
+ minWidth: 700,
+ },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+ id += 1;
+ return {
+ id,
+ name,
+ calories,
+ fat,
+ carbs,
+ protein
+ };
+}
+
+const data = [
+ createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+ createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+ createData('Eclair', 262, 16.0, 24, 6.0),
+ createData('Cupcake', 305, 3.7, 67, 4.3),
+ createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+function SimpleTable(props) {
+ const { classes } = props;
+ return (
+
+
+
+ Nutrition
+
+
+
+
+
+ Dessert (100g serving)
+ Calories
+ Fat (g)
+ Carbs (g)
+ Protein (g)
+
+
+
+ {data.map(n => ([
+
+ {n.name}
+ {n.calories}
+ {n.fat}
+ {n.carbs}
+ {n.protein}
+
+ ])
+ )}
+
+
+
+ );
+}
+
+SimpleTable.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js b/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js
new file mode 100644
index 0000000..2e21190
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import messageStyles from 'ba-styles/Messages.scss';
+import progressStyles from 'ba-styles/Progress.scss';
+
+import {
+ Toolbar,
+ Typography,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Paper,
+ Chip,
+ LinearProgress,
+} from '@material-ui/core';
+
+const CustomTableCell = withStyles(theme => ({
+ head: {
+ backgroundColor: theme.palette.common.black,
+ color: theme.palette.common.white,
+ },
+ body: {
+ fontSize: 14,
+ },
+}))(TableCell);
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ chip: {
+ margin: theme.spacing(1),
+ fontWeight: 500,
+ color: '#FFF'
+ },
+});
+
+let id = 0;
+function createData(name, progress, status) {
+ id += 1;
+ return {
+ id,
+ name,
+ progress,
+ status,
+ };
+}
+
+const data = [
+ createData('Frozen yoghurt', 24, 'Error'),
+ createData('Ice cream sandwich', 37, 'Warning'),
+ createData('Eclair', 24, 'Info'),
+ createData('Cupcake', 67, 'Default'),
+ createData('Gingerbread', 89, 'Success'),
+];
+
+function StatusLabel(props) {
+ const { classes } = props;
+ const getStatus = status => {
+ switch (status) {
+ case 'Error': return messageStyles.bgError;
+ case 'Warning': return messageStyles.bgWarning;
+ case 'Info': return messageStyles.bgInfo;
+ case 'Success': return messageStyles.bgSuccess;
+ default: return messageStyles.bgDefault;
+ }
+ };
+ const getProgress = status => {
+ switch (status) {
+ case 'Error': return progressStyles.bgError;
+ case 'Warning': return progressStyles.bgWarning;
+ case 'Info': return progressStyles.bgInfo;
+ case 'Success': return progressStyles.bgSuccess;
+ default: return progressStyles.bgDefault;
+ }
+ };
+ return (
+
+
+
+ Nutrition
+
+
+
+
+
+ Dessert (100g serving)
+ Progress
+ Status
+
+
+
+ {data.map(n => ([
+
+ {n.name}
+
+
+
+
+
+
+
+ ])
+ )}
+
+
+
+ );
+}
+
+StatusLabel.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StatusLabel);
diff --git a/front/odiparpack/app/containers/Tables/demos/StatusLabel.js b/front/odiparpack/app/containers/Tables/demos/StatusLabel.js
new file mode 100644
index 0000000..bf011dd
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/StatusLabel.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+import messageStyles from 'ba-styles/Messages.scss';
+import progressStyles from 'ba-styles/Progress.scss';
+
+import {
+ Toolbar,
+ Typography,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Paper,
+ Chip,
+ LinearProgress,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ chip: {
+ margin: theme.spacing(1),
+ fontWeight: 'bold',
+ color: '#FFF'
+ },
+});
+
+let id = 0;
+function createData(name, progress, status) {
+ id += 1;
+ return {
+ id,
+ name,
+ progress,
+ status,
+ };
+}
+
+const data = [
+ createData('Frozen yoghurt', 24, 'Error'),
+ createData('Ice cream sandwich', 37, 'Warning'),
+ createData('Eclair', 24, 'Info'),
+ createData('Cupcake', 67, 'Default'),
+ createData('Gingerbread', 89, 'Success'),
+];
+
+function StatusLabel(props) {
+ const { classes } = props;
+ const getStatus = status => {
+ switch (status) {
+ case 'Error': return messageStyles.bgError;
+ case 'Warning': return messageStyles.bgWarning;
+ case 'Info': return messageStyles.bgInfo;
+ case 'Success': return messageStyles.bgSuccess;
+ default: return messageStyles.bgDefault;
+ }
+ };
+ const getProgress = status => {
+ switch (status) {
+ case 'Error': return progressStyles.bgError;
+ case 'Warning': return progressStyles.bgWarning;
+ case 'Info': return progressStyles.bgInfo;
+ case 'Success': return progressStyles.bgSuccess;
+ default: return progressStyles.bgDefault;
+ }
+ };
+ return (
+
+
+
+ Nutrition
+
+
+
+
+
+ Dessert (100g serving)
+ Progress
+ Status
+
+
+
+ {data.map(n => ([
+
+ {n.name}
+
+
+
+
+
+
+
+ ])
+ )}
+
+
+
+ );
+}
+
+StatusLabel.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StatusLabel);
diff --git a/front/odiparpack/app/containers/Tables/demos/StrippedTable.js b/front/odiparpack/app/containers/Tables/demos/StrippedTable.js
new file mode 100644
index 0000000..509bc4a
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/StrippedTable.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+
+import {
+ Toolbar,
+ Typography,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Paper,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ table: {
+ minWidth: 700,
+ },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+ id += 1;
+ return {
+ id,
+ name,
+ calories,
+ fat,
+ carbs,
+ protein
+ };
+}
+
+const data = [
+ createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+ createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+ createData('Eclair', 262, 16.0, 24, 6.0),
+ createData('Cupcake', 305, 3.7, 67, 4.3),
+ createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+function StrippedTable(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+ Nutrition
+
+
+
+
+
+ Dessert (100g serving)
+ Calories
+ Fat (g)
+ Carbs (g)
+ Protein (g)
+
+
+
+ {data.map(n => ([
+
+ {n.name}
+ {n.calories}
+ {n.fat}
+ {n.carbs}
+ {n.protein}
+
+ ])
+ )}
+
+
+
+ );
+}
+
+StrippedTable.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StrippedTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/TrackingTable.js b/front/odiparpack/app/containers/Tables/demos/TrackingTable.js
new file mode 100644
index 0000000..0550869
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/TrackingTable.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import messageStyles from 'ba-styles/Messages.scss';
+import progressStyles from 'ba-styles/Progress.scss';
+import avatarApi from 'ba-api/avatars';
+import { PapperBlock } from 'ba-components';
+import styles from 'ba-components/Widget/widget-jss';
+
+import {
+ Typography,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Chip,
+ LinearProgress,
+ Avatar,
+ Icon,
+} from '@material-ui/core';
+
+let id = 0;
+function createData(name, avatar, title, type, taskNumber, taskTitle, progress, status) {
+ id += 1;
+ return {
+ id,
+ name,
+ avatar,
+ title,
+ type,
+ taskNumber,
+ taskTitle,
+ progress,
+ status,
+ };
+}
+
+const data = [
+ createData('John Doe', avatarApi[6], 'Front End Developer', 'bug_report', 2214, 'Vivamus sit amet interdum elit', 30, 'Error'),
+ createData('Jim Doe', avatarApi[8], 'System Analyst', 'flag', 2455, 'Nam sollicitudin dignissim nunc', 70, 'Success'),
+ createData('Jane Doe', avatarApi[2], 'Back End Developer', 'whatshot', 3450, 'Quisque ut metus sit amet augue rutrum', 50, 'Warning'),
+ createData('Jack Doe', avatarApi[9], 'CTO', 'settings', 4905, 'Cras convallis lacus orci', 85, 'Info'),
+ createData('Jessica Doe', avatarApi[5], 'Project Manager', 'book', 4118, 'Aenean sit amet magna vel magna', 33, 'Default'),
+];
+
+function TrackingTable(props) {
+ const { classes } = props;
+ const getStatus = status => {
+ switch (status) {
+ case 'Error': return messageStyles.bgError;
+ case 'Warning': return messageStyles.bgWarning;
+ case 'Info': return messageStyles.bgInfo;
+ case 'Success': return messageStyles.bgSuccess;
+ default: return messageStyles.bgDefault;
+ }
+ };
+ const getProgress = status => {
+ switch (status) {
+ case 'Error': return progressStyles.bgError;
+ case 'Warning': return progressStyles.bgWarning;
+ case 'Info': return progressStyles.bgInfo;
+ case 'Success': return progressStyles.bgSuccess;
+ default: return progressStyles.bgDefault;
+ }
+ };
+ const getType = type => {
+ switch (type) {
+ case 'bug_report': return classes.red;
+ case 'flag': return classes.indigo;
+ case 'whatshot': return classes.orange;
+ case 'settings': return classes.lime;
+ default: return classes.purple;
+ }
+ };
+ return (
+
+
+
+
+
+ Name
+ Task
+
+
+
+ {data.map(n => ([
+
+
+
+
+
+ {n.name}
+ {n.title}
+
+
+
+
30 && darker} margin={sidebarOpen} />
+ 30 && darker}
+ />
+
+
+
+
+
+
+
+
+
+
{brand.name}
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+ {loading
+ &&
+ }
+
this.handleSearch(event)} />
+
+ {raws.map((raw, index) => {
+ if (raw.name.toLowerCase().indexOf(filterText) === -1) {
+ return false;
+ }
+ return (
+
+ this.handleOpenDetail(raw.name, raw.code)} className={classes.btn}>
+ {raw.name}
+
+ {raw.name}
+
+ );
+ })}
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }>
+
+ Location
+
+
+ Select trip destination
+
+
+
+
+
+ {}} />
+
+
+
+
+
+
+
+
+
+
+
+ }>
+ General settings
+ I am an expansion panel
+
+
+
+ Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget
+ maximus est, id dignissim quam.
+
+
+
+
+ }>
+ Users
+
+ You are currently not an owner
+
+
+
+
+ Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar
+ diam eros in elit. Pellentesque convallis laoreet laoreet.
+
+
+
+
+ }>
+ Advanced settings
+
+ Filtering has been entirely disabled for whole web server
+
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+ eros, vitae egestas augue. Duis vel est augue.
+
+
+
+
+ }>
+ Personal data
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+ eros, vitae egestas augue. Duis vel est augue.
+
+
+
+
+ );
+ }
+}
+
+ControlledAccordion.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ControlledAccordion);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js b/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js
new file mode 100644
index 0000000..a88f772
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ fontWeight: theme.typography.fontWeightRegular,
+ },
+});
+
+function SimpleAccordion(props) {
+ const { classes } = props;
+ return (
+
+
+ }>
+ Expansion Panel 1
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget.
+
+
+
+
+ }>
+ Expansion Panel 2
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget.
+
+
+
+
+ }>
+ Disabled Expansion Panel
+
+
+
+ );
+}
+
+SimpleAccordion.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleAccordion);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js
new file mode 100644
index 0000000..e21391e
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js
@@ -0,0 +1,112 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import FolderIcon from '@material-ui/icons/Folder';
+import PageviewIcon from '@material-ui/icons/Pageview';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import avatarApi from 'ba-api/avatars';
+
+import { pink, green, deepOrange, deepPurple } from '@material-ui/core/colors';
+
+import { Typography, Avatar, Grid } from '@material-ui/core';
+
+const styles = ({
+ row: {
+ display: 'flex',
+ justifyContent: 'flex-start',
+ },
+ avatar: {
+ margin: 10,
+ },
+ bigAvatar: {
+ width: 60,
+ height: 60,
+ },
+ pinkAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: pink[500],
+ },
+ greenAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: green[500],
+ },
+ orangeAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: deepOrange[500],
+ },
+ purpleAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: deepPurple[500],
+ },
+});
+
+class AvatarsDemo extends PureComponent {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+ Image Avatars
+
+
+
+ Icon Avatars
+
+
+
+ Icon Avatars
+
+
+
+
+ );
+ }
+}
+
+AvatarsDemo.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AvatarsDemo);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsPractice.js b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsPractice.js
new file mode 100644
index 0000000..a95b702
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsPractice.js
@@ -0,0 +1,212 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ImageIcon from '@material-ui/icons/Image';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import WorkIcon from '@material-ui/icons/Work';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import ShareIcon from '@material-ui/icons/Share';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import FaceIcon from '@material-ui/icons/Face';
+import imgApi from 'ba-api/images';
+
+import { red, green, amber } from '@material-ui/core/colors';
+
+import {
+ Typography,
+ Card,
+ CardHeader,
+ CardMedia,
+ CardContent,
+ CardActions,
+ IconButton,
+ Avatar,
+ List,
+ ListItem,
+ ListItemText,
+ ListItemAvatar,
+ Grid,
+ Chip,
+ Divider,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ row: {
+ display: 'flex',
+ justifyContent: 'flex-start',
+ },
+ chip: {
+ margin: theme.spacing(1),
+ },
+ card: {
+ maxWidth: 400,
+ },
+ media: {
+ height: 0,
+ paddingTop: '56.25%', // 16:9
+ },
+ actions: {
+ display: 'flex',
+ },
+ expand: {
+ transform: 'rotate(0deg)',
+ transition: theme.transitions.create('transform', {
+ duration: theme.transitions.duration.shortest,
+ }),
+ marginLeft: 'auto',
+ },
+ expandOpen: {
+ transform: 'rotate(180deg)',
+ },
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ avatarRed: {
+ backgroundColor: red[500],
+ },
+ avatarGreen: {
+ backgroundColor: green[500],
+ },
+ avatarAmber: {
+ backgroundColor: amber[500],
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+function handleDelete() {
+ alert('You clicked the delete icon.'); // eslint-disable-line no-alert
+}
+
+function handleClick() {
+ alert('You clicked the Chip.'); // eslint-disable-line no-alert
+}
+
+class AvatarsDemo extends PureComponent {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+ Avatars in Tag(Chip)
+
+ MB}
+ label="Clickable Chip"
+ onClick={handleClick}
+ className={classes.chip}
+ />
+ }
+ label="Deletable Chip"
+ onDelete={handleDelete}
+ className={classes.chip}
+ />
+
+
+
+ )}
+ label="Clickable Deletable Chip"
+ onClick={handleClick}
+ onDelete={handleDelete}
+ className={classes.chip}
+ />
+
+
+ Avatars in List Menu
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ action={(
+
+
+
+ )}
+ title="Aliquam nec ex aliquet"
+ subheader="September 14, 2018"
+ />
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text Badges
+
+
+
+ Badge Text
+
+
+
+
+ Badges Bold Text
+
+
+
+
+
+
+ );
+ }
+}
+
+CommonBadges.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CommonBadges);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Badges/VariantBadges.js b/front/odiparpack/app/containers/UiElements/demos/Badges/VariantBadges.js
new file mode 100644
index 0000000..8dcc485
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Badges/VariantBadges.js
@@ -0,0 +1,117 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MailIcon from '@material-ui/icons/Mail';
+import { LimitedBadges } from 'ba-components';
+
+import { Badge, Typography, Grid, IconButton, AppBar, Tabs, Tab } from '@material-ui/core';
+
+const styles = theme => ({
+ demo: {
+ height: 'auto',
+ },
+ divider: {
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ alone: {
+ position: 'relative',
+ margin: 20
+ },
+ field: {
+ margin: '10px',
+ position: 'relative'
+ },
+ margin: {
+ margin: theme.spacing(2),
+ },
+ padding: {
+ padding: `0 ${theme.spacing(2)}px`,
+ },
+ autoscale: {
+ '& span': {
+ width: 'auto',
+ padding: 2
+ }
+ }
+});
+
+class CommonBadges extends PureComponent {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+ Icon Badges
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tab Badges
+
+
+
+ Item One
+
+ )}
+ />
+
+
+
+
+
+
+
+ );
+ }
+}
+
+CommonBadges.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CommonBadges);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/ClassicBreadcrumbs.js b/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/ClassicBreadcrumbs.js
new file mode 100644
index 0000000..786a07b
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/ClassicBreadcrumbs.js
@@ -0,0 +1,83 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { BreadCrumb } from 'ba-components';
+
+import { Typography, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ demo: {
+ height: 'auto',
+ },
+ divider: {
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ field: {
+ margin: '10px',
+ position: 'relative'
+ },
+});
+
+class ClassicBreadcrumbs extends PureComponent {
+ render() {
+ const { classes } = this.props;
+ const location = { pathname: '/grand-parent/parent/children' };
+ return (
+
+
+
+ Arrow Separator
+
+
+
+
+
+ Slash Separator
+
+
+
+
+
+ Greater Than Separator
+
+
+
+
+
+
+ );
+ }
+}
+
+ClassicBreadcrumbs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ClassicBreadcrumbs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/PaperBreadcrumbs.js b/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/PaperBreadcrumbs.js
new file mode 100644
index 0000000..70effb0
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Breadcrumbs/PaperBreadcrumbs.js
@@ -0,0 +1,97 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { BreadCrumb } from 'ba-components';
+
+import { Typography, Grid, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+ demo: {
+ height: 'auto',
+ },
+ divider: {
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ alone: {
+ position: 'relative',
+ margin: 20
+ },
+ field: {
+ margin: '10px',
+ position: 'relative'
+ },
+ paper: {
+ padding: '5px 10px 1px',
+ borderRadius: 5
+ }
+});
+
+class ClassicBreadcrumbs extends PureComponent {
+ render() {
+ const { classes } = this.props;
+ const location = { pathname: '/grand-parent/parent/children' };
+ return (
+
+
+
+ Arrow Separator
+
+
+
+ Slash Separator
+
+
+
+ Greater Than Separator
+
+
+
+
+ );
+ }
+}
+
+ClassicBreadcrumbs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ClassicBreadcrumbs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Cards/ControlCards.js b/front/odiparpack/app/containers/UiElements/demos/Cards/ControlCards.js
new file mode 100644
index 0000000..1ddc92b
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Cards/ControlCards.js
@@ -0,0 +1,204 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classnames from 'classnames';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import ShareIcon from '@material-ui/icons/Share';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import imgApi from 'ba-api/images';
+import { PlayerCard, VideoCard } from 'ba-components';
+import { red } from '@material-ui/core/colors';
+
+import {
+ Typography,
+ Grid,
+ Card,
+ CardHeader,
+ CardMedia,
+ CardContent,
+ CardActions,
+ IconButton,
+ Collapse,
+ Avatar,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ card: {
+ display: 'flex',
+ justifyContent: 'space-between'
+ },
+ details: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ content: {
+ flex: '1 0 auto',
+ },
+ cover: {
+ width: 150,
+ height: 150,
+ },
+ controls: {
+ display: 'flex',
+ alignItems: 'center',
+ paddingLeft: theme.spacing(1),
+ paddingBottom: theme.spacing(1),
+ },
+ playIcon: {
+ height: 38,
+ width: 38,
+ },
+ cardSocmed: {
+ maxWidth: 400,
+ },
+ media: {
+ height: 0,
+ paddingTop: '56.25%', // 16:9
+ },
+ actions: {
+ display: 'flex',
+ },
+ expand: {
+ transform: 'rotate(0deg)',
+ transition: theme.transitions.create('transform', {
+ duration: theme.transitions.duration.shortest,
+ }),
+ marginLeft: 'auto',
+ },
+ expandOpen: {
+ transform: 'rotate(180deg)',
+ },
+ avatar: {
+ backgroundColor: red[500],
+ },
+});
+
+class ControlCard extends React.Component {
+ state = { expanded: false };
+
+ handleExpandClick = () => {
+ this.setState({ expanded: !this.state.expanded });
+ };
+
+ render() {
+ const { classes } = this.props;
+
+ return (
+
+
+ UI Controls
+
+
+
+ Video Thumb
+
+
+
+ Complex Interaction
+
+
+
+ R
+
+ )}
+ action={(
+
+
+
+ )}
+ title="Shrimp and Chorizo Paella"
+ subheader="September 14, 2016"
+ />
+
+
+
+ This impressive paella is a perfect party dish and a fun meal to cook together with
+ your guests. Add 1 cup of frozen peas along with the mussels, if you like.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Method:
+
+
+ Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
+ minutes.
+
+
+ Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
+ heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
+ browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving
+ chicken and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion,
+ salt and pepper, and cook, stirring often until thickened and fragrant, about 10
+ minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+
+
+ Add rice and stir very gently to distribute. Top with artichokes and peppers, and
+ cook without stirring, until most of the liquid is absorbed, 15 to 18 minutes.
+ Reduce heat to medium-low, add reserved shrimp and mussels, tucking them down into
+ the rice, and cook again without stirring, until mussels have opened and rice is
+ just tender, 5 to 7 minutes more. (Discard any mussels that don’t open.)
+
+
+ Set aside off of the heat to let rest for 10 minutes, and then serve.
+
+
+
+
+
+
+
+ This is a sheet of paper.
+
+
+ Paper can be used to build surface or other elements for your application.
+
+
+
+
+
+ Word of the Day
+
+
+ be
+ {bull}
+nev
+ {bull}
+o
+ {bull}
+lent
+
+
+ adjective
+
+
+ well meaning and kindly.
+
+ {'"a benevolent smile"'}
+
+
+
+ Media
+
+
+
+ Lorem ipsum
+
+
+ Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc
+
+
+
+
+
+ Quoted Card
+
+
+
+
+
+
+ Identity Card
+
+
+
+
+ );
+ }
+}
+
+StandardCard.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StandardCard);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/AlertDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/AlertDialog.js
new file mode 100644
index 0000000..68f099a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/AlertDialog.js
@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ Grid,
+ Typography,
+ Slide,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ title: {
+ display: 'block',
+ margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
+ },
+});
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+ return ;
+});
+
+class AlertDialog extends React.Component { // eslint-disable-line
+ state = {
+ open: false,
+ openSlide: false,
+ };
+
+ handleClickOpen = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = () => {
+ this.setState({ open: false });
+ };
+
+ handleClickOpenSlide = () => {
+ this.setState({ openSlide: true });
+ };
+
+ handleCloseSlide = () => {
+ this.setState({ openSlide: false });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+ Fade Transition
+
+
+
+
+
+
+ Slide Transition
+
+
+
+
+
+
+ );
+ }
+}
+
+AlertDialog.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AlertDialog);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js
new file mode 100644
index 0000000..1f49788
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+ Button,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Dialog,
+ Radio,
+ RadioGroup,
+ FormControlLabel,
+} from '@material-ui/core';
+
+const options = [
+ 'None',
+ 'Atria',
+ 'Callisto',
+ 'Dione',
+ 'Ganymede',
+ 'Hangouts Call',
+ 'Luna',
+ 'Oberon',
+ 'Phobos',
+ 'Pyxis',
+ 'Sedna',
+ 'Titania',
+ 'Triton',
+ 'Umbriel',
+];
+
+class ConfirmationDialog extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state.value = this.props.value;
+ }
+
+ state = {};
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.value !== this.props.value) {
+ this.setState({ value: nextProps.value });
+ }
+ }
+
+ radioGroup = null;
+
+ handleEntering = () => {
+ this.radioGroup.focus();
+ };
+
+ handleCancel = () => {
+ this.props.onClose(this.props.value);
+ };
+
+ handleOk = () => {
+ this.props.onClose(this.state.value);
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ render() {
+ const { value, ...other } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+ConfirmationDialog.propTypes = {
+ onClose: PropTypes.func.isRequired,
+ value: PropTypes.string.isRequired,
+};
+
+export default ConfirmationDialog;
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js
new file mode 100644
index 0000000..58bf1aa
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import {
+ Button,
+ TextField,
+ Grid,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+} from '@material-ui/core';
+
+export default class FormDialog extends React.Component {
+ state = {
+ open: false,
+ };
+
+ handleClickOpen = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = () => {
+ this.setState({ open: false });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js
new file mode 100644
index 0000000..935ed4d
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ List,
+ ListItem,
+ ListItemText,
+ Divider,
+ Grid,
+ AppBar,
+ Toolbar,
+ IconButton,
+ Typography,
+ Slide,
+} from '@material-ui/core';
+
+const styles = {
+ appBar: {
+ position: 'relative',
+ },
+ flex: {
+ flex: 1,
+ },
+};
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+ return ;
+});
+
+class FullScreenDialog extends React.Component { // eslint-disable-line
+ state = {
+ open: false,
+ open2: false,
+ };
+
+ handleClickOpen = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = () => {
+ this.setState({ open: false });
+ };
+
+ handleClickOpen2 = () => {
+ this.setState({ open2: true });
+ };
+
+ handleClose2 = () => {
+ this.setState({ open2: false });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Text in a modal
+
+
+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
+
+
+
+ );
+ }
+}
+
+ModalDemo.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ModalDemo);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/ScrollDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ScrollDialog.js
new file mode 100644
index 0000000..b7f2b74
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ScrollDialog.js
@@ -0,0 +1,93 @@
+import React from 'react';
+
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+} from '@material-ui/core';
+
+class ScrollDialog extends React.Component {
+ state = {
+ open: false,
+ scroll: 'paper',
+ };
+
+ handleClickOpen = scroll => () => {
+ this.setState({ open: true, scroll });
+ };
+
+ handleClose = () => {
+ this.setState({ open: false });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ }
+}
+
+export default ScrollDialog;
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js
new file mode 100644
index 0000000..f75b1be
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import PersonIcon from '@material-ui/icons/Person';
+import AddIcon from '@material-ui/icons/Add';
+import { blue } from '@material-ui/core/colors';
+
+import {
+ Button,
+ Avatar,
+ List,
+ ListItem,
+ ListItemText,
+ ListItemAvatar,
+ Dialog,
+ DialogTitle,
+ Typography,
+ Grid,
+} from '@material-ui/core';
+
+const emails = ['username@mail.com', 'user02@mail.com'];
+const styles = ({
+ avatar: {
+ backgroundColor: blue[100],
+ color: blue[600],
+ },
+});
+
+const SimpleDialog = props => {
+ const {
+ classes,
+ onClose,
+ selectedValue,
+ ...other
+ } = props;
+
+ function handleClose() {
+ props.onClose(this.props.selectedValue);
+ }
+
+ function handleListItemClick(value) {
+ props.onClose(value);
+ }
+
+ return (
+
+ );
+};
+
+SimpleDialog.propTypes = {
+ classes: PropTypes.object.isRequired,
+ onClose: PropTypes.func.isRequired,
+ selectedValue: PropTypes.string.isRequired,
+};
+
+const SimpleDialogWrapped = withStyles(styles)(SimpleDialog);
+
+class SelectDialog extends React.Component {
+ state = {
+ open: false,
+ selectedValue: emails[1],
+ };
+
+ handleClickOpen = () => {
+ this.setState({
+ open: true,
+ });
+ };
+
+ handleClose = value => {
+ this.setState({ selectedValue: value, open: false });
+ };
+
+ render() {
+ return (
+
+
+
+Selected:
+ {this.state.selectedValue}
+
+
+
+
+
+
+ );
+ }
+}
+
+
+export default SelectDialog;
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js
new file mode 100644
index 0000000..ff30bd4
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { List, ListItem, ListItemText } from '@material-ui/core';
+import ConfirmationDialog from './ConfirmationDialog';
+
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ dialog: {
+ width: '80%',
+ maxHeight: 435,
+ },
+});
+
+class SelectRadioDialog extends React.Component {
+ state = {
+ open: false,
+ value: 'Dione',
+ };
+
+ button = undefined;
+
+ handleClickListItem = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = value => {
+ this.setState({ value, open: false });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+SelectRadioDialog.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SelectRadioDialog);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js b/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js
new file mode 100644
index 0000000..db67c0f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js
@@ -0,0 +1,29 @@
+import React, { Fragment, PureComponent } from 'react';
+import Type from 'ba-styles/Typography.scss';
+import {
+ GradientDivider,
+ DashDivider,
+ ShadowDivider,
+ InsetDivider,
+} from 'ba-components/Divider';
+
+import { Typography } from '@material-ui/core';
+
+class CommonDivider extends PureComponent {
+ render() {
+ return (
+
+ Gradient Divider
+
+ Dash Divider
+
+ Shadow Divider
+
+ Inset Divider
+
+
+ );
+ }
+}
+
+export default CommonDivider;
diff --git a/front/odiparpack/app/containers/UiElements/demos/Dividers/SpecialDividers.js b/front/odiparpack/app/containers/UiElements/demos/Dividers/SpecialDividers.js
new file mode 100644
index 0000000..d857e06
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Dividers/SpecialDividers.js
@@ -0,0 +1,23 @@
+import React, { Fragment, PureComponent } from 'react';
+import Type from 'ba-styles/Typography.scss';
+import {
+ FlairedEdgesDivider,
+ ContentDivider,
+} from 'ba-components/Divider';
+
+import { Typography } from '@material-ui/core';
+
+class CommonDivider extends PureComponent {
+ render() {
+ return (
+
+ Flaired Edges Divider
+
+ Content Text Divider
+
+
+ );
+ }
+}
+
+export default CommonDivider;
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/BasicMenu.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/BasicMenu.js
new file mode 100644
index 0000000..24039db
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/BasicMenu.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+import { Button, Menu, MenuItem, MenuList, Grid, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ },
+ paper: {
+ marginRight: theme.spacing(2),
+ },
+ popperClose: {
+ pointerEvents: 'none',
+ },
+});
+
+class BasicMenu extends React.Component {
+ state = {
+ anchorEl: null,
+ };
+
+ handleClick = event => {
+ this.setState({ anchorEl: event.currentTarget });
+ };
+
+ handleClose = () => {
+ this.setState({ anchorEl: null });
+ };
+
+ render() {
+ const { anchorEl } = this.state;
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+BasicMenu.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BasicMenu);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/DropdownMenu.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/DropdownMenu.js
new file mode 100644
index 0000000..0e5bce7
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/DropdownMenu.js
@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+import { IconButton, List, ListItem, ListItemText, Menu, MenuItem, Grid } from '@material-ui/core';
+
+const styles = {
+ root: {
+ width: '100%',
+ },
+};
+
+const options = [
+ 'Show some love to Material-UI',
+ 'Show all notification content',
+ 'Hide sensitive notification content',
+ 'Hide all notification content',
+];
+
+const optionsOpt = [
+ 'None',
+ 'Atria',
+ 'Callisto',
+ 'Dione',
+ 'Ganymede',
+ 'Hangouts Call',
+ 'Luna',
+ 'Oberon',
+ 'Phobos',
+ 'Pyxis',
+ 'Sedna',
+ 'Titania',
+ 'Triton',
+ 'Umbriel',
+];
+
+const ITEM_HEIGHT = 48;
+
+class DropdownMenu extends React.Component {
+ state = {
+ anchorEl: null,
+ anchorElOpt: null,
+ selectedIndex: 1,
+ };
+
+ button = undefined;
+
+ handleClickListItem = event => {
+ this.setState({ anchorEl: event.currentTarget });
+ };
+
+ handleMenuItemClick = (event, index) => {
+ this.setState({ selectedIndex: index, anchorEl: null });
+ };
+
+ handleClose = () => {
+ this.setState({ anchorEl: null });
+ };
+
+ handleClickOpt = event => {
+ this.setState({ anchorElOpt: event.currentTarget });
+ };
+
+ handleCloseOpt = () => {
+ this.setState({ anchorElOpt: null });
+ };
+
+
+ render() {
+ const { classes } = this.props;
+ const { anchorEl, anchorElOpt } = this.state;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+DropdownMenu.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(DropdownMenu);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js
new file mode 100644
index 0000000..e8cfbc6
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Grow from '@material-ui/core/Grow';
+import Fade from '@material-ui/core/Fade';
+import Zoom from '@material-ui/core/Zoom';
+import Grid from '@material-ui/core/Grid';
+
+
+class MenuTransition extends React.Component {
+ state = {
+ anchorFade: null,
+ anchorGrow: null,
+ anchorCollapse: null,
+ anchorZoom: null,
+ };
+
+ handleClick = (event, type) => {
+ this.setState({ [type]: event.currentTarget });
+ };
+
+ handleClose = type => {
+ this.setState({ [type]: null });
+ };
+
+ handleToggle = type => {
+ // eslint-disable-next-line
+ this.setState({ [type]: !this.state[type] });
+ };
+
+ render() {
+ const {
+ anchorFade,
+ anchorGrow,
+ anchorZoom
+ } = this.state;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default MenuTransition;
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MiniDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MiniDrawer.js
new file mode 100644
index 0000000..4a07e14
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MiniDrawer.js
@@ -0,0 +1,235 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import {
+ Drawer,
+ AppBar,
+ Toolbar,
+ List,
+ Typography,
+ MenuItem,
+ Divider,
+ TextField,
+ IconButton,
+} from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ appFrame: {
+ height: 430,
+ zIndex: 1,
+ overflow: 'hidden',
+ position: 'relative',
+ display: 'flex',
+ width: '100%',
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ padding: '0 24px',
+ transition: theme.transitions.create(['width', 'margin'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ },
+ appBarShift: {
+ marginLeft: drawerWidth,
+ width: `calc(100% - ${drawerWidth}px)`,
+ transition: theme.transitions.create(['width', 'margin'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ 'appBarShift-left': {
+ marginLeft: drawerWidth,
+ },
+ 'appBarShift-right': {
+ marginRight: drawerWidth,
+ },
+ menuButton: {
+ marginLeft: 3,
+ marginRight: 3,
+ },
+ hide: {
+ display: 'none',
+ },
+ drawerPaper: {
+ position: 'relative',
+ whiteSpace: 'nowrap',
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ drawerPaperClose: {
+ overflowX: 'hidden',
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ width: theme.spacing(7),
+ [theme.breakpoints.up('sm')]: {
+ width: theme.spacing(9),
+ },
+ },
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ padding: '0 8px',
+ ...theme.mixins.toolbar,
+ },
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ },
+ 'content-left': {
+ marginLeft: -drawerWidth,
+ },
+ 'content-right': {
+ marginRight: -drawerWidth,
+ },
+ contentShift: {
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ 'contentShift-left': {
+ marginLeft: 0,
+ },
+ 'contentShift-right': {
+ marginRight: 0,
+ },
+ title: {
+ flex: 1,
+ }
+});
+
+class MiniDrawer extends React.Component {
+ state = {
+ open: false,
+ anchor: 'left',
+ };
+
+ handleDrawerOpen = () => {
+ this.setState({ open: true });
+ };
+
+ handleDrawerClose = () => {
+ this.setState({ open: false });
+ };
+
+ handleChangeAnchor = event => {
+ this.setState({
+ anchor: event.target.value,
+ });
+ };
+
+ render() {
+ const { classes, theme } = this.props;
+ const { anchor, open } = this.state;
+ const drawer = (
+
+
+
+ {theme.direction === 'rtl' ? : }
+
+
+
+ {mailFolderListItems}
+
+ {otherMailFolderListItems}
+
+ );
+
+ const menuBtn = (
+
+
+
+ );
+
+ let before = null;
+ let after = null;
+ let beforeBtn = null;
+ let afterBtn = null;
+
+ if (anchor === 'left') {
+ before = drawer;
+ beforeBtn = menuBtn;
+ } else {
+ after = drawer;
+ afterBtn = menuBtn;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {beforeBtn}
+
+ Mini variant drawer
+
+ {afterBtn}
+
+
+ {before}
+
+
+
+ {'You think water moves fast? You should see ice.'}
+
+
+ {after}
+
+
{mailFolderListItems}
+
+ {otherMailFolderListItems}
+
+ );
+
+ let before = null;
+ let after = null;
+
+ if (anchor === 'left') {
+ before = drawer;
+ } else {
+ after = drawer;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ Permanent drawer
+
+
+
+ {before}
+
+
+
+ {'You think water moves fast? You should see ice.'}
+
+
+ {after}
+
+
+
+ {theme.direction === 'rtl' ? : }
+
+
+
+ {mailFolderListItems}
+
+ {otherMailFolderListItems}
+
+ );
+
+ const menuBtn = (
+
+
+
+ );
+
+ let before = null;
+ let after = null;
+ let beforeBtn = null;
+ let afterBtn = null;
+
+ if (anchor === 'left') {
+ before = drawer;
+ beforeBtn = menuBtn;
+ } else {
+ after = drawer;
+ afterBtn = menuBtn;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {beforeBtn}
+
+ Persistent drawer
+
+ {afterBtn}
+
+
+ {before}
+
+
+
+ {'You think water moves fast? You should see ice.'}
+
+
+ {after}
+
+
+
{mailFolderListItems}
+
+
{otherMailFolderListItems}
+
+
{mailFolderListItems}
+
+
{otherMailFolderListItems}
+
+ {sideList}
+
+
+
+
+ {fullList}
+
+
+
+
+ {fullList}
+
+
+
+
+ {sideList}
+
+
+
+ );
+ }
+}
+
+SwipeDrawer.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SwipeDrawer);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/TemporaryDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/TemporaryDrawer.js
new file mode 100644
index 0000000..6af2a24
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/TemporaryDrawer.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Drawer, Button, List, Divider, Grid } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const styles = {
+ list: {
+ width: 250,
+ },
+ fullList: {
+ width: 'auto',
+ },
+};
+
+class TemporaryDrawer extends React.Component {
+ state = {
+ top: false,
+ left: false,
+ bottom: false,
+ right: false,
+ };
+
+ toggleDrawer = (side, open) => () => {
+ this.setState({
+ [side]: open,
+ });
+ };
+
+ render() {
+ const { classes } = this.props;
+
+ const sideList = (
+
+
{mailFolderListItems}
+
+
{otherMailFolderListItems}
+
+
{mailFolderListItems}
+
+
{otherMailFolderListItems}
+
+ {sideList}
+
+
+
+
+ {fullList}
+
+
+
+
+ {fullList}
+
+
+
+
+ {sideList}
+
+
+
+ );
+ }
+}
+
+TemporaryDrawer.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TemporaryDrawer);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/menuData.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/menuData.js
new file mode 100644
index 0000000..cd2d653
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/menuData.js
@@ -0,0 +1,64 @@
+// This file is shared across the demos.
+
+import React from 'react';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import StarIcon from '@material-ui/icons/Star';
+import SendIcon from '@material-ui/icons/Send';
+import MailIcon from '@material-ui/icons/Mail';
+import DeleteIcon from '@material-ui/icons/Delete';
+import ReportIcon from '@material-ui/icons/Report';
+
+import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
+
+export const mailFolderListItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export const otherMailFolderListItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js
new file mode 100644
index 0000000..5d11f0d
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import imgData from 'ba-api/imgData';
+
+import { GridList, GridListTile, GridListTileBar, IconButton } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.paper,
+ },
+ gridList: {
+ width: 500,
+ height: 450,
+ // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
+ transform: 'translateZ(0)',
+ },
+ titleBar: {
+ background:
+ 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, '
+ + 'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
+ },
+ icon: {
+ color: 'white',
+ },
+ img: {
+ maxWidth: 'none'
+ }
+});
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ * {
+ * img: image,
+ * title: 'Image',
+ * author: 'author',
+ * featured: true,
+ * },
+ * {
+ * [etc...]
+ * },
+ * ];
+ */
+function AdvancedGridList(props) {
+ const { classes } = props;
+
+ return (
+
+
+ {imgData.map((tile, index) => (
+
+ 
+
+
+
+ )}
+ actionPosition="left"
+ className={classes.titleBar}
+ />
+
+ ))}
+
+
+
+ {imgData.map((tile, index) => (
+
+
+
+ ))}
+
+
+
+ {imgData.map((tile, index) => (
+
+
+
+
+
+ )}
+ />
+
+ ))}
+
+
+
+
+ December
+
+ {imgData.map((tile, index) => (
+
+
+
+by:
+ {tile.author}
+
+ )}
+ actionIcon={(
+
+
+
+ )}
+ />
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[0, 1, 2, 3].map(value => (
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ Checkbox
+
+
+ {[0, 1, 2, 3].map(value => (
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ Settings}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+ListControl.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ListControl);
diff --git a/front/odiparpack/app/containers/UiElements/demos/List/ListInteractive.js b/front/odiparpack/app/containers/UiElements/demos/List/ListInteractive.js
new file mode 100644
index 0000000..f8d3fa8
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/List/ListInteractive.js
@@ -0,0 +1,183 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import FolderIcon from '@material-ui/icons/Folder';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { cyan } from '@material-ui/core/colors';
+
+import {
+ List,
+ ListItem,
+ ListItemAvatar,
+ ListItemIcon,
+ ListItemSecondaryAction,
+ ListItemText,
+ Avatar,
+ IconButton,
+ FormGroup,
+ FormControlLabel,
+ Checkbox,
+ Grid,
+ Typography,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ maxWidth: 752,
+ },
+ demo: {
+ backgroundColor: theme.palette.background.paper,
+ },
+ title: {
+ margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
+ },
+ iconCyan: {
+ color: cyan[300]
+ },
+ avatarCyan: {
+ background: cyan[300]
+ }
+});
+
+function generate(element) {
+ return [0, 1, 2].map(value => React.cloneElement(element, {
+ key: value,
+ }),
+ );
+}
+
+class ListInteractive extends React.Component {
+ state = {
+ dense: false,
+ secondary: false,
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { dense, secondary } = this.state;
+
+ return (
+
+
+ this.setState({ dense: checked })}
+ value="dense"
+ />
+ )}
+ label="Enable dense"
+ />
+ this.setState({ secondary: checked })}
+ value="secondary"
+ />
+ )}
+ label="Enable secondary text"
+ />
+
+
+
+
+ Text only
+
+
+
+ {generate(
+
+
+ ,
+ )}
+
+
+
+
+
+ Icon with text
+
+
+
+ {generate(
+
+
+
+
+
+ ,
+ )}
+
+
+
+
+
+
+
+ Avatar with text
+
+
+
+ {generate(
+
+
+
+
+
+
+
+ ,
+ )}
+
+
+
+ {generate(
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Nested List
+
+ Nested List Items}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {this.state.open ? : }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+ListMenu.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ListMenu);
diff --git a/front/odiparpack/app/containers/UiElements/demos/List/PinnedList.js b/front/odiparpack/app/containers/UiElements/demos/List/PinnedList.js
new file mode 100644
index 0000000..e770fd0
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/List/PinnedList.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, ListSubheader, List, ListItem, ListItemText } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ position: 'relative',
+ overflow: 'auto',
+ maxHeight: 300,
+ },
+ listSection: {
+ backgroundColor: 'inherit',
+ },
+ ul: {
+ backgroundColor: 'inherit',
+ padding: 0,
+ },
+ head: {
+ backgroundColor: theme.palette.secondary.light,
+ lineHeight: '30px',
+ height: 30,
+ textTransform: 'uppercase'
+ }
+});
+
+function PinnedList(props) {
+ const { classes } = props;
+
+ return (
+
+
}>
+ {[0, 1, 2, 3, 4].map(sectionId => (
+
+
+ {`I'm sticky ${sectionId}`}
+ {[0, 1, 2].map(item => (
+
+
+
+ ))}
+
+
+ ))}
+
+
+ );
+}
+
+PinnedList.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PinnedList);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Notification/MobileNotif.js b/front/odiparpack/app/containers/UiElements/demos/Notification/MobileNotif.js
new file mode 100644
index 0000000..60cdbbd
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Notification/MobileNotif.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import AddIcon from '@material-ui/icons/Add';
+import { AppBar, Toolbar, IconButton, Typography, Button, Fab, Snackbar } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ position: 'relative',
+ overflow: 'hidden',
+ },
+ appFrame: {
+ width: '100%',
+ height: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ menuButton: {
+ marginLeft: -12,
+ marginRight: 20,
+ },
+ button: {
+ marginBottom: theme.spacing(1),
+ },
+ fab: {
+ position: 'absolute',
+ bottom: theme.spacing(2),
+ right: theme.spacing(2),
+ },
+ fabMoveUp: {
+ transform: 'translate3d(0, -46px, 0)',
+ transition: theme.transitions.create('transform', {
+ duration: theme.transitions.duration.enteringScreen,
+ easing: theme.transitions.easing.easeOut,
+ }),
+ },
+ fabMoveDown: {
+ transform: 'translate3d(0, 0, 0)',
+ transition: theme.transitions.create('transform', {
+ duration: theme.transitions.duration.leavingScreen,
+ easing: theme.transitions.easing.sharp,
+ }),
+ },
+ snackbar: {
+ position: 'absolute',
+ },
+ snackbarContent: {
+ width: '100%',
+ },
+});
+
+class MobileNotif extends React.Component {
+ state = {
+ open: false,
+ };
+
+ handleClick = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = () => {
+ this.setState({ open: false });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { open } = this.state;
+ const fabClassName = classNames(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
+
+ return (
+
+
+
+
+
+
+
+
+
+ Out of my way!
+
+
+
+
+
+
+
Archived}
+ action={(
+
+ )}
+ className={classes.snackbar}
+ />
+
+
+
+ Note archived}
+ action={[
+ ,
+
+
+ ,
+ ]}
+ />
+
+
+
+ Positioning
+
+
+
+
+
+
+
+ I love snacks}
+ />
+
+
+
+ );
+ }
+}
+
+SimpleNotif.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleNotif);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Notification/StyledNotif.js b/front/odiparpack/app/containers/UiElements/demos/Notification/StyledNotif.js
new file mode 100644
index 0000000..2ad8dba
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Notification/StyledNotif.js
@@ -0,0 +1,198 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined';
+import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+import CloseIcon from '@material-ui/icons/Close';
+import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
+import messageStyles from 'ba-styles/Messages.scss';
+
+import { Typography, Button, IconButton, Snackbar, SnackbarContent, Grid } from '@material-ui/core';
+
+const variantIcon = {
+ success: CheckCircleOutlinedIcon,
+ warning: ReportProblemOutlinedIcon,
+ error: ErrorOutlineOutlinedIcon,
+ info: InfoOutlinedIcon,
+};
+
+const styles1 = theme => ({
+ success: {
+ backgroundColor: '#b6f8c4',
+ },
+ error: {
+ backgroundColor: '#faabab',
+ },
+ info: {
+ backgroundColor: '#b2e7f5',
+ },
+ warning: {
+ backgroundColor: '#f5ea9f',
+ },
+ icon: {
+ fontSize: 20,
+ color: 'black'
+ },
+ iconVariant: {
+ opacity: 0.9,
+ marginRight: theme.spacing(1),
+ },
+ message: {
+ display: 'flex',
+ alignItems: 'center',
+ color: 'black'
+ },
+});
+
+function MySnackbarContent(props) {
+ const {
+ classes,
+ className,
+ message,
+ onClose,
+ variant,
+ ...other
+ } = props;
+ const Icon = variantIcon[variant];
+
+ return (
+
+
+ {message}
+
+ )}
+ action={[
+
+
+ ,
+ ]}
+ {...other}
+ />
+ );
+}
+
+MySnackbarContent.propTypes = {
+ classes: PropTypes.object.isRequired,
+ className: PropTypes.string.isRequired,
+ message: PropTypes.node.isRequired,
+ onClose: PropTypes.func,
+ variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
+};
+
+MySnackbarContent.defaultProps = {
+ onClose: () => {}
+};
+
+const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
+
+const styles = theme => ({
+ snackbar: {
+ margin: theme.spacing(1),
+ },
+ divider: {
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ margin: {
+ margin: theme.spacing(1)
+ }
+});
+
+const action = (
+
+);
+
+class StyledNotif extends React.Component {
+ state = {
+ openStyle: false,
+ };
+
+ handleClickStyle = () => {
+ this.setState({ openStyle: true });
+ };
+
+ handleCloseStyle = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+ this.setState({ openStyle: false });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+ Default Styled Notification
+
+
+
+
+
+
+
+
+
+
+ Custom Styled Notification with CSS
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+StyledNotif.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StyledNotif);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Notification/TransitionNotif.js b/front/odiparpack/app/containers/UiElements/demos/Notification/TransitionNotif.js
new file mode 100644
index 0000000..6ac8df5
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Notification/TransitionNotif.js
@@ -0,0 +1,203 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+
+import { Typography, Button, Grid, Snackbar, Slide, Fade, IconButton } from '@material-ui/core';
+
+const styles = theme => ({
+ row: {
+ display: 'flex',
+ justifyContent: 'flex-start',
+ },
+ close: {
+ width: theme.spacing(4)
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ button: {
+ margin: theme.spacing(1)
+ }
+});
+
+function TransitionLeft(props) {
+ return ;
+}
+
+function TransitionUp(props) {
+ return ;
+}
+
+function TransitionRight(props) {
+ return ;
+}
+
+function TransitionDown(props) {
+ return ;
+}
+
+class TransitionNotif extends PureComponent {
+ state = {
+ open: false,
+ open2: false,
+ open3: false,
+ transition: null,
+ messageInfo: {},
+ };
+
+ queue = [];
+
+ handleClickQueue = message => () => {
+ this.queue.push({
+ message,
+ key: new Date().getTime(),
+ });
+
+ if (this.state.open3) {
+ // immediately begin dismissing current message
+ // to start showing new one
+ this.setState({ open3: false });
+ } else {
+ this.processQueue();
+ }
+ };
+
+ processQueue = () => {
+ if (this.queue.length > 0) {
+ this.setState({
+ messageInfo: this.queue.shift(),
+ open3: true,
+ });
+ }
+ };
+
+ handleCloseQueue = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+ this.setState({ open3: false });
+ };
+
+ handleExited = () => {
+ this.processQueue();
+ };
+
+ handleClick = transition => () => {
+ this.setState({ open: true, transition });
+ };
+
+ handleClose = () => {
+ this.setState({ open: false });
+ };
+
+ handleClick2 = () => {
+ this.setState({ open2: true });
+ };
+
+ handleClose2 = () => {
+ this.setState({ open2: false });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { message, key } = this.state.messageInfo;
+ return (
+
+
+
+ Transition
+
+
+
+
+
+ I love snacks}
+ />
+
+
+
+ Change Transition
+
+
+ I love snacks}
+ />
+
+
+
+ Consecutive Snackbars
+
+
+
+ {message}}
+ action={[
+ ,
+
+
+
+ ]}
+ />
+
+
+
+
+ );
+ }
+}
+
+TransitionNotif.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TransitionNotif);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Pagination/GeneralPagination.js b/front/odiparpack/app/containers/UiElements/demos/Pagination/GeneralPagination.js
new file mode 100644
index 0000000..884be0a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Pagination/GeneralPagination.js
@@ -0,0 +1,136 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Pagination } from 'ba-components';
+import { Paper } from '@material-ui/core';
+
+const styles = theme => ({
+ paper: theme.mixins.gutters({
+ paddingTop: 16,
+ paddingBottom: 16,
+ marginTop: theme.spacing(3),
+ }),
+});
+
+class GeneralPagination extends React.Component {
+ constructor() {
+ super();
+ this.state = {
+ page: 1,
+ content: [
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+ 'Suspendisse sed urna in justo euismod condimentum',
+ 'Fusce placerat enim et odio molestie sagittis.',
+ 'Vestibulum dignissim orci vitae eros rutrum euismod.',
+ 'Vestibulum tempor, sem et molestie egestas, dui tortor laoreet tellus, id rhoncus mauris neque malesuada augue.',
+ 'Duis tristique metus magna, lobortis aliquam risus euismod sit amet.',
+ 'Suspendisse porttitor velit nisl, feugiat tincidunt nisl mattis ut.',
+ 'Nulla lobortis nunc vitae nisi semper semper.',
+ 'Sed mi neque, convallis at ipsum at, blandit pretium enim.',
+ 'Nunc quis sem quis velit tincidunt congue a sit amet ante.',
+ 'In hac habitasse platea dictumst.',
+ 'In mi nulla, fringilla vestibulum finibus et, vehicula non leo. Vivamus et luctus mauris.',
+ 'Maecenas nisl libero, tincidunt id odio id, feugiat vulputate quam. Vestibulum feugiat rhoncus metus.',
+ 'In non erat et ipsum molestie porta sit amet ut felis.',
+ 'Vestibulum a massa vestibulum, gravida odio id, fringilla ipsum.',
+ 'Ut sed eros finibus, placerat orci id, dapibus mauris.',
+ 'Proin varius, tortor faucibus tempor pharetra, nunc mi consectetur enim, nec posuere ante magna vitae quam.',
+ 'Cras convallis lacus orci, tristique tincidunt magna consequat in.',
+ 'Vestibulum consequat hendrerit lacus. In id nisi id neque venenatis molestie.',
+ 'Quisque lacinia purus ut libero facilisis, at vulputate sem maximus.',
+ 'Pellentesque ac bibendum tortor, vel blandit nulla.',
+ 'Nulla eget lobortis lacus.',
+ 'Aliquam venenatis magna et odio lobortis maximus.',
+ 'Nullam in tortor ligula.',
+ 'Proin maximus risus nunc, eu aliquam nibh tempus a.',
+ 'Interdum et malesuada fames ac ante ipsum primis in faucibus.',
+ ],
+ contentsPerPage: 3
+ };
+ this.onPageChange = this.onPageChange.bind(this);
+ this.onPrev = this.onPrev.bind(this);
+ this.onNext = this.onNext.bind(this);
+ this.onGoFirst = this.onGoFirst.bind(this);
+ this.onGoLast = this.onGoLast.bind(this);
+ }
+
+ onPageChange(page) {
+ this.setState({ page });
+ }
+
+ onPrev() {
+ if (this.state.page > 1) {
+ this.setState({ page: this.state.page -= 1 });
+ } else {
+ this.setState({ page: 1 });
+ }
+ }
+
+ onNext(totalPages) {
+ if (this.state.page < totalPages) {
+ this.setState({ page: this.state.page += 1 });
+ } else {
+ this.setState({ page: totalPages });
+ }
+ }
+
+ onGoFirst() {
+ this.setState({ page: 1 });
+ }
+
+ onGoLast(totalPages) {
+ this.setState({ page: totalPages });
+ }
+
+ render() {
+ const { classes } = this.props;
+ const { page, content, contentsPerPage } = this.state;
+
+ // Logic for displaying current todos
+ const indexOfLastTodo = page * contentsPerPage;
+ const indexOfFirstTodo = indexOfLastTodo - contentsPerPage;
+ const currentContent = content.slice(indexOfFirstTodo, indexOfLastTodo);
+
+ const renderContent = currentContent.map((ctn, index) => (
+ {ctn}
+ ));
+
+ // Logic for displaying page numbers
+ const pageNumbers = [];
+ for (let i = 1; i <= Math.ceil(content.length / contentsPerPage); i += 1) {
+ pageNumbers.push(i);
+ }
+
+ return (
+
+
+
+We are in page
+ {page}
+
+
+ {renderContent}
+
+
+
this.onNext(pageNumbers.length)}
+ onGoFirst={this.onGoFirst}
+ onGoLast={() => this.onGoLast(pageNumbers.length)}
+ />
+
+
+
+ {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => (
+
+ {n.name}
+ {n.calories}
+ {n.fat}
+
+ ))}
+ {emptyRows > 0 && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {theme.direction === 'rtl' ? : }
+
+
+ {theme.direction === 'rtl' ? : }
+
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="Next Page"
+ >
+ {theme.direction === 'rtl' ? : }
+
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="Last Page"
+ >
+ {theme.direction === 'rtl' ? : }
+
+
+ );
+ }
+}
+
+TbPaginationActions.propTypes = {
+ classes: PropTypes.object.isRequired,
+ count: PropTypes.number.isRequired,
+ onChangePage: PropTypes.func.isRequired,
+ page: PropTypes.number.isRequired,
+ rowsPerPage: PropTypes.number.isRequired,
+ theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(actionsStyles, { withTheme: true })(
+ TbPaginationActions,
+);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js
new file mode 100644
index 0000000..49494dc
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Table, TableBody, TableCell, TablePagination, TableRow, TableFooter, Paper } from '@material-ui/core';
+import TbPaginationActions from './TbPaginationActions';
+
+
+let counter = 0;
+function createData(name, calories, fat) {
+ counter += 1;
+ return {
+ id: counter,
+ name,
+ calories,
+ fat
+ };
+}
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ },
+ table: {
+ minWidth: 500,
+ },
+ tableWrapper: {
+ overflowX: 'auto',
+ },
+});
+
+class TbPaginationCustom extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ data: [
+ createData('Cupcake', 305, 3.7),
+ createData('Donut', 452, 25.0),
+ createData('Eclair', 262, 16.0),
+ createData('Frozen yoghurt', 159, 6.0),
+ createData('Gingerbread', 356, 16.0),
+ createData('Honeycomb', 408, 3.2),
+ createData('Ice cream sandwich', 237, 9.0),
+ createData('Jelly Bean', 375, 0.0),
+ createData('KitKat', 518, 26.0),
+ createData('Lollipop', 392, 0.2),
+ createData('Marshmallow', 318, 0),
+ createData('Nougat', 360, 19.0),
+ createData('Oreo', 437, 18.0),
+ ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+ page: 0,
+ rowsPerPage: 5,
+ };
+ }
+
+ handleChangePage = (event, page) => {
+ this.setState({ page });
+ };
+
+ handleChangeRowsPerPage = event => {
+ this.setState({ rowsPerPage: event.target.value });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { data, rowsPerPage, page } = this.state;
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage));
+
+ return (
+
+
+
+
+ {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => (
+
+
+ {n.name}
+
+ {n.calories}
+ {n.fat}
+
+ ))}
+ {emptyRows > 0 && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add
+
+
+ )}
+ classes={{ popper: classes.arrowPopper }}
+ PopperProps={{
+ popperOptions: {
+ modifiers: {
+ arrow: {
+ enabled: Boolean(this.state.arrowRef),
+ element: this.state.arrowRef,
+ },
+ },
+ },
+ }}
+ >
+
+
+
+ );
+ }
+}
+
+CustomizedTooltips.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedTooltips);
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js
new file mode 100644
index 0000000..786dd4f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, Tooltip } from '@material-ui/core';
+
+function DelayTooltips() {
+ return (
+
+
+
+ );
+}
+
+export default DelayTooltips;
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PopoverPlayground.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PopoverPlayground.js
new file mode 100644
index 0000000..7878df1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PopoverPlayground.js
@@ -0,0 +1,340 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
+import jsx from 'react-syntax-highlighter/languages/prism/jsx';
+import themeSource from 'react-syntax-highlighter/styles/prism/prism';
+import { green } from '@material-ui/core/colors';
+
+import {
+ FormControl,
+ FormLabel,
+ FormControlLabel,
+ Radio,
+ RadioGroup,
+ Grid,
+ Typography,
+ Button,
+ Popover,
+ Input,
+ InputLabel,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ buttonWrapper: {
+ position: 'relative',
+ marginBottom: theme.spacing(4),
+ },
+ anchor: {
+ backgroundColor: green[500],
+ width: 10,
+ height: 10,
+ borderRadius: '50%',
+ position: 'absolute',
+ },
+ radioAnchor: {
+ color: green[600],
+ '&$checked': {
+ color: green[500],
+ },
+ },
+ checked: {},
+ typography: {
+ margin: theme.spacing(2),
+ },
+});
+
+const inlineStyles = {
+ anchorVertical: {
+ top: {
+ top: -5,
+ },
+ center: {
+ top: 'calc(50% - 5px)',
+ },
+ bottom: {
+ bottom: -5,
+ },
+ },
+ anchorHorizontal: {
+ left: {
+ left: -5,
+ },
+ center: {
+ left: 'calc(50% - 5px)',
+ },
+ right: {
+ right: -5,
+ },
+ },
+};
+
+class PopoverPlayground extends React.Component {
+ state = {
+ open: false,
+ anchorOriginVertical: 'top',
+ anchorOriginHorizontal: 'left',
+ transformOriginVertical: 'top',
+ transformOriginHorizontal: 'left',
+ positionTop: 200, // Just so the popover can be spotted more easily
+ positionLeft: 400, // Same as above
+ anchorReference: 'anchorEl',
+ };
+
+ handleChange = key => (event, value) => {
+ this.setState({
+ [key]: value,
+ });
+ };
+
+ handleNumberInputChange = key => event => {
+ this.setState({
+ [key]: parseInt(event.target.value, 10),
+ });
+ };
+
+ handleClickButton = () => {
+ this.setState({
+ open: true,
+ });
+ };
+
+ handleClose = () => {
+ this.setState({
+ open: false,
+ });
+ };
+
+ anchorEl = null;
+
+ render() {
+ const { classes } = this.props;
+ registerLanguage('jsx', jsx);
+ const {
+ open,
+ anchorOriginVertical,
+ anchorOriginHorizontal,
+ transformOriginVertical,
+ transformOriginHorizontal,
+ positionTop,
+ positionLeft,
+ anchorReference,
+ } = this.state;
+
+ let mode = '';
+
+ if (anchorReference === 'anchorPosition') {
+ mode = `
+ anchorReference="${anchorReference}"
+ anchorPosition={{ top: ${positionTop}, left: ${positionLeft} }}`;
+ }
+
+ const code = `
+
+`;
+
+ const radioAnchorClasses = { root: classes.radioAnchor, checked: classes.checked };
+
+ return (
+
+
+
+
+ {anchorReference === 'anchorEl' && (
+
+ )}
+
+
+
+ The content of the Popover.
+
+
+
+
+ anchorReference
+
+ } label="anchorEl" />
+ }
+ label="anchorPosition"
+ />
+
+
+
+
+
+ anchorPosition.top
+
+
+
+
+ anchorPosition.left
+
+
+
+
+
+ anchorOrigin.vertical
+
+ }
+ label="Top"
+ />
+ }
+ label="Center"
+ />
+ }
+ label="Bottom"
+ />
+
+
+
+
+
+ transformOrigin.vertical
+
+ } label="Top" />
+ }
+ label="Center"
+ />
+ }
+ label="Bottom"
+ />
+
+
+
+
+
+ anchorOrigin.horizontal
+
+ }
+ label="Left"
+ />
+ }
+ label="Center"
+ />
+ }
+ label="Right"
+ />
+
+
+
+
+
+ transformOrigin.horizontal
+
+ } label="Left" />
+ }
+ label="Center"
+ />
+ } label="Right" />
+
+
+
+
+
+ {code}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+PositionedTooltips.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PositionedTooltips);
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js
new file mode 100644
index 0000000..23d2462
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Button, Popover, Typography, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ typography: {
+ margin: theme.spacing(2),
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ textAlign: 'center'
+ },
+ button: {
+ margin: theme.spacing(1),
+ },
+});
+
+class SimplePopover extends React.Component {
+ state = {
+ anchorEl: null,
+ };
+
+ handleClick = event => {
+ this.setState({
+ anchorEl: event.currentTarget,
+ });
+ };
+
+ handleClose = () => {
+ this.setState({
+ anchorEl: null,
+ });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { anchorEl } = this.state;
+ return (
+
+
+
+
+
+ The content of the Popover.
+
+
+
+
+
+
+ Simple Tooltips
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Delayed Tooltips
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default TransitionsTooltips;
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js
new file mode 100644
index 0000000..bd4db5b
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Grid, Button, Tooltip, ClickAwayListener } from '@material-ui/core';
+
+class TriggersTooltips extends React.Component {
+ state = {
+ open: false,
+ };
+
+ handleTooltipClose = () => {
+ this.setState({ open: false });
+ };
+
+ handleTooltipOpen = () => {
+ this.setState({ open: true });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+CircularDeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CircularDeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js
new file mode 100644
index 0000000..cc37de8
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { purple } from '@material-ui/core/colors';
+import { CircularProgress } from '@material-ui/core';
+
+const styles = theme => ({
+ progress: {
+ margin: theme.spacing(2),
+ },
+});
+
+function CircularIndeterminate(props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+
+ );
+}
+
+CircularIndeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CircularIndeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js
new file mode 100644
index 0000000..ff19f5c
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js
@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import CheckIcon from '@material-ui/icons/Check';
+import SaveIcon from '@material-ui/icons/Save';
+import { green } from '@material-ui/core/colors';
+
+import { CircularProgress, Button, Fab } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ wrapper: {
+ margin: theme.spacing(1),
+ position: 'relative',
+ },
+ buttonSuccess: {
+ backgroundColor: green[500],
+ '&:hover': {
+ backgroundColor: green[700],
+ },
+ },
+ fabProgress: {
+ color: green[500],
+ position: 'absolute',
+ top: -6,
+ left: -6,
+ zIndex: 1,
+ },
+ buttonProgress: {
+ color: green[500],
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ marginTop: -12,
+ marginLeft: -12,
+ },
+});
+
+class CircularIntegration extends React.Component {
+ state = {
+ loading: false,
+ success: false,
+ };
+
+ componentWillUnmount() {
+ clearTimeout(this.timer);
+ }
+
+ handleButtonClick = () => {
+ if (!this.state.loading) {
+ this.setState(
+ {
+ success: false,
+ loading: true,
+ },
+ () => {
+ this.timer = setTimeout(() => {
+ this.setState({
+ loading: false,
+ success: true,
+ });
+ }, 2000);
+ },
+ );
+ }
+ };
+
+ timer = undefined;
+
+ render() {
+ const { loading, success } = this.state;
+ const { classes } = this.props;
+ const buttonClassname = classNames({
+ [classes.buttonSuccess]: success,
+ });
+
+ return (
+
+
+
+ {success ? : }
+
+ {loading && }
+
+
+
+ {loading && }
+
+
+
+
+
+
+
+
+ );
+}
+
+CircularStatic.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CircularStatic);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js
new file mode 100644
index 0000000..44bca71
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+class LinearBuffer extends React.Component {
+ state = {
+ completed: 0,
+ buffer: 10,
+ };
+
+ componentDidMount() {
+ this.timer = setInterval(this.progress, 500);
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.timer);
+ }
+
+ timer = null;
+
+ progress = () => {
+ const { completed } = this.state;
+ if (completed > 100) {
+ this.setState({ completed: 0, buffer: 10 });
+ } else {
+ const diff = Math.random() * 10;
+ const diff2 = Math.random() * 10;
+ this.setState({ completed: completed + diff, buffer: completed + diff + diff2 });
+ }
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { completed, buffer } = this.state;
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+LinearBuffer.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearBuffer);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js
new file mode 100644
index 0000000..08c718d
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+class LinearDeterminate extends React.Component {
+ state = {
+ completed: 0,
+ };
+
+ componentDidMount() {
+ this.timer = setInterval(this.progress, 500);
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.timer);
+ }
+
+ timer = null;
+
+ progress = () => {
+ const { completed } = this.state;
+ if (completed === 100) {
+ this.setState({ completed: 0 });
+ } else {
+ const diff = Math.random() * 10;
+ this.setState({ completed: Math.min(completed + diff, 100) });
+ }
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+LinearDeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearDeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js
new file mode 100644
index 0000000..de5071a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+function LinearIndeterminate(props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+ );
+}
+
+LinearIndeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearIndeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js
new file mode 100644
index 0000000..6e51da7
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+function LinearQuery(props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+ );
+}
+
+LinearQuery.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearQuery);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js
new file mode 100644
index 0000000..55ad2a1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+function LinearIndeterminate(props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+ );
+}
+
+LinearIndeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearIndeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js b/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js
new file mode 100644
index 0000000..6417795
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Fade, Button, CircularProgress, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ button: {
+ margin: theme.spacing(2),
+ },
+ placeholder: {
+ height: 40,
+ },
+});
+
+class ProgressDelay extends React.Component {
+ state = {
+ loading: false,
+ query: 'idle',
+ };
+
+ componentWillUnmount() {
+ clearTimeout(this.timer);
+ }
+
+ timer = null;
+
+ handleClickLoading = () => {
+ this.setState({
+ loading: !this.state.loading,
+ });
+ };
+
+ handleClickQuery = () => {
+ clearTimeout(this.timer);
+
+ if (this.state.query !== 'idle') {
+ this.setState({
+ query: 'idle',
+ });
+ return;
+ }
+
+ this.setState({
+ query: 'progress',
+ });
+ this.timer = setTimeout(() => {
+ this.setState({
+ query: 'success',
+ });
+ }, 2e3);
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { loading, query } = this.state;
+
+ return (
+
+
+
+
+
+
+
+
+ {query === 'success' ? (
+ Success!
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {content.map((item, index) => (
+
+
+
{item.title}
+
+ {item.description}
+
+
+
+
+ 
+
+ Posted by
+ {' '}
+ {item.user}
+
+
+
+
+
+ {imgData.map((item, index) => (
+
+
+
+
+
+ {imgData.map((item, index) => (
+
+
+
+
+
+ {imgData.map((item, index) => (
+
+
+
+
+
+ Carousel Transition
+
+
+
+
+ {imgData.map((item, index) => (
+
+
+
+
+
+
+ ),
+ infinite: true,
+ dots: true,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ fade: this.state.transition === 'fade',
+ };
+ return (
+
+
+ Carousel Transition
+
+
+
+
+ {imgData.map((item, index) => (
+
+
+
+
+
+
+ {imgData.map((item, index) => (
+
+
+
+
+
+
+ )}
+ label="Alternative Design"
+ />
+
+
+
+ {steps.map((label, index) => {
+ const props = {};
+ const labelProps = {};
+ if (this.isStepOptional(index)) {
+ labelProps.optional = Optional;
+ }
+ if (this.isStepSkipped(index)) {
+ props.completed = false;
+ }
+ return (
+
+ {label}
+
+ );
+ })}
+
+
+
+ {activeStep === steps.length ? (
+
+
+ All steps completed - you"re finished
+
+
+
+ ) : (
+
+
{getStepContent(activeStep)}
+
+
+ {this.isStepOptional(activeStep) && (
+
+ )}
+
+
+
+ )}
+
+
+
+
+ )}
+ label="Alternative Design"
+ />
+
+
+
+ {steps.map((label, index) => (
+
+
+ {label}
+
+
+ ))}
+
+
+
+ {this.allStepsCompleted() ? (
+
+
+ All steps completed - you"re finished
+
+
+
+ ) : (
+
+
{getStepContent(activeStep)}
+
+
+
+ {activeStep !== steps.length
+ && (this.state.completed[this.state.activeStep] ? (
+
+ Step
+ {' '}
+ {activeStep + 1}
+ {' '}
+already completed
+
+ ) : (
+
+ ))}
+
+
+ )}
+
+
![{tutorialSteps[activeStep].label}]({tutorialSteps[activeStep].imgPath})
+
+ Next
+ {theme.direction === 'rtl' ? : }
+
+ )}
+ backButton={(
+
+ )}
+ />
+
+
+
+ {tutorialSteps[activeStepSwipe].label}
+
+
+ {tutorialSteps.map((step, index) => (
+
+
+
+
+ {steps.map((label, index) => {
+ const props = {};
+ const labelProps = {};
+ if (this.isStepOptional(index)) {
+ labelProps.optional = (
+
+ Alert message
+
+ );
+ }
+ if (this.isStepFailed(index)) {
+ labelProps.error = true;
+ }
+ if (this.isStepSkipped(index)) {
+ props.completed = false;
+ }
+ return (
+
+ {label}
+
+ );
+ })}
+
+
+ {activeStep === steps.length ? (
+
+
+ All steps completed - you"re finished
+
+
+
+ ) : (
+
+
{getStepContent(activeStep)}
+
+
+ {this.isStepOptional(activeStep) && (
+
+ )}
+
+
+
+ )}
+
+
+
+ {steps.map((label, index) => (
+
+ {label}
+
+ {getStepContent(index)}
+
+
+
+
+
+
+ {activeStep === steps.length && (
+
+ All steps completed - you"re finished
+
+
+ )}
+
+
+ } />
+ } />
+ } />
+
+
+
+
+ Without Label
+
+
+ } />
+ } />
+ } />
+ folder} />
+
+
+
+
+ );
+ }
+}
+
+BottomNav.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BottomNav);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/CenteredTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/CenteredTabs.js
new file mode 100644
index 0000000..00a285e
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/CenteredTabs.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Tabs, Tab } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+class CenteredTabs extends React.Component {
+ state = {
+ value: 0,
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ render() {
+ const { classes } = this.props;
+
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
+
+CenteredTabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CenteredTabs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/CustomTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/CustomTabs.js
new file mode 100644
index 0000000..96fd136
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/CustomTabs.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Tabs, Tab, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.paper,
+ },
+ tabsRoot: {
+ borderBottom: '1px solid #e8e8e8',
+ },
+ tabsIndicator: {
+ backgroundColor: '#1890ff',
+ },
+ tabRoot: {
+ textTransform: 'initial',
+ minWidth: 64,
+ [theme.breakpoints.up('sm')]: {
+ minWidth: 72,
+ },
+ fontWeight: theme.typography.fontWeightRegular,
+ marginRight: theme.spacing(4),
+ fontFamily: [
+ '-apple-system',
+ 'BlinkMacSystemFont',
+ '"Segoe UI"',
+ 'Roboto',
+ '"Helvetica Neue"',
+ 'Arial',
+ 'sans-serif',
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ ].join(','),
+ '&:hover': {
+ color: '#40a9ff',
+ opacity: 1,
+ },
+ '&$tabSelected': {
+ color: '#1890ff',
+ fontWeight: theme.typography.fontWeightMedium,
+ },
+ '&:focus': {
+ color: '#40a9ff',
+ },
+ },
+ tabSelected: {},
+ typography: {
+ padding: theme.spacing(3),
+ },
+});
+
+class CustomTabs extends React.Component {
+ state = {
+ value: 0,
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { value } = this.state;
+
+ return (
+
+
+
+
+
+
+ powered by Material-UI
+
+ );
+ }
+}
+
+CustomTabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomTabs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js
new file mode 100644
index 0000000..17808a1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Paper, Tabs, Tab } from '@material-ui/core';
+
+class DisabledTab extends React.Component {
+ state = {
+ value: 2,
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default DisabledTab;
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/FixedTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/FixedTabs.js
new file mode 100644
index 0000000..f64240f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/FixedTabs.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import SwipeableViews from 'react-swipeable-views';
+import { AppBar, Tabs, Tab, Typography } from '@material-ui/core';
+
+function TabContainer({ children, dir }) {
+ return (
+
+ {children}
+
+ );
+}
+
+TabContainer.propTypes = {
+ children: PropTypes.node.isRequired,
+ dir: PropTypes.string.isRequired,
+};
+
+const styles = theme => ({
+ root: {
+ backgroundColor: theme.palette.background.paper,
+ [theme.breakpoints.up('sm')]: {
+ width: 500,
+ },
+ margin: '10px auto'
+ },
+});
+
+class FixedTabs extends React.Component {
+ state = {
+ value: 0,
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ handleChangeIndex = index => {
+ this.setState({ value: index });
+ };
+
+ render() {
+ const { classes, theme } = this.props;
+
+ return (
+
+
+
+
+
+
+
+
+
+ Item One
+ Item Two
+ Item Three
+
+
+
+
+ Without Text
+
+
+ } />
+ } />
+ } />
+
+
+
+
+ With Text
+
+
+ } label="RECENTS" />
+ } label="FAVORITES" />
+ } label="NEARBY" />
+
+
+
+
+
+
+
+
+
+
+
+
+ {value === 'one' &&
Item One}
+ {value === 'two' &&
Item Two}
+ {value === 'three' &&
Item Three}
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+ {value === 0 &&
Item One}
+ {value === 1 &&
Item Two}
+ {value === 2 &&
Item Three}
+ {value === 3 &&
Item Four}
+ {value === 4 &&
Item Five}
+ {value === 5 &&
Item Six}
+ {value === 6 &&
Item Seven}
+
+
+
+
+
+
+
+
+
+
+
+
+ {value === 0 &&
Item One}
+ {value === 1 &&
Item Two}
+ {value === 2 &&
Item Three}
+ {value === 3 &&
Item Four}
+ {value === 4 &&
Item Five}
+ {value === 5 &&
Item Six}
+ {value === 6 &&
Item Seven}
+
+
+
+
+
+
+
+
+ {value === 0 &&
Item One}
+ {value === 1 &&
Item Two}
+ {value === 2 &&
Item Three}
+
+
+
MB}
+ label="Clickable Tag"
+ onClick={handleClick}
+ className={classes.chip}
+ color="primary"
+ />
+ }
+ label="Deletable Tag"
+ onDelete={handleDelete}
+ className={classes.chip}
+ />
+
+
+
+ )}
+ label="Clickable Deletable Tag"
+ onClick={handleClick}
+ onDelete={handleDelete}
+ className={classes.chip}
+ />
+ }
+ />
+
+
+ Align center: Nullam in
+ tortor
+ ligula
+
+
+
+ Align Left
+
+
+ Align Right
+
+
+
Justify Align
+
+ Vestibulum faucibus eget erat eget pretium. Donec commodo convallis ligula, eget suscipit orci. Suspendisse potenti.
+ Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc, eu aliquam nibh tempus a. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+
+
+
+ Ut sed eros finibus
+
+
+ Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus.
+
+
+ Aliquam nec ex aliquet
+
+
+ Aenean facilisis vitae purus facilisis semper
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.
+
+
+ Vivamus et luctus mauris. Maecenas nisl libero, tincidunt id odio id, feugiat vulputate quam.
+
+
+ Curabitur egestas consequat lorem, vel fermentum augue porta id.
+
+
+ );
+ }
+}
+
+export default ColouredTypo;
diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js
new file mode 100644
index 0000000..6a1079f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js
@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import { Typography, Divider } from '@material-ui/core';
+
+const background = {
+ width: '100%',
+ maxWidth: 500,
+ background:
+ 'transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAMKGlDQ1BJQ0MgUHJvZmlsZQAASMetl3dUU8kex+eWJCQktEAoUkJvovQqNbQIAlIFGyEJJJQYEoKKHRUVWAsqFqzoqoiiawFkURELtkWx9wUVFGVdLNhQeZME0PW998c75805c+dzfvc3v/n+7p2ZewcA9RiOWJyNagCQI8qTxIYFMSckpzBJHYACMKAFrIANhysVB8bERAJYhtp/lve3ACJvrzvIY4H/rWjy+FIuAEgM5DSelJsD+QgAuDtXLMkDgNAD7ebT88SQiVAl0JZAgZAt5JyhZE85pyk5UuETH8uCnAqACpXDkWQAoCbXxcznZsA4aqWQHUU8oQhyI2Q/roDDg/wF8sicnGmQ1W0g26T9ECfjHzHThmNyOBnDrMxFUVSChVJxNmcm+H+XnGzZ0BjmsFIFkvBYec7y55Y1LULOVMjnRWlR0ZC1IN8Q8hT+cu4SyMITBv0/cqUs+MwAAwCUyuMER0A2hGwmy0oIHGQ/jkTRF/qjKQWC+CRlfFQkmRY7GB8tEGVHRQ7GKRXw2UNcyZeGxA35pAtD2ZDhO0TrhXns+MGY5/OFiVGQ1SA/kGbFRQz2fVEgYEUNjyWLlWuG7xwDOdKhXDCLdElorNIfcxcI2VGD9sg8QXy4si82hctRaNCDnMmXTogc0sPjB4co9WCFfFHCoE6sTJwXFDvov1OcHTPojzXys8PkdjPIrdL8uKG+vXlwsilzwUEmZ2yMclxcW5wXE6/UhjNBJGCBYMAEMljTwDSQCYStPXU9YOhOKOAACcgAfOAwaBnqkaS4I4LXOFAA/oLEB9LhfkGKu3yQD+1fh63KqwNIV9zNV/TIAl2Qc3AD3A/3wSPhNQBWZ9wT9xrqx1QfGpUYQgwmhhNDibZThYWSn+IyARdmkA2rBETAlg+zkmsQDWn/HofQRWgjPCbcJLQT7oJE8BT6Cf8tw+/RhMO2caAdRg0dzC7tx+xwK6jaDQ/CfaF+qB1n4AbAAXeFmQTi/jA3N2j9/tT+k3bZkGqyIxkl65IDyDY/+6nZqbkN95Hn9qNOpa604UxYw3d+Ho31Q2482Eb87IktxQ5jLdgp7ALWiNUBJnYSq8cuY8flPDw3nirmxtBosQo9WTCOcMjHsdqx2/HLT2NzBseXKN4/yOPPyJMvHNY08UyJMEOQxwyEuzWfyRZxR41kOjs6eQAg3/uVW8tbhmJPRxgXv9sK3wHgyxsYGGj8bouEa/LIYgAoXd9t1ifgctYF4HwJVybJV9pw+YUAvyrqcKXoA2O4d9nAjJyBO/ABASAEjAXRIB4kgynwOQtADlQ9HcwGC0ARKAErwVqwEWwFO8AesB8cAnWgEZwC58AlcBXcBPfhXOkEL0EveA/6EQQhITSEjugjJoglYo84I56IHxKCRCKxSDKSimQgIkSGzEYWIiVIGbIR2Y5UIb8hx5BTyAWkDbmLdCDdyBvkM4qhVFQbNUKt0NGoJxqIRqDx6GQ0A81FC9BF6HJ0PVqJ7kNr0VPoJfQm2o6+RPswgKliDMwUc8A8MRYWjaVg6ZgEm4sVY+VYJVaDNcA3fR1rx3qwTzgRp+NM3AHO13A8AefiufhcvBTfiO/Ba/Ez+HW8A+/FvxFoBEOCPcGbwCZMIGQQphOKCOWEXYSjhLNwTXUS3hOJRAbRmugB12oyMZM4i1hK3Ew8QGwithGfEPtIJJI+yZ7kS4omcUh5pCLSBtI+0knSNVIn6aOKqoqJirNKqEqKikilUKVcZa/KCZVrKs9U+skaZEuyNzmazCPPJK8g7yQ3kK+QO8n9FE2KNcWXEk/JpCygrKfUUM5SHlDeqqqqmql6qY5XFarOV12velD1vGqH6ieqFtWOyqJOosqoy6m7qU3Uu9S3NBrNihZAS6Hl0ZbTqminaY9oH9XoaqPU2Go8tXlqFWq1atfUXqmT1S3VA9WnqBeol6sfVr+i3qNB1rDSYGlwNOZqVGgc07it0adJ13TSjNbM0SzV3Kt5QfO5FknLSitEi6e1SGuH1mmtJ3SMbk5n0bn0hfSd9LP0Tm2itrU2WztTu0R7v3ardq+Olo6rTqLODJ0KneM67QyMYcVgM7IZKxiHGLcYn3WNdAN1+brLdGt0r+l+0BuhF6DH1yvWO6B3U++zPlM/RD9Lf5V+nf5DA9zAzmC8wXSDLQZnDXpGaI/wGcEdUTzi0Ih7hqihnWGs4SzDHYaXDfuMjI3CjMRGG4xOG/UYM4wDjDON1xifMO42oZv4mQhN1picNHnB1GEGMrOZ65lnmL2mhqbhpjLT7aatpv1m1mYJZoVmB8wemlPMPc3TzdeYN5v3WphYjLOYbVFtcc+SbOlpKbBcZ9li+cHK2irJaolVndVzaz1rtnWBdbX1Axuajb9Nrk2lzQ1boq2nbZbtZturdqidm53ArsLuij1q724vtN9s3zaSMNJrpGhk5cjbDlSHQId8h2qHjlGMUZGjCkfVjXo12mJ0yuhVo1tGf3N0c8x23Ol430nLaaxToVOD0xtnO2euc4XzDReaS6jLPJd6l9eu9q581y2ud9zobuPclrg1u31193CXuNe4d3tYeKR6bPK47antGeNZ6nnei+AV5DXPq9Hrk7e7d573Ie+/fRx8snz2+jwfYz2GP2bnmCe+Zr4c3+2+7X5Mv1S/bX7t/qb+HP9K/8cB5gG8gF0BzwJtAzMD9wW+CnIMkgQdDfrA8mbNYTUFY8FhwcXBrSFaIQkhG0MehZqFZoRWh/aGuYXNCmsKJ4RHhK8Kv802YnPZVezesR5j54w9E0GNiIvYGPE40i5SEtkwDh03dtzqcQ+iLKNEUXXRIJodvTr6YYx1TG7M7+OJ42PGV4zvinWKnR3bEkePmxq3N+59fFD8ivj7CTYJsoTmRPXESYlViR+SgpPKktonjJ4wZ8KlZINkYXJ9CiklMWVXSt/EkIlrJ3ZOcptUNOnWZOvJMyZfmGIwJXvK8anqUzlTD6cSUpNS96Z+4URzKjl9aey0TWm9XBZ3HfclL4C3htfN9+WX8Z+l+6aXpT/P8M1YndEt8BeUC3qELOFG4evM8MytmR+yorN2Zw1kJ2UfyFHJSc05JtISZYnOTDOeNmNam9heXCRuz/XOXZvbK4mQ7JIi0snS+jxt+JN9WWYjWyzryPfLr8j/OD1x+uEZmjNEMy7PtJu5bOazgtCCX2fhs7izmmebzl4wu2NO4Jztc5G5aXOb55nPWzSvc37Y/D0LKAuyFvxR6FhYVvhuYdLChkVGi+YverI4bHF1kVqRpOj2Ep8lW5fiS4VLW5e5LNuw7Fsxr/hiiWNJecmXUm7pxV+cfln/y8Dy9OWtK9xXbFlJXClaeWuV/6o9ZZplBWVPVo9bXbuGuaZ4zbu1U9deKHct37qOsk62rn195Pr6DRYbVm74slGw8WZFUMWBTYablm36sJm3+dqWgC01W422lmz9vE247c72sO21lVaV5TuIO/J3dO1M3Nnyq+evVbsMdpXs+rpbtLt9T+yeM1UeVVV7DfeuqEarZdXd+ybtu7o/eH99jUPN9gOMAyUHwUHZwRe/pf5261DEoebDnodrjlge2XSUfrS4FqmdWdtbJ6hrr0+ubzs29lhzg0/D0d9H/b670bSx4rjO8RUnKCcWnRg4WXCyr0nc1HMq49ST5qnN909POH3jzPgzrWcjzp4/F3rudEtgy8nzvucbL3hfOHbR82LdJfdLtZfdLh/9w+2Po63urbVXPK7UX/W62tA2pu3ENf9rp64HXz93g33j0s2om223Em7duT3pdvsd3p3nd7Pvvr6Xf6///vwHhAfFDzUelj8yfFT5p+2fB9rd2493BHdcfhz3+P4T7pOXT6VPv3Qu6qJ1lT8zeVb13Pl5Y3do99UXE190vhS/7O8p+kvzr02vbF4d+Tvg78u9E3o7X0teD7wpfav/dvc713fNfTF9j97nvO//UPxR/+OeT56fWj4nfX7WP/0L6cv6r7ZfG75FfHswkDMwIOZIOIpfAQxWND0dgDe7AaAlA0C/Cv8fJirPZoqCKM+TCgL/jZXnN0VxB6AGNvLfcFYTAAdhtZoPYwcAIP8djw8AqIvLcB0s0nQXZ2UsKjzhED4ODLw1AoDUAMBXycBA/+aBga87odi7ADTlKs+E8iI/g25zldM1Rvb2n89m/wJHBnEU5n9PrQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAAd0SU1FB+EKBRI2IMFyTLcAAAAaSURBVAjXY/h++dF/hl+/fv1nYmBgYMBJAAAKEQellAoQBwAAAABJRU5ErkJggg==)', // eslint-disable-line max-len
+};
+
+const styles = theme => ({
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+class GeneralTypo extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+ Lorem ipsum dolor
+ {' '}
+ sit amet
+
+
+ Duis tristique metus magna, lobortis aliquam risus euismod sit amet.
+
+
+ Nullam in
+ tortor
+ ligula
+
+
+
+ Bolder
+
+ Bold
+
+ Medium
+
+
+ Regular
+
+ Light
+
+ Lighter
+
+
+
+ Duis tristique metus magna, lobortis aliquam risus euismod sit amet. Suspendisse porttitor velit nisl, feugiat tincidunt nisl mattis ut. Nulla lobortis nunc vitae nisi semper semper.
+ {' '}
+
+ Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc, eu aliquam nibh tempus a. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+
+
+
+ Vestibulum nec mi
+ {' '}
+ suscipit
+
+
+ Bolder
+
+ Bold
+
+ Medium
+
+ Regular
+
+ Light
+
+ Lighter
+
+
+
+ Vestibulum faucibus eget erat eget pretium. Donec commodo convallis ligula, eget suscipit orci. Suspendisse potenti.
+
+ Curabitur egestas consequat lorem, vel fermentum augue porta id. Aliquam lobortis magna neque, gravida consequat velit venenatis at. Duis sed augue leo. Phasellus ante massa, aliquam non ante at, suscipit ornare ipsum. Quisque a consequat ante, at volutpat enim.
+
+
+
+ Numbers
+ {' '}
+looks great! 1234
+ 56
+7890
+
+
+ Let your Creativity Flow
+ {' '}
+
+123
+ $
+
+
+
+ Numerics
+ {' '}
+
+123
+ 00
+
+
+
+
+ Body 2
+
+
+ Body 1
+
+
+ Caption
+
+
+ {`
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ `}
+
+
+ Button
+
+
+ {/*
+ Disp 4
+
+
+ Display 3
+
+
+ Display 2
+
+
+ Display 1
+
+
+ Headline
+
+
+ Title
+
+
+ Subheading
+
+
+ {`
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ `}
+ */}
+
+ {`h4 Título`}
+
+
+
+ {`h5 Subtítulos`}
+
+
+
+ {`h6 Título de tablas`}
+
+
+
+ {` Cuerpo de texto `}
+
+
+
+ );
+ }
+}
+
+export default Heading;
diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js
new file mode 100644
index 0000000..2f76ff1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import { Typography, Divider } from '@material-ui/core';
+
+const styles = theme => ({
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+class ListTypo extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
Unordered List
+
+
+ - Lorem ipsum dolor sit amet
+ - Consectetur adipiscing elit
+ - Integer molestie lorem at massa
+ - Facilisis in pretium nisl aliquet
+ -
+Nulla volutpat aliquam velit
+
+ - Phasellus iaculis neque
+ - Purus sodales ultricies
+ - Vestibulum laoreet porttitor sem
+ - Ac tristique libero volutpat at
+
+
+ - Faucibus porta lacus fringilla vel
+ - Aenean sit amet erat nunc
+ - Eget porttitor lorem
+
+
+
+
Ordered List
+
+
+ - Lorem ipsum dolor sit amet
+ - Consectetur adipiscing elit
+ - Integer molestie lorem at massa
+ - Facilisis in pretium nisl aliquet
+ -
+Nulla volutpat aliquam velit
+
+ - Phasellus iaculis neque
+ - Purus sodales ultricies
+ - Vestibulum laoreet porttitor sem
+ - Ac tristique libero volutpat at
+
+
+ - Faucibus porta lacus fringilla vel
+ - Aenean sit amet erat nunc
+ - Eget porttitor lorem
+
+
+
+
+