From 42ba28edc121b2a47fc6c14cc960376b9048d61a Mon Sep 17 00:00:00 2001
From: Ganesh <ganesh_r@f22labs.com>
Date: Thu, 17 Oct 2019 07:27:19 +0530
Subject: [PATCH] [docs]:add ts demos for SimpleNoSsr and FrameDeferring

---
 .../pages/components/no-ssr/FrameDeferring.js |  8 ++-
 .../components/no-ssr/FrameDeferring.tsx      | 63 +++++++++++++++++++
 .../pages/components/no-ssr/SimpleNoSsr.tsx   | 33 ++++++++++
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/components/no-ssr/FrameDeferring.tsx
 create mode 100644 docs/src/pages/components/no-ssr/SimpleNoSsr.tsx

diff --git a/docs/src/pages/components/no-ssr/FrameDeferring.js b/docs/src/pages/components/no-ssr/FrameDeferring.js
index fc1b85a60e698d..31b06f167418b9 100644
--- a/docs/src/pages/components/no-ssr/FrameDeferring.js
+++ b/docs/src/pages/components/no-ssr/FrameDeferring.js
@@ -10,7 +10,13 @@ const useStyles = makeStyles({
 });
 
 function LargeTree() {
-  return Array.from(new Array(3000)).map((_, index) => <span key={index}>.</span>);
+  return (
+    <>
+      {Array.from(new Array(3000)).map((_, index) => (
+        <span key={index}>.</span>
+      ))}
+    </>
+  );
 }
 
 function FrameDeferring() {
diff --git a/docs/src/pages/components/no-ssr/FrameDeferring.tsx b/docs/src/pages/components/no-ssr/FrameDeferring.tsx
new file mode 100644
index 00000000000000..31b06f167418b9
--- /dev/null
+++ b/docs/src/pages/components/no-ssr/FrameDeferring.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import NoSsr from '@material-ui/core/NoSsr';
+
+const useStyles = makeStyles({
+  container: {
+    maxWidth: 300,
+    wordBreak: 'break-all',
+  },
+});
+
+function LargeTree() {
+  return (
+    <>
+      {Array.from(new Array(3000)).map((_, index) => (
+        <span key={index}>.</span>
+      ))}
+    </>
+  );
+}
+
+function FrameDeferring() {
+  const classes = useStyles();
+  const [state, setState] = React.useState({ open: false, defer: false });
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() =>
+          setState({
+            open: !state.open,
+            defer: false,
+          })
+        }
+      >
+        {'Render NoSsr defer="false"'}
+      </button>
+      <button
+        type="button"
+        onClick={() =>
+          setState({
+            open: !state.open,
+            defer: true,
+          })
+        }
+      >
+        {'Render NoSsr defer="true"'}
+      </button>
+      {state.open ? (
+        <div className={classes.container}>
+          <span>Outside NoSsr</span>
+          <NoSsr defer={state.defer}>
+            ....Inside NoSsr
+            <LargeTree />
+          </NoSsr>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default FrameDeferring;
diff --git a/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx b/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
new file mode 100644
index 00000000000000..02f5dd20f8f243
--- /dev/null
+++ b/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { WithStyles } from '@material-ui/styles';
+import NoSsr from '@material-ui/core/NoSsr';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme: any) => ({
+  button: {
+    display: 'block',
+    margin: theme.spacing(2),
+  },
+});
+
+export interface iProps extends WithStyles<typeof styles> {}
+
+function SimpleNoSsr(props: iProps) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <Button className={classes.button} variant="contained" color="primary">
+        Server & Client
+      </Button>
+      <NoSsr>
+        <Button className={classes.button} variant="contained" color="secondary">
+          Client only
+        </Button>
+      </NoSsr>
+    </div>
+  );
+}
+
+export default withStyles(styles)(SimpleNoSsr);