Masonry

docs/pages/api-docs/masonry.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './masonry.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs/translations/api-docs/masonry', false, /masonry.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/masonry.json

@@ -0,0 +1,14 @@
+{
+  "props": {},
+  "name": "Masonry",
+  "styles": {
+    "classes": ["root", "column"],
+    "globalClasses": { "root": "root-3", "column": "column-4" },
+    "name": "Masonry"
+  },
+  "spread": true,
+  "filename": "/packages/material-ui-lab/src/Masonry/Masonry.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/masonry/\">Masonry</a></li></ul>",
+  "styledComponent": false
+}

docs/pages/components/masonry.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'components/masonry';
+const requireDemo = require.context('docs/src/pages/components/masonry', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/components/masonry',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/src/pages.ts

@@ -172,6 +172,7 @@ const pages: MuiPage[] = [
               { pathname: '/components/time-picker' },
             ],
           },
+          { pathname: '/components/masonry', title: 'Masonry' },
           { pathname: '/components/timeline' },
           { pathname: '/components/trap-focus' },
           { pathname: '/components/tree-view' },

docs/src/pages/components/masonry/Columns.js

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Masonry from '@material-ui/lab/Masonry';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import itemData from './demoData';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: 550,
+    overflow: 'hidden',
+    width: '100%',
+  },
+  masonryContainer: {
+    height: 450,
+    overflowY: 'scroll',
+    position: 'relative',
+    width: '100%',
+  },
+  card: {
+    width: '100%',
+    display: 'inline-block',
+    marginBottom: theme.spacing(2),
+    verticalAlign: 'top',
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9
+    position: 'relative',
+  },
+}));
+
+function MasonryColumns() {
+  const classes = useStyles();
+  const [columns, setColumns] = React.useState(2);
+
+  const handleChange = (event) => {
+    setColumns(Number(event.target.value));
+  };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.masonryContainer}>
+        <Masonry columns={columns}>
+          {itemData.map((item, index) => (
+            <Card key={`masonry-item-${index}`} className={classes.card}>
+              <CardMedia
+                className={classes.media}
+                image={item.img}
+                title={item.title}
+              />
+              <CardContent>{item.content}</CardContent>
+            </Card>
+          ))}
+        </Masonry>
+      </div>
+      <FormLabel>columns</FormLabel>
+      <RadioGroup
+        name="columns"
+        aria-label="columns"
+        value={columns.toString()}
+        onChange={handleChange}
+        row
+      >
+        {[1, 2, 3, 4, 5, 6].map((value) => (
+          <FormControlLabel
+            key={value}
+            value={value.toString()}
+            control={<Radio />}
+            label={value.toString()}
+          />
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
+
+export default MasonryColumns;

docs/src/pages/components/masonry/Columns.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Masonry from '@material-ui/lab/Masonry';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import itemData from './demoData';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    height: 550,
+    overflow: 'hidden',
+    width: '100%',
+  },
+  masonryContainer: {
+    height: 450,
+    overflowY: 'scroll',
+    position: 'relative',
+    width: '100%',
+  },
+  card: {
+    width: '100%',
+    display: 'inline-block',
+    marginBottom: theme.spacing(2),
+    verticalAlign: 'top',
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9
+    position: 'relative',
+  },
+}));
+
+function MasonryColumns() {
+  const classes = useStyles();
+  const [columns, setColumns] = React.useState<number>(2);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setColumns(Number(event.target.value));
+  };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.masonryContainer}>
+        <Masonry columns={columns}>
+          {itemData.map((item, index) => (
+            <Card key={`masonry-item-${index}`} className={classes.card}>
+              <CardMedia
+                className={classes.media}
+                image={item.img}
+                title={item.title}
+              />
+              <CardContent>{item.content}</CardContent>
+            </Card>
+          ))}
+        </Masonry>
+      </div>
+      <FormLabel>columns</FormLabel>
+      <RadioGroup
+        name="columns"
+        aria-label="columns"
+        value={columns.toString()}
+        onChange={handleChange}
+        row
+      >
+        {[1, 2, 3, 4, 5, 6].map((value) => (
+          <FormControlLabel
+            key={value}
+            value={value.toString()}
+            control={<Radio />}
+            label={value.toString()}
+          />
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
+
+export default MasonryColumns;

docs/src/pages/components/masonry/Spacing.js

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Masonry from '@material-ui/lab/Masonry';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import itemData from './demoData';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: 550,
+    overflow: 'hidden',
+    width: '100%',
+  },
+  masonryContainer: {
+    height: 450,
+    overflowY: 'scroll',
+    position: 'relative',
+    width: '100%',
+  },
+  card: {
+    width: '100%',
+    display: 'inline-block',
+    marginBottom: theme.spacing(2),
+    verticalAlign: 'top',
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9
+    position: 'relative',
+  },
+}));
+
+function MasonrySpacing() {
+  const classes = useStyles();
+  const [spacing, setSpacing] = React.useState(1);
+
+  const handleChange = (event) => {
+    setSpacing(Number(event.target.value));
+  };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.masonryContainer}>
+        <Masonry columns={3} spacing={spacing}>
+          {itemData.map((item, index) => (
+            <Card key={`masonry-item-${index}`} className={classes.card}>
+              <CardMedia
+                className={classes.media}
+                image={item.img}
+                title={item.title}
+              />
+              <CardContent>{item.content}</CardContent>
+            </Card>
+          ))}
+        </Masonry>
+      </div>
+      <FormLabel>spacing</FormLabel>
+      <RadioGroup
+        name="spacing"
+        aria-label="spacing"
+        value={spacing.toString()}
+        onChange={handleChange}
+        row
+      >
+        {[1, 2, 3, 4, 5, 6].map((value) => (
+          <FormControlLabel
+            key={value}
+            value={value.toString()}
+            control={<Radio />}
+            label={value.toString()}
+          />
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
+
+export default MasonrySpacing;

docs/src/pages/components/masonry/Spacing.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Masonry from '@material-ui/lab/Masonry';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import itemData from './demoData';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    height: 550,
+    overflow: 'hidden',
+    width: '100%',
+  },
+  masonryContainer: {
+    height: 450,
+    overflowY: 'scroll',
+    position: 'relative',
+    width: '100%',
+  },
+  card: {
+    width: '100%',
+    display: 'inline-block',
+    marginBottom: theme.spacing(2),
+    verticalAlign: 'top',
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9
+    position: 'relative',
+  },
+}));
+
+function MasonrySpacing() {
+  const classes = useStyles();
+  const [spacing, setSpacing] = React.useState<number>(1);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSpacing(Number(event.target.value));
+  };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.masonryContainer}>
+        <Masonry columns={3} spacing={spacing}>
+          {itemData.map((item, index) => (
+            <Card key={`masonry-item-${index}`} className={classes.card}>
+              <CardMedia
+                className={classes.media}
+                image={item.img}
+                title={item.title}
+              />
+              <CardContent>{item.content}</CardContent>
+            </Card>
+          ))}
+        </Masonry>
+      </div>
+      <FormLabel>spacing</FormLabel>
+      <RadioGroup
+        name="spacing"
+        aria-label="spacing"
+        value={spacing.toString()}
+        onChange={handleChange}
+        row
+      >
+        {[1, 2, 3, 4, 5, 6].map((value) => (
+          <FormControlLabel
+            key={value}
+            value={value.toString()}
+            control={<Radio />}
+            label={value.toString()}
+          />
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
+
+export default MasonrySpacing;