Skip to content

Latest commit

 

History

History
287 lines (213 loc) · 12.1 KB

components.md

File metadata and controls

287 lines (213 loc) · 12.1 KB

Components

Resource Components

AdminGuesser

<AdminGuesser> renders automatically an component for resources exposed by a web API documented with any format supported by @api-platform/api-doc-parser (for Hydra documented APIs, use the component instead). It also creates a schema analyzer context, where the schemaAnalyzer service (for getting information about the provided API documentation) is stored.

<AdminGuesser> renders all exposed resources by default, but you can choose what resource you want to render by passing components as children. Deprecated resources are hidden by default, but you can add them back using an explicit <ResourceGuesser> component.

// App.js
import { AdminGuesser, ResourceGuesser } from "@api-platform/admin";

const App = () => (
  <AdminGuesser
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    authProvider={authProvider}>
    <ResourceGuesser
      name"books"
      list={BooksList}
      show={BooksShow}
      edit={BooksEdit}
      create={BooksCreate} />
    <ResourceGuesser name"authors" />
  </AdminGuesser>
)

export default App;

Props

Name Type Value required Description
dataProvider object or function - yes communicates with your API
schemaAnalyzer object schemaAnalyzer yes retrieves resource type according to Schema.org vocabulary
children node or function - no -
theme object theme no theme of your Admin App
includeDeprecated boolean true or false no displays or not deprecated resources

ResourceGuesser

Based on React Admin component, ResourceGuesser provides default props , , and . Otherwise, you can pass it your own CRUD components using create, list, edit, show props.

// App.js
import { AdminGuesser, ResourceGuesser } from "@api-platform/admin";

const App = () => (
  <AdminGuesser
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    schemaAnalyzer={schemaAnalyzer}
  >
    <ResourceGuesser
      name="books"
      list={BooksList}
      show={BooksShow}
      create={BooksCreate}
      edit={BooksEdit} />
    <ResourceGuesser name="reviews" />
  </AdminGuesser>
);

export default App;

ResourceGuesser Props

Name Type Value required Description
name string - yes endpoint of the resource

You can also use props accepted by React Admin component. For example, the props list, show, create or edit.

Page Components

ListGuesser

Based on React Admin , ListGuesser displays a list of resources in a , according to children passed to it (usually or any field component available in React Admin).

Use hasShow and hasEdit props if you want to display show and edit buttons (both set to true by default).

By default, <ListGuesser> comes with .

// BooksList.js
import { FieldGuesser, ListGuesser } from "@api-platform/admin";
import { ReferenceField, TextField } from "react-admin";

export const BooksList = props => (
  <ListGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ListGuesser>
);

ListGuesser Props

Name Type Value required Description
children node or function - no -
resource string - yes endpoint of the resource
filters element - no filters that can be applied to the list

You can also use props accepted by React Admin .

CreateGuesser

Displays a creation page for a single item. Uses React Admin and components. For simple inputs, you can pass as children API Platform Admin , or any React Admin Input components for more complex inputs.

// BooksCreate.js
import { CreateGuesser, InputGuesser } from "@api-platform/admin";

export const BooksCreate = props => (
  <CreateGuesser {...props}>
    <InputGuesser source="author" />
    <InputGuesser source="title" />
    <InputGuesser source="rating" />
    <InputGuesser source="description" />
    <InputGuesser source="publicationDate" />
  </CreateGuesser>
);

CreateGuesser Props

Name Type Value required Description
children node or function - no -
resource string - yes endpoint of the resource

You can also use props accepted by React Admin .

EditGuesser

Displays an edition page for a single item. Uses React Admin and components. For simple inputs, you can use API Platform Admin , or any React Admin Input components for more complex inputs.

// BooksEdit.js
import { EditGuesser, InputGuesser } from "@api-platform/admin";

export const BooksEdit = props => (
  <EditGuesser {...props}>
    <InputGuesser source="author" />
    <InputGuesser source="title" />
    <InputGuesser source="rating" />
    <InputGuesser source="description" />
    <InputGuesser source="publicationDate" />
  </EditGuesser>
);

EditGuesser Props

Name Type Value required Description
children node or function - no -
resource string - yes endpoint of the resource

You can also use props accepted by React Admin .

ShowGuesser

Displays a detailed page for one item. Based on React Admin component. You can pass as children for simple fields, or use any of React Admin basic fields for more complex fields.

// BooksShow.js
import { FieldGuesser, ShowGuesser } from "@api-platform/admin";

export const BooksShow = props => (
  <ShowGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ShowGuesser>
);

ShowGuesser Props

Name Type Value required Description
children node or function - no -
resource string - yes endpoint of the resource

You can also use props accepted by React Admin component.

Hydra

HydraAdmin

Creates a complete Admin, as <AdminGuesser>, but configured specially for Hydra. If you want to use other formats (see supported formats: @api-platform/api-doc-parser) use instead.

// App.js
import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";

const App = () => (
  <HydraAdmin
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    authProvider={authProvider}
   >
     <ResourceGuesser name="books" />
     { /* ... */ }
  </HydraAdmin>
);

export default App;

HydraAdmin Props

Name Type Value required Description
entrypoint string - yes entrypoint of the API

Data Provider

Based on React Admin create, delete, getList, getManyReference, getOne, update methods, the dataProvider is used by API Platform Admin to communicate with the API. In addition, the specific introspect method parses your API documentation. Note that the dataProvider can be overridden to fit your API needs.

Schema Analyzer

Analyses your resources and retrieves their types according to the Schema.org vocabulary.

Other Components

Pagination

Set by default in the component, the Pagination component uses React Admin component. By default, it renders 30 items per page and displays a navigation UI. If you want to change the number of items per page or disable the pagination, see the Pagination documentation. It is also capable to handle partial pagination.

FieldGuesser

Renders fields according to their types, using the schema analyzer. Based on React Admin field components.

// BooksShow.js
import { FieldGuesser, ShowGuesser } from "@api-platform/admin";

export const BooksShow = props => (
  <ShowGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ShowGuesser>
)

FieldGuesser Props

Name Type Value required Description
source string - yes endpoint of the resource

You can also use props accepted by React Admin basic fields.

InputGuesser

Uses React Admin input components to generate inputs according to your API documentation (e.g. number HTML input for numbers, checkbox for booleans, selectbox for relationships...).

InputGuesser Props

Name Type Value required Description
source string - yes endpoint of the resource