Add icon in rule and add child in a rule

[deepakmehra96]

I need to implement this functionality (screenshot) how can I achieve it?

Use case

When I click on calendar icon it will add a child in same rule to add date time for the rule and then hit query

[jakeboone02]

I modified the basic template to produce this working example. The styling is rough, but the functionality should get pretty close to your requirements.

I had to create custom rule and removeRuleAction components. The remove rule button is the same as the default except for the addition of a calendar button which updates a custom showTimeframe property on the rule object. The rule component reads that property to show or hide the date-picker control, and the control itself reads and updates the timeframe property on the rule. It would be up to you to decide how to utilize that property once it's set.

Documentation on these techniques is available here: https://react-querybuilder.js.org/docs/tips/arbitrary-updates

// MyRule.tsx
import { useMemo } from 'react';
import { ActionElement, ActionProps, Path, RuleComponents, RuleProps, ValueEditorProps, update, useRule, useStopEventPropagation } from 'react-querybuilder';

export const MyRemoveRule = (props: ActionProps) => {
  const { showTimeframe } = props.ruleOrGroup as any;
  const toggleDatePicker = () => {
    props.schema.dispatchQuery(
      update(
        props.schema.getQuery()!,
        'showTimeframe' as any,
        !showTimeframe,
        props.path
      )
    );
  };

  return (
    <>
      <button type="button" className="ruleCalendar" onClick={toggleDatePicker}>
        📅
      </button>
      <ActionElement {...props} />
    </>
  );
};

const TimeframePicker = (
  props: Pick<ValueEditorProps, 'value' | 'path' | 'schema'>
) => {
  return (
    <label className="ruleTimeframe">
      Dx Timeframe{' '}
      <input
        type="date"
        value={props.value}
        onChange={e => {
          props.schema.dispatchQuery(
            update(
              props.schema.getQuery()!,
              'timeframe' as any,
              e.target.value,
              props.path
            )
          );
        }}
      />
    </label>
  );
};

export const MyRule = (props: RuleProps) => {
  const r = useRule(props);

  const DateToggle = useMemo(() => {}, []);

  const cloneRule = useStopEventPropagation(r.cloneRule);
  const toggleLockRule = useStopEventPropagation(r.toggleLockRule);
  const removeRule = useStopEventPropagation(r.removeRule);
  const shiftRuleUp = useStopEventPropagation(r.shiftRuleUp);
  const shiftRuleDown = useStopEventPropagation(r.shiftRuleDown);

  return (
    <div className="ruleWrapper">
      <div
        ref={r.dndRef}
        data-dragmonitorid={r.dragMonitorId}
        data-dropmonitorid={r.dropMonitorId}
        className={r.outerClassName}
        data-rule-id={r.id}
        data-level={r.path.length}
        data-path={JSON.stringify(r.path)}>
        <RuleComponents
          {...r}
          cloneRule={cloneRule}
          toggleLockRule={toggleLockRule}
          removeRule={removeRule}
          shiftRuleUp={shiftRuleUp}
          shiftRuleDown={shiftRuleDown}
        />
      </div>
      {(r.rule as any).showTimeframe ? (
        <TimeframePicker
          value={(r.rule as any).timeframe}
          schema={r.schema}
          path={r.path}
        />
      ) : null}
    </div>
  );
};

// App.tsx
import { useState } from 'react';
import type { Field, RuleGroupType, RuleType } from 'react-querybuilder';
import { QueryBuilder, formatQuery } from 'react-querybuilder';
import './styles.scss';
import { MyRemoveRule, MyRule } from './MyRule';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

const initialQuery: RuleGroupType = {
  combinator: 'and',
  rules: [
    {
      field: 'firstName',
      operator: 'beginsWith',
      value: 'Stev',
      showTimeframe: true,
      timeframe: '2024-10-17',
    } as RuleType,
    { field: 'lastName', operator: 'in', value: 'Vai,Vaughan' },
  ],
};

export const App = () => {
  const [query, setQuery] = useState(initialQuery);

  return (
    <div>
      <QueryBuilder
        fields={fields}
        query={query}
        onQueryChange={setQuery}
        controlElements={{
          removeRuleAction: MyRemoveRule,
          rule: MyRule,
        }}
      />

      <h4>Query</h4>
      <pre>
        <code>{formatQuery(query, 'json')}</code>
      </pre>
    </div>
  );
};

// styles.scss
@import 'react-querybuilder/dist/query-builder.scss';

body {
  margin: 0.5rem !important;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.ruleWrapper {
  display: flex;
  flex-direction: column;
  gap: $rqb-spacing;
}

.ruleCalendar {
  margin-left: auto;
}

label.ruleTimeframe {
  margin-left: 5rem;
}