@qwickapps/react-framework 1.3.3 → 1.3.5

package/src/components/input/SwitchInputField.tsx

@@ -0,0 +1,165 @@
+/**
+ * SwitchInputField - Switch toggle component with data binding support
+ * 
+ * Provides a standardized switch field with:
+ * - Consistent Material-UI styling
+ * - Data binding capabilities
+ * - Label and helper text support
+ * - Focus and error handling
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  Paper,
+  Switch,
+  Typography
+} from '@mui/material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+import SwitchInputFieldModel from '../../schemas/SwitchInputFieldSchema';
+
+type SwitchInputFieldViewProps = ModelProps<SwitchInputFieldModel> & {
+  /** Change handler */
+  onChange?: (checked: boolean) => void;
+  /** Focus handler */
+  onFocus?: () => void;
+};
+
+export interface SwitchInputFieldProps extends SwitchInputFieldViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function SwitchInputFieldView({
+  label,
+  checked = false,
+  onChange,
+  onFocus,
+  required = false,
+  disabled = false,
+  error,
+  helperText,
+  size = 'medium',
+  color = 'primary',
+  ...restProps
+}: SwitchInputFieldViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(event.target.checked);
+    }
+  };
+
+  return (
+    <FormControl
+      {...htmlProps}
+      {...styleProps}
+      error={!!error}
+      required={required}
+      disabled={disabled}
+      sx={{
+        display: 'block',
+        ...styleProps.sx
+      }}
+    >
+      <FormControlLabel
+        control={
+          <Switch
+            checked={checked}
+            onChange={handleChange}
+            onFocus={onFocus}
+            size={size}
+            color={color}
+            disabled={disabled}
+          />
+        }
+        label={label}
+        disabled={disabled}
+      />
+      {(error || helperText) && (
+        <FormHelperText>
+          {error || helperText}
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+}
+
+/**
+ * SwitchInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function SwitchInputField(props: SwitchInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <SwitchInputFieldView {...restProps} />;
+  }
+
+  // Use data binding
+  const bindingResult = useDataBinding<SwitchInputFieldModel>(
+    dataSource,
+    restProps as Partial<SwitchInputFieldModel>,
+    SwitchInputFieldModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+  
+  // Check if we're still loading data using the metadata properties
+  const bindingLoading = bindingResult.$loading;
+  
+  // Extract all the actual switch properties (excluding metadata)
+  const { dataSource: _source, $loading, $error, $dataSource, $cached, cached, ...switchInputFieldProps } = bindingResult;
+  const error = bindingResult.$error;
+
+  // Show loading state while fetching data
+  if (bindingLoading) {
+    return (
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 2,
+          textAlign: 'center'
+        }}
+      >
+        <Typography variant="body2">Loading SwitchInputField...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading switch field configuration from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading switch input field:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Paper
+          variant="outlined"
+          sx={{
+            p: 2,
+            textAlign: 'center',
+            borderColor: 'error.main'
+          }}
+        >
+          <Typography variant="body2" color="error">
+            Error loading switch field: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <SwitchInputFieldView {...switchInputFieldProps} />;
+}
+
+// Mark as QwickApp component
+(SwitchInputField as any)[QWICKAPP_COMPONENT] = true;
+
+export default SwitchInputField;

package/src/components/input/index.ts

@@ -7,11 +7,13 @@
 export { default as ChoiceInputField } from './ChoiceInputField';
 export { default as HtmlInputField } from './HtmlInputField';
 export { default as SelectInputField } from './SelectInputField';
+export { default as SwitchInputField } from './SwitchInputField';
 export { default as TextField } from './TextField';
 export { default as TextInputField } from './TextInputField';
 
 export type { ChoiceInputFieldProps } from './ChoiceInputField';
 export type { HtmlInputFieldProps } from './HtmlInputField';
 export type { SelectInputFieldProps, SelectOption } from './SelectInputField';
+export type { SwitchInputFieldProps } from './SwitchInputField';
 export type { TextFieldProps } from './TextField';
 export type { TextInputFieldProps } from './TextInputField';