@mui/x-date-pickers
Version:
The community edition of the Date and Time Picker components (MUI X).
56 lines • 2.05 kB
JavaScript
import * as React from 'react';
import useEventCallback from '@mui/utils/useEventCallback';
import useControlled from '@mui/utils/useControlled';
import { useUtils } from "./useUtils.js";
/**
* Hooks controlling the value while making sure that:
* - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
* - The value rendered is always the one from `props.timezone` if defined
*/
export const useControlledValue = ({
name,
timezone: timezoneProp,
value: valueProp,
defaultValue,
referenceDate,
onChange: onChangeProp,
valueManager
}) => {
const utils = useUtils();
const [valueWithInputTimezone, setValue] = useControlled({
name,
state: 'value',
controlled: valueProp,
default: defaultValue ?? valueManager.emptyValue
});
const inputTimezone = React.useMemo(() => valueManager.getTimezone(utils, valueWithInputTimezone), [utils, valueManager, valueWithInputTimezone]);
const setInputTimezone = useEventCallback(newValue => {
if (inputTimezone == null) {
return newValue;
}
return valueManager.setTimezone(utils, inputTimezone, newValue);
});
const timezoneToRender = React.useMemo(() => {
if (timezoneProp) {
return timezoneProp;
}
if (inputTimezone) {
return inputTimezone;
}
if (referenceDate) {
return utils.getTimezone(referenceDate);
}
return 'default';
}, [timezoneProp, inputTimezone, referenceDate, utils]);
const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, valueWithInputTimezone), [valueManager, utils, timezoneToRender, valueWithInputTimezone]);
const handleValueChange = useEventCallback((newValue, ...otherParams) => {
const newValueWithInputTimezone = setInputTimezone(newValue);
setValue(newValueWithInputTimezone);
onChangeProp?.(newValueWithInputTimezone, ...otherParams);
});
return {
value: valueWithTimezoneToRender,
handleValueChange,
timezone: timezoneToRender
};
};