Untitled

import React from 'react';
import { QueryBuilder, RuleGroupType } from 'react-querybuilder';

// Custom Checkbox Component
const CheckboxComponent = ({ field, value, handleOnChange }) => {
  const handleChange = (event) => {
    const { name, checked } = event.target;
    handleOnChange({ ...value, [name]: checked });
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="option1"
          checked={value?.option1 || false}
          onChange={handleChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="checkbox"
          name="option2"
          checked={value?.option2 || false}
          onChange={handleChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="checkbox"
          name="option3"
          checked={value?.option3 || false}
          onChange={handleChange}
        />
        Option 3
      </label>
    </div>
  );
};

// Fallback for the custom component
const FallbackComponent = ({ value, handleOnChange }) => {
  return (
    <div>
      <p>No custom component available. Fallback behavior activated.</p>
      <select
        value={value || ''}
        onChange={(e) => handleOnChange(e.target.value)}
      >
        <option value="">Select an option</option>
        <option value="fallback1">Fallback 1</option>
        <option value="fallback2">Fallback 2</option>
      </select>
    </div>
  );
};

// Main App Component
const App = () => {
  const [query, setQuery] = React.useState({
    combinator: 'and',
    rules: [],
  });

  const handleQueryChange = (newQuery) => setQuery(newQuery);

  const customComponents = {
    valueEditor: (props) => {
      if (props.field === 'checkboxField') {
        return (
          <CheckboxComponent
            field={props.field}
            value={props.value || {}}
            handleOnChange={props.handleOnChange}
          />
        );
      }
      return <FallbackComponent {...props} />;
    },
  };

  const fields = [
    { name: 'checkboxField', label: 'Checkbox Field' },
    { name: 'textField', label: 'Text Field' },
  ];

  return (
    <div>
      <h1>React Query Builder with Custom Checkbox Component</h1>
      <QueryBuilder
        fields={fields}
        query={query}
        onQueryChange={handleQueryChange}
        controlElements={customComponents}
      />
      <pre>{JSON.stringify(query, null, 2)}</pre>
    </div>
  );
};

export default App;