react-query-builder-antd4

Forked from https://github.com/ukrbublik/react-awesome-query-builder

Install

yarn add react-query-builder-antd4

Usage

1. 自定义Field

1.1 Select分组 渲染Field

<Builder
  fields={{
    apple: {
      label: 'apple',
      type: 'text',
      group: 'fruit',
    },
    peach: {
      label: 'peach',
      type: 'text',
      group: 'fruit',
    },
    banana: {
      label: 'banana',
      type: 'text',
      group: 'fruit',
    },
    lsp: {
      label: 'lsp',
      type: 'text',
      group: 'man',
    },
    xz: {
      label: 'xz',
      type: 'text',
      group: 'man',
    },
  }}
  config={
    settings: {
      fieldFactory: { type: 'group' }
    }
  }
>

1.2 TreeSelect 渲染Field

<Builder
  fields={{
    apple: {
      label: 'apple',
      type: 'text',
    },
    peach: {
      label: 'peach',
      type: 'text',
    },
    banana: {
      label: 'banana',
      type: 'text',
    },
    lsp: {
      label: 'lsp',
      type: 'text',
    },
    xz: {
      label: 'xz',
      type: 'text',
    },
  }}
  config={
    settings: {
      fieldFactory: {
        type: 'tree',
        props: {
          treeData: [
            { id: 'apple', pId: 'fruit', value: 'apple', title: 'apple' },
            { id: 'peach', pId: 'fruit', value: 'peach', title: 'peach' },
            { id: 'banana', pId: 'fruit', value: 'banana', title: 'banana' },
            { id: 'lsp', pId: 'man', value: 'lsp', title: 'lsp' },
            { id: 'xz', pId: 'man', value: 'xz', title: 'xz' },
            { id: 'man', pId: 0, value: 'man', title: 'man' },
            { id: 'fruit', pId: 0, value: 'fruit', title: 'fruit' }
          ]
        }
      }
    }
  }
>

1.3 自定义组件 渲染Field

<Builder
  fields={{
    apple: {
      label: 'apple',
      type: 'text',
    },
    peach: {
      label: 'peach',
      type: 'text',
    },
    banana: {
      label: 'banana',
      type: 'text',
    },
    lsp: {
      label: 'lsp',
      type: 'text',
    },
    xz: {
      label: 'xz',
      type: 'text',
    },
  }}
  config={
    settings: {
      fieldFactory: (selectProps, builder) => {
        // selectProps: 默认使用Select渲染的Select Props
        // builder: 当前Builder实例
        return ReactElement;
      }
    }
  }
>

Releaes

• v0.2.0 支持自定义Field