import * as React from 'react'; import useEventCallback from '@mui/utils/useEventCallback'; import useControlled from '@mui/utils/useControlled'; import { useUtils } from './useUtils'; /** * Hooks 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 useValueWithTimezone = ({ timezone: timezoneProp, value: valueProp, defaultValue, onChange, valueManager }) => { var _ref, _ref2; const utils = useUtils(); const firstDefaultValue = React.useRef(defaultValue); const inputValue = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : valueManager.emptyValue; const inputTimezone = React.useMemo(() => valueManager.getTimezone(utils, inputValue), [utils, valueManager, inputValue]); const setInputTimezone = useEventCallback(newValue => { if (inputTimezone == null) { return newValue; } return valueManager.setTimezone(utils, inputTimezone, newValue); }); const timezoneToRender = (_ref2 = timezoneProp != null ? timezoneProp : inputTimezone) != null ? _ref2 : 'default'; const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(utils, timezoneToRender, inputValue), [valueManager, utils, timezoneToRender, inputValue]); const handleValueChange = useEventCallback((newValue, ...otherParams) => { const newValueWithInputTimezone = setInputTimezone(newValue); onChange == null || onChange(newValueWithInputTimezone, ...otherParams); }); return { value: valueWithTimezoneToRender, handleValueChange, timezone: timezoneToRender }; }; /** * Wrapper around `useControlled` and `useValueWithTimezone` */ export const useControlledValueWithTimezone = ({ name, timezone: timezoneProp, value: valueProp, defaultValue, onChange: onChangeProp, valueManager }) => { const [valueWithInputTimezone, setValue] = useControlled({ name, state: 'value', controlled: valueProp, default: defaultValue != null ? defaultValue : valueManager.emptyValue }); const onChange = useEventCallback((newValue, ...otherParams) => { setValue(newValue); onChangeProp == null || onChangeProp(newValue, ...otherParams); }); return useValueWithTimezone({ timezone: timezoneProp, value: valueWithInputTimezone, defaultValue: undefined, onChange, valueManager }); };