mirror of https://github.com/nocobase/nocobase synced 2024-11-15 23:16:03 +00:00

* feat: improve code

* feat: update docs

* feat: update docs

* Update index.md

* Update features.md

* Update when.md

* Update contributing.md

* Update translations.md

* feat: clean up

* Add files via upload

* Update the-first-app.md

* Update plugins.md

* Update a-b-c.md

* Update blocks.md

* feat: update docs

* Add files via upload

* Update charts.md

* feat: update navs

* Update index.md

* Update index.md

* Update features.md

* Update index.md

* Update docker-compose.md

* Update create-nocobase-app.md

* Update git-clone.md

* Update contributing.md

* Update translations.md

* Update plugins.md

* Update the-first-app.md

* Add files via upload

* Update charts.md

* Update charts.md

* Update a-b-c.md

* Update collections.md

* Update menus.md

* Update menus.md

Co-authored-by: Zhou <zhou.working@gmail.com>

2022-10-31 11:52:17 +08:00

5.3 KiB

Raw Blame History

CollectionManager

Components

CollectionManagerProvider

<CollectionManagerProvider interfaces={{}} collections={[]}></CollectionManagerProvider>

CollectionProvider

const collection = {
  name: 'tests',
  fields: [
    {
      type: 'string',
      name: 'title',
      interface: 'input',
      uiSchema: {
        type: 'string',
        'x-component': 'Input'
      },
    },
  ],
};
<CollectionProvider collection={collection}></CollectionProvider>

如果没有传 collection 参数，从 CollectionManagerProvider 里取对应 name 的 collection。

const collections = [
  {
    name: 'tests',
    fields: [
      {
        type: 'string',
        name: 'title',
        interface: 'input',
        uiSchema: {
          type: 'string',
          'x-component': 'Input'
        },
      },
    ],
  }
];
<CollectionManagerProvider collections={collections}>
  <CollectionProvider name={'tests'}></CollectionProvider>
</CollectionManagerProvider>

CollectionFieldProvider

const field = {
  type: 'string',
  name: 'title',
  interface: 'input',
  uiSchema: {
    type: 'string',
    'x-component': 'Input'
  },
};
<CollectionFieldProvider field={field}></CollectionFieldProvider>

如果没有传 field 参数，从 CollectionProvider 里取对应 name 的 field。

const collection = {
  name: 'tests',
  fields: [
    {
      type: 'string',
      name: 'title',
      interface: 'input',
      uiSchema: {
        type: 'string',
        'x-component': 'Input'
      },
    },
  ],
};
<CollectionProvider collection={collection}>
  <CollectionFieldProvider name={'title'}></CollectionFieldProvider>
</CollectionProvider>

CollectionField

万能字段组件，需要与 <CollectionProvider/> 搭配使用，仅限于在 Schema 场景使用。从 CollectionProvider 里取对应 name 的 field schema。可通过 CollectionField 所在的 schema 扩展配置。

{
  name: 'title',
  'x-decorator': 'FormItem',
  'x-decorator-props': {},
  'x-component': 'CollectionField',
  'x-component-props': {},
  properties: {},
}

Hooks

useCollectionManager()

与 <CollectionManagerProvider/> 搭配使用

const { collections, get } = useCollectionManager();

useCollection()

与 <CollectionProvider/> 搭配使用

const { name, fields, getField, findField, resource } = useCollection();

useCollectionField()

与 <CollectionFieldProvider/> 搭配使用

const { name, uiSchema, resource } = useCollectionField();

resource 需要与 <RecordProvider/> 搭配使用，用于提供当前数据表行记录的上下文。如：

CollectionManager

Components

CollectionManagerProvider

<CollectionManagerProvider interfaces={{}} collections={[]}></CollectionManagerProvider>

CollectionProvider

const collection = {
  name: 'tests',
  fields: [
    {
      type: 'string',
      name: 'title',
      interface: 'input',
      uiSchema: {
        type: 'string',
        'x-component': 'Input'
      },
    },
  ],
};
<CollectionProvider collection={collection}></CollectionProvider>

如果没有传 collection 参数，从 CollectionManagerProvider 里取对应 name 的 collection。

const collections = [
  {
    name: 'tests',
    fields: [
      {
        type: 'string',
        name: 'title',
        interface: 'input',
        uiSchema: {
          type: 'string',
          'x-component': 'Input'
        },
      },
    ],
  }
];
<CollectionManagerProvider collections={collections}>
  <CollectionProvider name={'tests'}></CollectionProvider>
</CollectionManagerProvider>

CollectionFieldProvider

const field = {
  type: 'string',
  name: 'title',
  interface: 'input',
  uiSchema: {
    type: 'string',
    'x-component': 'Input'
  },
};
<CollectionFieldProvider field={field}></CollectionFieldProvider>

如果没有传 field 参数，从 CollectionProvider 里取对应 name 的 field。

const collection = {
  name: 'tests',
  fields: [
    {
      type: 'string',
      name: 'title',
      interface: 'input',
      uiSchema: {
        type: 'string',
        'x-component': 'Input'
      },
    },
  ],
};
<CollectionProvider collection={collection}>
  <CollectionFieldProvider name={'title'}></CollectionFieldProvider>
</CollectionProvider>

CollectionField

{
  name: 'title',
  'x-decorator': 'FormItem',
  'x-decorator-props': {},
  'x-component': 'CollectionField',
  'x-component-props': {},
  properties: {},
}

Hooks

useCollectionManager()

与 <CollectionManagerProvider/> 搭配使用

const { collections, get } = useCollectionManager();

useCollection()

与 <CollectionProvider/> 搭配使用

const { name, fields, getField, findField, resource } = useCollection();

useCollectionField()

与 <CollectionFieldProvider/> 搭配使用

const { name, uiSchema, resource } = useCollectionField();

resource 需要与 <RecordProvider/> 搭配使用，用于提供当前数据表行记录的上下文。

5.3 KiB Raw Blame History

CollectionManager

Components

CollectionManagerProvider

CollectionProvider

CollectionFieldProvider

CollectionField

Hooks

useCollectionManager()

useCollection()

useCollectionField()

CollectionManager

Components

CollectionManagerProvider

CollectionProvider

CollectionFieldProvider

CollectionField

Hooks

useCollectionManager()

useCollection()

useCollectionField()

5.3 KiB

Raw Blame History