chenos ee8a1ea187 feat: component documentation

2021-10-31 11:35:11 +08:00

3.2 KiB

Raw Blame History

order
2

Client-side Kernel

To allow more non-developers to participate, NocoBase provides a companion client-side plugin -- a visual configuration interface with no code. The core of this part is @nocobase/client, which ideally can be used within any front-end build tool or framework, e.g.

umijs
create-react-app
icejs
vite
snowpack
nextjs
Other

For the time being only support umijs (packaging compilation is still some problems), the future will gradually support the above-listed frameworks.

The main components of the client include.

Request

API Client
Request Hook

const api = new APIClient({
  request,
});

api.auth();
api.get();
api.post();
api.resource('collections').create();
api.resource('collections').findOne({});
api.resource('collections').findMany({});
api.resource('collections').relationship('fields').of(1).create();

The following details are TBD, special resources

api.collections.create();
api.uiSchemas.create();

Request Hook

https://www.npmjs.com/package/@ahooksjs/use-request

const { data } = useRequest(() => api.resource('users').findMany());

Routing

createRouteSwitch

const RouteSwitch = createRouteSwitch({
  components: {},
});

<RouteSwitch routes={[]} />

Schema component

createSchemaComponent

function Hello() {
  return <div>Hello Word</div>
}

const SchemaComponent = createSchemaComponent({
  scope,
  components: {
    Hello
  },
});

const schema = {
  type: 'void',
  'x-component': 'Hello',
};

<SchemaComponent schema={schema} />

How do you assemble it?

import { I18nextProvider } from 'react-i18next';
import { createRouteSwitch, APIClient } from '@nocobase/client';

const apiClient = new APIClient();
const i18n = i18next.createInstance();

const Hello = () => {
  return Hello;
}

const SchemaComponent = createSchemaComponent({
  components: {
    Hello,
  },
});

const PageTemplate = () => {
  const schema = {
    type: 'void',
    'x-component': 'Hello',
  };
  return (
    
  );
}

const RouteSwitch = createRouteSwitch({
  components: {
    PageTemplate,
  },
});

const routes = [
  { path: '/hello', component: 'Hello' },
];

function AntdProvider(props) {
  // The locale here can be handled dynamically depending on the i18next
  return (
    {props.children}
  );
}

const App = () => {
  return (
    
      
        
          
            
          
        
      
    
  );
}

APIClientProvider: provides the APIClient
I18nextProvider: internationalization
AntdProvider: handles the internationalization of antd components, which needs to be placed in I18nextProvider
Router: route driver
RouteSwitch: route distribution

The above code may seem a bit verbose, but the actual function and role of each part is not the same, so it is not suitable for over-encapsulation. If needed, it can be further encapsulated according to the actual situation.

3.2 KiB Raw Blame History