mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-06 03:19:35 +00:00
git
809803283b
- Introduced `menu.json` for menu component structure with bindings for trigger and content. - Created `password-input.json` for password input handling visibility and value changes. - Added `popover.json` for popover component with trigger and content bindings. feat: Implement custom hooks for UI interactions - Added `useAccordion` for managing accordion state with single/multiple item support. - Created `useBindingEditor` for managing bindings in a dynamic editor. - Implemented `useCopyState` for clipboard copy functionality with feedback. - Developed `useFileUpload` for handling file uploads with drag-and-drop support. - Introduced `useFocusState` for managing focus state in components. - Created `useImageState` for handling image loading and error states. - Added `useMenuState` for managing menu interactions and item clicks. - Implemented `usePasswordVisibility` for toggling password visibility. - Developed `usePopoverState` for managing popover visibility and interactions. feat: Add constants and interfaces for JSON UI components - Introduced constants for sizes, placements, styles, and object-fit handling. - Created interfaces for various components including Accordion, Binding Editor, Copy Button, Data Source Editor, File Upload, and more. - Added type definitions for menu items, popover props, and other UI elements to enhance type safety and maintainability.
27 lines
1.5 KiB
JSON
27 lines
1.5 KiB
JSON
{
|
|
"id": "accordion-container",
|
|
"type": "div",
|
|
"bindings": {
|
|
"className": {
|
|
"source": "className",
|
|
"transform": "const base = 'space-y-2'; return data ? `${base} ${data}` : base"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "accordion-items-repeat",
|
|
"type": "_repeat",
|
|
"bindings": {
|
|
"_items": {
|
|
"source": "items",
|
|
"transform": "data || []"
|
|
},
|
|
"_renderItem": {
|
|
"source": ["accordionState.toggleItem", "accordionState.isOpen"],
|
|
"transform": "(item) => { const toggleItem = data[0]; const isOpen = data[1]; const itemIsOpen = isOpen(item.id); return { _element: 'div', _key: item.id, _props: { className: 'border border-border rounded-lg overflow-hidden' }, _children: [{ _element: 'button', _props: { onClick: () => !item.disabled && toggleItem(item.id), disabled: item.disabled, className: `w-full flex items-center justify-between p-4 bg-card text-card-foreground font-medium transition-colors hover:bg-accent hover:text-accent-foreground ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''}` }, _children: [{ _element: 'span', _children: [item.title] }, { _element: 'CaretDown', _props: { className: `w-5 h-5 transition-transform ${itemIsOpen ? 'rotate-180' : ''}` } }] }, itemIsOpen ? { _element: 'div', _props: { className: 'p-4 bg-card border-t border-border animate-in slide-in-from-top-2' }, _children: [item.content] } : null].filter(Boolean) }; }"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|