diff --git a/docs/pages/regression/index.tsx b/docs/pages/regression/index.tsx index 09361c7e118084..df07c903136b53 100644 --- a/docs/pages/regression/index.tsx +++ b/docs/pages/regression/index.tsx @@ -8,7 +8,7 @@ import RightArrowIcon from '@material-ui/icons/KeyboardArrowRight'; function Regression() { const utils = useContext(MuiPickersContext); - const [date, changeDate] = useState(new Date('2019-01-01T00:00:00.000Z')); + const [date, changeDate] = useState(new Date('2019-01-01T00:00:00.000')); const sharedProps = { value: date, diff --git a/lib/package.json b/lib/package.json index 65135af460c272..08794f5fe8e577 100644 --- a/lib/package.json +++ b/lib/package.json @@ -44,7 +44,6 @@ "react-text-mask": "^5.4.3", "react-transition-group": "^2.5.3", "rifm": "^0.7.0", - "ts-jest": "^24.0.1", "tslib": "^1.9.3" }, "size-limit": [ @@ -111,7 +110,7 @@ "rollup-plugin-typescript": "^1.0.0", "rollup-plugin-uglify": "^6.0.2", "size-limit": "^0.21.1", - "ts-jest": "^23.10.5", + "ts-jest": "^24.0.1", "ts-lib": "0.0.5", "tslint": "^5.12.1", "tslint-config-prettier": "^1.18.0", diff --git a/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx b/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx index e746cd242702b0..d264c158607ab6 100644 --- a/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx +++ b/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx @@ -7,6 +7,7 @@ import createStyles from '@material-ui/core/styles/createStyles'; import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'; import PickerToolbar from '../../_shared/PickerToolbar'; import ToolbarButton from '../../_shared/ToolbarButton'; +import ToolbarText from '../../_shared/ToolbarText'; import { withUtils, WithUtilsProps } from '../../_shared/WithUtils'; import DateTimePickerView, { DateTimePickerViewType } from '../../constants/DateTimePickerView'; import { MaterialUiPickersDate } from '../../typings/date'; @@ -39,6 +40,10 @@ export const styles = (theme: Theme) => height: 60, minWidth: 110, marginRight: 4, + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'flex-start', }, timeHeader: { height: 65, @@ -50,6 +55,9 @@ export const styles = (theme: Theme) => ampmSelection: { top: 11, position: 'relative', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', marginLeft: 10, marginRight: -10, }, @@ -105,7 +113,7 @@ export const DateTimePickerHeader: React.SFC = ({ label={utils.getHourText(date, ampm!)} /> - + = ({ {ampm && (
diff --git a/lib/src/TimePicker/TimePickerRoot.tsx b/lib/src/TimePicker/TimePickerRoot.tsx index e5023f7abe8d90..e595faa7b63c03 100644 --- a/lib/src/TimePicker/TimePickerRoot.tsx +++ b/lib/src/TimePicker/TimePickerRoot.tsx @@ -13,6 +13,7 @@ import ClockType from '../constants/ClockType'; import { MeridiemMode } from '../DateTimePicker/components/DateTimePickerHeader'; import { MaterialUiPickersDate } from '../typings/date'; import TimePickerView from './components/TimePickerView'; +import ToolbarText from '../_shared/ToolbarText'; export interface BaseTimePickerProps { /** 12h/24h view for hour selection clock */ @@ -167,7 +168,7 @@ export class TimePickerRoot extends React.Component { label={utils.getHourText(date, Boolean(ampm))} /> - + { {seconds && ( - {
{ampm && ( -
+
@@ -248,6 +255,8 @@ export const styles = () => ampmSelection: { marginLeft: 20, marginRight: -20, + display: 'flex', + flexDirection: 'column', }, ampmSelectionWithSeconds: { marginLeft: 15, diff --git a/lib/src/__tests__/_shared/ToolbarText.test.tsx b/lib/src/__tests__/_shared/ToolbarText.test.tsx new file mode 100644 index 00000000000000..61ea2e6bd4e627 --- /dev/null +++ b/lib/src/__tests__/_shared/ToolbarText.test.tsx @@ -0,0 +1,16 @@ +import { ShallowWrapper } from 'enzyme'; +import * as React from 'react'; +import ToolbarText, { ToolbarTextProps } from '../../_shared/ToolbarText'; +import { shallow } from '../test-utils'; + +describe('Toolbar Text', () => { + let component: ShallowWrapper; + + beforeEach(() => { + component = shallow(); + }); + + it('Should render', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/lib/src/__tests__/e2e/DatePicker.test.tsx b/lib/src/__tests__/e2e/DatePicker.test.tsx index edf3010830c7d9..326536f421606e 100644 --- a/lib/src/__tests__/e2e/DatePicker.test.tsx +++ b/lib/src/__tests__/e2e/DatePicker.test.tsx @@ -9,7 +9,15 @@ describe('e2e - DatePicker default year format', () => { const date = utilsToUse.date('2018-01-01T00:00:00.000Z'); beforeEach(() => { - component = mount(); + jest.clearAllMocks(); + component = mount( + + ); }); it('Should use year format by default for year only view', () => { diff --git a/lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx b/lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx index 0f2dab7d29fbda..d880c911ab2746 100644 --- a/lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx +++ b/lib/src/__tests__/e2e/DateTimePickerRoot.test.tsx @@ -13,7 +13,7 @@ describe('e2e - DateTimePicker', () => { { it('Should render minutes view', () => { component .find('ToolbarButton') - .at(4) + .at(3) .simulate('click'); expect(component.find('TimePickerView').props().type).toBe('minutes'); }); @@ -60,7 +60,7 @@ describe('e2e - DateTimePicker', () => { it('Should change meridiem', () => { component .find('ToolbarButton') - .at(6) + .at(5) .simulate('click'); if (process.env.UTILS === 'moment') { diff --git a/lib/src/__tests__/e2e/TimePicker.test.tsx b/lib/src/__tests__/e2e/TimePicker.test.tsx index c1c2d67e17a646..778ab6b6fede6b 100644 --- a/lib/src/__tests__/e2e/TimePicker.test.tsx +++ b/lib/src/__tests__/e2e/TimePicker.test.tsx @@ -10,7 +10,7 @@ describe('e2e - TimePicker', () => { beforeEach(() => { jest.clearAllMocks(); component = mount( - + ); }); diff --git a/lib/src/_shared/ToolbarButton.tsx b/lib/src/_shared/ToolbarButton.tsx index 03968784b1d68a..c4af4d1a1ab5ee 100644 --- a/lib/src/_shared/ToolbarButton.tsx +++ b/lib/src/_shared/ToolbarButton.tsx @@ -1,32 +1,42 @@ -import { Theme } from '@material-ui/core'; -import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'; -import Typography, { TypographyProps } from '@material-ui/core/Typography'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core'; +import Button, { ButtonProps } from '@material-ui/core/Button'; +import { TypographyProps } from '@material-ui/core/Typography'; import clsx from 'clsx'; import * as PropTypes from 'prop-types'; import * as React from 'react'; + import { ExtendMui } from '../typings/extendMui'; +import ToolbarText from './ToolbarText'; -export interface ToolbarButtonProps extends ExtendMui, WithStyles { +export interface ToolbarButtonProps + extends ExtendMui, + WithStyles { + variant: TypographyProps['variant']; selected: boolean; label: string; + typographyClassName?: string; } -const ToolbarButton: React.SFC = ({ +const ToolbarButton: React.FunctionComponent = ({ classes, - selected, - label, className = null, + label, + selected, + variant, + typographyClassName, ...other -}) => ( - - {label} - -); +}) => { + return ( + + ); +}; (ToolbarButton as any).propTypes = { selected: PropTypes.bool.isRequired, @@ -40,13 +50,11 @@ ToolbarButton.defaultProps = { className: '', }; -export const styles = (theme: Theme) => ({ +export const styles = createStyles({ toolbarBtn: { - cursor: 'pointer', - color: 'rgba(255, 255, 255, 0.54)', - }, - toolbarBtnSelected: { - color: theme.palette.common.white, + padding: 0, + minWidth: '16px', + textTransform: 'none', }, }); diff --git a/lib/src/_shared/ToolbarText.tsx b/lib/src/_shared/ToolbarText.tsx new file mode 100644 index 00000000000000..2af162aa18a53d --- /dev/null +++ b/lib/src/_shared/ToolbarText.tsx @@ -0,0 +1,53 @@ +import { Theme } from '@material-ui/core'; +import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'; +import Typography, { TypographyProps } from '@material-ui/core/Typography'; +import clsx from 'clsx'; +import * as PropTypes from 'prop-types'; +import * as React from 'react'; +import { ExtendMui } from '../typings/extendMui'; + +export interface ToolbarTextProps extends ExtendMui, WithStyles { + selected: boolean; + label: string; +} + +// TODO make a styled(Typography) when updated to material-ui +const ToolbarText: React.FunctionComponent = ({ + classes, + selected, + label, + className = null, + ...other +}) => ( + + {label} + +); + +(ToolbarText as any).propTypes = { + selected: PropTypes.bool.isRequired, + label: PropTypes.string.isRequired, + classes: PropTypes.any.isRequired, + className: PropTypes.string, + innerRef: PropTypes.any, +}; + +ToolbarText.defaultProps = { + className: '', +}; + +export const styles = (theme: Theme) => ({ + toolbarTxt: { + color: 'rgba(255, 255, 255, 0.54)', + }, + toolbarBtnSelected: { + color: theme.palette.common.white, + }, +}); + +export default withStyles(styles, { name: 'MuiPickersToolbarText' })(ToolbarText);