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

package/src/views/Month/Month.tsx

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-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} />;
-};

package/src/wrappers/Wrapper.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { Omit } from '@material-ui/core';
-import { StaticWrapper } from './StaticWrapper';
-import { PureDateInputProps } from '../_shared/PureDateInput';
-import { ModalWrapper, ModalWrapperProps } from './ModalWrapper';
-import { InlineWrapper, InlineWrapperProps } from './InlineWrapper';
-import { KeyboardDateInputProps } from '../_shared/KeyboardDateInput';
-
-export type WrapperVariant = 'dialog' | 'inline' | 'static';
-
-export interface WrapperProps<T> {
-  open: boolean;
-  onAccept: () => void;
-  onDismiss: () => void;
-  onClear: () => void;
-  onSetToday: () => void;
-  InputComponent: React.FC<T>;
-  DateInputProps: T;
-  wider?: boolean;
-  showTabs?: boolean;
-}
-
-type OmitInnerWrapperProps<T extends WrapperProps<any>> = Omit<
-  T,
-  keyof WrapperProps<any> | 'showTabs'
->;
-
-export type ModalRoot = OmitInnerWrapperProps<ModalWrapperProps>;
-
-export type InlineRoot = OmitInnerWrapperProps<InlineWrapperProps>;
-
-// prettier-ignore
-export type ExtendWrapper<TInput extends PureDateInputProps | KeyboardDateInputProps> = {
-  /**
-   * Picker container option
-   * @default 'dialog'
-   */
-  variant?: WrapperVariant
-} & ModalRoot
-  & InlineRoot
-  & Omit<TInput, 'inputValue' | 'onChange' | 'format' | 'validationError' | 'format' | 'forwardedRef'>
-
-export function getWrapperFromVariant<T>(
-  variant?: WrapperVariant
-): React.ComponentType<InlineWrapperProps<T> | ModalWrapperProps<T>> {
-  switch (variant) {
-    case 'inline':
-      return InlineWrapper as any;
-
-    case 'static':
-      return StaticWrapper as any;
-
-    default:
-      return ModalWrapper as any;
-  }
-}
-
-type Props<T> = {
-  variant?: WrapperVariant;
-  children?: React.ReactChild;
-} & (ModalWrapperProps<T> | InlineWrapperProps<T>);
-
-export const VariantContext = React.createContext<WrapperVariant | null>(null);
-
-export const Wrapper: <T extends KeyboardDateInputProps | PureDateInputProps>(
-  p: Props<T>
-) => React.ReactElement<Props<T>> = ({ variant, ...props }) => {
-  const Component = getWrapperFromVariant<typeof props.DateInputProps>(variant);
-
-  return (
-    <VariantContext.Provider value={variant || 'dialog'}>
-      <Component {...props} />
-    </VariantContext.Provider>
-  );
-};

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "commonjs",
-    "outDir": "build",
-    "declaration": true,
-    "target": "es5",
-    "lib": ["dom", "es2016"],
-    "skipLibCheck": true,
-    "jsx": "react",
-    "moduleResolution": "node",
-    "noImplicitAny": true,
-    "strict": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "esModuleInterop": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "resolveJsonModule": true
-  },
-  "include": ["src/**/*.ts*", "typings.d.ts"],
-  "exclude": ["./src/__tests__/**/*", "build"]
-}

package/typings.d.ts

@@ -1,6 +0,0 @@
-declare module '@date-io/type' {
-  import { Moment } from 'moment';
-  import { DateTime } from 'luxon';
-
-  export type DateType = Moment | DateTime | Date;
-}