129 lines
4.1 KiB
JavaScript
129 lines
4.1 KiB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
const _excluded = ["props", "getOpenDialogAriaText"];
|
|
import * as React from 'react';
|
|
import { useSlotProps } from '@mui/base/utils';
|
|
import useForkRef from '@mui/utils/useForkRef';
|
|
import useId from '@mui/utils/useId';
|
|
import { PickersModalDialog } from '../../components/PickersModalDialog';
|
|
import { usePicker } from '../usePicker';
|
|
import { onSpaceOrEnter } from '../../utils/utils';
|
|
import { useUtils } from '../useUtils';
|
|
import { LocalizationProvider } from '../../../LocalizationProvider';
|
|
import { PickersLayout } from '../../../PickersLayout';
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
/**
|
|
* Hook managing all the single-date mobile pickers:
|
|
* - MobileDatePicker
|
|
* - MobileDateTimePicker
|
|
* - MobileTimePicker
|
|
*/
|
|
export const useMobilePicker = _ref => {
|
|
var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
|
|
let {
|
|
props,
|
|
getOpenDialogAriaText
|
|
} = _ref,
|
|
pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
const {
|
|
slots,
|
|
slotProps: innerSlotProps,
|
|
className,
|
|
sx,
|
|
format,
|
|
formatDensity,
|
|
timezone,
|
|
name,
|
|
label,
|
|
inputRef,
|
|
readOnly,
|
|
disabled,
|
|
localeText
|
|
} = props;
|
|
const utils = useUtils();
|
|
const internalInputRef = React.useRef(null);
|
|
const labelId = useId();
|
|
const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null || (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
|
|
const {
|
|
open,
|
|
actions,
|
|
layoutProps,
|
|
renderCurrentView,
|
|
fieldProps: pickerFieldProps
|
|
} = usePicker(_extends({}, pickerParams, {
|
|
props,
|
|
inputRef: internalInputRef,
|
|
autoFocusView: true,
|
|
additionalViewProps: {},
|
|
wrapperVariant: 'mobile'
|
|
}));
|
|
const Field = slots.field;
|
|
const fieldProps = useSlotProps({
|
|
elementType: Field,
|
|
externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
|
|
additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
|
|
id: labelId
|
|
}, !(disabled || readOnly) && {
|
|
onClick: actions.onOpen,
|
|
onKeyDown: onSpaceOrEnter(actions.onOpen)
|
|
}, {
|
|
readOnly: readOnly != null ? readOnly : true,
|
|
disabled,
|
|
className,
|
|
sx,
|
|
format,
|
|
formatDensity,
|
|
timezone,
|
|
label,
|
|
name
|
|
}),
|
|
ownerState: props
|
|
});
|
|
|
|
// TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
|
|
fieldProps.inputProps = _extends({}, fieldProps.inputProps, {
|
|
'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils)
|
|
});
|
|
const slotsForField = _extends({
|
|
textField: slots.textField
|
|
}, fieldProps.slots);
|
|
const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
|
|
const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
|
|
let labelledById = labelId;
|
|
if (isToolbarHidden) {
|
|
if (label) {
|
|
labelledById = `${labelId}-label`;
|
|
} else {
|
|
labelledById = undefined;
|
|
}
|
|
}
|
|
const slotProps = _extends({}, innerSlotProps, {
|
|
toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
|
|
titleId: labelId
|
|
}),
|
|
mobilePaper: _extends({
|
|
'aria-labelledby': labelledById
|
|
}, innerSlotProps == null ? void 0 : innerSlotProps.mobilePaper)
|
|
});
|
|
const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
|
|
localeText: localeText,
|
|
children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
|
|
slots: slotsForField,
|
|
slotProps: slotProps,
|
|
inputRef: handleInputRef
|
|
})), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
|
|
open: open,
|
|
slots: slots,
|
|
slotProps: slotProps,
|
|
children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
|
|
slots: slots,
|
|
slotProps: slotProps,
|
|
children: renderCurrentView()
|
|
}))
|
|
}))]
|
|
});
|
|
return {
|
|
renderPicker
|
|
};
|
|
}; |