@material-ui/pickers
Version:
React components, that implements material design pickers for material-ui v4
271 lines (251 loc) • 8.42 kB
JavaScript
import { createElement, useEffect, useLayoutEffect, useRef, Fragment, createContext } from 'react';
import { node, bool, object, func } from 'prop-types';
import clsx from 'clsx';
import _extends from '@babel/runtime/helpers/esm/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
import { makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import Dialog from '@material-ui/core/Dialog';
import Popover from '@material-ui/core/Popover';
/** Use it instead of .includes method for IE support */
function arrayIncludes(array, itemOrItems) {
if (Array.isArray(itemOrItems)) {
return itemOrItems.every(function (item) {
return array.indexOf(item) !== -1;
});
}
return array.indexOf(itemOrItems) !== -1;
}
var DIALOG_WIDTH = 310;
var DIALOG_WIDTH_WIDER = 325;
var VIEW_HEIGHT = 305;
var useStyles = makeStyles(function (theme) {
return {
staticWrapperRoot: {
overflow: 'hidden',
minWidth: DIALOG_WIDTH,
display: 'flex',
flexDirection: 'column',
backgroundColor: theme.palette.background.paper
}
};
}, {
name: 'MuiPickersStaticWrapper'
});
var StaticWrapper = function StaticWrapper(_ref) {
var children = _ref.children;
var classes = useStyles();
return createElement("div", {
className: classes.staticWrapperRoot,
children: children
});
};
var ModalDialog = function ModalDialog(_ref) {
var children = _ref.children,
classes = _ref.classes,
onAccept = _ref.onAccept,
onDismiss = _ref.onDismiss,
onClear = _ref.onClear,
onSetToday = _ref.onSetToday,
okLabel = _ref.okLabel,
cancelLabel = _ref.cancelLabel,
clearLabel = _ref.clearLabel,
todayLabel = _ref.todayLabel,
clearable = _ref.clearable,
showTodayButton = _ref.showTodayButton,
showTabs = _ref.showTabs,
wider = _ref.wider,
other = _objectWithoutProperties(_ref, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
return createElement(Dialog, _extends({
role: "dialog",
onClose: onDismiss,
classes: {
paper: clsx(classes.dialogRoot, wider && classes.dialogRootWider)
}
}, other), createElement(DialogContent, {
children: children,
className: classes.dialog
}), createElement(DialogActions, {
classes: {
root: clsx((clearable || showTodayButton) && classes.withAdditionalAction)
}
}, clearable && createElement(Button, {
color: "primary",
onClick: onClear
}, clearLabel), showTodayButton && createElement(Button, {
color: "primary",
onClick: onSetToday
}, todayLabel), cancelLabel && createElement(Button, {
color: "primary",
onClick: onDismiss
}, cancelLabel), okLabel && createElement(Button, {
color: "primary",
onClick: onAccept
}, okLabel)));
};
ModalDialog.displayName = 'ModalDialog';
var styles = createStyles({
dialogRoot: {
minWidth: DIALOG_WIDTH
},
dialogRootWider: {
minWidth: DIALOG_WIDTH_WIDER
},
dialog: {
'&:first-child': {
padding: 0
}
},
withAdditionalAction: {
// set justifyContent to default value to fix IE11 layout bug
// see https://github.com/dmtrKovalenko/material-ui-pickers/pull/267
justifyContent: 'flex-start',
'& > *:first-child': {
marginRight: 'auto'
}
}
});
var ModalDialog$1 = withStyles(styles, {
name: 'MuiPickersModal'
})(ModalDialog);
var useIsomorphicEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
function runKeyHandler(e, keyHandlers) {
var handler = keyHandlers[e.key];
if (handler) {
handler(); // if event was handled prevent other side effects (e.g. page scroll)
e.preventDefault();
}
}
function useKeyDown(active, keyHandlers) {
var keyHandlersRef = useRef(keyHandlers);
keyHandlersRef.current = keyHandlers;
useIsomorphicEffect(function () {
if (active) {
var handleKeyDown = function handleKeyDown(event) {
runKeyHandler(event, keyHandlersRef.current);
};
window.addEventListener('keydown', handleKeyDown);
return function () {
window.removeEventListener('keydown', handleKeyDown);
};
}
}, [active]);
}
var ModalWrapper = function ModalWrapper(_ref) {
var open = _ref.open,
children = _ref.children,
okLabel = _ref.okLabel,
cancelLabel = _ref.cancelLabel,
clearLabel = _ref.clearLabel,
todayLabel = _ref.todayLabel,
showTodayButton = _ref.showTodayButton,
clearable = _ref.clearable,
DialogProps = _ref.DialogProps,
showTabs = _ref.showTabs,
wider = _ref.wider,
InputComponent = _ref.InputComponent,
DateInputProps = _ref.DateInputProps,
onClear = _ref.onClear,
onAccept = _ref.onAccept,
onDismiss = _ref.onDismiss,
onSetToday = _ref.onSetToday,
other = _objectWithoutProperties(_ref, ["open", "children", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "showTodayButton", "clearable", "DialogProps", "showTabs", "wider", "InputComponent", "DateInputProps", "onClear", "onAccept", "onDismiss", "onSetToday"]);
useKeyDown(open, {
Enter: onAccept
});
return createElement(Fragment, null, createElement(InputComponent, _extends({}, other, DateInputProps)), createElement(ModalDialog$1, _extends({
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)));
};
process.env.NODE_ENV !== "production" ? ModalWrapper.propTypes = {
okLabel: node,
cancelLabel: node,
clearLabel: node,
clearable: bool,
todayLabel: node,
showTodayButton: bool,
DialogProps: object
} : void 0;
ModalWrapper.defaultProps = {
okLabel: 'OK',
cancelLabel: 'Cancel',
clearLabel: 'Clear',
todayLabel: 'Today',
clearable: false,
showTodayButton: false
};
var InlineWrapper = function InlineWrapper(_ref) {
var open = _ref.open,
wider = _ref.wider,
children = _ref.children,
PopoverProps = _ref.PopoverProps,
onClear = _ref.onClear,
onDismiss = _ref.onDismiss,
onSetToday = _ref.onSetToday,
onAccept = _ref.onAccept,
showTabs = _ref.showTabs,
DateInputProps = _ref.DateInputProps,
InputComponent = _ref.InputComponent,
other = _objectWithoutProperties(_ref, ["open", "wider", "children", "PopoverProps", "onClear", "onDismiss", "onSetToday", "onAccept", "showTabs", "DateInputProps", "InputComponent"]);
var ref = useRef();
useKeyDown(open, {
Enter: onAccept
});
return createElement(Fragment, null, createElement(InputComponent, _extends({}, other, DateInputProps, {
inputRef: ref
})), createElement(Popover, _extends({
open: open,
onClose: onDismiss,
anchorEl: ref.current,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'center'
},
transformOrigin: {
vertical: 'top',
horizontal: 'center'
},
children: children
}, PopoverProps)));
};
process.env.NODE_ENV !== "production" ? InlineWrapper.propTypes = {
onOpen: func,
onClose: func,
PopoverProps: object
} : void 0;
function getWrapperFromVariant(variant) {
switch (variant) {
case 'inline':
return InlineWrapper;
case 'static':
return StaticWrapper;
default:
return ModalWrapper;
}
}
var VariantContext = createContext(null);
var Wrapper = function Wrapper(_ref) {
var variant = _ref.variant,
props = _objectWithoutProperties(_ref, ["variant"]);
var Component = getWrapperFromVariant(variant);
return createElement(VariantContext.Provider, {
value: variant || 'dialog'
}, createElement(Component, props));
};
export { DIALOG_WIDTH as D, VariantContext as V, Wrapper as W, arrayIncludes as a, VIEW_HEIGHT as b, DIALOG_WIDTH_WIDER as c, runKeyHandler as r, useIsomorphicEffect as u };
//# sourceMappingURL=Wrapper-241966d7.js.map