Skip to content

Commit

Permalink
[docs] Migrate remaining demos to the new custom field DX
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle committed Oct 31, 2024
1 parent 302c876 commit 59c8cd5
Show file tree
Hide file tree
Showing 35 changed files with 449 additions and 668 deletions.
28 changes: 7 additions & 21 deletions docs/data/date-pickers/custom-field/BrowserV7Field.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,14 @@ import useForkRef from '@mui/utils/useForkRef';
import { styled } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker';
import {
unstable_useDateField as useDateField,
UseDateFieldProps,
} from '@mui/x-date-pickers/DateField';
DatePicker,
DatePickerFieldProps,
DatePickerProps,
} from '@mui/x-date-pickers/DatePicker';
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
import { useClearableField } from '@mui/x-date-pickers/hooks';
import {
BaseSingleInputPickersTextFieldProps,
BaseSingleInputFieldProps,
DateValidationError,
FieldSection,
} from '@mui/x-date-pickers/models';
import { BaseSingleInputPickersTextFieldProps } from '@mui/x-date-pickers/models';
import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';

const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
Expand Down Expand Up @@ -104,18 +100,8 @@ const BrowserTextField = React.forwardRef(
},
);

interface BrowserDateFieldProps
extends UseDateFieldProps<Dayjs, true>,
BaseSingleInputFieldProps<
Dayjs | null,
Dayjs,
FieldSection,
true,
DateValidationError
> {}

const BrowserDateField = React.forwardRef(
(props: BrowserDateFieldProps, ref: React.Ref<HTMLDivElement>) => {
(props: DatePickerFieldProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
const { slots, slotProps, ...textFieldProps } = props;

const fieldResponse = useDateField<Dayjs, true, typeof textFieldProps>({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
},
);

// This demo uses `BasePickersTextFieldProps` instead of `BaseMultiInputPickersTextFieldProps`,
// That way you can reuse the same `BrowserTextField` for all your pickers, range or not.
const BrowserTextField = React.forwardRef((props, ref) => {
const {
// Should be ignored
Expand Down Expand Up @@ -84,12 +82,10 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
const {
slotProps,
value,
defaultValue,
format,
onChange,
readOnly,
disabled,
onError,
shouldDisableDate,
minDate,
maxDate,
Expand Down Expand Up @@ -117,12 +113,10 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
const fieldResponse = useMultiInputDateRangeField({
sharedProps: {
value,
defaultValue,
format,
onChange,
readOnly,
disabled,
onError,
shouldDisableDate,
minDate,
maxDate,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,15 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
DateRangePicker,
DateRangePickerFieldProps,
DateRangePickerProps,
} from '@mui/x-date-pickers-pro/DateRangePicker';
import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
import {
RangeFieldSection,
BaseMultiInputFieldProps,
BasePickersTextFieldProps,
MultiInputFieldSlotTextFieldProps,
DateRangeValidationError,
DateRange,
UseDateRangeFieldProps,
MultiInputFieldRefs,
BaseMultiInputPickersTextFieldProps,
} from '@mui/x-date-pickers-pro/models';

const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
Expand All @@ -38,14 +35,12 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
);

interface BrowserTextFieldProps
extends BasePickersTextFieldProps<true>,
extends BaseMultiInputPickersTextFieldProps<true>,
Omit<
React.HTMLAttributes<HTMLDivElement>,
keyof BasePickersTextFieldProps<true>
keyof BaseMultiInputPickersTextFieldProps<true>
> {}

// This demo uses `BasePickersTextFieldProps` instead of `BaseMultiInputPickersTextFieldProps`,
// That way you can reuse the same `BrowserTextField` for all your pickers, range or not.
const BrowserTextField = React.forwardRef(
(props: BrowserTextFieldProps, ref: React.Ref<unknown>) => {
const {
Expand Down Expand Up @@ -108,14 +103,11 @@ const BrowserTextField = React.forwardRef(
);

interface BrowserMultiInputDateRangeFieldProps
extends UseDateRangeFieldProps<Dayjs, true>,
BaseMultiInputFieldProps<
DateRange<Dayjs>,
Dayjs,
RangeFieldSection,
true,
DateRangeValidationError
> {}
extends Omit<
DateRangePickerFieldProps<Dayjs>,
'unstableFieldRef' | 'clearable' | 'onClear'
>,
MultiInputFieldRefs {}

type BrowserMultiInputDateRangeFieldComponent = ((
props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes<HTMLDivElement>,
Expand All @@ -126,12 +118,10 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
const {
slotProps,
value,
defaultValue,
format,
onChange,
readOnly,
disabled,
onError,
shouldDisableDate,
minDate,
maxDate,
Expand Down Expand Up @@ -163,12 +153,10 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
>({
sharedProps: {
value,
defaultValue,
format,
onChange,
readOnly,
disabled,
onError,
shouldDisableDate,
minDate,
maxDate,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { useClearableField } from '@mui/x-date-pickers/hooks';
import { useClearableField, usePickersContext } from '@mui/x-date-pickers/hooks';
import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';

const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
Expand Down Expand Up @@ -85,7 +85,16 @@ const BrowserTextField = React.forwardRef((props, ref) => {
});

const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
const { slots, slotProps, onAdornmentClick, ...other } = props;
const { slots, slotProps, ...other } = props;

const pickersContext = usePickersContext();
const handleTogglePicker = (event) => {
if (pickersContext.open) {
pickersContext.onClose(event);
} else {
pickersContext.onOpen(event);
}
};

const textFieldProps = useSlotProps({
elementType: 'input',
Expand All @@ -98,7 +107,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
...textFieldProps.InputProps,
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={onAdornmentClick}>
<IconButton onClick={handleTogglePicker}>
<DateRangeIcon />
</IconButton>
</InputAdornment>
Expand Down Expand Up @@ -131,29 +140,11 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
BrowserSingleInputDateRangeField.fieldType = 'single-input';

const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => {
const [isOpen, setIsOpen] = React.useState(false);

const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen);

const handleOpen = () => setIsOpen(true);

const handleClose = () => setIsOpen(false);

return (
<DateRangePicker
ref={ref}
{...props}
open={isOpen}
onClose={handleClose}
onOpen={handleOpen}
slots={{ ...props.slots, field: BrowserSingleInputDateRangeField }}
slotProps={{
...props.slotProps,
field: {
onAdornmentClick: toggleOpen,
...props.slotProps?.field,
},
}}
/>
);
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,14 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
DateRangePicker,
DateRangePickerFieldProps,
DateRangePickerProps,
} from '@mui/x-date-pickers-pro/DateRangePicker';
import {
unstable_useSingleInputDateRangeField as useSingleInputDateRangeField,
UseSingleInputDateRangeFieldProps,
} from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { useClearableField } from '@mui/x-date-pickers/hooks';
import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { useClearableField, usePickersContext } from '@mui/x-date-pickers/hooks';
import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
import {
BasePickersTextFieldProps,
DateRangeValidationError,
RangeFieldSection,
DateRange,
FieldType,
} from '@mui/x-date-pickers-pro/models';
import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models';
import { FieldType } from '@mui/x-date-pickers-pro/models';
import { BaseSingleInputPickersTextFieldProps } from '@mui/x-date-pickers/models';

const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
display: 'flex',
Expand All @@ -46,10 +38,10 @@ const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content
);

interface BrowserTextFieldProps
extends BasePickersTextFieldProps<true>,
extends BaseSingleInputPickersTextFieldProps<true>,
Omit<
React.HTMLAttributes<HTMLDivElement>,
keyof BasePickersTextFieldProps<true>
keyof BaseSingleInputPickersTextFieldProps<true>
> {}

const BrowserTextField = React.forwardRef(
Expand Down Expand Up @@ -114,24 +106,24 @@ const BrowserTextField = React.forwardRef(
);

interface BrowserSingleInputDateRangeFieldProps
extends UseSingleInputDateRangeFieldProps<Dayjs, true>,
BaseSingleInputFieldProps<
DateRange<Dayjs>,
Dayjs,
RangeFieldSection,
true,
DateRangeValidationError
> {
onAdornmentClick?: () => void;
}
extends DateRangePickerFieldProps<Dayjs> {}

type BrowserSingleInputDateRangeFieldComponent = ((
props: BrowserSingleInputDateRangeFieldProps & React.RefAttributes<HTMLDivElement>,
) => React.JSX.Element) & { fieldType?: FieldType };

const BrowserSingleInputDateRangeField = React.forwardRef(
(props: BrowserSingleInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
const { slots, slotProps, onAdornmentClick, ...other } = props;
const { slots, slotProps, ...other } = props;

const pickersContext = usePickersContext();
const handleTogglePicker = (event: React.UIEvent) => {
if (pickersContext.open) {
pickersContext.onClose(event);
} else {
pickersContext.onOpen(event);
}
};

const textFieldProps: typeof props = useSlotProps({
elementType: 'input',
Expand All @@ -144,7 +136,7 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
...textFieldProps.InputProps,
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={onAdornmentClick}>
<IconButton onClick={handleTogglePicker}>
<DateRangeIcon />
</IconButton>
</InputAdornment>
Expand Down Expand Up @@ -180,29 +172,11 @@ BrowserSingleInputDateRangeField.fieldType = 'single-input';

const BrowserSingleInputDateRangePicker = React.forwardRef(
(props: DateRangePickerProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
const [isOpen, setIsOpen] = React.useState(false);

const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen);

const handleOpen = () => setIsOpen(true);

const handleClose = () => setIsOpen(false);

return (
<DateRangePicker
ref={ref}
{...props}
open={isOpen}
onClose={handleClose}
onOpen={handleOpen}
slots={{ ...props.slots, field: BrowserSingleInputDateRangeField }}
slotProps={{
...props.slotProps,
field: {
onAdornmentClick: toggleOpen,
...props.slotProps?.field,
} as any,
}}
/>
);
},
Expand Down
26 changes: 6 additions & 20 deletions docs/data/date-pickers/custom-field/JoyV6Field.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,13 @@ import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker';
import {
unstable_useDateField as useDateField,
UseDateFieldProps,
} from '@mui/x-date-pickers/DateField';
DatePicker,
DatePickerFieldProps,
DatePickerProps,
} from '@mui/x-date-pickers/DatePicker';
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
import { useClearableField } from '@mui/x-date-pickers/hooks';
import {
BaseSingleInputFieldProps,
DateValidationError,
FieldSection,
} from '@mui/x-date-pickers/models';

const joyTheme = extendJoyTheme();

Expand Down Expand Up @@ -99,18 +95,8 @@ const JoyField = React.forwardRef(
},
) as JoyFieldComponent;

interface JoyDateFieldProps
extends UseDateFieldProps<Dayjs, false>,
BaseSingleInputFieldProps<
Dayjs | null,
Dayjs,
FieldSection,
false,
DateValidationError
> {}

const JoyDateField = React.forwardRef(
(props: JoyDateFieldProps, ref: React.Ref<HTMLDivElement>) => {
(props: DatePickerFieldProps<Dayjs, false>, ref: React.Ref<HTMLDivElement>) => {
const { slots, slotProps, ...textFieldProps } = props;

const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
Expand Down
Loading

0 comments on commit 59c8cd5

Please sign in to comment.