Skip to content

Commit

Permalink
Merge branch 'master' into tree-item-indentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@flaviendelangle
flaviendelangle committed Oct 29, 2024
2 parents 75eccaf + 48ec9c9 commit 311d2dc
Show file tree
Hide file tree
Showing 9 changed files with 67 additions and 87 deletions.
12 changes: 0 additions & 12 deletions docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview
View file

This file was deleted.

41 changes: 26 additions & 15 deletions ...stom-field/PickerWithAutocompleteField.js → ...havior-autocomplete/MaterialDatePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,31 @@ import Stack from '@mui/material/Stack';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';

function AutocompleteField(props) {
const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
const { value, timezone, onChange } = internalProps;
const {
InputProps,
slotProps,
slots,
ownerState,
label,
disabled,
readOnly,
id,
value,
onChange,
InputProps: { ref, startAdornment, endAdornment } = {},
inputProps,
focused,
name,
options = [],
} = props;
inputProps,
...other
} = forwardedProps;

const { hasValidationError } = useValidation({
validator: validateDate,
value,
timezone,
props: internalProps,
});

const mergeAdornments = (...adornments) => {
const nonNullAdornments = adornments.filter((el) => el != null);
Expand All @@ -41,25 +53,24 @@ function AutocompleteField(props) {

return (
<Autocomplete
id={id}
{...other}
options={options}
disabled={disabled}
readOnly={readOnly}
ref={ref}
ref={InputProps?.ref}
sx={{ minWidth: 250 }}
renderInput={(params) => (
<TextField
{...params}
error={hasValidationError}
label={label}
inputProps={{ ...params.inputProps, ...inputProps }}
InputProps={{
...params.InputProps,
startAdornment: mergeAdornments(
startAdornment,
InputProps?.startAdornment,
params.InputProps.startAdornment,
),
endAdornment: mergeAdornments(
endAdornment,
InputProps?.endAdornment,
params.InputProps.endAdornment,
),
}}
Expand Down Expand Up @@ -107,7 +118,7 @@ function AutocompleteDatePicker(props) {

const today = dayjs().startOf('day');

export default function PickerWithAutocompleteField() {
export default function MaterialDatePicker() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<AutocompleteDatePicker
Expand Down
65 changes: 33 additions & 32 deletions ...tom-field/PickerWithAutocompleteField.tsx → ...avior-autocomplete/MaterialDatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,43 @@ import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker';
import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
import {
BaseSingleInputFieldProps,
DateValidationError,
FieldSection,
} from '@mui/x-date-pickers/models';
DatePicker,
DatePickerFieldProps,
DatePickerProps,
} from '@mui/x-date-pickers/DatePicker';
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';

interface AutoCompleteFieldProps
extends UseDateFieldProps<Dayjs, true>,
BaseSingleInputFieldProps<
Dayjs | null,
Dayjs,
FieldSection,
true,
DateValidationError
> {
interface AutocompleteFieldProps extends DatePickerFieldProps<Dayjs> {
/**
* @typescript-to-proptypes-ignore
*/
options?: Dayjs[];
}

function AutocompleteField(props: AutoCompleteFieldProps) {
function AutocompleteField(props: AutocompleteFieldProps) {
const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
const { value, timezone, onChange } = internalProps;
const {
InputProps,
slotProps,
slots,
ownerState,
label,
disabled,
readOnly,
id,
value,
onChange,
InputProps: { ref, startAdornment, endAdornment } = {},
inputProps,
focused,
name,
options = [],
} = props;
inputProps,
...other
} = forwardedProps;

const { hasValidationError } = useValidation({
validator: validateDate,
value,
timezone,
props: internalProps,
});

const mergeAdornments = (...adornments: React.ReactNode[]) => {
const nonNullAdornments = adornments.filter((el) => el != null);
Expand All @@ -62,25 +64,24 @@ function AutocompleteField(props: AutoCompleteFieldProps) {

return (
<Autocomplete
id={id}
{...other}
options={options}
disabled={disabled}
readOnly={readOnly}
ref={ref}
ref={InputProps?.ref}
sx={{ minWidth: 250 }}
renderInput={(params) => (
<TextField
{...params}
error={hasValidationError}
label={label}
inputProps={{ ...params.inputProps, ...inputProps }}
InputProps={{
...params.InputProps,
startAdornment: mergeAdornments(
startAdornment,
InputProps?.startAdornment,
params.InputProps.startAdornment,
),
endAdornment: mergeAdornments(
endAdornment,
InputProps?.endAdornment,
params.InputProps.endAdornment,
),
}}
Expand Down Expand Up @@ -127,7 +128,7 @@ function AutocompleteDatePicker(props: AutocompleteDatePickerProps) {
);

return (
<DatePicker<Dayjs>
<DatePicker
slots={{ ...props.slots, field: AutocompleteField }}
slotProps={{ ...props.slotProps, field: { options } as any }}
shouldDisableDate={(date) => !optionsLookup[date.startOf('day').toISOString()]}
Expand All @@ -138,7 +139,7 @@ function AutocompleteDatePicker(props: AutocompleteDatePickerProps) {

const today = dayjs().startOf('day');

export default function PickerWithAutocompleteField() {
export default function MaterialDatePicker() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<AutocompleteDatePicker
Expand Down
0 ...d/PickerWithAutocompleteField.tsx.preview → ...tocomplete/MaterialDatePicker.tsx.preview
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion docs/data/date-pickers/custom-field/custom-field.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ The new accessible DOM structure will become compatible with Joy UI in the futur

If your user can only select a value in a small list of available dates, you can replace the field with the [Autocomplete](/material-ui/react-autocomplete/) component to list those dates:

{{"demo": "PickerWithAutocompleteField.js", "defaultCodeOpen": false}}
{{"demo": "behavior-autocomplete/MaterialDatePicker.js", "defaultCodeOpen": false}}

### Using a masked Text Field

Expand Down
2 changes: 1 addition & 1 deletion docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export default function GmailTreeView() {
endIcon: EndIcon,
}}
sx={{ flexGrow: 1, maxWidth: 400 }}
itemChildrenIndentation={16}
itemChildrenIndentation={20}
>
<CustomTreeItem itemId="1" label="All Mail" labelIcon={MailIcon} />
<CustomTreeItem itemId="2" label="Trash" labelIcon={DeleteIcon} />
Expand Down
2 changes: 1 addition & 1 deletion docs/data/tree-view/simple-tree-view/customization/GmailTreeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ export default function GmailTreeView() {
endIcon: EndIcon,
}}
sx={{ flexGrow: 1, maxWidth: 400 }}
itemChildrenIndentation={24}
itemChildrenIndentation={20}
>
<CustomTreeItem itemId="1" label="All Mail" labelIcon={MailIcon} />
<CustomTreeItem itemId="2" label="Trash" labelIcon={DeleteIcon} />
Expand Down
4 changes: 2 additions & 2 deletions packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,8 @@ const GridVirtualScrollbar = React.forwardRef<HTMLDivElement, GridVirtualScrollb
return;
}

lastPosition.current = scroller[propertyScroll];

if (isLocked.current) {
isLocked.current = false;
return;
Expand All @@ -108,8 +110,6 @@ const GridVirtualScrollbar = React.forwardRef<HTMLDivElement, GridVirtualScrollb

const value = scroller[propertyScroll] / contentSize;
scrollbar[propertyScroll] = value * scrollbarInnerSize;

lastPosition.current = scroller[propertyScroll];
});

const onScrollbarScroll = useEventCallback(() => {
Expand Down
26 changes: 3 additions & 23 deletions packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,6 @@ export const useGridScroll = (
const logger = useGridLogger(apiRef, 'useGridScroll');
const colRef = apiRef.current.columnHeadersContainerRef;
const virtualScrollerRef = apiRef.current.virtualScrollerRef!;
const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef!;
const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef!;
const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);

const scrollToIndexes = React.useCallback<GridScrollApi['scrollToIndexes']>(
Expand Down Expand Up @@ -156,37 +154,19 @@ export const useGridScroll = (

const scroll = React.useCallback<GridScrollApi['scroll']>(
(params: Partial<GridScrollParams>) => {
if (
virtualScrollerRef.current &&
virtualScrollbarHorizontalRef.current &&
params.left !== undefined &&
colRef.current
) {
if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
const direction = isRtl ? -1 : 1;
colRef.current.scrollLeft = params.left;
virtualScrollerRef.current.scrollLeft = direction * params.left;
virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
logger.debug(`Scrolling left: ${params.left}`);
}
if (
virtualScrollerRef.current &&
virtualScrollbarVerticalRef.current &&
params.top !== undefined
) {
if (virtualScrollerRef.current && params.top !== undefined) {
virtualScrollerRef.current.scrollTop = params.top;
virtualScrollbarVerticalRef.current.scrollTop = params.top;
logger.debug(`Scrolling top: ${params.top}`);
}
logger.debug(`Scrolling, updating container, and viewport`);
},
[
virtualScrollerRef,
virtualScrollbarHorizontalRef,
virtualScrollbarVerticalRef,
isRtl,
colRef,
logger,
],
[virtualScrollerRef, isRtl, colRef, logger],
);

const getScrollPosition = React.useCallback<GridScrollApi['getScrollPosition']>(() => {
Expand Down

0 comments on commit 311d2dc

Please sign in to comment.