跳到主要内容

查询构建器 React

@aiao/rxdb-model-react 提供 React 版本的查询构建器组件与 Hook，底层模型与类型来自 @aiao/rxdb-model。

安装​

npm install @aiao/rxdb-model @aiao/rxdb-model-react

基础用法​

使用组件​

import { QueryBuilder } from '@aiao/rxdb-model-react';
import type { FieldMetadata } from '@aiao/rxdb-model';

const fields: FieldMetadata[] = [
  { name: 'name', displayName: '姓名', type: 'string' },
  { name: 'age', displayName: '年龄', type: 'number' },
  { name: 'active', displayName: '激活', type: 'boolean' }
];

function SearchPage() {
  return (
    <QueryBuilder<User>
      fields={fields}
      maxDepth={3}
      onQueryChange={query => console.log('查询:', query)}
      onValidationChange={result => console.log('校验:', result)}
    />
  );
}

使用 Hook​

import { useQueryBuilder } from '@aiao/rxdb-model-react';

function SearchPage() {
  const {
    rootGroup,
    validation,
    fields,
    hasRules,
    addRule,
    addGroup,
    remove,
    updateRule,
    updateCombinator,
    clear,
    loadQuery,
    moveItem,
    toRxDBQuery
  } = useQueryBuilder<User>({
    fields: [
      { name: 'name', displayName: '姓名', type: 'string' },
      { name: 'age', displayName: '年龄', type: 'number' }
    ],
    maxDepth: 3,
    onQueryChange: query => fetchData(query)
  });

  const handleAddRule = () => {
    addRule(rootGroup?.id, {
      field: 'name',
      operator: '=',
      value: ''
    });
  };

  return (
    <div>
      <button onClick={handleAddRule}>添加条件</button>
      <button onClick={() => loadQuery(null)}>重置</button>
      <button onClick={clear}>清空</button>
      <pre>{JSON.stringify(toRxDBQuery(), null, 2)}</pre>
    </div>
  );
}

Hook API​

useQueryBuilder​

function useQueryBuilder<T extends object>(options?: UseQueryBuilderOptions<T>): UseQueryBuilderReturn<T>;

Options​

  • schema: SchemaInfo：Schema 信息
  • fields: FieldMetadata[]：字段列表，默认空数组
  • initialQuery: RuleGroup<T> | QueryBuilderRuleGroup<T>：初始查询
  • maxDepth: number：最大嵌套层级，默认 5
  • onQueryChange(query)：查询变更回调
  • onValidationChange(result)：校验变更回调

返回值​

  • rootGroup: QueryBuilderRuleGroup<T> | undefined：根规则组
  • validation: ValidationResult | undefined：校验结果
  • fields: FieldMetadata[]：字段列表
  • hasRules: boolean：当前是否已有规则
  • addRule(parentId, rule)：添加规则
  • addGroup(parentId)：添加分组
  • remove(id)：删除规则或分组
  • updateRule(id, updates)：更新规则
  • updateCombinator(groupId, combinator)：切换 AND/OR
  • clear()：清空所有规则
  • toRxDBQuery()：导出 RuleGroup<T>
  • loadQuery(query | null)：重新加载查询
  • moveItem(itemId, targetGroupId, targetIndex)：拖拽排序

useSchemaFromEntity​

从 RxDB EntityMetadata 自动解析字段列表：

import { useSchemaFromEntity } from '@aiao/rxdb-model-react';

function SearchPage({ entityMetadata }) {
  const { fields, hasFields } = useSchemaFromEntity(entityMetadata, {
    includeForeignKeys: false,
    includeRelations: true
  });

  if (!hasFields) return <p>加载中...</p>;

  return <QueryBuilder<User> fields={fields} />;
}
选项类型默认值说明
enabledbooleantrue是否启用解析
includeForeignKeysbooleanfalse包含外键字段
includeRelationsbooleanfalse包含关系字段

QueryBuilder 组件额外 Props​

除 useQueryBuilder 的参数外，组件还支持：

  • className?: string
  • height?: string，默认 80vh
  • enableDrag?: boolean，默认 true
  • enableCollapse?: boolean，默认 true
  • theme?: QueryBuilderTheme