git/low-code-react-app-b
1
0
Fork 0
mirror of https://github.com/johndoe6345789/low-code-react-app-b.git synced 2026-04-29 08:04:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add DatePicker and FileUpload to JSON UI

Browse Source
This commit is contained in:
johndoe6345789
2026-01-18 11:59:51 +00:00
parent af03c13934
commit 0d13710c09
6 changed files with 83 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/JSONUIPage.tsx
View File

@@ -78,6 +78,16 @@ export function JSONUIPage({ jsonConfig }: JSONUIPageProps) {
updateDataField('formData', action.params.field, event)
}
break
case 'update-date':
if (action.params?.field) {
updateDataField('formData', action.params.field, event)
}
break
case 'update-files':
if (action.params?.field) {
updateDataField('formData', action.params.field, event)
}
break
case 'submit-form':
toast.success('Form submitted!')
console.log('Form data:', dataMap.formData)

63
src/config/ui-examples/form.json
View File

@@ -130,6 +130,37 @@
}
]
},
{
"id": "birthdate-field",
"type": "div",
"className": "space-y-2",
"children": [
{
"id": "birthdate-label",
"type": "Label",
"props": {
"htmlFor": "birthDate"
},
"children": "Birth date"
},
{
"id": "birthdate-input",
"type": "DatePicker",
"props": {
"placeholder": "Select a date"
},
"dataBinding": "formData.birthDate",
"events": {
"onChange": {
"action": "update-date",
"payload": {
"field": "birthDate"
}
}
}
}
]
},
{
"id": "bio-field",
"type": "div",
@@ -159,6 +190,36 @@
}
]
},
{
"id": "resume-field",
"type": "div",
"className": "space-y-2",
"children": [
{
"id": "resume-label",
"type": "Label",
"props": {
"htmlFor": "resume"
},
"children": "Resume"
},
{
"id": "resume-upload",
"type": "FileUpload",
"props": {
"accept": ".pdf,.doc,.docx"
},
"events": {
"onFilesSelected": {
"action": "update-files",
"payload": {
"field": "resumeFiles"
}
}
}
}
]
},
{
"id": "subscribe-field",
"type": "div",
@@ -234,6 +295,8 @@
"email": "",
"password": "",
"bio": "",
"birthDate": null,
"resumeFiles": [],
"subscribe": false
}
}

1
src/types/json-ui.ts
View File

@@ -2,6 +2,7 @@ export type ComponentType =
| 'div' | 'section' | 'article' | 'header' | 'footer' | 'main'
| 'Button' | 'Card' | 'CardHeader' | 'CardTitle' | 'CardDescription' | 'CardContent' | 'CardFooter'
| 'Input' | 'TextArea' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'NumberInput'
| 'DatePicker' | 'FileUpload'
| 'Badge' | 'Progress' | 'Separator' | 'Tabs' | 'TabsContent' | 'TabsList' | 'TabsTrigger' | 'Dialog'
| 'Text' | 'Heading' | 'Label' | 'List' | 'Grid' | 'Stack' | 'Flex' | 'Container'
| 'Link' | 'Breadcrumb' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'