@docsvision/material-ui-pickers 3.2.0-beta.3 → 3.2.0-beta.30

package/remove-prop-types.js

@@ -1,37 +0,0 @@
-const removePropTypes = api => {
-  const { types, template } = api;
-  const visitedKey = `remove-prop-types-${Date.now()}`;
-  return {
-    visitor: {
-      AssignmentExpression(path) {
-        if (
-          types.isMemberExpression(path.node.left) &&
-          types.isIdentifier(path.node.left.property) &&
-          path.node.left.property.name === 'propTypes'
-        ) {
-          // Prevent infinity loop.
-          if (path.node[visitedKey]) {
-            return;
-          }
-          path.node[visitedKey] = true;
-
-          const unsafeWrapTemplate = template(
-            `
-              if (process.env.NODE_ENV !== "production") {
-                NODE;
-              }
-            `,
-            { placeholderPattern: /^NODE$/ }
-          );
-          path.replaceWith(
-            unsafeWrapTemplate({
-              NODE: path.node,
-            })
-          );
-        }
-      },
-    },
-  };
-};
-
-module.exports = removePropTypes;

package/rollup.config.js

@@ -1,143 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import path from 'path';
-// @ts-ignore
-import pkg from './package.json';
-import typescript from 'typescript';
-import babel from 'rollup-plugin-babel';
-import replace from 'rollup-plugin-replace';
-import commonjs from 'rollup-plugin-commonjs';
-import nodeResolve from 'rollup-plugin-node-resolve';
-import typescriptPlugin from 'rollup-plugin-typescript';
-import { terser } from 'rollup-plugin-terser';
-import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
-
-const tsconfig = path.join(__dirname, 'tsconfig.json');
-console.info(`Using tsconfig: ${tsconfig}`);
-
-const currentSourceFolder = path.join(__dirname, 'src\\');
-
-// treat as externals not relative and not absolute paths
-const external = id => {
-  // console.log(id);
-  return !id.startsWith('.') && !id.startsWith('/') && !id.includes(currentSourceFolder);
-};
-
-const input = './src/index.ts';
-const globals = {
-  react: 'React',
-  'react-dom': 'ReactDOM',
-  'prop-types': 'PropTypes',
-  '@material-ui/core/Icon': 'material-ui.Icon',
-  '@material-ui/core/Button/': 'material-ui/Button.',
-  '@material-ui/core/IconButton': 'material-ui.IconButton',
-  '@material-ui/core/InputAdornment': 'material-ui.InputAdornment',
-  '@material-ui/core/TextField': 'material-ui.TextField',
-  '@material-ui/core/Button': 'material-ui.Button',
-  '@material-ui/core/Dialog': 'material-ui.Dialog',
-  '@material-ui/core/DialogActions': 'material-ui.DialogActions',
-  '@material-ui/core/DialogContent': 'material-ui.DialogContent',
-  '@material-ui/styles/withStyles': 'material-ui.withStyles',
-  '@material-ui/styles/createStyles': 'material-ui.createStyles',
-  '@material-ui/core/Toolbar': 'material-ui.Toolbar',
-  '@material-ui/core/Typography': 'material-ui.Typography',
-  '@material-ui/core/Popover': 'material-ui.Popover',
-  '@material-ui/core/Paper': 'material-ui.Paper',
-  '@material-ui/styles/withTheme': 'material-ui.withTheme',
-  '@material-ui/core/Tab': 'material-ui.Tab',
-  '@material-ui/core/Tabs': 'material-ui.Tabs',
-  '@material-ui/styles': 'material-ui.styles',
-  '@material-ui/core/SvgIcon': 'material-ui.SvgIcon',
-  '@material-ui/core/styles/colorManipulator': 'material-ui.styles.colorManipulator',
-};
-
-const extensions = ['.ts', '.tsx'];
-
-const babelOptions = {
-  babelrc: false,
-  extensions,
-  plugins: ['./remove-prop-types.js'],
-};
-
-const commonjsOptions = {
-  include: /node_modules/,
-  namedExports: {
-    'react-is': ['ForwardRef'],
-  },
-};
-
-export default [
-  {
-    input,
-    external,
-    output: {
-      file: 'build/dist/material-ui-pickers.js',
-      format: 'cjs',
-      sourcemap: true,
-    },
-    plugins: [
-      nodeResolve({ extensions }),
-      typescriptPlugin({ typescript, tsconfig }),
-      babel(babelOptions),
-    ],
-  },
-
-  {
-    input,
-    external,
-    output: {
-      file: 'build/dist/material-ui-pickers.esm.js',
-      format: 'esm',
-      sourcemap: true,
-    },
-    plugins: [
-      nodeResolve({ extensions }),
-      typescriptPlugin({ typescript, tsconfig }),
-      babel(babelOptions),
-      replace({
-        delimiters: ['', ''],
-        values: { '/** @class */': '/*@__PURE__*/' },
-      }),
-      sizeSnapshot(),
-    ],
-  },
-
-  {
-    input,
-    external: Object.keys(globals),
-    output: {
-      globals,
-      format: 'umd',
-      name: pkg.name,
-      file: 'build/dist/material-ui-pickers.umd.js',
-    },
-
-    plugins: [
-      nodeResolve({ extensions }),
-      typescriptPlugin({ typescript, tsconfig }),
-      babel(babelOptions),
-      commonjs(commonjsOptions),
-      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
-      sizeSnapshot(),
-    ],
-  },
-
-  {
-    input,
-    external: Object.keys(globals),
-    output: {
-      globals,
-      format: 'umd',
-      name: pkg.name,
-      file: 'build/dist/material-ui-pickers.umd.min.js',
-    },
-    plugins: [
-      nodeResolve({ extensions }),
-      typescriptPlugin({ typescript, tsconfig }),
-      babel(babelOptions),
-      commonjs(commonjsOptions),
-      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
-      sizeSnapshot(),
-      terser(),
-    ],
-  },
-];

package/src/DatePicker/DatePicker.tsx

@@ -1,91 +0,0 @@
-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(2100-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

@@ -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;