Skip to content

Commit 0870de4

Browse files
vip-gitvip-git
committed
fix: issues resolved
1 parent 2ba217e commit 0870de4

File tree

3 files changed

+136
-83
lines changed

3 files changed

+136
-83
lines changed

‎demo/mobile/reactnative/App.tsx

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33
import {
44
DefaultTheme,
5+
Card,
56
Provider as PaperProvider,
67
} from 'react-native-paper';
78
import {
@@ -45,23 +46,28 @@ const App = () => {
4546
<PaperProvider theme={theme}>
4647
<SafeAreaView style={backgroundStyle}>
4748
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
48-
<ReactNativeForm
49-
schema={schema}
50-
xhrSchema={{}}
51-
uiSchema={uiSchema}
52-
formData={formData}
53-
onCancel={onCancel}
54-
onSubmit={onSubmit}
55-
onStepNext={onSubmit}
56-
onUpload={onUpload}
57-
onChange={onFormChanged}
58-
onError={onError}
59-
interceptors={{}}
60-
components={{}}
61-
validations={{}}
62-
submitOnEnter
63-
activityIndicatorEnabled
64-
/>
49+
<Card>
50+
<Card.Title title="Card Title" subtitle="Card Subtitle" />
51+
<Card.Content>
52+
<ReactNativeForm
53+
schema={schema}
54+
xhrSchema={{}}
55+
uiSchema={uiSchema}
56+
formData={formData}
57+
onCancel={onCancel}
58+
onSubmit={onSubmit}
59+
onStepNext={onSubmit}
60+
onUpload={onUpload}
61+
onChange={onFormChanged}
62+
onError={onError}
63+
interceptors={{}}
64+
components={{}}
65+
validations={{}}
66+
submitOnEnter
67+
activityIndicatorEnabled
68+
/>
69+
</Card.Content>
70+
</Card>
6571
</SafeAreaView>
6672
</PaperProvider>
6773
);

‎scripts/installer/frameworks/react-native/src/ui-framework/rnpaper.framework.tsx

Lines changed: 62 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// Library
22
import React from 'react';
3-
import { View } from 'react-native';
4-
import { TextInput, Checkbox } from 'react-native-paper';
3+
import { TextInput, Checkbox, Paragraph } from 'react-native-paper';
54

65
// Types
76
import { UIFramework } from './types/rnpaper-framework.type';
@@ -10,58 +9,82 @@ export const uiFramework: UIFramework = {
109
name: 'ReactNativePaper',
1110
platform: 'mobile',
1211
internal: {
13-
CrossPlatformWrapper: () => (<View />),
14-
CrossPlatformLoadingWrapper: () => (<View />),
15-
FormButtons: () => (<View />),
16-
ValidationMessages: () => (<View />),
12+
CrossPlatformWrapper: ({ children }) => (<Paragraph> {children} </Paragraph>),
13+
CrossPlatformLoadingWrapper: ({ children }) => (<Paragraph> {children} </Paragraph>),
14+
FormButtons: ({ children }) => (<Paragraph> {children} </Paragraph>),
15+
ValidationMessages: ({ children }) => (<Paragraph> {children} </Paragraph>),
1716
},
1817
wrapperComponents: {
19-
InputLabel: () => (<View />),
20-
FormLabel: () => (<View />),
21-
AppBar: () => (<View />),
22-
Tabs: () => (<View />),
23-
Tab: () => (<View />),
24-
Box: () => (<View />),
25-
CircularProgress: () => (<View />),
26-
Typography: () => (<View />),
27-
Divider: () => (<View />),
28-
IconButton: () => (<View />),
29-
AddCircle: () => (<View />),
30-
Stepper: () => (<View />),
31-
Step: () => (<View />),
32-
StepLabel: () => (<View />),
33-
Button: () => (<View />),
34-
ArrowUpward: () => (<View />),
35-
ArrowDownward: () => (<View />),
36-
RemoveCircle: () => (<View />),
37-
FormControl: () => (<View />),
38-
FormGroup: () => (<View />),
39-
FormHelperText: () => (<View />),
40-
ActiveComp: () => (<View />),
41-
Div: () => (<View />),
42-
FieldsetHTML: () => (<View />),
43-
Para: () => (<View />)
18+
InputLabel: ({ children }) => (<Paragraph> {children} </Paragraph>),
19+
FormLabel: ({ children }) => (<Paragraph> {children} </Paragraph>),
20+
AppBar: ({ children }) => (<Paragraph> {children} </Paragraph>),
21+
Tabs: ({ children }) => (<Paragraph> {children} </Paragraph>),
22+
Tab: ({ children }) => (<Paragraph> {children} </Paragraph>),
23+
Box: ({ children }) => (<Paragraph> {children} </Paragraph>),
24+
CircularProgress: ({ children }) => (<Paragraph> {children} </Paragraph>),
25+
Typography: ({ children }) => (<Paragraph> {children} </Paragraph>),
26+
Divider: ({ children }) => (<Paragraph> {children} </Paragraph>),
27+
IconButton: ({ children }) => (<Paragraph> {children} </Paragraph>),
28+
AddCircle: ({ children }) => (<Paragraph> {children} </Paragraph>),
29+
Stepper: ({ children }) => (<Paragraph> {children} </Paragraph>),
30+
Step: ({ children }) => (<Paragraph> {children} </Paragraph>),
31+
StepLabel: ({ children }) => (<Paragraph> {children} </Paragraph>),
32+
Button: ({ children }) => (<Paragraph> {children} </Paragraph>),
33+
ArrowUpward: ({ children }) => (<Paragraph> {children} </Paragraph>),
34+
ArrowDownward: ({ children }) => (<Paragraph> {children} </Paragraph>),
35+
RemoveCircle: ({ children }) => (<Paragraph> {children} </Paragraph>),
36+
FormControl: ({ children }) => (<Paragraph> {children} </Paragraph>),
37+
FormGroup: ({ children }) => (<Paragraph> {children} </Paragraph>),
38+
FormHelperText: ({ children }) => (<Paragraph> {children} </Paragraph>),
39+
ActiveComp: ({ children }) => (<Paragraph> {children} </Paragraph>),
40+
Div: ({ children }) => (<Paragraph> {children} </Paragraph>),
41+
FieldsetHTML: ({ children }) => (<Paragraph> {children} </Paragraph>),
42+
Para: ({ children }) => (<Paragraph> {children} </Paragraph>)
4443
},
4544
components: {
4645
string: {
47-
Input: TextInput,
46+
Input: (props) => <TextInput {...props} />,
4847
},
4948
array: {
50-
select: TextInput,
49+
select: (props) => <TextInput {...props} />,
5150
},
5251
boolean: {
53-
checkbox: Checkbox,
52+
checkbox: (props) => <Checkbox {...props} />,
5453
},
5554
null: {
56-
emptyDiv: View,
55+
emptyDiv: Paragraph,
5756
},
5857
},
5958
styles: {
60-
FieldSetStyles: () => {},
61-
FormFieldStyles: () => {},
62-
FormStyles: () => {},
59+
FieldSetStyles: {
60+
fieldSetContent: () => ({
61+
root: ''
62+
}),
63+
fieldSet: () => ({
64+
root: ''
65+
}),
66+
reorderControls: () => ({
67+
root: ''
68+
}),
69+
fieldSetObject: () => ({
70+
root: ''
71+
})
72+
},
73+
FormFieldStyles: () => ({
74+
root: '',
75+
}),
76+
FormStyles: () => ({
77+
root: '',
78+
}),
6379
defaultTheme: () => {},
64-
FieldStyles: () => {},
80+
FieldStyles: () => ({
81+
root: '',
82+
radioLabel: '',
83+
normalLabel: '',
84+
withLabel: '',
85+
customLabel: '',
86+
description: '',
87+
}),
6588
FormStepperStyles: () => {}
6689
}
6790
}

‎scripts/installer/frameworks/react-native/src/ui-framework/types/rnpaper-framework.type.ts

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type UIFrameworkPlatforms = 'mobile';
77
interface Components {
88
// Mandatory components for every UIFramework
99
string: {
10-
Input: Function;
10+
Input: (props: any) => ReactElement<any, string | JSXElementConstructor<any>>;
1111

1212
// Optional Components
1313
select?: Function;
@@ -71,38 +71,62 @@ export interface UIFramework {
7171
ValidationMessages: any;
7272
};
7373
wrapperComponents: {
74-
InputLabel: Function;
75-
FormLabel: Function;
76-
AppBar: Function;
77-
Tabs: Function;
78-
Tab: Function;
79-
Box: Function;
80-
CircularProgress: Function;
81-
Typography: Function;
82-
Divider: Function;
83-
IconButton: Function;
84-
AddCircle: Function;
85-
Stepper: Function;
86-
Step: Function;
87-
StepLabel: Function;
88-
Button: Function;
89-
ArrowUpward: Function;
90-
ArrowDownward: Function;
91-
RemoveCircle: Function;
92-
FormControl: Function;
93-
FormGroup: Function;
94-
FormHelperText: Function;
95-
ActiveComp: Function;
74+
InputLabel: (props: any) => ReactElement;
75+
FormLabel: (props: any) => ReactElement;
76+
AppBar: (props: any) => ReactElement;
77+
Tabs: (props: any) => ReactElement;
78+
Tab: (props: any) => ReactElement;
79+
Box: (props: any) => ReactElement;
80+
CircularProgress: (props: any) => ReactElement;
81+
Typography: (props: any) => ReactElement;
82+
Divider: (props: any) => ReactElement;
83+
IconButton: (props: any) => ReactElement;
84+
AddCircle: (props: any) => ReactElement;
85+
Stepper: (props: any) => ReactElement;
86+
Step: (props: any) => ReactElement;
87+
StepLabel: (props: any) => ReactElement;
88+
Button: (props: any) => ReactElement;
89+
ArrowUpward: (props: any) => ReactElement;
90+
ArrowDownward: (props: any) => ReactElement;
91+
RemoveCircle: (props: any) => ReactElement;
92+
FormControl: (props: any) => ReactElement;
93+
FormGroup: (props: any) => ReactElement;
94+
FormHelperText: (props: any) => ReactElement;
95+
ActiveComp: (props: any) => ReactElement;
9696
Div: FunctionComponent<{ className?: any; style?: React.CSSProperties; }>;
9797
FieldsetHTML: FunctionComponent<{ className: any; }>;
9898
Para: FunctionComponent<{ className: any; }>;
9999
};
100100
styles: {
101-
FieldSetStyles: any;
102-
FormFieldStyles: Function;
103-
FormStyles: Function;
101+
FieldSetStyles: {
102+
fieldSetContent: () => ({
103+
root: string;
104+
});
105+
fieldSet: () => ({
106+
root: string;
107+
});
108+
reorderControls: () => ({
109+
root: string;
110+
}),
111+
fieldSetObject: () => ({
112+
root: string;
113+
}),
114+
};
115+
FormFieldStyles: () => ({
116+
root: string;
117+
});
118+
FormStyles: () => ({
119+
root: string;
120+
});
104121
defaultTheme: any;
105-
FieldStyles: Function;
122+
FieldStyles: () => {
123+
root: string;
124+
radioLabel: string;
125+
normalLabel: string;
126+
withLabel: string;
127+
customLabel: string;
128+
description: string;
129+
};
106130
FormStepperStyles: Function;
107131
};
108132
}

0 commit comments

Comments
 (0)