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

package/src/DatePicker/DatePickerToolbar.tsx

@@ -1,75 +0,0 @@
-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

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

package/src/DateTimePicker/DateTimePicker.tsx

@@ -1,72 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

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

package/src/MuiPickersUtilsProvider.tsx

@@ -1,39 +0,0 @@
-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

@@ -1,275 +0,0 @@
-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;