Skip to content

Commit 3535cad

Browse files
Hyperkid123Hyperkid123
committed
feat(mui): Add typings to components.
1 parent 5ef3ee7 commit 3535cad

24 files changed

+435
-30
lines changed

‎packages/mui-component-mapper/rollup.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import sourcemaps from 'rollup-plugin-sourcemaps';
1313
import glob from 'glob';
1414
import path from 'path';
1515

16-
const outputPaths = [...glob.sync(path.resolve(__dirname, './src/files/*.tsx')), ...glob.sync(path.resolve(__dirname, './src/files/*.js'))];
16+
const outputPaths = glob.sync(path.resolve(__dirname, './src/files/*.js'));
1717

1818
const muiExternals = createFilter(
1919
[
@@ -89,7 +89,7 @@ const plugins = [
8989
];
9090

9191
export default {
92-
input: process.env.FORMAT === 'umd' ? './src/index.ts' : ['./src/index.ts', ...outputPaths],
92+
input: process.env.FORMAT === 'umd' ? './src/index.js' : ['./src/index.js', ...outputPaths],
9393
output: {
9494
...(process.env.FORMAT === 'umd'
9595
? {

‎packages/mui-component-mapper/src/files/checkbox.d.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,16 @@
1-
declare function Checkbox(props: object): void;
1+
import { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer';
2+
import { CheckboxProps as MuiCheckboxProps, GridProps, FormControlProps, FormGroupProps, FormControlLabelProps, FormLabelProps, FormHelperTextProps } from '@material-ui/core';
3+
4+
export interface CheckboxProps extends MuiCheckboxProps {
5+
FormFieldGridProps?: GridProps;
6+
FormControlProps?: FormControlProps;
7+
FormGroupProps?: FormGroupProps;
8+
FormControlLabelProps: FormControlLabelProps;
9+
CheckboxProps: MuiCheckboxProps;
10+
FormLabelProps: FormLabelProps;
11+
FormHelperTextProps: FormHelperTextProps;
12+
}
13+
14+
declare const Checkbox: React.ComponentType<CheckboxProps & UseFieldApiConfig>;
15+
216
export default Checkbox;

‎packages/mui-component-mapper/src/files/component-mapper.d.ts

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,41 @@
1-
declare const componentMapper: object;
2-
export const components: object;
1+
import { ComponentTypes } from '@data-driven-forms/react-form-renderer';
2+
3+
interface Components {
4+
TextField: React.ComponentType;
5+
Textarea: React.ComponentType;
6+
Select: React.ComponentType;
7+
Checkbox: React.ComponentType;
8+
Radio: React.ComponentType;
9+
Switch: React.ComponentType;
10+
DatePicker: React.ComponentType;
11+
TimePicker: React.ComponentType;
12+
PlainText: React.ComponentType;
13+
SubForm: React.ComponentType;
14+
Wizard: React.ComponentType;
15+
DualListSelect: React.ComponentType;
16+
Slider: React.ComponentType;
17+
}
18+
19+
interface componentMapper {
20+
[ComponentTypes.TEXT_FIELD]: React.ComponentType;
21+
[ComponentTypes.TEXTAREA]: React.ComponentType;
22+
[ComponentTypes.SELECT]: React.ComponentType;
23+
[ComponentTypes.CHECKBOX]: React.ComponentType;
24+
[ComponentTypes.SUB_FORM]: React.ComponentType;
25+
[ComponentTypes.RADIO]: React.ComponentType;
26+
[ComponentTypes.TABS]: React.ComponentType;
27+
[ComponentTypes.DATE_PICKER]: React.ComponentType;
28+
[ComponentTypes.TIME_PICKER]: React.ComponentType;
29+
[ComponentTypes.SWITCH]: React.ComponentType;
30+
[ComponentTypes.PLAIN_TEXT]: React.ComponentType;
31+
[ComponentTypes.WIZARD]: React.ComponentType;
32+
[ComponentTypes.FIELD_ARRAY]: React.ComponentType;
33+
[ComponentTypes.DUAL_LIST_SELECT]: React.ComponentType;
34+
[ComponentTypes.SLIDER]: React.ComponentType;
35+
}
36+
37+
declare const componentMapper: componentMapper;
38+
39+
export const Components: Components;
40+
341
export default componentMapper;

‎packages/mui-component-mapper/src/files/date-picker.d.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
declare function DatePicker(props: object): void;
1+
import { DatePickerProps as MuiDatePickerProps } from "material-ui-pickers/DatePicker";
2+
import { UseFieldApiConfig } from "@data-driven-forms/react-form-renderer";
3+
import { GridProps } from "@material-ui/core";
4+
import { MuiPickersUtilsProviderProps } from "material-ui-pickers/MuiPickersUtilsProvider";
5+
6+
export interface DatePickerProps extends MuiDatePickerProps {
7+
FormFieldGridProps: GridProps;
8+
MuiPickersUtilsProviderProps: MuiPickersUtilsProviderProps;
9+
DatePickerProps: MuiDatePickerProps;
10+
}
11+
12+
declare const DatePicker: React.ComponentType<DatePickerProps & UseFieldApiConfig>;
13+
214
export default DatePicker;

‎packages/mui-component-mapper/src/files/dual-list-select.d.ts

Lines changed: 106 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,107 @@
1-
declare function DualListSelect(props: object): void;
1+
import { UseFieldApiConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
2+
import { ReactNode } from "react";
3+
import {
4+
GridProps,
5+
ListProps,
6+
IconButtonProps,
7+
IconProps,
8+
ListItemProps,
9+
ListItemIconProps,
10+
ListItemTextProps,
11+
ListItemSecondaryActionProps,
12+
FormControlProps,
13+
FormLabelProps,
14+
FormHelperTextProps,
15+
TypographyProps,
16+
ToolbarProps,
17+
TextFieldProps
18+
} from "@material-ui/core";
19+
20+
export interface DualListOption extends AnyObject {
21+
value: any;
22+
label: ReactNode;
23+
}
24+
25+
export interface DualListSelectProps {
26+
leftTitle?: ReactNode;
27+
rightTitle?: ReactNode;
28+
moveLeftTitle?: ReactNode;
29+
moveRightTitle?: ReactNode;
30+
allToLeft?: boolean;
31+
allToRight?: boolean;
32+
checkboxVariant?: boolean;
33+
validateOnMount?: boolean;
34+
moveAllLeftTitle?: ReactNode;
35+
moveAllRightTitle?: ReactNode;
36+
label?: ReactNode;
37+
isRequired?: boolean;
38+
helperText?: ReactNode;
39+
noValueTitle?: ReactNode;
40+
noOptionsTitle?: ReactNode;
41+
filterOptionsTitle?: ReactNode;
42+
filterValueTitle?: ReactNode;
43+
filterValueText?: ReactNode;
44+
filterOptionsText?: ReactNode;
45+
description?: ReactNode;
46+
hideLabel?: boolean;
47+
id?: string;
48+
leftValues?: DualListOption[];
49+
rightValues?: DualListOption[];
50+
FormFieldGridProps?: GridProps;
51+
InternalGridProps?: GridProps;
52+
ListGridProps?: GridProps;
53+
LeftListGridProps?: GridProps;
54+
ListProps?: ListProps;
55+
LeftListProps?: ListProps;
56+
ButtonsGridProps?: GridProps;
57+
ButtonsInternalGridProps?: GridProps;
58+
ButtonGridProps?: GridProps;
59+
ToRightGridProps?: GridProps;
60+
IconButtonProps?: IconButtonProps;
61+
ToRightIconButtonProps?: IconButtonProps;
62+
IconProps?: IconProps;
63+
AllToLeftIconProps?: IconProps;
64+
AllToRightGridProps?: GridProps;
65+
AllToRightIconButtonProps?: IconButtonProps;
66+
AllToLeftGridProps?: GridProps;
67+
AllToLeftIconButtonProps?: IconButtonProps;
68+
ToLeftGridProps?: GridProps;
69+
ToLeftIconProps?: IconProps;
70+
ToLeftIconButtonProps?: IconButtonProps;
71+
RightListGridProps?: GridProps;
72+
RightListProps?: ListProps;
73+
ListItemProps?: ListItemProps;
74+
ListItemIconProps?: ListItemIconProps;
75+
ListItemTextProps?: ListItemTextProps;
76+
ListItemSecondaryActionProps?: ListItemSecondaryActionProps;
77+
LeftListItemProps?: ListItemProps;
78+
LeftListItemIconProps?: ListItemIconProps;
79+
LeftItemTextProps?: ListItemTextProps;
80+
LeftItemSecondaryActionProps?: ListItemSecondaryActionProps;
81+
RightListItemProps?: ListItemProps;
82+
RightListItemIconProps?: ListItemIconProps;
83+
RightItemTextProps?: ListItemTextProps;
84+
RightItemSecondaryActionProps?: ListItemSecondaryActionProps;
85+
FormControlProps?: FormControlProps;
86+
FormLabelProps?: FormLabelProps;
87+
FormHelperTextProps?: FormHelperTextProps;
88+
TitleProps?: TypographyProps;
89+
ToolbarProps?: ToolbarProps;
90+
FilterFieldProps?: TextFieldProps;
91+
SortIconButtonProps?: IconButtonProps;
92+
SortIconProps?: IconProps;
93+
LeftToolbarProps?: ToolbarProps;
94+
LeftFilterFieldProps?: TextFieldProps;
95+
LeftSortIconButtonProps?: IconButtonProps;
96+
LeftSortIconProps?: IconProps;
97+
LeftTitleProps?: TypographyProps;
98+
RightToolbarProps?: ToolbarProps;
99+
RightFilterFieldProps?: TextFieldProps;
100+
RightSortIconButtonProps?: IconButtonProps;
101+
RightSortIconProps?: IconProps;
102+
RightTitleProps?: TypographyProps;
103+
}
104+
105+
declare const DualListSelect: React.ComponentType<DualListSelectProps & UseFieldApiConfig>;
106+
2107
export default DualListSelect;

‎packages/mui-component-mapper/src/files/dual-list-select.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -544,7 +544,6 @@ DualListSelect.propTypes = {
544544
ToLeftIconProps: PropTypes.object,
545545
ToLeftIconButtonProps: PropTypes.object,
546546
RightListGridProps: PropTypes.object,
547-
RightListProp: PropTypes.object,
548547
RightListProps: PropTypes.object,
549548
ListItemProps: PropTypes.object,
550549
ListItemIconProps: PropTypes.object,

‎packages/mui-component-mapper/src/files/field-array.d.ts

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,24 @@
1-
declare function FieldArray(props: object): void;
1+
import { ReactNode } from "react";
2+
import { Field } from "@data-driven-forms/react-form-renderer";
3+
import { FormControlProps, GridProps } from "@material-ui/core";
4+
5+
export interface FieldArrayButtonLabels {
6+
add?: ReactNode;
7+
remove?: ReactNode;
8+
}
9+
10+
export interface FieldArrayProps {
11+
label?: ReactNode;
12+
description?: ReactNode;
13+
fields: Field[];
14+
defaultItem?: any;
15+
minItems?: number;
16+
maxItems?: number;
17+
noItemsMessage?: ReactNode;
18+
FormControlProps?: FormControlProps;
19+
FormFieldGridProps?: GridProps;
20+
buttonLabels?: FieldArrayButtonLabels;
21+
}
22+
23+
declare const FieldArray: React.ComponentType<FieldArrayProps>;
224
export default FieldArray;

‎packages/mui-component-mapper/src/files/form-template.d.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,12 @@
1-
declare function FormTemplate(props: object): void;
1+
export interface FormTemplateProps {
2+
FormWrapper?: React.ComponentType;
3+
Button?: React.ComponentType;
4+
ButtonGroup?: React.ComponentType;
5+
Title?: React.ComponentType;
6+
Description?: React.ComponentType;
7+
FormWrapperProps?: React.HTMLAttributes<HTMLFormElement>;
8+
}
9+
10+
declare const FormTemplate: React.ComponentType<FormTemplateProps>;
11+
212
export default FormTemplate;

‎packages/mui-component-mapper/src/files/plain-text.d.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
1-
declare function PlainText(props: object): void;
1+
import { TypographyProps } from "@material-ui/core";
2+
import { ReactNode } from "react";
3+
4+
export interface PlainTextProps extends TypographyProps {
5+
label: ReactNode;
6+
name: string;
7+
}
8+
9+
declare const PlainText: React.ComponentType<PlainTextProps>;
10+
211
export default PlainText;

‎packages/mui-component-mapper/src/files/plain-text.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import { Typography } from '@material-ui/core';
33
import PropTypes from 'prop-types';
44

55
const PlainText = ({ label, name, component, ...props }) =>
6-
label.split('\n').map((paragraph, index) => (
7-
<Typography key={`${index}-${name}`} {...props}>
8-
{paragraph}
9-
</Typography>
10-
));
6+
typeof label === 'string' ? (
7+
label.split('\n').map((paragraph, index) => (
8+
<Typography key={`${index}-${name}`} {...props}>
9+
{paragraph}
10+
</Typography>
11+
))
12+
) : (
13+
<Typography {...props}>{label}</Typography>
14+
);
1115

1216
PlainText.propTypes = {
1317
label: PropTypes.node.isRequired,

0 commit comments

Comments
 (0)