Nominal Pizza Masticator

    react-query-builder-antd4

    0.2.3 • Public • Published

    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

    Keywords

    none

    Install

    npm i react-query-builder-antd4

    DownloadsWeekly Downloads

    3

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    670 kB

    Total Files

    121

    Last publish

    Collaborators

    • xizheng
    • liushengpeng