Skip to content

Commit 7a15615

Browse files
MadeorskMadeorsk
committed
Allow to theme all inputs.
1 parent 4938e25 commit 7a15615

9 files changed

Lines changed: 432 additions & 103 deletions

File tree

‎packages/ra-ui-materialui/src/input/BooleanInput.tsx‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ import FormHelperText from '@mui/material/FormHelperText';
66
import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
77
import Switch, { SwitchProps } from '@mui/material/Switch';
88
import { FieldTitle, useInput } from 'ra-core';
9+
import {
10+
ComponentsOverrides,
11+
styled,
12+
useThemeProps,
13+
} from '@mui/material/styles';
914

1015
import { CommonInputProps } from './CommonInputProps';
1116
import { sanitizeInputRestProps } from './sanitizeInputRestProps';
@@ -32,7 +37,10 @@ export const BooleanInput = (props: BooleanInputProps) => {
3237
options = defaultOptions,
3338
sx,
3439
...rest
35-
} = props;
40+
} = useThemeProps({
41+
props: props,
42+
name: PREFIX,
43+
});
3644
const {
3745
id,
3846
field,
@@ -65,7 +73,7 @@ export const BooleanInput = (props: BooleanInputProps) => {
6573
const renderHelperText = helperText !== false || invalid;
6674

6775
return (
68-
<FormGroup
76+
<StyledFormGroup
6977
className={clsx('ra-input', `ra-input-${source}`, className)}
7078
row={row}
7179
sx={sx}
@@ -102,7 +110,7 @@ export const BooleanInput = (props: BooleanInputProps) => {
102110
/>
103111
</FormHelperText>
104112
) : null}
105-
</FormGroup>
113+
</StyledFormGroup>
106114
);
107115
};
108116

@@ -113,3 +121,29 @@ export type BooleanInputProps = CommonInputProps &
113121
};
114122

115123
const defaultOptions = {};
124+
125+
const PREFIX = 'RaBooleanInput';
126+
127+
const StyledFormGroup = styled(FormGroup, {
128+
name: PREFIX,
129+
overridesResolver: (props, styles) => styles.root,
130+
})({});
131+
132+
declare module '@mui/material/styles' {
133+
interface ComponentNameToClassKey {
134+
[PREFIX]: 'root';
135+
}
136+
137+
interface ComponentsPropsList {
138+
[PREFIX]: Partial<BooleanInputProps>;
139+
}
140+
141+
interface Components {
142+
[PREFIX]?: {
143+
defaultProps?: ComponentsPropsList[typeof PREFIX];
144+
styleOverrides?: ComponentsOverrides<
145+
Omit<Theme, 'components'>
146+
>[typeof PREFIX];
147+
};
148+
}
149+
}

‎packages/ra-ui-materialui/src/input/DatagridInput.tsx‎

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,22 @@ import {
88
useChoicesContext,
99
useInput,
1010
} from 'ra-core';
11+
import {
12+
ComponentsOverrides,
13+
styled,
14+
useThemeProps,
15+
} from '@mui/material/styles';
16+
1117
import { CommonInputProps } from './CommonInputProps';
1218
import { InputHelperText } from './InputHelperText';
1319
import { SupportCreateSuggestionOptions } from './useSupportCreateSuggestion';
14-
import { Datagrid, DatagridProps } from '../list/datagrid';
15-
import { FilterButton, FilterForm } from '../list/filter';
16-
import { FilterContext } from '../list/FilterContext';
20+
import {
21+
Datagrid,
22+
DatagridProps,
23+
FilterButton,
24+
FilterForm,
25+
FilterContext,
26+
} from '../list';
1727
import { Pagination as DefaultPagination } from '../list/pagination';
1828

1929
const defaultPagination = <DefaultPagination />;
@@ -49,7 +59,12 @@ const defaultPagination = <DefaultPagination />;
4959
* </Edit>
5060
* );
5161
*/
52-
export const DatagridInput = (props: DatagridInputProps) => {
62+
export const DatagridInput = (inProps: DatagridInputProps) => {
63+
const props = useThemeProps({
64+
props: inProps,
65+
name: PREFIX,
66+
});
67+
5368
const {
5469
choices,
5570
className,
@@ -121,7 +136,7 @@ export const DatagridInput = (props: DatagridInputProps) => {
121136
]
122137
);
123138
return (
124-
<div className={clsx('ra-input', `ra-input-${source}`, className)}>
139+
<Root className={clsx('ra-input', `ra-input-${source}`, className)}>
125140
{/* @ts-ignore FIXME cannot find another way to fix this error: "Types of property 'isPending' are incompatible: Type 'boolean' is not assignable to type 'false'." */}
126141
<ListContextProvider value={listContext}>
127142
{filters ? (
@@ -153,7 +168,7 @@ export const DatagridInput = (props: DatagridInputProps) => {
153168
error={fieldState.error?.message || fetchError?.message}
154169
/>
155170
</ListContextProvider>
156-
</div>
171+
</Root>
157172
);
158173
};
159174

@@ -169,3 +184,29 @@ export type DatagridInputProps = Omit<
169184
filters?: ReactElement | ReactElement[];
170185
pagination?: ReactElement | false;
171186
};
187+
188+
const PREFIX = 'RaDatagridInput';
189+
190+
const Root = styled('div', {
191+
name: PREFIX,
192+
overridesResolver: (props, styles) => styles.root,
193+
})({});
194+
195+
declare module '@mui/material/styles' {
196+
interface ComponentNameToClassKey {
197+
[PREFIX]: 'root';
198+
}
199+
200+
interface ComponentsPropsList {
201+
[PREFIX]: Partial<DatagridInputProps>;
202+
}
203+
204+
interface Components {
205+
[PREFIX]?: {
206+
defaultProps?: ComponentsPropsList[typeof PREFIX];
207+
styleOverrides?: ComponentsOverrides<
208+
Omit<Theme, 'components'>
209+
>[typeof PREFIX];
210+
};
211+
}
212+
}

‎packages/ra-ui-materialui/src/input/DateInput.tsx‎

Lines changed: 54 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import * as React from 'react';
22
import clsx from 'clsx';
33
import TextField, { TextFieldProps } from '@mui/material/TextField';
44
import { useInput, FieldTitle, useEvent } from 'ra-core';
5+
import {
6+
ComponentsOverrides,
7+
styled,
8+
useThemeProps,
9+
} from '@mui/material/styles';
510

611
import { CommonInputProps } from './CommonInputProps';
712
import { sanitizeInputRestProps } from './sanitizeInputRestProps';
@@ -46,23 +51,28 @@ import { useForkRef } from '@mui/material';
4651
* to convert the form value (which is always a date string) back to a Date object.
4752
* <DateInput source="published_at" parse={val => new Date(val)} />
4853
*/
49-
export const DateInput = ({
50-
className,
51-
defaultValue,
52-
format = defaultFormat,
53-
label,
54-
source,
55-
resource,
56-
helperText,
57-
margin,
58-
onChange,
59-
onFocus,
60-
validate,
61-
variant,
62-
disabled,
63-
readOnly,
64-
...rest
65-
}: DateInputProps) => {
54+
export const DateInput = (props: DateInputProps) => {
55+
const {
56+
className,
57+
defaultValue,
58+
format = defaultFormat,
59+
label,
60+
source,
61+
resource,
62+
helperText,
63+
margin,
64+
onChange,
65+
onFocus,
66+
validate,
67+
variant,
68+
disabled,
69+
readOnly,
70+
...rest
71+
} = useThemeProps({
72+
props: props,
73+
name: PREFIX,
74+
});
75+
6676
const { field, fieldState, id, isRequired } = useInput({
6777
defaultValue,
6878
resource,
@@ -179,7 +189,7 @@ export const DateInput = ({
179189
const inputRef = useForkRef(ref, localInputRef);
180190

181191
return (
182-
<TextField
192+
<StyledTextField
183193
id={id}
184194
name={name}
185195
inputRef={inputRef}
@@ -292,3 +302,29 @@ const defaultFormat = (value: string | Date | number) => {
292302
// other values (e.g., localized date strings, timestamps) need to be converted to Dates first
293303
return convertDateToString(new Date(value));
294304
};
305+
306+
const PREFIX = 'RaDateInput';
307+
308+
const StyledTextField = styled(TextField, {
309+
name: PREFIX,
310+
overridesResolver: (props, styles) => styles.root,
311+
})({});
312+
313+
declare module '@mui/material/styles' {
314+
interface ComponentNameToClassKey {
315+
[PREFIX]: 'root';
316+
}
317+
318+
interface ComponentsPropsList {
319+
[PREFIX]: Partial<DateInputProps>;
320+
}
321+
322+
interface Components {
323+
[PREFIX]?: {
324+
defaultProps?: ComponentsPropsList[typeof PREFIX];
325+
styleOverrides?: ComponentsOverrides<
326+
Omit<Theme, 'components'>
327+
>[typeof PREFIX];
328+
};
329+
}
330+
}

‎packages/ra-ui-materialui/src/input/DateTimeInput.tsx‎

Lines changed: 55 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import * as React from 'react';
22
import clsx from 'clsx';
33
import TextField, { TextFieldProps } from '@mui/material/TextField';
44
import { useInput, FieldTitle } from 'ra-core';
5+
import {
6+
ComponentsOverrides,
7+
styled,
8+
useThemeProps,
9+
} from '@mui/material/styles';
510

611
import { CommonInputProps } from './CommonInputProps';
712
import { sanitizeInputRestProps } from './sanitizeInputRestProps';
@@ -11,24 +16,29 @@ import { useForkRef } from '@mui/material';
1116
/**
1217
* Input component for entering a date and a time with timezone, using the browser locale
1318
*/
14-
export const DateTimeInput = ({
15-
className,
16-
defaultValue,
17-
format = formatDateTime,
18-
label,
19-
helperText,
20-
margin,
21-
onBlur,
22-
onChange,
23-
onFocus,
24-
source,
25-
resource,
26-
validate,
27-
variant,
28-
disabled,
29-
readOnly,
30-
...rest
31-
}: DateTimeInputProps) => {
19+
export const DateTimeInput = (props: DateTimeInputProps) => {
20+
const {
21+
className,
22+
defaultValue,
23+
format = formatDateTime,
24+
label,
25+
helperText,
26+
margin,
27+
onBlur,
28+
onChange,
29+
onFocus,
30+
source,
31+
resource,
32+
validate,
33+
variant,
34+
disabled,
35+
readOnly,
36+
...rest
37+
} = useThemeProps({
38+
props: props,
39+
name: PREFIX,
40+
});
41+
3242
const { field, fieldState, id, isRequired } = useInput({
3343
defaultValue,
3444
onBlur,
@@ -138,7 +148,7 @@ export const DateTimeInput = ({
138148
const inputRef = useForkRef(ref, localInputRef);
139149

140150
return (
141-
<TextField
151+
<StyledTextField
142152
id={id}
143153
inputRef={inputRef}
144154
name={name}
@@ -230,3 +240,29 @@ const formatDateTime = (value: string | Date) => {
230240

231241
return convertDateToString(new Date(value));
232242
};
243+
244+
const PREFIX = 'RaDateTimeInput';
245+
246+
const StyledTextField = styled(TextField, {
247+
name: PREFIX,
248+
overridesResolver: (props, styles) => styles.root,
249+
})({});
250+
251+
declare module '@mui/material/styles' {
252+
interface ComponentNameToClassKey {
253+
[PREFIX]: 'root';
254+
}
255+
256+
interface ComponentsPropsList {
257+
[PREFIX]: Partial<DateTimeInputProps>;
258+
}
259+
260+
interface Components {
261+
[PREFIX]?: {
262+
defaultProps?: ComponentsPropsList[typeof PREFIX];
263+
styleOverrides?: ComponentsOverrides<
264+
Omit<Theme, 'components'>
265+
>[typeof PREFIX];
266+
};
267+
}
268+
}

0 commit comments

Comments
 (0)