Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrote documentation #264

Merged
merged 12 commits into from
Mar 10, 2018
Merged
5 changes: 5 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"cSpell.words": [
"Sourcable"
]
}
86 changes: 10 additions & 76 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,92 +4,26 @@
[![Build Status](https://api.travis-ci.org/dmtrKovalenko/material-ui-pickers.svg?branch=master)](https://travis-ci.org/dmtrKovalenko/material-ui-pickers)
> Components, that implements material design date and time pickers for material-ui v1

## [Click here for demo](https://material-ui-pic.firebaseapp.com/)

### Recently updated?
Changelog available [here](https://github.com/dmtrKovalenko/material-ui-pickers/releases)

### Installation
Available as npm package.
```sh
npm install material-ui-pickers -S
```
Now choose the library that pickers will use to work with date. We are providing interfaces for [moment](https://momentjs.com/) and [date-fns](https://date-fns.org/). 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.

```jsx
import { MuiPickersUtilsProvider } from 'material-ui-pickers';
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import DateFnsUtils from 'material-ui-pickers/utils/date-fns-utils'

function App() {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Root />
</MuiPickersUtilsProvider>
);
}

render(<App />, document.querySelector('#app'));
```
Now choose the library that pickers will use to work with date. We are providing interfaces for [moment](https://momentjs.com/) and [date-fns](https://date-fns.org/). 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.

We are using material-ui-icons icon font to display icons. Just add this to your html
```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```sh
npm install date-fns@next -s
// or
npm install moment -S
```
If you dont want to use icon font, or you are already use `material-ui-icons` you can pass any icon to the components with [corresponding props](https://github.com/dmtrKovalenko/material-ui-pickers#props-documentation)

### Usage
Here is a quick example of how to use this package

```jsx
import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers'

class App extends Component {
state = {
selectedDate: new Date(),
selectedTime: new Date(),
selectedDateTime: new Date()
}

handleDateChange = date => {
this.setState({ selectedDate: date })
}

handleTimeChange = time => {
this.setState({ selectedTime: time })
}

handleDateTimeChange = dateTime => {
this.setState({ selectedDateTime: dateTime })
}

render() {
const { selectedDate, selectedTime, selectedDateTime } = this.state

return (
<div>
<DatePicker
value={selectedDate}
onChange={this.handleDateChange}
/>

<TimePicker
value={selectedTime}
onChange={this.handleTimeChange}
/>

<DateTimePicker
value={selectedDateTime}
onChange={this.handleDateTimeChange}
/>
</div>
)
}
}
```
## Documentation
Check out material-ui-picker's [documentation](https://material-ui-pickers.firebaseapp.com/)

### Recently updated?
Changelog available [here](https://github.com/dmtrKovalenko/material-ui-pickers/releases)
w
### Props documentation
Here is a list of available props

Expand Down
24 changes: 24 additions & 0 deletions docs/.eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"react/forbid-prop-types": 0,
"react/jsx-filename-extension": 0,
"react/no-find-dom-node": 0,
"import/no-named-as-default": 0,
"class-methods-use-this": 0,
"import/no-unresolved": 0,
"import/extensions": 0,
"jsx-a11y/anchor-is-valid": 0
},
"globals": {
"document": true,
"window": true
},
"env": {
"jest": true
},
"settings": {
"import/resolver": "webpack"
}
}
6 changes: 5 additions & 1 deletion docs/.firebaserc
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
{}
{
"projects": {
"default": "material-ui-pickers"
}
}
11 changes: 5 additions & 6 deletions docs/config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ module.exports = {
// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
Expand All @@ -71,10 +71,9 @@ 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)
),
process.env.NODE_PATH.split(path.delimiter).filter(Boolean) ),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
Expand Down Expand Up @@ -113,7 +112,7 @@ module.exports = {
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),

},
loader: require.resolve('eslint-loader'),
},
Expand Down Expand Up @@ -142,7 +141,7 @@ module.exports = {
include: [paths.appSrc, paths.libSrc],
loader: require.resolve('babel-loader'),
options: {

// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
Expand Down
91 changes: 44 additions & 47 deletions docs/config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
// To have this structure working with relative paths, we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths
? // Making sure that the publicPath goes back to to build folder.
{ publicPath: Array(cssFilename.split('/').length).join('../') }
{ publicPath: Array(cssFilename.split('/').length).join('../') }
: {};

// This is the production configuration.
Expand All @@ -65,7 +65,7 @@ module.exports = {
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath,
publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path
Expand All @@ -77,10 +77,9 @@ 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)
),
process.env.NODE_PATH.split(path.delimiter).filter(Boolean) ),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
Expand Down Expand Up @@ -119,7 +118,7 @@ module.exports = {
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),

},
loader: require.resolve('eslint-loader'),
},
Expand Down Expand Up @@ -147,7 +146,7 @@ module.exports = {
include: [paths.appSrc, paths.libSrc],
loader: require.resolve('babel-loader'),
options: {

compact: true,
},
},
Expand All @@ -165,49 +164,47 @@ module.exports = {
// in the main CSS file.
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
loader: ExtractTextPlugin.extract(Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
hmr: false,
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
],
},
extractTextPluginOptions
)
),
},
],
},
extractTextPluginOptions,
) ),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// "file" loader makes sure assets end up in the `build` folder.
Expand Down Expand Up @@ -314,7 +311,7 @@ module.exports = {
},
minify: true,
// For unknown URLs, fallback to the index page
navigateFallback: publicUrl + '/index.html',
navigateFallback: `${publicUrl}/index.html`,
// Ignores URLs starting from /__ (useful for Firebase):
// https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
navigateFallbackWhitelist: [/^(?!\/__).*/],
Expand Down
12 changes: 10 additions & 2 deletions docs/firebase.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
{
"hosting": {
"public": "build"
"public": "build",
"headers": [{
"source":"/service-worker.js",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }]
}],
"rewrites": [{
"source": "**",
"destination": "/index.html"
}]
}
}
}
Loading