+ {
+ 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/components/core/Datatable.jsx b/packages/vulcan-ui-material/components/core/Datatable.jsx
new file mode 100644
index 000000000..982a404d6
--- /dev/null
+++ b/packages/vulcan-ui-material/components/core/Datatable.jsx
@@ -0,0 +1,644 @@
+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: {
+ position: 'absolute',
+ top: '-8px',
+ right: 0,
+ },
+ search: {
+ marginBottom: theme.spacing.unit * 8,
+ },
+ table: {},
+ 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/components/core/EditButton.jsx b/packages/vulcan-ui-material/components/core/EditButton.jsx
new file mode 100644
index 000000000..7e391a648
--- /dev/null
+++ b/packages/vulcan-ui-material/components/core/EditButton.jsx
@@ -0,0 +1,86 @@
+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,
+ ...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.number,
+ formInput: PropTypes.func.isRequired,
+};
+
+
+FormComponentInner.displayName = 'FormComponentInner';
+
+
+registerComponent('FormComponentInner', FormComponentInner, [withStyles, styles]);
diff --git a/packages/vulcan-ui-material/components/forms/FormErrors.jsx b/packages/vulcan-ui-material/components/forms/FormErrors.jsx
new file mode 100644
index 000000000..049d13ce1
--- /dev/null
+++ b/packages/vulcan-ui-material/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/components/forms/FormGroup.jsx b/packages/vulcan-ui-material/components/forms/FormGroup.jsx
new file mode 100644
index 000000000..3ad7781db
--- /dev/null
+++ b/packages/vulcan-ui-material/components/forms/FormGroup.jsx
@@ -0,0 +1,205 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Components, replaceComponent, 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 Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import ExpandLessIcon from 'mdi-material-ui/ChevronUp';
+import ExpandMoreIcon from 'mdi-material-ui/ChevronDown';
+import classNames from 'classnames';
+
+
+const styles = theme => ({
+ root: {
+ minWidth: '320px'
+ },
+ paper: {
+ padding: theme.spacing.unit * 3
+ },
+ subtitle1: {
+ display: 'flex',
+ alignItems: 'center',
+ paddingLeft: theme.spacing.unit / 2,
+ marginTop: theme.spacing.unit * 5,
+ marginBottom: theme.spacing.unit,
+ color: theme.palette.primary[500],
+ },
+ collapsible: {
+ cursor: 'pointer',
+ },
+ label: {},
+ toggle: {
+ '& svg': {
+ width: 21,
+ height: 21,
+ display: 'block',
+ }
+ },
+ container: {
+ paddingLeft: 4,
+ paddingRight: 4,
+ marginLeft: -4,
+ marginRight: -4,
+ },
+ entered: {
+ overflow: 'visible',
+ },
+});
+
+
+class FormGroup 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, label } = this.props;
+ const collapsible = this.props.collapsible || this.isAdmin;
+
+ return (
+
+ {label}
+
+
+ {
+ collapsible &&
+
+
+ {
+ this.state.collapsed
+ ?
+
+ }
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+
+ // 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/components/forms/FormNested.jsx b/packages/vulcan-ui-material/components/forms/FormNested.jsx
new file mode 100644
index 000000000..2b3c7e5db
--- /dev/null
+++ b/packages/vulcan-ui-material/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
+ ?
+
+ }
+
+
+ {
+ 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/components/forms/base-controls/EndAdornment.jsx b/packages/vulcan-ui-material/components/forms/base-controls/EndAdornment.jsx
new file mode 100644
index 000000000..4f136be08
--- /dev/null
+++ b/packages/vulcan-ui-material/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/components/forms/controls/DateTime.jsx b/packages/vulcan-ui-material/components/forms/controls/DateTime.jsx
new file mode 100644
index 000000000..5fc870a0a
--- /dev/null
+++ b/packages/vulcan-ui-material/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/components/forms/controls/Default.jsx b/packages/vulcan-ui-material/components/forms/controls/Default.jsx
new file mode 100644
index 000000000..e35f64abd
--- /dev/null
+++ b/packages/vulcan-ui-material/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/components/forms/controls/Url.jsx b/packages/vulcan-ui-material/components/forms/controls/Url.jsx
new file mode 100644
index 000000000..d5d9ebf13
--- /dev/null
+++ b/packages/vulcan-ui-material/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/components/upload/UploadInner.jsx b/packages/vulcan-ui-material/components/upload/UploadInner.jsx
new file mode 100755
index 000000000..b3c4ab007
--- /dev/null
+++ b/packages/vulcan-ui-material/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/example/SideNavigation.jsx b/packages/vulcan-ui-material/example/SideNavigation.jsx
new file mode 100644
index 000000000..2d30e417f
--- /dev/null
+++ b/packages/vulcan-ui-material/example/SideNavigation.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Components, registerComponent, withCurrentUser } from 'meteor/vulcan:core';
+import { withRouter } from 'react-router-dom';
+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 = this.props.currentUser;
+ const classes = this.props.classes;
+ 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/forms.css b/packages/vulcan-ui-material/forms.css
new file mode 100644
index 000000000..219fee574
--- /dev/null
+++ b/packages/vulcan-ui-material/forms.css
@@ -0,0 +1,16 @@
+.form-nested-item {
+ display: flex;
+}
+
+.form-nested-item-inner {
+ flex-grow: 1;
+}
+
+.form-nested-item-remove {
+ padding-top: 8px;
+ margin-left: 8px;
+}
+
+.form-nested-item-remove > button {
+ margin-right: -4px;
+}
diff --git a/packages/vulcan-ui-material/fr_FR.js b/packages/vulcan-ui-material/fr_FR.js
new file mode 100644
index 000000000..2d5c04745
--- /dev/null
+++ b/packages/vulcan-ui-material/fr_FR.js
@@ -0,0 +1,8 @@
+import { addStrings } from 'meteor/vulcan:core';
+
+addStrings('fr', {
+
+ "search.search": "Recherche",
+ "search.clear": "Effacer la recherche",
+
+});
diff --git a/packages/vulcan-ui-material/history.md b/packages/vulcan-ui-material/history.md
new file mode 100644
index 000000000..8613491ff
--- /dev/null
+++ b/packages/vulcan-ui-material/history.md
@@ -0,0 +1,109 @@
+1.12.8_17 / 2019-02-02
+======================
+
+ * TooltipIntl: Changed display from 'inline-block' to 'inherit' for more flexibility
+ * Countries: Added getRegionLabel function
+
+1.12.8_16 / 2019-01-21
+======================
+
+ * Countries: Fixed bug in validateRegion
+
+1.12.8_15 / 2019-01-21
+======================
+
+ * Countries: Fixed bug in validateRegion
+
+1.12.8_14 / 2019-01-20
+======================
+
+ * Countries: Added validateRegion function, which given a region value or label, will return the region value ('NY' or 'New York' => 'NY)
+ * The contents of countries is now exported - this may be refactored out of the core vulcan-material-ui as some point
+
+1.12.8_13 / 2019-01-14
+======================
+
+ * ModalTrigger: Added boolean dialogOverflow prop for use cases like popups that can go beyond the size of the dialog box
+ * MuiSuggest: Fixed bug - The disabled state was not displayed correctly
+ * MuiSuggest: Fixed bug - After selecting a suggestion, clicking on the control did not re-open the suggestions menu
+
+1.12.8_12 / 2019-01-12
+======================
+
+ * Upgraded to Meteor 1.8.0.2
+
+1.12.8_11 / 2018-12-21
+======================
+
+ * SearchInput: Added install autosize-input to readme
+ * Datatable: Fixed sorting delay
+ * Datatable: Added tableHeadCell class
+ * Datatable: Added cellClass column property, which can be a string or a function: column.cellClass({ column, document, currentUser })
+
+1.12.8_10 / 2018-12-09
+======================
+
+ * TooltipIntl: Added icon class
+ * FormGroupWithLine: Moved caret from the right side to next to the title
+ * Changed load_more.loaded_all string
+
+1.12.8_9 / 2018-11-26
+=====================
+
+ * Fixed bug that displayed invalid total count at the bottom of data tables
+
+1.12.8_8 / 2018-11-23
+=====================
+
+ * Improved the functionality of the LoadMore component
+ * The showNoMore property has been deprecated
+ * A showCount property has been added (true by default) that shows a count of loaded and total items
+ * The load more icon or button is displayed even when infiniteScroll is enabled
+
+1.12.8_7 / 2018-11-10
+=====================
+
+ * Fixed bug in Datatable.jsx
+ * Updated ReadMe
+
+1.12.8_6 / 2018-11-06
+=====================
+
+ * Fixed bug in Datatable.jsx
+ * Reduced spacing of form components
+
+1.12.8_5 / 2018-10-31
+=====================
+
+ * Fixed bugs in Datatable pagination
+ * Set Datatable paginate prop to false by default
+
+1.12.8_4 / 2018-10-31
+=====================
+
+ * Removed 'fr_FR.js' from package.js because any french strings loaded activates the french language
+ * Fixed delete button and its tooltips positioning in FormSubmit
+ * Added pagination to Datatable
+
+1.12.8_2 / 2018-10-29
+=====================
+
+ * Fixed localization in "clear search" tooltip
+ * Added name and aria-haspopup properties to the input component to improve compliance and facilitate UAT
+ * Replaced Date, Time and DateTime form controls with native controls as recommended by MUI.
+ The deprecated react-datetime version of the controls are still there as DateRdt, TimeRdt and DateTimeRdt, but they are not registered.
+ * Updated readme
+
+1.12.8_1 / 2018-10-22
+=====================
+
+ * Made form components compatible with new Form.formComponents property
+
+1.12.8 / 2018-10-19
+===================
+
+ * Made improvements to the search box, including keyboard shortcuts (s: focus search; c: clear search)
+ * Added support in TooltipIntl for tooltips in popovers
+ * Added action prop to ModalTrigger that enables a parent component to call openModal and closeModal
+ * Started using MUI tables in Card component
+ * Fixed bugs in MuiSuggest component
diff --git a/packages/vulcan-ui-material/modules/index.js b/packages/vulcan-ui-material/modules/index.js
new file mode 100644
index 000000000..5a65d1ab1
--- /dev/null
+++ b/packages/vulcan-ui-material/modules/index.js
@@ -0,0 +1,4 @@
+export * from './themes';
+export JssCleanup from '../components/theme/JssCleanup';
+import './sampleTheme';
+import './routes';
diff --git a/packages/vulcan-ui-material/modules/routes.js b/packages/vulcan-ui-material/modules/routes.js
new file mode 100755
index 000000000..ee9c6cf06
--- /dev/null
+++ b/packages/vulcan-ui-material/modules/routes.js
@@ -0,0 +1,8 @@
+import { addRoute } from 'meteor/vulcan:core';
+
+
+addRoute({
+ name: 'theme',
+ path: '/theme',
+ componentName: 'ThemeStyles',
+});
diff --git a/packages/vulcan-ui-material/modules/sampleTheme.js b/packages/vulcan-ui-material/modules/sampleTheme.js
new file mode 100644
index 000000000..a382078a7
--- /dev/null
+++ b/packages/vulcan-ui-material/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/modules/themes.js b/packages/vulcan-ui-material/modules/themes.js
new file mode 100644
index 000000000..eb9b57744
--- /dev/null
+++ b/packages/vulcan-ui-material/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/package.js b/packages/vulcan-ui-material/package.js
new file mode 100644
index 000000000..024850c42
--- /dev/null
+++ b/packages/vulcan-ui-material/package.js
@@ -0,0 +1,26 @@
+Package.describe({
+ name: 'vulcan:ui-material',
+ version: '1.12.17',
+ summary: 'Replacement for Vulcan (http://vulcanjs.org/) components using material-ui',
+ documentation: 'README.md'
+});
+
+
+Package.onUse(function (api) {
+ api.versionsFrom('METEOR@1.6');
+
+ api.use([
+ 'ecmascript',
+ 'vulcan:core@1.12.8',
+ 'vulcan:accounts@1.12.8',
+ 'vulcan:forms@1.12.8',
+ ]);
+
+ api.addFiles([
+ 'accounts.css',
+ 'forms.css',
+ ], ['client', 'server']);
+
+ api.mainModule('client/main.js', 'client');
+ api.mainModule('server/main.js', 'server');
+});
diff --git a/packages/vulcan-ui-material/readme.md b/packages/vulcan-ui-material/readme.md
new file mode 100644
index 000000000..05f71b4b4
--- /dev/null
+++ b/packages/vulcan-ui-material/readme.md
@@ -0,0 +1,208 @@
+# erikdakoda:vulcan-material-ui 1.12.8_13
+
+Replacement for [Vulcan](http://vulcanjs.org/) components using [Material-UI](https://material-ui.com/).
+This version has been tested against Vulcan 1.12.8 and Material-UI 3.1.0.
+
+To give me feedback open an issue on GitHub or you can reach me on the [Vulcan Slack](https://vulcanjs.slack.com)
+channel as erikdakoda.
+
+There are some nice bonus features like a CountrySelect with autocomplete and theming.
+
+All components in vulcan:ui-bootstrap, vulcan:forms and vulcan:accounts have been implemented except for Icon.
+
+## Installation
+
+To add vulcan-material-ui to an existing Vulcan project, enter the following:
+
+``` sh
+meteor add erikdakoda:vulcan-material-ui
+
+meteor npm install --save @material-ui/core
+meteor npm install --save react-jss
+meteor npm install --save mdi-material-ui
+meteor npm install --save react-autosuggest
+meteor npm install --save autosuggest-highlight
+meteor npm install --save react-isolated-scroll
+meteor npm install --save-exact react-keyboard-event-handler@1.3.2
+meteor npm install --save autosize-input
+```
+
+> NOTE: If you want to avoid deprecation warnings added in MUI versions after 3.1.0, you can lock MUI to the currently supported version using `meteor npm install --save @material-ui/core@3.1.0`. Don't for get to remove or update the version number when you update this package in the future.
+
+
+> IMPORTANT: Please note that I have abandoned material-ui-icons in favor of mdi-material-ui because it has a much larger [selection of icons](https://materialdesignicons.com/).
+
+This package no longer depends on `vulcan:ui-boostrap`, so you can remove it.
+
+To activate the example layout copy the three components to your project and import them:
+
+``` javascript
+import './example/Header',
+import './example/Layout',
+import './example/SideNavigation',
+```
+
+## Theming
+
+For an example theme see `modules/sampleTheme.js`. For a complete list of values you can customize,
+see the [MUI Default Theme](https://material-ui-next.com/customization/default-theme/).
+
+Register your theme in the Vulcan environment by giving it a name: `registerTheme('MyTheme', theme);`.
+You can have multiple themes registered and you can specify which one to use in your settings file using the `muiTheme` public setting.
+
+In addition to the Material UI spec, I use a `utils` section in my themes where I place global variables for reusable styles.
+For example the sample theme contains
+
+```
+const theme = {
+
+ . . .
+
+ utils: {
+
+ tooltipEnterDelay: 700,
+
+ errorMessage: {
+ textAlign: 'center',
+ backgroundColor: red[500],
+ color: 'white',
+ borderRadius: '4px',
+ },
+
+ . . .
+
+ // additional utils definitions go here
+
+ },
+
+};
+```
+
+You can use tooltipEnterDelay (or any other variable you define in utils) anywhere you include the withTheme HOC. See `/components/bonus/TooltipIconButton.jsx` for an example.
+
+You can use errorMessage (or any other style fragment you define in utils) anywhere you include the withStyles HOC. See `/components/accounts/Form.jsx` for an example.
+
+## Server Side Rendering (SSR)
+
+Material UI and Vulcan support SSR, but this is a complex beast with pitfalls. Sometimes you will see a warning like this:
+
+`Warning: Prop className did not match. Server: "MuiChip-label-131" Client: "MuiChip-label-130"`
+
+Sometimes the React rendered on the server and the client don't match exactly and this causes a problem with [JSS](https://material-ui-next.com/customization/css-in-js/#jss). This is a complicated issue that has multiple causes and I will be working on solving each of the issues causing this over time.
+
+Your pages should still render correctly, but there may be a blink and redraw when the first page after SSR loads in the browser.
+
+In your own code, make sure that your components will render the same on the server and the client. This means not referring to client-side object such as `document` or `jQuery`. If you have a misbehaving component, try wrapping it with [react-no-ssr](https://github.com/kadirahq/react-no-ssr).
+
+## Form Controls
+
+You can pass a couple of extra options to inputs from the `form` property of your schema:
+
+``` javascript
+ userKey: {
+ type: String,
+ label: 'User key',
+ description: 'The user’s key',
+ optional: true,
+ hidden: function ({ document }) {
+ return !document.platformId || !document.usePlatformApp;
+ },
+ inputProperties: {
+ autoFocus: true, // focus this input when the form loads
+ addonBefore: -
+
+
+ }
+
+ -
+