@docsvision/material-ui-pickers 3.2.0-beta.25 → 3.2.0-beta.26

package/src/DatePicker/DatePickerToolbar.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import ToolbarButton from '../_shared/ToolbarButton';
+import PickerToolbar from '../_shared/PickerToolbar';
+import { useUtils } from '../_shared/hooks/useUtils';
+import { makeStyles } from '@material-ui/core/styles';
+import { ToolbarComponentProps } from '../Picker/Picker';
+import { isYearAndMonthViews, isYearOnlyView } from '../_helpers/date-utils';
+
+export const useStyles = makeStyles(
+  {
+    toolbar: {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    },
+    toolbarLandscape: {
+      padding: 16,
+    },
+    dateLandscape: {
+      marginRight: 16,
+    },
+  },
+  { name: 'MuiPickersDatePickerRoot' }
+);
+
+export const DatePickerToolbar: React.FC<ToolbarComponentProps> = ({
+  date,
+  views,
+  setOpenView,
+  isLandscape,
+  openView,
+}) => {
+  const utils = useUtils();
+  const classes = useStyles();
+
+  const isYearOnly = React.useMemo(() => isYearOnlyView(views as any), [views]);
+  const isYearAndMonth = React.useMemo(() => isYearAndMonthViews(views as any), [views]);
+
+  return (
+    <PickerToolbar
+      isLandscape={isLandscape}
+      className={clsx({
+        [classes.toolbar]: !isYearOnly,
+        [classes.toolbarLandscape]: isLandscape,
+      })}
+    >
+      <ToolbarButton
+        variant={isYearOnly ? 'h3' : 'subtitle1'}
+        onClick={() => setOpenView('year')}
+        selected={openView === 'year'}
+        label={utils.getYearText(date)}
+      />
+
+      {!isYearOnly && !isYearAndMonth && (
+        <ToolbarButton
+          variant="h4"
+          selected={openView === 'date'}
+          onClick={() => setOpenView('date')}
+          align={isLandscape ? 'left' : 'center'}
+          label={utils.getDatePickerHeaderText(date)}
+          className={clsx({ [classes.dateLandscape]: isLandscape })}
+        />
+      )}
+
+      {isYearAndMonth && (
+        <ToolbarButton
+          variant="h4"
+          onClick={() => setOpenView('month')}
+          selected={openView === 'month'}
+          label={utils.getMonthText(date)}
+        />
+      )}
+    </PickerToolbar>
+  );
+};

package/src/DatePicker/index.ts

@@ -0,0 +1,7 @@
+import { DatePickerProps, KeyboardDatePickerProps } from './DatePicker';
+
+export type DatePickerProps = DatePickerProps;
+
+export type KeyboardDatePickerProps = KeyboardDatePickerProps;
+
+export { KeyboardDatePicker, DatePicker } from './DatePicker';

package/src/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,72 @@
+import { useUtils } from '../_shared/hooks/useUtils';
+import { BaseDatePickerProps } from '../DatePicker/DatePicker';
+import { BaseTimePickerProps } from '../TimePicker/TimePicker';
+import { DateTimePickerToolbar } from './DateTimePickerToolbar';
+import { pick12hOr24hFormat } from '../_helpers/text-field-helper';
+import { dateTimePickerDefaultProps } from '../constants/prop-types';
+import { WrappedPurePickerProps, makePurePicker } from '../Picker/WrappedPurePicker';
+import { makeKeyboardPicker, WrappedKeyboardPickerProps } from '../Picker/WrappedKeyboardPicker';
+
+export type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes';
+
+export type BaseDateTimePickerProps = BaseTimePickerProps & BaseDatePickerProps;
+
+export interface DateTimePickerViewsProps extends BaseDateTimePickerProps {
+  /** Array of views to show */
+  views?: ('year' | 'date' | 'month' | 'hours' | 'minutes')[];
+  /** Open to DatePicker */
+  openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes';
+  /** To show tabs */
+  hideTabs?: boolean;
+  /** Date tab icon */
+  dateRangeIcon?: React.ReactNode;
+  /** Time tab icon */
+  timeIcon?: React.ReactNode;
+}
+
+export type DateTimePickerProps = WrappedPurePickerProps & DateTimePickerViewsProps;
+
+export type KeyboardDateTimePickerProps = WrappedKeyboardPickerProps & DateTimePickerViewsProps;
+
+const defaultProps = {
+  ...dateTimePickerDefaultProps,
+  showActionsBar: false,
+  todayLabel: 'TODAY',
+  wider: true,
+  orientation: 'portrait' as const,
+  openTo: 'date' as DateTimePickerView,
+  views: ['year', 'date', 'hours', 'minutes'] as DateTimePickerView[],
+};
+
+function useOptions(props: DateTimePickerProps | KeyboardDateTimePickerProps) {
+  const utils = useUtils();
+
+  if (props.orientation !== 'portrait') {
+    throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');
+  }
+
+  return {
+    getDefaultFormat: () =>
+      pick12hOr24hFormat(props.format, props.ampm, {
+        '12h': utils.dateTime12hFormat,
+        '24h': utils.dateTime24hFormat,
+      }),
+  };
+}
+
+export const DateTimePicker = makePurePicker<DateTimePickerProps>({
+  useOptions,
+  DefaultToolbarComponent: DateTimePickerToolbar,
+});
+
+export const KeyboardDateTimePicker = makeKeyboardPicker<KeyboardDateTimePickerProps>({
+  useOptions,
+  DefaultToolbarComponent: DateTimePickerToolbar,
+  getCustomProps: props => ({
+    refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi,
+  }),
+});
+
+DateTimePicker.defaultProps = defaultProps;
+
+KeyboardDateTimePicker.defaultProps = defaultProps;

package/src/DateTimePicker/DateTimePickerTabs.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import Paper from '@material-ui/core/Paper';
+import { TimeIcon } from '../_shared/icons/TimeIcon';
+import { DateTimePickerView } from './DateTimePicker';
+import { DateRangeIcon } from '../_shared/icons/DateRangeIcon';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+
+const viewToTabIndex = (openView: DateTimePickerView) => {
+  if (openView === 'date' || openView === 'year') {
+    return 'date';
+  }
+
+  return 'time';
+};
+
+const tabIndexToView = (tab: DateTimePickerView) => {
+  if (tab === 'date') {
+    return 'date';
+  }
+
+  return 'hours';
+};
+
+export interface DateTimePickerTabsProps {
+  view: DateTimePickerView;
+  onChange: (view: DateTimePickerView) => void;
+  dateRangeIcon?: React.ReactNode;
+  timeIcon?: React.ReactNode;
+}
+
+export const useStyles = makeStyles(
+  theme => {
+    // prettier-ignore
+    const tabsBackground = theme.palette.type === 'light'
+    ? theme.palette.primary.main
+    : theme.palette.background.default;
+
+    return {
+      tabs: {
+        color: theme.palette.getContrastText(tabsBackground),
+        backgroundColor: tabsBackground,
+      },
+    };
+  },
+  { name: 'MuiPickerDTTabs' }
+);
+
+export const DateTimePickerTabs: React.SFC<DateTimePickerTabsProps> = ({
+  view,
+  onChange,
+  dateRangeIcon,
+  timeIcon,
+}) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const indicatorColor = theme.palette.type === 'light' ? 'secondary' : 'primary';
+  const handleChange = (e: React.ChangeEvent<{}>, value: DateTimePickerView) => {
+    if (value !== viewToTabIndex(view)) {
+      onChange(tabIndexToView(value));
+    }
+  };
+
+  return (
+    <Paper>
+      <Tabs
+        variant="fullWidth"
+        value={viewToTabIndex(view)}
+        onChange={handleChange}
+        className={classes.tabs}
+        indicatorColor={indicatorColor}
+      >
+        <Tab value="date" icon={<>{dateRangeIcon}</>} />
+        <Tab value="time" icon={<>{timeIcon}</>} />
+      </Tabs>
+    </Paper>
+  );
+};
+
+DateTimePickerTabs.defaultProps = {
+  dateRangeIcon: <DateRangeIcon />,
+  timeIcon: <TimeIcon />,
+};
+
+export default DateTimePickerTabs;

package/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import ToolbarText from '../_shared/ToolbarText';
+import PickerToolbar from '../_shared/PickerToolbar';
+import ToolbarButton from '../_shared/ToolbarButton';
+import DateTimePickerTabs from './DateTimePickerTabs';
+import { Grid } from '@material-ui/core';
+import { useUtils } from '../_shared/hooks/useUtils';
+import { DateTimePickerView } from './DateTimePicker';
+import { ToolbarComponentProps } from '../Picker/Picker';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useMeridiemMode } from '../TimePicker/TimePickerToolbar';
+
+export const useStyles = makeStyles(
+  _ => ({
+    toolbar: {
+      paddingLeft: 16,
+      paddingRight: 16,
+      justifyContent: 'space-around',
+    },
+    separator: {
+      margin: '0 4px 0 2px',
+      cursor: 'default',
+    },
+  }),
+  { name: 'MuiPickerDTToolbar' }
+);
+
+export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
+  date,
+  openView,
+  setOpenView,
+  ampm,
+  hideTabs,
+  dateRangeIcon,
+  timeIcon,
+  onChange,
+}) => {
+  const utils = useUtils();
+  const classes = useStyles();
+  const showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
+  const { meridiemMode, handleMeridiemChange } = useMeridiemMode(date, ampm, onChange);
+  const theme = useTheme();
+  const rtl = theme.direction === 'rtl';
+
+  return (
+    <>
+      <PickerToolbar isLandscape={false} className={classes.toolbar}>
+        <Grid container justify="center" wrap="nowrap">
+          <Grid item container xs={5} justify="flex-start" direction="column">
+            <div>
+              <ToolbarButton
+                variant="subtitle1"
+                onClick={() => setOpenView('year')}
+                selected={openView === 'year'}
+                label={utils.getYearText(date)}
+              />
+            </div>
+            <div>
+              <ToolbarButton
+                variant="h4"
+                onClick={() => setOpenView('date')}
+                selected={openView === 'date'}
+                label={utils.getDateTimePickerHeaderText(date)}
+              />
+            </div>
+          </Grid>
+
+          <Grid
+            item
+            container
+            xs={6}
+            justify="center"
+            alignItems="flex-end"
+            direction={rtl ? 'row-reverse' : 'row'}
+          >
+            <ToolbarButton
+              variant="h3"
+              onClick={() => setOpenView('hours')}
+              selected={openView === 'hours'}
+              label={utils.getHourText(date, ampm!)}
+            />
+
+            <ToolbarText variant="h3" label=":" className={classes.separator} />
+
+            <ToolbarButton
+              variant="h3"
+              onClick={() => setOpenView('minutes')}
+              selected={openView === 'minutes'}
+              label={utils.getMinuteText(date)}
+            />
+          </Grid>
+
+          {ampm && (
+            <Grid item container xs={1} direction="column" justify="flex-end">
+              <ToolbarButton
+                variant="subtitle1"
+                selected={meridiemMode === 'am'}
+                label={utils.getMeridiemText('am')}
+                onClick={() => handleMeridiemChange('am')}
+              />
+
+              <ToolbarButton
+                variant="subtitle1"
+                selected={meridiemMode === 'pm'}
+                label={utils.getMeridiemText('pm')}
+                onClick={() => handleMeridiemChange('pm')}
+              />
+            </Grid>
+          )}
+        </Grid>
+      </PickerToolbar>
+
+      {showTabs && (
+        <DateTimePickerTabs
+          dateRangeIcon={dateRangeIcon}
+          timeIcon={timeIcon}
+          view={openView as DateTimePickerView}
+          onChange={setOpenView}
+        />
+      )}
+    </>
+  );
+};

package/src/DateTimePicker/index.ts

@@ -0,0 +1,7 @@
+import { DateTimePickerProps, KeyboardDateTimePickerProps } from './DateTimePicker';
+
+export type DateTimePickerProps = DateTimePickerProps;
+
+export type KeyboardDateTimePickerProps = KeyboardDateTimePickerProps;
+
+export { KeyboardDateTimePicker, DateTimePicker } from './DateTimePicker';

package/src/MuiPickersUtilsProvider.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { IUtils } from '@date-io/core/IUtils';
+import { MaterialUiPickersDate } from './typings/date';
+
+export const MuiPickersContext = React.createContext<IUtils<MaterialUiPickersDate> | null>(null);
+
+export interface MuiPickersUtilsProviderProps {
+  utils: any;
+  children: React.ReactNode;
+  locale?: any;
+  libInstance?: any;
+}
+
+export const MuiPickersUtilsProvider: React.FC<MuiPickersUtilsProviderProps> = ({
+  utils: Utils,
+  children,
+  locale,
+  libInstance,
+}) => {
+  const utils = React.useMemo(() => new Utils({ locale, moment: libInstance }), [
+    Utils,
+    libInstance,
+    locale,
+  ]);
+
+  return <MuiPickersContext.Provider value={utils} children={children} />;
+};
+
+MuiPickersUtilsProvider.propTypes = {
+  utils: PropTypes.func.isRequired,
+  locale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  children: PropTypes.oneOfType([
+    PropTypes.element.isRequired,
+    PropTypes.arrayOf(PropTypes.element.isRequired),
+  ]).isRequired,
+};
+
+export default MuiPickersUtilsProvider;

package/src/Picker/Picker.tsx

@@ -0,0 +1,275 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import Calendar from '../views/Calendar/Calendar';
+import { useUtils } from '../_shared/hooks/useUtils';
+import { useViews } from '../_shared/hooks/useViews';
+import { makeStyles } from '@material-ui/core/styles';
+import { YearSelection } from '../views/Year/YearView';
+import { MaterialUiPickersDate } from '../typings/date';
+import { BasePickerProps } from '../typings/BasePicker';
+import { TimePickerView } from '../views/Clock/ClockView';
+import { MonthSelection } from '../views/Month/MonthView';
+import { BaseTimePickerProps } from '../TimePicker/TimePicker';
+import { BaseDatePickerProps } from '../DatePicker/DatePicker';
+import { useIsLandscape } from '../_shared/hooks/useIsLandscape';
+import { datePickerDefaultProps } from '../constants/prop-types';
+import { DIALOG_WIDTH_WIDER, DIALOG_WIDTH, VIEW_HEIGHT } from '../constants/dimensions';
+import { DialogActions, Button } from '@material-ui/core';
+
+const viewsMap = {
+  year: YearSelection,
+  month: MonthSelection,
+  date: Calendar,
+  hours: TimePickerView,
+  minutes: TimePickerView,
+  seconds: TimePickerView,
+};
+
+export type PickerView = keyof typeof viewsMap;
+
+export type ToolbarComponentProps = BaseDatePickerProps &
+  BaseTimePickerProps & {
+    views: PickerView[];
+    openView: PickerView;
+    date: MaterialUiPickersDate;
+    setOpenView: (view: PickerView) => void;
+    onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
+    // TODO move out, cause it is DateTimePickerOnly
+    hideTabs?: boolean;
+    dateRangeIcon?: React.ReactNode;
+    timeIcon?: React.ReactNode;
+    isLandscape: boolean;
+  };
+
+export interface PickerViewProps extends BaseDatePickerProps, BaseTimePickerProps {
+  views: PickerView[];
+  openTo: PickerView;
+  disableToolbar?: boolean;
+  ToolbarComponent: React.ComponentType<ToolbarComponentProps>;
+  // TODO move out, cause it is DateTimePickerOnly
+  hideTabs?: boolean;
+  dateRangeIcon?: React.ReactNode;
+  timeIcon?: React.ReactNode;
+}
+
+interface PickerProps extends PickerViewProps {
+  date: MaterialUiPickersDate;
+  orientation?: BasePickerProps['orientation'];
+  onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
+  showActionsBar?: boolean;
+  showTodayButton?: boolean;
+  todayLabel?: string;
+  showShiftButtons?: boolean;
+  setShiftFunction?: (days: number) => Date;
+  shiftButtonValues?: Object;
+  onSetToday?: () => void;
+  onSetShift?: (shiftDate: Date) => void;
+}
+
+const useStyles = makeStyles(
+  {
+    container: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    containerLandscape: {
+      flexDirection: 'row',
+    },
+    pickerView: {
+      overflowX: 'hidden',
+      minHeight: VIEW_HEIGHT,
+      minWidth: DIALOG_WIDTH,
+      maxWidth: DIALOG_WIDTH_WIDER,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
+    pickerViewLandscape: {
+      padding: '0 8px',
+    },
+  },
+  { name: 'MuiPickersBasePicker' }
+);
+
+const useButtonsStyles = makeStyles(
+  {
+    root: {
+      minWidth: 32,
+    },
+  },
+  { name: 'MuiButtonBase' }
+);
+
+export const useDialogActionsStyles = makeStyles({
+  withAdditionalAction: {},
+});
+
+export const Picker: React.FunctionComponent<PickerProps> = props => {
+  const {
+    date,
+    ampm,
+    views,
+    disableToolbar,
+    disablePast,
+    disableFuture,
+    hideTabs,
+    onChange,
+    openTo,
+    minutesStep,
+    dateRangeIcon,
+    timeIcon,
+    minDate: unparsedMinDate,
+    maxDate: unparsedMaxDate,
+    animateYearScrolling,
+    leftArrowIcon,
+    rightArrowIcon,
+    renderDay,
+    shouldDisableDate,
+    allowKeyboardControl,
+    onMonthChange,
+    onYearChange,
+    leftArrowButtonProps,
+    rightArrowButtonProps,
+    ToolbarComponent,
+    loadingIndicator,
+    orientation,
+    showActionsBar,
+    onSetToday,
+    showTodayButton,
+    todayLabel,
+    onSetShift,
+    showShiftButtons,
+    setShiftFunction,
+    shiftButtonValues,
+  } = props;
+
+  const utils = useUtils();
+  const classes = useStyles();
+  const buttonClasses = useButtonsStyles();
+  const dialogActionsClasses = useDialogActionsStyles();
+  const isLandscape = useIsLandscape(orientation);
+  const { openView, setOpenView, handleChangeAndOpenNext } = useViews(views, openTo, onChange);
+
+  const minDate = React.useMemo(() => utils.date(unparsedMinDate)!, [unparsedMinDate, utils]);
+  const maxDate = React.useMemo(() => utils.date(unparsedMaxDate)!, [unparsedMaxDate, utils]);
+
+  let shiftButtons = new Array();
+  if (showShiftButtons && setShiftFunction && onSetShift && shiftButtonValues) {
+    for (let key in shiftButtonValues) {
+      shiftButtons.push(
+        <Button
+          color="primary"
+          onClick={() => onSetShift(setShiftFunction(parseInt(key)))}
+          key={shiftButtonValues[key]}
+        >
+          {parseInt(key) > 0 ? '+' : ''}
+          {shiftButtonValues[key]}
+        </Button>
+      );
+    }
+  }
+
+  return (
+    <div
+      className={clsx(classes.container, {
+        [classes.containerLandscape]: isLandscape,
+      })}
+    >
+      {!disableToolbar && (
+        <ToolbarComponent
+          date={date}
+          onChange={onChange}
+          setOpenView={setOpenView}
+          openView={openView}
+          hideTabs={hideTabs}
+          dateRangeIcon={dateRangeIcon}
+          timeIcon={timeIcon}
+          isLandscape={isLandscape}
+          {...props}
+        />
+      )}
+
+      <div className={clsx(classes.pickerView, { [classes.pickerViewLandscape]: isLandscape })}>
+        {openView === 'year' && (
+          <YearSelection
+            date={date}
+            onChange={handleChangeAndOpenNext}
+            minDate={minDate}
+            maxDate={maxDate}
+            disablePast={disablePast}
+            disableFuture={disableFuture}
+            onYearChange={onYearChange}
+            animateYearScrolling={animateYearScrolling}
+          />
+        )}
+
+        {openView === 'month' && (
+          <MonthSelection
+            date={date}
+            onChange={handleChangeAndOpenNext}
+            minDate={minDate}
+            maxDate={maxDate}
+            disablePast={disablePast}
+            disableFuture={disableFuture}
+            onMonthChange={onMonthChange}
+          />
+        )}
+
+        {openView === 'date' && (
+          <Calendar
+            date={date}
+            onChange={handleChangeAndOpenNext}
+            onMonthChange={onMonthChange}
+            disablePast={disablePast}
+            disableFuture={disableFuture}
+            minDate={minDate}
+            maxDate={maxDate}
+            leftArrowIcon={leftArrowIcon}
+            leftArrowButtonProps={leftArrowButtonProps}
+            rightArrowIcon={rightArrowIcon}
+            rightArrowButtonProps={rightArrowButtonProps}
+            renderDay={renderDay}
+            shouldDisableDate={shouldDisableDate}
+            allowKeyboardControl={allowKeyboardControl}
+            loadingIndicator={loadingIndicator}
+          />
+        )}
+
+        {(openView === 'hours' || openView === 'minutes' || openView === 'seconds') && (
+          <TimePickerView
+            date={date}
+            ampm={ampm}
+            type={openView}
+            minutesStep={minutesStep}
+            onHourChange={handleChangeAndOpenNext}
+            onMinutesChange={handleChangeAndOpenNext}
+            onSecondsChange={handleChangeAndOpenNext}
+          />
+        )}
+      </div>
+
+      {showActionsBar && (
+        <DialogActions
+          classes={{
+            root: clsx({
+              [dialogActionsClasses.withAdditionalAction]: showTodayButton,
+            }),
+          }}
+        >
+          {showTodayButton && (
+            <Button color="primary" onClick={onSetToday} key="today">
+              {todayLabel}
+            </Button>
+          )}
+
+          {showShiftButtons && setShiftFunction && shiftButtons}
+        </DialogActions>
+      )}
+    </div>
+  );
+};
+
+Picker.defaultProps = {
+  ...datePickerDefaultProps,
+  views: Object.keys(viewsMap),
+} as any;