@mui/x-date-pickers 5.0.0-alpha.0

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateTimePickerToolbar = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _PickersToolbarText = require("../internals/components/PickersToolbarText");
+
+var _PickersToolbar = require("../internals/components/PickersToolbar");
+
+var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
+
+var _DateTimePickerTabs = require("./DateTimePickerTabs");
+
+var _useUtils = require("../internals/hooks/useUtils");
+
+var _WrapperVariantContext = require("../internals/components/wrappers/WrapperVariantContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["ampm", "date", "dateRangeIcon", "hideTabs", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "timeIcon", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const classes = (0, _material.generateUtilityClasses)('PrivateDateTimePickerToolbar', ['penIcon']);
+const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToolbar)({
+  paddingLeft: 16,
+  paddingRight: 16,
+  justifyContent: 'space-around',
+  [`& .${classes.penIcon}`]: {
+    position: 'absolute',
+    top: 8,
+    right: 8
+  }
+});
+const DateTimePickerToolbarDateContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start'
+});
+const DateTimePickerToolbarTimeContainer = (0, _styles.styled)('div')({
+  display: 'flex'
+});
+const DateTimePickerToolbarSeparator = (0, _styles.styled)(_PickersToolbarText.PickersToolbarText)({
+  margin: '0 4px 0 2px',
+  cursor: 'default'
+});
+/**
+ * @ignore - internal component.
+ */
+
+const DateTimePickerToolbar = props => {
+  const {
+    ampm,
+    date,
+    dateRangeIcon,
+    hideTabs,
+    isMobileKeyboardViewOpen,
+    openView,
+    setOpenView,
+    timeIcon,
+    toggleMobileKeyboardView,
+    toolbarFormat,
+    toolbarPlaceholder = '––',
+    toolbarTitle = 'Select date & time',
+    views
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const utils = (0, _useUtils.useUtils)();
+  const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
+  const showTabs = wrapperVariant === 'desktop' ? true : !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
+
+  const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
+
+  const dateText = React.useMemo(() => {
+    if (!date) {
+      return toolbarPlaceholder;
+    }
+
+    if (toolbarFormat) {
+      return utils.formatByString(date, toolbarFormat);
+    }
+
+    return utils.format(date, 'shortDate');
+  }, [date, toolbarFormat, toolbarPlaceholder, utils]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [wrapperVariant !== 'desktop' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarRoot, (0, _extends2.default)({
+      toolbarTitle: toolbarTitle,
+      penIconClassName: classes.penIcon,
+      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
+      toggleMobileKeyboardView: toggleMobileKeyboardView
+    }, other, {
+      isLandscape: false,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarDateContainer, {
+        children: [views.includes('year') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+          tabIndex: -1,
+          variant: "subtitle1",
+          onClick: () => setOpenView('year'),
+          selected: openView === 'year',
+          value: date ? utils.format(date, 'year') : '–'
+        }), views.includes('day') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+          tabIndex: -1,
+          variant: "h4",
+          onClick: () => setOpenView('day'),
+          selected: openView === 'day',
+          value: dateText
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimePickerToolbarTimeContainer, {
+        children: [views.includes('hours') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+          variant: "h3",
+          onClick: () => setOpenView('hours'),
+          selected: openView === 'hours',
+          value: date ? formatHours(date) : '--'
+        }), views.includes('minutes') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
+            variant: "h3",
+            value: ":"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+            variant: "h3",
+            onClick: () => setOpenView('minutes'),
+            selected: openView === 'minutes',
+            value: date ? utils.format(date, 'minutes') : '--'
+          })]
+        }), views.includes('seconds') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimePickerToolbarSeparator, {
+            variant: "h3",
+            value: ":"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersToolbarButton.PickersToolbarButton, {
+            variant: "h3",
+            onClick: () => setOpenView('seconds'),
+            selected: openView === 'seconds',
+            value: date ? utils.format(date, 'seconds') : '--'
+          })]
+        })]
+      })]
+    })), showTabs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerTabs.DateTimePickerTabs, {
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      view: openView,
+      onChange: setOpenView
+    })]
+  });
+};
+
+exports.DateTimePickerToolbar = DateTimePickerToolbar;

package/node/DateTimePicker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DateTimePicker", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.DateTimePicker;
+  }
+});
+
+var _DateTimePicker = require("./DateTimePicker");

package/node/DateTimePicker/shared.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDateTimePickerDefaultizedProps = useDateTimePickerDefaultizedProps;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _styles = require("@mui/material/styles");
+
+var _useUtils = require("../internals/hooks/useUtils");
+
+var _textFieldHelper = require("../internals/utils/text-field-helper");
+
+const _excluded = ["ampm", "inputFormat", "maxDate", "maxDateTime", "maxTime", "minDate", "minDateTime", "minTime", "openTo", "orientation", "views"];
+
+function useDateTimePickerDefaultizedProps(_ref, name) {
+  let {
+    ampm,
+    inputFormat,
+    maxDate: maxDateProp,
+    maxDateTime,
+    maxTime,
+    minDate: minDateProp,
+    minDateTime,
+    minTime,
+    openTo = 'day',
+    orientation = 'portrait',
+    views = ['year', 'day', 'hours', 'minutes']
+  } = _ref,
+      other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const utils = (0, _useUtils.useUtils)();
+  const defaultDates = (0, _useUtils.useDefaultDates)();
+  const minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
+  const maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate;
+  const willUseAmPm = ampm != null ? ampm : utils.is12HourCycleInCurrentLocale();
+
+  if (orientation !== 'portrait') {
+    throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');
+  }
+
+  return (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({
+      openTo,
+      views,
+      ampm: willUseAmPm,
+      ampmInClock: true,
+      orientation,
+      showToolbar: true,
+      allowSameDateSelection: true,
+      minDate: minDateTime != null ? minDateTime : minDate,
+      minTime: minDateTime != null ? minDateTime : minTime,
+      maxDate: maxDateTime != null ? maxDateTime : maxDate,
+      maxTime: maxDateTime != null ? maxDateTime : maxTime,
+      disableIgnoringDatePartForTimeValidation: Boolean(minDateTime || maxDateTime),
+      acceptRegex: willUseAmPm ? /[\dap]/gi : /\d/gi,
+      mask: '__/__/____ __:__',
+      disableMaskedInput: willUseAmPm,
+      inputFormat: (0, _textFieldHelper.pick12hOr24hFormat)(inputFormat, willUseAmPm, {
+        localized: utils.formats.keyboardDateTime,
+        '12h': utils.formats.keyboardDateTime12h,
+        '24h': utils.formats.keyboardDateTime24h
+      })
+    }, other),
+    name
+  });
+}