Skip to content

Commit f63025d

Browse files
Hyperkid123Hyperkid123
committed
Extracted component schema and variants to page.
1 parent 59d1bfb commit f63025d

File tree

19 files changed

+792
-66
lines changed

19 files changed

+792
-66
lines changed

‎packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,45 @@
11
import React, { Fragment } from 'react';
22
import ComponentText from '@docs/components/component-example-text';
3-
import useComponentExample from '@docs/hooks/use-component-example';
4-
import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
3+
import CheckboxText from '@docs/doc-components/checkbox';
4+
import useActiveMapper from '@docs/hooks/use-active-mapper';
5+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
6+
import baseFieldProps from '../../src/helpers/base-field-props';
7+
8+
const schema = {
9+
fields: [
10+
{
11+
component: componentTypes.CHECKBOX,
12+
label: 'Checkbox',
13+
name: 'checkbox',
14+
options: [
15+
{ label: 'Dog', value: '1' },
16+
{ label: 'Cats', value: '2' },
17+
{ label: 'Hamsters', value: '3' }
18+
]
19+
}
20+
]
21+
};
22+
const variants = [
23+
...baseFieldProps,
24+
{
25+
name: 'options',
26+
type: 'array',
27+
required: false
28+
}
29+
];
530

631
export default () => {
7-
const [component, baseStructure, activeMapper] = useComponentExample();
32+
const activeMapper = useActiveMapper();
833
return (
934
<Fragment>
10-
<ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
11-
{activeMapper === 'mui' && <CheckboxText />}
35+
<ComponentText
36+
activeMapper={activeMapper}
37+
component={componentTypes.CHECKBOX}
38+
schema={schema}
39+
ContentText={CheckboxText}
40+
variants={variants}
41+
linkText="Checkbox multiple"
42+
/>
1243
</Fragment>
1344
);
1445
};

‎packages/react-renderer-demo/src/app/pages/component-example/checkbox.js

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,40 @@
11
import React, { Fragment } from 'react';
22
import ComponentText from '@docs/components/component-example-text';
3-
import useComponentExample from '@docs/hooks/use-component-example';
4-
import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
3+
import GenericMuiComponent from '@docs/doc-components/checkbox';
4+
import useActiveMapper from '@docs/hooks/use-active-mapper';
5+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
6+
import baseFieldProps from '../../src/helpers/base-field-props';
7+
8+
const schema = {
9+
fields: [
10+
{
11+
component: componentTypes.CHECKBOX,
12+
label: 'Checkbox',
13+
name: 'checkbox'
14+
}
15+
]
16+
};
17+
const variants = [
18+
...baseFieldProps,
19+
{
20+
name: 'options',
21+
type: 'array',
22+
required: false
23+
}
24+
];
525

626
export default () => {
7-
const [component, baseStructure, activeMapper] = useComponentExample();
27+
const activeMapper = useActiveMapper();
828
return (
929
<Fragment>
10-
<ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
11-
{activeMapper === 'mui' && <CheckboxText />}
30+
<ComponentText
31+
activeMapper={activeMapper}
32+
component={componentTypes.CHECKBOX}
33+
schema={schema}
34+
ContentText={GenericMuiComponent}
35+
variants={variants}
36+
linkText="Checkbox"
37+
/>
1238
</Fragment>
1339
);
1440
};

‎packages/react-renderer-demo/src/app/pages/component-example/date-picker.js

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,55 @@
11
import React, { Fragment } from 'react';
22
import ComponentText from '@docs/components/component-example-text';
3-
import useComponentExample from '@docs/hooks/use-component-example';
4-
import DatePickerText from '@docs/components/mui-definitions/date-picker-text.md';
3+
import DatePickerText from '@docs/doc-components/date-picker';
4+
import useActiveMapper from '@docs/hooks/use-active-mapper';
5+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
6+
import baseFieldProps from '../../src/helpers/base-field-props';
7+
8+
const schema = {
9+
fields: [
10+
{
11+
component: componentTypes.DATE_PICKER,
12+
label: 'Date Picker',
13+
name: 'date-picker'
14+
}
15+
]
16+
};
17+
const variants = [
18+
...baseFieldProps,
19+
{
20+
name: 'showTodayButton',
21+
type: 'boolean',
22+
required: false
23+
},
24+
{
25+
name: 'todayButtonLabel',
26+
type: 'string',
27+
required: false
28+
},
29+
{
30+
name: 'closeOnDaySelect',
31+
type: 'boolean',
32+
required: false
33+
},
34+
{
35+
name: 'isClearable',
36+
type: 'boolean',
37+
required: false
38+
}
39+
];
540

641
export default () => {
7-
const [component, baseStructure, activeMapper] = useComponentExample();
42+
const activeMapper = useActiveMapper();
843
return (
944
<Fragment>
10-
<ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
45+
<ComponentText
46+
activeMapper={activeMapper}
47+
component={componentTypes.DATE_PICKER}
48+
schema={schema}
49+
ContentText={DatePickerText}
50+
variants={variants}
51+
linkText="Date picker"
52+
/>
1153
{activeMapper === 'mui' && <DatePickerText />}
1254
</Fragment>
1355
);

‎packages/react-renderer-demo/src/app/pages/component-example/dual-list-select.js

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,55 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
22
import ComponentText from '@docs/components/component-example-text';
3-
import useComponentExample from '@docs/hooks/use-component-example';
3+
import DualListSelect from '@docs/doc-components/dual-list-select';
4+
import useActiveMapper from '@docs/hooks/use-active-mapper';
5+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
6+
import baseFieldProps from '../../src/helpers/base-field-props';
7+
8+
const schema = {
9+
fields: [
10+
{
11+
component: componentTypes.DUAL_LIST_SELECT,
12+
name: 'dual-list-select',
13+
options: [
14+
{
15+
value: 'cats',
16+
label: 'cats'
17+
},
18+
{
19+
value: 'cats_1',
20+
label: 'cats_1'
21+
},
22+
{
23+
value: 'cats_2',
24+
label: 'cats_2'
25+
},
26+
{
27+
value: 'zebras',
28+
label: 'zebras'
29+
},
30+
{
31+
value: 'pigeons',
32+
label: 'pigeons'
33+
}
34+
]
35+
}
36+
]
37+
};
38+
39+
const variants = [...baseFieldProps];
440

541
export default () => {
6-
const [component, baseStructure, activeMapper] = useComponentExample();
7-
return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
42+
const activeMapper = useActiveMapper();
43+
return (
44+
<Fragment>
45+
<ComponentText
46+
activeMapper={activeMapper}
47+
component={componentTypes.DUAL_LIST_SELECT}
48+
schema={schema}
49+
ContentText={DualListSelect}
50+
variants={variants}
51+
linkText="Dual list select"
52+
/>
53+
</Fragment>
54+
);
855
};

‎packages/react-renderer-demo/src/app/pages/component-example/field-array.js

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,40 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
22
import ComponentText from '@docs/components/component-example-text';
3-
import useComponentExample from '@docs/hooks/use-component-example';
3+
import FieldArray from '@docs/doc-components/field-array';
4+
import useActiveMapper from '@docs/hooks/use-active-mapper';
5+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
6+
import arraySchemaDDF from '../../src/components/navigation/field-array-schema';
7+
8+
const variants = [
9+
{
10+
name: 'name',
11+
type: 'string',
12+
required: true
13+
},
14+
{
15+
name: 'label',
16+
type: 'string',
17+
required: false
18+
},
19+
{
20+
name: 'description',
21+
type: 'string',
22+
required: false
23+
}
24+
];
425

526
export default () => {
6-
const [component, baseStructure, activeMapper] = useComponentExample();
7-
return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
27+
const activeMapper = useActiveMapper();
28+
return (
29+
<Fragment>
30+
<ComponentText
31+
activeMapper={activeMapper}
32+
component={componentTypes.FIELD_ARRAY}
33+
schema={arraySchemaDDF}
34+
ContentText={FieldArray}
35+
variants={variants}
36+
linkText="Field Array"
37+
/>
38+
</Fragment>
39+
);
840
};

‎packages/react-renderer-demo/src/app/pages/component-example/plain-text.js

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,45 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
22
import ComponentText from '@docs/components/component-example-text';
3-
import useComponentExample from '@docs/hooks/use-component-example';
3+
import GenericMuiComponent from '@docs/doc-components/plain-text';
4+
import useActiveMapper from '@docs/hooks/use-active-mapper';
5+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
6+
7+
const schema = {
8+
fields: [
9+
{
10+
component: componentTypes.PLAIN_TEXT,
11+
name: 'plain-text-component',
12+
label: `Lorem ipsum sem velit. Mauris scelerisque tortor sed lorem dapibus, bibendum scelerisque ligula consequat. Quisque fringilla luctus.
13+
Vestibulum vulputate inceptos himenaeos.`
14+
}
15+
]
16+
};
17+
18+
const variants = [
19+
{
20+
name: 'name',
21+
type: 'string',
22+
required: true
23+
},
24+
{
25+
name: 'label',
26+
type: 'string',
27+
required: true
28+
}
29+
];
430

531
export default () => {
6-
const [component, baseStructure, activeMapper] = useComponentExample();
7-
return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />;
32+
const activeMapper = useActiveMapper();
33+
return (
34+
<Fragment>
35+
<ComponentText
36+
activeMapper={activeMapper}
37+
component={componentTypes.PLAIN_TEXT}
38+
schema={schema}
39+
ContentText={GenericMuiComponent}
40+
variants={variants}
41+
linkText="Plain text"
42+
/>
43+
</Fragment>
44+
);
845
};

‎packages/react-renderer-demo/src/app/pages/component-example/radio.js

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,45 @@
11
import React, { Fragment } from 'react';
22
import ComponentText from '@docs/components/component-example-text';
3-
import useComponentExample from '@docs/hooks/use-component-example';
4-
import RadioText from '@docs/components/mui-definitions/radio-text.md';
3+
import GenericMuiComponent from '@docs/doc-components/radio';
4+
import useActiveMapper from '@docs/hooks/use-active-mapper';
5+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
6+
import baseFieldProps from '../../src/helpers/base-field-props';
7+
8+
const schema = {
9+
fields: [
10+
{
11+
component: componentTypes.RADIO,
12+
label: 'Radio',
13+
name: 'radio',
14+
options: [
15+
{ label: 'Dogs', value: '1' },
16+
{ label: 'Cats', value: '2' },
17+
{ label: 'Hamsters', value: '3' }
18+
]
19+
}
20+
]
21+
};
22+
const variants = [
23+
...baseFieldProps,
24+
{
25+
name: 'options',
26+
type: 'array',
27+
required: false
28+
}
29+
];
530

631
export default () => {
7-
const [component, baseStructure, activeMapper] = useComponentExample();
32+
const activeMapper = useActiveMapper();
833
return (
934
<Fragment>
10-
<ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} />
11-
{activeMapper === 'mui' && <RadioText />}
35+
<ComponentText
36+
activeMapper={activeMapper}
37+
component={componentTypes.RADIO}
38+
schema={schema}
39+
ContentText={GenericMuiComponent}
40+
variants={variants}
41+
linkText="Radio"
42+
/>
1243
</Fragment>
1344
);
1445
};

0 commit comments

Comments
 (0)