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

package/src/views/Clock/ClockView.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import Clock from './Clock';
+import ClockType, { ClockViewType } from '../../constants/ClockType';
+import { useUtils } from '../../_shared/hooks/useUtils';
+import { MaterialUiPickersDate } from '../../typings/date';
+import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
+import { convertToMeridiem, getMeridiem } from '../../_helpers/time-utils';
+
+export interface TimePickerViewProps {
+  /** TimePicker value */
+  date: MaterialUiPickersDate;
+  /** Clock type */
+  type: ClockViewType;
+  /** 12h/24h clock mode */
+  ampm?: boolean;
+  /** Minutes step */
+  minutesStep?: number;
+  /** On hour change */
+  onHourChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
+  /** On minutes change */
+  onMinutesChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
+  /** On seconds change */
+  onSecondsChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
+}
+
+export const TimePickerView: React.FC<TimePickerViewProps> = ({
+  type,
+  onHourChange,
+  onMinutesChange,
+  onSecondsChange,
+  ampm,
+  date,
+  minutesStep,
+}) => {
+  const utils = useUtils();
+  const viewProps = React.useMemo(() => {
+    switch (type) {
+      case ClockType.HOURS:
+        return {
+          value: utils.getHours(date),
+          children: getHourNumbers({ date, utils, ampm: Boolean(ampm) }),
+          onChange: (value: number, isFinish?: boolean) => {
+            const currentMeridiem = getMeridiem(date, utils);
+            const updatedTimeWithMeridiem = convertToMeridiem(
+              utils.setHours(date, value),
+              currentMeridiem,
+              Boolean(ampm),
+              utils
+            );
+
+            onHourChange(updatedTimeWithMeridiem, isFinish);
+          },
+        };
+
+      case ClockType.MINUTES:
+        const minutesValue = utils.getMinutes(date);
+        return {
+          value: minutesValue,
+          children: getMinutesNumbers({ value: minutesValue, utils }),
+          onChange: (value: number, isFinish?: boolean) => {
+            const updatedTime = utils.setMinutes(date, value);
+
+            onMinutesChange(updatedTime, isFinish);
+          },
+        };
+
+      case ClockType.SECONDS:
+        const secondsValue = utils.getSeconds(date);
+        return {
+          value: secondsValue,
+          children: getMinutesNumbers({ value: secondsValue, utils }),
+          onChange: (value: number, isFinish?: boolean) => {
+            const updatedTime = utils.setSeconds(date, value);
+
+            onSecondsChange(updatedTime, isFinish);
+          },
+        };
+
+      default:
+        throw new Error('You must provide the type for TimePickerView');
+    }
+  }, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);
+
+  return <Clock type={type} ampm={ampm} minutesStep={minutesStep} {...viewProps} />;
+};
+
+TimePickerView.displayName = 'TimePickerView';
+
+TimePickerView.propTypes = {
+  date: PropTypes.object.isRequired,
+  onHourChange: PropTypes.func.isRequired,
+  onMinutesChange: PropTypes.func.isRequired,
+  onSecondsChange: PropTypes.func.isRequired,
+  ampm: PropTypes.bool,
+  minutesStep: PropTypes.number,
+  type: PropTypes.oneOf(Object.keys(ClockType).map(key => ClockType[key as any])).isRequired,
+} as any;
+
+TimePickerView.defaultProps = {
+  ampm: true,
+  minutesStep: 1,
+};
+
+export default React.memo(TimePickerView);

package/src/views/Month/Month.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+export interface MonthProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onSelect: (value: any) => void;
+  selected?: boolean;
+  value: any;
+}
+
+export const useStyles = makeStyles(
+  theme => ({
+    root: {
+      flex: '1 0 33.33%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      outline: 'none',
+      height: 75,
+      transition: theme.transitions.create('font-size', { duration: '100ms' }),
+      '&:focus': {
+        color: theme.palette.primary.main,
+        fontWeight: theme.typography.fontWeightMedium,
+      },
+    },
+    monthSelected: {
+      color: theme.palette.primary.main,
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+    monthDisabled: {
+      pointerEvents: 'none',
+      color: theme.palette.text.hint,
+    },
+  }),
+  { name: 'MuiPickersMonth' }
+);
+
+export const Month: React.FC<MonthProps> = ({
+  selected,
+  onSelect,
+  disabled,
+  value,
+  children,
+  ...other
+}) => {
+  const classes = useStyles();
+  const handleSelection = React.useCallback(() => {
+    onSelect(value);
+  }, [onSelect, value]);
+
+  return (
+    <Typography
+      role="button"
+      component="div"
+      className={clsx(classes.root, {
+        [classes.monthSelected]: selected,
+        [classes.monthDisabled]: disabled,
+      })}
+      tabIndex={disabled ? -1 : 0}
+      onClick={handleSelection}
+      onKeyPress={handleSelection}
+      color={selected ? 'primary' : undefined}
+      variant={selected ? 'h5' : 'subtitle1'}
+      children={children}
+      {...other}
+    />
+  );
+};
+
+Month.displayName = 'Month';
+
+export default Month;

package/src/views/Month/MonthView.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import Month from './Month';
+import { makeStyles } from '@material-ui/core/styles';
+import { useUtils } from '../../_shared/hooks/useUtils';
+import { ParsableDate } from '../../constants/prop-types';
+import { MaterialUiPickersDate } from '../../typings/date';
+
+export interface MonthSelectionProps {
+  date: MaterialUiPickersDate;
+  minDate?: ParsableDate;
+  maxDate?: ParsableDate;
+  onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void;
+  disablePast?: boolean | null | undefined;
+  disableFuture?: boolean | null | undefined;
+  onMonthChange?: (date: MaterialUiPickersDate) => void | Promise<void>;
+}
+
+export const useStyles = makeStyles(
+  {
+    container: {
+      width: 310,
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignContent: 'stretch',
+    },
+  },
+  { name: 'MuiPickersMonthSelection' }
+);
+
+export const MonthSelection: React.FC<MonthSelectionProps> = ({
+  disablePast,
+  disableFuture,
+  minDate,
+  maxDate,
+  date,
+  onMonthChange,
+  onChange,
+}) => {
+  const utils = useUtils();
+  const classes = useStyles();
+  const currentMonth = utils.getMonth(date);
+
+  const shouldDisableMonth = (month: MaterialUiPickersDate) => {
+    const now = utils.date();
+    const utilMinDate = utils.date(minDate);
+    const utilMaxDate = utils.date(maxDate);
+
+    const firstEnabledMonth = utils.startOfMonth(
+      disablePast && utils.isAfter(now, utilMinDate) ? now : utilMinDate
+    );
+
+    const lastEnabledMonth = utils.startOfMonth(
+      disableFuture && utils.isBefore(now, utilMaxDate) ? now : utilMaxDate
+    );
+
+    const isBeforeFirstEnabled = utils.isBefore(month, firstEnabledMonth);
+    const isAfterLastEnabled = utils.isAfter(month, lastEnabledMonth);
+
+    return isBeforeFirstEnabled || isAfterLastEnabled;
+  };
+
+  const onMonthSelect = React.useCallback(
+    (month: number) => {
+      const newDate = utils.setMonth(date, month);
+
+      onChange(newDate, true);
+      if (onMonthChange) {
+        onMonthChange(newDate);
+      }
+    },
+    [date, onChange, onMonthChange, utils]
+  );
+
+  return (
+    <div className={classes.container}>
+      {utils.getMonthArray(date).map(month => {
+        const monthNumber = utils.getMonth(month);
+        const monthText = utils.format(month, 'MMM');
+
+        return (
+          <Month
+            key={monthText}
+            value={monthNumber}
+            selected={monthNumber === currentMonth}
+            onSelect={onMonthSelect}
+            disabled={shouldDisableMonth(month)}
+          >
+            {monthText}
+          </Month>
+        );
+      })}
+    </div>
+  );
+};

package/src/views/Year/Year.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+export interface YearProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onSelect: (value: any) => void;
+  selected?: boolean;
+  value: any;
+  forwardedRef?: React.Ref<HTMLElement | null>;
+}
+
+export const useStyles = makeStyles(
+  theme => ({
+    root: {
+      height: 40,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      outline: 'none',
+      '&:focus': {
+        color: theme.palette.primary.main,
+        fontWeight: theme.typography.fontWeightMedium,
+      },
+    },
+    yearSelected: {
+      margin: '10px 0',
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+    yearDisabled: {
+      pointerEvents: 'none',
+      color: theme.palette.text.hint,
+    },
+  }),
+  { name: 'MuiPickersYear' }
+);
+
+export const Year: React.FC<YearProps> = ({
+  onSelect,
+  forwardedRef,
+  value,
+  selected,
+  disabled,
+  children,
+  ...other
+}) => {
+  const classes = useStyles();
+  const handleClick = React.useCallback(() => onSelect(value), [onSelect, value]);
+
+  return (
+    <Typography
+      role="button"
+      component="div"
+      tabIndex={disabled ? -1 : 0}
+      onClick={handleClick}
+      onKeyPress={handleClick}
+      color={selected ? 'primary' : undefined}
+      variant={selected ? 'h5' : 'subtitle1'}
+      children={children}
+      ref={forwardedRef}
+      className={clsx(classes.root, {
+        [classes.yearSelected]: selected,
+        [classes.yearDisabled]: disabled,
+      })}
+      {...other}
+    />
+  );
+};
+
+Year.displayName = 'Year';
+
+export default React.forwardRef<HTMLElement, YearProps>((props, ref) => (
+  <Year {...props} forwardedRef={ref} />
+));

package/src/views/Year/YearView.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import Year from './Year';
+import { DateType } from '@date-io/type';
+import { makeStyles } from '@material-ui/core/styles';
+import { useUtils } from '../../_shared/hooks/useUtils';
+import { VariantContext } from '../../wrappers/Wrapper';
+import { MaterialUiPickersDate } from '../../typings/date';
+
+export interface YearSelectionProps {
+  date: MaterialUiPickersDate;
+  minDate: DateType;
+  maxDate: DateType;
+  onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void;
+  disablePast?: boolean | null | undefined;
+  disableFuture?: boolean | null | undefined;
+  animateYearScrolling?: boolean | null | undefined;
+  onYearChange?: (date: MaterialUiPickersDate) => void;
+}
+
+export const useStyles = makeStyles(
+  {
+    container: {
+      height: 300,
+      overflowY: 'auto',
+    },
+  },
+  { name: 'MuiPickersYearSelection' }
+);
+
+export const YearSelection: React.FC<YearSelectionProps> = ({
+  date,
+  onChange,
+  onYearChange,
+  minDate,
+  maxDate,
+  disablePast,
+  disableFuture,
+  animateYearScrolling,
+}) => {
+  const utils = useUtils();
+  const classes = useStyles();
+  const currentVariant = React.useContext(VariantContext);
+  const selectedYearRef = React.useRef<HTMLElement>(null);
+
+  React.useEffect(() => {
+    if (selectedYearRef.current && selectedYearRef.current.scrollIntoView) {
+      selectedYearRef.current.scrollIntoView({
+        block: currentVariant === 'static' ? 'nearest' : 'center',
+        behavior: animateYearScrolling ? 'smooth' : 'auto',
+      });
+    }
+  }, []); // eslint-disable-line
+
+  const currentYear = utils.getYear(date);
+  const onYearSelect = React.useCallback(
+    (year: number) => {
+      const newDate = utils.setYear(date, year);
+      if (onYearChange) {
+        onYearChange(newDate);
+      }
+
+      onChange(newDate, true);
+    },
+    [date, onChange, onYearChange, utils]
+  );
+
+  return (
+    <div className={classes.container}>
+      {utils.getYearRange(minDate, maxDate).map(year => {
+        const yearNumber = utils.getYear(year);
+        const selected = yearNumber === currentYear;
+
+        return (
+          <Year
+            key={utils.getYearText(year)}
+            selected={selected}
+            value={yearNumber}
+            onSelect={onYearSelect}
+            ref={selected ? selectedYearRef : undefined}
+            disabled={Boolean(
+              (disablePast && utils.isBeforeYear(year, utils.date())) ||
+                (disableFuture && utils.isAfterYear(year, utils.date()))
+            )}
+          >
+            {utils.getYearText(year)}
+          </Year>
+        );
+      })}
+    </div>
+  );
+};

package/src/wrappers/InlineWrapper.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import clsx from 'clsx';
+import Popover, { PopoverProps as PopoverPropsType } from '@material-ui/core/Popover';
+import { WrapperProps } from './Wrapper';
+import { makeStyles } from '@material-ui/core/styles';
+import { useKeyDown } from '../_shared/hooks/useKeyDown';
+import { TextFieldProps } from '@material-ui/core/TextField';
+import { DIALOG_WIDTH, DIALOG_WIDTH_WIDER } from '../constants/dimensions';
+
+export const useStyles = makeStyles(
+  {
+    popoverPaper: {
+      width: DIALOG_WIDTH,
+      paddingBottom: 8,
+    },
+    popoverPaperWider: {
+      width: DIALOG_WIDTH_WIDER,
+    },
+  },
+  { name: 'MuiPickersInlineWrapper' }
+);
+
+export interface InlineWrapperProps<T = TextFieldProps> extends WrapperProps<T> {
+  /** Popover props passed to material-ui Popover (with variant="inline") */
+  PopoverProps?: Partial<PopoverPropsType>;
+}
+
+export const InlineWrapper: React.FC<InlineWrapperProps> = ({
+  open,
+  wider,
+  children,
+  PopoverProps,
+  onClear,
+  onDismiss,
+  onSetToday,
+  onAccept,
+  showTabs,
+  DateInputProps,
+  InputComponent,
+  ...other
+}) => {
+  const ref = React.useRef();
+  const classes = useStyles();
+
+  useKeyDown(open, {
+    Enter: onAccept,
+  });
+
+  return (
+    <React.Fragment>
+      <InputComponent {...other} {...DateInputProps} inputRef={ref} />
+
+      <Popover
+        open={open}
+        onClose={onDismiss}
+        anchorEl={ref.current}
+        classes={{
+          paper: clsx(classes.popoverPaper, { [classes.popoverPaperWider]: wider }),
+        }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        children={children}
+        {...PopoverProps}
+      />
+    </React.Fragment>
+  );
+};
+
+InlineWrapper.propTypes = {
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  PopoverProps: PropTypes.object,
+} as any;

package/src/wrappers/ModalWrapper.tsx

@@ -0,0 +1,113 @@
+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 { useKeyDown } from '../_shared/hooks/useKeyDown';
+import { DialogProps as MuiDialogProps } from '@material-ui/core/Dialog';
+
+export interface ModalWrapperProps<T = {}> extends WrapperProps<T> {
+  /**
+   * "OK" label message
+   * @default "OK"
+   */
+  okLabel?: React.ReactNode;
+  /**
+   * "CANCEL" label message
+   * @default "CANCEL"
+   */
+  cancelLabel?: React.ReactNode;
+  /**
+   * "CLEAR" label message
+   * @default "CLEAR"
+   */
+  clearLabel?: React.ReactNode;
+  /**
+   * "TODAY" label message
+   * @default "TODAY"
+   */
+  todayLabel?: React.ReactNode;
+  /**
+   * If true today button will be displayed <b>Note*</b> that clear button has higher priority
+   * @default false
+   */
+  showTodayButton?: boolean;
+  /**
+   * Show clear action in picker dialog
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Props to be passed directly to material-ui Dialog
+   * @type {Partial<MuiDialogProps>}
+   */
+  DialogProps?: Partial<Omit<MuiDialogProps, 'classes'>>;
+}
+
+export const ModalWrapper: React.FC<ModalWrapperProps<any>> = ({
+  open,
+  children,
+  okLabel,
+  cancelLabel,
+  clearLabel,
+  todayLabel,
+  showTodayButton,
+  clearable,
+  DialogProps,
+  showTabs,
+  wider,
+  InputComponent,
+  DateInputProps,
+  onClear,
+  onAccept,
+  onDismiss,
+  onSetToday,
+  ...other
+}) => {
+  useKeyDown(open, {
+    Enter: onAccept,
+  });
+
+  return (
+    <React.Fragment>
+      <InputComponent {...other} {...DateInputProps} />
+
+      <ModalDialog
+        wider={wider}
+        showTabs={showTabs}
+        open={open}
+        onClear={onClear}
+        onAccept={onAccept}
+        onDismiss={onDismiss}
+        onSetToday={onSetToday}
+        clearLabel={clearLabel}
+        todayLabel={todayLabel}
+        okLabel={okLabel}
+        cancelLabel={cancelLabel}
+        clearable={clearable}
+        showTodayButton={showTodayButton}
+        children={children}
+        {...DialogProps}
+      />
+    </React.Fragment>
+  );
+};
+
+ModalWrapper.propTypes = {
+  okLabel: PropTypes.node,
+  cancelLabel: PropTypes.node,
+  clearLabel: PropTypes.node,
+  clearable: PropTypes.bool,
+  todayLabel: PropTypes.node,
+  showTodayButton: PropTypes.bool,
+  DialogProps: PropTypes.object,
+} as any;
+
+ModalWrapper.defaultProps = {
+  okLabel: 'OK',
+  cancelLabel: 'Cancel',
+  clearLabel: 'Clear',
+  todayLabel: 'Today',
+  clearable: false,
+  showTodayButton: false,
+};

package/src/wrappers/StaticWrapper.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core';
+import { DIALOG_WIDTH } from '../constants/dimensions';
+
+const useStyles = makeStyles(
+  theme => ({
+    staticWrapperRoot: {
+      overflow: 'hidden',
+      minWidth: DIALOG_WIDTH,
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: theme.palette.background.paper,
+    },
+  }),
+  { name: 'MuiPickersStaticWrapper' }
+);
+
+export const StaticWrapper: React.FC = ({ children }) => {
+  const classes = useStyles();
+
+  return <div className={classes.staticWrapperRoot} children={children} />;
+};