@sparklink-pro/apant v1.6.26

apant

Apollo & Antd tools

Table of Contents

• Installation
• Live demo
• Usage
• Working locally with apant
• Tests

Usage

import { TypesContext, TypesRegistry, useTypeList } from "apant";

import client from "./apollo";
import operations from "./gql";
import types from "./types";

const typesRegistry = new TypesRegistry({ types, operations, apollo: client });

const Root = () => (
  <TypesContext.Provider value={typesRegistry}>
    <YourApp />
  </TypesContext.Provider>
);

TypesRegistryConfiguration

example type

//types/index.ts
import { Foo } from "./Foo";

export default {
  foo
};

// example/src/types/Book.ts
import { TypeConfiguration } from 'apant';

const Book: TypeConfiguration = {
    label: 'title',
    search: 'title',
    admin: {
        route: 'admin/Book',
        searchable: true,
        selectable: true,
        filter(pattern: any) {
            return pattern.rank >= 9;
        },
        columns: () => [
            {
                title: 'Title',
                dataIndex: 'title',
                link: true,
            },
            {
                title: 'Description',
                dataIndex: 'description',
            },
            {
                title: 'Price',
                dataIndex: 'price',
                sorter: {
                    compare: (a: any, b: any) => a.price - b.price,
                },
            },
        ],
    },
    forms: {
        default: {
            props: {
                layout: 'vertical',
            },
            fields: [
                { name: 'title', label: 'Title' },
                { name: 'description', label: 'Description' },
                { name: 'price', label: 'Price', widget:'number' },
                { name: 'rank', label: 'Rank' },
                { name: 'author', label: 'Author',widget: {widget:'select_type', expand:true , type: 'Author'}},
                { name: 'genres', label: 'Genre', widget: {widget:'select_types', expand:true, type: 'Genre'}},
            ],
        },
    },
};
export default Book;

TypeOperationConfiguration

TypeConfigurationAdmin

FormConfigurationType

FormFieldExtraType

Use AdminType

<AdminType
  key={type}
  type={type}
  heights={{ offset: 16 }}
  {...getDefaultTableProps()}
  />

Use Form

Basic use, if you want further customization, see our demo.

const formConfig = {
  props: { layout: "vertical" },
  fields: [
    {
      name: "name",
      label: "Nom",
      required: true,
      rules: [{ required: true }],
      initialValue: "Ode"
    },
    { name: "firstname", label: "Prénom", initialValue: "Jack" },
    { name: ['position','name'], label: 'Position'},
  ]
};

const object = {
    name: 'Doe',
    city: 'Paris',
    position:{
        name: 'Software Engineer',
        company: 'Google'
    },
};

  //...
  <Form
    config={formConfig}
    onFinish={values => console.log(values)}
    context={{ object }}
    footer={
      <div className="text-center">
        <Button type="primary" htmlType="submit">
          Sauvegarder
        </Button>
      </div>
    }
  />
);

Working locally with apant

Working locally with apant relies on yalc and yarn.

First, you neeed to compile the project.

$ cd apant
$ yarn
$ yarn build

Then, you'll need to publish the project with yalc.

$ yalc publish
apant@xxx published in store.

The project is now in the yalc store and is available to use for other project.

Use the apant in your project

To use the library in your local project, you need to link it with yalc.

$ cd myproject/
$ yalc link apant

apant is now linked to the project.

Work in realtime

To work and use apant in realtime, we must watch apant for change, compile it and publish it the yalc store.
To do so, we use the npm command defined in the package.json by

"watch-publish": "tsc-watch --onSuccess \"yalc push\""

$ cd apant/
$ yarn watch-publish

Test