Merge pull request mui#771 from dmtrKovalenko/feature/form-example

Feature/form example

docs/package.json

@@ -19,6 +19,7 @@
     "@types/react-router-dom": "^4.3.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.0.0-alpha.21",
+    "formik": "^1.3.2",
     "jss-rtl": "^0.2.3",
     "luxon": "^1.6.2",
     "material-ui-pickers": "2.0.1",

docs/src/Pages/Guides/Formik.example.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { DatePicker } from 'material-ui-pickers';
+import { Formik, Form, Field } from 'formik';
+import Code from '_shared/Code';
+import Grid from '@material-ui/core/Grid';
+
+const DatePickerField = ({ field, form, ...other }) => {
+  const currentError = form.errors[field.name];
+  return (
+    <DatePicker
+      keyboard
+      clearable
+      disablePast
+      name={field.name}
+      value={field.value}
+      format="dd/MM/yyyy"
+      helperText={currentError}
+      error={Boolean(currentError)}
+      onError={(_, error) => form.setFieldError(field.name, error)}
+      onChange={date => form.setFieldValue(field.name, date, true)}
+      mask={value =>
+        value ? [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/] : []
+      }
+      {...other}
+    />
+  );
+};
+
+const FormikExample = () => {
+  return (
+    <Formik initialValues={{ date: new Date() }}>
+      {({ values, errors }) => (
+        <Form>
+          <Grid container>
+            <Grid item container justify="center" xs={12}>
+              <div className="picker">
+                <Field name="date" component={DatePickerField} />
+              </div>
+            </Grid>
+
+            <Grid item xs={12} sm={12} style={{ margin: '24px' }}>
+              <Code text={JSON.stringify({ errors, values }, null, 2)} />
+            </Grid>
+          </Grid>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default FormikExample;

docs/src/Pages/Guides/Formik.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import SourcablePanel from '_shared/SourcablePanel';
+import { Typography } from '@material-ui/core';
+
+const Formik = () => (
+  <div>
+    <Typography variant="h2" gutterBottom>
+      Integration to form
+    </Typography>
+
+    <Typography variant="body1" gutterBottom>
+      We are providing inbound validating dates and triggering date's on accept.
+      And also there are quite a lot ways to submit the date, so we cannot
+      provide the event for onChange handler.
+    </Typography>
+
+    <SourcablePanel
+      title="Formik integration"
+      sourceFile="Guides/Formik.example.jsx"
+      description={
+        <Typography variant="body1" gutterBottom>
+          Here is example of how to use material-ui-pickers with formik
+        </Typography>
+      }
+    />
+  </div>
+);
+
+export default Formik;

docs/src/Pages/Router.tsx

@@ -1,18 +1,6 @@
 import React from 'react';
 import { Switch, Route } from 'react-router';
 
-// import Demos from './Demos';
-// import Landing from './Landing/Landing';
-// import Installation from './GettingStarted/Installation';
-// import Usage from './GettingStarted/Usage';
-// import DateFnsLocalization from './Localization/DateFnsLocalization';
-// import MomentLocalization from './Localization/MomentLocalization';
-// import PersianCalendar from './Localization/PersianCalendar';
-// import CssOverrides from './Guides/CssOverrides';
-// import FormatCustomization from './Guides/FormatsCustomization';
-// import ControllingProgrammatically from './Guides/ControllingProgrammatically';
-// import StaticPickers from './Guides/StaticPickers';
-// import ParsingDates from './GettingStarted/ParsingDates';
 import DateFnsLocalization from './Localization/Date-fns/DateFnsLocalization';
 import MomentLocalization from './Localization/Moment/MomentLocalization';
 import PersianCalendar from './Localization/Persian/PersianCalendar';
@@ -27,6 +15,7 @@ import Installation from './GettingStarted/Installation';
 import Usage from './GettingStarted/Usage';
 import ParsingDates from './GettingStarted/ParsingDates';
 import Landing from '../Landing/Landing';
+import Formik from './Guides/Formik';
 
 export default () => (
   <Switch>
@@ -39,6 +28,8 @@ export default () => (
 
     <Route path="/guides/css-overrides" component={CssOverrides} />
     <Route path="/guides/formats" component={FormatCustomization} />
+    <Route path="/guides/formik-integration" component={Formik} />
+
     <Route
       path="/guides/controlling-programmatically"
       component={ControllingProgrammatically}

docs/src/_shared/Code.jsx

@@ -27,12 +27,12 @@ const anchorLinkStyle = (theme, size) => ({
 
 const styles = theme => ({
   root: {
-    margin: 0,
+    margin: '0',
     fontFamily: theme.typography.fontFamily,
     fontSize: '0.9em',
     color: theme.palette.text.primary,
-    backgroundColor: theme.palette.background.paper,
     padding: 10,
+    backgroundColor: theme.palette.background.paper,
 
     '& .anchor-link': {
       marginTop: -theme.spacing.unit * 12, // Offset for the anchor.

docs/src/layout/NavigationMenu.jsx

@@ -32,6 +32,7 @@ const navItems = [
   {
     title: 'Guides',
     children: [
+      { title: 'Form integration', href: '/guides/formik-integration' },
       { title: 'CSS overrides', href: '/guides/css-overrides' },
       { title: 'Global format customization', href: '/guides/formats' },
       {

lib/.size-snapshot.json

@@ -2,7 +2,7 @@
   "build/dist/material-ui-pickers.esm.js": {
     "bundled": 114113,
     "minified": 67041,
-    "gzipped": 14578,
+    "gzipped": 14577,
     "treeshaked": {
       "rollup": {
         "code": 49331,
@@ -12,15 +12,5 @@
         "code": 56135
       }
     }
-  },
-  "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 230051,
-    "minified": 100239,
-    "gzipped": 25431
-  },
-  "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 201100,
-    "minified": 90276,
-    "gzipped": 23809
   }
 }