Skip to content

Commit 5d264eb

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #656 from rvsia/updateAntDemo
Update ant demo
2 parents 1cd0d7f + 327ed3e commit 5d264eb

File tree

13 files changed

+343
-8
lines changed

13 files changed

+343
-8
lines changed

‎packages/react-renderer-demo/public/ant-logo.svg

Lines changed: 43 additions & 0 deletions
Loading

‎packages/react-renderer-demo/scripts/generate-component-examples.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ const availableMappers = [
99
{ title: 'PF4', mapper: 'pf4' },
1010
{ title: 'PF3', mapper: 'pf3' },
1111
{ title: 'BJS', mapper: 'blueprint' },
12-
{ title: 'SUIR', mapper: 'suir' }
12+
{ title: 'SUIR', mapper: 'suir' },
13+
{ title: 'ANT', mapper: 'ant' }
1314
];
1415

1516
const targetDirectory = path.resolve(__dirname, '../doc-components');

‎packages/react-renderer-demo/src/components/component-example.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { pf4Code, pf4WizardCode, pf4Html, pf4Dependencies } from '../stackblitz-
2424
import { pf3Code, pf3WizardCode, pf3Html, pf3Dependencies } from '../stackblitz-templates/pf3-templates';
2525
import { blueprintCode, blueprintWizardCode, blueprintHtml, blueprintDependencies } from '../stackblitz-templates/blueprint-templates';
2626
import { suirCode, suirWizardCode, suirHtml, suirDependencies } from '../stackblitz-templates/suir-template';
27+
import { antCode, antWizardCode, antHtml, antDependencies } from '../stackblitz-templates/ant-templates';
2728
import avalableMappers from '../helpers/available-mappers';
2829

2930
const project = {
@@ -120,6 +121,10 @@ const blitzFiles = {
120121
suir: {
121122
'index.html': suirHtml,
122123
'index.js': suirCode
124+
},
125+
ant: {
126+
'index.html': antHtml,
127+
'index.js': antCode
123128
}
124129
};
125130

@@ -128,23 +133,26 @@ const blitzWizards = {
128133
pf4: pf4WizardCode,
129134
pf3: pf3WizardCode,
130135
blueprint: blueprintWizardCode,
131-
suir: suirWizardCode
136+
suir: suirWizardCode,
137+
ant: antWizardCode
132138
};
133139

134140
const blitzDependencies = {
135141
mui: muiDependencies,
136142
pf4: pf4Dependencies,
137143
pf3: pf3Dependencies,
138144
blueprint: blueprintDependencies,
139-
suir: suirDependencies
145+
suir: suirDependencies,
146+
ant: antDependencies
140147
};
141148

142149
const mapperTab = {
143150
mui: 0,
144151
pf4: 1,
145152
pf3: 2,
146153
blueprint: 3,
147-
suir: 4
154+
suir: 4,
155+
ant: 5
148156
};
149157

150158
const ComponentExample = ({ variants, schema, activeMapper, component }) => {

‎packages/react-renderer-demo/src/components/landing-page/landing-page-cards.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ const LandingPageCards = () => {
275275
</a>
276276
</RouterLink>
277277
</Grid>
278-
<Grid item xs={12} md={6} xl={2}>
278+
<Grid item xs={12} md={4} xl={2}>
279279
<Typography variant="h6" className={classes.textBottom}>
280280
BlueprintJS
281281
</Typography>
@@ -285,7 +285,7 @@ const LandingPageCards = () => {
285285
</a>
286286
</RouterLink>
287287
</Grid>
288-
<Grid item xs={12} md={6} xl={2}>
288+
<Grid item xs={12} md={4} xl={2}>
289289
<Typography variant="h6" className={classes.textBottom}>
290290
Semantic UI
291291
</Typography>
@@ -295,6 +295,16 @@ const LandingPageCards = () => {
295295
</a>
296296
</RouterLink>
297297
</Grid>
298+
<Grid item xs={12} md={4} xl={2}>
299+
<Typography variant="h6" className={classes.textBottom}>
300+
Ant Design
301+
</Typography>
302+
<RouterLink href="/mappers/ant-component-mapper">
303+
<a href="/mappers/ant-component-mapper">
304+
<img className={classes.logo} alt="ant logo" src="/ant-logo.svg" />
305+
</a>
306+
</RouterLink>
307+
</Grid>
298308
<Grid item xs={12} md={8}>
299309
<Typography variant="body2" gutterBottom className={classes.mappersText}>
300310
This list represents a set of provided mappers. Each mapper brings all basic form components from its design system. You can

‎packages/react-renderer-demo/src/components/navigation/schemas/mappers.schema.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ const mappersSchema = [
2727
noRoute: true,
2828
title: 'Provided mappers'
2929
},
30+
{
31+
link: 'ant-component-mapper',
32+
linkText: 'Ant Design Mapper'
33+
},
3034
{
3135
link: 'blueprint-component-mapper',
3236
linkText: 'Blueprint mapper'

‎packages/react-renderer-demo/src/doc-components/examples-texts/ant/ant-field-array.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
**Props**
2+
3+
|Prop|Type|Description|
4+
|:---|:--:|----------:|
5+
|label|`node`|Label of the array.|
6+
|description|`node`|Description of the array.|
7+
|fields|`array`|A group of fields, which are being added to the array.|
8+
|defaultItem|`any`|Default item which is inserted into a newly created fields group. If you have nested names, don't forget you need to insert an object!|
9+
|minItems|`number`|Remove button is disabled, if the length of the array is equal or smaller.|
10+
|maxItems|`number`|Add button is disabled, if the length of the array is equal or bigger.|
11+
|noItemsMessage|`node`|A message which is shown, when there are no items in the array.|
12+
|buttonLabels|`object`|`{add: 'ADD', remove: 'REMOVE'}` sets labels of buttons.|
13+
14+
**Revert removal**
15+
16+
Ant field array allow users to revert latest removal actions.
17+
18+
**Naming**
19+
20+
Fields can contain names, then the value will be handled as array of objects.
21+
22+
```jsx
23+
const fields = [
24+
{ name: 'name', ... },
25+
{ name: 'lastname', ... }
26+
]
27+
28+
[
29+
{ name: value1.name, lastname: value1.lastname },
30+
{ name: value2.name, lastname: value2.lastname },
31+
...
32+
]
33+
```
34+
35+
Or you can put a single field with no name. In this case, values are stored as a simple array.
36+
37+
```jsx
38+
const fields = [
39+
{ component: 'text-field' }
40+
]
41+
42+
[ value1, value2, ... ]
43+
```
44+
45+
**Custom component**
46+
47+
To implement a custom component, please take a look [here](/components/field-array).
48+
49+
### Sub components props
50+
51+
|name|type|default|target component|
52+
|----|----|-------|----------------|
53+
|FormItemProps|object|`{}`|[Form](https://ant.design/components/form/#Form)|
54+
|ArrayItemProps|object|`{}`|[Row](https://ant.design/components/grid/#Row)|
55+
|FieldsContainerProps|object|`{}`|[Col](https://ant.design/components/grid/#Col)|
56+
|RemoveContainerProps|object|`{}`|[Col](https://ant.design/components/grid/#Col)|
57+
|RemoveButtonProps|object|`{}`|[Button](https://ant.design/components/button/)|
58+
|FieldArrayRowProps|object|`{}`|[Row](https://ant.design/components/grid/#Row)|
59+
|FieldArrayRowCol|object|`{}`|[Col](https://ant.design/components/grid/#Col)|
60+
|FieldArrayHeaderProps|object|`{}`|[Row](https://ant.design/components/grid/#Row)|
61+
|FieldArrayLabelProps|object|`{}`|[Title](https://ant.design/components/typography/#Typography.Title)|
62+
|FieldArrayButtonProps|object|`{}`|[Space](https://ant.design/components/space/)
63+
|UndoButtonProps|object|`{}`|[Button](https://ant.design/components/button/)|
64+
|RedoButtonProps|object|`{}`|[Button](https://ant.design/components/button/)|
65+
|AddButtonProps|object|`{}`|[Button](https://ant.design/components/button/)|
66+
|FieldArrayDescriptionProps|object|`{}`|[Text](https://ant.design/components/typography/#Typography.Text)|
67+
|NoItemsMessageProps|object|`{}`|[Text](https://ant.design/components/typography/#Typography.Text)|
68+
|ErrorMessageProps|object|`{}`|[Text](https://ant.design/components/typography/#Typography.Text)|
69+
70+

‎packages/react-renderer-demo/src/doc-components/examples-texts/ant/ant-wizard.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import CommonWizard from '../wizard.md';
2+
3+
This a custom component. OnSubmit will send only values from visited steps.
4+
5+
**Props**
6+
7+
|Prop|Type|Default|Description|
8+
|-------------|-------------|-------------|-------------|
9+
|buttonLabels|object of nodes | see below | Labels for buttons |
10+
|stepsInfo|array of objects| [] | Titles for steps |
11+
|WizardProps | object | {} | Props passed to the root div |
12+
|ButtonToolbarProps | object | {} | Props passed to the div wrapping buttons |
13+
|DirectionButtonProps | object | {} | Props passed to the div wrapping back/next buttons |
14+
|CancelButtonProps| object | {} | Props passed to the cancel button |
15+
|BackButtonProps| object | {} | Props passed to the back button |
16+
|NextButtonProps| object | {} | Props passed to the next button |
17+
|SubmitButtonProps| object | {} | Props passed to the submit button |
18+
19+
**stepsInfo**
20+
21+
```jsx
22+
stepsInfo: [
23+
{ title: 'Add a source', subTitle: 'Source' },
24+
{ title: 'Configure a source' },
25+
{ title: 'Summary' }
26+
]
27+
```
28+
29+
Supplying `stepsInfo` will create a steps component on top of the form displaying each step title and allowing for easy navigation. It should be an array of objects, one per step.
30+
31+
The object items will be passed as props to a step component. See [here](https://ant.design/components/steps/#Steps.Step).
32+
33+
**Default buttonLabels**
34+
35+
```jsx
36+
{
37+
cancel: 'Cancel',
38+
back: 'Back',
39+
next: 'Next',
40+
submit: 'Submit',
41+
}
42+
```
43+
44+
You can rewrite only selection of them, e.g.
45+
46+
```jsx
47+
{
48+
submit: 'Deploy',
49+
}
50+
```
51+
52+
(Others will stay default)
53+
54+
<CommonWizard />

‎packages/react-renderer-demo/src/doc-components/field-array.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Pf3FieldArray from './examples-texts/pf3/pf3-field-array.md';
66
import SuirFieldArray from './examples-texts/suir/suir-field-array.md';
77
import BlueprintFieldArray from './examples-texts/blueprint/blueprint-field-array.md';
88
import GenericMuiComponent from '../helpers/generic-mui-component';
9+
import AntFieldArray from './examples-texts/ant/ant-field-array.md';
910

1011
const FieldArray = ({ activeMapper }) => {
1112
if (activeMapper === 'mui') {
@@ -28,6 +29,10 @@ const FieldArray = ({ activeMapper }) => {
2829
return <BlueprintFieldArray />;
2930
}
3031

32+
if (activeMapper === 'ant') {
33+
return <AntFieldArray />;
34+
}
35+
3136
return <GenericMuiComponent activeMapper={activeMapper} component="field-array" />;
3237
};
3338

‎packages/react-renderer-demo/src/doc-components/wizard.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import MuiWizard from './examples-texts/mui/mui-wizard.md';
44
import Pf4Wizard from './examples-texts/pf4/pf4-wizard.md';
55
import Pf3Wizard from './examples-texts/pf3/pf3-wizard.md';
66
import SuirWizard from './examples-texts/suir/suir-wizard.md';
7+
import AntWizard from './examples-texts/ant/ant-wizard.md';
78
import BlueprintWizard from './examples-texts/blueprint/blueprint-wizard.md';
89
import GenericMuiComponent from '../helpers/generic-mui-component';
910

@@ -28,6 +29,10 @@ const Wizard = ({ activeMapper }) => {
2829
return <BlueprintWizard />;
2930
}
3031

32+
if (activeMapper === 'ant') {
33+
return <AntWizard />;
34+
}
35+
3136
return <GenericMuiComponent activeMapper={activeMapper} component="wizard" />;
3237
};
3338

‎packages/react-renderer-demo/src/helpers/available-mappers.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ const avalableMappers = [
33
{ title: 'PF4', mapper: 'pf4' },
44
{ title: 'PF3', mapper: 'pf3' },
55
{ title: 'BJS', mapper: 'blueprint' },
6-
{ title: 'SUIR', mapper: 'suir' }
6+
{ title: 'SUIR', mapper: 'suir' },
7+
{ title: 'ANT', mapper: 'ant' }
78
];
89

910
export default avalableMappers;

0 commit comments

Comments
 (0)