diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js index 63beaa514e83cc..ee21ddfd27a5c9 100644 --- a/docs/src/modules/components/AppDrawerNavItem.js +++ b/docs/src/modules/components/AppDrawerNavItem.js @@ -36,8 +36,8 @@ const styles = theme => ({ }, navLinkButton: { color: theme.palette.text.secondary, - marginLeft: theme.spacing.unit * 3, fontSize: theme.typography.pxToRem(13), + paddingLeft: theme.spacing.unit * 5, }, activeButton: { color: theme.palette.text.primary, diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 692ae5b88de247..adbb7089a043dc 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -1,13 +1,13 @@ -// @flow - import React from 'react'; import PropTypes from 'prop-types'; +import LZString from 'lz-string'; import { withStyles } from '@material-next/core/styles'; import IconButton from '@material-next/core/IconButton'; import Collapse from '@material-next/core/transitions/Collapse'; +import ModeEditIcon from '@material-next/icons/ModeEdit'; import CodeIcon from '@material-next/icons/Code'; -import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import Tooltip from '@material-next/core/Tooltip'; +import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; const styles = theme => ({ root: { @@ -16,13 +16,24 @@ const styles = theme => ({ marginBottom: 40, marginLeft: -theme.spacing.unit * 2, marginRight: -theme.spacing.unit * 2, + [theme.breakpoints.up('sm')]: { + marginLeft: 0, + marginRight: 0, + }, + }, + demo: { + ...theme.mixins.gutters({ + display: 'flex', + justifyContent: 'center', + paddingTop: theme.spacing.unit * 2, + paddingBottom: theme.spacing.unit * 2, + }), + [theme.breakpoints.up('sm')]: { + paddingLeft: theme.spacing.unit * 3, + paddingRight: theme.spacing.unit * 3, + paddingTop: theme.spacing.unit * 6, + }, }, - demo: theme.mixins.gutters({ - display: 'flex', - justifyContent: 'center', - paddingTop: 20, - paddingBottom: 20, - }), codeButton: { flip: false, display: 'none', @@ -30,50 +41,125 @@ const styles = theme => ({ position: 'absolute', top: 2, right: 7, + [theme.breakpoints.up('sm')]: { + display: 'block', + }, }, code: { display: 'none', padding: 0, margin: 0, + [theme.breakpoints.up('sm')]: { + display: 'block', + }, '& pre': { overflow: 'auto', margin: '0px !important', borderRadius: '0px !important', }, }, - [theme.breakpoints.up(600)]: { - codeButton: { - display: 'block', - }, - code: { + codesandbox: { + display: 'none', + [theme.breakpoints.up('sm')]: { display: 'block', - }, - root: { - marginLeft: 0, - marginRight: 0, + flip: false, + zIndex: 10, + position: 'absolute', + top: 2, + right: 48, }, }, }); -class Demo extends React.Component { +function compress(object) { + return LZString.compressToBase64(JSON.stringify(object)) + .replace(/\+/g, '-') // Convert '+' to '-' + .replace(/\//g, '_') // Convert '/' to '_' + .replace(/=+$/, ''); // Remove ending '=' +} + +class Demo extends React.Component { state = { codeOpen: false, }; - handleCodeButtonClick = () => { + codesandboxForm = null; + + handleClickCodeOpen = () => { this.setState({ codeOpen: !this.state.codeOpen, }); }; + handleClickCodesandbox = () => { + const codesandboxValue = { + files: { + 'package.json': { + content: { + dependencies: { + react: 'latest', + 'react-dom': 'latest', + '@material-next/core': 'latest', + '@material-next/icons': 'latest', + }, + }, + }, + 'demo.js': { + content: this.props.raw, + }, + 'index.js': { + content: ` +import React from 'react'; +import { render } from 'react-dom'; +import Demo from './demo'; + +const rootElement = document.querySelector('#root'); +if (rootElement) { + render(, rootElement); +} + `, + }, + 'index.html': { + content: ` + + + +
+ + `, + }, + }, + }; + + this.codesandboxForm.querySelector('[name="parameters"]').value = compress(codesandboxValue); + this.codesandboxForm.submit(); + }; + render() { const { classes, js: DemoComponent, raw } = this.props; const { codeOpen } = this.state; return (
+ +
+ + + +
{ + this.codesandboxForm = node; + }} + method="get" + action="https://codesandbox.io/api/v1/sandboxes/define" + target="_blank" + > + +
+
+
- + diff --git a/package.json b/package.json index 765c5104798b34..64008c30033df4 100644 --- a/package.json +++ b/package.json @@ -147,6 +147,7 @@ "karma-phantomjs-launcher": "^1.0.4", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.6", + "lz-string": "^1.4.4", "marked": "^0.3.6", "mocha": "^4.0.1", "next": "^4.1.4", diff --git a/yarn.lock b/yarn.lock index 53eb092864e8c9..743dbe5b012861 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5575,6 +5575,10 @@ lsmod@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/lsmod/-/lsmod-1.0.0.tgz#9a00f76dca36eb23fa05350afe1b585d4299e64b" +lz-string@^1.4.4: + version "1.4.4" + resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" + macaddress@^0.2.8: version "0.2.8" resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"