Skip to content

Commit

Permalink
Merge branch 'next' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
dmtrKovalenko authored Sep 13, 2019
2 parents ad6314b + e03c8d7 commit a865eaa
Showing 25 changed files with 64 additions and 49 deletions.
15 changes: 7 additions & 8 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
# Contributing

:raised_hands::tada: First off all, thanks for taking the time to contribute! :tada::raised_hands:
:raised_hands::tada: First of all, thanks for taking the time to contribute! :tada::raised_hands:

The following is a set of guidelines for contributing to @material-ui/pickers. The purpose of these
guidelines is to maintain a high quality of code _and_ traceability. Please respect these
guidelines.

## Setting up

Please make sure that we are using `next` branch for active development. So your branches must be created from _develop_ and not from the ~~master~~. Here is a short step-by-step guide how to get started
Please make sure that we are using the `next` branch for active development. So your branches must be created from _next_ and not from ~~master~~. Here is a short step-by-step guide on how to get started:

1. Fork the @material-ui/pickers repository on Github
2. Clone your fork to your local machine `git clone [email protected]:<yourname>/@material-ui/pickers.git`
3. Checkout next `git checkout next`
4. Create a branch `git checkout -b feature/my-topic-branch`
5. Make your changes, lint, run tests, then push to to GitHub with `git push --set-upstream origin my-topic-branch`.
5. Make your changes, lint, run tests, then push to GitHub with `git push --set-upstream origin my-topic-branch`.
6. Visit GitHub and make your pull request.

If you have an existing local repository, please update it before you start, to minimise the chance of merge conflicts.

```sh
Ugit remote add upstream [email protected]:mui-org/@material-ui/pickers.git
git remote add upstream [email protected]:mui-org/@material-ui/pickers.git
git checkout next
git pull upstream next
git checkout -b my-topic-branch
@@ -35,13 +35,12 @@ yarn
yarn dev
```

To start development environment and be sure the `lib` folder is linked properly to the `docs` and your changes will be applied to the docs website.
to start the development environment and to be sure the `lib` folder is linked properly to the `docs` and your changes will be applied to the docs website.

## General

This repository use tests and a linter as automatic tools to maintain the quality of the code.
These two tasks are run locally on your machine before every commit (as a pre-commit git hook),
if any test fail or the linter gives an error the commit will not be created. They are also run on
This repository uses tests and a linter as automatic tools to maintain the quality of the code.
These two tasks are run locally on your machine before every commit (as a pre-commit git hook). If any test fails or the linter gives an error the commit will not be created. They are also run on
a Travis CI machine when you create a pull request, and the PR will not be merged unless Travis
says all tests and the linting pass.

4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ Accessible, customizable, delightful date & time pickers for [@material-ui/core]

### Installation

Note that this package reqiures `@material-ui/core` **v4**. It will not work with the old v3. Please read the [migration guide](https://material-ui-pickers.dev/guides/upgrading-to-v3) if you are updating from v2
Note that this package requires `@material-ui/core` **v4**. It will not work with the old v3. Please read the [migration guide](https://material-ui-pickers.dev/guides/upgrading-to-v3) if you are updating from v2

```sh
// via npm
@@ -31,7 +31,7 @@ npm i @material-ui/pickers
yarn add @material-ui/pickers
```

Now choose the library that pickers will use to work with date. We are providing interfaces for [moment](https://momentjs.com/), [luxon](https://moment.github.io/luxon/), [dayjs](https://github.com/iamkun/dayjs) and [date-fns v2](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 or luxon, because they are much lighter and will be correctly tree-shaked from the bundle. Note, that we are fully relying on [date-io](https://github.com/dmtrKovalenko/date-io) for supporting different libraries.
Now choose the library that pickers will use to work with date. We are providing interfaces for [moment](https://momentjs.com/), [luxon](https://moment.github.io/luxon/), [dayjs](https://github.com/iamkun/dayjs) and [date-fns v2](https://date-fns.org/). If you are not using moment in the project (or don’t have it in the bundle already) we suggest using date-fns or luxon, because they are much lighter and will be correctly tree-shaked from the bundle. Note, that we are fully relying on [date-io](https://github.com/dmtrKovalenko/date-io) for supporting different libraries.

```sh
npm i date-fns@next @date-io/date-fns
6 changes: 3 additions & 3 deletions docs/pages/demo/datepicker/index.mdx
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ color and type weight.

#### Keyboard Input

It is recommended to use keyboard input with mask for better desktop experience. Make sure that mask will be automatically
It is recommended to use keyboard input with mask for a better desktop experience. Make sure that mask will be automatically
generated from passed `format`. It's recommended to use only robust formats for keyboard input.

> Make sure that `onChange` have second parameter here. So if you will not do `onChange={date => handleDateChange(date)}` you will get console warning [useState hook dose not accept a second callback argument](https://github.com/facebook/react/issues/14174)
@@ -50,7 +50,7 @@ Thus you can easily create

#### Static mode

It is possible to render any picker inline. This will be really helpful to build cutom popover/modal containers.
It is possible to render any picker inline. This will be really helpful to build custom popover/modal containers.
For that use `variant="static"`.

<Example paddingBottom source={StaticDatePicker} />
@@ -63,7 +63,7 @@ The displaying of dates is heavily cusomizable. Thus you can add badges or fully

#### Dynamic data

Sometimes it's required to displaying additional info right in calendar.
Sometimes it's required to display additional info right in the calendar.
For this just return `Promise` in `onMonthChange`.

<Example source={ServerRequest} />
2 changes: 1 addition & 1 deletion docs/pages/demo/datetime-picker/index.mdx
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ This component combines Material Design date & time selection components. It all

#### Customization

Applied mostly all customization, that available for date & time pickers
Applied almost all customizations, that are available for date & time pickers

<Example source={CustomDateTimePicker} />

2 changes: 1 addition & 1 deletion docs/pages/demo/timepicker/index.mdx
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ A time picker should adjust to a user’s preferred time setting, i.e. the 12-ho

#### Static mode

It is possible to render any picker inline. This will be really helpful to build cutom popover/modal containers.
It is possible to render any picker inline. This will be really helpful to build custom popover/modal containers.
For that use `variant="static"`.

<Example paddingBottom source={StaticTimePicker} />
2 changes: 1 addition & 1 deletion docs/pages/getting-started/installation.mdx
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ yarn add @material-ui/pickers
@material-ui/pickers was designed to use the date management library of your choice.
We are providing interfaces for [moment](https://momentjs.com/), [date-fns 2](https://date-fns.org/), [luxon](https://moment.github.io/luxon/) and [dayjs](https://github.com/iamkun/dayjs).

**Important:**: we only support date-fns versions `v2` upwards.
**Important:** we only support date-fns versions `v2` upwards.

```
npm i @date-io/date-fns date-fns@next
11 changes: 9 additions & 2 deletions docs/pages/guides/Formik.example.jsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import { KeyboardDatePicker } from '@material-ui/pickers';

const DatePickerField = ({ field, form, ...other }) => {
const currentError = form.errors[field.name];

return (
<KeyboardDatePicker
clearable
@@ -15,8 +16,14 @@ const DatePickerField = ({ field, form, ...other }) => {
format="dd/MM/yyyy"
helperText={currentError}
error={Boolean(currentError)}
onError={(_, error) => form.setFieldError(field.name, error)}
onChange={date => date && form.setFieldValue(field.name, date, true)}
onError={error => {
// handle as a side effect
if (error !== currentError) {
form.setFieldError(field.name, error);
}
}}
// if you are using custom validation schema you probably want to pass `true` as third argument
onChange={date => form.setFieldValue(field.name, date, false)}
{...other}
/>
);
2 changes: 1 addition & 1 deletion docs/pages/guides/css-overrides.mdx
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ You can customize the material-ui theme, that is passed to `ThemeProvider` and t

#### Override example

*Date/Time pickers are quite simple controls from UX perspective, so most people just use the default appearence*
*Date/Time pickers are quite simple controls from UX perspective, so most people just use the default appearance*

That's why we are not providing any for-component classes api to override stylesheets for any particular
component. The only way to override existing stylesheets are with the use of global material-ui theme
12 changes: 6 additions & 6 deletions docs/prop-types.json
Original file line number Diff line number Diff line change
@@ -288,7 +288,7 @@
},
"onError": {
"defaultValue": null,
"description": "Callback fired when new error should be displayed",
"description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
"name": "onError",
"parent": {
"fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -812,7 +812,7 @@
},
"onError": {
"defaultValue": null,
"description": "Callback fired when new error should be displayed",
"description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
"name": "onError",
"parent": {
"fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1556,7 +1556,7 @@
},
"onError": {
"defaultValue": null,
"description": "Callback fired when new error should be displayed",
"description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
"name": "onError",
"parent": {
"fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1888,7 +1888,7 @@
},
"onError": {
"defaultValue": null,
"description": "Callback fired when new error should be displayed",
"description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
"name": "onError",
"parent": {
"fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -2440,7 +2440,7 @@
},
"onError": {
"defaultValue": null,
"description": "Callback fired when new error should be displayed",
"description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
"name": "onError",
"parent": {
"fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -3033,7 +3033,7 @@
},
"onError": {
"defaultValue": null,
"description": "Callback fired when new error should be displayed",
"description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
"name": "onError",
"parent": {
"fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
5 changes: 2 additions & 3 deletions lib/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@material-ui/pickers",
"version": "3.2.3",
"version": "3.2.5",
"private": true,
"description": "React components, that implements material design pickers for material-ui v1",
"main": "./src/index.ts",
@@ -64,8 +64,7 @@
"build:typescript": "tsc --project tsconfig.json",
"build": "npm run build:typescript && npm run build:bundle && npm run build:copy",
"build:analyze": "npm run build",
"release": "yarn test && yarn version && yarn build && yarn publish --non-interactive build",
"publish": "npm publish build"
"release": "yarn test && yarn version && yarn build && yarn publish --non-interactive build"
},
"devDependencies": {
"@babel/core": "^7.6.0",
2 changes: 1 addition & 1 deletion lib/src/MuiPickersUtilsProvider.tsx
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ export const MuiPickersUtilsProvider: React.FC<MuiPickersUtilsProviderProps> = (
locale,
libInstance,
}) => {
const utils = React.useMemo(() => new Utils({ locale, moment: libInstance }), [
const utils = React.useMemo(() => new Utils({ locale, instance: libInstance }), [
Utils,
libInstance,
locale,
4 changes: 2 additions & 2 deletions lib/src/Picker/makePickerWithState.tsx
Original file line number Diff line number Diff line change
@@ -4,8 +4,8 @@ import { Picker, ToolbarComponentProps } from './Picker';
import { ExtendWrapper, Wrapper } from '../wrappers/Wrapper';
import { PureDateInputProps } from '../_shared/PureDateInput';
import { DateValidationProps } from '../_helpers/text-field-helper';
import { KeyboardDateInputProps } from '../_shared/KeyboardDateInput';
import { StateHookOptions, usePickerState } from '../_shared/hooks/usePickerState';
import { KeyboardDateInput, KeyboardDateInputProps } from '../_shared/KeyboardDateInput';
import {
BaseKeyboardPickerProps,
useKeyboardPickerState,
@@ -20,7 +20,7 @@ export type WithPureInputProps = DateValidationProps &
ExtendWrapper<PureDateInputProps>;

export interface MakePickerOptions<T extends any> {
Input: KeyboardDateInput | PureDateInputProps;
Input: any;
useState: typeof usePickerState | typeof useKeyboardPickerState;
useOptions: (props: any) => StateHookOptions;
getCustomProps?: (props: T) => Partial<T>;
1 change: 1 addition & 0 deletions lib/src/_helpers/text-field-helper.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Omit } from './utils';
import { DatePickerProps } from '..';
import { IUtils } from '@date-io/core/IUtils';
import { ParsableDate } from '../constants/prop-types';
2 changes: 2 additions & 0 deletions lib/src/_helpers/utils.ts
Original file line number Diff line number Diff line change
@@ -6,3 +6,5 @@ export function arrayIncludes<T>(array: T[], itemOrItems: T | T[]) {

return array.indexOf(itemOrItems) !== -1;
}

export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
2 changes: 1 addition & 1 deletion lib/src/_shared/KeyboardDateInput.tsx
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ export interface KeyboardDateInputProps
extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
format: string;
onChange: (value: string | null) => void;
openPicker?: () => void;
openPicker: () => void;
validationError?: React.ReactNode;
inputValue: string;
inputProps?: TextFieldProps['inputProps'];
5 changes: 2 additions & 3 deletions lib/src/_shared/ModalDialog.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import Dialog, { DialogProps } from '@material-ui/core/Dialog';
import { DIALOG_WIDTH } from '../constants/dimensions';
import { DIALOG_WIDTH, DIALOG_WIDTH_WIDER } from '../constants/dimensions';
import { createStyles, WithStyles, withStyles } from '@material-ui/core/styles';

export interface ModalDialogProps extends DialogProps {
@@ -90,10 +90,9 @@ ModalDialog.displayName = 'ModalDialog';
export const styles = createStyles({
dialogRoot: {
minWidth: DIALOG_WIDTH,
// maxWidth: DIALOG_WIDTH_WIDER,
},
dialogRootWider: {
// minWidth: DIALOG_WIDTH_WIDER,
minWidth: DIALOG_WIDTH_WIDER,
},
dialog: {
'&:first-child': {
1 change: 1 addition & 0 deletions lib/src/_shared/WithUtils.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import { Omit } from '../_helpers/utils';
import { useUtils } from './hooks/useUtils';
import { IUtils } from '@date-io/core/IUtils';
import { MaterialUiPickersDate } from '../typings/date';
1 change: 1 addition & 0 deletions lib/src/_shared/hooks/useKeyboardPickerState.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useUtils } from './useUtils';
import { Omit } from '../../_helpers/utils';
import { IUtils } from '@date-io/core/IUtils';
import { BasePickerProps } from '../../typings/BasePicker';
import { MaterialUiPickersDate } from '../../typings/date';
2 changes: 1 addition & 1 deletion lib/src/_shared/hooks/usePickerState.ts
Original file line number Diff line number Diff line change
@@ -92,7 +92,7 @@ export function usePickerState(props: BasePickerProps, options: StateHookOptions

const validationError = validate(value, utils, props);
useEffect(() => {
if (validationError && onError) {
if (onError) {
onError(validationError, value);
}
}, [onError, validationError, value]);
4 changes: 3 additions & 1 deletion lib/src/typings/BasePicker.tsx
Original file line number Diff line number Diff line change
@@ -33,7 +33,9 @@ export interface BasePickerProps {
emptyLabel?: string;
/** Callback fired when date is accepted @DateIOType */
onAccept?: (date: MaterialUiPickersDate) => void;
/** Callback fired when new error should be displayed @DateIOType */
/** Callback fired when new error should be displayed
* (!! This is a side effect. Be careful if you want to rerender the component) @DateIOType
*/
onError?: (error: React.ReactNode, value: MaterialUiPickersDate | ParsableDate) => void;
/** On open callback */
onOpen?: () => void;
2 changes: 2 additions & 0 deletions lib/src/typings/extendMui.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Omit } from '../_helpers/utils';

/**
* All standard components exposed by `material-ui` are `StyledComponents` with
* certain `classes`, on which one can also set a top-level `className` and inline
2 changes: 1 addition & 1 deletion lib/src/wrappers/ModalWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import ModalDialog from '../_shared/ModalDialog';
import { Omit } from '@material-ui/core';
import { WrapperProps } from './Wrapper';
import { Omit } from '../_helpers/utils';
import { useKeyDown } from '../_shared/hooks/useKeyDown';
import { DialogProps as MuiDialogProps } from '@material-ui/core/Dialog';

2 changes: 1 addition & 1 deletion lib/src/wrappers/Wrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { Omit } from '@material-ui/core';
import { Omit } from '../_helpers/utils';
import { StaticWrapper } from './StaticWrapper';
import { ModalWrapper, ModalWrapperProps } from './ModalWrapper';
import { InlineWrapper, InlineWrapperProps } from './InlineWrapper';
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@
"scripts": {
"start": "yarn dev",
"dev": "yarn workspace docs dev",
"release": "yarn workspace @material-ui/pickers release || git push && git push --tags",
"release": "yarn workspace @material-ui/pickers release && git push && git push --tags",
"e2e:open": "cypress open",
"e2e:run": "cypress run",
"docgen": "node docs/scripts/docgen.js",
20 changes: 11 additions & 9 deletions yarn.lock
Original file line number Diff line number Diff line change
@@ -5411,14 +5411,16 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
estraverse "^4.1.1"

eslint-utils@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512"
integrity sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==
version "1.4.2"
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.2.tgz#166a5180ef6ab7eb462f162fd0e6f2463d7309ab"
integrity sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==
dependencies:
eslint-visitor-keys "^1.0.0"

eslint-visitor-keys@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
version "1.1.0"
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==

eslint@^5.16.0:
version "5.16.0"
@@ -8784,9 +8786,9 @@ mississippi@^3.0.0:
through2 "^2.0.0"

mixin-deep@^1.2.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
integrity sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==
version "1.3.2"
resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
dependencies:
for-in "^1.0.2"
is-extendable "^1.0.1"

0 comments on commit a865eaa

Please sign in to comment.