Skip to content

Commit 1e0f933

Browse files
Hyperkid123Hyperkid123
committed
Update packages playgrounds to react 18
1 parent aec09c6 commit 1e0f933

File tree

7 files changed

+169
-142
lines changed

7 files changed

+169
-142
lines changed

‎packages/ant-component-mapper/demo/index.js‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
1-
/* eslint-disable */
2-
import React, { useState } from 'react';
3-
import ReactDOM from 'react-dom';
1+
import React from 'react';
2+
import { createRoot } from 'react-dom/client';
43
import { FormRenderer } from '@data-driven-forms/react-form-renderer';
54
import 'antd/dist/antd.css';
65
import './style.css';
7-
import demoSchema from '../../../shared/demoschema';
8-
import dualListSelectSchema from './demo-schemas/dual-list-select-schema'
96
import { componentMapper, FormTemplate } from '../src';
107
import wizardSchema from './demo-schemas/wizard-schema';
11-
import sliderSchema from './demo-schemas/slider-schema';
12-
import fieldArraySchema from './demo-schemas/field-array-schema';
138

149
const style = {
1510
position: 'relative',
16-
width:'70%',
17-
margin:'auto'
18-
}
11+
width: '70%',
12+
margin: 'auto',
13+
};
1914

2015
const App = () => (
2116
<div style={style}>
2217
<FormRenderer
2318
componentMapper={componentMapper}
24-
FormTemplate={(props) => <FormTemplate layout='vertical' {...props} />}
19+
FormTemplate={(props) => <FormTemplate layout="vertical" {...props} />}
2520
onSubmit={console.log}
2621
schema={wizardSchema}
2722
/>
2823
</div>
2924
);
3025

31-
ReactDOM.render(<App />, document.getElementById('root'));
26+
const container = document.getElementById('root');
27+
const root = createRoot(container);
28+
root.render(<App />);

‎packages/blueprint-component-mapper/demo/index.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/* eslint-disable */
1+
/* eslint-disable no-unused-vars */
22
import React from 'react';
3-
import ReactDOM from 'react-dom';
3+
import { createRoot } from 'react-dom';
44
import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
55
import { arraySchemaDDF } from './demo-schemas/widget-schema';
66
import { componentMapper, FormTemplate } from '../src';
@@ -10,7 +10,7 @@ import {
1010
wizardSchemaWithFunction,
1111
wizardSchemaSimple,
1212
wizardSchemaSubsteps,
13-
wizardSchemaMoreSubsteps
13+
wizardSchemaMoreSubsteps,
1414
} from './demo-schemas/wizard-schema';
1515
import sandboxSchema from './demo-schemas/sandbox';
1616
import demoSchema from '../../../shared/demoschema';
@@ -23,9 +23,9 @@ const fieldArrayState = {
2323
additionalOptions: {
2424
initialValues: {
2525
number: [1, 2, 3, 4],
26-
minMax: [null, null, null, null]
27-
}
28-
}
26+
minMax: [null, null, null, null],
27+
},
28+
},
2929
};
3030

3131
class App extends React.Component {
@@ -51,7 +51,7 @@ class App extends React.Component {
5151
onSubmit={console.log}
5252
componentMapper={{
5353
...componentMapper,
54-
summary: Summary
54+
summary: Summary,
5555
}}
5656
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
5757
onCancel={console.log}
@@ -64,4 +64,6 @@ class App extends React.Component {
6464
}
6565
}
6666

67-
ReactDOM.render(<App />, document.getElementById('root'));
67+
const container = document.getElementById('root');
68+
const root = createRoot(container);
69+
root.render(<App />);

‎packages/carbon-component-mapper/demo/index.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import { FormRenderer } from '@data-driven-forms/react-form-renderer';
44
import { arraySchemaDDF } from './demo-schemas/widget-schema';
55
import { componentMapper, FormTemplate } from '../src';
@@ -14,9 +14,9 @@ const fieldArrayState = {
1414
additionalOptions: {
1515
initialValues: {
1616
number: [1, 2, 3, 4],
17-
minMax: [null, null, null, null]
18-
}
19-
}
17+
minMax: [null, null, null, null],
18+
},
19+
},
2020
};
2121

2222
class App extends React.Component {
@@ -54,4 +54,6 @@ class App extends React.Component {
5454
}
5555
}
5656

57-
ReactDOM.render(<App />, document.getElementById('root'));
57+
const container = document.getElementById('root');
58+
const root = createRoot(container);
59+
root.render(<App />);

‎packages/mui-component-mapper/demo/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
44

55
import Grid from '@mui/material/Grid';
@@ -170,4 +170,6 @@ const App = () => {
170170
);
171171
};
172172

173-
ReactDOM.render(<App />, document.getElementById('root'));
173+
const container = document.getElementById('root');
174+
const root = createRoot(container);
175+
root.render(<App />);

‎packages/pf4-component-mapper/demo/index.js‎

Lines changed: 129 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,152 @@
1-
/* eslint-disable */
2-
import React from "react";
3-
import ReactDOM from "react-dom";
1+
import React from 'react';
2+
import { createRoot } from 'react-dom/client';
43
import { FormRenderer } from '@data-driven-forms/react-form-renderer';
54
import { arraySchemaDDF } from './demo-schemas/widget-schema';
65
import { componentMapper, FormTemplate } from '../src';
7-
import { Title, Button, Toolbar, ToolbarGroup, ToolbarItem, Modal } from '@patternfly/react-core';
8-
import { wizardSchema, wizardSchemaWithFunction, wizardSchemaSimple, wizardSchemaSubsteps, wizardSchemaMoreSubsteps } from './demo-schemas/wizard-schema';
6+
import { Title, Button, Toolbar, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
7+
import {
8+
wizardSchema,
9+
wizardSchemaWithFunction,
10+
wizardSchemaSimple,
11+
wizardSchemaSubsteps,
12+
wizardSchemaMoreSubsteps,
13+
} from './demo-schemas/wizard-schema';
914
import sandboxSchema from './demo-schemas/sandbox';
1015
import dualSchema from './demo-schemas/dual-list-schema';
1116
import demoSchema from '../../../shared/demoschema';
1217
import selectSchema from './demo-schemas/select-schema';
1318

14-
const Summary = props => <div>Custom summary component.</div>;
19+
const Summary = (props) => <div>Custom summary component.</div>;
1520

16-
const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {
21+
const fieldArrayState = {
22+
schema: arraySchemaDDF,
23+
additionalOptions: {
1724
initialValues: {
18-
number: [1,2,3,4],
19-
minMax: [null, null, null, null]
20-
}
21-
}};
25+
number: [1, 2, 3, 4],
26+
minMax: [null, null, null, null],
27+
},
28+
},
29+
};
2230

2331
class App extends React.Component {
24-
constructor(props) {
25-
super(props);
26-
this.state = {schema: wizardSchema, additionalOptions: {}}
27-
}
32+
constructor(props) {
33+
super(props);
34+
this.state = { schema: wizardSchema, additionalOptions: {} };
35+
}
2836

29-
render() {
30-
return (<div style={{ widht: '100%' }}>
37+
render() {
38+
return (
39+
<div style={{ widht: '100%' }}>
3140
<div style={{ maxWidth: 800, marginLeft: 'auto', marginRight: 'auto' }}>
32-
<Title headingLevel="h2" size="4xl">Pf4 component mapper</Title>
33-
<Toolbar style={{ marginBottom: 20, marginTop: 20 }}>
34-
<ToolbarGroup>
35-
<ToolbarItem>
36-
<Button onClick={() => this.setState(state => ({schema: selectSchema, additionalOptions: {}}))}>select schema</Button>
37-
</ToolbarItem>
38-
<ToolbarItem>
39-
<Button onClick={() => this.setState(state => ({ schema: wizardSchema, additionalOptions: { showFormControls: false, wizard: true } }))}>Wizard</Button>
40-
</ToolbarItem>
41-
<ToolbarItem>
42-
<Button onClick={() => this.setState(state => fieldArrayState)}>arraySchema</Button>
43-
</ToolbarItem>
44-
<ToolbarItem>
45-
<Button onClick={() => this.setState(state => ({ schema: sandboxSchema, additionalOptions: {}}))}>Sandbox</Button>
46-
</ToolbarItem>
47-
<ToolbarItem>
48-
<Button onClick={() => this.setState(state => ({ schema: demoSchema, additionalOptions: {}}))}>Super schema</Button>
49-
</ToolbarItem>
50-
<ToolbarItem>
51-
<Button onClick={() => this.setState(state => ({ schema: dualSchema, additionalOptions: {} }))}>Dual List</Button>
52-
</ToolbarItem>
53-
</ToolbarGroup>
54-
</Toolbar>
55-
<FormRenderer
41+
<Title headingLevel="h2" size="4xl">
42+
Pf4 component mapper
43+
</Title>
44+
<Toolbar style={{ marginBottom: 20, marginTop: 20 }}>
45+
<ToolbarGroup>
46+
<ToolbarItem>
47+
<Button onClick={() => this.setState((state) => ({ schema: selectSchema, additionalOptions: {} }))}>select schema</Button>
48+
</ToolbarItem>
49+
<ToolbarItem>
50+
<Button
51+
onClick={() => this.setState((state) => ({ schema: wizardSchema, additionalOptions: { showFormControls: false, wizard: true } }))}
52+
>
53+
Wizard
54+
</Button>
55+
</ToolbarItem>
56+
<ToolbarItem>
57+
<Button onClick={() => this.setState((state) => fieldArrayState)}>arraySchema</Button>
58+
</ToolbarItem>
59+
<ToolbarItem>
60+
<Button onClick={() => this.setState((state) => ({ schema: sandboxSchema, additionalOptions: {} }))}>Sandbox</Button>
61+
</ToolbarItem>
62+
<ToolbarItem>
63+
<Button onClick={() => this.setState((state) => ({ schema: demoSchema, additionalOptions: {} }))}>Super schema</Button>
64+
</ToolbarItem>
65+
<ToolbarItem>
66+
<Button onClick={() => this.setState((state) => ({ schema: dualSchema, additionalOptions: {} }))}>Dual List</Button>
67+
</ToolbarItem>
68+
</ToolbarGroup>
69+
</Toolbar>
70+
<FormRenderer
71+
onSubmit={console.log}
72+
initialValues={{
73+
'simple-select': 'Kay',
74+
'simple-async-select': 'Jenifer',
75+
'simple-searchable-async-select': 'Jenifer',
76+
'simple-portal-select': 'Jenifer',
77+
}}
78+
componentMapper={{
79+
...componentMapper,
80+
'dual-list-select': {
81+
component: componentMapper['dual-list-select'],
82+
renderStatus: ({ selected, options }) => `selected ${selected} from ${options}`,
83+
},
84+
summary: Summary,
85+
}}
86+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
87+
onCancel={console.log}
88+
schema={this.state.schema}
89+
uiSchema={this.state.ui}
90+
{...this.state.additionalOptions}
91+
/>
92+
{this.state.additionalOptions.wizard && (
93+
<>
94+
<div>Nextstep function</div>
95+
<FormRenderer
5696
onSubmit={console.log}
57-
initialValues={{
58-
'simple-select': 'Kay',
59-
'simple-async-select': 'Jenifer',
60-
'simple-searchable-async-select': 'Jenifer',
61-
'simple-portal-select': 'Jenifer'
97+
componentMapper={{
98+
...componentMapper,
99+
summary: Summary,
100+
}}
101+
onCancel={() => console.log('Cancel action')}
102+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
103+
schema={wizardSchemaWithFunction}
104+
{...this.state.additionalOptions}
105+
/>
106+
<div>Substeps</div>
107+
<FormRenderer
108+
onSubmit={console.log}
109+
componentMapper={{
110+
...componentMapper,
111+
summary: Summary,
112+
}}
113+
onCancel={() => console.log('Cancel action')}
114+
schema={wizardSchemaSubsteps}
115+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
116+
{...this.state.additionalOptions}
117+
/>
118+
<div>More substep</div>
119+
<FormRenderer
120+
onSubmit={console.log}
121+
componentMapper={{
122+
...componentMapper,
123+
summary: Summary,
62124
}}
125+
onCancel={() => console.log('Cancel action')}
126+
schema={wizardSchemaMoreSubsteps}
127+
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
128+
{...this.state.additionalOptions}
129+
/>
130+
<div>Simple wizard</div>
131+
<FormRenderer
132+
onSubmit={console.log}
63133
componentMapper={{
64-
...componentMapper,
65-
'dual-list-select': {
66-
component: componentMapper['dual-list-select'],
67-
renderStatus: ({selected, options}) => `selected ${selected} from ${options}`
68-
},
69-
summary: Summary
134+
...componentMapper,
135+
summary: Summary,
70136
}}
137+
onCancel={() => console.log('Cancel action')}
138+
schema={wizardSchemaSimple}
71139
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
72-
onCancel={console.log}
73-
schema={this.state.schema}
74-
uiSchema={this.state.ui}
75140
{...this.state.additionalOptions}
76-
/>
77-
{this.state.additionalOptions.wizard && <>
78-
<div>Nextstep function</div>
79-
<FormRenderer
80-
onSubmit={console.log}
81-
componentMapper={{
82-
...componentMapper,
83-
summary: Summary
84-
}}
85-
onCancel={() => console.log('Cancel action')}
86-
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
87-
schema={wizardSchemaWithFunction}
88-
{...this.state.additionalOptions}
89-
/>
90-
<div>Substeps</div>
91-
<FormRenderer
92-
onSubmit={console.log}
93-
componentMapper={{
94-
...componentMapper,
95-
summary: Summary
96-
}}
97-
onCancel={() => console.log('Cancel action')}
98-
schema={wizardSchemaSubsteps}
99-
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
100-
{...this.state.additionalOptions}
101-
/>
102-
<div>More substep</div>
103-
<FormRenderer
104-
onSubmit={console.log}
105-
componentMapper={{
106-
...componentMapper,
107-
summary: Summary
108-
}}
109-
onCancel={() => console.log('Cancel action')}
110-
schema={wizardSchemaMoreSubsteps}
111-
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
112-
{...this.state.additionalOptions}
113-
/>
114-
<div>Simple wizard</div>
115-
<FormRenderer
116-
onSubmit={console.log}
117-
componentMapper={{
118-
...componentMapper,
119-
summary: Summary
120-
}}
121-
onCancel={() => console.log('Cancel action')}
122-
schema={wizardSchemaSimple}
123-
FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}
124-
{...this.state.additionalOptions}
125-
/>
126-
</>}
141+
/>
142+
</>
143+
)}
127144
</div>
128-
</div>)
129-
};
145+
</div>
146+
);
147+
}
130148
}
131149

132-
ReactDOM.render(<App />, document.getElementById('root'));
150+
const container = document.getElementById('root');
151+
const root = createRoot(container);
152+
root.render(<App />);

0 commit comments

Comments
 (0)