Skip to content

Commit a19450c

Browse files
committed
fix: first working version of mobile components basic json schema
1 parent 0870de4 commit a19450c

File tree

16 files changed

+142
-60
lines changed

16 files changed

+142
-60
lines changed

demo/mobile/reactnative/App.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import React from 'react';
33
import {
44
DefaultTheme,
55
Card,
6+
TextInput,
7+
Portal,
68
Provider as PaperProvider,
79
} from 'react-native-paper';
810
import {
@@ -66,6 +68,12 @@ const App = () => {
6668
submitOnEnter
6769
activityIndicatorEnabled
6870
/>
71+
{/* <Portal>
72+
<TextInput />
73+
<TextInput />
74+
<TextInput />
75+
<TextInput />
76+
</Portal> */}
6977
</Card.Content>
7078
</Card>
7179
</SafeAreaView>

scripts/generator/frameworks/react-native/rnpaper/components.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@
2929
},
3030
"components": {
3131
"@react-native-jsonschema-form-components/material-radio-group": {
32-
"version": "0.0.1",
32+
"version": "0.0.2",
3333
"type": "string",
3434
"isEnum": true,
3535
"name": "material-radio-group",
3636
"utils": ["@react-jsonschema-form-utils/enum-utils"]
3737
},
3838
"@react-native-jsonschema-form-components/material-select": {
39-
"version": "0.0.1",
39+
"version": "0.0.3",
4040
"type": "string",
4141
"isEnum": true,
4242
"isRequired": true,
@@ -62,7 +62,7 @@
6262
"name": "material-switch"
6363
},
6464
"@react-native-jsonschema-form-components/material-input": {
65-
"version": "0.0.1",
65+
"version": "0.0.2",
6666
"type": "string",
6767
"isEnum": false,
6868
"isDefault": true,

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

Lines changed: 72 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,84 @@
11
// Library
22
import React from 'react';
3-
import { TextInput, Checkbox, Paragraph } from 'react-native-paper';
3+
import { ScrollView, TextInput } from 'react-native';
4+
import { Checkbox, Portal, Text as RNText } from 'react-native-paper';
45

56
// Types
67
import { UIFramework } from './types/rnpaper-framework.type';
78

9+
const Surface = Portal.Host as any;
10+
const Text = RNText as any;
11+
812
export const uiFramework: UIFramework = {
913
name: 'ReactNativePaper',
1014
platform: 'mobile',
1115
internal: {
12-
CrossPlatformWrapper: ({ children }) => (<Paragraph> {children} </Paragraph>),
13-
CrossPlatformLoadingWrapper: ({ children }) => (<Paragraph> {children} </Paragraph>),
14-
FormButtons: ({ children }) => (<Paragraph> {children} </Paragraph>),
15-
ValidationMessages: ({ children }) => (<Paragraph> {children} </Paragraph>),
16+
CrossPlatformWrapper: ({ children }) => (
17+
<ScrollView>
18+
{children}
19+
</ScrollView>
20+
),
21+
CrossPlatformLoadingWrapper: ({ children }) => (
22+
<Text>
23+
{children}
24+
</Text>
25+
),
26+
FormButtons: ({ children }) => (<Surface> {children} </Surface>),
27+
ValidationMessages: ({ children }) => (<Surface> {children} </Surface>),
1628
},
1729
wrapperComponents: {
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>)
30+
InputLabel: ({ children }) => (
31+
<Text>
32+
{children}
33+
</Text>
34+
),
35+
FormLabel: ({ children }) => (<Text> {children} </Text>),
36+
AppBar: ({ children }) => (<Surface> {children} </Surface>),
37+
Tabs: ({ children }) => (<Surface> {children} </Surface>),
38+
Tab: ({ children }) => (<Surface> {children} </Surface>),
39+
Box: ({ children }) => (<Surface> {children} </Surface>),
40+
CircularProgress: ({ children }) => (<Surface> {children} </Surface>),
41+
Typography: ({ children }) => (<Text> {children} </Text>),
42+
Divider: ({ children }) => (<Surface> {children} </Surface>),
43+
IconButton: ({ children }) => (<Surface> {children} </Surface>),
44+
AddCircle: ({ children }) => (<Surface> {children} </Surface>),
45+
Stepper: ({ children }) => (<Surface> {children} </Surface>),
46+
Step: ({ children }) => (<Surface> {children} </Surface>),
47+
StepLabel: ({ children }) => (<Surface> {children} </Surface>),
48+
Button: ({ children }) => (<Surface> {children} </Surface>),
49+
ArrowUpward: ({ children }) => (<Surface> {children} </Surface>),
50+
ArrowDownward: ({ children }) => (<Surface> {children} </Surface>),
51+
RemoveCircle: ({ children }) => (<Surface> {children} </Surface>),
52+
53+
// Configure Field Wrapper
54+
FormControl: ({ children }) => (
55+
<Surface>
56+
{children}
57+
</Surface>
58+
),
59+
FormGroup: ({ children }) => (<Surface> {children} </Surface>),
60+
61+
62+
FormHelperText: ({ children }) => (<Text> {children} </Text>),
63+
ActiveComp: ({ children }) => (<Text> {children} </Text>),
64+
Div: ({ children }) => (
65+
<Surface>
66+
{children}
67+
</Surface>
68+
),
69+
Span: ({ children }) => (<Text> {children} </Text>),
70+
FieldsetHTML: ({ children }) => (
71+
<Surface>
72+
{children}
73+
</Surface>
74+
),
75+
Para: ({ children }) => (<Text> {children} </Text>)
4376
},
4477
components: {
4578
string: {
46-
Input: (props) => <TextInput {...props} />,
79+
Input: (props) => (
80+
<TextInput {...props} />
81+
),
4782
},
4883
array: {
4984
select: (props) => <TextInput {...props} />,
@@ -52,7 +87,7 @@ export const uiFramework: UIFramework = {
5287
checkbox: (props) => <Checkbox {...props} />,
5388
},
5489
null: {
55-
emptyDiv: Paragraph,
90+
emptyDiv: Surface,
5691
},
5792
},
5893
styles: {
@@ -61,13 +96,16 @@ export const uiFramework: UIFramework = {
6196
root: ''
6297
}),
6398
fieldSet: () => ({
64-
root: ''
99+
root: '',
100+
listItem: ''
65101
}),
66102
reorderControls: () => ({
67103
root: ''
68104
}),
69105
fieldSetObject: () => ({
70-
root: ''
106+
root: '',
107+
row: '',
108+
addItemBtn: ''
71109
})
72110
},
73111
FormFieldStyles: () => ({

scripts/installer/frameworks/react-native/src/ui-framework/rnpaper/components/Checkbox/src/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default ({ value, type, onChange, schema = {}, options = {}, ...rest }: C
2929
return (
3030
<Checkbox
3131
checked={checked ? 'checked' : 'unchecked'}
32+
color={'red'}
3233
onPress={onGroupChange(String(o.key), o.adds)}
3334
disabled={o.disabled || false}
3435
{...options}
@@ -54,6 +55,7 @@ export default ({ value, type, onChange, schema = {}, options = {}, ...rest }: C
5455
<Checkbox
5556
checked={checked ? 'checked' : 'unchecked'}
5657
onPress={onEnumChange(ev.key, ev.adds)}
58+
color={'red'}
5759
disabled={ev.disabled || false}
5860
{...options}
5961
/>
@@ -71,6 +73,7 @@ export default ({ value, type, onChange, schema = {}, options = {}, ...rest }: C
7173
<Checkbox
7274
checked={typeof value === 'boolean' ? value : stringToBoolean}
7375
onChange={givenOnChange}
76+
color={'red'}
7477
disabled={options.disabled || false}
7578
{...options}
7679
/>

scripts/installer/frameworks/react-native/src/ui-framework/rnpaper/components/Input/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-jsonschema-form-components/material-input",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"author": "Vipin Tanna",
55
"main": "dist/index.js",
66
"scripts": {

scripts/installer/frameworks/react-native/src/ui-framework/rnpaper/components/Input/src/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import { TextInput } from 'react-native-paper';
55
// Internal
66
import inputProps from './input.props';
77

8+
const style = {
9+
marginBottom: 15,
10+
};
11+
812
export default ({
913
type,
1014
value,
@@ -19,13 +23,19 @@ export default ({
1923
return (isKeyField ? (
2024
<TextInput
2125
htmlid={htmlid}
26+
style={style}
27+
mode={'outlined'}
28+
dense
2229
defaultValue={value === null ? '' : value}
2330
{...inProps}
2431
/>
2532
) : (
2633
<TextInput
2734
htmlid={htmlid}
35+
style={style}
36+
mode={'outlined'}
2837
value={value === null ? '' : value}
38+
dense
2939
{...inProps}
3040
/>
3141
));

scripts/installer/frameworks/react-native/src/ui-framework/rnpaper/components/MaterialSelect/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-jsonschema-form-components/material-select",
3-
"version": "0.0.1",
3+
"version": "0.0.3",
44
"author": "Vipin Tanna",
55
"main": "dist/index.js",
66
"scripts": {

scripts/installer/frameworks/react-native/src/ui-framework/rnpaper/components/MaterialSelect/src/index.tsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import SelectDropdown from 'react-native-select-dropdown'
66
import materialSelectProps, { SelectProps } from './select.props';
77

88
export default ({
9-
type,
9+
type,
1010
value = '',
1111
schema,
1212
disabled = false,
13-
onChange,
13+
onChange,
1414
htmlid,
1515
xhrSchema = {},
1616
options = {},
@@ -34,13 +34,29 @@ export default ({
3434
<SelectDropdown
3535
{...options}
3636
id={htmlid}
37+
buttonStyle={{
38+
padding: 0,
39+
marginTop: 2,
40+
marginBottom: 15,
41+
height: 35,
42+
width: '100%',
43+
backgroundColor: '#f6f6f6',
44+
borderColor: 'rgba(0, 0, 0, 0.54)',
45+
borderRadius: 4,
46+
borderWidth: 1,
47+
}}
48+
buttonTextStyle={{
49+
fontSize: 14,
50+
textAlign: 'left'
51+
}}
52+
defaultButtonText={' '}
3753
value={isMultiple ? parseMultiSelectValue(value) : String(value)}
3854
data={choices}
39-
onSelect={(selectedItem, index) => givenOnChange(selectedItem)}
55+
onSelect={(selectedItem, index) => givenOnChange({ target: { value: String(selectedItem.key) }})}
4056
buttonTextAfterSelection={(selectedItem, index) => {
4157
// text represented after item is selected
4258
// if data array is an array of objects then return selectedItem.property to render after item is selected
43-
return selectedItem
59+
return String(selectedItem.value)
4460
}}
4561
rowTextForSelection={(item, index) => {
4662
// text represented for each item in dropdown

scripts/installer/frameworks/react-native/src/ui-framework/rnpaper/components/RadioGroup/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-jsonschema-form-components/material-radio-group",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"author": "Vipin Tanna",
55
"main": "dist/index.js",
66
"scripts": {

scripts/installer/frameworks/react-native/src/ui-framework/rnpaper/components/RadioGroup/src/index.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,27 @@ export default ({
1717
onChange,
1818
...rest
1919
}) => {
20-
const { choices } = radioGroupProps({ onChange, schema, options });
20+
const { choices, onPress } = radioGroupProps({ onChange, schema, options });
2121
return (
22-
<View
23-
id={htmlid}
24-
aria-label={path}
25-
name={path}
22+
<View style={{ marginBottom: 10 }}>
23+
<RadioButton.Group
2624
value={String(value)}
27-
{...radioGroupProps({ onChange, schema, options })}
25+
onValueChange={(newValue) => onPress({ target: { value: String(newValue) }})}
2826
{...options}
2927
>
3028
{
3129
choices
3230
&& choices.length
3331
&& choices.map((o) => (
34-
<RadioButton
35-
key={o.key}
36-
value={String(o.key)}
37-
/>
32+
<RadioButton.Item
33+
key={o.key}
34+
label={String(o.value)}
35+
value={String(o.key)}
36+
/>
3837
),
3938
)
4039
}
41-
</View>
40+
</RadioButton.Group>
41+
</View>
4242
);
4343
};

0 commit comments

Comments
 (0)