Skip to content

Commit

Permalink
Fix
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle committed Oct 29, 2024
2 parents df2da8c + 8ed5c99 commit f8e43e7
Showing 45 changed files with 469 additions and 435 deletions.
106 changes: 106 additions & 0 deletions docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
Original file line number Diff line number Diff line change
@@ -314,3 +314,109 @@ If you were using them, you need to replace them with the following code:
> &
UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
```

## Stop passing `utils` and the date object to some translation keys

Some translation keys no longer require `utils` and the date object as parameters, but only the formatted value as a string. The keys affected by this changes are: `clockLabelText`, `openDatePickerDialogue` and `openTimePickerDialogue`.
If you have customized those translation keys, you have to update them following the examples below:

- If you are setting a custom value in a picker component:

```diff
-clockLabelText: (view, time, utils) =>
- `Select ${view}. ${
- time === null || !utils.isValid(time)
- ? 'No time selected'
- : `Selected time is ${utils.format(time, 'fullTime')}`
- }`
+clockLabelText: (view, formattedTime) =>
+ `Select ${view}. ${
+ formattedTime == null ? 'No time selected' : `Selected time is ${formattedTime}`
+ }`

-openDatePickerDialogue: (value, utils) =>
- value !== null && utils.isValid(value)
- ? `Choose date, selected date is ${utils.format(value, 'fullDate')}`
- : 'Choose date',
+openDatePickerDialogue: (formattedDate) =>
+ formattedDate ? `Choose date, selected date is ${formattedDate}` : 'Choose date'

-openTimePickerDialogue: (value, utils) =>
- value !== null && utils.isValid(value)
- ? `Choose time, selected time is ${utils.format(value, 'fullTime')}`
- : 'Choose time',
+openTimePickerDialogue: (formattedTime) =>
+ formattedTime ? `Choose time, selected time is ${formattedTime}` : 'Choose time'
```

- If you are setting a custom value in the `LocalizationProvider`:

```diff
<LocalizationProvider localeText={{
- clockLabelText: (view, time, utils) =>
- `Select ${view}. ${
- time === null || !utils.isValid(time)
- ? 'No time selected'
- : `Selected time is ${utils.format(time, 'fullTime')}`
- }`
+ clockLabelText: (view, formattedTime) =>
+ `Select ${view}. ${
+ formattedTime == null ? 'No time selected' : `Selected time is ${formattedTime}`
+ }`
- openDatePickerDialogue: (value, utils) =>
- value !== null && utils.isValid(value)
- ? `Choose date, selected date is ${utils.format(value, 'fullDate')}`
- : 'Choose date',
+ openDatePickerDialogue: (formattedDate) =>
+ formattedDate ? `Choose date, selected date is ${formattedDate}` : 'Choose date'
- openTimePickerDialogue: (value, utils) =>
- value !== null && utils.isValid(value)
- ? `Choose time, selected time is ${utils.format(value, 'fullTime')}`
- : 'Choose time',
+ openTimePickerDialogue: (formattedTime) =>
+ formattedTime ? `Choose time, selected time is ${formattedTime}` : 'Choose time'
}} >
```

- If you using this translation key in a custom component:

```diff
const translations = usePickersTranslations();

-const clockLabelText = translations.clockLabelText(
- view,
- value,
- {} as any,
- value == null ? null : value.format('hh:mm:ss')
-);
+const clockLabelText = translations.clockLabelText(
+ view,
+ value == null ? null : value.format('hh:mm:ss')
+);

-const openDatePickerDialogue = translations.openDatePickerDialogue(
- value,
- {} as any,
- value == null ? null : value.format('MM/DD/YYY')
-);
+const openDatePickerDialogue = translations.openDatePickerDialogue(
+ value == null ? null : value.format('MM/DD/YYY')
+);

-const openTimePickerDialogue = translations.openTimePickerDialogue(
- value,
- {} as any,
- value == null ? null : value.format('hh:mm:ss')
-);
+const openTimePickerDialogue = translations.openTimePickerDialogue(
+ value == null ? null : value.format('hh:mm:ss')
+);
```

Also the following types and interfaces no longer receive a generic type parameter:

- `PickersComponentAgnosticLocaleText`
- `PickersInputComponentLocaleText`
- `PickersInputLocaleText`
- `PickersLocaleText`
- `PickersTranslationKeys`
98 changes: 98 additions & 0 deletions packages/x-data-grid-pro/src/tests/listView.DataGridPro.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import * as React from 'react';
import { expect } from 'chai';
import { createRenderer, screen } from '@mui/internal-test-utils';
import {
DataGridPro,
DataGridProProps,
GridColDef,
GridListColDef,
GridRowsProp,
} from '@mui/x-data-grid-pro';

const rows: GridRowsProp = [{ id: '123567', title: 'test' }];

const columns: GridColDef[] = [{ field: 'id' }, { field: 'title' }];

const listColumn: GridListColDef = {
field: 'listColumn',
renderCell: (params) => <div data-testid="list-column">Title: {params.row.title}</div>,
};

describe('<DataGridPro /> - List view', () => {
const { render } = createRenderer();

function Test(props: Partial<DataGridProProps>) {
return (
<div style={{ width: 300, height: 300 }}>
<DataGridPro columns={columns} rows={rows} {...props} />
</div>
);
}

it('should not render list column when list view is not enabled', () => {
render(
<div style={{ width: 300, height: 300 }}>
<DataGridPro columns={columns} rows={rows} unstable_listColumn={listColumn} />
</div>,
);
expect(screen.queryByTestId('list-column')).to.equal(null);
});

it('should render list column when list view is enabled', () => {
render(
<div style={{ width: 300, height: 300 }}>
<DataGridPro
columns={columns}
rows={rows}
unstable_listView
unstable_listColumn={listColumn}
/>
</div>,
);
expect(screen.getByTestId('list-column')).not.to.equal(null);
expect(screen.getByTestId('list-column')).to.have.text('Title: test');
});

it('should render list column when `unstable_listView` prop updates', () => {
const { setProps } = render(<Test unstable_listColumn={listColumn} />);
expect(screen.queryByTestId('list-column')).to.equal(null);

setProps({ unstable_listView: true });

expect(screen.getByTestId('list-column')).not.to.equal(null);
expect(screen.getByTestId('list-column')).to.have.text('Title: test');

setProps({ unstable_listView: false });

expect(screen.queryByTestId('list-column')).to.equal(null);
});

it('should update cell contents when the `renderCell` function changes', () => {
const { setProps } = render(<Test unstable_listView unstable_listColumn={listColumn} />);

setProps({
unstable_listColumn: {
...listColumn,
renderCell: (params) => <div data-testid="list-column">ID: {params.row.id}</div>,
},
} as Partial<DataGridProProps>);

expect(screen.getByTestId('list-column')).to.have.text('ID: 123567');
});

it('should warn if the `unstable_listColumn` prop is not provided when `unstable_listView` is enabled', () => {
expect(() => {
render(
<div style={{ width: 300, height: 300 }}>
<DataGridPro columns={columns} rows={rows} unstable_listView />
</div>,
);
}).toWarnDev(
[
'MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.',
'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.',
'For more details, see https://mui.com/x/react-data-grid/list-view/',
].join('\n'),
);
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import { warnOnce } from '@mui/x-internals/warning';
import type { GridListColDef } from '../../../models/colDef/gridColDef';
import { GridStateInitializer } from '../../utils/useGridInitializeState';
import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -13,12 +14,14 @@ export const listViewStateInitializer: GridStateInitializer<
Pick<DataGridProcessedProps, 'unstable_listColumn'>
> = (state, props, apiRef) => ({
...state,
listViewColumn: { ...props.unstable_listColumn, computedWidth: getListColumnWidth(apiRef) },
listViewColumn: props.unstable_listColumn
? { ...props.unstable_listColumn, computedWidth: getListColumnWidth(apiRef) }
: undefined,
});

export function useGridListView(
apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
props: Pick<DataGridProcessedProps, 'unstable_listColumn'>,
props: Pick<DataGridProcessedProps, 'unstable_listView' | 'unstable_listColumn'>,
) {
/*
* EVENTS
@@ -68,6 +71,16 @@ export function useGridListView(
});
}
}, [apiRef, props.unstable_listColumn]);

React.useEffect(() => {
if (props.unstable_listView && !props.unstable_listColumn) {
warnOnce([
'MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.',
'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.',
'For more details, see https://mui.com/x/react-data-grid/list-view/',
]);
}
}, [props.unstable_listView, props.unstable_listColumn]);
}

function getListColumnWidth(apiRef: React.MutableRefObject<GridPrivateApiCommunity>) {
4 changes: 1 addition & 3 deletions packages/x-date-pickers/src/TimeClock/Clock.tsx
Original file line number Diff line number Diff line change
@@ -379,9 +379,7 @@ export function Clock(inProps: ClockProps) {
aria-activedescendant={selectedId}
aria-label={translations.clockLabelText(
type,
value,
utils,
value == null ? null : utils.format(value!, 'fullTime'),
value == null ? null : utils.format(value, 'fullTime'),
)}
ref={listboxRef}
role="listbox"
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ export const usePicker = <
]);
}
}
const pickerValueResponse = usePickerValue({
const pickerValueResponse = usePickerValue<TValue, TSection, TExternalProps>({
props,
valueManager,
valueType,
16 changes: 6 additions & 10 deletions packages/x-date-pickers/src/locales/beBY.ts
Original file line number Diff line number Diff line change
@@ -44,8 +44,8 @@ const beBYPickers: Partial<PickersLocaleText> = {
dateRangePickerToolbarTitle: 'Абраць каляндарны перыяд',

// Clock labels
clockLabelText: (view, time, utils, formattedTime) =>
`Абярыце ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Час не абраны' : `Абраны час ${formattedTime ?? utils.format(time!, 'fullTime')}`}`,
clockLabelText: (view, formattedTime) =>
`Абярыце ${views[view]}. ${!formattedTime ? 'Час не абраны' : `Абраны час ${formattedTime}`}`,
hoursClockNumberText: (hours) => `${hours} гадзін`,
minutesClockNumberText: (minutes) => `${minutes} хвілін`,
secondsClockNumberText: (seconds) => `${seconds} секунд`,
@@ -60,14 +60,10 @@ const beBYPickers: Partial<PickersLocaleText> = {
calendarWeekNumberText: (weekNumber) => `${weekNumber}`,

// Open picker labels
openDatePickerDialogue: (value, utils, formattedDate) =>
formattedDate || (value !== null && utils.isValid(value))
? `Абраць дату, абрана дата ${formattedDate ?? utils.format(value!, 'fullDate')}`
: 'Абраць дату',
openTimePickerDialogue: (value, utils, formattedTime) =>
formattedTime || (value !== null && utils.isValid(value))
? `Абраць час, абрыны час ${formattedTime ?? utils.format(value!, 'fullTime')}`
: 'Абраць час',
openDatePickerDialogue: (formattedDate) =>
formattedDate ? `Абраць дату, абрана дата ${formattedDate}` : 'Абраць дату',
openTimePickerDialogue: (formattedTime) =>
formattedTime ? `Абраць час, абрыны час ${formattedTime}` : 'Абраць час',
// fieldClearLabel: 'Clear',

// Table labels
16 changes: 6 additions & 10 deletions packages/x-date-pickers/src/locales/bgBG.ts
Original file line number Diff line number Diff line change
@@ -43,8 +43,8 @@ const bgBGPickers: Partial<PickersLocaleText> = {
dateRangePickerToolbarTitle: 'Избери времеви период',

// Clock labels
clockLabelText: (view, time, adapter) =>
`Избери ${views[view]}. ${time === null ? 'Не е избран час' : `Избраният час е ${adapter.format(time, 'fullTime')}`}`,
clockLabelText: (view, formattedTime) =>
`Избери ${views[view]}. ${!formattedTime ? 'Не е избран час' : `Избраният час е ${formattedTime}`}`,
hoursClockNumberText: (hours) => `${hours} часа`,
minutesClockNumberText: (minutes) => `${minutes} минути`,
secondsClockNumberText: (seconds) => `${seconds} секунди`,
@@ -59,14 +59,10 @@ const bgBGPickers: Partial<PickersLocaleText> = {
calendarWeekNumberText: (weekNumber) => `${weekNumber}`,

// Open picker labels
openDatePickerDialogue: (value, utils) =>
value !== null && utils.isValid(value)
? `Избери дата, избраната дата е ${utils.format(value!, 'fullDate')}`
: 'Избери дата',
openTimePickerDialogue: (value, utils) =>
value !== null && utils.isValid(value)
? `Избери час, избраният час е ${utils.format(value!, 'fullTime')}`
: 'Избери час',
openDatePickerDialogue: (formattedDate) =>
formattedDate ? `Избери дата, избраната дата е ${formattedDate}` : 'Избери дата',
openTimePickerDialogue: (formattedTime) =>
formattedTime ? `Избери час, избраният час е ${formattedTime}` : 'Избери час',
fieldClearLabel: 'Изчисти стойност',

// Table labels
16 changes: 6 additions & 10 deletions packages/x-date-pickers/src/locales/caES.ts
Original file line number Diff line number Diff line change
@@ -43,8 +43,8 @@ const caESPickers: Partial<PickersLocaleText> = {
dateRangePickerToolbarTitle: 'Seleccionar rang de dates',

// Clock labels
clockLabelText: (view, time, utils, formattedTime) =>
`Selecciona ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Hora no seleccionada' : `L'hora seleccionada és ${formattedTime ?? utils.format(time!, 'fullTime')}`}`,
clockLabelText: (view, formattedTime) =>
`Selecciona ${views[view]}. ${!formattedTime ? 'Hora no seleccionada' : `L'hora seleccionada és ${formattedTime}`}`,
hoursClockNumberText: (hours) => `${hours} hores`,
minutesClockNumberText: (minutes) => `${minutes} minuts`,
secondsClockNumberText: (seconds) => `${seconds} segons`,
@@ -59,14 +59,10 @@ const caESPickers: Partial<PickersLocaleText> = {
calendarWeekNumberText: (weekNumber) => `${weekNumber}`,

// Open picker labels
openDatePickerDialogue: (value, utils, formattedDate) =>
formattedDate || (value !== null && utils.isValid(value))
? `Tria la data, la data triada és ${formattedDate ?? utils.format(value!, 'fullDate')}`
: 'Tria la data',
openTimePickerDialogue: (value, utils, formattedTime) =>
formattedTime || (value !== null && utils.isValid(value))
? `Tria l'hora, l'hora triada és ${formattedTime ?? utils.format(value!, 'fullTime')}`
: "Tria l'hora",
openDatePickerDialogue: (formattedDate) =>
formattedDate ? `Tria la data, la data triada és ${formattedDate}` : 'Tria la data',
openTimePickerDialogue: (formattedTime) =>
formattedTime ? `Tria l'hora, l'hora triada és ${formattedTime}` : "Tria l'hora",
fieldClearLabel: 'Netega el valor',

// Table labels
16 changes: 6 additions & 10 deletions packages/x-date-pickers/src/locales/csCZ.ts
Original file line number Diff line number Diff line change
@@ -44,8 +44,8 @@ const csCZPickers: Partial<PickersLocaleText> = {
dateRangePickerToolbarTitle: 'Vyberete rozmezí dat',

// Clock labels
clockLabelText: (view, time, utils, formattedTime) =>
`${timeViews[view] ?? view} vybrány. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Není vybrán čas' : `Vybraný čas je ${formattedTime ?? utils.format(time!, 'fullTime')}`}`,
clockLabelText: (view, formattedTime) =>
`${timeViews[view] ?? view} vybrány. ${!formattedTime ? 'Není vybrán čas' : `Vybraný čas je ${formattedTime}`}`,
hoursClockNumberText: (hours) => `${hours} hodin`,
minutesClockNumberText: (minutes) => `${minutes} minut`,
secondsClockNumberText: (seconds) => `${seconds} sekund`,
@@ -60,14 +60,10 @@ const csCZPickers: Partial<PickersLocaleText> = {
calendarWeekNumberText: (weekNumber) => `${weekNumber}`,

// Open picker labels
openDatePickerDialogue: (value, utils, formattedDate) =>
formattedDate || (value !== null && utils.isValid(value))
? `Vyberte datum, vybrané datum je ${formattedDate ?? utils.format(value!, 'fullDate')}`
: 'Vyberte datum',
openTimePickerDialogue: (value, utils, formattedTime) =>
formattedTime || (value !== null && utils.isValid(value))
? `Vyberte čas, vybraný čas je ${formattedTime ?? utils.format(value!, 'fullTime')}`
: 'Vyberte čas',
openDatePickerDialogue: (formattedDate) =>
formattedDate ? `Vyberte datum, vybrané datum je ${formattedDate}` : 'Vyberte datum',
openTimePickerDialogue: (formattedTime) =>
formattedTime ? `Vyberte čas, vybraný čas je ${formattedTime}` : 'Vyberte čas',
fieldClearLabel: 'Vymazat',

// Table labels
Loading

0 comments on commit f8e43e7

Please sign in to comment.