From 2609b5bd489c7c8c21bb13f567ad033186387f3b Mon Sep 17 00:00:00 2001 From: Eugene Annienkov Date: Tue, 6 Mar 2018 17:20:27 +0200 Subject: [PATCH 01/36] Add name option to withStyles() decorator --- lib/src/DatePicker/Day.jsx | 2 +- lib/src/DatePicker/Year.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/DatePicker/Day.jsx b/lib/src/DatePicker/Day.jsx index c037c7416..313a535c2 100644 --- a/lib/src/DatePicker/Day.jsx +++ b/lib/src/DatePicker/Day.jsx @@ -73,4 +73,4 @@ const styles = theme => ({ }, }); -export default withStyles(styles)(Day); +export default withStyles(styles, { name: 'MuiPickersDay' })(Day); diff --git a/lib/src/DatePicker/Year.jsx b/lib/src/DatePicker/Year.jsx index a74246bec..15679405e 100644 --- a/lib/src/DatePicker/Year.jsx +++ b/lib/src/DatePicker/Year.jsx @@ -72,4 +72,4 @@ const styles = theme => ({ }, }); -export default withStyles(styles)(Year); +export default withStyles(styles, { name: 'MuiPickersYear' })(Year); From 006a635d30872638fb5f0ea0448233c9d580e595 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Tue, 6 Mar 2018 23:40:19 +0200 Subject: [PATCH 02/36] Change docs, add separate pages for date & time pickers --- docs/config/webpack.config.dev.js | 2 +- docs/package-lock.json | 49 +++++ docs/package.json | 2 + docs/src/App.js | 30 +-- docs/src/{Demo => }/Examples/BasicUsage.jsx | 0 .../{Demo => }/Examples/CustomElements.jsx | 0 .../{Demo => }/Examples/DateTimePickers.jsx | 0 docs/src/Examples/Demo/BasicDatePicker.jsx | 41 ++++ docs/src/Examples/Demo/KeyboardDatePicker.jsx | 44 +++++ docs/src/Examples/Demo/KeyboardTimePicker.jsx | 29 +++ docs/src/Examples/Demo/TimePickerBasic.jsx | 38 ++++ .../{Demo => }/Examples/PersianPickers.jsx | 0 docs/src/Routes/Demos/DatePickerDemo.jsx | 26 +++ docs/src/Routes/Demos/TimePickerDemo.jsx | 31 +++ docs/src/Routes/Demos/index.jsx | 12 ++ .../Demo.css => Routes/Landing/Landing.css} | 0 .../Demo.jsx => Routes/Landing/Landing.jsx} | 56 +----- docs/src/Routes/Routes.jsx | 12 ++ .../src/{Demo/components => _shared}/Code.jsx | 4 +- .../components => _shared}/GithubIcon.jsx | 0 .../MarkdownElement.jsx | 0 .../components => _shared}/SourcablePanel.jsx | 61 +++--- docs/src/index.css | 9 + docs/src/index.js | 28 +-- docs/src/layout/DrawerMenu.jsx | 30 +++ docs/src/layout/Layout.jsx | 179 ++++++++++++++++++ docs/src/layout/NavigationMenu.jsx | 39 ++++ 27 files changed, 607 insertions(+), 115 deletions(-) rename docs/src/{Demo => }/Examples/BasicUsage.jsx (100%) rename docs/src/{Demo => }/Examples/CustomElements.jsx (100%) rename docs/src/{Demo => }/Examples/DateTimePickers.jsx (100%) create mode 100644 docs/src/Examples/Demo/BasicDatePicker.jsx create mode 100644 docs/src/Examples/Demo/KeyboardDatePicker.jsx create mode 100644 docs/src/Examples/Demo/KeyboardTimePicker.jsx create mode 100644 docs/src/Examples/Demo/TimePickerBasic.jsx rename docs/src/{Demo => }/Examples/PersianPickers.jsx (100%) create mode 100644 docs/src/Routes/Demos/DatePickerDemo.jsx create mode 100644 docs/src/Routes/Demos/TimePickerDemo.jsx create mode 100644 docs/src/Routes/Demos/index.jsx rename docs/src/{Demo/Demo.css => Routes/Landing/Landing.css} (100%) rename docs/src/{Demo/Demo.jsx => Routes/Landing/Landing.jsx} (67%) create mode 100644 docs/src/Routes/Routes.jsx rename docs/src/{Demo/components => _shared}/Code.jsx (98%) rename docs/src/{Demo/components => _shared}/GithubIcon.jsx (100%) rename docs/src/{Demo/components => _shared}/MarkdownElement.jsx (100%) rename docs/src/{Demo/components => _shared}/SourcablePanel.jsx (61%) create mode 100644 docs/src/layout/DrawerMenu.jsx create mode 100644 docs/src/layout/Layout.jsx create mode 100644 docs/src/layout/NavigationMenu.jsx diff --git a/docs/config/webpack.config.dev.js b/docs/config/webpack.config.dev.js index e263d35c6..8e734701c 100644 --- a/docs/config/webpack.config.dev.js +++ b/docs/config/webpack.config.dev.js @@ -71,7 +71,7 @@ module.exports = { // We placed these paths second because we want `node_modules` to "win" // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 - modules: ['node_modules', paths.appNodeModules].concat( + modules: ['node_modules', paths.appNodeModules, paths.appSrc].concat( // It is guaranteed to exist because we tweak it in `env.js` process.env.NODE_PATH.split(path.delimiter).filter(Boolean) ), diff --git a/docs/package-lock.json b/docs/package-lock.json index 3a9d00153..ea2e3a7e5 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -4731,6 +4731,18 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=" }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "2.2.2", + "loose-envify": "1.3.1", + "resolve-pathname": "2.2.0", + "value-equal": "0.4.0", + "warning": "3.0.0" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -9577,6 +9589,33 @@ "prop-types": "15.6.0" } }, + "react-router": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz", + "integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==", + "requires": { + "history": "4.7.2", + "hoist-non-react-statics": "2.3.1", + "invariant": "2.2.2", + "loose-envify": "1.3.1", + "path-to-regexp": "1.7.0", + "prop-types": "15.6.0", + "warning": "3.0.0" + } + }, + "react-router-dom": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz", + "integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==", + "requires": { + "history": "4.7.2", + "invariant": "2.2.2", + "loose-envify": "1.3.1", + "prop-types": "15.6.0", + "react-router": "4.2.0", + "warning": "3.0.0" + } + }, "react-scrollbar-size": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.1.0.tgz", @@ -9959,6 +9998,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=" }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "restore-cursor": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", @@ -11077,6 +11121,11 @@ "spdx-expression-parse": "1.0.4" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/docs/package.json b/docs/package.json index c8b96851e..0cf2d06f4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -47,6 +47,8 @@ "react-dom": "^16.2.0", "react-jss": "^8.3.1", "react-markdown": "^2.5.1", + "react-router": "^4.2.0", + "react-router-dom": "^4.2.2", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", diff --git a/docs/src/App.js b/docs/src/App.js index 008ca5a56..165ab7c58 100644 --- a/docs/src/App.js +++ b/docs/src/App.js @@ -11,8 +11,10 @@ import rtl from 'jss-rtl'; import JssProvider from 'react-jss/lib/JssProvider'; import createGenerateClassName from 'material-ui/styles/createGenerateClassName'; -import Demo from './Demo/Demo'; +// import Demo from './Demo/Demo'; import { setPrismTheme } from './utils/prism'; +import Layout from './layout/Layout'; +import Routes from './Routes/Routes'; const jss = create({ plugins: [...preset().plugins, rtl()] }); jss.options.createGenerateClassName = createGenerateClassName; @@ -55,19 +57,19 @@ export default class App extends Component { render() { return ( -
- - - - - - - -
+ + + + + + + + + ); } } diff --git a/docs/src/Demo/Examples/BasicUsage.jsx b/docs/src/Examples/BasicUsage.jsx similarity index 100% rename from docs/src/Demo/Examples/BasicUsage.jsx rename to docs/src/Examples/BasicUsage.jsx diff --git a/docs/src/Demo/Examples/CustomElements.jsx b/docs/src/Examples/CustomElements.jsx similarity index 100% rename from docs/src/Demo/Examples/CustomElements.jsx rename to docs/src/Examples/CustomElements.jsx diff --git a/docs/src/Demo/Examples/DateTimePickers.jsx b/docs/src/Examples/DateTimePickers.jsx similarity index 100% rename from docs/src/Demo/Examples/DateTimePickers.jsx rename to docs/src/Examples/DateTimePickers.jsx diff --git a/docs/src/Examples/Demo/BasicDatePicker.jsx b/docs/src/Examples/Demo/BasicDatePicker.jsx new file mode 100644 index 000000000..ed772fca4 --- /dev/null +++ b/docs/src/Examples/Demo/BasicDatePicker.jsx @@ -0,0 +1,41 @@ +import React, { Fragment, PureComponent } from 'react'; +import { DatePicker } from 'material-ui-pickers'; + +export default class BasicUsage extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ +
+ +
+ +
+ + ); + } +} diff --git a/docs/src/Examples/Demo/KeyboardDatePicker.jsx b/docs/src/Examples/Demo/KeyboardDatePicker.jsx new file mode 100644 index 000000000..12b5ab320 --- /dev/null +++ b/docs/src/Examples/Demo/KeyboardDatePicker.jsx @@ -0,0 +1,44 @@ +import React, { Fragment, Component } from 'react'; +import { DatePicker } from 'material-ui-pickers'; + +export default class BasicUsage extends Component { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ +
+ +
+ +
+ + ); + } +} diff --git a/docs/src/Examples/Demo/KeyboardTimePicker.jsx b/docs/src/Examples/Demo/KeyboardTimePicker.jsx new file mode 100644 index 000000000..e062917a5 --- /dev/null +++ b/docs/src/Examples/Demo/KeyboardTimePicker.jsx @@ -0,0 +1,29 @@ +import React, { PureComponent } from 'react'; +import { TimePicker } from 'material-ui-pickers'; + +export default class BasicUsage extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( +
+ +
+ ); + } +} diff --git a/docs/src/Examples/Demo/TimePickerBasic.jsx b/docs/src/Examples/Demo/TimePickerBasic.jsx new file mode 100644 index 000000000..8935c2865 --- /dev/null +++ b/docs/src/Examples/Demo/TimePickerBasic.jsx @@ -0,0 +1,38 @@ +import React, { Fragment, PureComponent } from 'react'; +import { TimePicker } from 'material-ui-pickers'; + +export default class BasicUsage extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ +
+ +
+ +
+ + ); + } +} diff --git a/docs/src/Demo/Examples/PersianPickers.jsx b/docs/src/Examples/PersianPickers.jsx similarity index 100% rename from docs/src/Demo/Examples/PersianPickers.jsx rename to docs/src/Examples/PersianPickers.jsx diff --git a/docs/src/Routes/Demos/DatePickerDemo.jsx b/docs/src/Routes/Demos/DatePickerDemo.jsx new file mode 100644 index 000000000..dca1bb318 --- /dev/null +++ b/docs/src/Routes/Demos/DatePickerDemo.jsx @@ -0,0 +1,26 @@ +import React from 'react' +import SourcablePanel from '_shared/SourcablePanel' +import { Typography } from 'material-ui'; + +const DatePickerDemoDemo = () => ( +
+ + Date picker + + + The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight. + + + + + +
+) + +export default DatePickerDemoDemo \ No newline at end of file diff --git a/docs/src/Routes/Demos/TimePickerDemo.jsx b/docs/src/Routes/Demos/TimePickerDemo.jsx new file mode 100644 index 000000000..e303364ae --- /dev/null +++ b/docs/src/Routes/Demos/TimePickerDemo.jsx @@ -0,0 +1,31 @@ +import React from 'react' +import SourcablePanel from '_shared/SourcablePanel' +import { Typography } from 'material-ui'; + +const DatePickerDemoDemo = () => ( +
+ + Time picker + + + The selected time is indicated by the filled circle at the end of the clock hand. + + + + A time picker should adjusts to a user’s preferred time setting, i.e. the 12-hour or 24-hour format. + + } + /> + + +
+) + +export default DatePickerDemoDemo \ No newline at end of file diff --git a/docs/src/Routes/Demos/index.jsx b/docs/src/Routes/Demos/index.jsx new file mode 100644 index 000000000..80e57f243 --- /dev/null +++ b/docs/src/Routes/Demos/index.jsx @@ -0,0 +1,12 @@ +import React from 'react' +import { Switch, Route } from 'react-router' + +import DatePickerDemo from './DatePickerDemo' +import TimePickerDemo from './TimePickerDemo' + +export default () => ( + + + + +) \ No newline at end of file diff --git a/docs/src/Demo/Demo.css b/docs/src/Routes/Landing/Landing.css similarity index 100% rename from docs/src/Demo/Demo.css rename to docs/src/Routes/Landing/Landing.css diff --git a/docs/src/Demo/Demo.jsx b/docs/src/Routes/Landing/Landing.jsx similarity index 67% rename from docs/src/Demo/Demo.jsx rename to docs/src/Routes/Landing/Landing.jsx index 5c30e5d4c..6a73de13f 100644 --- a/docs/src/Demo/Demo.jsx +++ b/docs/src/Routes/Landing/Landing.jsx @@ -2,13 +2,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { AppBar, Toolbar, IconButton, Icon, Typography, withStyles, Button, Tooltip } from 'material-ui'; -import Github from './components/GithubIcon'; -import SourcablePanel from './components/SourcablePanel'; -import BasicUsage from './Examples/BasicUsage'; -import CustomElements from './Examples/CustomElements'; -import DateTimePickers from './Examples/DateTimePickers'; +import Github from '_shared/GithubIcon'; +import SourcablePanel from '_shared/SourcablePanel'; +import BasicUsage from 'Examples/BasicUsage'; +import CustomElements from 'Examples/CustomElements'; +import DateTimePickers from 'Examples/DateTimePickers'; // import PersianPickers from './Examples/PersianPickers'; -import './Demo.css'; class Demo extends Component { static propTypes = { @@ -27,49 +26,10 @@ class Demo extends Component { } render() { - const { - classes, toggleThemeType, toggleDirection, toggleFrench, - } = this.props; + const { classes } = this.props; return ( -
- - - - menu - - -
- - - - language - - - - - - lightbulb_outline - - - - - - format_textdirection_l_to_r - - - - - - - - - - +
Material-UI logo @@ -125,7 +85,7 @@ class Demo extends Component { */}
-
+ ); } } diff --git a/docs/src/Routes/Routes.jsx b/docs/src/Routes/Routes.jsx new file mode 100644 index 000000000..04f14bf72 --- /dev/null +++ b/docs/src/Routes/Routes.jsx @@ -0,0 +1,12 @@ +import React from 'react' +import { Switch, Route } from 'react-router' + +import Landing from './Landing/Landing' +import Demos from './Demos' + +export default () => ( + + + + +) \ No newline at end of file diff --git a/docs/src/Demo/components/Code.jsx b/docs/src/_shared/Code.jsx similarity index 98% rename from docs/src/Demo/components/Code.jsx rename to docs/src/_shared/Code.jsx index c665c4e26..7e1d4bf8a 100644 --- a/docs/src/Demo/components/Code.jsx +++ b/docs/src/_shared/Code.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { withStyles } from 'material-ui/styles'; -import prism from '../../utils/prism'; +import prism from 'utils/prism'; const anchorLinkStyle = (theme, size) => ({ '& .anchor-link-style': { @@ -157,7 +157,7 @@ const styles = theme => ({ const Code = (props) => { const { classes, className, text } = props; - const hightlightedCode = prism.highlight(text, prism.languages.jsx); + const hightlightedCode = prism.highlight(text, prism.languages.js); return (
diff --git a/docs/src/Demo/components/GithubIcon.jsx b/docs/src/_shared/GithubIcon.jsx similarity index 100% rename from docs/src/Demo/components/GithubIcon.jsx rename to docs/src/_shared/GithubIcon.jsx diff --git a/docs/src/Demo/components/MarkdownElement.jsx b/docs/src/_shared/MarkdownElement.jsx similarity index 100% rename from docs/src/Demo/components/MarkdownElement.jsx rename to docs/src/_shared/MarkdownElement.jsx diff --git a/docs/src/Demo/components/SourcablePanel.jsx b/docs/src/_shared/SourcablePanel.jsx similarity index 61% rename from docs/src/Demo/components/SourcablePanel.jsx rename to docs/src/_shared/SourcablePanel.jsx index aa334fe46..12736fe71 100644 --- a/docs/src/Demo/components/SourcablePanel.jsx +++ b/docs/src/_shared/SourcablePanel.jsx @@ -3,11 +3,10 @@ import PropTypes from 'prop-types'; import Collapse from 'material-ui/transitions/Collapse'; import { Typography, IconButton, Icon, withStyles } from 'material-ui'; -import Code from '../components/Code'; +import Code from './Code'; class SourcablePanel extends PureComponent { static propTypes = { - children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.object]).isRequired, classes: PropTypes.object.isRequired, title: PropTypes.string.isRequired, description: PropTypes.node, @@ -24,10 +23,11 @@ class SourcablePanel extends PureComponent { } getSource = () => { - const webpackRawLoader = require.context('!raw-loader!../Examples', false, /\.jsx$/); - const file = webpackRawLoader(`./${this.props.sourceFile}`); + return require(`!raw-loader!../Examples/${this.props.sourceFile}`) + } - return file; + getComponent = () => { + return require(`../Examples/${this.props.sourceFile}`).default } toggleSource = () => { @@ -37,32 +37,31 @@ class SourcablePanel extends PureComponent { render() { const { sourceExpanded } = this.state; const { classes, title, description } = this.props; - - return [ - - { title } - , - - description, - - - - , - -
- - code - - { this.props.children } -
, - ]; + const Component = this.getComponent() + + return ( + + + { title } + + + {description} + + + + + +
+ + code + + +
+ + ) } } diff --git a/docs/src/index.css b/docs/src/index.css index 592ab3d25..d9e454a73 100644 --- a/docs/src/index.css +++ b/docs/src/index.css @@ -9,3 +9,12 @@ body { *::after { box-sizing: border-box; } + +.picker { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin-bottom: 40px; + margin: 10px 40px 40px; +} \ No newline at end of file diff --git a/docs/src/index.js b/docs/src/index.js index e1ee83430..9ff58f7ce 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -1,31 +1,21 @@ -/* eslint-disable no-use-before-define */ import React from 'react'; import ReactDOM from 'react-dom'; -import moment from 'moment'; -import 'moment/locale/fr'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; +import createBrowserHistory from 'history/createBrowserHistory' +import { Router } from 'react-router' -let currentLocale = 'en'; -moment.locale(currentLocale); - -const toggleFrench = () => { - const newLocale = currentLocale === 'en' - ? 'fr' - : 'en'; - - currentLocale = newLocale; - moment.locale(newLocale); - - // little hack here to update inner components, using moment) - ReactDOM.unmountComponentAtNode(document.getElementById('root')); - doRender(); -}; +const history = createBrowserHistory() const doRender = () => { - ReactDOM.render(, document.getElementById('root')); + ReactDOM.render( + + + , + document.getElementById('root') + ); }; doRender(); diff --git a/docs/src/layout/DrawerMenu.jsx b/docs/src/layout/DrawerMenu.jsx new file mode 100644 index 000000000..258c1f623 --- /dev/null +++ b/docs/src/layout/DrawerMenu.jsx @@ -0,0 +1,30 @@ +import React from 'react' +import { version } from '../../../lib/package.json' +import { Divider, Toolbar, Typography, withStyles } from 'material-ui'; +import NavigationMenu from './NavigationMenu'; + +const DrawerMenu = ({ classes }) => ( +
+ + Material-UI pickers + v{version} + + + + +
+) + +const styles = theme => ({ + drawerRoot: { + width: 250 + }, + drawerToolbar: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'flex-start' + } +}) + +export default withStyles(styles)(DrawerMenu) \ No newline at end of file diff --git a/docs/src/layout/Layout.jsx b/docs/src/layout/Layout.jsx new file mode 100644 index 000000000..d52101fcc --- /dev/null +++ b/docs/src/layout/Layout.jsx @@ -0,0 +1,179 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Hidden from 'material-ui/Hidden'; +import Drawer from 'material-ui/Drawer'; +import{ AppBar, Toolbar, IconButton, Icon, withStyles, Tooltip } from 'material-ui'; + +import Github from '_shared/GithubIcon'; +import DrawerMenu from './DrawerMenu'; + +class Layout extends Component { + static propTypes = { + classes: PropTypes.object.isRequired, + toggleThemeType: PropTypes.func.isRequired, + toggleDirection: PropTypes.func.isRequired, + toggleFrench: PropTypes.func.isRequired, + theme: PropTypes.object.isRequired, + } + + state = { + drawerOpen: false, + }; + + handleDrawerToggle = () => { + this.setState({ drawerOpen: !this.state.drawerOpen }); + }; + + scrollToContent = () => { + const contentEl = document.getElementById('content'); + contentEl.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }); + } + + render() { + const { + classes, toggleThemeType, toggleDirection, toggleFrench, theme, + } = this.props; + + return ( + + + + + menu + + +
+ + + + language + + + + + + lightbulb_outline + + + + + + format_textdirection_l_to_r + + + + + + + + + + + + + + + + + + + + + +
+ {this.props.children} +
+ + ); + } +} + +const styles = theme => ({ + flex: { + flex: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + appBar: { + boxShadow: 'unset', + [theme.breakpoints.up('md')]: { + left: 250, + width: 'calc(100% - 250px)' + }, + }, + appToolbar: { + backgroundColor: theme.palette.primary.main, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + color: theme.palette.common.white, + padding: '40px 20px', + [theme.breakpoints.down('md')]: { + paddingTop: '100px', + minHeight: 'calc(100vh - 55px)', + }, + }, + getStarted: { + marginTop: '10px', + }, + main: { + marginTop: 55, + padding: '20px', + height: 'calc(100vh - 55px)', + backgroundColor: theme.palette.background.default, + [theme.breakpoints.up('md')]: { + marginTop: 64, + height: 'calc(100vh - 64px)', + marginLeft: 250 + }, + }, + content: { + paddingTop: '80px', + backgroundColor: theme.palette.background.default, + minHeight: 'calc(100vh - 63px)', + maxWidth: 900, + margin: '0 auto', + display: 'flex', + flexDirection: 'column', + '@media(max-width: 600px)': { + minHeight: 'calc(100vh - 55px)', + }, + }, + changeOutside: { + maxWidth: 200, + margin: '0 auto', + }, +}); + +export default withStyles(styles, { withTheme: true })(Layout); diff --git a/docs/src/layout/NavigationMenu.jsx b/docs/src/layout/NavigationMenu.jsx new file mode 100644 index 000000000..cba79a9ea --- /dev/null +++ b/docs/src/layout/NavigationMenu.jsx @@ -0,0 +1,39 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { List, ListItem, withStyles } from 'material-ui' +import { withRouter, Link } from 'react-router-dom' + +const NavigationMenu = ({ classes }) => ( + + + Date Picker + + + + Time Picker + + + + Date & Time Picker + + +) + +NavigationMenu.propTypes = { + classes: PropTypes.object.isRequired, +} + +const styles = theme => ({ + navLink: { + color: theme.palette.text.primary, + textDecoration: 'none', + ...theme.typography.subheading, + + '&>*': { + paddingTop: 8, + paddingBottom: 8, + } + } +}) + +export default withStyles(styles)(withRouter(NavigationMenu)) \ No newline at end of file From 744565611dcc2441fdadc8b42db7c88cd8ac733a Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Wed, 7 Mar 2018 10:40:25 +0200 Subject: [PATCH 03/36] Fix excluding current day in disableFuture mode --- docs/src/layout/Layout.jsx | 2 +- lib/src/utils/date-fns-utils.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/layout/Layout.jsx b/docs/src/layout/Layout.jsx index d52101fcc..7fb332601 100644 --- a/docs/src/layout/Layout.jsx +++ b/docs/src/layout/Layout.jsx @@ -126,7 +126,7 @@ const styles = theme => ({ marginRight: 20, }, appBar: { - boxShadow: 'unset', + // boxShadow: 'unset', [theme.breakpoints.up('md')]: { left: 250, width: 'calc(100% - 250px)' diff --git a/lib/src/utils/date-fns-utils.js b/lib/src/utils/date-fns-utils.js index c5fc2e0b1..808e0d2dd 100644 --- a/lib/src/utils/date-fns-utils.js +++ b/lib/src/utils/date-fns-utils.js @@ -49,7 +49,7 @@ export default class DateFnsUtils { static isBefore = isBefore static isAfterDay(date, value) { - return isAfter(endOfDay(date), value); + return isAfter(date, endOfDay(value)); } static isBeforeDay(date, value) { @@ -61,7 +61,7 @@ export default class DateFnsUtils { } static isAfterYear(date, value) { - return isAfter(endOfYear(date), value); + return isAfter(date, endOfYear(value)); } static startOfDay = startOfDay From 873f25b07366ce254ab423204f0d4bf65ba7a91b Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Wed, 7 Mar 2018 11:13:32 +0200 Subject: [PATCH 04/36] Fix not applying value if changed outside --- docs/src/Examples/Demo/KeyboardDatePicker.jsx | 4 ++-- docs/src/Routes/Demos/DatePickerDemo.jsx | 10 ++++++++++ lib/src/_shared/PickerBase.jsx | 10 ++++++++-- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/docs/src/Examples/Demo/KeyboardDatePicker.jsx b/docs/src/Examples/Demo/KeyboardDatePicker.jsx index 12b5ab320..eccfeac25 100644 --- a/docs/src/Examples/Demo/KeyboardDatePicker.jsx +++ b/docs/src/Examples/Demo/KeyboardDatePicker.jsx @@ -1,7 +1,7 @@ -import React, { Fragment, Component } from 'react'; +import React, { Fragment, PureComponent } from 'react'; import { DatePicker } from 'material-ui-pickers'; -export default class BasicUsage extends Component { +export default class BasicUsage extends PureComponent { state = { selectedDate: new Date(), } diff --git a/docs/src/Routes/Demos/DatePickerDemo.jsx b/docs/src/Routes/Demos/DatePickerDemo.jsx index dca1bb318..26fc59db7 100644 --- a/docs/src/Routes/Demos/DatePickerDemo.jsx +++ b/docs/src/Routes/Demos/DatePickerDemo.jsx @@ -20,6 +20,16 @@ const DatePickerDemoDemo = () => ( title="Keyboard input" sourceFile="Demo/KeyboardDatePicker.jsx" /> + + + Customization performing by overriding render method for Day component + + } + />
) diff --git a/lib/src/_shared/PickerBase.jsx b/lib/src/_shared/PickerBase.jsx index 2bd3f71cf..0b3cdc557 100644 --- a/lib/src/_shared/PickerBase.jsx +++ b/lib/src/_shared/PickerBase.jsx @@ -15,8 +15,8 @@ export default class PickerBase extends PureComponent { utils: PropTypes.func.isRequired, } - getValidDateOrCurrent = () => { - const { utils, value } = this.props; + getValidDateOrCurrent = (props = this.props) => { + const { utils, value } = props; const date = utils.date(value); return utils.isValid(date) && value !== null ? date : utils.date(); @@ -26,6 +26,12 @@ export default class PickerBase extends PureComponent { date: this.getValidDateOrCurrent(), } + componentWillReceiveProps(nextProps) { + if (!this.props.utils.isEqual(this.state.date, nextProps.value)) { + this.setState({ date: this.getValidDateOrCurrent(nextProps) }); + } + } + getFormat = () => { if (this.props.format || this.props.labelFunc) { return this.props.format; From 99dc6f9cd29c0e71513b513d80355117ab0f77b6 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Wed, 7 Mar 2018 11:13:50 +0200 Subject: [PATCH 05/36] Add custom elements example --- .../Demo/CustomElementsDatePicker.jsx | 136 ++++++++++++++++++ lib/src/_shared/PickerBase.jsx | 2 +- 2 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 docs/src/Examples/Demo/CustomElementsDatePicker.jsx diff --git a/docs/src/Examples/Demo/CustomElementsDatePicker.jsx b/docs/src/Examples/Demo/CustomElementsDatePicker.jsx new file mode 100644 index 000000000..f019a030b --- /dev/null +++ b/docs/src/Examples/Demo/CustomElementsDatePicker.jsx @@ -0,0 +1,136 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import moment from 'moment'; + +import { DatePicker } from 'material-ui-pickers'; +import { IconButton, withStyles } from 'material-ui'; + +import isValid from 'date-fns/isValid'; +import format from 'date-fns/format'; +import isSameDay from 'date-fns/isSameDay'; +import startOfWeek from 'date-fns/startOfWeek'; +import endOfWeek from 'date-fns/endOfWeek'; +import isWithinInterval from 'date-fns/isWithinInterval'; + +class CustomElements extends PureComponent { + static propTypes = { + classes: PropTypes.object.isRequired, + } + + state = { + selectedDate: new Date(), + } + + handleWeekChange = (date) => { + this.setState({ selectedDate: date.clone().startOf('week') }); + } + + formatWeekSelectLabel = (date, invalidLabel) => { + if (date === null) { + return ''; + } + + if (date instanceof moment) { + date = date.toDate(); + } + + return date && isValid(date) + ? `Week of ${format(startOfWeek(date), 'MMM Do')}` + : invalidLabel; + } + + renderWrappedWeekDay = (date, selectedDate, dayInCurrentMonth) => { + const { classes } = this.props; + + if (date instanceof moment) { + date = date.toDate(); + } + + const start = startOfWeek(selectedDate); + const end = endOfWeek(selectedDate); + + const dayIsBetween = isWithinInterval(date, { start, end }); + const isFirstDay = isSameDay(date, start); + const isLastDay = isSameDay(date, end); + + const wrapperClassName = classNames({ + [classes.highlight]: dayIsBetween, + [classes.firstHighlight]: isFirstDay, + [classes.endHighlight]: isLastDay, + }); + + const dayClassName = classNames(classes.day, { + [classes.nonCurrentMonthDay]: !dayInCurrentMonth, + [classes.highlightNonCurrentMonthDay]: !dayInCurrentMonth && dayIsBetween, + }); + + return ( +
+ + { format(date, 'D')} + +
+ ); + } + + render() { + const { selectedDate } = this.state; + + return ( +
+ +
+ ); + } +} + +const styles = theme => ({ + dayWrapper: { + position: 'relative', + }, + day: { + width: 36, + height: 36, + fontSize: theme.typography.caption.fontSize, + margin: '0 2px', + color: 'inherit', + }, + customDayHighlight: { + position: 'absolute', + top: 0, + bottom: 0, + left: '2px', + right: '2px', + border: `1px solid ${theme.palette.secondary.main}`, + borderRadius: '50%', + }, + nonCurrentMonthDay: { + color: theme.palette.text.disabled, + }, + highlightNonCurrentMonthDay: { + color: '#676767', + }, + highlight: { + background: theme.palette.primary.main, + color: theme.palette.common.white, + }, + firstHighlight: { + extend: 'highlight', + borderTopLeftRadius: '50%', + borderBottomLeftRadius: '50%', + }, + endHighlight: { + extend: 'highlight', + borderTopRightRadius: '50%', + borderBottomRightRadius: '50%', + }, +}); + +export default withStyles(styles)(CustomElements); diff --git a/lib/src/_shared/PickerBase.jsx b/lib/src/_shared/PickerBase.jsx index 0b3cdc557..3ccd6d92c 100644 --- a/lib/src/_shared/PickerBase.jsx +++ b/lib/src/_shared/PickerBase.jsx @@ -28,7 +28,7 @@ export default class PickerBase extends PureComponent { componentWillReceiveProps(nextProps) { if (!this.props.utils.isEqual(this.state.date, nextProps.value)) { - this.setState({ date: this.getValidDateOrCurrent(nextProps) }); + this.setState({ date: this.getValidDateOrCurrentg(nextProps) }); } } From 6050265ac6797a765db302d9e77483e8fe7fd71b Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Wed, 7 Mar 2018 16:26:22 +0200 Subject: [PATCH 06/36] Add datetime picker demos --- .vscode/settings.json | 5 ++ .../src/Examples/Demo/BasicDateTimePicker.jsx | 41 +++++++++++++ .../Examples/Demo/CustomDateTimePicker.jsx | 57 +++++++++++++++++++ .../Demo/CustomElementsDatePicker.jsx | 4 +- docs/src/Routes/Demos/DatePickerDemo.jsx | 3 + docs/src/Routes/Demos/DateTimePickerDemo.jsx | 33 +++++++++++ docs/src/Routes/Demos/TimePickerDemo.jsx | 3 + docs/src/Routes/Demos/index.jsx | 2 + docs/src/layout/Layout.jsx | 47 ++++----------- lib/src/_shared/PickerBase.jsx | 2 +- 10 files changed, 159 insertions(+), 38 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 docs/src/Examples/Demo/BasicDateTimePicker.jsx create mode 100644 docs/src/Examples/Demo/CustomDateTimePicker.jsx create mode 100644 docs/src/Routes/Demos/DateTimePickerDemo.jsx diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..e886676d5 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "Sourcable" + ] +} \ No newline at end of file diff --git a/docs/src/Examples/Demo/BasicDateTimePicker.jsx b/docs/src/Examples/Demo/BasicDateTimePicker.jsx new file mode 100644 index 000000000..c269445a8 --- /dev/null +++ b/docs/src/Examples/Demo/BasicDateTimePicker.jsx @@ -0,0 +1,41 @@ +import React, { Fragment, Component } from 'react'; +import { DateTimePicker } from 'material-ui-pickers'; +import { IconButton, Typography, Icon, InputAdornment } from 'material-ui'; + +export default class BasicDateTimePicker extends Component { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ +
+ +
+ +
+ + ); + } +} diff --git a/docs/src/Examples/Demo/CustomDateTimePicker.jsx b/docs/src/Examples/Demo/CustomDateTimePicker.jsx new file mode 100644 index 000000000..5995090ec --- /dev/null +++ b/docs/src/Examples/Demo/CustomDateTimePicker.jsx @@ -0,0 +1,57 @@ +import React, { PureComponent, Fragment } from 'react'; +import { DateTimePicker } from 'material-ui-pickers'; +import { IconButton, Icon, InputAdornment } from 'material-ui'; + +export default class CustomDateTimePicker extends PureComponent { + state = { + selectedDate: new Date(), + } + + handleDateChange = (date) => { + this.setState({ selectedDate: date }); + } + + render() { + const { selectedDate } = this.state; + + return ( + +
+ add_alarm } + rightArrowIcon={ snooze } + InputProps={{ + endAdornment: ( + + + add_alarm + + + ), + }} + /> +
+ +
+ +
+ + + ); + } +} diff --git a/docs/src/Examples/Demo/CustomElementsDatePicker.jsx b/docs/src/Examples/Demo/CustomElementsDatePicker.jsx index f019a030b..aa283e29f 100644 --- a/docs/src/Examples/Demo/CustomElementsDatePicker.jsx +++ b/docs/src/Examples/Demo/CustomElementsDatePicker.jsx @@ -23,7 +23,7 @@ class CustomElements extends PureComponent { } handleWeekChange = (date) => { - this.setState({ selectedDate: date.clone().startOf('week') }); + this.setState({ selectedDate: startOfWeek(date) }); } formatWeekSelectLabel = (date, invalidLabel) => { @@ -82,7 +82,7 @@ class CustomElements extends PureComponent { diff --git a/docs/src/Routes/Demos/DatePickerDemo.jsx b/docs/src/Routes/Demos/DatePickerDemo.jsx index 26fc59db7..c4d229ae0 100644 --- a/docs/src/Routes/Demos/DatePickerDemo.jsx +++ b/docs/src/Routes/Demos/DatePickerDemo.jsx @@ -7,6 +7,9 @@ const DatePickerDemoDemo = () => ( Date picker + + Date pickers use a dialog window to select a single date. + The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight. diff --git a/docs/src/Routes/Demos/DateTimePickerDemo.jsx b/docs/src/Routes/Demos/DateTimePickerDemo.jsx new file mode 100644 index 000000000..cc364b7eb --- /dev/null +++ b/docs/src/Routes/Demos/DateTimePickerDemo.jsx @@ -0,0 +1,33 @@ +import React from 'react' +import SourcablePanel from '_shared/SourcablePanel' +import { Typography } from 'material-ui'; + +const DateTimePickerDemo = () => ( +
+ + Date & time picker + + + This component is not from material design guidelines. + + + Its a combination of date & time picker and allows that uses the modal to select both date and time with one control. + + + + + Applied mostly all customization, that available for date & time pickers + + } + /> +
+) + +export default DateTimePickerDemo \ No newline at end of file diff --git a/docs/src/Routes/Demos/TimePickerDemo.jsx b/docs/src/Routes/Demos/TimePickerDemo.jsx index e303364ae..299afddfd 100644 --- a/docs/src/Routes/Demos/TimePickerDemo.jsx +++ b/docs/src/Routes/Demos/TimePickerDemo.jsx @@ -7,6 +7,9 @@ const DatePickerDemoDemo = () => ( Time picker + + Time pickers use a dialog to select a single time (in the hours:minutes format). + The selected time is indicated by the filled circle at the end of the clock hand. diff --git a/docs/src/Routes/Demos/index.jsx b/docs/src/Routes/Demos/index.jsx index 80e57f243..8e6e02460 100644 --- a/docs/src/Routes/Demos/index.jsx +++ b/docs/src/Routes/Demos/index.jsx @@ -3,10 +3,12 @@ import { Switch, Route } from 'react-router' import DatePickerDemo from './DatePickerDemo' import TimePickerDemo from './TimePickerDemo' +import DateTimePickerDemo from './DateTimePickerDemo'; export default () => ( + ) \ No newline at end of file diff --git a/docs/src/layout/Layout.jsx b/docs/src/layout/Layout.jsx index 7fb332601..df806e458 100644 --- a/docs/src/layout/Layout.jsx +++ b/docs/src/layout/Layout.jsx @@ -110,7 +110,9 @@ class Layout extends Component {
- {this.props.children} +
+ {this.props.children} +
); @@ -132,48 +134,23 @@ const styles = theme => ({ width: 'calc(100% - 250px)' }, }, - appToolbar: { - backgroundColor: theme.palette.primary.main, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - color: theme.palette.common.white, - padding: '40px 20px', - [theme.breakpoints.down('md')]: { - paddingTop: '100px', - minHeight: 'calc(100vh - 55px)', - }, - }, - getStarted: { - marginTop: '10px', - }, main: { marginTop: 55, padding: '20px', - height: 'calc(100vh - 55px)', + minHeight: 'calc(100vh - 55px)', backgroundColor: theme.palette.background.default, [theme.breakpoints.up('md')]: { marginTop: 64, - height: 'calc(100vh - 64px)', - marginLeft: 250 - }, + minHeight: 'calc(100vh - 64px)', + marginLeft: 250, + } }, content: { - paddingTop: '80px', - backgroundColor: theme.palette.background.default, - minHeight: 'calc(100vh - 63px)', - maxWidth: 900, - margin: '0 auto', - display: 'flex', - flexDirection: 'column', - '@media(max-width: 600px)': { - minHeight: 'calc(100vh - 55px)', - }, - }, - changeOutside: { - maxWidth: 200, - margin: '0 auto', - }, + [theme.breakpoints.up('lg')]: { + maxWidth: 960, + margin: '0 auto' + } + } }); export default withStyles(styles, { withTheme: true })(Layout); diff --git a/lib/src/_shared/PickerBase.jsx b/lib/src/_shared/PickerBase.jsx index 3ccd6d92c..0b3cdc557 100644 --- a/lib/src/_shared/PickerBase.jsx +++ b/lib/src/_shared/PickerBase.jsx @@ -28,7 +28,7 @@ export default class PickerBase extends PureComponent { componentWillReceiveProps(nextProps) { if (!this.props.utils.isEqual(this.state.date, nextProps.value)) { - this.setState({ date: this.getValidDateOrCurrentg(nextProps) }); + this.setState({ date: this.getValidDateOrCurrent(nextProps) }); } } From 5761aab24a1d2c2b3266aa6799c34a12f3b5b1ac Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Wed, 7 Mar 2018 18:05:00 +0200 Subject: [PATCH 07/36] Add installation page to documentation --- docs/src/Routes/Demos/DatePickerDemo.jsx | 2 +- docs/src/Routes/Demos/DateTimePickerDemo.jsx | 2 +- docs/src/Routes/Demos/TimePickerDemo.jsx | 2 +- .../Routes/GettingStarted/Installation.jsx | 58 +++++++++++++++++++ docs/src/Routes/GettingStarted/Usage.jsx | 9 +++ docs/src/Routes/Routes.jsx | 6 +- docs/src/_shared/Code.jsx | 18 ++++-- docs/src/index.css | 11 ++++ docs/src/layout/Layout.jsx | 37 ++++++++---- docs/src/layout/NavigationMenu.jsx | 12 +++- 10 files changed, 138 insertions(+), 19 deletions(-) create mode 100644 docs/src/Routes/GettingStarted/Installation.jsx create mode 100644 docs/src/Routes/GettingStarted/Usage.jsx diff --git a/docs/src/Routes/Demos/DatePickerDemo.jsx b/docs/src/Routes/Demos/DatePickerDemo.jsx index c4d229ae0..ccda356f9 100644 --- a/docs/src/Routes/Demos/DatePickerDemo.jsx +++ b/docs/src/Routes/Demos/DatePickerDemo.jsx @@ -4,7 +4,7 @@ import { Typography } from 'material-ui'; const DatePickerDemoDemo = () => (
- + Date picker diff --git a/docs/src/Routes/Demos/DateTimePickerDemo.jsx b/docs/src/Routes/Demos/DateTimePickerDemo.jsx index cc364b7eb..5279d9eec 100644 --- a/docs/src/Routes/Demos/DateTimePickerDemo.jsx +++ b/docs/src/Routes/Demos/DateTimePickerDemo.jsx @@ -4,7 +4,7 @@ import { Typography } from 'material-ui'; const DateTimePickerDemo = () => (
- + Date & time picker diff --git a/docs/src/Routes/Demos/TimePickerDemo.jsx b/docs/src/Routes/Demos/TimePickerDemo.jsx index 299afddfd..55e41657d 100644 --- a/docs/src/Routes/Demos/TimePickerDemo.jsx +++ b/docs/src/Routes/Demos/TimePickerDemo.jsx @@ -4,7 +4,7 @@ import { Typography } from 'material-ui'; const DatePickerDemoDemo = () => (
- + Time picker diff --git a/docs/src/Routes/GettingStarted/Installation.jsx b/docs/src/Routes/GettingStarted/Installation.jsx new file mode 100644 index 000000000..e70518487 --- /dev/null +++ b/docs/src/Routes/GettingStarted/Installation.jsx @@ -0,0 +1,58 @@ +import React from 'react' +import Code from '_shared/Code' +import { Typography } from 'material-ui' + +const installLibCode = +`npm i -s date-fns@next +// or +npm i -s moment` + +const muiPickerProviderCode = +`import MomentUtils from 'material-ui-pickers/utils/moment-utils'; +import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils' +import MuiPickersUtilsProvider from 'material-ui-pickers/utils/MuiPickersUtilsProvider' + +function App() { + return ( + + + + ); +} + +render(, document.querySelector('#app')); +` +const Installation = () => ( +
+ Installation + Available as npm package + + + + Peer Library + + Material-ui-pickers was designed to use that date management library that you need. + + + We are providing interfaces for moment and date-fns 2 . If you are not using moment in the project (or dont have it in the bundle already) we suggest using date-fns, because it much more lightweight and will be correctly tree-shaked from the bundle. + + + + + Teach pickers how to use one of that library using MuiPickersUtilsProvider . This component takes an utils property, and makes it available down the React tree thanks to React context. It should preferably be used at the root of your component tree. + + + + Font Icons + + We are using material-ui-icons icon font to display icons. In order if you can override with a help of corresponding props. Just add this to your html + + +
+) + +export default Installation \ No newline at end of file diff --git a/docs/src/Routes/GettingStarted/Usage.jsx b/docs/src/Routes/GettingStarted/Usage.jsx new file mode 100644 index 000000000..2ebcbaf8a --- /dev/null +++ b/docs/src/Routes/GettingStarted/Usage.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Usage = () => ( +
+ npm +
+) + +export default Usage \ No newline at end of file diff --git a/docs/src/Routes/Routes.jsx b/docs/src/Routes/Routes.jsx index 04f14bf72..066062054 100644 --- a/docs/src/Routes/Routes.jsx +++ b/docs/src/Routes/Routes.jsx @@ -1,12 +1,16 @@ import React from 'react' import { Switch, Route } from 'react-router' -import Landing from './Landing/Landing' import Demos from './Demos' +import Landing from './Landing/Landing' +import Installation from './GettingStarted/Installation'; +import Usage from './GettingStarted/Usage'; export default () => ( + + ) \ No newline at end of file diff --git a/docs/src/_shared/Code.jsx b/docs/src/_shared/Code.jsx index 7e1d4bf8a..c42d63d28 100644 --- a/docs/src/_shared/Code.jsx +++ b/docs/src/_shared/Code.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import classnames from 'classnames'; import { withStyles } from 'material-ui/styles'; import prism from 'utils/prism'; @@ -25,10 +26,10 @@ const anchorLinkStyle = (theme, size) => ({ const styles = theme => ({ root: { + margin: 0, fontFamily: theme.typography.fontFamily, fontSize: 16, color: theme.palette.text.primary, - margin: 0, backgroundColor: theme.palette.background.paper, padding: 10, @@ -153,14 +154,18 @@ const styles = theme => ({ }, }, }, + margin: { + margin: '10px 0 30px' + }, }); const Code = (props) => { - const { classes, className, text } = props; - const hightlightedCode = prism.highlight(text, prism.languages.js); + const { classes, language, text, withMargin } = props; + console.log(prism.languages) + const hightlightedCode = prism.highlight(text, prism.languages[language]); return ( -
+
@@ -168,4 +173,9 @@ const Code = (props) => { ); }; +Code.defaultProps = { + withMargin: false, + language: 'jsx' +} + export default withStyles(styles)(Code); diff --git a/docs/src/index.css b/docs/src/index.css index d9e454a73..f1bef3a40 100644 --- a/docs/src/index.css +++ b/docs/src/index.css @@ -17,4 +17,15 @@ body { align-items: center; margin-bottom: 40px; margin: 10px 40px 40px; +} + +a { + text-decoration: none; + color: #3f51b5; +} + +.inline-code { + background-color: white; + color: #3f51b5; + padding: 5px 3px 0 3px; } \ No newline at end of file diff --git a/docs/src/layout/Layout.jsx b/docs/src/layout/Layout.jsx index df806e458..d65fa2a48 100644 --- a/docs/src/layout/Layout.jsx +++ b/docs/src/layout/Layout.jsx @@ -1,8 +1,10 @@ import React, { Component } from 'react'; +import classnames from 'classnames' import PropTypes from 'prop-types'; import Hidden from 'material-ui/Hidden'; import Drawer from 'material-ui/Drawer'; -import{ AppBar, Toolbar, IconButton, Icon, withStyles, Tooltip } from 'material-ui'; +import { withRouter } from 'react-router-dom'; +import { AppBar, Toolbar, IconButton, Icon, withStyles, Tooltip } from 'material-ui'; import Github from '_shared/GithubIcon'; import DrawerMenu from './DrawerMenu'; @@ -34,12 +36,16 @@ class Layout extends Component { render() { const { - classes, toggleThemeType, toggleDirection, toggleFrench, theme, + classes, toggleThemeType, toggleDirection, toggleFrench, theme, location } = this.props; + const isLanding = location.pathname === '/' return ( - +