😎 Release 1.0.0-alpha.1

mui · Oct 22, 2017 · 18de1fc · 18de1fc
1 parent 3ec819d
commit 18de1fc
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Material-UI picker
 > Components, that implements material design date and time pickers for material-ui v1
 
-## [Click here for demo](https://dmtrkovalenko.github.io/material-ui-pickers/)
+## [Click here for demo](https://material-ui-pic.firebaseapp.com/)
 
 ### Installation
 Available as npm package 
@@ -67,6 +67,12 @@ value | string, number, Date object, Moment object | null | Timepicker value
 format | string | 'MMMM Do' | Moment format string for input
 autoOk | boolean | false | Auto accept time on selection 
 
+### Known Issues
+1. Supporting of touch devices
+2. DateTime picker
+
+That would be added in one of the nearest release :)
+
 ### Contributing
 For information about how to contribute, see the [CONTRIBUTING](https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/CONTRIBUTE.md) file.
 

diff --git a/docs/src/App.js b/docs/src/App.js
@@ -3,11 +3,29 @@ import { MuiThemeProvider, createMuiTheme } from 'material-ui'
 import Demo from './Demo/Demo'
 
 export default class App extends Component {
+  state = {
+    type: 'light'
+  }
+
+  toggleThemeType = () => {
+    const type = this.state.type === 'light' ? 'dark' : 'light'
+
+    this.setState({ type })
+  }
+
+  getMuiTheme = () => {
+    return createMuiTheme({
+      palette: {
+        type: this.state.type, // Switching the dark mode on is a single property value change.
+      },
+    })
+  }
+
   render() {
     return ( 
       <div className="root">
-        <MuiThemeProvider>
-          <Demo  />
+        <MuiThemeProvider theme={this.getMuiTheme()}>
+          <Demo toggleThemeType={this.toggleThemeType} />
         </MuiThemeProvider>
       </div>
     )

diff --git a/docs/src/Demo/Demo.css b/docs/src/Demo/Demo.css
@@ -4,25 +4,6 @@
   box-sizing: border-box;
 }
 
-.menuButton {
-  margin-left: -12;
-  margin-right: 20;
-}
-
-.app-toolbar {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 60px 20px 40px
-}
-
-.github-icon {
-  position: absolute;
-  top: 5px;
-  right: 20px;
-  color: white;
-}
-
 .text-light {
   font-weight: 200 !important;
 }
@@ -32,13 +13,18 @@
 }
 
 main {
-  margin-top: 20px;
-  padding: 10px;
+  margin-top: 55px;
+}
+
+@media(min-width: 600px) {
+  main {
+    margin-top: 64px;
+  }
 }
 
 .material-ui-logo {
   width: 100%;
-  height: 40vh;
+  height: 40vw;
   max-height: 230px
 }
 

diff --git a/docs/src/Demo/Demo.jsx b/docs/src/Demo/Demo.jsx
@@ -1,10 +1,15 @@
 import React, { Component } from 'react';
-import { AppBar, Toolbar, IconButton, Typography } from 'material-ui'
+import PropTypes from 'prop-types'
+import { AppBar, Toolbar, IconButton, Typography, withStyles, Button, Tooltip } from 'material-ui'
 import { TimePicker, DatePicker } from 'material-ui-pickers'
 import Github from './GithubIcon'
 import './Demo.css';
 
 class Demo extends Component {
+  static propTypes = {
+    toggleThemeType: PropTypes.func.isRequired,
+  }
+
   state = {
     selectedDate: new Date(),
     selectedTime: new Date()
@@ -18,61 +23,134 @@ class Demo extends Component {
     this.setState({ selectedTime: time })
   }
 
+  scrollToContent = () => {
+    const contentEl = document.getElementById('content');
+    contentEl.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    })
+  }
+
   render() {
+    const { classes } = this.props
     const { selectedDate } = this.state
+
     return (
       <main className="main">
-        <AppBar position="static">
-          <Toolbar className="app-toolbar">
-            <img className="material-ui-logo" src="https://material-ui-1dab0.firebaseapp.com/static/images/material-ui-logo.svg" />
-
-            <Typography type="display1" color="inherit" className='title text-light' gutterBottom>
-              Material-UI Pickers
-            </Typography>
-            <Typography type="headline" align="center" color="inherit" gutterBottom className='text-light'>
-              Date and Time pickers for material-ui v1
-            </Typography>
-
-            <a className="github-icon" href="https://github.com/dmtrKovalenko/material-ui-pickers">
-              <IconButton> 
-                <Github color="white"/> 
-              </IconButton>
-            </a>
+        <AppBar position="fixed" className={classes.noShadow}>
+          <Toolbar>
+            <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
+              menu
+            </IconButton>
+
+           <div className={classes.flex} />
+
+           <Tooltip title="Toggle light/dark theme" enterDelay={300}>
+            <IconButton color="contrast" onClick={this.props.toggleThemeType}>
+              lightbulb_outline
+            </IconButton>
+           </Tooltip>
+
+          <a href="https://github.com/dmtrKovalenko/material-ui-pickers">
+            <IconButton> 
+              <Github color="white"/> 
+            </IconButton>
+          </a>
           </Toolbar>
         </AppBar>
 
-        <Typography type="display1" align="center" gutterBottom>
-          Here you are!
-        </Typography>
-
-        <div className="pickers">
-          <div className="picker">
-            <Typography type="headline" align="center" gutterBottom>
-              Date picker
-            </Typography>
-
-            <DatePicker 
-              disableFuture
-              value={selectedDate}
-              onChange={this.handleDateChange}
-              animateYearScrolling={false}
-            />
-          </div>
+        <Toolbar color="primary" className={classes.appToolbar}>
+          <img className="material-ui-logo" src="https://material-ui-1dab0.firebaseapp.com/static/images/material-ui-logo.svg" />
+
+          <Typography type="display1" color="inherit" className='title text-light' gutterBottom>
+            Material-UI Pickers
+          </Typography>
+          <Typography type="headline" align="center" color="inherit" gutterBottom className='text-light'>
+            Date and Time pickers for material-ui v1
+          </Typography>
 
-          <div className="picker">
-            <Typography type="headline" align="center" gutterBottom>
-              Time picker
-            </Typography>
+          <Button raised className={classes.getStarted} onClick={this.scrollToContent}>
+            Get Started
+          </Button>
+        </Toolbar>
 
-            <TimePicker
-              value={this.state.selectedTime}
-              onChange={this.handleTimeChange}
-            />
+        <div id="content" className={classes.content}>
+          <Typography type="display1" align="center" gutterBottom>
+            Here you are!
+          </Typography>
+
+          <Typography type="headline" align="center" gutterBottom className={classes.example}>
+            Basic usage
+          </Typography>
+
+          <div className="pickers">
+            <div className="picker">
+              <Typography type="headline" align="center" gutterBottom>
+                Date picker
+              </Typography>
+
+              <DatePicker 
+                disableFuture
+                value={selectedDate}
+                onChange={this.handleDateChange}
+                animateYearScrolling={false}
+              />
+            </div>
+
+            <div className="picker">
+              <Typography type="headline" align="center" gutterBottom>
+                Time picker
+              </Typography>
+
+              <TimePicker
+                value={this.state.selectedTime}
+                onChange={this.handleTimeChange}
+              />
+            </div>
           </div>
         </div>
       </main>
     );
   }
 }
 
-export default Demo;
+const styles = theme => ({
+  flex: {
+    flex: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  noShadow: {
+    boxShadow: 'unset'
+  },
+  appToolbar: {
+    backgroundColor: theme.palette.primary[500],
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    color: 'white',
+    padding: '40px 20px',
+    '@media (max-width: 600px)': {
+      paddingTop: '100px',
+      minHeight: 'calc(100vh - 55px)',
+    },
+  },
+  getStarted: {
+    marginTop: '10px',
+  },
+  example: {
+    marginTop: '40px'
+  },
+  content: {
+    paddingTop: '30px',
+    backgroundColor: theme.palette.background.paper,
+    minHeight: 'calc(100vh - 63px)',
+    '@media(max-width: 600px)': {
+      minHeight: 'calc(100vh - 55px)'
+    }
+  }
+})
+
+export default withStyles(styles)(Demo);
diff --git a/package.json b/package.json
@@ -1,9 +1,31 @@
 {
   "name": "material-ui-pickers",
-  "version": "0.0.1",
-  "description": "",
+  "version": "1.0.0-alpha.1",
+  "description": "React components, that implements material design pickers for material-ui v1",
   "main": "dist/material-ui-pickers.cjs.js",
   "module": "dist/material-ui-pickers.es.js",
+  "keywords": [
+    "material-ui",
+    "pickers",
+    "material-ui-pickers",
+    "datepicker",
+    "timepicker",
+    "date-picker",
+    "time-picker",
+    "react",
+    "react-component",
+    "material design"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dmtrKovalenko/material-ui-pickers/issues"
+  },
+  "homepage": "https://material-ui-pic.firebaseapp.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dmtrKovalenko/material-ui-pickers"
+  },
+  "author": "Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>",
   "peerDependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -13,7 +13,6 @@ export default {
   external: ['react', 'react-dom', 'prop-types', 'material-ui', 'classnames'],
   plugins: [
     resolve({
-
       extensions: ['.js', '.jsx'],
     }),
     babel({

diff --git a/src/DatePicker/CalendarHeader.jsx b/src/DatePicker/CalendarHeader.jsx
@@ -59,6 +59,9 @@ const styles = theme => ({
     textAlign: 'center',
     color: theme.palette.text.hint,
   },
+  monthName: {
+    color: theme.palette.text.primary,
+  },
 });
 
 export default withStyles(styles)(CalendarHeader, { name: 'MuiPickersCalendarHeader' });

diff --git a/src/DatePicker/YearSelection.jsx b/src/DatePicker/YearSelection.jsx
@@ -85,6 +85,7 @@ const styles = theme => ({
     justifyContent: 'center',
     cursor: 'pointer',
     outline: 'none',
+    color: theme.palette.text.primary
   },
   selectedYear: {
     fontSize: 26,

diff --git a/src/TimePicker/ClockNumber.jsx b/src/TimePicker/ClockNumber.jsx
@@ -66,6 +66,9 @@ const styles = theme => ({
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: '50%',
+    color: theme.palette.type === 'light'
+      ? theme.palette.text.primary
+      : theme.palette.text.hint
   },
   selected: {
     color: 'white',