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

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} />;
+};

package/src/wrappers/Wrapper.tsx

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