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

package/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsvision/material-ui-pickers",
-  "version": "3.2.0-beta.24",
+  "version": "3.2.0-beta.26",
   "description": "Fork @material-ui/pickers that implements advanced features required for DocsVision WebClient. Original repository https://github.com/mui-org/material-ui-pickers",
   "keywords": [
     "material-ui",

package/build/views/Calendar/Calendar.js

@@ -79,7 +79,7 @@ var Calendar = /** @class */ (function (_super) {
             var now = utils.date();
             var moment = utils.moment;
             return Boolean((disableFuture && utils.isAfterDay(day, now)) ||
-                (disablePast && moment(day).isBefore(now, "second")) ||
+                (disablePast && moment(day).isBefore(now, 'second')) ||
                 (minDate && utils.isBeforeDay(day, utils.date(minDate))) ||
                 (maxDate && utils.isAfterDay(day, utils.date(maxDate))));
         };
@@ -195,7 +195,7 @@ var Calendar = /** @class */ (function (_super) {
     };
     Calendar.defaultProps = {
         minDate: new Date('1900-01-01'),
-        maxDate: new Date('2100-01-01'),
+        maxDate: new Date('2200-01-01'),
         disablePast: false,
         disableFuture: false,
         allowKeyboardControl: true,

package/build/views/Clock/Clock.d.ts

@@ -24,6 +24,6 @@ export declare class Clock extends React.Component<ClockProps> {
     hasSelected: () => boolean;
     render(): JSX.Element;
 }
-export declare const styles: (theme: Theme) => Record<"container" | "clock" | "squareMask" | "pin", import("@material-ui/core/styles/withStyles").CSSProperties>;
+export declare const styles: (theme: Theme) => Record<"container" | "clock" | "squareMask" | "pin", import("@material-ui/styles").CSSProperties | (() => import("@material-ui/styles").CSSProperties)>;
 declare const _default: React.ComponentType<(Pick<ClockProps, "children" | "onChange" | "type" | "value" | "ampm" | "minutesStep"> & import("@material-ui/core/styles").StyledComponentProps<"container" | "clock" | "squareMask" | "pin">) | (Pick<React.PropsWithChildren<ClockProps>, "children" | "onChange" | "type" | "value" | "ampm" | "minutesStep"> & import("@material-ui/core/styles").StyledComponentProps<"container" | "clock" | "squareMask" | "pin">)>;
 export default _default;

package/build/views/Clock/ClockPointer.d.ts

@@ -26,6 +26,6 @@ export declare class ClockPointer extends React.Component<ClockPointerProps> {
     };
     render(): JSX.Element;
 }
-export declare const styles: (theme: Theme) => Record<"animateTransform" | "pointer" | "thumb" | "noPoint", import("@material-ui/core/styles/withStyles").CSSProperties>;
+export declare const styles: (theme: Theme) => Record<"animateTransform" | "pointer" | "thumb" | "noPoint", import("@material-ui/styles").CSSProperties | (() => import("@material-ui/styles").CSSProperties)>;
 declare const _default: React.ComponentType<(Pick<ClockPointerProps, "type" | "value" | "hasSelected" | "isInner"> & import("@material-ui/core").StyledComponentProps<"animateTransform" | "pointer" | "thumb" | "noPoint">) | (Pick<React.PropsWithChildren<ClockPointerProps>, "children" | "type" | "value" | "hasSelected" | "isInner"> & import("@material-ui/core").StyledComponentProps<"animateTransform" | "pointer" | "thumb" | "noPoint">)>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsvision/material-ui-pickers",
-  "version": "3.2.0-beta.24",
+  "version": "3.2.0-beta.26",
   "description": "Fork @material-ui/pickers that implements advanced features required for DocsVision WebClient. Original repository https://github.com/mui-org/material-ui-pickers",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,91 @@
+import { useUtils } from '../_shared/hooks/useUtils';
+import { DatePickerToolbar } from './DatePickerToolbar';
+import { MaterialUiPickersDate } from '../typings/date';
+import { getFormatByViews } from '../_helpers/date-utils';
+import { OutterCalendarProps } from '../views/Calendar/Calendar';
+import { datePickerDefaultProps, ParsableDate } from '../constants/prop-types';
+import { WrappedPurePickerProps, makePurePicker } from '../Picker/WrappedPurePicker';
+import { makeKeyboardPicker, WrappedKeyboardPickerProps } from '../Picker/WrappedKeyboardPicker';
+
+export type DatePickerView = 'year' | 'date' | 'month';
+
+export interface BaseDatePickerProps extends OutterCalendarProps {
+  /**
+   * Min selectable date
+   * @default Date(1900-01-01)
+   */
+  minDate?: ParsableDate;
+  /**
+   * Max selectable date
+   * @default Date(2200-01-01)
+   */
+  maxDate?: ParsableDate;
+
+  /**
+   * Compare dates by the exact timestamp, instead of start/end of date
+   * @default false
+   */
+  strictCompareDates?: boolean;
+
+  /**
+   * Disable past dates
+   * @default false
+   */
+  disablePast?: boolean;
+  /**
+   * Disable future dates
+   * @default false
+   */
+  disableFuture?: boolean;
+  /**
+   * To animate scrolling to current year (using scrollIntoView)
+   * @default false
+   */
+  animateYearScrolling?: boolean;
+  /** Callback firing on year change */
+  onYearChange?: (date: MaterialUiPickersDate) => void;
+}
+
+export interface DatePickerViewsProps extends BaseDatePickerProps {
+  /**
+   * Array of views to show
+   * @type {Array<"year" | "date" | "month">}
+   */
+  views?: DatePickerView[];
+  /** Open to DatePicker */
+  openTo?: DatePickerView;
+}
+
+export type DatePickerProps = WrappedPurePickerProps & DatePickerViewsProps;
+
+export type KeyboardDatePickerProps = WrappedKeyboardPickerProps & DatePickerViewsProps;
+
+const defaultProps = {
+  ...datePickerDefaultProps,
+  openTo: 'date' as DatePickerView,
+  views: ['year', 'date'] as DatePickerView[],
+  showActionsBar: false,
+  todayLabel: 'TODAY',
+};
+
+function useOptions(props: DatePickerViewsProps) {
+  const utils = useUtils();
+
+  return {
+    getDefaultFormat: () => getFormatByViews(props.views!, utils),
+  };
+}
+
+export const DatePicker = makePurePicker<DatePickerViewsProps>({
+  useOptions,
+  DefaultToolbarComponent: DatePickerToolbar,
+});
+
+export const KeyboardDatePicker = makeKeyboardPicker<DatePickerViewsProps>({
+  useOptions,
+  DefaultToolbarComponent: DatePickerToolbar,
+});
+
+DatePicker.defaultProps = defaultProps;
+
+KeyboardDatePicker.defaultProps = defaultProps;

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;