+ {
+ variant === 'fab'
+
+ ?
+
+
+
+ :
+
+
+ {icon}
+
+ }
+
+
+ {string.indexOf(' ') === -1 && string.length > 30 ?
+ {string.substr(0, 30)}… :
+ {string}
+ }
+
;
+
+
+export const getFieldValue = (value, typeName, classes={}) => {
+
+ if (typeof value === 'undefined' || value === null) {
+ return '';
+ }
+
+ if (Array.isArray(value)) {
+ typeName = 'Array';
+ }
+
+ if (typeof typeName === 'undefined') {
+ typeName = typeof value;
+ }
+
+ switch (typeName) {
+
+ case 'Boolean':
+ case 'boolean':
+ return {value.toString()};
+
+ case 'Array':
+ return - {value.map(
+ (item, index) =>
- {getFieldValue(item, typeof item, classes)} )}
+
+
+
+ );
+};
+
+
+Card.displayName = 'Card';
+
+
+Card.propTypes = {
+ className: PropTypes.string,
+ collection: PropTypes.object,
+ document: PropTypes.object,
+ currentUser: PropTypes.object,
+ fields: PropTypes.array,
+ classes: PropTypes.object.isRequired,
+};
+
+
+Card.contextTypes = {
+ intl: intlShape
+};
+
+
+replaceComponent('Card', Card, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/lib/components/core/Datatable.jsx b/packages/vulcan-ui-material/lib/components/core/Datatable.jsx
new file mode 100644
index 000000000..d2561b1b4
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/core/Datatable.jsx
@@ -0,0 +1,649 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import {
+ Components,
+ registerComponent,
+ replaceComponent,
+ withCurrentUser,
+ withMulti,
+ Utils
+} from 'meteor/vulcan:core';
+import { intlShape } from 'meteor/vulcan:i18n';
+import withStyles from '@material-ui/core/styles/withStyles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
+import TableFooter from '@material-ui/core/TableFooter';
+import Tooltip from '@material-ui/core/Tooltip';
+import TableSortLabel from '@material-ui/core/TableSortLabel';
+import TablePagination from '@material-ui/core/TablePagination';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import { getFieldValue } from './Card';
+import _assign from 'lodash/assign';
+import classNames from 'classnames';
+
+
+/*
+
+Datatable Component
+
+*/
+const baseStyles = theme => ({
+ root: {
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ addButton: {
+ top: '9.5rem',
+ right: '2rem',
+ position: 'fixed',
+ bottom: 'auto',
+ },
+ table: {
+ marginTop:0
+ },
+ denseTable: {},
+ denserTable: {},
+ flatTable: {},
+ tableHead: {},
+ tableBody: {},
+ tableFooter: {},
+ tableRow: {},
+ tableHeadCell: {},
+ tableCell: {},
+ clickRow: {},
+ editCell: {},
+ editButton: {}
+});
+
+const delay = (function () {
+ var timer = 0;
+ return function (callback, ms) {
+ clearTimeout(timer);
+ timer = setTimeout(callback, ms);
+ };
+})();
+
+class Datatable extends PureComponent {
+
+ constructor (props) {
+ super(props);
+
+ this.updateQuery = this.updateQuery.bind(this);
+
+ this.state = {
+ value: '',
+ query: '',
+ currentSort: {},
+ };
+ }
+
+ toggleSort = column => {
+ let currentSort;
+ if (!this.state.currentSort[column]) {
+ currentSort = { [column]: 1 };
+ } else if (this.state.currentSort[column] === 1) {
+ currentSort = { [column]: -1 };
+ } else {
+ currentSort = {};
+ }
+ this.setState({ currentSort });
+ };
+
+ updateQuery (value) {
+ this.setState({
+ value: value
+ });
+ delay(() => {
+ this.setState({
+ query: value
+ });
+ }, 700);
+ }
+
+ render () {
+ if (this.props.data) {
+
+ return
+ {/* DatatableAbove Component part*/}
+ {
+ showSearch &&
+
+
+ );
+ }
+ }
+}
+
+
+Datatable.propTypes = {
+ title: PropTypes.string,
+ className: PropTypes.string,
+ collection: PropTypes.object,
+ options: PropTypes.object,
+ columns: PropTypes.array,
+ showEdit: PropTypes.bool,
+ editComponent: PropTypes.func,
+ showNew: PropTypes.bool,
+ showSearch: PropTypes.bool,
+ emptyState: PropTypes.node,
+ currentUser: PropTypes.object,
+ classes: PropTypes.object,
+ data: PropTypes.array,
+ footerData: PropTypes.array,
+ dense: PropTypes.string,
+ queryDataRef: PropTypes.func,
+ rowClass: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ handleRowClick: PropTypes.func,
+ intlNamespace: PropTypes.string,
+ toggleSort: PropTypes.func,
+ currentSort: PropTypes.object,
+ paginate: PropTypes.bool,
+};
+
+
+Datatable.defaultProps = {
+ showNew: true,
+ showEdit: true,
+ showSearch: true,
+ paginate: false,
+};
+
+
+replaceComponent('Datatable', Datatable, withCurrentUser, [withStyles, baseStyles]);
+
+
+/*
+
+DatatableContents Component
+
+*/
+const datatableContentsStyles = theme => (_assign({}, baseStyles(theme), {
+ table: {
+ marginTop: theme.spacing.unit * 3,
+ marginBottom: theme.spacing.unit * 3,
+ },
+ denseTable: theme.utils.denseTable,
+ flatTable: theme.utils.flatTable,
+ denserTable: theme.utils.denserTable,
+}));
+
+
+const DatatableContents = ({
+ collection,
+ columns,
+ results,
+ loading,
+ loadMore,
+ count,
+ totalCount,
+ networkStatus,
+ refetch,
+ showEdit,
+ editComponent,
+ emptyState,
+ currentUser,
+ classes,
+ footerData,
+ dense,
+ queryDataRef,
+ rowClass,
+ handleRowClick,
+ intlNamespace,
+ title,
+ toggleSort,
+ currentSort,
+ paginate,
+ paginationTerms,
+ setPaginationTerms
+ }) => {
+
+ if (loading) {
+ return
+ {
+ typeof column === 'string'
+ ?
+ getFieldValue(document[column])
+ :
+ getFieldValue(document[column.name])
+ }
+
;
+
+
+replaceComponent('DatatableDefaultCell', DatatableDefaultCell);
diff --git a/packages/vulcan-ui-material/lib/components/core/EditButton.jsx b/packages/vulcan-ui-material/lib/components/core/EditButton.jsx
new file mode 100644
index 000000000..ba1f9ff77
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/core/EditButton.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Components, registerComponent } from 'meteor/vulcan:core';
+import { intlShape } from 'meteor/vulcan:i18n';
+import EditIcon from 'mdi-material-ui/Pencil';
+
+const EditButton = (
+ {
+ collection,
+ document,
+ color = 'default',
+ variant,
+ triggerClasses,
+ buttonClasses,
+ showRemove,
+ ...props
+ },
+ { intl }
+) => (
+
+ {instantiateComponent(beforeComponent, properties)}
+
+ );
+ }
+
+ }
+}
+
+
+FormComponentInner.contextTypes = {
+ intl: intlShape,
+};
+
+
+FormComponentInner.propTypes = {
+ classes: PropTypes.object.isRequired,
+ inputClassName: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ input: PropTypes.any,
+ beforeComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ afterComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ errors: PropTypes.array.isRequired,
+ help: PropTypes.node,
+ onChange: PropTypes.func.isRequired,
+ showCharsRemaining: PropTypes.bool.isRequired,
+ charsRemaining: PropTypes.number,
+ charsCount: PropTypes.number,
+ max: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
+ formInput: PropTypes.func.isRequired,
+};
+
+
+FormComponentInner.displayName = 'FormComponentInner';
+
+
+registerComponent('FormComponentInner', FormComponentInner, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/lib/components/forms/FormErrors.jsx b/packages/vulcan-ui-material/lib/components/forms/FormErrors.jsx
new file mode 100644
index 000000000..049d13ce1
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/FormErrors.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { replaceComponent, Components } from 'meteor/vulcan:core';
+import { FormattedMessage } from 'meteor/vulcan:i18n';
+
+import Snackbar from '@material-ui/core/Snackbar';
+import withStyles from '@material-ui/core/styles/withStyles';
+import classNames from 'classnames';
+
+
+const styles = theme => ({
+ root: {
+ position: 'relative',
+ boxShadow: 'none',
+ marginBottom: theme.spacing.unit * 2
+ },
+ list: {
+ marginBottom: 0
+ },
+ error: { '& > div': { backgroundColor: theme.palette.error[500] } },
+ danger: { '& > div': { backgroundColor: theme.palette.error[500] } },
+ warning: { '& > div': { backgroundColor: theme.palette.error[500] } }
+});
+
+
+const FormErrors = ({ errors, classes }) => {
+ const messageNode = (
+ -
+ {errors.map((error, index) => (
+
-
+
+
+ ))}
+
+ {!!errors.length && (
+
+ );
+};
+
+
+replaceComponent('FormErrors', FormErrors, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/lib/components/forms/FormGroupNone.jsx b/packages/vulcan-ui-material/lib/components/forms/FormGroupNone.jsx
new file mode 100644
index 000000000..773b11eba
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/FormGroupNone.jsx
@@ -0,0 +1,95 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import {
+ Components,
+ registerComponent,
+ instantiateComponent,
+} from 'meteor/vulcan:core';
+import withStyles from '@material-ui/core/styles/withStyles';
+import Users from 'meteor/vulcan:users';
+import classNames from 'classnames';
+
+
+const styles = theme => ({
+ root: {
+ minWidth: '320px'
+ },
+});
+
+
+class FormGroupNone extends PureComponent {
+
+
+ render () {
+ const {
+ name,
+ hidden,
+ classes,
+ currentUser,
+ } = this.props;
+
+ if (this.isAdmin && !Users.isAdmin(currentUser)) {
+ return null;
+ }
+
+ if (typeof hidden === 'function' ? hidden({ ...this.props }) : hidden) {
+ return null;
+ }
+
+ //do not display if no fields, no startComponent and no endComponent
+ if (!this.props.startComponent && !this.props.endComponent && !this.props.fields.length) {
+ return null;
+ }
+
+ const anchorName = name.split('.').length > 1 ? name.split('.')[1] : name;
+
+ const FormComponents = this.props.formComponents;
+
+ return (
+
+ );
+ }
+
+
+}
+
+
+FormGroupNone.propTypes = {
+ name: PropTypes.string,
+ order: PropTypes.number,
+ hidden: PropTypes.bool,
+ fields: PropTypes.array,
+ updateCurrentValues: PropTypes.func,
+ startComponent: PropTypes.node,
+ endComponent: PropTypes.node,
+ currentUser: PropTypes.object,
+};
+
+
+registerComponent('FormGroupNone', FormGroupNone, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/lib/components/forms/FormGroupWithLine.jsx b/packages/vulcan-ui-material/lib/components/forms/FormGroupWithLine.jsx
new file mode 100644
index 000000000..7ea0c0965
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/FormGroupWithLine.jsx
@@ -0,0 +1,198 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Components, registerComponent, instantiateComponent } from 'meteor/vulcan:core';
+import Users from 'meteor/vulcan:users';
+import withStyles from '@material-ui/core/styles/withStyles';
+import Collapse from '@material-ui/core/Collapse';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
+import ExpandLessIcon from 'mdi-material-ui/ChevronUp';
+import ExpandMoreIcon from 'mdi-material-ui/ChevronDown';
+import classNames from 'classnames';
+
+
+const styles = theme => ({
+ root: {
+ minWidth: '320px',
+ },
+ divider: {
+ marginLeft: theme.spacing.unit * -3,
+ marginRight: theme.spacing.unit * -3,
+ },
+ subtitle1: {
+ marginTop: theme.spacing.unit * 5,
+ position: 'relative',
+ },
+ collapsible: {
+ cursor: 'pointer',
+ },
+ typography: {
+ display: 'flex',
+ alignItems: 'center',
+ '& > div': {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ '& > div:first-child': {
+ ...theme.typography.subtitle1,
+ },
+ paddingTop: theme.spacing.unit,
+ paddingBottom: theme.spacing.unit,
+ },
+ toggle: {
+ color: theme.palette.action.active,
+ },
+ entered: {
+ overflow: 'visible',
+ },
+});
+
+
+class FormGroupWithLine extends PureComponent {
+
+ constructor (props) {
+ super(props);
+
+ this.isAdmin = props.name === 'admin';
+
+ this.state = {
+ collapsed: props.startCollapsed || this.isAdmin,
+ };
+ }
+
+
+ toggle = () => {
+ const collapsible = this.props.collapsible || this.isAdmin;
+ if (!collapsible) return;
+
+ this.setState({
+ collapsed: !this.state.collapsed
+ });
+ };
+
+
+ renderHeading = () => {
+ const { classes } = this.props;
+ const collapsible = this.props.collapsible || this.isAdmin;
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ };
+
+
+ // if at least one of the fields in the group has an error, the group as a whole has an error
+ hasErrors = () => _.some(this.props.fields, field => {
+ return !!this.props.errors.filter(error => error.path === field.path).length;
+ });
+
+
+ render () {
+ const {
+ name,
+ hidden,
+ classes,
+ currentUser,
+ } = this.props;
+
+ if (this.isAdmin && !Users.isAdmin(currentUser)) {
+ return null;
+ }
+
+ if (typeof hidden === 'function' ? hidden({ ...this.props }) : hidden) {
+ return null;
+ }
+
+ //do not display if no fields, no startComponent and no endComponent
+ if (!this.props.startComponent && !this.props.endComponent && !this.props.fields.length) {
+ return null;
+ }
+
+ const anchorName = name.split('.').length > 1 ? name.split('.')[1] : name;
+ const collapseIn = !this.state.collapsed || this.hasErrors();
+
+ const FormComponents = this.props.formComponents;
+
+ return (
+
+ );
+ }
+}
+
+
+FormGroupWithLine.propTypes = {
+ name: PropTypes.string,
+ label: PropTypes.string,
+ order: PropTypes.number,
+ fields: PropTypes.array,
+ collapsible: PropTypes.bool,
+ startCollapsed: PropTypes.bool,
+ updateCurrentValues: PropTypes.func,
+ startComponent: PropTypes.node,
+ endComponent: PropTypes.node,
+ currentUser: PropTypes.object,
+};
+
+
+registerComponent('FormGroupWithLine', FormGroupWithLine, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/lib/components/forms/FormNested.jsx b/packages/vulcan-ui-material/lib/components/forms/FormNested.jsx
new file mode 100644
index 000000000..2b3c7e5db
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/FormNested.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { replaceComponent } from 'meteor/vulcan:core';
+import Delete from 'mdi-material-ui/Delete';
+import Plus from 'mdi-material-ui/Plus';
+
+
+const IconRemove = () =>
+ {this.props.label}
+
+ {
+ collapsible &&
+
+
+ {
+ this.state.collapsed
+ ?
+
+ }
+
+
+ {label}
+
+
+);
+FormNestedArrayLayout.propTypes = {
+ hasErrors: PropTypes.bool,
+ label: PropTypes.node,
+ content: PropTypes.node,
+};
+replaceComponent({
+ name: 'FormNestedArrayLayout',
+ component: FormNestedArrayLayout,
+});
diff --git a/packages/vulcan-ui-material/lib/components/forms/FormNestedDivider.jsx b/packages/vulcan-ui-material/lib/components/forms/FormNestedDivider.jsx
new file mode 100644
index 000000000..4f49615d4
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/FormNestedDivider.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { replaceComponent } from 'meteor/vulcan:core';
+// import { FormattedMessage } from 'meteor/vulcan:i18n';
+import withStyles from '@material-ui/core/styles/withStyles';
+import Divider from '@material-ui/core/Divider';
+
+const styles = theme => ({
+ divider: {
+ // marginLeft: -24,
+ // marginRight: -24,
+ marginTop: 16,
+ marginBottom: 23,
+ },
+});
+
+const FormNestedDivider = ({ classes, label, addItem }) => {content}
+
+
+ {
+ deleteDocument
+ ?
+
+
+
+
+ :
+ null
+ }
+
+ {
+ cancelCallback
+ ?
+
+ :
+ null
+ }
+
+ {
+ revertCallback
+ ?
+
+ :
+ null
+ }
+
+
+
+
+ );
+};
+
+
+FormSubmit.propTypes = {
+ submitLabel: PropTypes.node,
+ cancelLabel: PropTypes.node,
+ revertLabel: PropTypes.node,
+ cancelCallback: PropTypes.func,
+ revertCallback: PropTypes.func,
+ document: PropTypes.object,
+ deleteDocument: PropTypes.func,
+ collectionName: PropTypes.string,
+ classes: PropTypes.object,
+};
+
+
+FormSubmit.contextTypes = {
+ intl: intlShape,
+ isChanged: PropTypes.func,
+ clearForm: PropTypes.func,
+};
+
+
+replaceComponent('FormSubmit', FormSubmit, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/lib/components/forms/base-controls/EndAdornment.jsx b/packages/vulcan-ui-material/lib/components/forms/base-controls/EndAdornment.jsx
new file mode 100644
index 000000000..4f136be08
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/base-controls/EndAdornment.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { instantiateComponent } from 'meteor/vulcan:core';
+import withStyles from '@material-ui/core/styles/withStyles';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from 'mdi-material-ui/CloseCircle';
+import classNames from 'classnames';
+
+
+export const styles = theme => ({
+ inputAdornment: {
+ whiteSpace: 'nowrap',
+ marginTop: '0 !important',
+ '& > *': {
+ verticalAlign: 'bottom',
+ },
+ '& > svg': {
+ color: theme.palette.common.darkBlack,
+ },
+ '& > * + *': {
+ marginLeft: 8,
+ }
+ },
+ clearButton: {
+ opacity: 0,
+ '& svg': {
+ width: 20,
+ height: 20,
+ },
+ marginRight: -12,
+ marginLeft: -4,
+ '&:first-child': {
+ marginLeft: -12,
+ },
+ transition: theme.transitions.create('opacity', {
+ duration: theme.transitions.duration.short,
+ }),
+ },
+ urlButton: {
+ verticalAlign: 'bottom',
+ width: 24,
+ height: 24,
+ fontSize: 20,
+ }
+});
+
+
+const EndAdornment = (props) => {
+ const { classes, value, addonAfter, changeValue, hideClear, disabled } = props;
+
+ if (!addonAfter && (!changeValue || hideClear || disabled)) return null;
+ const hasValue = !!value || value === 0;
+
+ const clearButton = changeValue && !hideClear && !disabled &&
+ {this.renderElement()}
+ );
+ }
+
+ return (
+ {this.renderElement()}
+ );
+ }
+
+ return (
+
+
+
+ );
+ }
+}
+
+DateComponent.propTypes = {
+ control: PropTypes.any,
+ datatype: PropTypes.any,
+ group: PropTypes.any,
+ label: PropTypes.string,
+ name: PropTypes.string,
+ value: PropTypes.any,
+};
+
+DateComponent.contextTypes = {
+ updateCurrentValues: PropTypes.func,
+};
+
+export default DateComponent;
diff --git a/packages/vulcan-ui-material/lib/components/forms/controls/DateTime.jsx b/packages/vulcan-ui-material/lib/components/forms/controls/DateTime.jsx
new file mode 100644
index 000000000..5fc870a0a
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/controls/DateTime.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import MuiInput from '../base-controls/MuiInput';
+import { registerComponent } from 'meteor/vulcan:core';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+
+export const styles = theme => ({
+
+ '@global': {
+ 'input[type=datetime]::-ms-clear, input[type=datetime]::-ms-reveal': {
+ display: 'none',
+ width: 0,
+ height: 0,
+ },
+ 'input[type=datetime]::-webkit-search-cancel-button': {
+ display: 'none',
+ '-webkit-appearance': 'none',
+ },
+ 'input[type="datetime"]::-webkit-clear-button': {
+ display: 'none',
+ '-webkit-appearance': 'none',
+ },
+
+ 'input[type="datetime"]::-webkit-inner-spin-button,input[type="datetime"]::-webkit-outer-spin-button': {
+ '-webkit-appearance': 'none',
+ margin: 0,
+ },
+ },
+
+});
+
+
+const DateTimeComponent = ({ refFunction, classes, ...properties }) =>
+
+ this.updateDate(newDate)}
+ inputProps={{name: this.props.name}}
+ />
+
+
+
+
+ );
+ }
+}
+
+DateTimeRdt.propTypes = {
+ control: PropTypes.any,
+ datatype: PropTypes.any,
+ group: PropTypes.any,
+ label: PropTypes.string,
+ name: PropTypes.string,
+ value: PropTypes.any,
+};
+
+DateTimeRdt.contextTypes = {
+ updateCurrentValues: PropTypes.func,
+};
+
+export default DateTimeRdt;
diff --git a/packages/vulcan-ui-material/lib/components/forms/controls/Default.jsx b/packages/vulcan-ui-material/lib/components/forms/controls/Default.jsx
new file mode 100644
index 000000000..e35f64abd
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/controls/Default.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import MuiInput from '../base-controls/MuiInput';
+import { registerComponent } from 'meteor/vulcan:core';
+
+
+const Default = ({ refFunction, ...properties }) =>
+
+ this.updateDate(newDate._d)}
+ format={'x'}
+ inputProps={{name: this.props.name}}
+ />
+
+
+
+
+ );
+ }
+}
+
+TimeRdt.propTypes = {
+ control: PropTypes.any,
+ datatype: PropTypes.any,
+ group: PropTypes.any,
+ label: PropTypes.string,
+ name: PropTypes.string,
+ value: PropTypes.any,
+};
+
+TimeRdt.contextTypes = {
+ updateCurrentValues: PropTypes.func,
+};
+
+export default TimeRdt;
diff --git a/packages/vulcan-ui-material/lib/components/forms/controls/Url.jsx b/packages/vulcan-ui-material/lib/components/forms/controls/Url.jsx
new file mode 100644
index 000000000..d5d9ebf13
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/forms/controls/Url.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import MuiInput from '../base-controls/MuiInput';
+import { registerComponent } from 'meteor/vulcan:core';
+
+
+const UrlComponent = ({ refFunction, ...properties }) =>
+
+ this.updateDate(newDate)}
+ inputProps={{name: this.props.name}}
+ />
+
+ {colorName}
;
+ }
+
+ let rowStyle = {
+ backgroundColor: bgColor,
+ color: fgColor,
+ listStyle: 'none',
+ padding: 15,
+ };
+
+ if (colorValue.toString().indexOf('A1') === 0) {
+ rowStyle = {
+ ...rowStyle,
+ marginTop: 4,
+ };
+ }
+
+ return (
+
+ {colorValue}
+ {bgColor.toUpperCase()}
+
+ -
+ {getColorBlock(theme, classes, cssColor, 500, true)}
+
+ {colorsList}
+
+
+
+
+
+
+ );
+ }
+}
+
+
+UploadImage.propTypes = {
+ clearImage: PropTypes.func.isRequired,
+ index: PropTypes.number.isRequired,
+ image: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
+ loading: PropTypes.bool,
+ error: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+ style: PropTypes.object,
+ classes: PropTypes.object.isRequired,
+};
+
+
+UploadImage.displayName = 'UploadImageMui';
+
+
+registerComponent('UploadImage', UploadImage, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/lib/components/upload/UploadInner.jsx b/packages/vulcan-ui-material/lib/components/upload/UploadInner.jsx
new file mode 100755
index 000000000..1392ec066
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/components/upload/UploadInner.jsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Components, registerComponent, getComponent } from 'meteor/vulcan:lib';
+import Dropzone from 'react-dropzone';
+import withStyles from '@material-ui/core/styles/withStyles';
+import { FormattedMessage } from 'meteor/vulcan:i18n';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+
+/*
+
+Material UI GUI for Cloudinary Image Upload component
+
+*/
+
+
+const styles = theme => ({
+
+ root: {},
+
+ label: {},
+
+ uploadField: {
+ marginTop: theme.spacing.unit,
+ },
+
+ dropzoneBase: {
+ borderWidth: 3,
+ borderStyle: 'dashed',
+ borderColor: theme.palette.background[900],
+ backgroundColor: theme.palette.background[100],
+ color: theme.palette.common.lightBlack,
+ padding: '30px 60px',
+ transition: 'all 0.5s',
+ cursor: 'pointer',
+ position: 'relative',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ '&[aria-disabled="false"]:hover': {
+ color: theme.palette.common.midBlack,
+ borderColor: theme.palette.background['A200'],
+ }
+ },
+
+ dropzoneActive: {
+ borderStyle: 'solid',
+ borderColor: theme.palette.status.info,
+ },
+
+ dropzoneReject: {
+ borderStyle: 'solid',
+ borderColor: theme.palette.status.danger,
+ },
+
+ uploadState: {},
+
+ uploadImages: {
+ border: `1px solid ${theme.palette.background[500]}`,
+ backgroundColor: theme.palette.background[100],
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ paddingTop: theme.spacing.unit,
+ paddingRight: theme.spacing.unit * 0.5,
+ paddingBottom: theme.spacing.unit,
+ paddingLeft: theme.spacing.unit * 0.5,
+ },
+});
+
+
+const UploadInner = (props) => {
+ const {
+ uploading,
+ images,
+ disabled,
+ maxCount,
+ label,
+ help,
+ options,
+ enableMultiple,
+ onDrop,
+ isDeleted,
+ clearImage,
+ classes
+ } = props;
+
+ const UploadImage = getComponent(options.uploadImageComponentName || 'UploadImage');
+
+ return (
+
+
+ })
+ {
+ loading &&
+
+
+
+
+
+ }
+
+ {
+ (disabled && !enableMultiple)
+ ?
+ null
+ :
+
+
+ }
+
+ {!!images.length && (
+
+
+
+
+ {uploading && (
+
+
+
+
+
+ )}
+
+
+ )}
+
+ {images.map(
+ (image, index) =>
+ !isDeleted(index) && (
+
+
+
+
+ {siteTitle}
+
+
+
+
+
+
+ );
+ };
+ }
+
+
+ Layout.propTypes = {
+ classes: PropTypes.object.isRequired,
+ children: PropTypes.node,
+ };
+
+
+ Layout.displayName = 'Layout';
+
+
+ replaceComponent('Layout', Layout, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/lib/example/SideNavigation.jsx b/packages/vulcan-ui-material/lib/example/SideNavigation.jsx
new file mode 100644
index 000000000..745821389
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/example/SideNavigation.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Components, registerComponent, withCurrentUser } from 'meteor/vulcan:core';
+import { withRouter } from 'react-router';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+import Collapse from '@material-ui/core/Collapse';
+import ExpandLessIcon from 'mdi-material-ui/ChevronUp';
+import ExpandMoreIcon from 'mdi-material-ui/ChevronDown';
+import LockIcon from 'mdi-material-ui/Lock';
+import UsersIcon from 'mdi-material-ui/AccountMultiple';
+import ThemeIcon from 'mdi-material-ui/Palette';
+import HomeIcon from 'mdi-material-ui/Home';
+import withStyles from '@material-ui/core/styles/withStyles';
+import Users from 'meteor/vulcan:users';
+
+
+const styles = theme => ({
+ root: {},
+ nested: {
+ paddingLeft: theme.spacing.unit * 4,
+ },
+});
+
+
+class SideNavigation extends React.Component {
+ state = {
+ isOpen: { admin: false }
+ };
+
+ toggle = (item) => {
+ const newState = { isOpen: {} };
+ newState.isOpen[item] = !this.state.isOpen[item];
+ this.setState(newState);
+ };
+
+ render () {
+ const { currentUser, classes, history } = this.props;
+ const isOpen = this.state.isOpen;
+
+ return (
+
+
+
+ this.toggle('sideNav', openOrClose)} />
+
+
+
+
+
+
+
+
+
+ {this.props.children}
+
+
+
+
+
+
+ );
+ }
+}
+
+
+SideNavigation.propTypes = {
+ classes: PropTypes.object.isRequired,
+ currentUser: PropTypes.object,
+};
+
+
+SideNavigation.displayName = 'SideNavigation';
+
+
+registerComponent('SideNavigation', SideNavigation, [withStyles, styles], withCurrentUser, withRouter);
diff --git a/packages/vulcan-ui-material/lib/modules/components.js b/packages/vulcan-ui-material/lib/modules/components.js
new file mode 100644
index 000000000..4aba840ab
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/modules/components.js
@@ -0,0 +1 @@
+export * from '../components';
\ No newline at end of file
diff --git a/packages/vulcan-ui-material/lib/modules/index.js b/packages/vulcan-ui-material/lib/modules/index.js
new file mode 100644
index 000000000..e614e7b6b
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/modules/index.js
@@ -0,0 +1,5 @@
+export * from './components';
+export * from './themes';
+export JssCleanup from '../components/theme/JssCleanup';
+import './sampleTheme';
+import './routes';
diff --git a/packages/vulcan-ui-material/lib/modules/routes.js b/packages/vulcan-ui-material/lib/modules/routes.js
new file mode 100755
index 000000000..55d267e77
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/modules/routes.js
@@ -0,0 +1,10 @@
+import { addRoute } from 'meteor/vulcan:core';
+
+//Only create route on dev mode, not production.
+if (Meteor.isDevelopment) {
+ addRoute({
+ name: 'theme',
+ path: '/theme',
+ componentName: 'ThemeStyles',
+ });
+}
diff --git a/packages/vulcan-ui-material/lib/modules/sampleTheme.js b/packages/vulcan-ui-material/lib/modules/sampleTheme.js
new file mode 100644
index 000000000..a382078a7
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/modules/sampleTheme.js
@@ -0,0 +1,76 @@
+import { registerTheme } from './themes';
+import indigo from '@material-ui/core/colors/indigo';
+import blue from '@material-ui/core/colors/blue';
+import red from '@material-ui/core/colors/red';
+
+
+/** @ignore */
+
+/**
+ *
+ * Sample theme to get you out of the gate quickly
+ *
+ * For a complete list of configuration variables see:
+ * https://material-ui.com/customization/themes/
+ *
+ */
+
+
+const theme = {
+
+ palette: {
+ primary: indigo,
+ secondary: blue,
+ error: red,
+ },
+
+ utils: {
+
+ tooltipEnterDelay: 700,
+
+ errorMessage: {
+ textAlign: 'center',
+ backgroundColor: red[500],
+ color: 'white',
+ borderRadius: '4px',
+ fontWeight: 'bold',
+ },
+
+ denseTable: {
+ '& > thead > tr > th, & > tbody > tr > td': {
+ padding: '4px 16px 4px 16px',
+ },
+ '& > thead > tr > th:last-child, & > tbody > tr > td:last-child': {
+ paddingRight: '16px',
+ },
+ },
+
+ flatTable: {
+ '& > thead > tr > th, & > tbody > tr > td': {
+ padding: '4px 16px 4px 16px',
+ whiteSpace: 'nowrap',
+ },
+ '& > thead > tr > th:last-child, & > tbody > tr > td:last-child': {
+ paddingRight: '16px',
+ },
+ },
+
+ denserTable: {
+ '& > thead > tr, & > tbody > tr': {
+ height: '40px',
+ },
+ '& > thead > tr > th, & > tbody > tr > td': {
+ padding: '4px 16px 4px 16px',
+ whiteSpace: 'nowrap',
+ },
+ '& > thead > tr > th:last-child, & > tbody > tr > td:last-child': {
+ paddingRight: '16px',
+ },
+ },
+
+ },
+
+};
+
+
+registerTheme('Sample', theme);
diff --git a/packages/vulcan-ui-material/lib/modules/themes.js b/packages/vulcan-ui-material/lib/modules/themes.js
new file mode 100644
index 000000000..d829dc36d
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/modules/themes.js
@@ -0,0 +1,67 @@
+/** @module vulcan-material-ui */
+
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import { registerSetting, getSetting } from 'meteor/vulcan:core';
+
+
+registerSetting('muiTheme', 'Sample', 'Material UI theme used by erikdakota:vulcan-material-ui');
+
+
+export const ThemesTable = {}; // storage for info about themes
+
+
+/**
+ * Register a theme with a name
+ *
+ * @param {String} name The name of the theme to register
+ * @param {Object} theme The theme object - see defaultTheme.js
+ *
+ */
+export const registerTheme = (name, theme) => {
+ const themeInfo = {
+ name,
+ theme,
+ };
+
+ ThemesTable[name] = themeInfo;
+};
+
+
+/**
+ * Get a theme registered with registerTheme()
+ *
+ * @param {String} name The name of the theme to get
+ *
+ * @returns {Object} A theme object
+ */
+export const getTheme = (name) => {
+ const themeInfo = ThemesTable[name];
+ if (!themeInfo) return null;
+ themeInfo.theme.typography = { ...themeInfo.theme.typography, useNextVariants: true };
+ return createMuiTheme(themeInfo.theme);
+};
+
+/**
+ * Get the raw theme object registered with registerTheme()
+ *
+ * @param {String} name The name of the theme to get
+ *
+ * @returns {Object} The object passed to registerTheme
+ */
+
+export const getRawTheme = (name) => {
+ const themeInfo = ThemesTable[name];
+ if (!themeInfo) return null;
+ return themeInfo.theme;
+};
+
+/**
+ * Get the theme specified in the 'muiTheme' setting
+ *
+ * @returns {Object}
+ */
+export const getCurrentTheme = () => {
+ const themeName = getSetting('muiTheme', 'Sample');
+ const theme = getTheme(themeName);
+ return theme;
+};
diff --git a/packages/vulcan-ui-material/lib/server/main.js b/packages/vulcan-ui-material/lib/server/main.js
new file mode 100644
index 000000000..dadfe15cf
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/server/main.js
@@ -0,0 +1,2 @@
+export * from '../modules/index';
+import './wrapWithMuiTheme';
diff --git a/packages/vulcan-ui-material/lib/server/wrapWithMuiTheme.jsx b/packages/vulcan-ui-material/lib/server/wrapWithMuiTheme.jsx
new file mode 100644
index 000000000..32933c0e5
--- /dev/null
+++ b/packages/vulcan-ui-material/lib/server/wrapWithMuiTheme.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { addCallback } from 'meteor/vulcan:core';
+import JssProvider from 'react-jss/lib/JssProvider';
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
+import createGenerateClassName from '@material-ui/core/styles/createGenerateClassName';
+import { getCurrentTheme } from '../modules/themes';
+import { SheetsRegistry } from 'react-jss/lib/jss';
+import JssCleanup from '../components/theme/JssCleanup';
+
+
+function wrapWithMuiTheme (app, {context }) {
+ const sheetsRegistry = new SheetsRegistry();
+ context.sheetsRegistry = sheetsRegistry;
+
+ const sheetsManager = new Map();
+
+ const theme = getCurrentTheme();
+
+ const generateClassName = createGenerateClassName({ seed: '' });
+
+ return (
+ -
+
+
+ }
+
+ -
+