Skip to content

Commit

Permalink
Release v3.2.1 (#1218)
Browse files Browse the repository at this point in the history
* Fix not working logo

* Mention required material-ui v4 in README.md

* 📝 improve grammar in docs (#1073)

* 📝 improve grammar in docs

First of all, amazing project! 🎉 I took the liberty, and read through the docs, and on my way, I corrected some of the English grammar, I hope you don't mind! Keep up the great work! 👨‍🏭

* 📝 more grammar improvements

* Fix time order in RTL DateTimePicker (mui-org#1071) (#1072)

* Consume fade correctly (#1077)

* Remove react-event-listener (#1075)

* Remove react-event-listener

* Fix lint

* Make reusable useKeyDown

* Update packages | 02 06 2018 (#1079)

* Update packages

* Shut up now bot

* Fix now.json silent location

* Fix ts error for navigator.permissions

* Disable ToolbarButtonOverride, closes #1076 (#1080)

* Fix inputRef collision, closes #1069 (#1081)

* [DatePicker] add strictCompareDates prop (#1067)

* DatePicker: add validateStrict props

Add strict camparison for minDate, maxDate, disablePast, disableFuture

* Min/Max date validation

rename props validateStrict to strictCompareDates

* DateValidation: strictCompareDates reduce conditions

* Async month changed callbacks (#1052)

* Added async handling of onMonthChange with loading indicator

* Only show loading indicator if onMonthChange returns a Promise

* Added test cases

* Added some more test cases. Testing push and pop functionality of loading queue

* Removed unused import

* Updated docs and changed callback type in MonthSelection

* Replaced 'async/await' with 'then' to reduce bundle size

* Importing CircularProgress by path instead

* Added support for optional loading indicator as a property

* Moved tests to e2e

* Removed unused import

* Fixed Prettier violation

* [typescript] Fix incorrectly inferred type for keyboard onChange (#1083)

* Support keyboardIcon for v3, closes #1084 (#1085)

* Support keyboardIcon for v3. closes #1084

* Add new prop to the docs

* Support TextFieldComponent prop (#1087)

* v3.1.0

* Change release script

* Change bundlephobia badge link

* Compare date strict tests (#1089)

* WrappedKeyboardPicker: send strictCompareDates prop

* compareDateStrict: add tests

* Fix "todayLabel" prop type description. (#1091)

* Fix "todayLabel" prop type description.

* Update lib/src/wrappers/ModalWrapper.tsx

Co-Authored-By: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>

* Fix typescript material-ui overrides example (#1092)

* Spread emptyLabel from passing to textField, closes #1093

* Fix incorrect DateTimePicker year button alignment on wide devices

* Inner state for picker modal (#1095)

* Use inner state for displayed date in calendar

* Make inline pickers controlled by default

* Fix tests

* Fix deadlock on rendering with usePickerState

* Fix crashing on utils change

* Fix not applying keydown listener, closes #1090

* Update packages 08.06.2019 (#1096)

* Update packages 08.06.2019

* Fix prettier

* [docs] Add fetching data example (#1097)

* Use inner state for displayed date in calendar

* Make inline pickers controlled by default

* Fix tests

* Fix deadlock on rendering with usePickerState

* Fix crashing on utils change

* [docs] Add fetching data example

* Change text and remove unnecessary details from example

* Adjust some props description

* [Refactoring] Reorganize folder structure (#1098)

* Regorganize folder structure

* Create new views folder with all components

* Remove unnecessary theme type annotations

* Restore lost in merge changes

* Fix imports in tests

* [Refactoring] Refactor Calendar.tsx

* [Refactoring] Better hook memoization (#1101)

* [Refactoring] Refactor useOpenState implementation

Eliminate code duplication between the controlled and the uncontrolled implementation.
Albeit short today, the code that calls the onOpen/onClose callbacks was duplicated.
The controlled variant did not memoize with useCallbacks().

Fix memoization by not depending on `props` as a whole.

* [Refactoring] Better hook memoization in usePickerState/useKeyboardPickerState

Avoid passing the entire `props` object into the hooks' `deps', as it will usually be a fresh object, which prevents memoization.

* Make "Today" button to set inner state, instead of onChange

* Fix prettier in-merge error

* [#1111] Properly rely on views order when switching views (#1116)

* Polyfill array includes manually for IE11 (#1117)

* Polyfill array includes manually for IE11

* Make proper implementation of arrayIncludes 🙆‍♂️

* Update release script

* v3.1.1

* Add visual regression tests (#1121)

* Add visual regression tests

* Make docs run in backgorund on ci for tests

* Fix percy command not found error

* Add cypress verify on install

* Restory cypress binary cache before running

* Add additional yarn install

* Change order of builds

* Fix tsconfig.json error

* Add more visual regression scenarios

* Update config.yml

* Disable random icons in percy

* Make year to be 2019 in tests

* Add more scenarios

* Completely hide Ads in percy

* [docs] Fix crashing on changing utils (#1123)

* [docs] Fix crashing on changing utils

* Rewrite MuiPickersUtilsProvider on hooks

* Fix moment localization example

* Update SecondsTimePicker.example.jsx (#1125)

* Add Percy badge (#1129)

* [docs] Fix views type labels for DatePicker API (#1138)

* [#1126] Fix rerendering loop

* Fix invalidLabel prop-type warning

* [#1126] Fix rerendering loop (#1139)

* Custom spacing support (#1141)

* Add custom theme spacing example

* Fix issues with theme spacing

* Allow to pass custom rifm formatter (#1142)

* v3.1.2

* 3.1.2

* [Calendar] Remove arrows white background on sliding from disabled state (#1152)

* Add Hijri calendar example (#1153)

* Add Hijri calendar example

* Combine jalaali and hijri in single page

* Address PR feedback

* Fix headers size

* Do not throw error if input value was cleared symbol by symbol (#1160)

* [TimePicker] Properly hide separator if views not included (#1161)

* [InlineVariant] Do not update value on backdrop click (#1162)

* [docs] Fix variant prop type displaying, highlight code in 'type' column (#1163)

* Fix variant prop displaying, highlight type code

* Remove additional space after each prop

* Add variant="static" (#1164)

* Add variant="static"

* More variant="static" examples

* Landscape orientation support  (#1177)

* Fix persian examples

* Remove injected css after front-end mount

* Determine and apply styles for current orientation

* Add tests

* Support landscape for TimePicker

* Use isomorphic effect for event handler

* Fix lint errors

* Add new props to the documentation

* Fix displaying short weekdays in datepicker toolbar

* Custom toolbar component (#1182)

* Add new ToolbarComponent prop for custom toolbars

* Update props docs

* Run docgen on precommit hook

* Run docgen on precommit hook

* Run git add after precommit command

* Automatically format json before prettier

* Do not accept a and p sympbols in not am/pm mode (#1183)

* Fix keyboard popover position (#1184)

* Correct position of inline wrapper popover

* Adjust variant prop description

* Adjust props description

* Uncomment example

* Add prop-types.json to prettier-ignore

* Properly freeze clock for percy

* Use yarn to publish

* v3.2.0

* Update publish command

* Use KeyboardDatePicker for formik integration example

* [docs] Add redux form integration example (#1189)

* install redux and redux-form

* configure redux-form

* wrap App with redux provider

* create redux form example

* add react-redux types to dev dependencies

* Update docs/pages/guides/form-integration.mdx

Co-Authored-By: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>

* move redux to example folder

* Wrap example with redux

* remove redux-thunk

* modify onChange to allow empty field

in the other way, the field always gotten the last valid value, even when explicit deleted.
This way, the user can clear the field!

* move store to inside Form example

* Update useIsLandscape.tsx (#1199)

Fix crashing on changing orientation for some devices

* Update CSS overrides example (#1201)

isSelected is no longer a valid theme entry for MUI Pickers, so update
the docs to reflect this change. Also extends the example for
dayDisabled override.

* Support auto detection of orientation change for safari (#1207)

* Add inputProps to the outputted typescript definitions (#1208)

* Fix dispatching 2 onChange events with variant="inline" (#1209)

* Fix dispatching 2 onChange events with variant="inline"

* Update lib/src/_shared/hooks/usePickerState.ts

* Make autoOk property to have bigger prioritiy

* Add releases page (#1210)

* Add releases page

It lists available documentation websites for v3+ versions

* Use constant for the latest url link

* Make releases table horisontally scrollable on mobile

* Fix grammar

* Add shorthand for static state managment (#1212)

* [KeyboardDateInput] Fix not updating formatter when new mask passed (#1213)

* fix when both clear button & showToday button (#1211)

* Add babel transpilation to esm (#1206)

* Add babel transpilation to esm

* Use babel for rollup as well

* Fix missing * in jsdoc comment for ToolbarComponent

* Update packages (#1217)

* Update packages

* Fix overrides typing

* Add { force: true } for readonly inputs

* Add one more { force: true }

* v3.2.1

* Remove old versions from readme

* More clearly highlight requiring version of date-fns
  • Loading branch information
dmtrKovalenko committed Jul 31, 2019
1 parent 2acc5a5 commit faa834a
Show file tree
Hide file tree
Showing 130 changed files with 6,018 additions and 2,000 deletions.
35 changes: 26 additions & 9 deletions .circleci/config.yml
Expand Up @@ -78,6 +78,30 @@ jobs:
- run: cd lib && yarn test:<<parameters.lib>> -- -- --runInBand
- steps: << parameters.after-tests >>

cypress_tests:
description: Run cypress tests
executor: cypress/browsers-chrome69
steps:
- attach_workspace:
at: .
- restore_cache:
name: Restore Cache
keys:
- yarn-packages-{{ checksum "yarn.lock" }}
- run:
name: Additional yarn install
command: yarn install --frozen-lockfile
- run:
name: Install, if no cypress binary found
command: yarn cypress install
- run: yarn workspace docs build
- run:
background: true
name: Run docs in background
command: yarn workspace docs start
- run: npx wait-on http://localhost:3000
- run: yarn percy exec -- cypress run --record

####################
# Workflow
####################
Expand All @@ -90,17 +114,10 @@ workflows:
requires:
- checkout_code

- cypress/run:
- cypress_tests:
name: 'Cypress tests'
requires:
- 'Install deps, lint and build'
executor: cypress/browsers-chrome69
build: 'yarn workspace docs build'
start: 'yarn workspace docs start'
wait-on: 'http://localhost:3000'
record: true
yarn: true
cache-key: yarn-packages-{{ checksum "yarn.lock" }}
- checkout_code

- jest_tests:
name: 'Date-fns jest tests'
Expand Down
1 change: 1 addition & 0 deletions .prettierignore
Expand Up @@ -3,3 +3,4 @@ build/
coverage/
*.mp4
.next
docs/prop-types.json
13 changes: 4 additions & 9 deletions README.md
@@ -1,5 +1,5 @@
<p align="center">
<a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="200" src="https://next.material-ui-pickers.dev/static/meta-image.png" alt="Material-UI logo"></a></p>
<a href="https://material-ui.com/" rel="noopener" target="_blank"><img width="200" src="https://material-ui-pickers.dev/static/meta-image.png" alt="Material-ui-pickers logo"></a></p>
</p>

<h1 align="center">Material-UI pickers</h1>
Expand All @@ -11,16 +11,17 @@ Accessible, customizable, delightful date & time pickers for [@material-ui/core]
[![npm package](https://img.shields.io/npm/v/@material-ui/pickers.svg)](https://www.npmjs.org/package/@material-ui/pickers)
[![npm download](https://img.shields.io/npm/dm/@material-ui/pickers.svg)](https://www.npmjs.org/package/@material-ui/pickers)
[![codecov](https://codecov.io/gh/mui-org/material-ui-pickers/branch/next/graph/badge.svg)](https://codecov.io/gh/mui-org/material-ui-pickers)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@material-ui/pickers)](https://bundlephobia.com/result?p=@material-ui/pickers@3.0.0-beta.1)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/@material-ui/pickers)](https://bundlephobia.com/result?p=@material-ui/pickers@latest)
[![CircleCI](https://circleci.com/gh/mui-org/material-ui-pickers.svg?style=svg)](https://circleci.com/gh/mui-org/material-ui-pickers)
[![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/qow28y/runs)
[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/mui-org/material-ui-pickers)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

</div>

### Installation

Please read the [migration guide](https://material-ui-pickers.dev/guides/upgrading-to-v3) if you are updating from v2
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

```sh
// via npm
Expand Down Expand Up @@ -65,12 +66,6 @@ render(<App />, document.querySelector('#app'));

Check out the [documentation website](https://material-ui-pickers.dev/)

Old versions documentation:

| Version | Documentation url |
| ------- | ----------------------------------------------------- |
| v2 | https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/ |

### Recently updated?

Changelog available [here](https://github.com/mui-org/material-ui-pickers/releases)
Expand Down
1 change: 1 addition & 0 deletions cypress.json
Expand Up @@ -2,6 +2,7 @@
"baseUrl": "http://localhost:3000",
"integrationFolder": "e2e/integration",
"supportFile": "e2e/support/index.js",
"pluginsFile": "e2e/plugins/index.js",
"chromeWebSecurity": false,
"projectId": "qow28y"
}
4 changes: 3 additions & 1 deletion docs/_constants.ts
@@ -1,6 +1,8 @@
export const CODESANDBOX_EXAMPLE_ID = 'o7oojxx1pq';

export const HOST_URL = 'https://material-ui-pickers.dev';
export const DOMAIN = 'material-ui-pickers.dev';

export const HOST_URL = 'https://' + DOMAIN;

export const LOGO_URL = HOST_URL + '/static/meta-image.png';

Expand Down
10 changes: 7 additions & 3 deletions docs/_shared/Ad.tsx
@@ -1,9 +1,8 @@
import * as React from 'react';
import { loadScript } from 'utils/helpers';
import { Grid, Theme } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';
import { Grid, makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) => ({
const useStyles = makeStyles(theme => ({
'@global': {
'#codefund': {
'& .cf-wrapper': {
Expand All @@ -16,6 +15,11 @@ const useStyles = makeStyles((theme: Theme) => ({
color: theme.palette.text.primary + '! important',
},
},
'@media only percy': {
'#codefund': {
display: 'none',
},
},
},
}));

Expand Down
42 changes: 32 additions & 10 deletions docs/_shared/Code.tsx
@@ -1,11 +1,11 @@
import clsx from 'clsx';
import React from 'react';
import { highlight } from '../utils/prism';
import { withStyles, Theme, WithStyles } from '@material-ui/core';
import { makeStyles } from '@material-ui/core';

const styles = (theme: Theme) => ({
const useStyles = makeStyles(theme => ({
root: {
margin: '0',
margin: 0,
fontFamily: theme.typography.fontFamily,
fontSize: '1em',
color: theme.palette.text.primary,
Expand All @@ -19,23 +19,45 @@ const styles = (theme: Theme) => ({
backgroundColor: theme.palette.background.paper + ' !important',
},
},
inlineRoot: {
padding: 0,
'& pre': {
padding: 0,
},
},
inlineCode: {
fontSize: 14,
// color: theme.palette.secondary.main,
whiteSpace: 'pre-wrap',
},
margin: {
margin: '10px 0 30px',
},
});
}));

type CodeProps = {
interface CodeProps {
children: string;
inline?: boolean;
withMargin?: boolean;
language?: 'jsx' | 'typescript' | 'markup';
} & WithStyles<typeof styles>;
}

const Code: React.SFC<CodeProps> = ({ classes, language = 'jsx', children, withMargin }) => {
const Code: React.SFC<CodeProps> = ({ language = 'jsx', inline, children, withMargin }) => {
const classes = useStyles();
const highlightedCode = highlight(children, language);

return (
<div className={clsx(classes.root, { [classes.margin]: withMargin })}>
<div
className={clsx(classes.root, {
[classes.margin]: withMargin,
[classes.inlineRoot]: inline,
})}
>
<pre>
<code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
<code
className={clsx({ [classes.inlineCode]: inline })}
dangerouslySetInnerHTML={{ __html: highlightedCode }}
/>
</pre>
</div>
);
Expand All @@ -46,4 +68,4 @@ Code.defaultProps = {
language: 'jsx',
};

export default withStyles(styles)(Code);
export default Code;
30 changes: 21 additions & 9 deletions docs/_shared/Example.tsx
@@ -1,8 +1,9 @@
import * as React from 'react';
import clsx from 'clsx';
import Code from './Code';
import CodeIcon from '@material-ui/icons/Code';
import CopyIcon from '@material-ui/icons/FileCopy';
import GithubIcon from '_shared/svgIcons/GithubIcon';
import React, { useState, useCallback, useMemo, useContext } from 'react';
import { copy } from 'utils/helpers';
import { GITHUB_EDIT_URL } from '_constants';
import { replaceGetFormatStrings } from 'utils/utilsService';
Expand All @@ -11,6 +12,8 @@ import { withUtilsService, UtilsContext } from './UtilsServiceContext';
import { makeStyles, IconButton, Collapse, Tooltip } from '@material-ui/core';

interface Props extends InjectedNotistackProps {
testId: string;
paddingBottom?: boolean;
source: { raw: string; relativePath: string; default: React.FC<any> };
}

Expand Down Expand Up @@ -43,6 +46,9 @@ const useStyles = makeStyles(theme => ({
},
},
},
paddingBottom: {
paddingBottom: 40,
},
sourceToolbar: {
display: 'flex',
},
Expand All @@ -59,28 +65,31 @@ const useStyles = makeStyles(theme => ({
},
}));

function Example({ source, enqueueSnackbar }: Props) {
function Example({ source, testId, paddingBottom, enqueueSnackbar }: Props) {
if (!source.default || !source.raw || !source.relativePath) {
throw new Error(
'Missing component or raw component code, you likely forgot to .example to your example extension'
);
}

const classes = useStyles();
const currentLib = useContext(UtilsContext).lib;
const [expanded, setExpanded] = useState(false);
const currentLib = React.useContext(UtilsContext).lib;
const [expanded, setExpanded] = React.useState(false);

const replacedSource = replaceGetFormatStrings(currentLib, source.raw);
const copySource = useCallback(
const copySource = React.useCallback(
() =>
copy(replacedSource).then(() =>
enqueueSnackbar('Source copied', { variant: 'success', autoHideDuration: 1000 })
),
[enqueueSnackbar, replacedSource]
);

// make each component rerender only on utils change
const Component = useMemo(() => withUtilsService(source.default), [source.default]);
// remount component only if utils change
const ExampleComponent = React.useMemo(
() => withUtilsService(source.default),
[currentLib, source.default] // eslint-disable-line
);

return (
<>
Expand Down Expand Up @@ -114,14 +123,17 @@ function Example({ source, enqueueSnackbar }: Props) {
</div>
</Collapse>

<div className={classes.pickers}>
<div
data-test-id={testId}
className={clsx(classes.pickers, { [classes.paddingBottom]: paddingBottom })}
>
<Tooltip title="Show/Hide the source">
<IconButton className={classes.sourceBtn} onClick={() => setExpanded(!expanded)}>
<CodeIcon />
</IconButton>
</Tooltip>

<Component />
<ExampleComponent key={currentLib} />
</div>
</>
);
Expand Down
15 changes: 11 additions & 4 deletions docs/_shared/PropTypesTable.tsx
@@ -1,4 +1,5 @@
import clsx from 'clsx';
import Code from './Code';
import FuzzySearch from 'fuzzy-search';
import PropTypesDoc from '../prop-types.json';
import SearchBar from 'material-ui-search-bar';
Expand All @@ -12,11 +13,10 @@ import {
TableRow,
makeStyles,
Typography,
Theme,
Grid,
} from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) => ({
const useStyles = makeStyles(theme => ({
header: {
marginTop: 24,
},
Expand Down Expand Up @@ -123,10 +123,17 @@ const PropTypesTableLazy: React.FC<PropTypesTableProps> = ({ disableHeader, src
[classes.required]: prop.required,
})}
>
{prop.required ? `${prop.name} *` : prop.name}
<Typography variant="body2">
{prop.required ? `${prop.name} *` : prop.name}{' '}
</Typography>
</TableCell>

<TableCell>
<Code inline language="typescript">
{prop.type.name}
</Code>
</TableCell>

<TableCell className={classes.type}>{prop.type.name}</TableCell>
<TableCell className={classes.defaultValue}>
<Typography align="center" variant="body1" component="span">
{prop.defaultValue && prop.defaultValue.value}
Expand Down
2 changes: 1 addition & 1 deletion docs/_shared/UtilsServiceContext.tsx
Expand Up @@ -7,7 +7,7 @@ export const UtilsContext = React.createContext<UtilsService>(createUtilsService
export const withUtilsService = <P extends UtilsService>(Component: React.ComponentType<P>) => {
const withUtilsService: React.SFC<Omit<P, keyof UtilsService>> = props => (
<UtilsContext.Consumer>
{service => <Component {...service} {...props as any} />}
{service => <Component {...service} {...(props as any)} />}
</UtilsContext.Consumer>
);

Expand Down
13 changes: 9 additions & 4 deletions docs/_shared/svgIcons/KawaiiIcon.tsx
Expand Up @@ -15,9 +15,13 @@ const icons = {
};

function getRandomIcon() {
const icon = getRandomItem(Object.keys(icons));
// @ts-ignore
return icons[icon];
if (process.browser && window.Cypress) {
return icons.ghost;
}

const icon = getRandomItem(Object.keys(icons));
return icons[icon as keyof typeof icons];
}

interface KawaiiIconProps extends KawaiiProps {
Expand All @@ -27,8 +31,9 @@ interface KawaiiIconProps extends KawaiiProps {

const KawaiiIcon: React.FunctionComponent<KawaiiIconProps> = ({ icon, size, ...other }) => {
const theme = useTheme();
const dimensionXs = useMediaQuery(theme.breakpoints.down('xs'));
const calculatedSize = size || dimensionXs ? 230 : 320;
const isXs = useMediaQuery(theme.breakpoints.down('xs'));
const calculatedSize = size || isXs ? 230 : 320;

const Component = React.useMemo(() => (icon ? icons[icon] : getRandomIcon()), [icon]);

return (
Expand Down
4 changes: 2 additions & 2 deletions docs/layout/Layout.tsx
Expand Up @@ -52,7 +52,7 @@ const styles = (theme: Theme) =>
},
main: {
padding: '20px',
paddingTop: 55,
paddingTop: 75,
minHeight: 'calc(100vh - 55px)',
[theme.breakpoints.up('md')]: {
minHeight: 'calc(100vh - 64px)',
Expand Down Expand Up @@ -160,7 +160,7 @@ class Layout extends Component<LayoutProps> {
</Menu>

<Tooltip title="Toggle light/dark theme" enterDelay={300}>
<IconButton color="inherit" onClick={toggleThemeType}>
<IconButton data-testid="toggle-theme-btn" color="inherit" onClick={toggleThemeType}>
<LightbulbOutlineIcon />
</IconButton>
</Tooltip>
Expand Down

0 comments on commit faa834a

Please sign in to comment.