Skip to content

Commit ad71a9a

Browse files
rvsiarvsia
authored
Merge pull request #1152 from rvsia/migrateMapper
feat(mui): migrate to mui 5
2 parents 6576eb1 + 7044836 commit ad71a9a

File tree

96 files changed

+1978
-922
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

96 files changed

+1978
-922
lines changed

‎packages/ant-component-mapper/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@data-driven-forms/ant-component-mapper",
3-
"version": "3.12.2",
3+
"version": "3.15.3",
44
"description": "Ant Design React component mapper for Data Driven Forms.",
55
"main": "index.js",
66
"module": "esm/index.js",

‎packages/blueprint-component-mapper/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@data-driven-forms/blueprint-component-mapper",
3-
"version": "3.12.2",
3+
"version": "3.15.3",
44
"description": "BlueprintJS React component mapper for Data Driven Forms.",
55
"main": "index.js",
66
"module": "esm/index.js",

‎packages/carbon-component-mapper/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@data-driven-forms/carbon-component-mapper",
3-
"version": "3.12.2",
3+
"version": "3.15.3",
44
"description": "Carbon React component mapper for Data Driven Forms.",
55
"main": "index.js",
66
"module": "esm/index.js",
@@ -29,10 +29,10 @@
2929
"javascript"
3030
],
3131
"devDependencies": {
32-
"@carbon/icons-react": "^10.19.0",
33-
"@types/carbon-components-react": "^7.10.9",
34-
"carbon-components": "^10.22.0",
35-
"carbon-components-react": "^7.22.0",
32+
"@carbon/icons-react": "^10.41.0",
33+
"@types/carbon-components-react": "^7.44.1",
34+
"carbon-components": "^10.46.0",
35+
"carbon-components-react": "^7.46.0",
3636
"carbon-icons": "^7.0.7"
3737
},
3838
"peerDependencies": {},

‎packages/carbon-component-mapper/src/tests/time-picker-string.test.js

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
4+
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
5+
6+
import FormTemplate from '../form-template';
7+
import { act } from 'react-dom/test-utils';
8+
import TimePicker from '../time-picker';
9+
10+
describe('TimePicker<String>', () => {
11+
let initialProps;
12+
let onSubmit;
13+
let wrapper;
14+
let schema;
15+
16+
beforeEach(() => {
17+
onSubmit = jest.fn();
18+
initialProps = {
19+
onSubmit: (values) => onSubmit(values),
20+
componentMapper: {
21+
[componentTypes.TIME_PICKER]: {
22+
component: TimePicker,
23+
useStringFormat: true,
24+
},
25+
},
26+
FormTemplate,
27+
};
28+
});
29+
30+
it('change AM/PM', async () => {
31+
schema = {
32+
fields: [
33+
{
34+
component: componentTypes.TIME_PICKER,
35+
name: 'time-picker',
36+
twelveHoursFormat: true,
37+
},
38+
],
39+
};
40+
41+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
42+
43+
await act(async () => {
44+
wrapper.find('input').simulate('change', { target: { value: '00:35' } });
45+
});
46+
wrapper.update();
47+
48+
await act(async () => {
49+
wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'PM' } });
50+
});
51+
wrapper.update();
52+
53+
await act(async () => {
54+
wrapper.find('form').simulate('submit');
55+
});
56+
wrapper.update();
57+
58+
expect(wrapper.find('input').props().value).toEqual('00:35');
59+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 PM' });
60+
61+
onSubmit.mockReset();
62+
63+
await act(async () => {
64+
wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'AM' } });
65+
});
66+
wrapper.update();
67+
68+
await act(async () => {
69+
wrapper.find('form').simulate('submit');
70+
});
71+
wrapper.update();
72+
73+
expect(wrapper.find('input').props().value).toEqual('00:35');
74+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 AM' });
75+
});
76+
77+
it('does not handle invalid date', async () => {
78+
schema = {
79+
fields: [
80+
{
81+
component: componentTypes.TIME_PICKER,
82+
name: 'time-picker',
83+
},
84+
],
85+
};
86+
87+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
88+
89+
await act(async () => {
90+
wrapper.find('input').simulate('change', { target: { value: 'aa:BB' } });
91+
});
92+
wrapper.update();
93+
94+
await act(async () => {
95+
wrapper.find('input').simulate('blur');
96+
});
97+
wrapper.update();
98+
99+
await act(async () => {
100+
wrapper.find('form').simulate('submit');
101+
});
102+
wrapper.update();
103+
104+
expect(wrapper.find('input').props().value).toEqual('aa:BB');
105+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': 'aa:BB' });
106+
});
107+
108+
it('handle change', async () => {
109+
schema = {
110+
fields: [
111+
{
112+
component: componentTypes.TIME_PICKER,
113+
name: 'time-picker',
114+
},
115+
],
116+
};
117+
118+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
119+
120+
await act(async () => {
121+
wrapper.find('input').simulate('change', { target: { value: '13:87' } });
122+
});
123+
wrapper.update();
124+
125+
await act(async () => {
126+
wrapper.find('input').simulate('blur');
127+
});
128+
wrapper.update();
129+
130+
await act(async () => {
131+
wrapper.find('form').simulate('submit');
132+
});
133+
wrapper.update();
134+
135+
expect(wrapper.find('input').props().value).toEqual('13:87');
136+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '13:87' });
137+
onSubmit.mockReset();
138+
139+
await act(async () => {
140+
wrapper.find('input').simulate('change', { target: { value: '25:16' } });
141+
});
142+
wrapper.update();
143+
144+
await act(async () => {
145+
wrapper.find('input').simulate('blur');
146+
});
147+
wrapper.update();
148+
149+
await act(async () => {
150+
wrapper.find('form').simulate('submit');
151+
});
152+
wrapper.update();
153+
154+
expect(wrapper.find('input').props().value).toEqual('25:16');
155+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '25:16' });
156+
});
157+
158+
it('change timezone', async () => {
159+
schema = {
160+
fields: [
161+
{
162+
component: componentTypes.TIME_PICKER,
163+
name: 'time-picker',
164+
twelveHoursFormat: true,
165+
timezones: [
166+
{ label: 'UTC', value: 'UTC' },
167+
{ label: 'EST', value: 'EAST' },
168+
],
169+
},
170+
],
171+
};
172+
173+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
174+
175+
await act(async () => {
176+
wrapper.find('input').simulate('change', { target: { value: '00:35' } });
177+
});
178+
wrapper.update();
179+
180+
await act(async () => {
181+
wrapper.find('select#time-picker-timezones').simulate('change', { target: { value: 'EST' } });
182+
});
183+
wrapper.update();
184+
185+
await act(async () => {
186+
wrapper.find('form').simulate('submit');
187+
});
188+
wrapper.update();
189+
190+
expect(wrapper.find('input').props().value).toEqual('00:35');
191+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 AM EST' });
192+
193+
onSubmit.mockReset();
194+
195+
await act(async () => {
196+
wrapper.find('select#time-picker-12h').simulate('change', { target: { value: 'UTC' } });
197+
});
198+
wrapper.update();
199+
200+
await act(async () => {
201+
wrapper.find('form').simulate('submit');
202+
});
203+
wrapper.update();
204+
205+
expect(wrapper.find('input').props().value).toEqual('00:35');
206+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 UTC EST' });
207+
});
208+
209+
it('handles initial value', async () => {
210+
schema = {
211+
fields: [
212+
{
213+
component: componentTypes.TIME_PICKER,
214+
name: 'time-picker',
215+
initialValue: '12:57 PM EAST',
216+
twelveHoursFormat: true,
217+
timezones: [
218+
{ label: 'UTC', value: 'UTC' },
219+
{ label: 'EST', value: 'EAST' },
220+
],
221+
},
222+
],
223+
};
224+
225+
wrapper = mount(<FormRenderer schema={schema} {...initialProps} />);
226+
227+
expect(wrapper.find('input').props().value).toEqual('12:57');
228+
229+
await act(async () => {
230+
wrapper.find('input').simulate('change', { target: { value: '00:35' } });
231+
});
232+
wrapper.update();
233+
234+
await act(async () => {
235+
wrapper.find('form').simulate('submit');
236+
});
237+
wrapper.update();
238+
239+
expect(onSubmit).toHaveBeenLastCalledWith({ 'time-picker': '00:35 PM EAST' });
240+
});
241+
});

‎packages/carbon-component-mapper/src/tests/time-picker.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,9 +130,9 @@ describe('TimePicker', () => {
130130
});
131131
wrapper.update();
132132

133-
expect(wrapper.find('input').props().value).toEqual('13:28');
133+
expect(wrapper.find('input').props().value).toEqual('13:27');
134134
expect(onSubmit.mock.calls[0][0]['time-picker'].getHours()).toEqual(13);
135-
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(28);
135+
expect(onSubmit.mock.calls[0][0]['time-picker'].getMinutes()).toEqual(27);
136136
onSubmit.mockReset();
137137

138138
await act(async () => {

‎packages/carbon-component-mapper/src/time-picker-base/index.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './time-picker-base';
2+
export * from './time-picker-base';

‎packages/carbon-component-mapper/src/time-picker-base/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './time-picker-base';
2+
export * from './time-picker-base';

‎packages/carbon-component-mapper/src/time-picker-base/time-picker-base.d.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ReactNode } from "react";
2+
import { AnyObject, Input } from "@data-driven-forms/react-form-renderer";
3+
4+
import { FormGroupProps } from "../form-group";
5+
6+
import { TimePickerProps as CarbonTimePickerProps, SelectItemProps } from 'carbon-components-react';
7+
8+
export interface Timezone extends SelectItemProps {
9+
value: string;
10+
label?: string;
11+
}
12+
13+
interface InternalTimePickerBaseProps extends CarbonTimePickerProps, AnyObject {
14+
twelveHoursFormat?: boolean;
15+
timezones?: Timezone[];
16+
input: Input<any>;
17+
enhnancedOnBlur?: () => void;
18+
enhancedOnChange?: (value: string) => void;
19+
finalValue: any;
20+
warnText?: ReactNode;
21+
selectFormat: (value: 'AM' | 'PM') => void;
22+
selectTimezone: (value: string) => void;
23+
}
24+
25+
export type TimePickerBaseProps = InternalTimePickerBaseProps & FormGroupProps;
26+
27+
declare const TimePickerBase: React.ComponentType<TimePickerBaseProps>;
28+
29+
export default TimePickerBase;

0 commit comments

Comments
 (0)