feat: enhance form components with loading state, required and disabled props, and improved event handling

hotlong · hotlong · commit 1fe13fe278d5 · 2026-02-02T00:51:52.000+08:00
diff --git a/packages/components/src/renderers/basic/pagination.tsx b/packages/components/src/renderers/basic/pagination.tsx
@@ -9,20 +9,31 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { PaginationSchema } from '@object-ui/types';
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '../../ui/pagination';
+import React from 'react';
 
 ComponentRegistry.register('pagination', 
   ({ schema, ...props }: { schema: PaginationSchema; [key: string]: any }) => {
     const { 
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
         style,
+        onPageChange,
         ...paginationProps
     } = props;
     
     const currentPage = schema.currentPage || schema.page || 1;
     const totalPages = schema.totalPages || 1;
-    const showEllipsis = totalPages > 7;
     
+    const handlePageChange = (page: number, e: React.MouseEvent) => {
+      e.preventDefault();
+      if (page === currentPage) return;
+      if (page < 1 || page > totalPages) return;
+      
+      if (onPageChange) {
+        onPageChange(page);
+      }
+    };
+
     const getPageNumbers = () => {
       if (totalPages <= 7) {
         return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -47,21 +58,36 @@ ComponentRegistry.register('pagination',
       >
         <PaginationContent>
           <PaginationItem>
-            <PaginationPrevious href="#" />
+            <PaginationPrevious 
+              href="#" 
+              onClick={(e) => handlePageChange(currentPage - 1, e)}
+              className={currentPage <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              aria-disabled={currentPage <= 1}
+            />
           </PaginationItem>
           {getPageNumbers().map((page, idx) => (
             <PaginationItem key={idx}>
               {page === -1 ? (
                 <PaginationEllipsis />
               ) : (
-                <PaginationLink href="#" isActive={page === currentPage}>
+                <PaginationLink 
+                  href="#" 
+                  isActive={page === currentPage}
+                  onClick={(e) => handlePageChange(page, e)}
+                  className="cursor-pointer"
+                >
                   {page}
                 </PaginationLink>
               )}
             </PaginationItem>
           ))}
           <PaginationItem>
-            <PaginationNext href="#" />
+            <PaginationNext 
+              href="#" 
+              onClick={(e) => handlePageChange(currentPage + 1, e)}
+              className={currentPage >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              aria-disabled={currentPage >= totalPages}
+            />
           </PaginationItem>
         </PaginationContent>
       </Pagination>
diff --git a/packages/components/src/renderers/form/button.tsx b/packages/components/src/renderers/form/button.tsx
@@ -11,6 +11,20 @@ import type { ButtonSchema } from '@object-ui/types';
 import { Button } from '../../ui';
 import { renderChildren } from '../../lib/utils';
 import { forwardRef } from 'react';
+import { Loader2, icons, type LucideIcon } from 'lucide-react';
+
+// Helper to convert icon names to PascalCase (e.g., "arrow-right" -> "ArrowRight")
+function toPascalCase(str: string): string {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
+
+// Map of renamed icons in lucide-react
+const iconNameMap: Record<string, string> = {
+  'Home': 'House',
+};
 
 const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema; [key: string]: any }>(
   ({ schema, ...props }, ref) => {
@@ -22,17 +36,36 @@ const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema; [ke
         ...buttonProps 
     } = props;
 
+    // Resolve icon
+    let Icon: LucideIcon | null = null;
+    if (schema.icon) {
+      const iconName = toPascalCase(schema.icon);
+      const mappedIconName = iconNameMap[iconName] || iconName;
+      Icon = (icons as any)[mappedIconName] as LucideIcon;
+    }
+    
+    // Determine loading state
+    const isLoading = schema.loading || props.loading;
+    
+    // Determine disabled state
+    const isDisabled = schema.disabled || props.disabled || isLoading;
+
     return (
     <Button 
         ref={ref}
+        type={schema.buttonType || "button"}
         variant={schema.variant} 
         size={schema.size} 
         className={schema.className} 
+        disabled={isDisabled}
         {...buttonProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
     >
+      {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {!isLoading && Icon && schema.iconPosition !== 'right' && <Icon className="mr-2 h-4 w-4" />}
       {schema.label || renderChildren(schema.body || schema.children)}
+      {!isLoading && Icon && schema.iconPosition === 'right' && <Icon className="ml-2 h-4 w-4" />}
     </Button>
   );
   }
diff --git a/packages/components/src/renderers/form/checkbox.tsx b/packages/components/src/renderers/form/checkbox.tsx
@@ -9,42 +9,63 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { CheckboxSchema } from '@object-ui/types';
 import { Checkbox, Label } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
 
-ComponentRegistry.register('checkbox', 
-  ({ schema, className, ...props }: { schema: CheckboxSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...checkboxProps 
-    } = props;
+const CheckboxRenderer = ({ schema, className, onChange, value, ...props }: { schema: CheckboxSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+  // Extract designer-related props
+  const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...checkboxProps 
+  } = props;
 
-    return (
+  const handleCheckedChange = (checked: boolean) => {
+    if (onChange) {
+      onChange(checked);
+    }
+  };
+
+  return (
     <div 
-        className={`flex items-center space-x-2 ${schema.wrapperClass || ''}`}
+        className={cn("flex items-center space-x-2", schema.wrapperClass)}
         data-obj-id={dataObjId}
         data-obj-type={dataObjType}
         style={style}
     >
-      <Checkbox id={schema.id} className={className} {...checkboxProps} />
-      <Label htmlFor={schema.id} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <Checkbox 
+        id={schema.id} 
+        className={className} 
+        checked={value ?? schema.checked ?? false}
+        defaultChecked={value === undefined ? schema.defaultChecked : undefined}
+        onCheckedChange={handleCheckedChange}
+        disabled={schema.disabled}
+        required={schema.required}
+        name={schema.name}
+        {...checkboxProps} 
+      />
+      <Label htmlFor={schema.id} className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>
         {schema.label}
       </Label>
     </div>
   );
-  },
+};
+
+ComponentRegistry.register('checkbox', CheckboxRenderer,
   {
     namespace: 'ui',
     label: 'Checkbox',
     inputs: [
       { name: 'label', type: 'string', label: 'Label', required: true },
       { name: 'id', type: 'string', label: 'ID', required: true },
-      { name: 'checked', type: 'boolean', label: 'Checked' }
+      { name: 'checked', type: 'boolean', label: 'Checked' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' }
     ],
     defaultProps: {
       label: 'Checkbox label',
-      id: 'checkbox-field' // Will be made unique by designer's ensureNodeIds
+      id: 'checkbox-field'
     }
   }
 );
diff --git a/packages/components/src/renderers/form/select.tsx b/packages/components/src/renderers/form/select.tsx
@@ -16,45 +16,64 @@ import {
   SelectItem,
   Label
 } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
 
-ComponentRegistry.register('select', 
-  ({ schema, className, ...props }: { schema: SelectSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...selectProps 
-    } = props;
+const SelectRenderer = ({ schema, className, onChange, value, ...props }: { schema: SelectSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+  // Extract designer-related props
+  const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...selectProps 
+  } = props;
 
-    return (
+  const handleValueChange = (newValue: string) => {
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  return (
     <div 
-        className={`grid w-full max-w-sm items-center gap-1.5 ${schema.wrapperClass || ''}`}
+        className={cn("grid w-full items-center gap-1.5", schema.wrapperClass)}
         data-obj-id={dataObjId}
         data-obj-type={dataObjType}
         style={style}
     >
-      {schema.label && <Label>{schema.label}</Label>}
-      <Select defaultValue={schema.defaultValue} {...selectProps}>
+      {schema.label && <Label className={cn(schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>{schema.label}</Label>}
+      <Select 
+        defaultValue={value === undefined ? schema.defaultValue : undefined} 
+        value={value ?? schema.value}
+        onValueChange={handleValueChange}
+        disabled={schema.disabled}
+        required={schema.required}
+        name={schema.name}
+        {...selectProps}
+      >
         <SelectTrigger className={className}>
           <SelectValue placeholder={schema.placeholder} />
         </SelectTrigger>
         <SelectContent>
           {schema.options?.map((opt) => (
-             <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+             <SelectItem key={opt.value} value={opt.value} disabled={opt.disabled}>{opt.label}</SelectItem>
           ))}
         </SelectContent>
       </Select>
     </div>
   );
-  },
+};
+
+ComponentRegistry.register('select', SelectRenderer,
   {
     namespace: 'ui',
     label: 'Select',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
       { name: 'placeholder', type: 'string', label: 'Placeholder' },
       { name: 'defaultValue', type: 'string', label: 'Default Value' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
       { 
         name: 'options', 
         type: 'array', 
diff --git a/packages/components/src/renderers/form/textarea.tsx b/packages/components/src/renderers/form/textarea.tsx
@@ -9,46 +9,68 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { TextareaSchema } from '@object-ui/types';
 import { Textarea, Label } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
 
-ComponentRegistry.register('textarea', 
-  ({ schema, className, ...props }: { schema: TextareaSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-      'data-obj-id': dataObjId, 
-      'data-obj-type': dataObjType,
-      style, 
-      ...inputProps 
-    } = props;
+const TextareaRenderer = ({ schema, className, onChange, value, ...props }: { schema: TextareaSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+  // Handle change for both raw inputs and form-bound inputs
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+
+  // Extract designer-related props
+  const { 
+    'data-obj-id': dataObjId, 
+    'data-obj-type': dataObjType,
+    style, 
+    ...inputProps 
+  } = props;
+
+  return (
+    <div 
+      className={cn("grid w-full gap-1.5", schema.wrapperClass)}
+      data-obj-id={dataObjId}
+      data-obj-type={dataObjType}
+      style={style}
+    >
+      {schema.label && <Label htmlFor={schema.id} className={cn(schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>{schema.label}</Label>}
+      <Textarea 
+        id={schema.id} 
+        name={schema.name}
+        placeholder={schema.placeholder} 
+        className={className} 
+        disabled={schema.disabled}
+        readOnly={schema.readOnly}
+        required={schema.required}
+        rows={schema.rows}
+        value={value ?? schema.value ?? ''}
+        defaultValue={value === undefined ? schema.defaultValue : undefined}
+        onChange={handleChange}
+        {...inputProps} 
+      />
+    </div>
+  );
+};
 
-    return (
-      <div 
-        className={`grid w-full gap-1.5 ${schema.wrapperClass || ''}`}
-        data-obj-id={dataObjId}
-        data-obj-type={dataObjType}
-        style={style}
-      >
-        {schema.label && <Label htmlFor={schema.id}>{schema.label}</Label>}
-        <Textarea 
-          id={schema.id} 
-          placeholder={schema.placeholder} 
-          className={className} 
-          {...inputProps} 
-        />
-      </div>
-    );
-  },
+ComponentRegistry.register('textarea', TextareaRenderer,
   {
     namespace: 'ui',
     label: 'Textarea',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
       { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'rows', type: 'number', label: 'Rows' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
       { name: 'id', type: 'string', label: 'ID', required: true }
     ],
     defaultProps: {
       label: 'Textarea label',
       placeholder: 'Enter text here...',
-      id: 'textarea-field' // Will be made unique by designer's ensureNodeIds
+      rows: 3,
+      id: 'textarea-field'
     }
   }
 );
