diff --git a/addLicense.js b/addLicense.js index eda2a7c9bb..54f7e7924c 100644 --- a/addLicense.js +++ b/addLicense.js @@ -1,6 +1,5 @@ const { exec } = require('child_process'); const fs = require('fs'); -const path = require('path'); const commercialLicense = ` /** @@ -59,6 +58,7 @@ exec('git diff --cached --name-only --diff-filter=ACM', (error, stdout, stderr) .split('\n') .filter(Boolean) .filter((file) => file.includes('/src/')) // 只检查 src 目录下的文件 + .filter((file) => !file.includes('/demos/')) // 忽略 demos 目录 .filter((file) => file.endsWith('.js') || file.endsWith('.jsx') || file.endsWith('.ts') || file.endsWith('.tsx')); const validFiles = files.filter((file) => addLicenseToFile(file)); diff --git a/packages/core/cli/src/util.js b/packages/core/cli/src/util.js index 1cc284ec67..a9fed84583 100644 --- a/packages/core/cli/src/util.js +++ b/packages/core/cli/src/util.js @@ -228,6 +228,9 @@ exports.genTsConfigPaths = function genTsConfigPaths() { paths[`${packageJsonName}/e2e`] = [`${relativePath}/src/e2e`]; paths[`${packageJsonName}/web`] = [`${relativePath}/src/web`]; } + if (packageJsonName === '@nocobase/client') { + paths[`${packageJsonName}/demo-utils`] = [`${relativePath}/src/demo-utils`]; + } if (packageJsonName === '@nocobase/plugin-workflow-test') { paths[`${packageJsonName}/e2e`] = [`${relativePath}/src/e2e`]; } diff --git a/packages/core/client/.dumirc.ts b/packages/core/client/.dumirc.ts index 6c38d3e7fa..c524ced3b2 100644 --- a/packages/core/client/.dumirc.ts +++ b/packages/core/client/.dumirc.ts @@ -45,6 +45,10 @@ export default defineConfig({ { title: 'Components', link: '/components/action', + }, + { + title: 'Home site', + link: 'https://docs.nocobase.com/welcome/introduction/', } // { // title: 'UI Schema', @@ -667,5 +671,9 @@ export default defineConfig({ // }, // ], }, + localesEnhance: [ + { id: 'zh-CN', switchPrefix: '中', hostname: 'client-cn.docs.nocobase.com' }, + { id: 'en-US', switchPrefix: 'en', hostname: 'client.docs.nocobase.com' } + ], }), }); diff --git a/packages/core/client/docs/en-US/core/application/application.md b/packages/core/client/docs/en-US/core/application/application.md index b33fe9bbf5..05675b0fdf 100644 --- a/packages/core/client/docs/en-US/core/application/application.md +++ b/packages/core/client/docs/en-US/core/application/application.md @@ -2,9 +2,9 @@ ## new Application(options) -创建一个 NocoBase 应用。 +Creates an instance of a NocoBase application. -- 类型 +- Type ```tsx | pure export interface ApplicationOptions { @@ -23,19 +23,20 @@ export interface ApplicationOptions { } ``` -- 详细信息 - - apiClient：API 请求实例，具体说明请参见：[https://docs.nocobase.com/api/sdk](https://docs.nocobase.com/api/sdk) - - i18n：国际化，具体请参考：[https://www.i18next.com/overview/api#createinstance](https://www.i18next.com/overview/api#createinstance) - - providers：上下文 - - components：全局组件 - - scopes：全局 scopes - - router：配置路由，具体请参考：[RouterManager](/core/application/router-manager) - - pluginSettings: [PluginSettingsManager](/core/application/plugin-settings-manager) - - schemaSettings：Schema 设置工具，具体参考：[SchemaSettingsManager](/core/ui-schema/schema-initializer-manager) - - schemaInitializers：Schema 添加工具，具体参考：[SchemaInitializerManager](/core/ui-schema/schema-initializer-manager) - - loadRemotePlugins：用于控制是否加载远程插件，默认为 `false`，即不加载远程插件（方便单测和 DEMO 环境）。 - - dataSourceManager：数据源管理器，具体参考：[DataSourceManager](/core/data-source/data-source-manager) -- 示例 +## Details +- `apiClient`: API request instance. For more details, refer to: [NocoBase API SDK Documentation](https://docs.nocobase.com/api/sdk) +- `i18n`: Internationalization. For specifics, see: [i18next API Documentation](https://www.i18next.com/overview/api#createinstance) +- `providers`: Context providers +- `components`: Global components +- `scopes`: Global scopes +- `router`: Route configuration. Refer to: [RouterManager](/core/application/router-manager) +- `pluginSettings`: [PluginSettingsManager](/core/application/plugin-settings-manager) +- `schemaSettings`: Schema settings tool. For more information, refer to: [SchemaSettingsManager](/core/ui-schema/schema-initializer-manager) +- `schemaInitializers`: Schema addition tool. For more information, refer to: [SchemaInitializerManager](/core/ui-schema/schema-initializer-manager) +- `loadRemotePlugins`: Used to control whether to load remote plugins. Default is `false`, meaning remote plugins are not loaded (convenient for unit testing and DEMO environments). +- `dataSourceManager`: Data source manager. For more details, refer to: [DataSourceManager](/core/data-source/data-source-manager) + +## Example ```tsx /** @@ -71,7 +72,7 @@ const app = new Application({ export default app.getRootComponent(); ``` -## 实例属性 +## Instance Properties ### app.i18n @@ -81,7 +82,7 @@ class Application { } ``` -详细介绍，请参考：[i18next](https://www.i18next.com/overview/api#createinstance) +For a detailed introduction, please refer to: [i18next](https://www.i18next.com/overview/api#createinstance) ### app.apiClient @@ -91,35 +92,35 @@ class Application { } ``` -详细介绍，请参考：[APIClient](https://docs.nocobase.com/api/sdk) +For a detailed introduction, please refer to: [APIClient](https://docs.nocobase.com/api/sdk) ### app.router -详细介绍，请参考：[RouterManager](/core/application/router-manager) +For a detailed introduction, please refer to: [RouterManager](/core/application/router-manager) ### app.pluginSettingsManager -详细介绍，请参考：[PluginSettingsManager](/core/application/plugin-settings-manager) +For a detailed introduction, please refer to: [PluginSettingsManager](/core/application/plugin-settings-manager) ### app.schemaSettingsManager -详细介绍，请参考：[SchemaSettingsManager](/core/ui-schema/schema-initializer-manager) +For a detailed introduction, please refer to: [SchemaSettingsManager](/core/ui-schema/schema-initializer-manager) ### app.schemaInitializerManager -详细介绍，请参考：[SchemaInitializerManager](/core/ui-schema/schema-initializer-manager) +For a detailed introduction, please refer to: [SchemaInitializerManager](/core/ui-schema/schema-initializer-manager) ### app.dataSourceManager -详细介绍，请参考：[dataSourceManager](/core/data-source/data-source-manager) +For a detailed introduction, please refer to: [dataSourceManager](/core/data-source/data-source-manager) -## 实例方法 +## Instance Methods ### app.getRootComponent() -获取应用的根组件。 +Get the root component of the application. -- 类型 +- Type ```tsx | pure class Application { @@ -127,7 +128,7 @@ class Application { } ``` -- 示例 +- Example ```tsx | pure import { Application } from '@nocobase/client'; @@ -139,9 +140,9 @@ const App = app.getRootComponent(); ### app.mount() -将应用实例挂载在一个容器元素中。 +Mount the application instance in a container element. -- 类型 +- Type ```tsx | pure class Application { @@ -149,7 +150,7 @@ class Application { } ``` -- 示例 +- Example ```tsx | pure import { Application } from '@nocobase/client'; @@ -161,9 +162,9 @@ app.mount('#root'); ### app.addProvider() -添加 `Provider` 上下文。 +Add `Provider` context. -- 类型 +- Type ```tsx | pure class Application { @@ -171,14 +172,14 @@ class Application { } ``` -- 详细信息 +- Details -第一个参数是组件，第二个参数是组件的参数。注意 `Provider` 一定要渲染 `children`。 +The first parameter is the component, and the second parameter is the component's props. Note that the `Provider` must render its `children`. -- 示例 +- Example ```tsx | pure -// 场景1：第三方库，或者自己创建的 Context +// Scenario 1: Third-party library or self-created Context const MyContext = createContext({}); app.addProvider(MyContext.provider, { value: { color: 'red' } }); ``` @@ -216,7 +217,7 @@ export default app.getRootComponent(); ``` ```tsx | pure -// 场景2：自定义的组件，注意 children +// Scenario 2: Custom component, pay attention to children const GlobalDemo = ({ name, children }) => { return
hello, { name }
@@ -261,9 +262,9 @@ export default app.getRootComponent(); ### app.addProviders() -添加多个 `Provider` 上下文。 +Add multiple `Provider` contexts. -- 类型 +- Type ```tsx | pure class Application { @@ -271,11 +272,11 @@ class Application { } ``` -- 详细信息 +- Details -一次添加多个 `Provider`。 +Add multiple `Provider` contexts at once. -- 示例 +- Example ```tsx | pure app.addProviders([[MyContext.provider, { value: { color: 'red' } }], [GlobalDemo, { name: 'nocobase' }]]) @@ -283,11 +284,11 @@ app.addProviders([[MyContext.provider, { value: { color: 'red' } }], [GlobalDemo ### app.addComponents() -添加全局组件。 +Add global components. -全局组件可以使用在 [RouterManager](/core/application/router-manager) 和 [UI Schema](/core/ui-schema/schema-component)上。 +Global components can be used in [RouterManager](/core/application/router-manager) and [UI Schema](/core/ui-schema/schema-component). -- 类型 +- Type ```tsx | pure class Application { @@ -295,7 +296,7 @@ class Application { } ``` -- 示例 +- Example ```tsx | pure app.addComponents({ Demo, Foo, Bar }) @@ -303,11 +304,11 @@ app.addComponents({ Demo, Foo, Bar }) ### app.addScopes() -添加全局的 scope。 +Add global scopes. -全局组 scope 可以 [UI Schema](/core/ui-schema/schema-component) 上。 +Global scopes can be used in [UI Schema](/core/ui-schema/schema-component). -- 类型 +- Type ```tsx | pure class Application { @@ -315,7 +316,7 @@ class Application { } ``` -- 示例 +- Example ```tsx | pure function useSomeThing() {} @@ -328,15 +329,15 @@ app.addScopes({ useSomeThing, anyVar }) ### useApp() -获取当前应用的实例。 +Get the instance of the current application. -- 类型 +- Type ```tsx | pure const useApp: () => Application ``` -- 示例 +- Example ```tsx | pure const Demo = () => { diff --git a/packages/core/client/docs/en-US/core/application/plugin-manager.md b/packages/core/client/docs/en-US/core/application/plugin-manager.md index 342420f32a..68eed1d801 100644 --- a/packages/core/client/docs/en-US/core/application/plugin-manager.md +++ b/packages/core/client/docs/en-US/core/application/plugin-manager.md @@ -1,6 +1,6 @@ # PluginManager -用于管理插件。 +Used for managing plugins. ```tsx | pure class PluginManager { @@ -11,13 +11,13 @@ class PluginManager { } ``` -## 实例方法 +## Instance Methods ### pluginManager.add() -将插件添加到应用中。 +Add plugins to the application. -- 类型 +- Type ```tsx | pure class PluginManager { @@ -25,13 +25,13 @@ class PluginManager { } ``` -- 详细信息 +- Details -第一个参数是插件类，第二个则是实例化时传递的参数。前面已经讲过会在添加插件后，立即调用 `afterAdd` 钩子函数，所以返回的是 `Promise`。 +The first parameter is the plugin class, and the second parameter is the options passed during instantiation. As mentioned earlier, the `afterAdd` hook function will be immediately called after adding the plugin, so it returns a `Promise`. -对于远程组件而言，会自动传递一个 `name` 参数。 +For remote components, an additional name parameter will be automatically passed. -- 示例 +- Example ```tsx | pure class MyPluginA extends Plugin { @@ -43,9 +43,9 @@ class MyPluginA extends Plugin { } class MyPluginB extends Plugin { - // 需要在 afterAdd 执行添加的方法 + // The method to be executed after adding needs to be placed in afterAdd async afterAdd() { - // 通过 `app.pluginManager.add()` 添加插件时，第一个参数是插件类，第二个参数是实例化时传递的参数 + // When adding a plugin through `app.pluginManager.add()`, the first parameter is the plugin class, and the second parameter is the options passed during instantiation. this.app.pluginManager.add(MyPluginA, { name: 'MyPluginA', hello: 'world' }) } } @@ -57,9 +57,9 @@ const app = new Application({ ### pluginManager.get() -获取插件实例。 +Get the plugin instance. -- 类型 +- Type ```tsx | pure class PluginManager { @@ -68,23 +68,23 @@ class PluginManager { } ``` -- 详细信息 +- Details -可以通过 Class 获取插件示例，如果在插件注册的时候有 name，也可以通过字符串的 name 获取。 +You can get the plugin instance by using the class, or you can also get it by providing the name if it was specified during plugin registration. -如果是远程插件，会自动传入 name，值为 package 的 name。 +For remote plugins, the name will be automatically passed and it will be the same as the package name. -- 示例 +- Example ```tsx | pure import MyPluginA from 'xxx'; class MyPluginB extends Plugin { async load() { - // 方式1：通过 Class 获取 + // 方式1: 通过 Class 获取 const myPluginA = this.app.pluginManager.get(MyPluginA); - // 方式2：通过 name 获取（添加的时候要传递 name 参数） + // 方式2: 通过 name 获取（添加的时候要传递 name 参数） const myPluginA = this.app.pluginManager.get('MyPluginA'); } } @@ -92,7 +92,7 @@ class MyPluginB extends Plugin { ## Hooks -获取插件实例，等同于 `pluginManager.get()`。 +Get the plugin instance, equivalent to `pluginManager.get()`. ### usePlugin() @@ -101,20 +101,20 @@ function usePlugin(plugin: T): InstanceType; function usePlugin(name: string): T; ``` -- 详细信息 +- Details -可以通过 Class 获取插件示例，如果在插件注册的时候有 name，也可以通过字符串的 name 获取。 +You can get the plugin instance by using the class, or you can also get it by providing the name if it was specified during plugin registration. -- 示例 +- Example ```tsx | pure import { usePlugin } from '@nocobase/client'; const Demo = () => { - // 通过 Class 获取 + // Get by Class const myPlugin = usePlugin(MyPlugin); - // 通过 name 获取（添加的时候要传递 name 参数） + // Get by name (name parameter must be passed during plugin registration) const myPlugin = usePlugin('MyPlugin'); return
diff --git a/packages/core/client/docs/en-US/core/application/plugin-settings-manager.md b/packages/core/client/docs/en-US/core/application/plugin-settings-manager.md index 34e6f8c67d..98154b4bdd 100644 --- a/packages/core/client/docs/en-US/core/application/plugin-settings-manager.md +++ b/packages/core/client/docs/en-US/core/application/plugin-settings-manager.md @@ -2,7 +2,7 @@ ![](../static/plugin-settings.jpg) -用于管理插件配置页面，其底层对应着 [RouterManager](/core/application/router-manager)。 +Used to manage plugin configuration pages, which correspond to [RouterManager](/core/application/router-manager) at the underlying level. ```tsx | pure interface PluginSettingOptionsType { @@ -46,13 +46,13 @@ class PluginSettingsManager { } ``` -## 实例方法 +## Instance Methods ### pluginSettingsManager.add() -添加插件配置页。 +Add plugin configuration pages. -- 类型 +- Type ```tsx | pure class PluginSettingsManager { @@ -60,15 +60,15 @@ class PluginSettingsManager { } ``` -- 详细解释 +- Details -第一个参数 `name`，是路由唯一标识，用于后续的删改查，并且 `name` 支持 `.` 用于分割层级，不过需要注意当使用 `.` 分层的时候，父级要使用 [Outlet](https://reactrouter.com/en/main/components/outlet)，让子元素能正常渲染。 +The first parameter `name` is the unique identifier for the route, used for subsequent operations such as deletion and modification. The `name` also supports using `.` to separate hierarchical levels. However, when using `.` for hierarchy, the parent level should use [Outlet](https://reactrouter.com/en/main/components/outlet) to ensure proper rendering of child elements. -第二个参数中 `Component` 支持组件形式和字符串形式，如果是字符串组件，要先通过 [app.addComponents](/core/application/application#appaddcomponents) 进行注册，具体参考 [RouterManager](/core/application/router-manager)。 +In the second parameter, the `Component` supports both component form and string form. If it is a string component, it needs to be registered through [app.addComponents](/core/application/application#appaddcomponents) first, please refer to [RouterManager](/core/application/router-manager) for more details. -- 示例 +- Example -单层级配置。 +Single-level configuration. ```tsx | pure const HelloSettingPage = () => { @@ -86,7 +86,7 @@ class MyPlugin extends Plugin { } ``` -多层级配置。 +Multi-level configuration. ```tsx | pure // 多层级配置页 @@ -114,9 +114,9 @@ class MyPlugin extends Plugin { ### pluginSettingsManager.get() -获取配置信息。 +Get configuration information. -- 类型 +- Type ```tsx | pure class PluginSettingsManager { @@ -124,13 +124,13 @@ class PluginSettingsManager { } ``` -- 详细解释 +- Details -第一个是在添加时的 name 参数，第二个参数是是否在获取的时候进行权限过滤。 +The first parameter is the `name` parameter when adding, and the second parameter is whether to filter permissions when getting. -- 示例 +- Example -在组件中获取。 +Get in the component. ```tsx | pure const Demo = () => { @@ -139,7 +139,7 @@ const Demo = () => { } ``` -在插件中获取。 +Get in the plugin. ```tsx | pure class MyPlugin extends Plugin { @@ -154,9 +154,9 @@ class MyPlugin extends Plugin { ### pluginSettingsManager.getList() -获取插件配置页列表。 +Get the list of plugin settings pages. -- 类型 +- Type ```tsx | pure class PluginSettingsManager { @@ -164,11 +164,11 @@ class PluginSettingsManager { } ``` -- 详细解释 +- Details -`filterAuth` 默认值为 `true`，即进行权限过滤。 +The default value of `filterAuth` is `true`, which means it performs permission filtering. -- 示例 +- Example ```tsx | pure const Demo = () => { @@ -180,9 +180,9 @@ const Demo = () => { ### pluginSettingsManager.has() -判断是否存在，内部已进行权限过滤。 +Check if it exists, with internal permission filtering. -- 类型 +- Type ```tsx | pure class PluginSettingsManager { @@ -190,7 +190,7 @@ class PluginSettingsManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -202,7 +202,7 @@ class MyPlugin extends Plugin { ### pluginSettingsManager.remove() -移除配置。 +Remove configuration. ```tsx | pure class PluginSettingsManager { @@ -212,9 +212,9 @@ class PluginSettingsManager { ### pluginSettingsManager.getRouteName() -获取对应路由的名称。 +Get the name of the corresponding route. -- 类型 +- Type ```tsx | pure class PluginSettingsManager { @@ -222,7 +222,7 @@ class PluginSettingsManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -234,9 +234,9 @@ class MyPlugin extends Plugin { ### pluginSettingsManager.getRoutePath() -获取插件配置对应的页面路径。 +Get the page path corresponding to the plugin configuration. -- 类型 +- Type ```tsx | pure class PluginSettingsManager { @@ -244,7 +244,7 @@ class PluginSettingsManager { } ``` -- 示例 +- Example ```tsx | pure const Demo = () => { @@ -260,7 +260,7 @@ const Demo = () => { ### pluginSettingsManager.hasAuth() -单独判断是否权限。 +Check the permission separately. ```tsx | pure class PluginSettingsManager { diff --git a/packages/core/client/docs/en-US/core/application/plugin.md b/packages/core/client/docs/en-US/core/application/plugin.md index 5bfcfe42cc..f7552c8add 100644 --- a/packages/core/client/docs/en-US/core/application/plugin.md +++ b/packages/core/client/docs/en-US/core/application/plugin.md @@ -1,8 +1,8 @@ # Plugin -Plugin 基类。 +Plugin Base Class. -- 类型 +- Type ```tsx | pure class Plugin { @@ -46,24 +46,23 @@ class Plugin { } ``` -- 详细信息 - - - 构造函数 - - `options`： 插件的添加有两种方式，一种方式从插件列表中远程加载出来，另一种方式是通过 [PluginManager](/core/application/plugin-manager) 添加 - - 远程加载：`options` 会被自动注入 `{ name: 'npm package.name' }` - - PluginManager `options` 由用户自己传递 - - `app`：此参数是自动注入的，是应用实例 - - 快捷访问：基类提供了对 `app` 部分方法和属性的快捷访问 +- Details + - Constructor + - `options`: There are two ways to add a plugin. One way is to load it remotely from the plugin list, and the other way is to add it through the [PluginManager](/core/application/plugin-manager). + - Remote loading: `options` will be automatically injected with `{ name: 'npm package.name' }`. + - PluginManager `options` are passed by the user. + - `app`: This parameter is automatically injected and represents the application instance. + - Shortcut Access: The base class provides shortcut access to some methods and properties of `app`. - `pluginManager` - `router` - `pluginSettingsManager` - `schemaSettingsManager` - `schemaInitializerManager` - - 声明周期 - - `afterAdd`：插件被添加后立即执行 - - `beforeLoad`：执行渲染时执行，在 `afterAdd` 之后，`load` 之前 - - `load`：最后执行 -- 示例 + - Lifecycle + - `afterAdd`: Executed immediately after the plugin is added. + - `beforeLoad`: Executed during rendering, after `afterAdd` and before `load`. + - `load`: Executed last. +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -79,10 +78,10 @@ class MyPlugin extends Plugin { async load() { console.log('load') - // 可以访问应用实例 + // You can access the application instance console.log(this.app) - // 访问应用实例内容 + // Access the application instance content console.log(this.app.router, this.router); } } diff --git a/packages/core/client/docs/en-US/core/application/router-manager.md b/packages/core/client/docs/en-US/core/application/router-manager.md index ef707219c8..064d63d898 100644 --- a/packages/core/client/docs/en-US/core/application/router-manager.md +++ b/packages/core/client/docs/en-US/core/application/router-manager.md @@ -1,6 +1,6 @@ # RouterManager -用于管理路由。 +Used for managing routes. ```tsx | pure import { ComponentType } from 'react'; @@ -22,13 +22,13 @@ class RouterManager { } ``` -## 实例方法 +## Instance Methods ### router.add() -添加一条路由。 +Add a route. -- 类型 +- Type ```tsx | pure class RouterManager { @@ -36,15 +36,15 @@ class RouterManager { } ``` -- 详情 +- Details -第一个参数 `name`，是路由唯一标识，用于后续的删改查，并且 `name` 支持 `.` 用于分割层级，不过需要注意当使用 `.` 分层的时候，父级要使用 [Outlet](https://reactrouter.com/en/main/components/outlet)，让子元素能正常渲染。 +The first parameter `name` is the unique identifier for the route, used for subsequent operations such as modification and retrieval. The `name` also supports using `.` to separate hierarchical levels. However, when using `.` for hierarchy, the parent level should use [Outlet](https://reactrouter.com/en/main/components/outlet) to ensure proper rendering of child elements. -第二个参数 `RouteType` 的 `Component` 支持组件形式和字符串形式，如果是字符串组件，要先通过 [app.addComponents](/core/application/application#appaddcomponents) 进行注册。 +The second parameter `RouteType` has a `Component` property that supports both component and string forms. If using a string component, it needs to be registered first using [app.addComponents](/core/application/application#appaddcomponents). -- 示例 +- Example -单层级路由。 +Single-level routing. ```tsx | pure class MyPlugin extends Plugin { @@ -106,7 +106,7 @@ const app = new Application({ export default app.getRootComponent(); ``` -多层级路由。 +Multi-level routing. ```tsx | pure import { Plugin } from '@nocobase/client'; @@ -178,7 +178,7 @@ const app = new Application({ export default app.getRootComponent(); ``` -`Component` 参数为字符串。 +The `Component` parameter is a string. ```tsx | pure const LoginPage = () => { @@ -200,9 +200,9 @@ class MyPlugin extends Plugin { ### router.getRoutes() -获取路由列表。 +Get the list of routes. -- 类型 +- Type ```tsx | pure class RouterManager { @@ -210,7 +210,7 @@ class RouterManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -224,9 +224,9 @@ class MyPlugin extends Plugin { ### router.getRoutesTree() -获取用于 [useRoutes()](https://reactrouter.com/hooks/use-routes) 的数据。 +Get the data for [useRoutes()](https://reactrouter.com/hooks/use-routes). -- 类型 +- Type ```tsx | pure class RouterManager { @@ -234,7 +234,7 @@ class RouterManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -246,9 +246,9 @@ class MyPlugin extends Plugin { ### router.get() -获取单个路由配置。 +Get a single route configuration. -- 类型 +- Type ```tsx | pure class RouterManager { @@ -256,7 +256,7 @@ class RouterManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -269,9 +269,9 @@ class MyPlugin extends Plugin { ### router.has() -判断是否添加过路由。 +Check if a route has been added. -- 类型 +- Type ```tsx | pure class RouterManager { @@ -279,7 +279,7 @@ class RouterManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -292,9 +292,9 @@ class MyPlugin extends Plugin { ### router.remove() -移除路由配置。 +Remove route configuration. -- 类型 +- Type ```tsx | pure class RouterManager { @@ -302,7 +302,7 @@ class RouterManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -315,10 +315,10 @@ class MyPlugin extends Plugin { ### router.setType() -设置路由类型，默认为 `browser`。 +Set the router type, default is `browser`. -- 类型 +- Type ```tsx | pure class RouterManager { @@ -326,12 +326,12 @@ class RouterManager { } ``` -- 详细解释 +- Details - browser: [BrowserRouter](https://reactrouter.com/en/main/router-components/browser-router) - memory: [MemoryRouter](https://reactrouter.com/en/main/router-components/hash-router) - hash: [HashRouter](https://reactrouter.com/en/main/router-components/memory-router) -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -343,9 +343,9 @@ class MyPlugin extends Plugin { ### router.setBasename() -设置 [basename](https://reactrouter.com/en/main/router-components/browser-router#basename)。 +Set [basename](https://reactrouter.com/en/main/router-components/browser-router#basename). -- 类型 +- Type ```tsx | pure class RouterManager { @@ -353,7 +353,7 @@ class RouterManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -367,15 +367,15 @@ class MyPlugin extends Plugin { ### useRouter() -获取当前路由的实例，等同于 `app.router`。 +Get the instance of the current route, equivalent to `app.router`. -- 类型 +- Type ```tsx | pure const useRouter: () => RouterManager ``` -- 示例 +- Example ```tsx | pure import { useRouter } from '@nocobase/client'; diff --git a/packages/core/client/docs/en-US/core/data-block/collection-record-provider.md b/packages/core/client/docs/en-US/core/data-block/collection-record-provider.md index 0cfad105fa..06bc7f3232 100644 --- a/packages/core/client/docs/en-US/core/data-block/collection-record-provider.md +++ b/packages/core/client/docs/en-US/core/data-block/collection-record-provider.md @@ -1,10 +1,10 @@ # CollectionRecordProvider -用于提供 [CollectionRecord](./collection-record) 实例。 +Used to provide instances of [CollectionRecord](./collection-record). -## 组件 +## Component -- 类型 +- Type ```tsx | pure interface CollectionRecordProviderProps { @@ -12,21 +12,21 @@ interface CollectionRecordProviderProps { record?: CollectionRecord | DataType; parentRecord?: CollectionRecord | DataType; /** - * 当前记录所属的 collection name + * The collection name to which the current record belongs */ collectionName?: string; } ``` -- 详解 +- Details -参数的具体说明参见 [CollectionRecord](./collection-record)。 +The specific description of the parameters can be found in [CollectionRecord](./collection-record). -需要说明的是 `record` 和 `parentRecord` 即可以是普通的对象，也可以是 [CollectionRecord](./collection-record) 实例，但最终会转为 `CollectionRecord` 实例，并通过 context 传递给子组件。 +It should be noted that both `record` and `parentRecord` can be either plain objects or instances of [CollectionRecord](./collection-record). However, they will ultimately be converted to `CollectionRecord` instances and passed to child components through context. -## 示例 +## Example -- record 参数为 CollectionRecord 实例 +- The `record` parameter is an instance of `CollectionRecord`. ```tsx | pure import { CollectionRecord, CollectionRecordProvider } from '@nocobase/client'; @@ -34,7 +34,7 @@ import { CollectionRecord, CollectionRecordProvider } from '@nocobase/client'; const record = new CollectionRecord({ data: { id: 1, name: 'foo' } }); -// 最终向子组件传递的数据为： props.record +// The data passed to child components is: props.record ``` ```tsx @@ -50,11 +50,11 @@ const Demo = () => { export default () => ``` -- record 参数为普通对象 +- The `record` parameter is a plain object. ```tsx | pure -// 最终向子组件传递的数据为： const record = new CollectionRecord({ data: { id: 1, name: 'foo' } }); +// The data passed to child components is: const record = new CollectionRecord({ data: { id: 1, name: 'foo' } }); ``` ```tsx @@ -68,14 +68,14 @@ const Demo = () => { export default () => ``` -- record 参数为 CollectionRecord 实例且带有父记录 +- The `record` parameter is an instance of `CollectionRecord` with a parent record. ```tsx | pure const parentRecord = new CollectionRecord({ data: { id: 1, role: 'admin' } }); const record = new CollectionRecord({ data: { id: 1, name: 'foo' }, parentRecord }); -// 最终向子组件传递的数据为： props.record +// The data passed to child components is: props.record ``` ```tsx @@ -92,7 +92,7 @@ const Demo = () => { export default () => ``` -- record 参数为 CollectionRecord 实例，父记录通过 `parentRecord` 参数传递 +- The `record` parameter is an instance of `CollectionRecord`, and the parent record is passed through the `parentRecord` parameter. ```tsx | pure const parentRecord = new CollectionRecord({ data: { id: 1, role: 'admin' } }); @@ -100,8 +100,8 @@ const record = new CollectionRecord({ data: { id: 1, name: 'foo' } }); -// 首先设置父记录：record.setParentRecord(parentRecord); -// 最终向子组件传递的数据为：record（带有父记录） +// First, set the parent record: record.setParentRecord(parentRecord); +// The data passed to child components is: record (with parent record) ``` ```tsx @@ -118,15 +118,15 @@ const Demo = () => { export default () => ``` -- record 参数为普通对象，父记录也是普通对象 +- The `record` parameter is a plain object, and the parent record is also a plain object. ```tsx | pure -// 首先实例化父记录：const parentRecord = new CollectionRecord({ data: { id: 1, role: 'admin' } }); -// 然后实例化记录：const record = new CollectionRecord({ data: { id: 1, name: 'foo' } }); -// 最后设置父记录：record.setParentRecord(parentRecord); -// 最终向子组件传递的数据为：record（带有父记录） +// First, instantiate the parent record: const parentRecord = new CollectionRecord({ data: { id: 1, role: 'admin' } }); +// Then, instantiate the record: const record = new CollectionRecord({ data: { id: 1, name: 'foo' } }); +// Finally, set the parent record: record.setParentRecord(parentRecord); +// The data passed to child components is: record (with parent record) ``` @@ -145,9 +145,9 @@ export default () => ### useCollectionParentRecord() -直接获取 CollectionRecord 的数据 `parentRecord`，等同于 `useCollectionRecord().parentRecord`。 +Directly accessing the `parentRecord` data of CollectionRecord is equivalent to `useCollectionRecord().parentRecord`. -- 示例 +- Example ```tsx | pure const parentRecord = useCollectionParentRecord(); @@ -230,9 +230,9 @@ export default () => { data?: DataType; parentRecord?: CollectionRecord; /** - * 当前记录所属的 collection name + * The collection name to which the current record belongs */ collectionName?: string; } @@ -32,11 +32,11 @@ class CollectionRecord { } ``` -## 详解 +## Details -### CollectionRecord 基本概念 +### Basic Concepts of CollectionRecord -CollectionRecord 类用于提供数据记录，通常情况下对应着后端数据表中的一条记录。以用户表为例，其一条数据对应的 CollectionRecord 类如下： +The CollectionRecord class is used to provide data records, which typically correspond to a single record in a backend database table. Taking the user table as an example, the CollectionRecord class for a single data record is as follows: ```tsx | pure const useCollectionRecord = new CollectionRecord({ @@ -57,9 +57,9 @@ const useCollectionRecord = new CollectionRecord({ }); ``` -### CollectionRecord 和 Collection 的关系 +### Relationship between CollectionRecord and Collection -CollectionRecord 是指的数据，而 Collection 则是表结构。对于上面的用户表，其对应的 Collection 如下： +CollectionRecord refers to the data, while Collection represents the table structure. For the user table mentioned above, its corresponding Collection is as follows: ```tsx | pure const usersCollection = new Collection({ @@ -86,15 +86,15 @@ const usersCollection = new Collection({ }); ``` -### 父子关系和关系字段 +### Parent-Child Relationship and Relationship Fields -对于[关系字段](https://docs.nocobase.com/development/server/collections/association-fields)，例如用户和角色的关系，在用户表中会有一个 `roleId` 字段，其值为角色表中的 `id`，当我们通过 `users.roleId` 字段查询用户的角色时： +For [relationship fields](https://docs.nocobase.com/development/server/collections/association-fields), such as the relationship between users and roles, there will be a `roleId` field in the users table, with its value being the `id` in the roles table. When we query the role of a user using the `users.roleId` field: ```bash | pure GET /api/users/1/roles:get/10 ``` -其中 `1` 为用户的 `id`，`10` 为角色的 `id`，我们可以得到用户的角色数据： +Where `1` is the user's `id` and `10` is the role's `id`, we can obtain the user's role data: ```tsx | pure const roleRecord = new CollectionRecord({ @@ -116,15 +116,15 @@ const roleRecord = new CollectionRecord({ }) ``` -其中 `users` id 为 1 的记录我们称之为父记录： +The record with `users` id 1 is referred to as the parent record: ```tsx | pure roleRecord.setParentRecord(userRecord); ``` -### 新记录 +### New Record -对于新表单，我们可以通过 `isNew` 属性来标识： +For new forms, we can identify them using the `isNew` property: ```tsx | pure const record = new CollectionRecord({ @@ -132,9 +132,9 @@ const record = new CollectionRecord({ }); ``` -## 示例 +## Example -### 基本使用 +### Basic Usage ```tsx | pure import { CollectionRecord } from '@nocobase/client'; @@ -146,7 +146,7 @@ const record = new CollectionRecord({ }); ``` -### 创建空记录 +### Creating an Empty Record ```tsx | pure import { CollectionRecord } from '@nocobase/client'; @@ -156,9 +156,9 @@ const record = new CollectionRecord({ }); ``` -### 设置 parentRecord +### Set parentRecord -方式1: 通过构造函数设置 +Method 1: Setting through the constructor ```tsx | pure const parentRecord = new CollectionRecord({ @@ -175,7 +175,7 @@ const record = new CollectionRecord({ }); ``` -方式2: 通过 `setParentRecord` 方法设置 +Method 2: Setting via the `setParentRecord` method ```tsx | pure const parentRecord = new CollectionRecord({ diff --git a/packages/core/client/docs/en-US/core/data-block/data-block-provider.md b/packages/core/client/docs/en-US/core/data-block/data-block-provider.md index 1ffc718afd..a273d45f33 100644 --- a/packages/core/client/docs/en-US/core/data-block/data-block-provider.md +++ b/packages/core/client/docs/en-US/core/data-block/data-block-provider.md @@ -1,16 +1,16 @@ # DataBlockProvider -## 区块类型 +## Block Types -区块分为简单区块和包含各种数据的区块。 +Blocks are divided into simple blocks and blocks that contain various data. -### 简单区块 +### Simple Blocks -简单区块例如 Markdown 区块。 +Simple blocks, such as Markdown blocks. ![](./images/markdown-block.png) -它只有文本内容，没有其他更多复杂数据，且文本内容是存储在 `schema` 中的，没有存储在数据库中。 +It only has text content and no other complex data. The text content is stored in the `schema` and not in the database. ```json {5}| pure { @@ -22,24 +22,24 @@ } ``` -### 数据区块 +### Data Blocks -数据区块是指区块的数据存储在服务端的数据表中，例如 Table 组件。 +Data blocks refer to blocks whose data is stored in server-side database tables, such as the Table component. ![](./images/data-block.png) -Table 中的字段信息及列表数据，都是存储在数据库中的。 +The field information and list data in the Table component are stored in the database. -## DataBlockProvider 介绍 +## Introduction to DataBlockProvider -为了方便对数据区块的数据进行管理，我们提供了 `DataBlockProvider` 组件，其内部封装了： +To facilitate the management of data in data blocks, we provide the `DataBlockProvider` component, which encapsulates the following components: -- `DataBlockProvider`：封装了下面的所有组件，并提供了区块属性 - - [CollectionProvider](/core/data-source/collection-provider) / [AssociationProvider](/core/data-source/association-provider): 根据 `DataBlockProvider` 提供的上下文信息，查询对应数据表数据及关系字段信息并传递 - - [BlockResourceProvider](/core/data-block/data-block-resource-provider): 根据 `DataBlockProvider` 提供的上下文信息，构建区块 [Resource](/core/request) API，用于区块数据的增删改查 - - [BlockRequestProvider](/core/data-block/data-block-request-provider): 根据 `DataBlockProvider` 提供的上下文信息，自动调用 `BlockResourceProvider` 提供的 `resource.get()` 或 `resource.list()` 发起请求，得到区块数据，并传递 - - [CollectionRecordProvider](/core/data-source/record-provider): 对于 `resource.get()` 场景，会自动嵌套 `CollectionRecordProvider` 并将 `resource.get()` 请求结果传递下去，`resource.list()` 场景则需要自行使用 `CollectionRecordProvider` 提供数据记录 +- `DataBlockProvider`: Encapsulates all the components below and provides block properties + - [CollectionProvider](/core/data-source/collection-provider) / [AssociationProvider](/core/data-source/association-provider): Queries the corresponding data table data and relationship field information based on the context information provided by `DataBlockProvider` and passes them on + - [BlockResourceProvider](/core/data-block/data-block-resource-provider): Constructs the block [Resource](/core/request) API based on the context information provided by `DataBlockProvider`, used for CRUD operations on block data + - [BlockRequestProvider](/core/data-block/data-block-request-provider): Automatically calls `resource.get()` or `resource.list()` provided by `BlockResourceProvider` based on the context information provided by `DataBlockProvider`, retrieves block data, and passes it on + - [CollectionRecordProvider](/core/data-source/record-provider): For the `resource.get()` scenario, it automatically nests `CollectionRecordProvider` and passes the `resource.get()` request result down. For the `resource.list()` scenario, you need to use `CollectionRecordProvider` to provide data records manually. ```tsx | pure const DataBlockProvider = (props) => { @@ -59,17 +59,17 @@ const DataBlockProvider = (props) => { } ``` -上述组件封装到 `DataBlockProvider` 的内部，只需要使用 `DataBlockProvider` 即可自行得到上述数据。 +The above components are encapsulated inside the `DataBlockProvider`, and you only need to use `DataBlockProvider` to obtain the above data. -### 使用方式 +### Usage -其主要使用在区块的 schema [x-decorator](https://docs.nocobase.com/development/client/ui-schema/what-is-ui-schema#x-decorator) 中，例如： +It is mainly used in the schema `x-decorator` of the block, for example: ```js {5}| pure { type: 'void', name: 'hello-block', - 'x-component': 'CardItem', + 'x-component': 'CardItem', 'x-decorator': 'DataBlockProvider', 'x-decorator-props': { collection: 'users', @@ -83,20 +83,20 @@ const DataBlockProvider = (props) => { } ``` -### 完整示例 +### Complete Example -## 属性 +## Properties -### 静态属性和动态属性 +### Static Properties and Dynamic Properties -- schema 中的 `x-decorator-props` 称为静态属性，它是一个普通对象，记录区块的配置信息 -- schema 中的 `x-use-decorator-props` 中的属性称为动态属性，它是一个 React hook，可用于获取例如 URL 上的 ID，或者父级的 context 数据 +- The `x-decorator-props` in the schema is called static properties, which is a plain object that records the configuration information of the block. +- The properties in `x-use-decorator-props` in the schema are called dynamic properties, which is a React hook that can be used to obtain data such as the ID on the URL or the context data of the parent. -当两者都存在时，会进行深度合并，作为 `DataBlockProvider` 的属性。 +When both exist, they will be deeply merged and used as properties of `DataBlockProvider`. -### 属性详解 +### Property Details ```ts | pure interface AllDataBlockProps { @@ -112,15 +112,15 @@ interface AllDataBlockProps { } ``` -- collection（`x-decorator-props`）：区块的 collection 表名，用于获取区块的字段信息和区块数据 -- association（`x-decorator-props`）：区块的关系字段名，用于获取区块的关系字段信息和关系字段数据 -- dataSource(`x-decorator-props`): 数据源，具体可参考 [Data Modeling](https://docs.nocobase.com/manual/data-modeling) -- action（`x-decorator-props`）：区块的请求类型，`list` 或 `get` -- params（`x-decorator-props` 和 `x-use-decorator-props`）：区块的请求参数，同时存在于 -- filterByTk（`x-use-decorator-props`）：相当于 `params.filterByTk`，可理解为 `id`，用于获取单条数据 -- sourceId（`x-use-decorator-props`）：区块的 sourceId，配合 `association` 使用，用于获取区块的关系字段数据 -- record（`x-use-decorator-props`）：当提供 `record` 时，会使用 `record` 作为区块的数据，不发起请求 -- parentRecord（`x-use-decorator-props`）：当提供 `parentRecord` 时，会使用 `parentRecord` 作为关系字段的表数据，不发起请求 +- collection (`x-decorator-props`): The table name of the block's collection, used to retrieve the field information and block data of the block. +- association (`x-decorator-props`): The name of the relationship field of the block, used to retrieve the relationship field information and data of the block. +- dataSource (`x-decorator-props`): The data source, refer to [Data Modeling](https://docs.nocobase.com/manual/data-modeling) for details. +- action (`x-decorator-props`): The request type of the block, either `list` or `get`. +- params (`x-decorator-props` and `x-use-decorator-props`): The request parameters of the block, exist in both `x-decorator-props` and `x-use-decorator-props`. +- filterByTk (`x-use-decorator-props`): Equivalent to `params.filterByTk`, can be understood as `id`, used to retrieve a single data. +- sourceId (`x-use-decorator-props`): The sourceId of the block, used in conjunction with `association` to retrieve the relationship field data of the block. +- record (`x-use-decorator-props`): When provided, the `record` will be used as the data of the block instead of making a request. +- parentRecord (`x-use-decorator-props`): When provided, the `parentRecord` will be used as the table data of the relationship field instead of making a request. ```tsx | pure const DataBlockProvider = (props) => { @@ -140,57 +140,41 @@ const DataBlockProvider = (props) => { } ``` -### 属性组合和场景 +### Property Combinations and Scenarios -这些属性根据不同的场景，共有 8 中情况： +These properties have 8 different combinations based on different scenarios: - collection - - 创建：`collection` - - 获取单条数据：`collection` + `action: get` + `params` - - 获取列表数据：`collection` + `action: list` + `params` - - 使用 `record` 作为数据：`collection` + `record` + - Create: `collection` + - Get a single data: `collection` + `action: get` + `params` + - Get a list of data: `collection` + `action: list` + `params` + - Use `record` as data: `collection` + `record` -对于 *获取单条数据* 和 *获取列表数据* `params` 非必须。 +For *Get a single data* and *Get a list of data*, `params` is optional. - association - - 创建：`association` + `sourceId` - - 获取单条数据：`association` + `sourceId` + `action: get` + `params` + `parentRecord` - - 获取列表数据：`association` + `sourceId` + `action: list` + `params` + `parentRecord` - - 使用 `record` 作为数据：`association` + `sourceId` + `record` + `parentRecord` + - Create: `association` + `sourceId` + - Get a single data: `association` + `sourceId` + `action: get` + `params` + `parentRecord` + - Get a list of data: `association` + `sourceId` + `action: list` + `params` + `parentRecord` + - Use `record` as data: `association` + `sourceId` + `record` + `parentRecord` +For *Get a single data* and *Get a list of data*, `params` and `parentRecord` are optional. If `parentRecord` is not provided, it will query the corresponding `collection` based on the `association`, and then query the corresponding `parentRecord` based on the `collection`. -对于 *获取单条数据* 和 *获取列表数据* `params` 和 `parentRecord` 非必须，当没有 `parentRecord` 会根据 `association` 查询到对应的 `collection`，然后再根据 `collection` 查询到对应的 `parentRecord`。 - -### 属性获取和修改 +### Property Access and Modification #### useDataBlock() -可用于获取和修改 `DataBlockProvider` 的属性。 +Used to access and modify the properties of `DataBlockProvider`. -- 类型 - -```tsx | pure -interface Result { - props: AllDataBlockProps & T; - dn: Designable; -} -const useDataBlock: () => Result -``` - -- 详解 - -`props` 就对应着上面的 `AllDataBlockProps`。 -`dn` 是 `Designable` 对象，可用于修改 `DataBlockProvider` 的 UI schema，详细见 [Designable](/core/ui-schema/designable)。 - -- 示例 +- Type ```tsx | pure const { props, dn } = useDataBlock<{ tableProps: { bordered?: boolean } }>(); -// 获取 +// get const checked = props.tableProps.bordered; -// 修改 +// change dn.deepMerge({ 'x-decorator-props': { tableProps: { @@ -202,7 +186,7 @@ dn.deepMerge({ #### useDataBlockProps() -相当于 `useDataBlock().props`。 +Equivalent to `useDataBlock().props`. ```tsx | pure const props = useDataBlockProps<{ tableProps: { bordered?: boolean } }>(); @@ -210,7 +194,7 @@ const props = useDataBlockProps<{ tableProps: { bordered?: boolean } }>(); const checked = props.tableProps.bordered; ``` -## 示例 +## Example ### collection @@ -232,7 +216,7 @@ const checked = props.tableProps.bordered; ### association -association 与 collection 类似，只是需要提供 `sourceId`，我们以 `Table list` 为例。 +association is similar to collection, but it requires providing `sourceId`. Let's take `Table list` as an example. #### Table list & sourceId @@ -240,7 +224,7 @@ association 与 collection 类似，只是需要提供 `sourceId`，我们以 `T #### Table list & parentRecord -如果不提供 `sourceId`，则需要提供 `parentRecord`，我们以 `Table list` 为例。 +If `sourceId` is not provided, `parentRecord` needs to be provided. Let's take `Table list` as an example. diff --git a/packages/core/client/docs/en-US/core/data-block/data-block-request-provider.md b/packages/core/client/docs/en-US/core/data-block/data-block-request-provider.md index 48b5801b34..89047d777c 100644 --- a/packages/core/client/docs/en-US/core/data-block/data-block-request-provider.md +++ b/packages/core/client/docs/en-US/core/data-block/data-block-request-provider.md @@ -1,10 +1,10 @@ # DataBlockRequestProvider -其内部获取到 [BlockResourceProvider](/core/data-block/data-block-resource-provider) 提供的 `resource`，根据 [BlockProvider](/core/data-block/data-block-provider) 提供的参数，自动调用 `resource.get()` 或者 `resource.list()` 获取的区块的数据，并通过 context 传递下去。 +It internally retrieves the `resource` provided by [BlockResourceProvider](/core/data-block/data-block-resource-provider), and based on the parameters provided by [BlockProvider](/core/data-block/data-block-provider), automatically calls `resource.get()` or `resource.list()` to obtain the block data, which is then passed down through the context. -## 请求参数 +## Request Parameters -请求参数是获取 `DataBlockProvider` 提供中的 `params` 和 `filterByTk`。 +The request parameters are obtained from the `params` and `filterByTk` within the `DataBlockProvider`. ```ts | pure const schema = { @@ -12,12 +12,12 @@ const schema = { 'x-decorator-props': { 'collection': 'users', 'action': 'list', - // 静态参数 + // Static props params: { pageSize: 10, } }, - // 动态参数 + // Dynamic props 'x-use-decorator-props': 'useDynamicDataBlockProps', } @@ -30,13 +30,13 @@ const useDynamicDataBlockProps: UseDataBlockProps<'CollectionList'> = () => { } ``` -会自动调用 `resource.list()` 获取数据，发起 `GET /api/users:list?pageSize=10&size=15` 的请求。 +It will automatically call `resource.list()` to fetch the data, making a `GET` request to `/api/users:list?pageSize=10&size=15`. ## Hooks ### useDataBlockRequest() -用于获取请求对象，一般用区块组件中。 +Used to obtain the request object, typically within block components. ```tsx | pure const MyTable = () => { @@ -58,18 +58,18 @@ const MyTable = () => { ## Record -### Get 请求 +### Get Request -对于 `get` 请求，当获取到 `data` 数据后，会通过 `CollectionRecordProvider` 提供 `record` 对象，用于获取当前区块的数据。 +For `GET` requests, once the `data` is retrieved, a `record` object is provided through `CollectionRecordProvider`, which is used to obtain the data for the current block. ```ts | pure const schema = { 'x-decorator': 'DataBlockProvider', 'x-decorator-props': { 'collection': 'users', - 'action': 'get', // get 请求 + 'action': 'get', // get request }, - // 动态参数 + // Dynamic props 'x-use-decorator-props': 'useDynamicFormProps', } @@ -82,19 +82,18 @@ const useDynamicDataBlockProps: UseDataBlockProps<'CollectionGet'> = () => { } ``` -会自动调用 `resource.get()` 获取数据，发起 `GET /api/users:get/1` 的请求，并通过 `CollectionRecordProvider` 提供上下文。 +It will automatically invoke `resource.get()` to retrieve data, making a `GET` request to `/api/users:get/1`, and provide the context through `CollectionRecordProvider`. ```tsx | pure const { data } = useDataBlockRequest(); -const record = useCollectionRecord(); // record 上下文数据 +const record = useCollectionRecord(); // record context data -// 相等 record.data === data; ``` -### List 请求 +### List Request -对于 `list` 请求则不会提供 `record` 对象，需要自己通过 `` 设置上下文。 +For `list` requests, a `record` object will not be provided, and you will need to set the context yourself using ``. ```tsx | pure const MyTable = () => { diff --git a/packages/core/client/docs/en-US/core/data-block/data-block-resource-provider.md b/packages/core/client/docs/en-US/core/data-block/data-block-resource-provider.md index 50178dc86f..e1c3cee269 100644 --- a/packages/core/client/docs/en-US/core/data-block/data-block-resource-provider.md +++ b/packages/core/client/docs/en-US/core/data-block/data-block-resource-provider.md @@ -1,25 +1,24 @@ # DataBlockResourceProvider -根据 `DataBlockProvider` 中的 `collection`、`association`、`sourceId` 等属性，构建好 [resource](/core/request) 对象，方便子组件对区块数据的增删改查操作，其内置在 [DataBlockProvider](/core/data-block/data-block-provider) 中 - +Builds the `resource` object based on the `collection`, `association`, `sourceId`, and other attributes in the `DataBlockProvider`, facilitating the CRUD operations on block data for child components. It is built-in within the [DataBlockProvider](/core/data-block/data-block-provider). ## useDataBlockResource -用于获取当前数据块的 resource 对象。 +Used to retrieve the `resource` object for the current data block. -- 类型 +- Type ```ts | pure function useDataBlockResource(): IResource ``` -- 示例 +- Example ```ts | pure const resource = useDataBlockResource(); const onSubmit = async (values) => { - // 创建 + // create await resource.create({ values }); } ``` @@ -28,9 +27,7 @@ const onSubmit = async (values) => { const resource = useDataBlockResource(); const onDelete = async () => { - // 删除 + // delete await resource.destroy(); } ``` - -可运行示例 diff --git a/packages/core/client/docs/en-US/core/data-source/association-provider.md b/packages/core/client/docs/en-US/core/data-source/association-provider.md index 97da3d3ab1..8d7a091108 100644 --- a/packages/core/client/docs/en-US/core/data-source/association-provider.md +++ b/packages/core/client/docs/en-US/core/data-source/association-provider.md @@ -1,6 +1,6 @@ # AssociationProvider -用于传递关联数据字段以及对应的数据表信息，等同于 `CollectionFieldProvider` + `CollectionProvider`。 +Used for passing associated data fields and their corresponding table information, equivalent to `CollectionFieldProvider` + `CollectionProvider`. ```tsx | pure const AssociationProvider = @@ -10,4 +10,4 @@ const AssociationProvider = ``` -关于关系字段的更多信息，请参考 [关系字段](https://docs.nocobase.com/development/server/collections/association-fields) 以及 [CollectionField](/core/data-source/collection-field)。 +For more information on relational fields, please refer to [Association Fields](https://docs.nocobase.com/development/server/collections/association-fields) and [CollectionField](/core/data-source/collection-field). diff --git a/packages/core/client/docs/en-US/core/data-source/collection-field-interface-manager.md b/packages/core/client/docs/en-US/core/data-source/collection-field-interface-manager.md index b589784e5a..11a03318be 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-field-interface-manager.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-field-interface-manager.md @@ -1,23 +1,23 @@ # CollectionFieldInterfaceManager -主要是用来管理 [CollectionFieldInterface](./collection-field-interface.md) 和 [CollectionFieldInterfaceGroups](#collectionfieldinterfacegroups)，其被 [DataSourceManager](./data-source-manager) 管理。 +It is mainly used to manage [CollectionFieldInterface](./collection-field-interface.md) and [CollectionFieldInterfaceGroups](#collectionfieldinterfacegroups), which are managed by [DataSourceManager](./data-source-manager). ## CollectionFieldInterfaceGroups -CollectionFieldInterfaceGroups 是用来对数据表字段进行分组的。 +CollectionFieldInterfaceGroups are used to group data table fields. ![Field Groups](./images/field-groups.png) -## 实例方法 +## Instance Methods ### field interface #### addFieldInterfaces() -添加 field interface。 +Add field interface。 -- 类型 +- Type ```tsx | pure class CollectionFieldInterfaceManager { @@ -25,7 +25,7 @@ class CollectionFieldInterfaceManager { } ``` -- 示例 +- Example ```tsx | pure class CheckboxFieldInterface extends CollectionFieldInterface { @@ -47,9 +47,9 @@ class MyPlugin extends Plugin { #### getFieldInterface() -获取 field interface。 +Get field interface。 -- 类型 +- Type ```tsx | pure class CollectionFieldInterfaceManager { @@ -57,7 +57,7 @@ class CollectionFieldInterfaceManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -69,9 +69,9 @@ class MyPlugin extends Plugin { #### getFieldInterfaces() -获取所有的 field interface。 +Get all field interface。 -- 类型 +- Type ```tsx | pure class CollectionFieldInterfaceManager { @@ -79,7 +79,7 @@ class CollectionFieldInterfaceManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -93,9 +93,9 @@ class MyPlugin extends Plugin { #### addFieldInterfaceGroups() -添加 field interface group。 +Add field interface group。 -- 类型 +- Type ```tsx | pure class CollectionFieldInterfaceManager { @@ -103,7 +103,7 @@ class CollectionFieldInterfaceManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -128,9 +128,9 @@ class MyPlugin extends Plugin { #### getFieldInterfaceGroups() -获取所有的 field interface group。 +Get all field interface group。 -- 类型 +- Type ```tsx | pure class CollectionFieldInterfaceManager { @@ -138,7 +138,7 @@ class CollectionFieldInterfaceManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -150,9 +150,9 @@ class MyPlugin extends Plugin { #### getFieldInterfaceGroup() -获取 field interface group。 +Get field interface group。 -- 类型 +- Type ```tsx | pure class CollectionFieldInterfaceManager { @@ -160,7 +160,7 @@ class CollectionFieldInterfaceManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { diff --git a/packages/core/client/docs/en-US/core/data-source/collection-field-interface.md b/packages/core/client/docs/en-US/core/data-source/collection-field-interface.md index bb2c1aebfc..a926a17798 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-field-interface.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-field-interface.md @@ -1,6 +1,6 @@ # CollectionFieldInterface -用于创建数据字段。 +Used to create data fields. ![](./images/collection-field-interface.png) @@ -41,7 +41,7 @@ class CollectionFieldInterface { } ``` -其需要结合 [CollectionManager](./collection-field-interface-manager.md) 使用。 +It needs to be used in conjunction with [CollectionManager](./collection-field-interface-manager.md). ```ts class EmailFieldInterface extends CollectionFieldInterface { @@ -61,28 +61,28 @@ class MyPlugin extends Plugin { } ``` -## 实例属性 +## Instance Properties ### name -唯一标识符。 +Unique identifier. ### group -分组。 +Group. ### title -标题。 +Title. ### default -配置表单默认值字段 schema。 +Configure the default value field schema for the form. ![](./images/collection-field-interface-form.png) -## 实例方法 +## Instance Methods ### collectionFieldInterface.validateSchema(fieldSchema) diff --git a/packages/core/client/docs/en-US/core/data-source/collection-field.md b/packages/core/client/docs/en-US/core/data-source/collection-field.md index 3f64b94a61..cd58723067 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-field.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-field.md @@ -1,6 +1,6 @@ # CollectionField -NocoBase 将字段的 schema 分为 2 部分，一部分在 schema 中，一部分在 collection 中。例如： +NocoBase divides the schema of a field into two parts: one in the schema and the other in the collection. For example: ```tsx | pure const schema = { @@ -30,15 +30,15 @@ const collection = { } ``` -两者通过 `name: username` 联系起来，`CollectionField` 会自动读取 schema `name` 属性，并根据 `name` 属性查找 collection 中对应的 `uiSchema` 属性，然后拼接到 schema 中，进行渲染。 +The two are connected through `name: username`. The `CollectionField` automatically reads the `name` property from the schema and looks for the corresponding `uiSchema` property in the collection. It then concatenates it to the schema for rendering. -这样做的好处是，对于同一个字段创建的内容，可以在不同的地方共享同一个 schema，当 schema 变化时，只需要修改一处即可。比如通过上面的 `title: "UserName"` 假设变化 `title: "Name"` 则所有使用到此字段的地方都会变化。 +The benefit of doing this is that for content created with the same field, the same schema can be shared in different places. When the schema changes, only one modification is needed. For example, if we change `title: "UserName"` to `title: "Name"`, it will be reflected in all places where this field is used. ## CollectionFieldOptions -字段的配置项。 +Configuration options for the field. ```ts interface CollectionFieldOptions { @@ -52,13 +52,13 @@ interface CollectionFieldOptions { } ``` -### 普通字段和关系字段 +### Regular Fields and Relationship Fields -字段有 2 种情况，一种是普通字段，一种是 [关系字段](https://docs-cn.nocobase.com/development/server/collections/association-fields)。 +There are two types of fields: regular fields and [relationship fields](https://docs-cn.nocobase.com/development/server/collections/association-fields). -关系字段是指，字段的值是另一个 collection 的数据，例如 `users` 和 `roles` 两个 collection，`users` 中有一个字段 `roles`，其值是 `roles` collection 的数据，那么 `roles` 就是一个关系字段。 +A relationship field refers to a field whose value is data from another collection. For example, if there are two collections, `users` and `roles`, and the `users` collection has a field called `roles` whose value is data from the `roles` collection, then `roles` is a relationship field. -普通字段的示例如下： +Here is an example of a regular field: ```json { @@ -81,7 +81,7 @@ interface CollectionFieldOptions { } ``` -关系字段的示例如下： +Here is an example of a relationship field: ```json { @@ -115,24 +115,24 @@ interface CollectionFieldOptions { } ``` -相对于普通字段，关系字段多了以下属性： +Compared to regular fields, relationship fields have the following additional properties: - xx - xx -### 全部字段说明 +### Field Descriptions -- `name`：字段名称 -- `collectionName`：数据表名称 -- `sourceKey`：当字段为关系字段时，对应的关系字段名称。 +- `name`: Field name +- `collectionName`: Table name +- `sourceKey`: When the field is a relationship field, it corresponds to the relationship field name. -TODO：补全 +TODO ## Hooks ### useCollectionField() -用于获取字段信息。 +Used to retrieve field information. ```tsx | pure const collection = { @@ -156,7 +156,7 @@ const { uiSchema } = useCollectionField() const required = uiSchema?.required ``` -其通常在 [SchemaSettings](/core/ui-schema/schema-settings) 中使用，用来获取和修改字段的属性。 +It is usually used in [SchemaSettings](/core/ui-schema/schema-settings) to retrieve and modify field properties. diff --git a/packages/core/client/docs/en-US/core/data-source/collection-manager-provider.md b/packages/core/client/docs/en-US/core/data-source/collection-manager-provider.md index b37a6a27f9..85261af390 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-manager-provider.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-manager-provider.md @@ -2,9 +2,9 @@ 用于提供 [CollectionManager](/core/data-source/collection-manager) 实例。 -## 组件 +## Component -- 类型 +- Type ```tsx | pure interface CollectionManagerProviderProps { @@ -14,11 +14,11 @@ interface CollectionManagerProviderProps { } ``` -- 参数详解 - - `dataSource` - 数据源名称，如果为空，则会取默认数据源。 - - `instance` - CollectionManager 实例，如果没有，则会取 `dataSource` 对应的 collectionManager。 +- Parameter Details + - `dataSource` - The name of the data source. If empty, the default data source will be used. + - `instance` - The CollectionManager instance. If not provided, the collectionManager corresponding to the `dataSource` will be used. -- 示例 +- Example ```tsx | pure const collectionManager = new CollectionManager(); @@ -36,9 +36,9 @@ const Demo = () => { ### useCollectionManager() -用于获取 `CollectionManagerProvider` 传递的实例。 +Used to retrieve the instance passed by `CollectionManagerProvider`. -- 示例 +- Example ```tsx | pure const Demo = () => { diff --git a/packages/core/client/docs/en-US/core/data-source/collection-manager.md b/packages/core/client/docs/en-US/core/data-source/collection-manager.md index 5df92575d5..51b081c8a8 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-manager.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-manager.md @@ -1,14 +1,14 @@ # CollectionManager -用于管理 [Collection](./collection.md)，其被 [DataSource](./data-source.md) 管理。 +Used to manage [Collection](./collection.md), which is managed by [DataSource](./data-source.md). -## 实例方法 +## Instance Methods ### addCollections(collections) -添加数据表。 +Add collections. -- 类型 +- Type ```tsx | pure class CollectionManager { @@ -16,7 +16,7 @@ class CollectionManager { } ``` -- 示例 +- Example ```tsx | pure const userCollectionOptions = { @@ -32,9 +32,9 @@ collectionManager.addCollections([userCollectionOptions]); ### setCollections(collections) -重置数据表，会先移除所有数据表，然后再调用 `addCollections()` 添加数据表。 +Reset collections, which will remove all collections first, and then call `addCollections()` to add collections. -- 类型 +- Type ```tsx | pure class CollectionManager { @@ -46,7 +46,7 @@ class CollectionManager { 由于 [CollectionTemplate](./collection-template.md) 或者 [CollectionMixins](./collection-mixins.md) 的添加会影响 Collection 的实例化，所以提供了重新添加数据表的方法。 -- 类型 +- Type ```tsx | pure class CollectionManager { @@ -54,7 +54,7 @@ class CollectionManager { } ``` -- 示例 +- Example ```tsx | pure const userCollectionInstance = collectionManager.getCollection('users'); @@ -63,9 +63,9 @@ collectionManager.reAddCollections([userCollectionInstance]); ### getCollections(predicate?) -获取数据表。 +Get a collection. -- 类型 +- Type ```tsx | pure class CollectionManager { @@ -73,7 +73,7 @@ class CollectionManager { } ``` -- 示例 +- Example ```tsx | pure collectionManager.getCollections(); // [ userCollection ] @@ -84,9 +84,9 @@ collectionManager.getCollections(collection => collection.name === 'posts'); // ### getCollection(path) -获取数据表。 +Get a collection. -- 类型 +- Type ```tsx | pure class CollectionManager { @@ -94,12 +94,12 @@ class CollectionManager { } ``` -- 详细解释 - - `path` 参数可以是数据表名称，也可以是[关系字段](https://docs.nocobase.com/development/server/collections/association-fields)路径。 - - `path: 'users'`: 获取 `users` 数据表 - - `path: 'users.posts'`: 获取 `users` 数据表的 `posts` 关联字段对应的数据表，即 `postCollection` +- Details + - The `path` parameter can be either the name of a collection or a path to a [relationship field](https://docs.nocobase.com/development/server/collections/association-fields). + - `path: 'users'`: Get the `users` collection. + - `path: 'users.posts'`: Get the collection corresponding to the `posts` associated field of the `users` collection, i.e., `postCollection`. -- 示例 +- Example ```tsx | pure collectionManager.getCollection('users'); // userCollection @@ -108,7 +108,7 @@ collectionManager.getCollection('users.posts'); // postCollection collectionManager.getCollection('users.profileId'); // profileCollection ``` -结合 Mixin 使用： +Using Mixins: ```tsx | pure const collection = collectionManager.getCollection('users'); @@ -117,9 +117,9 @@ const collection = collectionManager.getCollection('user ### getCollectionFields(collectionName) -获取数据表字段列表。 +Get the list of fields for a collection. -- 类型 +- Type ```tsx | pure class CollectionManager { @@ -127,7 +127,7 @@ class CollectionManager { } ``` -- 示例 +- Example ```tsx | pure collectionManager.getCollectionFields('users'); // [ { name: 'username', type: 'string', title: 'Username', .. }, { name: 'password', type: 'password', title: 'Password', .. } ] @@ -135,9 +135,9 @@ collectionManager.getCollectionFields('users'); // [ { name: 'username', type: ' ### getCollectionName(path) -获取数据表名称。 +Get the collection name. -- 类型 +- Type ```tsx | pure class CollectionManager { @@ -145,7 +145,7 @@ class CollectionManager { } ``` -- 示例 +- Example ```tsx | pure collectionManager.getCollectionName('users'); // 'users' @@ -156,9 +156,9 @@ collectionManager.getCollectionName('users.profiles'); // 'profiles' ### getCollectionField(path) -获取数据表字段。 +Get collection fields. -- 类型 +- Type ```tsx | pure class CollectionManager { @@ -166,10 +166,10 @@ class CollectionManager { } ``` -- 示例 +- Example ```tsx | pure collectionManager.getCollectionField('users.username'); // { name: 'username', type: 'string', title: 'Username', .. } -collectionManager.getCollectionField('users.roles.name'); // 获取 roles 关联字段对应的 roles 表中的 name 字段 +collectionManager.getCollectionField('users.roles.name'); // Get the 'name' field in the 'roles' table corresponding to the 'roles' associated field ``` diff --git a/packages/core/client/docs/en-US/core/data-source/collection-mixins.md b/packages/core/client/docs/en-US/core/data-source/collection-mixins.md index 6512fccc36..8457a2e17d 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-mixins.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-mixins.md @@ -1,7 +1,7 @@ ## Collection Mixins -Collection Mixins 是为扩展 Collection 类提供的一种机制，可以通过 `dataSourceManager.addCollectionMixins()` 添加 Collection Mixins。 +Collection Mixins are a mechanism for extending the Collection class, and can be added using `dataSourceManager.addCollectionMixins()`. ### 定义和注册 @@ -22,9 +22,9 @@ class MyPlugin extends Plugin { } ``` -### 使用 +### Usage -- 使用方式1：在 `CollectionManager` 实例上调用 `getCollection()` 获取指定 `Collection` 实例。 +- Method 1: Call `getCollection()` on the `CollectionManager` instance to retrieve a specific `Collection` instance. ```tsx | pure const Demo = () => { @@ -35,7 +35,7 @@ const Demo = () => { } ``` -- 使用方式2：调用 `useCollection()` 获取当前上下文的数据表信息。 +- Usage 2: Call `useCollection()` to get the table information of the current context. ```tsx | pure const Demo = () => { @@ -44,9 +44,9 @@ const Demo = () => { } ``` -### 多个 Mixins 的使用 +### Usage of Multiple Mixins -如果添加了 Mixins，可通过如下方式获得类型提示： +If you have added mixins, you can get type hints using the following method: ```tsx | pure const Demo = () => { diff --git a/packages/core/client/docs/en-US/core/data-source/collection-provider.md b/packages/core/client/docs/en-US/core/data-source/collection-provider.md index 141187df89..78069ac13d 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-provider.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-provider.md @@ -1,12 +1,12 @@ # CollectionProvider -用于提供 [Collection](/core/data-source/collction) 实例。 +Used to provide an instance of [Collection](/core/data-source/collection). -## 组件 +## Component ### CollectionProvider -- 类型 +- Type ```tsx | pure interface CollectionProviderProps { @@ -16,13 +16,13 @@ interface CollectionProviderProps { } ``` -- 详解 +- Details -组件会根据 `name` 去 [CollectionManager](/core/data-source/collection-manager) 中查询数据表信息，如果查询不到，则会不进行渲染。 +The component will query the table information from the [CollectionManager](/core/data-source/collection-manager) based on the `name`. If the query fails, it will not be rendered. -`dataSource` 用于指定数据表所在的[命名空间](/core/data-source/collection-manager#datasource)，如果不指定，则默认命名空间。 +The `dataSource` is used to specify the namespace of the table in the [CollectionManager](/core/data-source/collection-manager#datasource). If not specified, the default namespace will be used. -- 示例 +- Example ```tsx | pure import { CollectionProvider } from '@nocobase/client'; @@ -36,12 +36,11 @@ const MyComponent = () => { } ``` - ## Hooks ### useCollection() -用于获取 `CollectionProvider` 传递的 `Collection` 实例。 +Used to retrieve the `Collection` instance passed by `CollectionProvider`. ```tsx | pure const collection = useCollection() @@ -50,14 +49,14 @@ console.log(collection instanceof Collection) // true console.log(collection); ``` -结合 Mixin 使用： +Using Mixins: ```tsx | pure const collection = useCollection() const collection = useCollection() ``` -## 示例 +## Example diff --git a/packages/core/client/docs/en-US/core/data-source/collection-template-manager.md b/packages/core/client/docs/en-US/core/data-source/collection-template-manager.md index 1ff0bffea6..6729baeb76 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-template-manager.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-template-manager.md @@ -1,14 +1,14 @@ # CollectionTemplateManager -用于管理 [CollectionTemplate](./collection-template)，其被 [DataSourceManager](./data-source-manager) 管理。 +Used to manage [CollectionTemplate](./collection-template), which is managed by [DataSourceManager](./data-source-manager). -## 实例方法 +## Instance Methods ### addCollectionTemplates() -用于添加 collection template。 +Used to add collection templates. -- 类型 +- Type ```tsx | pure class CollectionTemplateManager { @@ -16,7 +16,7 @@ class CollectionTemplateManager { } ``` -- 示例 +- Example ```tsx | pure class SqlCollectionTemplate extends CollectionTemplate { @@ -49,9 +49,9 @@ class MyPlugin extends Plugin { ### getCollectionTemplate() -用于获取 collection template。 +Used to retrieve collection templates. -- 类型 +- Type ```tsx | pure class CollectionTemplateManager { @@ -59,7 +59,7 @@ class CollectionTemplateManager { } ``` -- 示例 +- Example ```tsx | pure collectionManager.getCollectionTemplate(); // generalCollectionTemplate @@ -69,9 +69,9 @@ collectionManager.getCollectionTemplate('tree'); // treeCollectionTemplate ### getCollectionTemplates() -用于获取所有 collection templates。 +Used to retrieve all collection templates. -- 类型 +- Type ```tsx | pure class CollectionTemplateManager { @@ -79,7 +79,7 @@ class CollectionTemplateManager { } ``` -- 示例 +- Example ```tsx | pure collectionManager.getCollectionTemplates(); // [ generalCollectionTemplate, treeCollectionTemplate, sqlCollectionTemplate ] diff --git a/packages/core/client/docs/en-US/core/data-source/collection-template.md b/packages/core/client/docs/en-US/core/data-source/collection-template.md index eb248e519e..69846a8473 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection-template.md +++ b/packages/core/client/docs/en-US/core/data-source/collection-template.md @@ -1,6 +1,6 @@ # CollectionTemplate -用于创建数据表的模板。 +Template used for creating data tables. ![](./images/collection-template.png) @@ -15,27 +15,27 @@ interface AvailableFieldInterfacesExclude { interface CollectionTemplateDefaultOptions { /** - * 自动生成 id + * Auto-generate id * @default true * */ autoGenId?: boolean; - /** 创建人 */ + /** Created by */ createdBy?: boolean; - /** 最后更新人 */ + /** Updated by */ updatedBy?: boolean; - /** 创建日期 */ + /** Created at */ createdAt?: boolean; - /** 更新日期 */ + /** Updated at */ updatedAt?: boolean; - /** 可排序 */ + /** Sortable */ sortable?: boolean; - /* 树结构 */ + /* Tree structure */ tree?: string; - /* 日志 */ + /* Logging */ logging?: boolean; - /** 继承 */ + /** Inherits */ inherits?: string | string[]; - /* 字段列表 */ + /* Field list */ fields?: CollectionOptions['fields']; } @@ -48,27 +48,27 @@ class CollectionTemplate { transform?: (collection: CollectionOptions, app: Application) => CollectionOptions; title?: string; color?: string; - /** 排序 */ + /** Order */ order?: number; - /** 默认配置 */ + /** Default configuration */ default?: CollectionTemplateDefaultOptions; events?: any; - /** UI 可配置的 CollectionOptions 参数（添加或编辑的 Collection 表单的字段） */ + /** UI configurable CollectionOptions parameters (fields in the form for adding or editing Collection) */ configurableProperties?: Record; - /** 当前模板可用的字段类型 */ + /** Available field interfaces for the current template */ availableFieldInterfaces?: AvailableFieldInterfacesInclude | AvailableFieldInterfacesExclude; - /** 是否分割线 */ + /** Divider */ divider?: boolean; - /** 模板描述 */ + /** Template description */ description?: string; - /**配置字段中的操作按钮 */ + /** Configure actions in the configuration fields */ configureActions?: Record; - //是否禁止删除字段 + // Whether to forbid field deletion forbidDeletion?: boolean; } ``` -其需要结合 [CollectionManager](./collection-template-manager.md) 使用。 +It needs to be used in conjunction with [CollectionManager](./collection-template-manager.md). ```ts import { Plugin, Collection, CollectionTemplate } from '@nocobase/client'; @@ -103,24 +103,24 @@ class MyPlugin extends Plugin { } ``` -## 实例属性 +## Instance Properties ### name -模板的唯一标识符。 +The unique identifier of the template. ### Collection -模板对应的数据表类。 +The data table class corresponding to the template. -在创建数据表后，Collection 会有 [template 字段](/core/data-source/collection#collectionoptions)，用于标识该数据表是由哪个模板创建的。 +After creating a data table, the Collection will have a [template field](/core/data-source/collection#collectionoptions) to identify which template the data table was created from. -当通过 `collectionManager.addCollections()` 添加数据表对象时，会先读取 `collection.template` 字段，然后通过 `collectionManager.getCollectionTemplate(collection.template)` 获取到 `collectionTemplate`。 +When adding data table objects through `collectionManager.addCollections()`, it first reads the `collection.template` field, and then retrieves the `collectionTemplate` through `collectionManager.getCollectionTemplate(collection.template)`. -读取 `collectionTemplate.Collection` 字段，并通过 `new collectionTemplate.Collection(collection)` 创建对应的实例。 +It reads the `collectionTemplate.Collection` field and creates the corresponding instance through `new collectionTemplate.Collection(collection)`. -如果不传递 `Collection`，则会通过 `new Collection(collection)` 创建对应的实例。 +If `Collection` is not passed, it creates the corresponding instance through `new Collection(collection)`. ```ts class SqlCollection extends Collection { @@ -146,24 +146,23 @@ const userCollection = { ### title -模板的标题。 +The title of the template. ### color -模板的颜色。 +The color of the template. ### order -模板的排序。 +The order of the template. ### events -- `beforeSubmit`：提交前触发 - +- `beforeSubmit`: Triggered before submission. ### configurableProperties -表单配置项。 +Form configuration items. ![](./images//collection-template-form.png) @@ -197,23 +196,21 @@ class SqlCollectionTemplate extends CollectionTemplate { ### default -表单默认值。 +Default form values. - - -## 实例方法 +## Instance Methods ### collectionTemplate.transform(collection) -collection 创建后，会调用该方法，用于对 collection 进行转换。 +After creating a collection, this method is called to transform the collection. ## Utils ### getConfigurableProperties() -用于获取内置的配置项字段。 +Used to retrieve built-in configurable property fields. -- 类型 +- Type ```tsx | pure export type DefaultConfigurableKeys = @@ -233,7 +230,7 @@ export type DefaultConfigurableKeys = const getConfigurableProperties: (...keys: DefaultConfigurableKeys[]) => Record ``` -- 示例 +- Example ```tsx | pure import { getConfigurableProperties } from '@nocobase/client'; diff --git a/packages/core/client/docs/en-US/core/data-source/collection.md b/packages/core/client/docs/en-US/core/data-source/collection.md index 5cce1e5517..8c11c14974 100644 --- a/packages/core/client/docs/en-US/core/data-source/collection.md +++ b/packages/core/client/docs/en-US/core/data-source/collection.md @@ -1,6 +1,6 @@ # Collection -Collection 数据表类，其被 [CollectionManager](/core/data-source/collection-manager) 管理。 +The Collection class represents a data table and is managed by the [CollectionManager](/core/data-source/collection-manager). ## 类型 @@ -107,15 +107,15 @@ export interface CollectionOptions { } ``` -- name: Collection 的标识，必须唯一。 +- name: The identifier of the Collection, must be unique. -- title: Collection 的标题，用于显示。 +- title: The title of the Collection, used for display. -- fields: 字段列表，详细说明请查看 [CollectionField](/core/data-source/collection-field) +- fields: The list of fields, for more details please refer to [CollectionField](/core/data-source/collection-field) -- template: 模板标识，用于标识该 Collection 是由哪个模板创建的，详细说明请查看 [CollectionTemplate](/core/data-source/collection-template) +- template: The template identifier, used to identify which template the Collection is created from, for more details please refer to [CollectionTemplate](/core/data-source/collection-template) -- dataSource: 数据源标识，用于标识该 Collection 是由哪个数据源创建的，详细说明请查看 [CollectionDataSource](/core/data-source/collection-manager#datasource) +- dataSource: The data source identifier, used to identify which data source the Collection is created from, for more details please refer to [CollectionDataSource](/core/data-source/collection-manager#datasource) - duplicator @@ -134,7 +134,7 @@ export interface CollectionOptions { - repository -## 实例属性 +## Instance Properties ### collection.collectionManager @@ -142,19 +142,19 @@ export interface CollectionOptions { ### collection.titleFieldName -标题字段的 name 属性。 +The `name` property of the title field. -### 其他属性 +### Other Properties -其他属性同 [CollectionOptions](/core/data-source/collection#collectionoptions)。 +Other properties are the same as [CollectionOptions](/core/data-source/collection#collectionoptions). -## 实例方法 +## Instance Methods ### collection.getOptions() -获取 collection 的所有配置项。 +Get all configuration options of the collection. -- 类型 +- Type ```tsx | pure class Collection { @@ -162,7 +162,7 @@ class Collection { } ``` -- 示例 +- Example ```tsx | pure const usersCollection = new Collection({ @@ -178,9 +178,9 @@ console.log(usersCollection.getOptions()); // { name: 'users', title: 'Users', f ### collection.setOptions(options) -设置 collection 的配置项，最终会和默认配置项进行合并。 +Set the configuration options for the collection, which will be merged with the default configuration options. -- 类型 +- Type ```tsx | pure class Collection { @@ -188,7 +188,7 @@ class Collection { } ``` -- 示例 +- Example ```tsx | pure collection.setOptions({ @@ -202,9 +202,9 @@ collection.setOptions({ ### collection.getOption(key) -获取 collection 的单个配置项。 +Get a single configuration option of the collection. -- 类型 +- Type ```tsx | pure class Collection { @@ -212,7 +212,7 @@ class Collection { } ``` -- 示例 +- Example ```tsx | pure collection.getOption('name'); // 'users' @@ -221,9 +221,9 @@ collection.getOption('title'); // 'Users' ### collection.getFields(predicate?) -获取 collection 的字段列表。 +Get the list of fields for the collection. -- 类型 +- Type ```tsx | pure class Collection { @@ -231,19 +231,19 @@ class Collection { } ``` -- 详解 +- Details - predicate - - 类型 + - Type - `CollectionFieldOptions` - `(collection: CollectionFieldOptions) => boolean` - `keyof CollectionFieldOptions` - - 说明 - - 如果传递了 `predicate`，则返回符合条件的字段列表 - - 如果没有传递 `predicate`，则返回所有字段列表 + - Description + - If `predicate` is provided, it returns a list of fields that meet the condition. + - If `predicate` is not provided, it returns a list of all fields. -`predicate` 的使用可看参考 [lodash.filter](https://www.lodashjs.com/docs/lodash.filter)。 +The usage of `predicate` can be referred to [lodash.filter](https://www.lodashjs.com/docs/lodash.filter). -- 示例 +- Example ```tsx | pure collection.getFields(); // [{ name: 'username', type: 'string', primaryKey: true }, { name: 'age', type: 'integer' }] @@ -257,9 +257,9 @@ collection.getFields(field => field.type === 'string'); // [{ name: 'name', type ### collection.getField(name) -获取 collection 的单个字段。 +Get a single field of the collection. -- 类型 +- Type ```tsx | pure class Collection { @@ -267,7 +267,7 @@ class Collection { } ``` -- 示例 +- Example ```tsx | pure collection.getField('username'); // { name: 'username', type: 'string', primaryKey: true } @@ -275,9 +275,9 @@ collection.getField('username'); // { name: 'username', type: 'string', primaryK ### collection.hasField(name) -判断 collection 是否存在某个字段。 +Check if a collection has a specific field. -- 类型 +- Type ```tsx | pure class Collection { @@ -285,7 +285,7 @@ class Collection { } ``` -- 示例 +- Example ```tsx | pure collection.hasField('username'); // true diff --git a/packages/core/client/docs/en-US/core/data-source/data-source-manager-provider.md b/packages/core/client/docs/en-US/core/data-source/data-source-manager-provider.md index 4b39e452cd..28f1800e2f 100644 --- a/packages/core/client/docs/en-US/core/data-source/data-source-manager-provider.md +++ b/packages/core/client/docs/en-US/core/data-source/data-source-manager-provider.md @@ -1,21 +1,20 @@ # DataSourceManagerProvider -用于提供 `DataSourceManager` 实例。 - +Used to provide an instance of `DataSourceManager`. ## Hooks ### useDataSourceManager() -获取 `DataSourceManager` 实例。 +Get an instance of `DataSourceManager`. -- 类型 +- Type ```tsx | pure function useDataSourceManager(): DataSourceManager; ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { diff --git a/packages/core/client/docs/en-US/core/data-source/data-source-manager.md b/packages/core/client/docs/en-US/core/data-source/data-source-manager.md index 198021e296..9a04de284d 100644 --- a/packages/core/client/docs/en-US/core/data-source/data-source-manager.md +++ b/packages/core/client/docs/en-US/core/data-source/data-source-manager.md @@ -1,6 +1,6 @@ # DataSourceManager -Nocobase 数据源前端体系包含如下内容： +The Nocobase front-end data source system includes the following: - [DataSourceManager](./data-source-manager.md) - [DataSource](./data-source) @@ -14,11 +14,11 @@ Nocobase 数据源前端体系包含如下内容： - [CollectionMixins](./collection-mixins) -## 实例属性 +## Instance Properties - collectionTemplateManager -用于管理 `CollectionTemplate` 实例。 +Used to manage instances of `CollectionTemplate`. ```tsx | pure import { Plugin, CollectionTemplate } from '@nocobase/client'; @@ -34,11 +34,11 @@ class MyPlugin extends Plugin { } ``` -详细请参考：[CollectionTemplateManager](./collection-template-manager) +Please refer to: [CollectionTemplateManager](./collection-template-manager) - collectionFieldInterfaceManager -用于管理 `CollectionFieldInterface` 实例。 +Used to manage instances of `CollectionFieldInterface`. ```tsx | pure import { Plugin, CollectionFieldInterface } from '@nocobase/client'; @@ -54,15 +54,15 @@ class MyPlugin extends Plugin { } ``` -详细请参考：[CollectionTemplateManager](./collection-template-manager) +Please refer to: [CollectionTemplateManager](./collection-template-manager) -## 实例方法 +## Instance Methods ### addCollectionTemplates() -是 `CollectionTemplateManager` 的快捷方法，用于添加 `CollectionTemplate`。 +It is a shortcut method of `CollectionTemplateManager` used to add `CollectionTemplate`. -- 类型 +- Type ```tsx | pure class DataSourceManager { @@ -70,7 +70,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure import { Plugin, CollectionTemplate } from '@nocobase/client'; @@ -86,13 +86,12 @@ class MyPlugin extends Plugin { } ``` -更多详细请参考：[CollectionTemplateManager](./collection-template-manager) +Please refer to: [CollectionTemplateManager](./collection-template-manager) ### addFieldInterfaces() -是 `CollectionFieldInterfaceManager` 的快捷方法，用于添加 `CollectionFieldInterface`。 - -- 类型 +It is a shortcut method of `CollectionFieldInterfaceManager` used to add `CollectionFieldInterface`. +- Type ```tsx | pure class DataSourceManager { @@ -100,7 +99,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure import { Plugin, CollectionFieldInterface } from '@nocobase/client'; @@ -116,13 +115,13 @@ class MyPlugin extends Plugin { } ``` -更多详细请参考：[CollectionFieldInterfaceManager](./collection-field-interface-manager) +Please refer to: [CollectionFieldInterfaceManager](./collection-field-interface-manager) ### addCollectionMixins() -用于添加 `Collection` 的 Mixins。 +Used to add mixins to `Collection`. -- 类型 +- Type ```tsx | pure class DataSourceManager { @@ -130,7 +129,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure import { Plugin, Collection } from '@nocobase/client'; @@ -153,13 +152,13 @@ const MyComponent = () => { } ``` -更多详细请参考：[CollectionMixins](./collection-mixins) +Please refer to: [CollectionMixins](./collection-mixins) ### addDataSource() -用于添加 `DataSource`。 +Used to add `DataSource`. -- 类型 +- Type ```tsx | pure class DataSourceManager { @@ -167,7 +166,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure import { Plugin, DataSource, DataSourceOptions } from '@nocobase/client'; @@ -191,13 +190,13 @@ class MyPlugin extends Plugin { } ``` -更多详细请参考：[DataSource](./data-source) +Please refer to: [DataSource](./data-source) ### removeDataSources() -移除 `DataSource`。 +Remove `DataSource`。 -- 类型 +- Type ```tsx | pure class DataSourceManager { @@ -205,7 +204,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure @@ -217,9 +216,9 @@ const MyComponent = () => { ### getDataSources() -获取全部 `DataSource` 实例列表。 +Get a list of all `DataSource` instances. -- 类型 +- Type ```tsx | pure class DataSourceManager { @@ -227,7 +226,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { @@ -246,9 +245,9 @@ const MyComponent = () => { ### getDataSource() -获取 `DataSource` 实例。 +Get the `DataSource` instance. -- 类型 +- Type ```tsx | pure class DataSourceManager { @@ -256,7 +255,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { @@ -273,9 +272,9 @@ const MyComponent = () => { ### getAllCollections() -获取所有 DataSource 的所有 Collection 实例。 +Get all Collection instances of all DataSources. -- 类型 +- Type ```tsx | pure @@ -287,7 +286,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { @@ -313,9 +312,9 @@ const MyComponent = () => { ### reload() -重载所有 `DataSource`。 +Reload all `DataSource` instances. -- 类型 +- Type ```tsx | pure class DataSourceManager { @@ -323,7 +322,7 @@ class DataSourceManager { } ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { diff --git a/packages/core/client/docs/en-US/core/data-source/data-source-provider.md b/packages/core/client/docs/en-US/core/data-source/data-source-provider.md index 909a4d8946..3786481911 100644 --- a/packages/core/client/docs/en-US/core/data-source/data-source-provider.md +++ b/packages/core/client/docs/en-US/core/data-source/data-source-provider.md @@ -2,9 +2,9 @@ 用于提供 `DataSource` 的实例。 -## 组件 +## Component -- 类型 +- Type ```tsx | pure interface DataSourceProviderProps { @@ -13,7 +13,7 @@ interface DataSourceProviderProps { } ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { @@ -29,15 +29,15 @@ const MyComponent = () => { ### useDataSource() -获取 `DataSource` 实例。 +Get the `DataSource` instance. -- 类型 +- Type ```tsx | pure function useDataSource(): DataSource; ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { @@ -48,15 +48,15 @@ const MyComponent = () => { ### useDataSourceKey() -获取 `DataSource` 的 key。 +Get the key of the `DataSource`. -- 类型 +- Type ```tsx | pure function useDataSourceKey(): string; ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { diff --git a/packages/core/client/docs/en-US/core/data-source/data-source.md b/packages/core/client/docs/en-US/core/data-source/data-source.md index 558a370899..fffdb64a9f 100644 --- a/packages/core/client/docs/en-US/core/data-source/data-source.md +++ b/packages/core/client/docs/en-US/core/data-source/data-source.md @@ -1,12 +1,12 @@ # DataSource -主要是用于获取数据源和数据源的数据表结构列表，并在获取后交给 [CollectionManager](./collection-manager.md) 进行管理，其被 [DataSourceManager](./data-source-manager.md) 管理。 +It is mainly used to obtain the data source and the list of data table structures, and then hand them over to the [CollectionManager](./collection-manager.md) for management, which is managed by the [DataSourceManager](./data-source-manager.md). -## 数据源定义 +## Data Source Definition -数据源的定义需要继承 `DataSource` 类，并实现 `getDataSource` 方法，当调用 `reload` 方法时，会调用 `getDataSource` 方法获取数据表结构。 +The definition of the data source needs to inherit the `DataSource` class and implement the `getDataSource` method. When the `reload` method is called, the `getDataSource` method will be called to obtain the data table structure. -```tsx | pure +```ts import { DataSource } from '@nocobase/client'; class MyDataSource extends DataSource { @@ -19,11 +19,11 @@ class MyDataSource extends DataSource { } ``` -### 数据源注册 +### Data Source Registration -数据源需要在插件中注册，通过 `DataSourceManager` 的 `addDataSource` 方法进行注册。 +Data sources need to be registered in plugins using the `addDataSource` method of `DataSourceManager`. -初始化添加的时候 `collections` 可以为空，当调用 `reload` 方法时，会调用 `getDataSource` 方法获取数据表结构。 +When initially adding a data source, the `collections` parameter can be empty. When the `reload` method is called, the `getDataSource` method will be invoked to obtain the data table structure. ```tsx | pure import { Plugin, DataSource, DataSourceOptions } from '@nocobase/client'; @@ -50,23 +50,23 @@ class MyPlugin extends Plugin { } ``` -- `key`：数据源的唯一标识 -- `displayName`：数据源的显示名称 -- `status`：数据源的状态，`loaded` 表示已加载，`loading` 表示正在加载，`loading-failed` 表示加载失败 -- `collections`：数据表结构 -- `errorMessage`：错误信息 +- `key`: The unique identifier of the data source +- `displayName`: The display name of the data source +- `status`: The status of the data source, `loaded` indicates loaded, `loading` indicates loading, `loading-failed` indicates loading failed +- `collections`: The table structure of the data source +- `errorMessage`: The error message -## 实例方法 +## Instance Methods ### getDataSource() -用于获取数据源信息，其会被 `reload` 方法内部调用，外部不需要调用。 +Used to retrieve information about the data source, it is called internally by the `reload` method and does not need to be called externally. ### addReloadCallback() -用于添加数据源加载完成后的回调函数。 +Used to add a callback function that is called after the data source is loaded. -- 类型 +- Type ```tsx | pure type LoadCallback = (collections: CollectionOptions[]) => void; @@ -78,9 +78,9 @@ class DataSource { ### removeReloadCallback() -用于移除数据源加载完成后的回调函数。 +Used to remove the callback function after the data source is loaded. -- 类型 +- Type ```tsx | pure type LoadCallback = (collections: CollectionOptions[]) => void; @@ -89,7 +89,7 @@ class DataSource { } ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { @@ -109,9 +109,9 @@ const MyComponent = () => { ### reload() -用于重新加载数据源，会调用 `getDataSource` 方法获取数据表结构，并内部调用 `addReloadCallback` 添加的回调函数。 +Used to reload the data source, it calls the `getDataSource` method to retrieve the table structure and internally calls the callback functions added by `addReloadCallback`. -- 类型 +- Type ```tsx | pure class DataSource { @@ -119,7 +119,7 @@ class DataSource { } ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { @@ -133,9 +133,9 @@ const MyComponent = () => { ### getOptions() -获取数据源的配置信息。 +Get the configuration information of the data source. -- 类型 +- Type ```tsx | pure interface DataSourceOptions { @@ -153,9 +153,9 @@ class DataSource { ### getOption() -获取数据源的配置信息。 +Get the configuration information of the data source. -- 类型 +- Type ```tsx | pure class DataSource { @@ -163,7 +163,7 @@ class DataSource { } ``` -- 示例 +- Example ```tsx | pure const MyComponent = () => { diff --git a/packages/core/client/docs/en-US/core/data-source/extend-collections-provider.md b/packages/core/client/docs/en-US/core/data-source/extend-collections-provider.md index 8b033ff0f7..d804c434cb 100644 --- a/packages/core/client/docs/en-US/core/data-source/extend-collections-provider.md +++ b/packages/core/client/docs/en-US/core/data-source/extend-collections-provider.md @@ -1,10 +1,10 @@ # ExtendCollectionsProvider -用于扩展 [Collection](./collection.md) 。 +Used to extend [Collection](./collection.md). -## 组件 +## Component -- 类型 +- Type ```tsx | pure interface ExtendCollectionsProviderProps { @@ -13,7 +13,7 @@ interface ExtendCollectionsProviderProps { } ``` -- 示例 +- Example ```tsx | pure import { ExtendCollectionsProvider, CollectionOptions } from '@nocobase/client'; @@ -60,7 +60,7 @@ const ChildComponent = () => { ### useExtendCollections() -获取扩展的数据表。 +Get the extended collections. ```tsx | pure import { useExtendCollections } from '@nocobase/client'; diff --git a/packages/core/client/docs/en-US/core/request/index.md b/packages/core/client/docs/en-US/core/request/index.md index d442a20194..2eb4409b46 100644 --- a/packages/core/client/docs/en-US/core/request/index.md +++ b/packages/core/client/docs/en-US/core/request/index.md @@ -4,65 +4,55 @@ ```ts class APIClient { - // axios 实例 + // Axios instance axios: AxiosInstance; - // 缓存带 uid 的 useRequest({}, {uid}) 的结果，可供其他组件调用 + // Cache the results of useRequest({}, {uid}) with uid, which can be accessed by other components services: Record>; - // 构造器 + // Constructor constructor(instance?: AxiosInstance | AxiosRequestConfig); - // 客户端请求，支持 AxiosRequestConfig 和 ResourceActionOptions + // Client request, supports AxiosRequestConfig and ResourceActionOptions request, D = any>(config: AxiosRequestConfig | ResourceActionOptions): Promise; - // 获取资源 + // Get resource resource(name: string, of?: any): R; } ``` -示例 +Example: ```ts import axios from 'axios'; -// 不传参时，内部直接创建 axios 实例 +// When no parameters are passed, it creates an axios instance internally const apiClient = new APIClient(); -// 提供 AxiosRequestConfig 配置参数 +// Provide AxiosRequestConfig configuration parameters const apiClient = new APIClient({ baseURL: '', }); -// 提供 AxiosInstance +// Provide AxiosInstance const instance = axios.create({ baseURL: '', }); const apiClient = new APIClient(instance); -// 常规请求 +// Regular request const response = await apiClient.request({ url }); -// NocoBase 特有的资源操作 +// NocoBase-specific resource operations const response = await apiClient.resource('posts').list(); -// 请求共享 +// Request sharing const { data, loading, run } = apiClient.service('uid'); ``` -`api.service(uid)` 的例子，ComponentB 里刷新 ComponentA 的请求数据 +Example of `api.service(uid)`, refreshing the request data in ComponentA from ComponentB ## APIClientProvider -提供 APIClient 实例的上下文。 - -```tsx | pure -const apiClient = new APIClient(); - - -``` - -## useAPIClient - -获取当前上下文的 APIClient 实例。 +Provides the context for the APIClient instance. ```ts const apiClient = useAPIClient(); @@ -77,12 +67,12 @@ function useRequest

( ); ``` -支持 `axios.request(config)`，config 详情查看 [axios](https://github.com/axios/axios#request-config) +Supports `axios.request(config)`, for more details on the config, please refer to the [axios documentation](https://github.com/axios/axios#request-config). ```ts const { data, loading, refresh, run, params } = useRequest({ url: '/users' }); -// useRequest 里传的是 AxiosRequestConfig，所以 run 里传的也是 AxiosRequestConfig +// Since AxiosRequestConfig is passed in useRequest, AxiosRequestConfig should also be passed in run run({ params: { pageSize: 20, @@ -90,11 +80,11 @@ run({ }); ``` -例子如下： +例子如下: -或者是 NocoBase 的 resource & action 请求： +Or it can be a NocoBase resource & action request: ```ts const { data, run } = useRequest({ @@ -105,17 +95,17 @@ const { data, run } = useRequest({ }, }); -// useRequest 传的是 ResourceActionOptions，所以 run 直接传 action params 就可以了。 +// Since useRequest is passed ResourceActionOptions, you can directly pass action params to run. run({ pageSize: 50, }); ``` -例子如下： +Example as follows: -也可以是自定义的异步函数： +It can also be a custom asynchronous function: ```ts const { data, loading, run, refresh, params } = useRequest((...params) => Promise.resolve({})); @@ -123,7 +113,7 @@ const { data, loading, run, refresh, params } = useRequest((...params) => Promis run(...params); ``` -更多用法查看 ahooks 的 [useRequest()](https://ahooks.js.org/hooks/use-request/index) +For more usage, please refer to [useRequest()](https://ahooks.js.org/hooks/use-request/index) in ahooks. ## useResource @@ -131,21 +121,19 @@ run(...params); function useResource(name: string, of?: string | number): IResource; ``` -资源是 NocoBase 的核心概念，包括： +Resources are the core concept of NocoBase, including: -- 独立资源，如 `posts` -- 关系资源，如 `posts.tags` `posts.user` `posts.comments` +- Independent resources, such as `posts` +- Related resources, such as `posts.tags`, `posts.user`, `posts.comments` -资源 URI +Resource URI ```bash -# 独立资源，文章 /api/posts -# 关系资源，文章 ID=1 的评论 /api/posts/1/comments ``` -通过 APIClient 获取资源 +Retrieve resources via `APIClient`. ```ts const api = new APIClient(); @@ -154,14 +142,14 @@ api.resource('posts'); api.resource('posts.comments', 1); ``` -useResource 用法： +`useResource` Usage: ```ts const resource = useResource('posts'); const resource = useResource('posts.comments', 1); ``` -resource 的实际场景用例参见： +For actual use cases of `resource`, please refer to: - [useCollection()](collection-manager#usecollection) - [useCollectionField()](collection-manager#usecollectionfield) diff --git a/packages/core/client/docs/en-US/core/ui-schema/designable.md b/packages/core/client/docs/en-US/core/ui-schema/designable.md index 75b151b260..fd018035b8 100644 --- a/packages/core/client/docs/en-US/core/ui-schema/designable.md +++ b/packages/core/client/docs/en-US/core/ui-schema/designable.md @@ -2,7 +2,7 @@ ## Designable -对 Schema 节点进行增、删、改操作，并且提供了事件触发机制，用于将数据同步到服务端。 +Perform add, delete, and update operations on Schema nodes, and provide an event triggering mechanism to synchronize data to the server. ```tsx | pure interface Options { @@ -38,16 +38,16 @@ class Designable { } ``` -### 构造函数 +### Constructor -- 参数讲解 +- Params + - `current`: The Schema node to operate on + - `api`: An instance of [APIClient](https://docs.nocobase.com/api/sdk) used to make backend requests + - `onSuccess`: Callback function to be executed after a successful backend API request + - `refresh`: Function to refresh the page after updating the node + - `t`: The return value of `useTranslation()` - - `current`：需要操作的 Schema 节点 - - `api`：用于发起后端请求的 [APIClient](https://docs.nocobase.com/api/sdk) 实例 - - `onSuccess`：后端接口请求成功后的回调 - - `refresh`：用于更新节点后，刷新页面 - - `t`：`useTranslation()` 的返回值 -- 示例 +- Example ```tsx | pure const schema = new Schema({ @@ -59,7 +59,7 @@ const schema = new Schema({ const dn = new Designable({ current: schema }); ``` -### Schema 操作方法 +### Schema Operation Methods ```tsx | pure const schema = new Schema({ @@ -117,7 +117,7 @@ export default () => 

{JSON.stringify(schema.toJSON(), null, 2)}
; #### remove -移除当前节点 +Remove the current node. ```tsx | pure dn.remove(); @@ -174,7 +174,7 @@ export default () => 
{JSON.stringify(schema.toJSON(), null, 2)}
; #### insertBeforeBegin -在当前节点的前面插入，并会触发 `insertAdjacent` 事件。 +Insert before the current node and trigger the `insertAdjacent` event. ```tsx | pure dn.insertBeforeBegin({ @@ -240,7 +240,7 @@ export default () => 
{JSON.stringify(schema.toJSON(), null, 2)}
; #### insertAfterBegin -在当前节点的前面插入，并会触发 `insertAdjacent` 事件。 +Insert after the current node and trigger the `insertAdjacent` event. ```tsx | pure dn.insertAfterBegin({ @@ -307,7 +307,7 @@ export default () => 
{JSON.stringify(schema.toJSON(), null, 2)}
; #### insertBeforeEnd -在当前节点的前面插入，并会触发 `insertAdjacent` 事件。 +Insert after the current node and trigger the `insertAdjacent` event. ```tsx | pure dn.insertBeforeEnd({ @@ -374,7 +374,7 @@ export default () => 
{JSON.stringify(schema.toJSON(), null, 2)}
; #### insertAfterEnd -在当前节点的前面插入，并会触发 `insertAdjacent` 事件。 +Insert after the current node and trigger the `insertAdjacent` event. ```tsx | pure dn.insertAfterEnd({ @@ -441,7 +441,7 @@ export default () => 
{JSON.stringify(schema.toJSON(), null, 2)}
; #### insertAdjacent -根据第一个参数决定插入的位置，是前面四个方法的封装。 +Determines the insertion position based on the first parameter, which is a wrapper for the previous four methods. ```tsx | pure class Designable { @@ -449,19 +449,19 @@ class Designable { } ``` -### 事件监听和 API 请求 +### Event Listeners and API Requests -- `on` ：添加事件监听的基础方法 -- `loadAPIClientEvents`：调用 `on` 方法添加对 `insertAdjacent`、`patch`、`batchPatch`、`remove` 的事件的监听，主要功能是将变更的 Schema 更新到服务端 -- `emit`：是根据事件名称，调用之前注册过的方法，具体是由前面讲过的 *插入操作和删除操作* 触发 +- `on`: The basic method for adding event listeners. +- `loadAPIClientEvents`: Calls the `on` method to add event listeners for `insertAdjacent`, `patch`, `batchPatch`, and `remove` events. Its main function is to update the changed schema on the server. +- `emit`: Calls the previously registered methods based on the event name, triggered by *insertion and deletion operations*. -而 `loadAPIClientEvents()` 并非在初始化时调用，需要手动调用，换而言之，如果不调用 `dn.loadAPIClientEvents()`，则不会将更新发送到服务端，主要是简化在单测或者 DEMO 环境对服务端的 Mock。 +`loadAPIClientEvents()` is not called during initialization and needs to be manually called. In other words, if `dn.loadAPIClientEvents()` is not called, the updates will not be sent to the server. This is mainly used to simplify mocking the server in unit tests or demo environments. -## 工具函数 +## Utility Functions ### createDesignable() -对 `new Designable()` 的简单封装。 +A simple wrapper for `new Designable()`. ```tsx | pure function createDesignable(options: CreateDesignableProps) { @@ -477,16 +477,16 @@ const dn = createDesignable({ current: schema }); ### useFieldSchema() -用户获取当前节点 Schema JSON 对象，更多信息请参考 [formily useFieldSchema()](https://react.formilyjs.org/api/hooks/use-field-schema)。 +Used to get the current node's Schema JSON object. For more information, please refer to [formily useFieldSchema()](https://react.formilyjs.org/api/hooks/use-field-schema). -- 类型 +- Type ```tsx | pure import { Schema } from '@formily/json-schema'; const useFieldSchema: () => Schema; ``` -- 示例 +- Example ```tsx /** @@ -505,11 +505,11 @@ const Demo = ({ children }) => { const schema = { type: 'void', name: 'hello', - 'x-component': 'Demo', // 这里是 Demo 组件 + 'x-component': 'Demo', 'properties': { 'world': { 'type': 'void', - 'x-component': 'Demo', // 这里也是 Demo 组件 + 'x-component': 'Demo', }, } } @@ -527,16 +527,16 @@ export default app.getRootComponent(); ### useField() -获取当前节点 Schema 实例，更多信息请参考 [formily useField()](https://react.formilyjs.org/api/hooks/use-field) +Get the current node's Schema instance. For more information, please refer to [formily useField()](https://react.formilyjs.org/api/hooks/use-field). -- 类型 +- Type ```tsx | pure import { GeneralField } from '@formily/core'; const useField: () => T; ``` -- 示例 +- Example ```tsx | pure const Demo = () => { @@ -564,9 +564,9 @@ const Root = () => { ### useDesignable() -对当前 Schema 节点的修改操作。 +Modify the current Schema node. -- 类型 +- Type ```tsx | pure interface InsertAdjacentOptions { @@ -596,26 +596,26 @@ function useDesignable(): { } ``` -- 详细解释 +- Details + - designable, reset, refresh, setDesignable: These values are inherited from [SchemaComponentContext](https://www.baidu.com). + - dn: An instance of `Designable`. + - findComponent: Used to find the actual component corresponding to a string in the Schema. Returns `null` if the component is not registered. + - remove: Internally calls the `dn.remove` method. + - on: Internally calls the `dn.on` method. + - insertAdjacent: Inserts a new Schema node. Internally calls the `dn.insertAdjacent` method. + - position: The position to insert. + - schema: The new Schema node. + - Options: + - wrap: A callback function for secondary processing of the Schema. + - removeParentsIfNoChildren: Removes the parent element when there are no child elements. + - breakRemoveOn: A callback for determining when to stop removing. + - onSuccess: A callback for successful insertion. + - insertBeforeBegin: Internally calls the `dn.insertBeforeBegin` method. + - insertAfterBegin: Internally calls the `dn.insertAfterBegin` method. + - insertBeforeEnd: Internally calls the `dn.insertBeforeEnd` method. + - insertAfterEnd: Internally calls the `dn.insertAfterEnd` method. - - designable、reset、refresh、setDesignable：这些值继承自 [SchemaComponentContext](https://www.baidu.com) - - dn：是 `Designable` 的实例 - - findComponent：用于查找 Schema 中字符串对应真正的组件，如果组件未注册则返回 `null` - - remove：内部调用的是 `dn.remove` 方法 - - on：内部调用的是 `dn.on` 方法 - - insertAdjacent：插入新的 Schema 节点，内部调用的是 `dn.insertAdjacent` 方法 - - position：插入位置 - - schema：新的 Schema 节点 - - Options - - wrap：对 Schema 的二次处理的回调函数 - - removeParentsIfNoChildren：当没有子元素时，删除父元素 - - breakRemoveOn：停止删除的判断回调 - - onSuccess：插入成功的回调 - - insertBeforeBegin：内部调用的是 `dn.insertBeforeBegin` 方法 - - insertAfterBegin：内部调用的是 `dn.insertAfterBegin` 方法 - - insertBeforeEnd：内部调用的是 `dn.insertBeforeEnd` 方法 - - insertAfterEnd：内部调用的是 `dn.insertAfterEnd` 方法 -- 示例 +- Example 插入节点。 @@ -710,7 +710,7 @@ export default () => { }; ``` -部分更新。 +Partial update. ```tsx import React from 'react'; @@ -788,4 +788,4 @@ export default () => { ); }; -``` \ No newline at end of file +``` diff --git a/packages/core/client/docs/en-US/core/ui-schema/schema-component.md b/packages/core/client/docs/en-US/core/ui-schema/schema-component.md index 9a6aa8310c..562f235a32 100644 --- a/packages/core/client/docs/en-US/core/ui-schema/schema-component.md +++ b/packages/core/client/docs/en-US/core/ui-schema/schema-component.md @@ -15,31 +15,20 @@ interface SchemaComponentContext { } ``` -Schema 渲染的上下文。 +Context for rendering Schema. -- `scope`：Schema 中变量的映射 -- `components`: Schema 中组件的映射 -- `refresh`：触发 React 重新渲染的工具函数 -- `reset`：重置整个 Schema 节点 -- `designable`：是否显示设计器，默认 `false` -- `setDesignable`：用于切换 `designable` 的值 +- `scope`: Mapping of variables in the Schema +- `components`: Mapping of components in the Schema +- `refresh`: Utility function to trigger React re-rendering +- `reset`: Reset the entire Schema node +- `designable`: Whether to display the designer, default is `false` +- `setDesignable`: Used to toggle the value of `designable` ## Hooks ### useSchemaOptionsContext() -用于获取注册的 `scope` 和 `components`。 - -```tsx | pure -const { scope, components } = useSchemaOptionsContext(); -``` - -## 组件 - -### SchemaComponentProvider - -其是对 `SchemaComponentContext.Provider` 和 [FormProvider ](https://react.formilyjs.org/api/components/form-provider)的封装，并内置在 `Application` 中，并且会将 `app.components` 和 `app.scopes` 传递过去，所以一般情况下 *不需要关注* 此组件。 - +Used to get registered `scope` and `components`. - props ```tsx | pure @@ -51,36 +40,18 @@ interface SchemaComponentProviderProps { } ``` -- 详细解释 - - `designable`：`SchemaComponentContext` 中 `designable` 的默认值 - - `form`：NocoBase 的 Schema 能力是基于 formily 的 `FormProvider` 提供的，form 是其参数，默认为 `createForm()` - - `scope`：Schema 中所用到的变量，会通过 `SchemaComponentContext` 进行传递 - - `components`：Schema 中所用到的组件，会通过 `SchemaComponentContext` 进行传递 +- Details + - `designable`: The default value of `designable` in `SchemaComponentContext` + - `form`: NocoBase's Schema capability is based on the `FormProvider` provided by formily, and `form` is its parameter, defaulting to `createForm()` + - `scope`: Variables used in the Schema, passed through `SchemaComponentContext` + - `components`: Components used in the Schema, passed through `SchemaComponentContext` ### SchemaComponent -用于渲染 Schema，此组件必须和 `SchemaComponentProvider` 一起使用，因为 `SchemaComponentProvider` 提供了 [FormProvider](https://react.formilyjs.org/api/components/form-provider) 作为渲染 Schema 的根节点。 +Used to render the Schema. This component must be used together with `SchemaComponentProvider`, as `SchemaComponentProvider` provides [FormProvider](https://react.formilyjs.org/api/components/form-provider) as the root node for rendering the Schema. - Props -```tsx | pure -type SchemaComponentProps = (ISchemaFieldProps | IRecursionFieldProps) & { - memoized?: boolean; - components?: SchemaReactComponents; - scope?: any; -} -``` - -- 详细解释 - - - `memoized`：当为 `true` 时，会对每层的 Schema 使用 `useMemo()` 进行处理 - - `components`：同 `SchemaComponentProvider` 的 `components` - - `scope`: 同 `SchemaComponentProvider` 的 `components` - -## 综合示例 - -结合 `SchemaComponentProvider`、 `useSchemaComponentContext()` 和 `SchemaComponent`。 - ```tsx /** * defaultShowCode: true @@ -113,7 +84,7 @@ const Root = () => { export default Root; ``` -使用 `new Application()` 的方式，其内置了 `SchemaComponentProvider` ，我们可以如下操作： +By using the `new Application()` method, which includes the `SchemaComponentProvider` internally, we can perform the following operations: ```tsx /** @@ -161,8 +132,7 @@ export default app.getRootComponent(); ### SchemaComponentOptions -在应用中，会有很多层级的嵌套，每一层都可能提供自己的组件和 scope，此组件就是为了层层传递 Schema 所需的 `components` 和 `scope` 的。 - +In the application, there may be multiple levels of nesting, and each level may provide its own components and scope. This component is used to pass the `components` and `scope` required for each level of the Schema. - props ```tsx | pure @@ -172,7 +142,7 @@ interface SchemaComponentOptionsProps { } ``` -- 示例 +- Example ```tsx /** diff --git a/packages/core/client/docs/en-US/core/ui-schema/schema-initializer-manager.md b/packages/core/client/docs/en-US/core/ui-schema/schema-initializer-manager.md index 483f9d2b6c..24a1494c7c 100644 --- a/packages/core/client/docs/en-US/core/ui-schema/schema-initializer-manager.md +++ b/packages/core/client/docs/en-US/core/ui-schema/schema-initializer-manager.md @@ -1,12 +1,12 @@ # SchemaInitializerManager -## 实例方法 +## Methods ### schemaInitializerManager.add() -添加 SchemaInitializer 实例。 +Add SchemaInitializer instance. -- 类型 +- Type ```tsx | pure class SchemaInitializerManager { @@ -14,7 +14,7 @@ class SchemaInitializerManager { } ``` -- 示例 +- Example ```tsx | pure const myInitializer = new SchemaInitializer({ @@ -38,9 +38,9 @@ class MyPlugin extends Plugin { ### schemaInitializerManager.get() -获取一个 SchemaInitializer 实例。 +Get SchemaInitializer instance. -- 类型 +- Type ```tsx | pure class SchemaInitializerManager { @@ -48,7 +48,7 @@ class SchemaInitializerManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -60,9 +60,9 @@ class MyPlugin extends Plugin { ### schemaInitializerManager.getAll() -获取所有的 SchemaInitializer 实例。 +Get all SchemaInitializer instances. -- 类型 +- Type ```tsx | pure class SchemaInitializerManager { @@ -70,7 +70,7 @@ class SchemaInitializerManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -82,9 +82,9 @@ class MyPlugin extends Plugin { ### app.schemaInitializerManager.has() -判断是否有存在某个 SchemaInitializer 实例。 +Check if a specific SchemaInitializer instance exists. -- 类型 +- Type ```tsx | pure class SchemaInitializerManager { @@ -92,7 +92,7 @@ class SchemaInitializerManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -104,9 +104,9 @@ class MyPlugin extends Plugin { ### schemaInitializerManager.remove() -移除 SchemaInitializer 实例。 +Remove SchemaInitializer instance. -- 类型 +- Type ```tsx | pure class SchemaInitializerManager { @@ -114,7 +114,7 @@ class SchemaInitializerManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -126,9 +126,9 @@ class MyPlugin extends Plugin { ### schemaInitializerManager.addItem() -添加 SchemaInitializer 实例的 Item 项，其和直接 schemaInitializer.add() 方法的区别是，可以确保在实例存在时才会添加。 +Add an Item to the SchemaInitializer instance, the difference between this method and directly calling schemaInitializer.add() is that it can ensure that the item is added only when the instance exists. -- 类型 +- Type ```tsx | pure class SchemaInitializerManager { @@ -136,18 +136,18 @@ class SchemaInitializerManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { async load() { - // 方式1：先获取，再添加子项，需要确保已注册 + // Method 1: Get first, then add sub-items, make sure it is registered const myInitializer = this.app.schemaInitializerManager.get('MyInitializer'); if (myInitializer) { myInitializer.add('b', { type: 'item', title: 'B' }) } - // 方式2：通过 addItem，内部确保在 MyInitializer 注册时才会添加 + // Method 2: Use addItem, ensure that it is added only when MyInitializer is registered this.app.schemaInitializerManager.addItem('MyInitializer', 'b', { type: 'item', title: 'B' @@ -158,9 +158,9 @@ class MyPlugin extends Plugin { ### schemaInitializerManager.removeItem() -移除 实例的 Item 项，其和直接 schemaInitializer.remove() 方法的区别是，可以确保在实例存在时才会移除。 +Remove an Item from the SchemaInitializer instance, the difference between this method and directly calling schemaInitializer.remove() is that it can ensure that the item is removed only when the instance exists. -- 类型 +- Type ```tsx | pure class SchemaInitializerManager { @@ -168,18 +168,18 @@ class SchemaInitializerManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { async load() { - // 方式1：先获取，再删除子项，需要确保已注册 + // Method 1: Get first, then remove sub-items, make sure it is registered const myInitializer = this.app.schemaInitializerManager.get('MyInitializer'); if (myInitializer) { myInitializer.remove('a') } - // 方式2：通过 addItem，内部确保在 MyInitializer 注册时才会移除 + // Method 2: Use removeItem, ensure that it is removed only when MyInitializer is registered this.app.schemaInitializerManager.remove('MyInitializer', 'a') } } diff --git a/packages/core/client/docs/en-US/core/ui-schema/schema-initializer.md b/packages/core/client/docs/en-US/core/ui-schema/schema-initializer.md index bebd3cbcef..235eebf8e1 100644 --- a/packages/core/client/docs/en-US/core/ui-schema/schema-initializer.md +++ b/packages/core/client/docs/en-US/core/ui-schema/schema-initializer.md @@ -34,38 +34,38 @@ class SchemaInitializer { } ``` -### 详细解释 +### Details ![](../static/KTUWb69kioUg8bxYTAMc2ReDnRg.png) -- name：唯一标识，必填 -- Component 相关 +- name: Unique identifier, required +- Component related - - Component：触发组件，默认是 `Button` 组件 - - componentProps: 组件属性，默认是 `ButtonProps` - - title： 按钮的文本 - - icon：按钮的 icon 属性 - - style：组件的样式 -- Items 相关 + - Component: Trigger component, default is `Button` component + - componentProps: Component properties, default is `ButtonProps` + - title: Button text + - icon: Button icon property + - style: Component style +- Items related - - items：列表项配置 - - ItemsComponent：默认是渲染成一个列表的形式，可通过此参数自定义 items - - itemsComponentProps：`ItemsComponent` 的属性 - - itemsComponentStyle：`ItemsComponent` 的样式 -- popover 组件相关 + - items: List item configuration + - ItemsComponent: By default, it is rendered as a list. Customize items with this parameter + - itemsComponentProps: Properties of `ItemsComponent` + - itemsComponentStyle: Style of `ItemsComponent` +- Popover component related - - popover：是否使用 popover，默认为 `true` - - popoverProps：popover 的属性 -- Schema 操作相关 + - popover: Whether to use popover, default is `true` + - popoverProps: Properties of popover +- Schema operation related - - insertPosition：插入位置，参考：[useDesignable()](/core/ui-schema/designable#usedesignable) - - designable：是否显示设计模式，参考：[useDesignable()](/core/ui-schema/designable#usedesignable) - - wrap：对 Schema 的二次处理，参考：[useDesignable()](/core/ui-schema/designable#usedesignable) - - onSuccess：Schema 更新到服务端后的回调，参考：[useDesignable()](/core/ui-schema/designable#usedesignable) - - insert：自定义 Schema 插入逻辑，默认为 [useDesignable()](/core/ui-schema/designable#usedesignable) 的 `insertAdjacent` - - useInsert：当自定义插入 Schema 的逻辑需要用到 Hooks 时，可以使用此参数 + - insertPosition: Insertion position, refer to: [useDesignable()](/core/ui-schema/designable#usedesignable) + - designable: Whether to display design mode, refer to: [useDesignable()](/core/ui-schema/designable#usedesignable) + - wrap: Secondary processing of Schema, refer to: [useDesignable()](/core/ui-schema/designable#usedesignable) + - onSuccess: Callback after Schema is updated to the server, refer to: [useDesignable()](/core/ui-schema/designable#usedesignable) + - insert: Custom Schema insertion logic, default is [useDesignable()](/core/ui-schema/designable#usedesignable)'s `insertAdjacent` + - useInsert: When customizing the logic for inserting Schema requires the use of Hooks, this parameter can be used -### 示例 +### Example #### 基础用法 @@ -73,7 +73,6 @@ class SchemaInitializer { const myInitializer = new SchemaInitializer({ name: 'MyInitializer', title: 'Add Block', - // 插入位置 insertPosition: 'beforeEnd', items: [ { @@ -84,11 +83,9 @@ const myInitializer = new SchemaInitializer({ ], }); ``` - - -#### 定制化 `Component` +#### Custom `Component` ```tsx | pure const myInitializer = new SchemaInitializer({ @@ -113,9 +110,9 @@ const myInitializer = new SchemaInitializer({ -#### 不使用 Popover +#### Not Using Popover -关于 `useDesignable()` 的说明请参考 [useDesignable](/core/ui-schema/designable#usedesignable)。 +Please refer to [useDesignable](/core/ui-schema/designable#usedesignable) for more information about `useDesignable()`. ```tsx | pure const schema = { @@ -139,7 +136,7 @@ const myInitializer = new SchemaInitializer({ -#### 定制化 Items +#### Custom Items ```tsx | pure const CustomListGridMenu: FC>> = (props) => { @@ -175,9 +172,9 @@ const myInitializer = new SchemaInitializer({ -## options.items 配置详解 +## options.items -### 类型 +### Types ```tsx | pure interface SchemaInitializerComponentCommonProps { @@ -201,15 +198,13 @@ interface SchemaInitializerItemBaseType extends SchemaInitializerCompone } ``` -### 两种定义方式：`Component` 和 `type` +### Two ways to define: `Component` and `type` - -- 通过 `Component` 定义 +- `Component` param ```tsx | pure const Demo = () => { - // 最终渲染 `SchemaInitializerItem` return } @@ -218,17 +213,17 @@ const myInitializer = new SchemaInitializer({ items: [ { name: 'a', - Component: Demo, // 通过 Component 定义 + Component: Demo, } ], }); ``` -- 通过 `type` 定义 +- `type` param -NocoBase 内置了一些常用的 `type`，例如 `type: 'item'`，相当于 `Component: SchemaInitializerItem`。 +NocoBase has built-in some common `type`s. For example, `type: 'item'` is equivalent to `Component: SchemaInitializerItem`. -更多内置类型，请参考：[内置组件和类型](/core/ui-schema/schema-initializer#%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6%E5%92%8C%E7%B1%BB%E5%9E%8B) +For more built-in types, please refer to: [Built-in Components and Types](/core/ui-schema/schema-initializer#%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6%E5%92%8C%E7%B1%BB%E5%9E%8B) ```tsx | pure const myInitializer = new SchemaInitializer({ @@ -245,25 +240,25 @@ const myInitializer = new SchemaInitializer({ -### `children` 和动态方式 `useChildren` +### `children` and dynamic `useChildren` -对于某些组件而言是有子列表项的，例如 `type: 'itemGroup'`，那么我们使用 children 属性，同时考虑到某些场景下 children 是动态的，需要从 Hooks 里面获取，那么就可以通过 `useChildren` 来定义。 +For some components that have child items, such as `type: 'itemGroup'`, we use the `children` property. However, in certain scenarios where the children are dynamic and need to be obtained from hooks, we can define them using `useChildren`. -### 动态显示隐藏 `useVisible` +### Dynamic visibility with `useVisible` -### 组件属性 `componentProps` 和动态属性 `useComponentProps` +### Component properties `componentProps` and dynamic properties `useComponentProps` -对于一些通用组件，我们可以通过 `componentProps` 来定义组件属性，同时考虑到某些场景下组件属性是动态的，需要从 Hooks 里面获取，那么就可以通过 `useComponentProps` 来定义。 +For some common components, we can define component properties using `componentProps`. In certain scenarios where the component properties are dynamic and need to be obtained from hooks, we can define them using `useComponentProps`. -当然也可以不使用这两个属性，直接封装成一个组件，然后通过 `Component` 来定义。 +Of course, you can also encapsulate them into a component and define them using the `Component` property. -### 公共属性和组件属性 +### Common properties and component properties ```tsx | pure { @@ -277,15 +272,15 @@ const myInitializer = new SchemaInitializer({ } ``` -从上面的示例中我么看到，从配置项中获取组件组件所需的数据有两个方式： +From the above example, we can see that there are two ways to obtain the data required by the component from the configuration: -- 组件属性：通过 `componentProps` 来定义，例如 `zzz: 'xxx'` -- 公共属性：将属性直接定义在配置项上，例如 `foo: 'bar'`、`name`、`title` +- Component properties: defined through `componentProps`, for example `zzz: 'xxx'` +- Common properties: directly defined on the configuration item, for example `foo: 'bar'`, `name`, `title` -在获取上 +In terms of retrieval: -- `componentProps` 定义的数据会被传递给组件的 `props` -- 直接定义在配置项上的数据会则需要通过 [useSchemaInitializerItem()](/core/ui-schema/schema-initializer#useschemainitializeritem) 获取 +- Data defined in `componentProps` will be passed to the component's `props` +- Data directly defined on the configuration item needs to be obtained through [useSchemaInitializerItem()](/core/ui-schema/schema-initializer#useschemainitializeritem) ```tsx | pure const Demo = (props) => { @@ -294,7 +289,7 @@ const Demo = (props) => { } ``` -## 实例方法 +## Methods ```tsx | pure const myInitializer = new SchemaInitializer({ @@ -352,9 +347,9 @@ export default app.getRootComponent(); ### schemaInitializer.add() -用于新增 Item，另一种添加方式参考 [schemaInitializerManager.addItem()](/core/ui-schema/schema-initializer-manager#schemainitializermanageradditem); +Used to add a new item. Another way to add items is through [schemaInitializerManager.addItem()](/core/ui-schema/schema-initializer-manager#schemainitializermanageradditem); -- 类型 +- Type ```tsx | pure class SchemaInitializer { @@ -362,11 +357,11 @@ class SchemaInitializer { } ``` -- 参数说明 +- params -第一个参数是 name，作为唯一标识，用于增删改查，并且 `name` 支持 `.` 用于分割层级。 +The first parameter is `name`, which serves as a unique identifier for adding, deleting, modifying, and querying. The `name` also supports `.` as a delimiter for hierarchical separation. -- 示例 +- Example ```tsx | pure myInitializer.add('b', { @@ -428,7 +423,7 @@ export default app.getRootComponent(); ### schemaInitializer.get() -- 类型 +- Type ```tsx | pure class SchemaInitializer { @@ -436,7 +431,7 @@ class SchemaInitializer { } ``` -- 示例 +- Example ```tsx | pure const itemA = myInitializer.get('a') @@ -446,9 +441,9 @@ const itemA1 = myInitializer.add('a.a1') ### schemaInitializer.remove() -另一种移除方式参考 [schemaInitializerManager.addItem()](/core/ui-schema/schema-initializer-manager#schemainitializermanagerremoveitem); +Another way to remove items can be found in [schemaInitializerManager.addItem()](/core/ui-schema/schema-initializer-manager#schemainitializermanagerremoveitem); -- 类型 +- Type ```tsx | pure class SchemaInitializer { @@ -456,7 +451,7 @@ class SchemaInitializer { } ``` -- 示例 +- Example ```tsx | pure myInitializer.remove('a.a1') @@ -468,9 +463,9 @@ myInitializer.remove('a') ### useSchemaInitializer() -用于获取 `SchemaInitializer` 上下文内容。 +Used to retrieve the context content of `SchemaInitializer`. -- 类型 +- Type ```tsx | pure export type InsertType = (s: ISchema) => void; @@ -483,13 +478,13 @@ const useSchemaInitializer: () => { } ``` -- 参数详解 - - `insert`：参数是 Schema 对象，用于插入 Schema - - `options`：获取 `new SchemaInitializer(options)` 时 options 配置 - - `visible`：popover 是否显示 - - `setVisible`：设置 popover 显示状态 +- Parameter Details + - `insert`: The parameter is a Schema object used to insert the Schema. + - `options`: The options configuration when obtaining `new SchemaInitializer(options)`. + - `visible`: Whether the popover is displayed. + - `setVisible`: Sets the visibility status of the popover. -- 示例 +- Example ```tsx | pure const schema = { @@ -507,9 +502,9 @@ const Demo = () => { ### useSchemaInitializerRender() -用于渲染 `SchemaInitializer`。 +Used to render `SchemaInitializer`. -- 类型 +- Type ```tsx | pure function useSchemaInitializerRender(name: string, options?: SchemaInitializerOptions): { @@ -518,11 +513,11 @@ function useSchemaInitializerRender(name: string, options?: SchemaInitializerOpt } ``` -- 参数详解 +- Details -返回的 `render` 方法可以接收一个参数，用于覆盖 `new SchemaInitializer(options)` 的 `options` 配置。 +The returned `render` method can accept a parameter to override the `options` configuration of `new SchemaInitializer(options)`. -- 示例 +- Example ```tsx | pure const Demo = () => { @@ -539,15 +534,15 @@ const Demo = () => { ### useSchemaInitializerItem() -用于获取配置项内容的，配置项是指的 `SchemaInitializer` 中的 `items` 中的一项。 +Used to retrieve the content of a configuration item, where the configuration item refers to one item in the `items` property of `SchemaInitializer`. -- 类型 +- Type ```tsx | pure const useSchemaInitializerItem: () => T ``` -- 示例 +- Example ```tsx | pure const myInitializer = new SchemaInitializer({ @@ -564,7 +559,7 @@ const myInitializer = new SchemaInitializer({ }); /** - * 通过 useSchemaInitializerItem() 获取到的是 + * The result obtained through useSchemaInitializerItem() is * { * name: 'a', * title: 'Item A', @@ -580,22 +575,22 @@ const Demo = () => { -## 内置组件和类型 +## Built-in Components and Types -| type | Component | 效果 | +| type | Component | | | ----------- | ------------------------------ | ----------------------------------------- | -| item | SchemaInitializerItem | 文本| -| itemGroup | SchemaInitializerItemGroup | 分组，同 antd `Menu` 组件的 `type: 'group'` | -| subMenu | SchemaInitializerSubMenu | 子菜单，同 antd `Menu` 组件的子菜单 | -| divider | SchemaInitializerDivider | 分割线，同 antd `Menu` 组件的 `type: 'divider'` | -| switch | SchemaInitializerSwitch | 开关 | -| actionModal | SchemaInitializerActionModal | 弹窗| +| item | SchemaInitializerItem | Text | +| itemGroup | SchemaInitializerItemGroup | Group, similar to antd `Menu` component with `type: 'group'` | +| subMenu | SchemaInitializerSubMenu | Submenu, similar to antd `Menu` component's submenu | +| divider | SchemaInitializerDivider | Divider, similar to antd `Menu` component with `type: 'divider'` | +| switch | SchemaInitializerSwitch | Switch | +| actionModal | SchemaInitializerActionModal | Modal| -以下每个示例都提供了 2 种[定义方式](/core/ui-schema/schema-initializer#两种定义方式component-和-type)，一种是通过 `Component` 定义，另一种是通过 `type` 定义。 +The following examples provide two [definition methods](/core/ui-schema/schema-initializer#two-ways-to-define-component-and-type), one is defined through `Component`, and the other is defined through `type`. ### `type: 'item'` & `SchemaInitializerItem` -文本项。 +Text。 ```tsx | pure interface SchemaInitializerItemProps { @@ -609,7 +604,7 @@ interface SchemaInitializerItemProps { } ``` -核心参数是 `title`、`icon`、`onClick`、`items`，其中 `onClick` 用于插入 Schema，`items` 用于渲染子列表项。 +The core parameters are `title`, `icon`, `onClick`, and `items`. Among them, `onClick` is used to insert Schema, and `items` is used to render child list items. @@ -626,13 +621,13 @@ interface SchemaInitializerItemGroupProps { } ``` -核心参数是 `title`、`children`，其中 `children` 用于渲染子列表项，`divider` 用于渲染分割线。 +The core parameters are `title`, `children`, and `divider`. Among them, `children` is used to render child list items, and `divider` is used to render a divider. ### `type: 'switch'` & SchemaInitializerSwitch -Switch 切换按钮。 +Switch Button. ```tsx | pure interface SchemaInitializerSwitchItemProps extends SchemaInitializerItemProps { @@ -641,20 +636,18 @@ interface SchemaInitializerSwitchItemProps extends SchemaInitializerItemProps { } ``` -核心参数是 `checked`、`onClick`，其中 `onClick` 用于插入或者移除 Schema。 +The core parameters are `checked` and `onClick`, where `onClick` is used to insert or remove Schema. ### `type: 'subMenu'` & SchemaInitializerSubMenu -子菜单。 +Sub menu. ### `type: 'divider'` & SchemaInitializerDivider -分割线。 - ### `type: 'actionModal'` & SchemaInitializerActionModal @@ -665,15 +658,15 @@ interface SchemaInitializerSwitchItemProps extends SchemaInitializerItemProps { #### Item Mode -`SchemaInitializerActionModal` 需要加上 `isItem` 属性 +`SchemaInitializerActionModal` needs to add the `isItem` property. -## 渲染组件 +## Render Components ### SchemaInitializerChildren -用于自定义渲染多个列表项。 +Used to customize the rendering of multiple list items. ```tsx | pure @@ -707,7 +700,7 @@ const myInitializer = new SchemaInitializer({ ### SchemaInitializerChild -用于自定义渲染单个列表项。 +Used to customize the rendering of individual list items. ```tsx | pure const Demo = (props) => { diff --git a/packages/core/client/docs/en-US/core/ui-schema/schema-settings-manager.md b/packages/core/client/docs/en-US/core/ui-schema/schema-settings-manager.md index e4f43a33d9..f7d6179777 100644 --- a/packages/core/client/docs/en-US/core/ui-schema/schema-settings-manager.md +++ b/packages/core/client/docs/en-US/core/ui-schema/schema-settings-manager.md @@ -1,12 +1,12 @@ # SchemaSettingsManager -## 实例方法 +## Methods ### schemaSettingsManager.add() -添加 SchemaSettings 实例。 +Used to add a SchemaSettings instance. -- 类型 +- Type ```tsx | pure class SchemaSettingsManager { @@ -14,7 +14,7 @@ class SchemaSettingsManager { } ``` -- 示例 +- Example ```tsx | pure const mySchemaSettings = new SchemaSetting({ @@ -40,9 +40,9 @@ class MyPlugin extends Plugin { ### schemaSettingsManager.get() -获取一个 SchemaSettings 实例。 +Get a SchemaSettings instance. -- 类型 +- Type ```tsx | pure class SchemaSettingsManager { @@ -50,7 +50,7 @@ class SchemaSettingsManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -62,9 +62,9 @@ class MyPlugin extends Plugin { ### schemaSettingsManager.getAll() -获取所有的 SchemaSettings 实例。 +Get all SchemaSettings instances. -- 类型 +- Type ```tsx | pure class SchemaSettingsManager { @@ -72,7 +72,7 @@ class SchemaSettingsManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -84,9 +84,9 @@ class MyPlugin extends Plugin { ### app.schemaSettingsManager.has() -判断是否有存在某个 SchemaSettings 实例。 +Check if a specific SchemaSettings instance exists. -- 类型 +- Type ```tsx | pure class SchemaSettingsManager { @@ -94,7 +94,7 @@ class SchemaSettingsManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -106,9 +106,9 @@ class MyPlugin extends Plugin { ### schemaSettingsManager.remove() -移除 SchemaSettings 实例。 +Remove SchemaSettings instance. -- 类型 +- Type ```tsx | pure class SchemaSettingsManager { @@ -116,7 +116,7 @@ class SchemaSettingsManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { @@ -128,9 +128,9 @@ class MyPlugin extends Plugin { ### schemaSettingsManager.addItem() -添加 SchemaSettings 实例的 Item 项，其和直接 schemaInitializer.add() 方法的区别是，可以确保在实例存在时才会添加。 +Add an Item to the SchemaSettings instance, the difference between this method and directly calling schemaInitializer.add() is that it can ensure that the item is added only when the instance exists. -- 类型 +- Type ```tsx | pure class SchemaSettingsManager { @@ -138,18 +138,18 @@ class SchemaSettingsManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { async load() { - // 方式1：先获取，再添加子项，需要确保已注册 + // Method 1: Get first, then add sub-items, make sure it is registered const mySchemaSettings = this.app.schemaSettingsManager.get('MySchemaSettings'); if (mySchemaSettings) { mySchemaSettings.add('b', { type: 'item', componentProps:{ title: 'B' } }) } - // 方式2：通过 addItem，内部确保在 mySchemaSettings 注册时才会添加 + // Method 2: Use addItem, ensure that it is added only when MySchemaSettings is registered this.app.schemaSettingsManager.addItem('MySchemaSettings', 'b', { type: 'item', componentProps:{ title: 'B' } @@ -160,9 +160,9 @@ class MyPlugin extends Plugin { ### schemaSettingsManager.removeItem() -移除 实例的 Item 项，其和直接 schemaInitializer.remove() 方法的区别是，可以确保在实例存在时才会移除。 +Remove an Item from the SchemaSettings instance, the difference between this method and directly calling schemaInitializer.remove() is that it can ensure that the item is removed only when the instance exists. -- 类型 +- Type ```tsx | pure class SchemaSettingsManager { @@ -170,18 +170,18 @@ class SchemaSettingsManager { } ``` -- 示例 +- Example ```tsx | pure class MyPlugin extends Plugin { async load() { - // 方式1：先获取，再删除子项，需要确保已注册 + // Method 1: Get first, then remove sub-items, make sure it is registered const mySchemaSettings = this.app.schemaSettingsManager.get('MySchemaSettings'); if (mySchemaSettings) { mySchemaSettings.remove('a') } - // 方式2：通过 addItem，内部确保在 mySchemaSettings 注册时才会移除 + // Method 2: Use addItem, ensure that it is removed only when MySchemaSettings is registered this.app.schemaSettingsManager.remove('MySchemaSettings', 'a') } } diff --git a/packages/core/client/docs/en-US/core/ui-schema/schema-settings.md b/packages/core/client/docs/en-US/core/ui-schema/schema-settings.md index b374cbdfa2..3a06c6dd4f 100644 --- a/packages/core/client/docs/en-US/core/ui-schema/schema-settings.md +++ b/packages/core/client/docs/en-US/core/ui-schema/schema-settings.md @@ -2,7 +2,7 @@ ## new SchemaSettings(options) -创建一个 SchemaSettings 实例。 +Create a SchemaSettings instance. ```tsx | pure interface SchemaSettingsOptions { @@ -22,19 +22,18 @@ class SchemaSettings{ } ``` -### 详细解释 +### Details ![](../static/VfPGbhWo9os0qTxcITkcHNfin4g.png) -- name：唯一标识，必填 -- Component 相关 +- name: Unique identifier, required +- Component related + - Component: Trigger component, default is `` component + - componentProps: Component properties + - style: Component style +- items: List item configuration - - Component：触发组件，默认是 `` 组件 - - componentProps: 组件属性 - - style：组件的样式 -- items：列表项配置 - -### 示例 +### Example #### 基础用法 @@ -43,8 +42,8 @@ const mySchemaSettings = new SchemaSettings({ name: 'MySchemaSettings', items: [ { - name: 'demo1', // 唯一标识 - type: 'item', // 内置类型 + name: 'demo1', + type: 'item', componentProps: { title: 'DEMO1', onClick() { @@ -54,23 +53,23 @@ const mySchemaSettings = new SchemaSettings({ }, { name: 'demo2', - Component: () => alert('DEMO2')} />, // 直接使用 Component 组件 + Component: () => alert('DEMO2')} />, }, ], }); ``` -#### 定制化 `Component` +#### Custom `Component` ```tsx | pure const mySchemaSettings = new SchemaSettings({ name: 'MySchemaSettings', - Component: Button, // 自定义组件 + Component: Button, componentProps: { type: 'primary', children: '自定义按钮', }, - // Component: (props) => , // 等同于上面效果 + // Component: (props) => , items: [ { name: 'demo1', @@ -83,7 +82,7 @@ const mySchemaSettings = new SchemaSettings({ }); ``` -## options.items 配置详解 +## options.items ```tsx | pure interface SchemaSettingsItemCommon { @@ -100,15 +99,14 @@ interface SchemaSettingsItemCommon { } ``` -### 两种定义方式：`Component` 和 `type` +### `Component` 和 `type` -- 通过 `Component` 定义 +- `Component` ```tsx | pure const Demo = () => { - // 最终渲染 `SchemaSettingsItem` return } @@ -117,17 +115,17 @@ const mySettings = new SchemaSettings({ items: [ { name: 'a', - Component: Demo, // 通过 Component 定义 + Component: Demo, } ], }); ``` -- 通过 `type` 定义 +- `type` -NocoBase 内置了一些常用的 `type`，例如 `type: 'item'`，相当于 `Component: SchemaSettingsItem`。 +NocoBase has built-in some common `type`, such as `type: 'item'`, which is equivalent to `Component: SchemaSettingsItem`. -更多内置类型，请参考：[内置组件和类型](/core/ui-schema/schema-settings#%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6%E5%92%8C%E7%B1%BB%E5%9E%8B) +For more built-in types, please refer to: [Built-in Components and Types](/core/ui-schema/schema-settings#built-in-components-and-types) ```tsx | pure const mySettings = new SchemaSettings({ @@ -146,25 +144,25 @@ const mySettings = new SchemaSettings({ -### `children` 和动态方式 `useChildren` +### `children` and dynamic `useChildren` -对于某些组件而言是有子列表项的，例如 `type: 'itemGroup'`，那么我们使用 children 属性，同时考虑到某些场景下 children 是动态的，需要从 Hooks 里面获取，那么就可以通过 `useChildren` 来定义。 +For some components that have child items, such as `type: 'itemGroup'`, we use the `children` property. In certain scenarios where the children are dynamic and need to be obtained from hooks, we can define them using `useChildren`. -### 动态显示隐藏 `useVisible` +### Dynamic visibility with `useVisible` -### 组件属性 `componentProps` 和动态属性 `useComponentProps` +### Component properties `componentProps` and dynamic properties `useComponentProps` -对于一些通用组件，我们可以通过 `componentProps` 来定义组件属性，同时考虑到某些场景下组件属性是动态的，需要从 Hooks 里面获取，那么就可以通过 `useComponentProps` 来定义。 +For some common components, we can define component properties using `componentProps`. In certain scenarios where the component properties are dynamic and need to be obtained from hooks, we can define them using `useComponentProps`. -当然也可以不使用这两个属性，直接封装成一个组件，然后通过 `Component` 来定义。 +Alternatively, we can encapsulate the properties into a component and define them using `Component`. -## 实例方法 +## Methods ```tsx | pure const mySchemaSettings = new SchemaSettings({ @@ -189,9 +187,9 @@ const mySchemaSettings = new SchemaSettings({ ### schemaSettings.add() -用于新增 Item。 +Use for adding an item. -- 类型 +- Type ```tsx | pure class SchemaSettings { @@ -199,11 +197,11 @@ class SchemaSettings { } ``` -- 参数说明 +- params -第一个参数是 name，作为唯一标识，用于增删改查，并且 `name` 支持 `.` 用于分割层级。 +The first parameter is `name`, which is used as a unique identifier for adding, deleting, modifying, and querying, and `name` supports `.` to separate levels. -- 示例 +- Example ```tsx | pure mySchemaSetting.add('b', { @@ -219,7 +217,7 @@ mySchemaSetting.add('a.a2', { ### schemaSettings.get() -- 类型 +- Type ```tsx | pure class SchemaSettings { @@ -227,7 +225,7 @@ class SchemaSettings { } ``` -- 示例 +- Example ```tsx | pure const itemA = mySchemaSetting.get('a') @@ -237,7 +235,7 @@ const itemA1 = mySchemaSetting.add('a.a1') ### schemaSettings.remove() -- 类型 +- Type ```tsx | pure class SchemaSettings { @@ -245,7 +243,7 @@ class SchemaSettings { } ``` -- 示例 +- Example ```tsx | pure mySchemaSetting.remove('a.a1') @@ -257,9 +255,9 @@ mySchemaSetting.remove('a') ### useSchemaSettingsRender() -用于渲染 SchemaSettings。 +Use to render SchemaSettings. -- 类型 +- Type ```tsx | pure function useSchemaSettingsRender(name: string, options?: SchemaSettingsOptions): { @@ -268,7 +266,7 @@ function useSchemaSettingsRender(name: string, options?: SchemaSettingsOptions): } ``` -- 示例 +- Example ```tsx | pure const Demo = () => { @@ -285,11 +283,11 @@ const Demo = () => { ### useSchemaSettings() -获取 schemaSetting 上下文数据。 +Get the schemaSetting context data. -上下文数据包含了 `schemaSetting` 实例化时的 `options` 以及调用 `useSchemaSettingsRender()` 时传入的 `options`。 +The context data includes the `options` passed when instantiating the `schemaSetting` and the `options` passed when calling `useSchemaSettingsRender()`. -- 类型 +- Type ```tsx | pure interface UseSchemaSettingsResult extends SchemaSettingsOptions { @@ -301,7 +299,7 @@ interface UseSchemaSettingsResult extends SchemaSettingsOptions { function useSchemaSettings(): UseSchemaSettingsResult; ``` -- 示例 +- Example ```tsx | pure const { dn } = useSchemaSettings(); @@ -309,9 +307,9 @@ const { dn } = useSchemaSettings(); ### useSchemaSettingsItem() -用于获取一个 item 的数据。 +Used to retrieve data for an item. -- 类型 +- Type ```tsx | pure export type SchemaSettingsItemType = { @@ -329,68 +327,58 @@ export type SchemaSettingsItemType = { function useSchemaSettingsItem(): SchemaSettingsItemType; ``` -- 示例 +- Example ```tsx | pure const { name } = useSchemaSettingsItem(); ``` -## 内置组件和类型 +## Built-in Components and Types -| type | Component | 效果 | +| type | Component | | | ----------- | ------------------------------ | ----------------------------------------- | -| item | SchemaSettingsItem | 文本 | -| itemGroup | SchemaSettingsItemGroup | 分组，同 Menu 组件的 `type: 'itemGroup'` | -| subMenu | SchemaSettingsSubMenu | 子菜单，同 Menu 组件的子菜单 | -| divider | SchemaSettingsDivider | 分割线，同 Menu 组件的 `type: 'divider'` | -| remove | SchemaSettingsRemove | 删除，用于删除一个区块 | -| select | SchemaSettingsSelectItem | 下拉选择 | -| cascader | SchemaSettingsCascaderItem | 级联选择 | -| switch | SchemaSettingsSwitchItem | 开关 | -| popup | SchemaSettingsPopupItem | 弹出层 | -| actionModal | SchemaSettingsActionModalItem | 操作弹窗 | -| modal | SchemaSettingsModalItem | 弹窗 | +| item | SchemaSettingsItem | Text | +| itemGroup | SchemaSettingsItemGroup | Group, same as `type: 'itemGroup'` in Menu | +| subMenu | SchemaSettingsSubMenu | Submenu, same as submenu in Menu | +| divider | SchemaSettingsDivider | Divider, same as `type: 'divider'` in Menu | +| remove | SchemaSettingsRemove | Remove, used to delete a block | +| select | SchemaSettingsSelectItem | Dropdown select | +| cascader | SchemaSettingsCascaderItem | Cascading select | +| switch | SchemaSettingsSwitchItem | Switch | +| popup | SchemaSettingsPopupItem | Popup | +| actionModal | SchemaSettingsActionModalItem | Action modal | +| modal | SchemaSettingsModalItem | Modal | ### SchemaSettingsItem -文本，对应的 `type` 为 `item`。 - ```tsx | pure interface SchemaSettingsItemProps extends Omit { title: string; } ``` -核心参数为 `title` 和 `onClick`，可以在 `onClick` 中修改 schema。 +The core parameters are `title` and `onClick`, and you can modify the schema in `onClick`. ### SchemaSettingsItemGroup -分组，对应的 `type` 为 `itemGroup`。 - -核心参数是 `title`。 +The core parameter is `title`. ### SchemaSettingsSubMenu -子菜单，对应的 `type` 为 `subMenu`。 - -核心参数是 `title`。 +The core parameter is `title`. ### SchemaSettingsDivider -分割线，对应的 `type` 为 `divider`。 - ### SchemaSettingsRemove -删除，对应的 `type` 为 `remove`。 - ```tsx | pure interface SchemaSettingsRemoveProps { confirm?: ModalFuncProps; @@ -399,32 +387,24 @@ interface SchemaSettingsRemoveProps { } ``` -- `confirm`：删除前的确认弹窗 -- `removeParentsIfNoChildren`：如果删除后没有子节点了，是否删除父节点 -- `breakRemoveOn`：如果删除的节点满足条件，是否中断删除 +- `confirm`: Confirmation modal before deletion +- `removeParentsIfNoChildren`: Whether to delete the parent node if there are no children after deletion +- `breakRemoveOn`: Whether to interrupt deletion if the deleted node meets certain conditions ### SchemaSettingsSelectItem -选择器，对应的 `type` 为 `select`。 - ### SchemaSettingsCascaderItem -级联选择，对应的 `type` 为 `cascader`。 - ### SchemaSettingsSwitchItem -开关，对应的 `type` 为 `switch`。 - ### SchemaSettingsModalItem -弹窗，对应的 `type` 为 `modal`。 - ```tsx | pure export interface SchemaSettingsModalItemProps { title: string; @@ -444,15 +424,13 @@ export interface SchemaSettingsModalItemProps { } ``` -我们可以通过 `schema` 参数来定义弹窗的表单，然后在 `onSubmit` 中获取表单的值，然后修改当前 schema 节点。 +We can define the form of the modal using the `schema` parameter, and then retrieve the form values in the `onSubmit` function to modify the current schema node. ### SchemaSettingsActionModalItem -操作弹窗，对应的 `type` 为 `actionModal`。 - -其和 `modal` 的区别是，`SchemaSettingsModalItem` 弹窗会丢失上下文，而 `SchemaSettingsActionModalItem` 会保留上下文，简单场景下可以使用 `SchemaSettingsModalItem`，复杂场景下可以使用 `SchemaSettingsActionModalItem`。 +The difference between `SchemaSettingsActionModalItem` and `SchemaSettingsModalItem` is that the `SchemaSettingsModalItem` modal will lose context, while the `SchemaSettingsActionModalItem` will retain context. In simple scenarios, you can use `SchemaSettingsModalItem`, and in complex scenarios, you can use `SchemaSettingsActionModalItem`. ```tsx | pure export interface SchemaSettingsActionModalItemProps extends SchemaSettingsModalItemProps, Omit { diff --git a/packages/core/client/docs/en-US/core/ui-schema/schema-toolbar.md b/packages/core/client/docs/en-US/core/ui-schema/schema-toolbar.md index dfd809bba0..7b8acc39d0 100644 --- a/packages/core/client/docs/en-US/core/ui-schema/schema-toolbar.md +++ b/packages/core/client/docs/en-US/core/ui-schema/schema-toolbar.md @@ -2,15 +2,15 @@ ![SchemaToolbar](../static/designer.png) -## 组件 +## Component -### SchemaToolbar 组件 +### SchemaToolbar Component -此为默认的 Toolbar 组件，其内部会自动根据 Schema 的 `x-settings`、`x-initializer` 渲染 `SchemaSettings`、`SchemaInitializer` 和 `Drag` 组件。 +This is the default Toolbar component, which automatically renders the `SchemaSettings`, `SchemaInitializer`, and `Drag` components based on the Schema's `x-settings` and `x-initializer`. -Toolbar 具体的渲染规则为：当有 `x-toolbar` 会渲染对应的组件；当无 `x-toolbar` 但是有 `x-settings`、`x-initializer` 会渲染默认的 `SchemaToolbar` 组件。 +The specific rendering rules for the Toolbar are as follows: when `x-toolbar` is present, it renders the corresponding component; when there is no `x-toolbar` but `x-settings` and `x-initializer` are present, it renders the default `SchemaToolbar` component. -- 类型 +- Type ```tsx | pure interface SchemaToolbarProps { @@ -26,17 +26,17 @@ interface SchemaToolbarProps { } ``` -- 详细解释 - - `title`：左上角的标题 - - `draggable`：是否可以拖拽，默认为 `true` - - `initializer`：`SchemaInitializer` 的默认值，当 schema 里没有 `x-initializer` 时，会使用此值；当为 `false` 时，不会渲染 `SchemaInitializer` - - `settings`：`SchemaSettings` 的默认值，当 schema 里没有 `x-settings` 时，会使用此值；当为 `false` 时，不会渲染 `SchemaSettings` - - `showBorder`：边框是否变为橘色 - - `showBackground`：背景是否变为橘色 +- Details + - `title`: The title in the top left corner. + - `draggable`: Whether it can be dragged, default is `true`. + - `initializer`: The default value of `SchemaInitializer`. When there is no `x-initializer` in the schema, this value will be used. When set to `false`, `SchemaInitializer` will not be rendered. + - `settings`: The default value of `SchemaSettings`. When there is no `x-settings` in the schema, this value will be used. When set to `false`, `SchemaSettings` will not be rendered. + - `showBorder`: Whether the border becomes orange. + - `showBackground`: Whether the background becomes orange. -- 示例 +- Example -未指定 `x-toolbar` 时会渲染默认的 `SchemaToolbar` 这个组件。 +When `x-toolbar` is not specified, the default `SchemaToolbar` component will be rendered. ```tsx import { useFieldSchema } from '@formily/react'; @@ -99,7 +99,7 @@ const Hello = () => { const hello1 = Grid.wrap({ type: 'void', - // 仅指定了 `x-settings` 但是没有 `x-toolbar`，会使用默认的 `SchemaToolbar` 组件 + // Only `x-settings` is specified but `x-toolbar` is not, the default `SchemaToolbar` component will be used. 'x-settings': 'mySettings', 'x-decorator': 'CardItem', 'x-component': 'Hello', @@ -146,8 +146,7 @@ const app = new Application({ export default app.getRootComponent(); ``` -自定义 Toolbar 组件。 - +Custom Toolbar component. ```tsx import { useFieldSchema } from '@formily/react'; @@ -193,12 +192,10 @@ const myInitializer = new SchemaInitializer({ title: 'Demo1', Component: () => { const itemConfig = useSchemaInitializerItem(); - // 调用插入功能 const { insert } = useSchemaInitializer(); const handleClick = () => { insert({ type: 'void', - // 使用自定义的 Toolbar 组件 'x-toolbar': 'MyToolbar', 'x-settings': 'mySettings', 'x-decorator': 'CardItem', @@ -218,7 +215,6 @@ const Hello = () => { const hello1 = Grid.wrap({ type: 'void', - // 使用自定义的 Toolbar 组件 'x-toolbar': 'MyToolbar', 'x-settings': 'mySettings', 'x-decorator': 'CardItem', @@ -270,9 +266,9 @@ export default app.getRootComponent(); ### useSchemaToolbarRender() -用于渲染 `SchemaToolbar`。 +Used to render the `SchemaToolbar`. -- 类型 +- Type ```tsx | pure const useSchemaToolbarRender: (fieldSchema: ISchema) => { @@ -281,18 +277,18 @@ const useSchemaToolbarRender: (fieldSchema: ISchema) => { } ``` -- 详细解释 +- Details -前面示例中 `'x-decorator': 'CardItem'` 中组件 `CardItem` 里面就调用了 `useSchemaToolbarRender()` 进行渲染。内置的组件还有：`BlockItem`、`CardItem`、`Action`、`FormItem`。 +In the previous example, the component `CardItem` is used in the `'x-decorator': 'CardItem'` property, which calls `useSchemaToolbarRender()` for rendering. Other built-in components include: `BlockItem`, `CardItem`, `Action`, `FormItem`. -`render()` 支持二次覆盖组件属性。 +The `render()` function supports overriding component properties. -- 示例 +- Example ```tsx | pure const MyDecorator = () => { const filedSchema = useFieldSchema(); - const { render } = useSchemaToolbarRender(filedSchema); // 从 Schema 中读取 Toolbar 组件 + const { render } = useSchemaToolbarRender(filedSchema); return { render() } } @@ -335,10 +331,8 @@ const MyToolbar = (props) => { return } -// 自定义包装器 const MyDecorator = ({children}) => { const filedSchema = useFieldSchema(); - // 使用 `useSchemaToolbarRender()` 获取并渲染内容 const { render } = useSchemaToolbarRender(filedSchema); return { render({ draggable: false }) }{children} } @@ -353,12 +347,10 @@ const myInitializer = new SchemaInitializer({ title: 'Demo1', Component: () => { const itemConfig = useSchemaInitializerItem(); - // 调用插入功能 const { insert } = useSchemaInitializer(); const handleClick = () => { insert({ type: 'void', - // 使用自定义的 Toolbar 组件 'x-toolbar': 'MyToolbar', 'x-settings': 'mySettings', 'x-decorator': 'MyDecorator', @@ -378,7 +370,6 @@ const Hello = () => { const hello1 = Grid.wrap({ type: 'void', - // 使用自定义的 Toolbar 组件 'x-toolbar': 'MyToolbar', 'x-settings': 'mySettings', 'x-decorator': 'MyDecorator', diff --git a/packages/core/client/docs/en-US/core/utils.md b/packages/core/client/docs/en-US/core/utils.md index 9fb88088e8..e46762c21d 100644 --- a/packages/core/client/docs/en-US/core/utils.md +++ b/packages/core/client/docs/en-US/core/utils.md @@ -4,10 +4,10 @@ ### tval -用于输出多语言的字符串。 +Used to output multilingual strings. -- 类型 +- Type -- 示例 +- Example diff --git a/packages/core/client/docs/zh-CN/core/data-source/collection-template.md b/packages/core/client/docs/zh-CN/core/data-source/collection-template.md index eb248e519e..44e65edebf 100644 --- a/packages/core/client/docs/zh-CN/core/data-source/collection-template.md +++ b/packages/core/client/docs/zh-CN/core/data-source/collection-template.md @@ -15,56 +15,58 @@ interface AvailableFieldInterfacesExclude { interface CollectionTemplateDefaultOptions { /** - * 自动生成 id + * Auto-generate id * @default true * */ autoGenId?: boolean; - /** 创建人 */ + /** Created by */ createdBy?: boolean; - /** 最后更新人 */ + /** Updated by */ updatedBy?: boolean; - /** 创建日期 */ + /** Created at */ createdAt?: boolean; - /** 更新日期 */ + /** Updated at */ updatedAt?: boolean; - /** 可排序 */ + /** Sortable */ sortable?: boolean; - /* 树结构 */ + /* Tree structure */ tree?: string; - /* 日志 */ + /* Logging */ logging?: boolean; - /** 继承 */ + /** Inherits */ inherits?: string | string[]; - /* 字段列表 */ + /* Field list */ fields?: CollectionOptions['fields']; } class CollectionTemplate { - app: Application; - collectionManager: CollectionManager; - + constructor(public collectionTemplateManager: CollectionTemplateManager) {} name: string; Collection?: typeof Collection; - transform?: (collection: CollectionOptions, app: Application) => CollectionOptions; title?: string; color?: string; - /** 排序 */ + /** Sorting */ order?: number; - /** 默认配置 */ + /** Default configuration */ default?: CollectionTemplateDefaultOptions; events?: any; - /** UI 可配置的 CollectionOptions 参数（添加或编辑的 Collection 表单的字段） */ + /** UI configurable CollectionOptions parameters (fields for adding or editing Collection forms) */ configurableProperties?: Record; - /** 当前模板可用的字段类型 */ + /** Available field types for the current template */ availableFieldInterfaces?: AvailableFieldInterfacesInclude | AvailableFieldInterfacesExclude; - /** 是否分割线 */ + /** Whether it is a divider */ divider?: boolean; - /** 模板描述 */ + /** Template description */ description?: string; - /**配置字段中的操作按钮 */ + /** Configure buttons in the configuration fields */ configureActions?: Record; - //是否禁止删除字段 + // Whether to prohibit deleting fields forbidDeletion?: boolean; + + supportDataSourceType?: string[]; + notSupportDataSourceType?: string[]; + + transform?(collection: CollectionOptions, app: Application): CollectionOptions; } ``` diff --git a/packages/core/client/docs/zh-CN/core/data-source/data-source-manager.md b/packages/core/client/docs/zh-CN/core/data-source/data-source-manager.md index 7ef124b943..198021e296 100644 --- a/packages/core/client/docs/zh-CN/core/data-source/data-source-manager.md +++ b/packages/core/client/docs/zh-CN/core/data-source/data-source-manager.md @@ -280,7 +280,7 @@ const MyComponent = () => { ```tsx | pure class DataSourceManager { - getAllCollections(options: { + getAllCollections(options?: { filterCollection?: (collection: Collection) => boolean; filterDataSource?: (dataSource: DataSource) => boolean; }): (DataSourceOptions & { collections: Collection[] })[]; diff --git a/packages/core/client/src/api-client/demos/demo1.tsx b/packages/core/client/src/api-client/demos/demo1.tsx index 45531bf26e..d5dc687418 100644 --- a/packages/core/client/src/api-client/demos/demo1.tsx +++ b/packages/core/client/src/api-client/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { APIClient, APIClientProvider, compose, useRequest } from '@nocobase/client'; import MockAdapter from 'axios-mock-adapter'; diff --git a/packages/core/client/src/api-client/demos/demo2.tsx b/packages/core/client/src/api-client/demos/demo2.tsx index 322cde01c1..bba1c78096 100644 --- a/packages/core/client/src/api-client/demos/demo2.tsx +++ b/packages/core/client/src/api-client/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { APIClient, APIClientProvider, compose, useRequest } from '@nocobase/client'; import MockAdapter from 'axios-mock-adapter'; diff --git a/packages/core/client/src/api-client/demos/demo3.tsx b/packages/core/client/src/api-client/demos/demo3.tsx index 44d96dcb48..d60368a99f 100644 --- a/packages/core/client/src/api-client/demos/demo3.tsx +++ b/packages/core/client/src/api-client/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { uid } from '@formily/shared'; import { APIClient, APIClientProvider, useAPIClient, useRequest } from '@nocobase/client'; diff --git a/packages/core/client/src/application/demos/demo1.tsx b/packages/core/client/src/application/demos/demo1.tsx index 5081d116e9..983c12fbdd 100644 --- a/packages/core/client/src/application/demos/demo1.tsx +++ b/packages/core/client/src/application/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Application, Plugin } from '@nocobase/client'; import React, { FC } from 'react'; diff --git a/packages/core/client/src/application/demos/demo2.tsx b/packages/core/client/src/application/demos/demo2.tsx index 3d7a8734ee..0b3089a339 100644 --- a/packages/core/client/src/application/demos/demo2.tsx +++ b/packages/core/client/src/application/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Application, Plugin, RouterManager, useApp } from '@nocobase/client'; import React, { useMemo } from 'react'; diff --git a/packages/core/client/src/application/demos/demo3.tsx b/packages/core/client/src/application/demos/demo3.tsx index 7b37ec34eb..15ecc7859c 100644 --- a/packages/core/client/src/application/demos/demo3.tsx +++ b/packages/core/client/src/application/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Application, NocoBaseBuildInPlugin } from '@nocobase/client'; diff --git a/packages/core/client/src/application/globalType.ts b/packages/core/client/src/application/globalType.ts new file mode 100644 index 0000000000..20613426b3 --- /dev/null +++ b/packages/core/client/src/application/globalType.ts @@ -0,0 +1,15 @@ +/** + * This file is part of the NocoBase (R) project. + * Copyright (c) 2020-2024 NocoBase Co., Ltd. + * Authors: NocoBase Team. + * + * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. + * For more information, please refer to: https://www.nocobase.com/agreement. + */ + +import { ISchema as FormilySchema } from '@formily/json-schema'; + +export interface ISchema extends FormilySchema { + 'x-use-component-props'?: string | Function; + 'x-use-decorator-props'?: string; +} diff --git a/packages/core/client/src/application/index.ts b/packages/core/client/src/application/index.ts index 6b8e923137..cac885b888 100644 --- a/packages/core/client/src/application/index.ts +++ b/packages/core/client/src/application/index.ts @@ -19,3 +19,4 @@ export * from './schema-toolbar'; export * from './PluginSettingsManager'; export * from './hoc'; export { ApplicationContext } from './context'; +export * from './globalType'; diff --git a/packages/core/client/src/collection-manager/demos/demo2.tsx b/packages/core/client/src/collection-manager/demos/demo2.tsx index 8479b361df..5606968226 100644 --- a/packages/core/client/src/collection-manager/demos/demo2.tsx +++ b/packages/core/client/src/collection-manager/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem, Input } from '@formily/antd-v5'; import { ISchema, observer, useForm } from '@formily/react'; diff --git a/packages/core/client/src/collection-manager/demos/demo3.tsx b/packages/core/client/src/collection-manager/demos/demo3.tsx index 2132d20b60..0a21c25d78 100644 --- a/packages/core/client/src/collection-manager/demos/demo3.tsx +++ b/packages/core/client/src/collection-manager/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React, { useEffect, useState } from 'react'; import { diff --git a/packages/core/client/src/collection-manager/demos/demo4.tsx b/packages/core/client/src/collection-manager/demos/demo4.tsx index b794b2132d..d84b948d59 100644 --- a/packages/core/client/src/collection-manager/demos/demo4.tsx +++ b/packages/core/client/src/collection-manager/demos/demo4.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { diff --git a/packages/core/client/src/collection-manager/demos/demo5.tsx b/packages/core/client/src/collection-manager/demos/demo5.tsx index bf8a60c678..2d810af531 100644 --- a/packages/core/client/src/collection-manager/demos/demo5.tsx +++ b/packages/core/client/src/collection-manager/demos/demo5.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormDrawer, FormLayout } from '@formily/antd-v5'; import { createForm } from '@formily/core'; diff --git a/packages/core/client/src/data-source/collection-template/CollectionTemplate.ts b/packages/core/client/src/data-source/collection-template/CollectionTemplate.ts index f3ad383871..a25e386271 100644 --- a/packages/core/client/src/data-source/collection-template/CollectionTemplate.ts +++ b/packages/core/client/src/data-source/collection-template/CollectionTemplate.ts @@ -22,29 +22,28 @@ interface AvailableFieldInterfacesExclude { interface CollectionTemplateDefaultOptions { /** - * 自动生成 id + * Auto-generate id * @default true * */ autoGenId?: boolean; - /** 创建人 */ + /** Created by */ createdBy?: boolean; - /** 最后更新人 */ + /** Updated by */ updatedBy?: boolean; - /** 创建日期 */ + /** Created at */ createdAt?: boolean; - /** 更新日期 */ + /** Updated at */ updatedAt?: boolean; - /** 可排序 */ + /** Sortable */ sortable?: boolean; - /* 树结构 */ + /* Tree structure */ tree?: string; - /* 日志 */ + /* Logging */ logging?: boolean; - /** 继承 */ + /** Inherits */ inherits?: string | string[]; - /* 字段列表 */ + /* Field list */ fields?: CollectionOptions['fields']; - [key: string]: any; } export type CollectionTemplateFactory = new ( @@ -56,22 +55,22 @@ export abstract class CollectionTemplate { Collection?: typeof Collection; title?: string; color?: string; - /** 排序 */ + /** Sorting */ order?: number; - /** 默认配置 */ + /** Default configuration */ default?: CollectionTemplateDefaultOptions; events?: any; - /** UI 可配置的 CollectionOptions 参数（添加或编辑的 Collection 表单的字段） */ + /** UI configurable CollectionOptions parameters (fields for adding or editing Collection forms) */ configurableProperties?: Record; - /** 当前模板可用的字段类型 */ + /** Available field types for the current template */ availableFieldInterfaces?: AvailableFieldInterfacesInclude | AvailableFieldInterfacesExclude; - /** 是否分割线 */ + /** Whether it is a divider */ divider?: boolean; - /** 模板描述 */ + /** Template description */ description?: string; - /**配置字段中的操作按钮 */ + /** Configure buttons in the configuration fields */ configureActions?: Record; - //是否禁止删除字段 + // Whether to prohibit deleting fields forbidDeletion?: boolean; supportDataSourceType?: string[]; diff --git a/packages/core/client/src/demo-utils/dataSource2.json b/packages/core/client/src/demo-utils/dataSource2.json new file mode 100644 index 0000000000..fc70600ed6 --- /dev/null +++ b/packages/core/client/src/demo-utils/dataSource2.json @@ -0,0 +1,139 @@ +{ + "key": "data-source2", + "displayName": "Data Source 2", + "status": "loaded", + "type": "postgres", + "isDBInstance": true, + "collections": [ + { + "name": "test", + "title": "test", + "tableName": "test", + "timestamps": false, + "autoGenId": false, + "filterTargetKey": "id", + "fields": [ + { + "name": "id", + "type": "integer", + "allowNull": false, + "primaryKey": false, + "unique": false, + "autoIncrement": true, + "possibleTypes": ["integer", "sort"], + "rawType": "INTEGER", + "interface": "integer", + "uiSchema": { + "type": "number", + "x-component": "InputNumber", + "x-component-props": { + "stringMode": true, + "step": "1" + }, + "x-validator": "integer", + "title": "id" + } + }, + { + "name": "title", + "type": "string", + "allowNull": false, + "primaryKey": false, + "unique": false, + "possibleTypes": ["string", "uuid", "nanoid"], + "rawType": "CHARACTER VARYING(255)", + "interface": "input", + "uiSchema": { + "x-component": "Input", + "x-component-props": { + "style": { + "width": "100%" + } + }, + "title": "title" + } + }, + { + "name": "content", + "type": "text", + "allowNull": true, + "primaryKey": false, + "unique": false, + "rawType": "TEXT", + "interface": "textarea", + "uiSchema": { + "type": "string", + "x-component": "Input.TextArea", + "title": "content" + } + } + ], + "introspected": true + }, + { + "name": "test2", + "title": "test2", + "tableName": "test2", + "timestamps": false, + "autoGenId": false, + "filterTargetKey": "id", + "fields": [ + { + "name": "id", + "type": "integer", + "allowNull": false, + "primaryKey": true, + "unique": false, + "autoIncrement": true, + "possibleTypes": ["integer", "sort"], + "rawType": "INTEGER", + "interface": "integer", + "uiSchema": { + "type": "number", + "x-component": "InputNumber", + "x-component-props": { + "stringMode": true, + "step": "1" + }, + "x-validator": "integer", + "title": "id" + } + }, + { + "name": "title", + "type": "string", + "allowNull": true, + "primaryKey": false, + "unique": false, + "possibleTypes": ["string", "uuid", "nanoid"], + "rawType": "CHARACTER VARYING(255)", + "interface": "input", + "uiSchema": { + "x-component": "Input", + "x-component-props": { + "style": { + "width": "100%" + } + }, + "title": "title" + } + }, + { + "name": "content", + "type": "text", + "allowNull": true, + "primaryKey": false, + "unique": false, + "rawType": "TEXT", + "interface": "textarea", + "uiSchema": { + "type": "string", + "x-component": "Input.TextArea", + "title": "content" + } + } + ], + "introspected": true + } + ] +} diff --git a/packages/core/client/src/demo-utils/dataSourceMainCollections.json b/packages/core/client/src/demo-utils/dataSourceMainCollections.json new file mode 100644 index 0000000000..bfe1adb14e --- /dev/null +++ b/packages/core/client/src/demo-utils/dataSourceMainCollections.json @@ -0,0 +1,819 @@ +[ + { + "key": "yzowed2vee0", + "name": "users", + "title": "{{t(\"Users\")}}", + "inherit": false, + "hidden": false, + "description": null, + "fields": [ + { + "key": "6m3kn2pytkc", + "name": "id", + "type": "bigInt", + "interface": "id", + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "autoIncrement": true, + "primaryKey": true, + "allowNull": false, + "uiSchema": { + "type": "number", + "title": "{{t(\"ID\")}}", + "x-component": "InputNumber", + "x-read-pretty": true + } + }, + { + "key": "8douy9r69x5", + "name": "nickname", + "type": "string", + "interface": "input", + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "uiSchema": { + "type": "string", + "title": "{{t(\"Nickname\")}}", + "x-component": "Input" + } + }, + { + "key": "vp191ptc0d7", + "name": "username", + "type": "string", + "interface": "input", + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "unique": true, + "uiSchema": { + "type": "string", + "title": "{{t(\"Username\")}}", + "x-component": "Input", + "x-validator": { + "username": true + }, + "required": true + } + }, + { + "key": "47o82qhkvdm", + "name": "email", + "type": "string", + "interface": "email", + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "unique": true, + "uiSchema": { + "type": "string", + "title": "{{t(\"Email\")}}", + "x-component": "Input", + "x-validator": "email", + "required": true + } + }, + { + "key": "q5i9ynhq325", + "name": "phone", + "type": "string", + "interface": "phone", + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "unique": true, + "uiSchema": { + "type": "string", + "title": "{{t(\"Phone\")}}", + "x-component": "Input", + "x-validator": "phone", + "required": true + } + }, + { + "key": "cc4aslvh9dv", + "name": "password", + "type": "password", + "interface": "password", + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "hidden": true, + "uiSchema": { + "type": "string", + "title": "{{t(\"Password\")}}", + "x-component": "Password" + } + }, + { + "key": "e87ndyttazh", + "name": "appLang", + "type": "string", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null + }, + { + "key": "snfbet0pe49", + "name": "resetToken", + "type": "string", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "unique": true, + "hidden": true + }, + { + "key": "j78yhz6wifd", + "name": "systemSettings", + "type": "json", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "defaultValue": {} + }, + { + "key": "lkxqml8gchd", + "name": "sort", + "type": "sort", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "hidden": true + }, + { + "key": "lt3pcrjngzc", + "name": "createdById", + "type": "context", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "dataType": "bigInt", + "dataIndex": "state.currentUser.id", + "createOnly": true, + "visible": true, + "index": true + }, + { + "key": "lcfaf27uxyz", + "name": "createdBy", + "type": "belongsTo", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "target": "users", + "foreignKey": "createdById", + "targetKey": "id" + }, + { + "key": "y6lwdb31r5t", + "name": "updatedById", + "type": "context", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "dataType": "bigInt", + "dataIndex": "state.currentUser.id", + "visible": true, + "index": true + }, + { + "key": "exhbmthsin0", + "name": "updatedBy", + "type": "belongsTo", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "target": "users", + "foreignKey": "updatedById", + "targetKey": "id" + }, + { + "key": "s921nnlzdwi", + "name": "roles", + "type": "belongsToMany", + "interface": "m2m", + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "target": "roles", + "foreignKey": "userId", + "otherKey": "roleName", + "onDelete": "CASCADE", + "sourceKey": "id", + "targetKey": "name", + "through": "rolesUsers", + "uiSchema": { + "type": "array", + "title": "{{t(\"Roles\")}}", + "x-component": "AssociationField", + "x-component-props": { + "multiple": true, + "fieldNames": { + "label": "title", + "value": "name" + } + } + } + }, + { + "key": "qe7b1rsct5h", + "name": "jobs", + "type": "belongsToMany", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "through": "users_jobs", + "foreignKey": "userId", + "sourceKey": "id", + "otherKey": "jobId", + "targetKey": "id", + "target": "jobs" + }, + { + "key": "vt0n1l1ruyz", + "name": "usersJobs", + "type": "hasMany", + "interface": null, + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "target": "users_jobs", + "foreignKey": "userId", + "sourceKey": "id", + "targetKey": "id" + }, + { + "key": "ekol7p60nry", + "name": "sortName", + "type": "sort", + "interface": "sort", + "description": null, + "collectionName": "users", + "parentKey": null, + "reverseKey": null, + "uiSchema": { + "type": "number", + "x-component": "InputNumber", + "x-component-props": { + "stringMode": true, + "step": "1" + }, + "x-validator": "integer", + "title": "sort" + } + } + ], + "category": [], + "origin": "@nocobase/plugin-users", + "dumpRules": { + "group": "user" + }, + "sortable": "sort", + "model": "UserModel", + "createdBy": true, + "updatedBy": true, + "logging": true, + "shared": true, + "from": "db2cm", + "filterTargetKey": "id" + }, + { + "key": "rmx938ttbue", + "name": "roles", + "title": "{{t(\"Roles\")}}", + "inherit": false, + "hidden": false, + "description": null, + "fields": [ + { + "key": "l6thu4n5u6x", + "name": "name", + "type": "uid", + "interface": "input", + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "prefix": "r_", + "primaryKey": true, + "uiSchema": { + "type": "string", + "title": "{{t(\"Role UID\")}}", + "x-component": "Input" + } + }, + { + "key": "yhfq9yv8z0p", + "name": "title", + "type": "string", + "interface": "input", + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "unique": true, + "uiSchema": { + "type": "string", + "title": "{{t(\"Role name\")}}", + "x-component": "Input" + }, + "translation": true + }, + { + "key": "vnhjlmopfuz", + "name": "description", + "type": "string", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null + }, + { + "key": "s4iqsehgxo6", + "name": "strategy", + "type": "json", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null + }, + { + "key": "75e4wnv873m", + "name": "default", + "type": "boolean", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "defaultValue": false + }, + { + "key": "nofdv0gte68", + "name": "hidden", + "type": "boolean", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "defaultValue": false + }, + { + "key": "bogzo1uvk84", + "name": "allowConfigure", + "type": "boolean", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null + }, + { + "key": "k3fvj8ddpp9", + "name": "allowNewMenu", + "type": "boolean", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null + }, + { + "key": "v1ditqsv1uk", + "name": "menuUiSchemas", + "type": "belongsToMany", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "target": "uiSchemas", + "targetKey": "x-uid", + "foreignKey": "roleName", + "sourceKey": "name", + "otherKey": "uiSchemaXUid", + "through": "rolesUischemas" + }, + { + "key": "ccqhlcvgnz8", + "name": "resources", + "type": "hasMany", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "target": "dataSourcesRolesResources", + "sourceKey": "name", + "foreignKey": "roleName", + "targetKey": "id" + }, + { + "key": "s4fshtx7oxv", + "name": "snippets", + "type": "set", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "defaultValue": ["!ui.*", "!pm", "!pm.*"] + }, + { + "key": "oyzvbhc60mp", + "name": "users", + "type": "belongsToMany", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "target": "users", + "foreignKey": "roleName", + "otherKey": "userId", + "onDelete": "CASCADE", + "sourceKey": "name", + "targetKey": "id", + "through": "rolesUsers" + }, + { + "key": "89yklh7lm3p", + "name": "sort", + "type": "sort", + "interface": null, + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "hidden": true + }, + { + "key": "iz5s22dinui", + "name": "color", + "type": "string", + "interface": "color", + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "defaultValue": "#1677FF", + "uiSchema": { + "type": "string", + "x-component": "ColorPicker", + "default": "#1677FF", + "title": "color" + } + }, + { + "key": "o5nyb6isl62", + "name": "long-text", + "type": "text", + "interface": "textarea", + "description": null, + "collectionName": "roles", + "parentKey": null, + "reverseKey": null, + "uiSchema": { + "type": "string", + "x-component": "Input.TextArea", + "title": "Long text" + } + } + ], + "category": [], + "origin": "@nocobase/plugin-acl", + "dumpRules": "required", + "autoGenId": false, + "model": "RoleModel", + "filterTargetKey": "name", + "sortable": true, + "from": "db2cm" + }, + { + "key": "24gntrrr5a6", + "name": "tree", + "title": "TreeCollection", + "inherit": false, + "hidden": false, + "description": null, + "fields": [ + { + "key": "pcea3h3ivkg", + "name": "parentId", + "type": "bigInt", + "interface": "integer", + "description": null, + "collectionName": "t_4uamm7v51dj", + "parentKey": null, + "reverseKey": null, + "isForeignKey": true, + "uiSchema": { + "type": "number", + "title": "{{t(\"Parent ID\")}}", + "x-component": "InputNumber", + "x-read-pretty": true + }, + "target": "t_4uamm7v51dj" + }, + { + "key": "185j2rf7o68", + "name": "parent", + "type": "belongsTo", + "interface": "m2o", + "description": null, + "collectionName": "t_4uamm7v51dj", + "parentKey": null, + "reverseKey": null, + "foreignKey": "parentId", + "treeParent": true, + "onDelete": "CASCADE", + "uiSchema": { + "title": "{{t(\"Parent\")}}", + "x-component": "AssociationField", + "x-component-props": { + "multiple": false, + "fieldNames": { + "label": "id", + "value": "id" + } + } + }, + "target": "t_4uamm7v51dj", + "targetKey": "id" + }, + { + "key": "gjvso3p9sjn", + "name": "children", + "type": "hasMany", + "interface": "o2m", + "description": null, + "collectionName": "t_4uamm7v51dj", + "parentKey": null, + "reverseKey": null, + "foreignKey": "parentId", + "treeChildren": true, + "onDelete": "CASCADE", + "uiSchema": { + "title": "{{t(\"Children\")}}", + "x-component": "AssociationField", + "x-component-props": { + "multiple": true, + "fieldNames": { + "label": "id", + "value": "id" + } + } + }, + "target": "t_4uamm7v51dj", + "targetKey": "id", + "sourceKey": "id" + }, + { + "key": "j50f3am3c88", + "name": "id", + "type": "bigInt", + "interface": "integer", + "description": null, + "collectionName": "t_4uamm7v51dj", + "parentKey": null, + "reverseKey": null, + "autoIncrement": true, + "primaryKey": true, + "allowNull": false, + "uiSchema": { + "type": "number", + "title": "{{t(\"ID\")}}", + "x-component": "InputNumber", + "x-read-pretty": true + }, + "target": "t_4uamm7v51dj" + }, + { + "key": "9szmn2ecqgs", + "name": "f_y99u3pyj0bt", + "type": "string", + "interface": "input", + "description": null, + "collectionName": "t_4uamm7v51dj", + "parentKey": null, + "reverseKey": null, + "uiSchema": { + "type": "string", + "x-component": "Input", + "title": "Single line text" + } + } + ], + "category": [], + "logging": true, + "autoGenId": true, + "createdAt": false, + "createdBy": false, + "updatedAt": false, + "updatedBy": false, + "template": "tree", + "view": false, + "tree": "adjacencyList", + "filterTargetKey": "id" + }, + { + "key": "16ocj2rsg3t", + "name": "interfaces", + "title": "Interfaces", + "inherit": false, + "hidden": false, + "description": null, + "fields": [ + { + "key": "k2v39l19inp", + "name": "id", + "type": "bigInt", + "interface": "integer", + "description": null, + "collectionName": "interfaces", + "parentKey": null, + "reverseKey": null, + "autoIncrement": true, + "primaryKey": true, + "allowNull": false, + "uiSchema": { + "type": "number", + "title": "{{t(\"ID\")}}", + "x-component": "InputNumber", + "x-read-pretty": true + } + }, + { + "key": "gfnqdj8sd01", + "name": "createdAt", + "type": "date", + "interface": "createdAt", + "description": null, + "collectionName": "interfaces", + "parentKey": null, + "reverseKey": null, + "field": "createdAt", + "uiSchema": { + "type": "datetime", + "title": "{{t(\"Created at\")}}", + "x-component": "DatePicker", + "x-component-props": {}, + "x-read-pretty": true + } + }, + { + "key": "3ddqrb1lle5", + "name": "createdBy", + "type": "belongsTo", + "interface": "createdBy", + "description": null, + "collectionName": "interfaces", + "parentKey": null, + "reverseKey": null, + "target": "users", + "foreignKey": "createdById", + "uiSchema": { + "type": "object", + "title": "{{t(\"Created by\")}}", + "x-component": "AssociationField", + "x-component-props": { + "fieldNames": { + "value": "id", + "label": "nickname" + } + }, + "x-read-pretty": true + }, + "targetKey": "id" + }, + { + "key": "9nc7gqqw0ht", + "name": "updatedAt", + "type": "date", + "interface": "updatedAt", + "description": null, + "collectionName": "interfaces", + "parentKey": null, + "reverseKey": null, + "field": "updatedAt", + "uiSchema": { + "type": "string", + "title": "{{t(\"Last updated at\")}}", + "x-component": "DatePicker", + "x-component-props": {}, + "x-read-pretty": true + } + }, + { + "key": "06wr4f2qi4w", + "name": "updatedBy", + "type": "belongsTo", + "interface": "updatedBy", + "description": null, + "collectionName": "interfaces", + "parentKey": null, + "reverseKey": null, + "target": "users", + "foreignKey": "updatedById", + "uiSchema": { + "type": "object", + "title": "{{t(\"Last updated by\")}}", + "x-component": "AssociationField", + "x-component-props": { + "fieldNames": { + "value": "id", + "label": "nickname" + } + }, + "x-read-pretty": true + }, + "targetKey": "id" + }, + { + "key": "g5beggm3aln", + "name": "nano-iD", + "type": "nanoid", + "interface": "nanoid", + "description": null, + "collectionName": "interfaces", + "parentKey": null, + "reverseKey": null, + "customAlphabet": "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", + "size": 21, + "autoFill": true, + "uiSchema": { + "type": "string", + "x-component": "NanoIDInput", + "title": "Nano ID" + } + }, + { + "key": "wchbz23orvg", + "name": "attachment", + "type": "belongsToMany", + "interface": "attachment", + "description": null, + "collectionName": "interfaces", + "parentKey": null, + "reverseKey": null, + "uiSchema": { + "x-component-props": { + "accept": "image/*", + "multiple": true + }, + "type": "array", + "x-component": "Upload.Attachment", + "title": "Attachment" + }, + "target": "attachments", + "through": "t_zj0zu7maytd", + "foreignKey": "f_iek1e32gsq0", + "otherKey": "f_dtc6w8dzyoo", + "targetKey": "id", + "sourceKey": "id" + } + ], + "category": [], + "logging": true, + "autoGenId": true, + "createdAt": true, + "createdBy": true, + "updatedAt": true, + "updatedBy": true, + "template": "general", + "view": false, + "filterTargetKey": "id" + } +] diff --git a/packages/core/client/src/demo-utils/dataSourceMainData.json b/packages/core/client/src/demo-utils/dataSourceMainData.json new file mode 100644 index 0000000000..9eb7b57808 --- /dev/null +++ b/packages/core/client/src/demo-utils/dataSourceMainData.json @@ -0,0 +1,287 @@ +{ + "users:list": { + "data": [ + { + "createdAt": "2024-04-07T06:50:37.797Z", + "updatedAt": "2024-04-07T06:50:37.797Z", + "appLang": null, + "createdById": null, + "email": "admin@nocobase.com", + "f_1gx8uyn3wva": 1, + "id": 1, + "nickname": "Super Admin", + "phone": null, + "systemSettings": {}, + "updatedById": null, + "username": "nocobase", + "roles": [ + { + "createdAt": "2024-04-07T06:50:37.700Z", + "updatedAt": "2024-04-07T06:50:37.700Z", + "allowConfigure": null, + "allowNewMenu": true, + "default": true, + "description": null, + "hidden": false, + "color": "#1677FF", + "name": "member", + "snippets": ["!pm", "!pm.*", "!ui.*"], + "strategy": { + "actions": ["view", "update:own", "destroy:own", "create"] + }, + "title": "{{t(\"Member\")}}", + "rolesUsers": { + "createdAt": "2024-04-07T06:50:37.854Z", + "updatedAt": "2024-04-07T06:50:37.854Z", + "default": null, + "roleName": "member", + "userId": 1 + } + }, + { + "createdAt": "2024-04-07T06:50:37.622Z", + "updatedAt": "2024-04-07T06:50:37.622Z", + "allowConfigure": null, + "allowNewMenu": null, + "default": false, + "description": null, + "hidden": true, + "color": "#1677FF", + "name": "root", + "snippets": ["pm", "pm.*", "ui.*"], + "strategy": null, + "title": "{{t(\"Root\")}}", + "rolesUsers": { + "createdAt": "2024-04-07T06:50:38.152Z", + "updatedAt": "2024-04-07T06:50:38.186Z", + "default": true, + "roleName": "root", + "userId": 1 + } + }, + { + "createdAt": "2024-04-07T06:50:37.657Z", + "updatedAt": "2024-04-07T06:50:37.657Z", + "allowConfigure": true, + "allowNewMenu": true, + "default": false, + "description": null, + "hidden": false, + "name": "admin", + "color": "#1677FF", + "snippets": ["pm", "pm.*", "ui.*"], + "strategy": { + "actions": ["create", "view", "update", "destroy"] + }, + "title": "{{t(\"Admin\")}}", + "rolesUsers": { + "createdAt": "2024-04-07T06:50:38.152Z", + "updatedAt": "2024-04-07T06:50:38.152Z", + "default": null, + "roleName": "admin", + "userId": 1 + } + } + ] + } + ], + "meta": { + "count": 1, + "page": 1, + "pageSize": 20, + "totalPage": 1, + "allowedActions": { + "view": [1], + "update": [1], + "destroy": [] + } + } + }, + "users:get": { + "data": { + "createdAt": "2024-04-07T06:50:37.797Z", + "updatedAt": "2024-04-07T06:50:37.797Z", + "appLang": null, + "createdById": null, + "email": "admin@nocobase.com", + "f_1gx8uyn3wva": 1, + "id": 1, + "nickname": "Super Admin", + "phone": null, + "systemSettings": {}, + "updatedById": null, + "username": "nocobase", + "roles": [ + { + "createdAt": "2024-04-07T06:50:37.700Z", + "updatedAt": "2024-04-07T06:50:37.700Z", + "allowConfigure": null, + "allowNewMenu": true, + "default": true, + "description": null, + "hidden": false, + "color": "#1677FF", + "name": "member", + "snippets": ["!pm", "!pm.*", "!ui.*"], + "strategy": { + "actions": ["view", "update:own", "destroy:own", "create"] + }, + "title": "{{t(\"Member\")}}", + "rolesUsers": { + "createdAt": "2024-04-07T06:50:37.854Z", + "updatedAt": "2024-04-07T06:50:37.854Z", + "default": null, + "roleName": "member", + "userId": 1 + } + }, + { + "createdAt": "2024-04-07T06:50:37.622Z", + "updatedAt": "2024-04-07T06:50:37.622Z", + "allowConfigure": null, + "allowNewMenu": null, + "default": false, + "description": null, + "hidden": true, + "color": "#1677FF", + "name": "root", + "snippets": ["pm", "pm.*", "ui.*"], + "strategy": null, + "title": "{{t(\"Root\")}}", + "rolesUsers": { + "createdAt": "2024-04-07T06:50:38.152Z", + "updatedAt": "2024-04-07T06:50:38.186Z", + "default": true, + "roleName": "root", + "userId": 1 + } + }, + { + "createdAt": "2024-04-07T06:50:37.657Z", + "updatedAt": "2024-04-07T06:50:37.657Z", + "allowConfigure": true, + "allowNewMenu": true, + "default": false, + "description": null, + "hidden": false, + "name": "admin", + "color": "#1677FF", + "snippets": ["pm", "pm.*", "ui.*"], + "strategy": { + "actions": ["create", "view", "update", "destroy"] + }, + "title": "{{t(\"Admin\")}}", + "rolesUsers": { + "createdAt": "2024-04-07T06:50:38.152Z", + "updatedAt": "2024-04-07T06:50:38.152Z", + "default": null, + "roleName": "admin", + "userId": 1 + } + } + ] + } + }, + "roles:list": { + "data": [ + { + "createdAt": "2024-04-07T06:50:37.622Z", + "updatedAt": "2024-04-07T06:50:37.622Z", + "allowConfigure": null, + "allowNewMenu": null, + "default": false, + "description": null, + "hidden": true, + "name": "root", + "color": "#1677FF", + "snippets": ["pm", "pm.*", "ui.*"], + "strategy": null, + "title": "{{t(\"Root\")}}" + }, + { + "createdAt": "2024-04-07T06:50:37.657Z", + "updatedAt": "2024-04-07T06:50:37.657Z", + "allowConfigure": true, + "allowNewMenu": true, + "default": false, + "description": null, + "hidden": false, + "color": "#1677FF", + "name": "admin", + "snippets": ["pm", "pm.*", "ui.*"], + "strategy": { + "actions": ["create", "view", "update", "destroy"] + }, + "title": "{{t(\"Admin\")}}" + }, + { + "createdAt": "2024-04-07T06:50:37.700Z", + "updatedAt": "2024-04-07T06:50:37.700Z", + "allowConfigure": null, + "allowNewMenu": true, + "default": true, + "description": null, + "color": "#1677FF", + "hidden": false, + "name": "member", + "snippets": ["!pm", "!pm.*", "!ui.*"], + "strategy": { + "actions": ["view", "update:own", "destroy:own", "create"] + }, + "title": "{{t(\"Member\")}}" + } + ], + "meta": { + "count": 3, + "page": 1, + "pageSize": 20, + "totalPage": 1, + "allowedActions": { + "view": ["root", "admin", "member"], + "update": ["root", "admin", "member"], + "destroy": [] + } + } + }, + "roles:get": { + "data": { + "createdAt": "2024-04-07T06:50:37.622Z", + "updatedAt": "2024-04-07T06:50:37.622Z", + "allowConfigure": null, + "allowNewMenu": null, + "default": false, + "description": null, + "hidden": true, + "name": "root", + "color": "#1677FF", + "snippets": ["pm", "pm.*", "ui.*"], + "strategy": null, + "title": "{{t(\"Root\")}}" + } + }, + "tree:list": { + "data": [ + { + "id": 1, + "parentId": null, + "f_y99u3pyj0bt": "1" + }, + { + "id": 2, + "parentId": 1, + "f_y99u3pyj0bt": "2" + } + ], + "meta": { + "count": 2, + "page": 1, + "pageSize": 20, + "totalPage": 1, + "allowedActions": { + "view": [1, 2], + "update": [1, 2], + "destroy": [1, 2] + } + } + } +} diff --git a/packages/core/client/src/demo-utils/index.tsx b/packages/core/client/src/demo-utils/index.tsx new file mode 100644 index 0000000000..a40aa2bd1a --- /dev/null +++ b/packages/core/client/src/demo-utils/index.tsx @@ -0,0 +1,124 @@ +/** + * This file is part of the NocoBase (R) project. + * Copyright (c) 2020-2024 NocoBase Co., Ltd. + * Authors: NocoBase Team. + * + * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. + * For more information, please refer to: https://www.nocobase.com/agreement. + */ + +import MockAdapter from 'axios-mock-adapter'; +import { AxiosInstance, AxiosRequestConfig } from 'axios'; + +import { + ActionInitializer, + AntdSchemaComponentPlugin, + Application, + ApplicationOptions, + CollectionPlugin, + LocalDataSource, + SchemaSettingsPlugin, +} from '../index'; + +import dataSourceMainCollections from './dataSourceMainCollections.json'; +import dataSource2 from './dataSource2.json'; +import dataSourceMainData from './dataSourceMainData.json'; +import _ from 'lodash'; + +const defaultApis = { + 'uiSchemas:patch': { data: { result: 'ok' } }, + 'uiSchemas:batchPatch': { data: { result: 'ok' } }, + 'uiSchemas:saveAsTemplate': { data: { result: 'ok' } }, + 'users:update': { data: { result: 'ok' } }, + 'users:create': { data: { result: 'ok' } }, + 'roles:update': { data: { result: 'ok' } }, + 'roles:create': { data: { result: 'ok' } }, + ...dataSourceMainData, +}; + +type URL = string; +type ResponseData = any; + +type MockApis = Record; + +function getProcessMockData(apis: Record, key: string) { + return (config: AxiosRequestConfig) => { + if (!apis[key]) return [404, { data: { message: 'mock data not found' } }]; + if (config?.params?.pageSize || config?.params?.page) { + const { data, meta } = apis[key]; + + const pageSize = config.params.pageSize || meta?.pageSize || 20; + const page = config.params.page || meta?.page || 1; + return [ + 200, + { + data: data.slice(pageSize * (page - 1), pageSize * page), + meta: { + ...meta, + page, + pageSize, + count: data.length, + totalPage: Math.ceil(data.length / pageSize), + }, + }, + ]; + } + return [200, apis[key]]; + }; +} + +export const mockApi = (axiosInstance: AxiosInstance, apis: MockApis = {}, delayResponse?: number) => { + const mock = new MockAdapter(axiosInstance, { delayResponse }); + Object.keys(apis).forEach((key) => { + mock.onAny(key).reply(getProcessMockData(apis, key)); + }); + + return (apis: MockApis = {}) => { + Object.keys(apis).forEach((key) => { + mock.onAny(key).reply(getProcessMockData(apis, key)); + }); + }; +}; + +export const mockAppApi = (app: Application, apis: MockApis = {}, delayResponse?: number) => { + const mock = mockApi(app.apiClient.axios, apis, delayResponse); + return mock; +}; + +export interface MockAppOptions extends ApplicationOptions { + apis?: MockApis; + delayResponse?: number; + enableMultipleDataSource?: boolean; +} + +export const mockApp = (options: MockAppOptions) => { + const { + apis: optionsApis = {}, + enableMultipleDataSource, + delayResponse, + router = { type: 'memory', initialEntries: ['/'] }, + ...appOptions + } = options; + const app = new Application({ + disableAcl: true, + ...appOptions, + router, + }); + + app.pluginManager.add(AntdSchemaComponentPlugin); + app.pluginManager.add(SchemaSettingsPlugin); + app.pluginManager.add(CollectionPlugin, { config: { enableRemoteDataSource: false } }); + app.addComponents({ ActionInitializer }); + + const apis = Object.assign({}, defaultApis, optionsApis); + + app.getCollectionManager().addCollections(dataSourceMainCollections as any); + + if (enableMultipleDataSource) { + app.dataSourceManager.addDataSource(LocalDataSource, dataSource2 as any); + } + + mockAppApi(app, apis, delayResponse); + + return app; +}; diff --git a/packages/core/client/src/icon/demos/antd-icon.tsx b/packages/core/client/src/icon/demos/antd-icon.tsx index b0aa9ac38f..a9fc82e52f 100644 --- a/packages/core/client/src/icon/demos/antd-icon.tsx +++ b/packages/core/client/src/icon/demos/antd-icon.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Icon } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/icon/demos/custom-icon.tsx b/packages/core/client/src/icon/demos/custom-icon.tsx index d53198fefb..b00f8cfd00 100644 --- a/packages/core/client/src/icon/demos/custom-icon.tsx +++ b/packages/core/client/src/icon/demos/custom-icon.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Icon } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/icon/demos/iconfont.tsx b/packages/core/client/src/icon/demos/iconfont.tsx index 8227b1eccb..4451a7ccdd 100644 --- a/packages/core/client/src/icon/demos/iconfont.tsx +++ b/packages/core/client/src/icon/demos/iconfont.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Icon } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/icon/demos/register-icon.tsx b/packages/core/client/src/icon/demos/register-icon.tsx index 46147efe4c..107da4986a 100644 --- a/packages/core/client/src/icon/demos/register-icon.tsx +++ b/packages/core/client/src/icon/demos/register-icon.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Icon } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo1.tsx index d3b4dd20ff..e09d88fcd7 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema, observer, useForm } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo2.tsx index ae7e54f160..caea02d0b5 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema, observer, useForm } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx index a96d768c21..1586903e14 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Field } from '@formily/core'; import { ISchema, observer, useField, useFieldSchema } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo4.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo4.tsx index 4bbf97ded6..ea898b565c 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/demo4.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/demo4.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema, observer, useForm } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo5.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo5.tsx index 332fca9018..915e5826ed 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/demo5.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/demo5.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ArrayTable, diff --git a/packages/core/client/src/schema-component/antd/action/demos/demo6.tsx b/packages/core/client/src/schema-component/antd/action/demos/demo6.tsx index 42d2157497..2be66ded77 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/demo6.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/demo6.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { uid } from '@formily/shared'; diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-container.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-container.tsx index a4272f6613..bd47330f21 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-container.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-container.tsx @@ -1,58 +1,56 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ +import { SchemaComponent, useActionContext, Plugin, ISchema } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -import { useActionContext } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'Action', - title: 'Open', - 'x-component-props': { - openMode: 'drawer', - }, - properties: { - drawer: { - type: 'void', - 'x-component': 'Action.Container', - title: 'Title', - properties: { - footer: { - type: 'void', - 'x-component': 'Action.Container.Footer', - properties: { - close: { - title: 'Close', - 'x-component': 'Action', - 'x-use-component-props': function useActionProps() { - const { setVisible } = useActionContext(); - return { - type: 'default', - onClick() { - setVisible(false); - }, - }; - }, - }, - }, - }, +function useCloseActionProps() { + const { setVisible } = useActionContext(); + return { + type: 'default', + onClick() { + setVisible(false); + }, + }; +} +const schema: ISchema = { + name: 'test', + type: 'void', + 'x-component': 'Action', + title: 'Open', + 'x-component-props': { + openMode: 'drawer', + }, + properties: { + drawer: { + type: 'void', + 'x-component': 'Action.Container', + title: 'Title', + properties: { + footer: { + type: 'void', + 'x-component': 'Action.Container.Footer', + properties: { + close: { + title: 'Close', + 'x-component': 'Action', + 'x-use-component-props': 'useCloseActionProps', }, }, }, }, }, }, -}); +} -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-context.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-context.tsx index 8a8ea2dce0..1a1a3e76c5 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-context.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-context.tsx @@ -1,68 +1,60 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { ISchema, observer } from '@formily/react'; import { - Action, ActionContextProvider, - Form, - FormItem, - Input, + ISchema, SchemaComponent, - SchemaComponentProvider, + Plugin, useActionContext, } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; import React, { useState } from 'react'; +function useActionProps() { + const { setVisible } = useActionContext(); + return { + onClick() { + setVisible(false); + }, + }; +} const schema: ISchema = { - type: 'object', + name: 'test', + 'x-component': 'Action.Drawer', + type: 'void', + title: 'Drawer Title', properties: { - drawer1: { - 'x-component': 'Action.Drawer', + hello1: { + 'x-content': 'Hello', + title: 'T1', + }, + footer1: { + 'x-component': 'Action.Drawer.Footer', type: 'void', - title: 'Drawer Title', properties: { - hello1: { - 'x-content': 'Hello', - title: 'T1', - }, - footer1: { - 'x-component': 'Action.Drawer.Footer', - type: 'void', - properties: { - close1: { - title: 'Close', - 'x-component': 'Action', - 'x-use-component-props': function useActionProps() { - const { setVisible } = useActionContext(); - return { - onClick() { - setVisible(false); - }, - }; - }, - }, - }, + close1: { + title: 'Close', + 'x-component': 'Action', + 'x-use-component-props': 'useActionProps' }, }, }, }, +} + +const Demo = () => { + const [visible, setVisible] = useState(false); + return + setVisible(true)}>Open + + ; }; -export default observer(() => { - const [visible, setVisible] = useState(false); - return ( - - - setVisible(true)}>Open - - - - ); -}); +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); + diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-link.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-link.tsx index 49604bb004..fe2f5d7c1c 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-link.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-link.tsx @@ -1,26 +1,29 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ +import React from 'react'; +import { ISchema, SchemaComponent, Plugin } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; -import { getAppComponent } from '@nocobase/test/web'; - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'Action.Link', - title: 'Edit', - }, +const schema: ISchema = { + name: 'test', + type: 'void', + properties: { + test: { + type: 'void', + 'x-component': 'Action.Link', + title: 'Edit', }, }, -}); +} -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-modal.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-modal.tsx index 34fa14f1c1..2bbec343ba 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-modal.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-modal.tsx @@ -1,16 +1,8 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { getAppComponent } from '@nocobase/test/web'; -import { Space, App as AntdApp } from 'antd'; -import { useAPIClient, useActionContext } from '@nocobase/client'; -import { useForm } from '@formily/react'; +import { App as AntdApp } from 'antd'; +import { useAPIClient, useActionContext, Plugin, SchemaComponent } from '@nocobase/client'; +import { ISchema, useForm } from '@formily/react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const useCloseActionProps = () => { const { setVisible } = useActionContext(); @@ -46,67 +38,68 @@ const useSubmitActionProps = () => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': Space, - properties: { - test: { - type: 'void', - 'x-component': 'Action', - title: 'Open Modal', - 'x-component-props': { - openSize: 'small', +const schema: ISchema = { + name: 'test', + type: 'void', + 'x-component': 'Action', + title: 'Open Modal', + 'x-component-props': { + openSize: 'small', + }, + properties: { + drawer: { + type: 'void', + 'x-component': 'Action.Modal', + title: 'Modal Title', + 'x-decorator': 'FormV2', + properties: { + username: { + type: 'string', + title: `Username`, + required: true, + 'x-decorator': 'FormItem', + 'x-component': 'Input', }, - properties: { - drawer: { - type: 'void', - 'x-component': 'Action.Modal', - title: 'Modal Title', - 'x-decorator': 'FormV2', - properties: { - username: { - type: 'string', - title: `Username`, - required: true, - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - footer: { - type: 'void', - 'x-component': 'Action.Modal.Footer', - properties: { - close: { - title: 'Close', - 'x-component': 'Action', - 'x-component-props': { - type: 'default', - }, - 'x-use-component-props': 'useCloseActionProps', - }, - submit: { - title: 'Submit', - 'x-component': 'Action', - 'x-use-component-props': 'useSubmitActionProps', - }, - }, + footer: { + type: 'void', + 'x-component': 'Action.Modal.Footer', + properties: { + close: { + title: 'Close', + 'x-component': 'Action', + 'x-component-props': { + type: 'default', }, + 'x-use-component-props': 'useCloseActionProps', + }, + submit: { + title: 'Submit', + 'x-component': 'Action', + 'x-use-component-props': 'useSubmitActionProps', }, }, }, }, }, }, - appOptions: { - scopes: { - useSubmitActionProps, - useCloseActionProps, - }, - }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { test: { data: 'ok' }, }, }); -export default App; +export default app.getRootComponent(); + diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-popover.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-popover.tsx index 4d8177beb6..0dfc81dbf2 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-popover.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/action-popover.tsx @@ -1,42 +1,41 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ +import React from "react"; +import { ISchema, SchemaComponent, Plugin } from "@nocobase/client"; +import { mockApp } from "@nocobase/client/demo-utils"; -import { getAppComponent } from '@nocobase/test/web'; - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - 'x-component': 'Action', - 'x-component-props': { - type: 'primary', - popover: true, - }, - type: 'void', - title: 'Open', - properties: { - popover: { - type: 'void', - 'x-component': 'Action.Popover', - properties: { - hello: { - type: 'void', - 'x-content': 'Hello', - }, - }, - }, +const schema: ISchema = { + name: 'test', + 'x-component': 'Action', + 'x-component-props': { + type: 'primary', + popover: true, + }, + type: 'void', + title: 'Open', + properties: { + popover: { + type: 'void', + 'x-component': 'Action.Popover', + properties: { + hello: { + type: 'void', + 'x-content': 'Hello', }, }, }, }, -}); +} -export default App; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-one-column.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-one-column.tsx index bb58d61cce..008d5ca2ff 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-one-column.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-one-column.tsx @@ -1,14 +1,6 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { ActionInitializer, SchemaInitializer } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { ISchema, SchemaComponent, SchemaInitializer, Plugin } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const addActionButton = new SchemaInitializer({ name: 'addActionButton', @@ -48,39 +40,43 @@ const addActionButton = new SchemaInitializer({ ], }); -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'ActionBar', - 'x-initializer': 'addActionButton', - 'x-component-props': { - layout: 'one-column', - }, - properties: { - a1: { - title: 'Action 1', - 'x-component': 'Action', - 'x-action': 'a1', - }, - a2: { - title: 'Action 2', - 'x-component': 'Action', - 'x-action': 'a2', - }, - }, - }, - }, - }, - appOptions: { - schemaInitializers: [addActionButton], - components: { - ActionInitializer, +const schema: ISchema = { + name: 'test', + type: 'void', + 'x-component': 'ActionBar', + 'x-initializer': 'addActionButton', + 'x-component-props': { + layout: 'one-column', + }, + properties: { + a1: { + title: 'Action 1', + 'x-component': 'Action', + 'x-action': 'a1', + }, + a2: { + title: 'Action 2', + 'x-component': 'Action', + 'x-action': 'a2', }, }, +} + + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.schemaInitializerManager.add(addActionButton) + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + designable: true, + plugins: [DemoPlugin] }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-two-columns.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-two-columns.tsx index dcbda74fd1..a5b6055e13 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-two-columns.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/actionbar-two-columns.tsx @@ -1,14 +1,6 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { ActionInitializer, SchemaInitializer } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { ISchema, Plugin, SchemaComponent, SchemaInitializer } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const addActionButton = new SchemaInitializer({ name: 'addActionButton', @@ -50,41 +42,45 @@ const addActionButton = new SchemaInitializer({ ], }); -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'ActionBar', - 'x-initializer': 'addActionButton', - 'x-component-props': { - layout: 'two-columns', - }, - properties: { - a1: { - title: 'Action 1', - 'x-component': 'Action', - 'x-action': 'a1', - 'x-align': 'left', - }, - a2: { - title: 'Action 2', - 'x-component': 'Action', - 'x-action': 'a2', - 'x-align': 'right', - }, - }, - }, - }, - }, - appOptions: { - schemaInitializers: [addActionButton], - components: { - ActionInitializer, +const schema: ISchema = { + type: 'void', + name: 'test', + 'x-component': 'ActionBar', + 'x-initializer': 'addActionButton', + 'x-component-props': { + layout: 'two-columns', + }, + properties: { + a1: { + title: 'Action 1', + 'x-component': 'Action', + 'x-action': 'a1', + 'x-align': 'left', + }, + a2: { + title: 'Action 2', + 'x-component': 'Action', + 'x-action': 'a2', + 'x-align': 'right', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.schemaInitializerManager.add(addActionButton) + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + designable: true, + plugins: [DemoPlugin] }); -export default App; +export default app.getRootComponent(); + diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/basic.tsx index 91879f3cb2..b96e9614be 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/basic.tsx @@ -1,32 +1,30 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'Action', - 'x-component-props': { - ghost: true, // ButtonProps - type: 'dashed', // ButtonProps - danger: true, // ButtonProps - title: 'Open', // title - }, - // title: 'Open', // It's also possible here - }, - }, +const schema: ISchema = { + type: 'void', + name: 'test', + 'x-component': 'Action', + 'x-component-props': { + ghost: true, // ButtonProps + type: 'dashed', // ButtonProps + danger: true, // ButtonProps + title: 'Open', // title }, -}); + // title: 'Open', // It's also possible here +} -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/confirm.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/confirm.tsx index 3cce1b28de..363a0efc6f 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/confirm.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/confirm.tsx @@ -1,44 +1,42 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { Space, App as AntdApp } from 'antd'; -import { ActionProps } from '@nocobase/client'; +import { App as AntdApp } from 'antd'; +import { ActionProps, ISchema, SchemaComponent, Plugin } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': Space, - properties: { - test: { - type: 'void', - 'x-component': 'Action', - title: 'Delete', - 'x-use-component-props': function useActionProps(): ActionProps { - const { message } = AntdApp.useApp(); +function useActionProps(): ActionProps { + const { message } = AntdApp.useApp(); - return { - confirm: { - // confirm props - title: 'Delete', - content: 'Are you sure you want to delete it?', - }, - onClick() { - // after confirm ok - message.success('Deleted!'); - }, - }; - }, - }, + return { + confirm: { + // confirm props + title: 'Delete', + content: 'Are you sure you want to delete it?', }, - }, -}); + onClick() { + // after confirm ok + message.success('Deleted!'); + }, + }; +} +const schema: ISchema = { + type: 'void', + name: 'test', + 'x-component': 'Action', + title: 'Delete', + 'x-use-component-props': 'useActionProps', +} -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/custom-component.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/custom-component.tsx index c947bf3d7e..d661b8e8c1 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/custom-component.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/custom-component.tsx @@ -1,47 +1,45 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { Button, Space } from 'antd'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { Button } from 'antd'; import React from 'react'; const ComponentButton = (props) => { return ; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': Space, - properties: { - test1: { - type: 'void', - 'x-component': 'Action', - 'x-component-props': { - component: 'ComponentButton', // string type - }, +const schema: ISchema = { + type: 'void', + name: 'test', + 'x-component': 'Space', + properties: { + test1: { + type: 'void', + 'x-component': 'Action', + 'x-component-props': { + component: 'ComponentButton', // string type }, - test2: { - type: 'void', - 'x-component': 'Action', - 'x-component-props': { - component: ComponentButton, // ComponentType type - }, + }, + test2: { + type: 'void', + 'x-component': 'Action', + 'x-component-props': { + component: ComponentButton, // ComponentType type }, }, }, - appOptions: { - components: { - ComponentButton, // register custom component - }, - }, -}); +} -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-basic.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-basic.tsx index 55dff0d737..426542583c 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-basic.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-basic.tsx @@ -1,35 +1,32 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { Space } from 'antd'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': Space, - properties: { - test: { - type: 'void', - 'x-component': 'Action', - title: 'Open Drawer', - properties: { - drawer: { - type: 'void', - 'x-component': 'Action.Drawer', - title: 'Drawer Title', - }, - }, - }, +const schema: ISchema = { + name: 'test', + type: 'void', + 'x-component': 'Action', + title: 'Open Drawer', + properties: { + drawer: { + type: 'void', + 'x-component': 'Action.Drawer', + title: 'Drawer Title', }, }, -}); +} -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-footer.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-footer.tsx index 4551c2eb25..0426da2ad8 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-footer.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-footer.tsx @@ -1,15 +1,8 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { Space } from 'antd'; -import { useActionContext } from '@nocobase/client'; +import { ISchema, useActionContext } from '@nocobase/client'; +import { SchemaComponent, Plugin } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const useCloseActionProps = () => { const { setVisible } = useActionContext(); @@ -32,57 +25,57 @@ const useSubmitActionProps = () => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': Space, - properties: { - test: { - type: 'void', - 'x-component': 'Action', - title: 'Open Drawer', - properties: { - drawer: { - type: 'void', - 'x-component': 'Action.Drawer', - title: 'Drawer Title', - properties: { - content: { - type: 'void', - 'x-content': 'Hello', - }, - footer: { - type: 'void', - 'x-component': 'Action.Drawer.Footer', // must be `Action.Drawer.Footer` - properties: { - close: { - title: 'Close', - 'x-component': 'Action', - 'x-use-component-props': 'useCloseActionProps', - }, - submit: { - title: 'Submit', - 'x-component': 'Action', - 'x-use-component-props': 'useSubmitActionProps', - }, - }, - }, +const schema: ISchema = { + name: 'test', + type: 'void', + 'x-component': 'Action', + title: 'Open Drawer', + properties: { + drawer: { + type: 'void', + 'x-component': 'Action.Drawer', + title: 'Drawer Title', + properties: { + content: { + type: 'void', + 'x-content': 'Hello', + }, + footer: { + type: 'void', + 'x-component': 'Action.Drawer.Footer', // must be `Action.Drawer.Footer` + properties: { + close: { + title: 'Close', + 'x-component': 'Action', + 'x-use-component-props': 'useCloseActionProps', + }, + submit: { + title: 'Submit', + 'x-component': 'Action', + 'x-use-component-props': 'useSubmitActionProps', }, }, }, }, }, }, - appOptions: { - scopes: { - useCloseActionProps, - useSubmitActionProps, - }, - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { test: { data: 'ok' }, - }, + } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-openSize.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-openSize.tsx index 18749e0d82..5595bac46d 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-openSize.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-openSize.tsx @@ -1,45 +1,44 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { Space } from 'antd'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': Space, - properties: { - test: { - type: 'void', - 'x-component': 'Action', - title: 'Open Drawer', - 'x-component-props': { - openSize: 'large', // open drawer size - }, - properties: { - drawer: { - type: 'void', - title: 'Drawer Title', - 'x-component': 'Action.Drawer', - properties: { - // Drawer content - hello: { - type: 'void', - 'x-content': 'Hello', - }, - }, - }, +const schema: ISchema = { + name: 'test', + type: 'void', + 'x-component': 'Action', + title: 'Open Drawer', + 'x-component-props': { + openSize: 'large', // open drawer size + }, + properties: { + drawer: { + type: 'void', + title: 'Drawer Title', + 'x-component': 'Action.Drawer', + properties: { + // Drawer content + hello: { + type: 'void', + 'x-content': 'Hello', }, }, }, }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-with-form.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-with-form.tsx index 6007a34a80..2ecd3e1f1f 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-with-form.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/drawer-with-form.tsx @@ -1,16 +1,9 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { getAppComponent } from '@nocobase/test/web'; -import { Space, App as AntdApp } from 'antd'; +import { App as AntdApp } from 'antd'; import { useAPIClient, useActionContext } from '@nocobase/client'; import { useForm } from '@formily/react'; +import { SchemaComponent, Plugin } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const useCloseActionProps = () => { const { setVisible } = useActionContext(); @@ -46,65 +39,65 @@ const useSubmitActionProps = () => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': Space, - properties: { - test: { - type: 'void', - 'x-component': 'Action', - title: 'Open Drawer', - properties: { - drawer: { - type: 'void', - 'x-component': 'Action.Drawer', - title: 'Drawer Title', - 'x-decorator': 'FormV2', // This uses the `FormV2` component. - properties: { - username: { - // This is a form field. - type: 'string', - title: `Username`, - required: true, - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - footer: { - type: 'void', - 'x-component': 'Action.Drawer.Footer', - properties: { - close: { - title: 'Close', - 'x-component': 'Action', - 'x-component-props': { - type: 'default', - }, - 'x-use-component-props': 'useCloseActionProps', - }, - submit: { - title: 'Submit', - 'x-component': 'Action', - 'x-use-component-props': 'useSubmitActionProps', - }, - }, +const schema: ISchema = { + name: 'test', + type: 'void', + 'x-component': 'Action', + title: 'Open Drawer', + properties: { + drawer: { + type: 'void', + 'x-component': 'Action.Drawer', + title: 'Drawer Title', + 'x-decorator': 'FormV2', // This uses the `FormV2` component. + properties: { + username: { + // This is a form field. + type: 'string', + title: `Username`, + required: true, + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + footer: { + type: 'void', + 'x-component': 'Action.Drawer.Footer', + properties: { + close: { + title: 'Close', + 'x-component': 'Action', + 'x-component-props': { + type: 'default', }, + 'x-use-component-props': 'useCloseActionProps', + }, + submit: { + title: 'Submit', + 'x-component': 'Action', + 'x-use-component-props': 'useSubmitActionProps', }, }, }, }, }, }, - appOptions: { - scopes: { - useSubmitActionProps, - useCloseActionProps, - }, - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { test: { data: 'ok' }, - }, + } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/dynamic-props.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/dynamic-props.tsx index 3310dbb496..8dd7944b2f 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/dynamic-props.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/dynamic-props.tsx @@ -1,15 +1,9 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { Space, App as AntdApp } from 'antd'; -import { useAPIClient, ActionProps } from '@nocobase/client'; +import { App as AntdApp } from 'antd'; +import { ISchema, useAPIClient } from '@nocobase/client'; +import { SchemaComponent, Plugin, ActionProps } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const useCustomActionProps = (): ActionProps => { const api = useAPIClient(); @@ -25,53 +19,60 @@ const useCustomActionProps = (): ActionProps => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': Space, - properties: { - test1: { - type: 'void', - 'x-component': 'Action', - title: 'test1', - 'x-use-component-props': useCustomActionProps, // function type - }, - test2: { - type: 'void', - 'x-component': 'Action', - title: 'test2', - 'x-use-component-props': function useCustomActionProps(): ActionProps { - // inline function type - const api = useAPIClient(); - const { message } = AntdApp.useApp(); +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-component': 'Space', + properties: { + test0: { + type: 'void', + 'x-component': 'Action', + title: 'test2', + 'x-use-component-props': 'useCustomActionProps', // string type + }, + test1: { + type: 'void', + 'x-component': 'Action', + title: 'test1', + 'x-use-component-props': useCustomActionProps, // function type + }, + test2: { + type: 'void', + 'x-component': 'Action', + title: 'test2', + 'x-use-component-props': function useCustomActionProps(): ActionProps { + // inline function type + const api = useAPIClient(); + const { message } = AntdApp.useApp(); - return { - onClick: async () => { - const { data } = await api.request({ url: 'test' }); - if (data.data.result === 'ok') { - message.success('Success!'); - } - }, - }; - }, - }, - test3: { - type: 'void', - 'x-component': 'Action', - title: 'test2', - 'x-use-component-props': 'useCustomActionProps', // string type + return { + onClick: async () => { + const { data } = await api.request({ url: 'test' }); + if (data.data.result === 'ok') { + message.success('Success!'); + } + }, + }; }, }, }, - appOptions: { - scopes: { - useCustomActionProps, - }, - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { test: { data: { result: 'ok' } }, - }, + } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/demos/new-demos/schema-toolbar.tsx b/packages/core/client/src/schema-component/antd/action/demos/new-demos/schema-toolbar.tsx index 88825b5d7d..0d8abda36b 100644 --- a/packages/core/client/src/schema-component/antd/action/demos/new-demos/schema-toolbar.tsx +++ b/packages/core/client/src/schema-component/antd/action/demos/new-demos/schema-toolbar.tsx @@ -1,14 +1,5 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { SchemaSettings } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { SchemaComponent, Plugin, SchemaSettings } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; import React from 'react'; const myActionSettings = new SchemaSettings({ @@ -23,65 +14,77 @@ const myActionSettings = new SchemaSettings({ const MyToolbar = (props) => {props.title}; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'ActionBar', - 'x-component-props': { - layout: 'two-columns', +const schema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'ActionBar', + 'x-component-props': { + layout: 'two-columns', + }, + properties: { + a1: { + title: 'Action 1', + 'x-component': 'Action', + 'x-action': 'a1', + 'x-align': 'right', + 'x-settings': 'myActionSettings', }, - properties: { - a1: { - title: 'Action 1', - 'x-component': 'Action', - 'x-action': 'a1', - 'x-align': 'right', - 'x-settings': 'myActionSettings', - }, - a2: { - title: 'Action 2', - 'x-component': 'Action', - 'x-action': 'a2', - 'x-align': 'right', - 'x-settings': 'myActionSettings', - }, - a3: { - title: 'Action 3', - 'x-component': 'Action', - 'x-action': 'a1', - 'x-align': 'left', - 'x-settings': 'myActionSettings', - }, - a4: { - title: 'Action 4', - 'x-component': 'Action', - 'x-action': 'a2', - 'x-align': 'left', - 'x-settings': 'myActionSettings', - }, - a5: { - title: '', - 'x-component': 'Action', - 'x-action': 'a5', - 'x-align': 'left', - 'x-toolbar': 'MyToolbar', - 'x-toolbar-props': { - title: 'MyTitle', - }, + a2: { + title: 'Action 2', + 'x-component': 'Action', + 'x-action': 'a2', + 'x-align': 'right', + 'x-settings': 'myActionSettings', + }, + a3: { + title: 'Action 3', + 'x-component': 'Action', + 'x-action': 'a1', + 'x-align': 'left', + 'x-settings': 'myActionSettings', + }, + a4: { + title: 'Action 4', + 'x-component': 'Action', + 'x-action': 'a2', + 'x-align': 'left', + 'x-settings': 'myActionSettings', + }, + a5: { + title: '', + 'x-component': 'Action', + 'x-action': 'a5', + 'x-align': 'left', + 'x-toolbar': 'MyToolbar', + 'x-toolbar-props': { + title: 'MyTitle', }, }, }, }, }, - appOptions: { - schemaSettings: [myActionSettings], - components: { MyToolbar }, - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }); + } +} + +const app = mockApp({ + plugins: [DemoPlugin], designable: true, + schemaSettings: [myActionSettings], + apis: { + test: { data: { result: 'ok' } }, + }, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/action/index.en-US.md b/packages/core/client/src/schema-component/antd/action/index.en-US.md new file mode 100644 index 0000000000..8abb203602 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/action/index.en-US.md @@ -0,0 +1,206 @@ +# Action + +Combines buttons and various operations together, providing a unified way to handle actions. + +## Action + +The trigger for the action, by default using the `Button` component from ant-design, and provides context for subsequent pop-ups or drawers. + +```ts +export interface ActionProps extends ButtonProps { + /** + * button title + */ + title?: string; + + /** + * custom component, replace the default Button component + */ + component?: string | ComponentType; + + /** + * Dynamic rendering of the opened content in conjunction with `Action.Container`. + */ + openMode?: 'drawer' | 'modal' | 'page'; + /** + * The size of the pop-up window, only valid when `openMode: 'modal'` + */ + openSize?: 'small' | 'middle' | 'large'; + /** + * Customize the position of the pop-up window + */ + containerRefKey?: string; + + /** + * Whether to display the popover, only valid when `openMode: 'popover'` + */ + popover?: boolean; + + /** + * When the button is clicked, whether a pop-up confirmation is required + */ + confirm?: false | { + title: string; + content: string; + }; +} +``` + +### Basic Usage + +- `ButtonProp` +- title + + + +### Custom Component + +- component + + + +### Dynamic Props + +Here, the ability of `x-use-component-props` is used. For more information, please refer to [x-use-component-props](https://docs.nocobase.com/development/client/ui-schema/what-is-ui-schema#x-component-props-and-x-use-component-props). + + + +### Confirm + +- confirm + + + +## Action.Link + +Replace the `Button` component with an `a` tag. + + + +## Action.Drawer + +Used to pop up a drawer on the right side. + +```ts +interface ActionDrawer extends DrawerProps {} +``` + +### Basic Usage + +- `DrawerProps` + + + +### openSize + + + +### Footer + +The Footer can contain buttons such as Cancel or Submit. + +Its Schema `x-component` must be set to the `Action.Drawer.Footer` component. + + + +### With Form + + + +## Action.Modal + +```ts +interface ActionModal extends ModalProps {} +``` + +Its usage is similar to `Action.Drawer`, here is just one example. + + + +## Action.Popover + +Note that the `popover` property of Action must be set to `true`. + + + +## Action.Container + +When rendering content dynamically as needed, you can use `Action.Container` + Action `openMode` property to make dynamic decisions. + + + +## ActionBar + +Generally used for the top operation buttons of a section, it automatically handles layout and rendering of [schema-initializer](/core/ui-schema/schema-initializer). + +```ts +import { SpaceProps } from 'antd' + +interface ActionBarProps { + layout?: 'one-column' | 'two-columns'; + style?: CSSProperties; + className?: string; + spaceProps?: SpaceProps; +} +``` + +### one-column + +One-column layout, aligned to the left. + +The `x-action` in the Schema is the unique identifier for the button, which should not be duplicated with existing ones. It is used for searching and deleting in `ActionInitializer`. + + + +### two-columns + +Two-column layout, controlled by `x-align`. + + + +## ActionContext + +Encapsulated inside the `Action` component, used for passing context. + +```ts +export type OpenSize = 'small' | 'middle' | 'large'; +export interface ActionContextProps { + button?: React.JSX.Element; + visible?: boolean; + setVisible?: (v: boolean) => void; + openMode?: 'drawer' | 'modal' | 'page'; + snapshot?: boolean; + openSize?: OpenSize; + /** + * Customize the position of the pop-up window + */ + containerRefKey?: string; + formValueChanged?: boolean; + setFormValueChanged?: (v: boolean) => void; + fieldSchema?: Schema; + drawerProps?: DrawerProps; + modalProps?: ModalProps; + submitted?: boolean; + setSubmitted?: (v: boolean) => void; +} +``` + +Assuming that the Action component cannot meet the requirements, we can directly use the ActionContext component for customization. + + + +## ActionSchemaToolbar + +Used to render a single button with [SchemaToolbar](/core/ui-schema/schema-toolbar) and [SchemaSettings](/core/ui-schema/schema-settings). + + + +## Hooks + +### useActionContext() + +Get the `ActionContext` context. + +```ts +const { visible, setVisible, fieldSchema } = useActionContext(); +``` diff --git a/packages/core/client/src/schema-component/antd/association-select/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/association-select/demos/demo1.tsx index bc90b74845..49f9b27f7f 100644 --- a/packages/core/client/src/schema-component/antd/association-select/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/association-select/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { APIClientProvider, AssociationSelect, FormProvider, SchemaComponent } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/basic.tsx index 325dd0a444..4ca677f13d 100644 --- a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/basic.tsx @@ -1,40 +1,45 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'AssociationSelect', - 'x-component-props': { - service: { - resource: 'roles', // roles 表 - action: 'list', // 列表接口 - }, - fieldNames: { - label: 'title', // 显示的字段 - value: 'name', // 值字段 - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'AssociationSelect', + 'x-component-props': { + service: { + resource: 'roles', // roles 表 + action: 'list', // 列表接口 + }, + fieldNames: { + label: 'title', // 显示的字段 + value: 'name', // 值字段 }, }, }, }, - delayResponse: 500, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/multiple.tsx b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/multiple.tsx index 1b1183379c..c22c69b242 100644 --- a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/multiple.tsx +++ b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/multiple.tsx @@ -1,41 +1,46 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'array', // 数组类型 - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'AssociationSelect', - 'x-component-props': { - multiple: true, // 多选 - service: { - resource: 'roles', - action: 'list', - }, - fieldNames: { - label: 'title', - value: 'name', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'array', // 数组类型 + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'AssociationSelect', + 'x-component-props': { + multiple: true, // 多选 + service: { + resource: 'roles', + action: 'list', + }, + fieldNames: { + label: 'title', + value: 'name', }, }, }, }, - delayResponse: 500, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/read-pretty.tsx index b204781d7a..6880efd2d9 100644 --- a/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/association-select/demos/new-demos/read-pretty.tsx @@ -1,42 +1,47 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - default: 'admin', - 'x-decorator': 'FormItem', - 'x-component': 'AssociationSelect', - 'x-pattern': 'readPretty', - 'x-component-props': { - service: { - resource: 'roles', - action: 'list', - }, - fieldNames: { - label: 'title', - value: 'name', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + default: 'admin', + 'x-decorator': 'FormItem', + 'x-component': 'AssociationSelect', + 'x-pattern': 'readPretty', + 'x-component-props': { + service: { + resource: 'roles', + action: 'list', + }, + fieldNames: { + label: 'title', + value: 'name', }, }, }, }, - delayResponse: 500, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/association-select/index.en-US.md b/packages/core/client/src/schema-component/antd/association-select/index.en-US.md new file mode 100644 index 0000000000..e630787af4 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/association-select/index.en-US.md @@ -0,0 +1,24 @@ +# AssociationSelect + +Retrieve data from a table by specifying the table and field. + +```ts +type AssociationSelectProps

= RemoteSelectProps

& { + action?: string; + multiple?: boolean; +}; +``` + +## Basic Usage + + + +## Multiple Selection + +`type` needs to be changed to `array`, and the property needs to be added `multiple: true`. + + + +## Read Pretty + + diff --git a/packages/core/client/src/schema-component/antd/auto-complete/demos/basic.tsx b/packages/core/client/src/schema-component/antd/auto-complete/demos/basic.tsx index b662fac2cc..f6695c1d17 100644 --- a/packages/core/client/src/schema-component/antd/auto-complete/demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/auto-complete/demos/basic.tsx @@ -1,14 +1,10 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { useField } from '@formily/react'; -import { getAppComponent } from '@nocobase/test/web'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; +import { SchemaComponent, Plugin } from '@nocobase/client'; + const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat), @@ -26,22 +22,34 @@ function useAutoCompleteProps() { }; } -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'AutoComplete', - 'x-use-component-props': useAutoCompleteProps, - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'AutoComplete', + 'x-use-component-props': 'useAutoCompleteProps', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/auto-complete/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/auto-complete/demos/read-pretty.tsx index 01fb044454..f9345f7695 100644 --- a/packages/core/client/src/schema-component/antd/auto-complete/demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/auto-complete/demos/read-pretty.tsx @@ -1,31 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'boolean', - title: 'Test', - default: 'aaa', - 'x-decorator': 'FormItem', - 'x-component': 'AutoComplete', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'boolean', + title: 'Test', + default: 'aaa', + 'x-decorator': 'FormItem', + 'x-component': 'AutoComplete', }, }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/auto-complete/index.en-US.md b/packages/core/client/src/schema-component/antd/auto-complete/index.en-US.md new file mode 100644 index 0000000000..27396bfddf --- /dev/null +++ b/packages/core/client/src/schema-component/antd/auto-complete/index.en-US.md @@ -0,0 +1,20 @@ + +# AutoComplete + +AutoComplete input box. It is a wrapper component based on the ant-design [AutoComplete](https://ant.design/components/auto-complete) component. + +## Basic Usage + +```ts +type AutoCompleteProps = AntdAutoCompleteProps; +``` + + + +## Read Pretty + +```ts +type AutoCompleteReadPrettyProps = InputReadPrettyProps; +``` + + diff --git a/packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx index 7ebe2c3ab1..6ae0d5ab91 100644 --- a/packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/block-item/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { observer, useFieldSchema } from '@formily/react'; import { uid } from '@formily/shared'; diff --git a/packages/core/client/src/schema-component/antd/block-item/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/block-item/demos/new-demos/basic.tsx index f986b19fd6..a5af2d02a1 100644 --- a/packages/core/client/src/schema-component/antd/block-item/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/block-item/demos/new-demos/basic.tsx @@ -1,17 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { getAppComponent } from '@nocobase/test/web'; -import { DragHandler, SchemaSettings } from '@nocobase/client'; -import { useFieldSchema } from '@formily/react'; -import { observer } from '@formily/reactive-react'; import React from 'react'; +import { useFieldSchema, observer, ISchema } from '@formily/react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, DragHandler, SchemaSettings } from '@nocobase/client'; const simpleSettings = new SchemaSettings({ name: 'simpleSettings', @@ -39,39 +29,47 @@ const MyBlock = observer( { displayName: 'MyBlock' }, ); -const App = getAppComponent({ +const schema: ISchema = { + type: 'void', + name: 'test', + 'x-component': 'DndContext', + properties: { + block1: { + type: 'void', + 'x-decorator': 'BlockItem', + 'x-component': 'MyBlock', + 'x-settings': 'simpleSettings', + }, + block2: { + type: 'void', + 'x-decorator': 'BlockItem', + 'x-component': 'MyBlock', + 'x-settings': 'simpleSettings', + }, + block3: { + type: 'void', + 'x-decorator': 'BlockItem', + 'x-component': 'MyBlock', + 'x-settings': 'simpleSettings', + }, + }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.schemaSettingsManager.add(simpleSettings) + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ designable: true, - schema: { - type: 'void', - name: 'root', - 'x-component': 'DndContext', - properties: { - block1: { - type: 'void', - 'x-decorator': 'BlockItem', - 'x-component': 'MyBlock', - 'x-settings': 'simpleSettings', - }, - block2: { - type: 'void', - 'x-decorator': 'BlockItem', - 'x-component': 'MyBlock', - 'x-settings': 'simpleSettings', - }, - block3: { - type: 'void', - 'x-decorator': 'BlockItem', - 'x-component': 'MyBlock', - 'x-settings': 'simpleSettings', - }, - }, - }, - appOptions: { - schemaSettings: [simpleSettings], - components: { - MyBlock, - }, - }, + plugins: [DemoPlugin], + delayResponse: 500, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/block-item/index.en-US.md b/packages/core/client/src/schema-component/antd/block-item/index.en-US.md new file mode 100644 index 0000000000..79097a8713 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/block-item/index.en-US.md @@ -0,0 +1,22 @@ +# BlockItem + +A regular decorator component with no UI effects, usually used in `x-decorator`. + +It provides the following 2 capabilities: + +- Drag and drop functionality +- Rendering of [SchemaToolbar](/core/ui-schema/schema-toolbar) and [SchemaSettings](/core/ui-schema/schema-settings) + +[CardItem](/components/card-item) and [FormItem](/components/form-item) components are both implemented based on BlockItem and have the same capabilities mentioned above. + +```ts +interface BlockItemProps { + name?: string; + className?: string; + children?: React.ReactNode; +} +``` + +Note that the drag and drop functionality requires configuring the `DndContext` component. + + diff --git a/packages/core/client/src/schema-component/antd/card-item/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/card-item/demos/demo1.tsx index 44977bc5da..70784215fc 100644 --- a/packages/core/client/src/schema-component/antd/card-item/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/card-item/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { CardItem, FormProvider, SchemaComponent } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/basic.tsx index d1d62621d7..d281fc712a 100644 --- a/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/basic.tsx @@ -1,14 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { SchemaSettings } from '@nocobase/client'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, SchemaSettings, ISchema } from '@nocobase/client'; const simpleSettings = new SchemaSettings({ name: 'simpleSettings', @@ -20,48 +13,59 @@ const simpleSettings = new SchemaSettings({ ], }); -const App = getAppComponent({ - designable: true, - schema: { - type: 'void', - name: 'root', - 'x-component': 'DndContext', - properties: { - block1: { - type: 'void', - 'x-component': 'CardItem', - 'x-component-props': { - title: 'Block 1', - }, - 'x-settings': 'simpleSettings', - properties: { - hello: { - type: 'void', - 'x-component': 'div', - 'x-content': 'Hello Card!', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-component': 'DndContext', + properties: { + block1: { + type: 'void', + 'x-component': 'CardItem', + 'x-component-props': { + title: 'Block 1', + }, + 'x-settings': 'simpleSettings', + properties: { + hello: { + type: 'void', + 'x-component': 'div', + 'x-content': 'Hello Card!', }, }, - block2: { - type: 'void', - 'x-component': 'CardItem', - 'x-settings': 'simpleSettings', - 'x-component-props': { - title: 'Block 2', - }, - properties: { - hello: { - type: 'void', - 'x-component': 'div', - 'x-content': 'Hello Card!', - }, + }, + block2: { + type: 'void', + 'x-component': 'CardItem', + 'x-settings': 'simpleSettings', + 'x-component-props': { + title: 'Block 2', + }, + properties: { + hello: { + type: 'void', + 'x-component': 'div', + 'x-content': 'Hello Card!', }, }, }, }, - appOptions: { - schemaSettings: [simpleSettings], - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.schemaSettingsManager.add(simpleSettings) + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + designable: true, + plugins: [DemoPlugin], + delayResponse: 500, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/lazy-render.tsx b/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/lazy-render.tsx index 858063b324..4dec248f86 100644 --- a/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/lazy-render.tsx +++ b/packages/core/client/src/schema-component/antd/card-item/demos/new-demos/lazy-render.tsx @@ -1,14 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { SchemaSettings } from '@nocobase/client'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, SchemaSettings, ISchema } from '@nocobase/client'; const simpleSettings = new SchemaSettings({ name: 'simpleSettings', @@ -20,74 +13,85 @@ const simpleSettings = new SchemaSettings({ ], }); -const App = getAppComponent({ +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'DndContext', + 'x-component': 'div', + 'x-component-props': { + style: { + height: 300, + overflow: 'auto', + border: '1px solid #f0f0f0', + }, + }, + properties: { + block1: { + type: 'void', + 'x-component': 'CardItem', + 'x-component-props': { + title: 'Block 1', + }, + 'x-settings': 'simpleSettings', + properties: { + hello: { + type: 'void', + 'x-component': 'div', + 'x-content': 'Hello Card!', + }, + }, + }, + block2: { + type: 'void', + 'x-component': 'CardItem', + 'x-settings': 'simpleSettings', + 'x-component-props': { + title: 'Block 2', + }, + properties: { + hello: { + type: 'void', + 'x-component': 'div', + 'x-content': 'Hello Card!', + }, + }, + }, + block3: { + type: 'void', + 'x-component': 'CardItem', + 'x-settings': 'simpleSettings', + 'x-component-props': { + title: 'Block 3', + lazyRender: { + threshold: 1, + }, + }, + properties: { + hello: { + type: 'void', + 'x-component': 'div', + 'x-content': 'Hello Card!', + }, + }, + }, + }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.schemaSettingsManager.add(simpleSettings) + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ designable: true, - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'DndContext', - 'x-component': 'div', - 'x-component-props': { - style: { - height: 300, - overflow: 'auto', - border: '1px solid #f0f0f0', - }, - }, - properties: { - block1: { - type: 'void', - 'x-component': 'CardItem', - 'x-component-props': { - title: 'Block 1', - }, - 'x-settings': 'simpleSettings', - properties: { - hello: { - type: 'void', - 'x-component': 'div', - 'x-content': 'Hello Card!', - }, - }, - }, - block2: { - type: 'void', - 'x-component': 'CardItem', - 'x-settings': 'simpleSettings', - 'x-component-props': { - title: 'Block 2', - }, - properties: { - hello: { - type: 'void', - 'x-component': 'div', - 'x-content': 'Hello Card!', - }, - }, - }, - block3: { - type: 'void', - 'x-component': 'CardItem', - 'x-settings': 'simpleSettings', - 'x-component-props': { - title: 'Block 3', - lazyRender: { - threshold: 1, - }, - }, - properties: { - hello: { - type: 'void', - 'x-component': 'div', - 'x-content': 'Hello Card!', - }, - }, - }, - }, - }, - appOptions: { - schemaSettings: [simpleSettings], - }, + plugins: [DemoPlugin], + delayResponse: 500, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/card-item/index.en-US.md b/packages/core/client/src/schema-component/antd/card-item/index.en-US.md new file mode 100644 index 0000000000..4ffc985b25 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/card-item/index.en-US.md @@ -0,0 +1,27 @@ +# CardItem + +Card decorator. Its main functions are: + +- Drag and render [SchemaToolbar](/core/ui-schema/schema-toolbar) and [SchemaSettings](/core/ui-schema/schema-settings), inherited from [BlockItem](/components/block-item) +- Lazy rendering + +It is based on the ant-design [Card](https://ant.design/components/card-cn/) component, and lazy loading is implemented using [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer). + +```ts +interface CardItemProps extends CardProps { + name?: string; + /** + * lazy render options + * @see https://github.com/thebuilder/react-intersection-observer + */ + lazyRender?: IntersectionOptions; +} +``` + +## Basic + + + +## Custom lazy render + + diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/demo1.tsx index e5ebf07424..cf098391b5 100644 --- a/packages/core/client/src/schema-component/antd/cascader/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/cascader/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { Cascader, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/demo2.tsx index 4ec52d5151..03c9c2aaab 100644 --- a/packages/core/client/src/schema-component/antd/cascader/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/cascader/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { ArrayField } from '@formily/core'; diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/basic.tsx index c94673815d..c3ba27c45f 100644 --- a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/basic.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -44,22 +38,34 @@ const options = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - enum: options, - 'x-component': 'Cascader', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + enum: options, + 'x-component': 'Cascader', }, }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/changeOnSelectLast.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/changeOnSelectLast.tsx index fc2a6a6b83..b3e23cdb57 100644 --- a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/changeOnSelectLast.tsx +++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/changeOnSelectLast.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -44,25 +38,37 @@ const options = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - enum: options, - 'x-component': 'Cascader', - 'x-component-props': { - changeOnSelectLast: false, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + enum: options, + 'x-component': 'Cascader', + 'x-component-props': { + changeOnSelectLast: false, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/labelInValue.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/labelInValue.tsx index 928413a48e..71b7345825 100644 --- a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/labelInValue.tsx +++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/labelInValue.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -44,25 +38,37 @@ const options = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - enum: options, - 'x-component': 'Cascader', - 'x-component-props': { - labelInValue: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + enum: options, + 'x-component': 'Cascader', + 'x-component-props': { + labelInValue: true, }, }, }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/loadData.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/loadData.tsx index 4ce00de354..61c7c39857 100644 --- a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/loadData.tsx +++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/loadData.tsx @@ -1,15 +1,8 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { useField } from '@formily/react'; -import { getAppComponent } from '@nocobase/test/web'; -import React, { useState } from 'react'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; +import { ISchema, useField } from '@formily/react'; interface Option { value?: string | number | null; @@ -59,27 +52,34 @@ const useCustomCascaderProps = () => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Cascader', - 'x-use-component-props': 'useCustomCascaderProps', - }, - }, - }, - appOptions: { - scopes: { - useCustomCascaderProps, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Cascader', + 'x-use-component-props': 'useCustomCascaderProps', }, }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/read-pretty.tsx index eb1b70b3d7..82cf29ea0c 100644 --- a/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/cascader/demos/new-demos/read-pretty.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -44,24 +38,36 @@ const options = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - title: 'Test', - default: ['zhejiang', 'hangzhou', 'xihu'], - 'x-decorator': 'FormItem', - enum: options, - 'x-component': 'Cascader', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + title: 'Test', + default: ['zhejiang', 'hangzhou', 'xihu'], + 'x-decorator': 'FormItem', + enum: options, + 'x-component': 'Cascader', }, }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/cascader/index.en-US.md b/packages/core/client/src/schema-component/antd/cascader/index.en-US.md new file mode 100644 index 0000000000..97e67603fc --- /dev/null +++ b/packages/core/client/src/schema-component/antd/cascader/index.en-US.md @@ -0,0 +1,53 @@ +# Cascader + +Cascader is a cascading selector component based on the ant-design [Cascader](https://ant.design/components/cascader/) component. + +```ts +type CascaderProps = AntdCascaderProps & { + /** + * Whether to wrap the label of option into the value + */ + labelInValue?: boolean; + /** + * must select the last level + */ + changeOnSelectLast?: boolean; +} +``` + +## Basic Usage + + + +## Asynchronous Data Source + + + +## labelInValue + +If `labelInValue` is set to `true`, the selected data will be in the format `{ label: string, value: string }`, otherwise it will be in the format `string`. + + + +## changeOnSelectLast + +If `changeOnSelectLast` is set to `true`, the last level must be selected. If set to `false`, any level can be selected. + + + +## Read Pretty + +```ts +interface FieldNames { + label: string; + value: string; + children: string; +} + +export interface CascaderReadPrettyProps { + fieldNames?: FieldNames; + value?: any; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/checkbox.group.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/checkbox.group.tsx index bd6380935a..359afd78af 100644 --- a/packages/core/client/src/schema-component/antd/checkbox/demos/checkbox.group.tsx +++ b/packages/core/client/src/schema-component/antd/checkbox/demos/checkbox.group.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: 组 diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/checkbox.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/checkbox.tsx index ccf119e542..5447b7e947 100644 --- a/packages/core/client/src/schema-component/antd/checkbox/demos/checkbox.tsx +++ b/packages/core/client/src/schema-component/antd/checkbox/demos/checkbox.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: 勾选 diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/basic.tsx index a6073be964..82b079b7fb 100644 --- a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/basic.tsx @@ -1,29 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import { + SchemaComponent, + ISchema, + Plugin, +} from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Checkbox', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox', }, }, -}); +}; -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group-read-pretty.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group-read-pretty.tsx index 144b90877f..7768360e72 100644 --- a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group-read-pretty.tsx @@ -1,13 +1,9 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; + + +import { Plugin, SchemaComponent, ISchema } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const options = [ { @@ -27,40 +23,50 @@ const options = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test1: { - type: 'array', - default: [1, 2], - title: 'Test1', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Checkbox.Group', +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test1: { + type: 'array', + default: [1, 2], + title: 'Test1', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox.Group', + }, + test2: { + type: 'array', + default: [1, 2, 3], + title: 'Test2', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox.Group', + 'x-decorator-props': { + style: { + width: 100, + }, }, - test2: { - type: 'array', - default: [1, 2, 3], - title: 'Test2', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Checkbox.Group', - 'x-decorator-props': { - style: { - width: 100, - }, - }, - 'x-component-props': { - ellipsis: true, - }, + 'x-component-props': { + ellipsis: true, }, }, }, -}); +}; -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group.tsx index c6c90c02e0..a761578eec 100644 --- a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group.tsx +++ b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/group.tsx @@ -1,13 +1,9 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; + + +import { Plugin, SchemaComponent, ISchema } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const options = [ { @@ -22,22 +18,33 @@ const options = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'array', - title: 'Test', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Checkbox.Group', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'array', + title: 'Test', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox.Group', }, }, -}); +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); -export default App; diff --git a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/read-pretty.tsx index 5003c6138f..ff842db7e3 100644 --- a/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/checkbox/demos/new-demos/read-pretty.tsx @@ -1,48 +1,51 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ +import { Plugin, SchemaComponent, ISchema } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -import { getAppComponent } from '@nocobase/test/web'; - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'boolean', - default: true, - title: 'Test1', - 'x-decorator': 'FormItem', - 'x-component': 'Checkbox', - }, - test2: { - type: 'boolean', - default: false, - title: 'Test2', - 'x-decorator': 'FormItem', - 'x-component': 'Checkbox', - }, - test3: { - type: 'boolean', - default: false, - title: 'Test3', - 'x-decorator': 'FormItem', - 'x-component': 'Checkbox', - 'x-component-props': { - showUnchecked: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'boolean', + default: true, + title: 'Test1', + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox', + }, + test2: { + type: 'boolean', + default: false, + title: 'Test2', + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox', + }, + test3: { + type: 'boolean', + default: false, + title: 'Test3', + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox', + 'x-component-props': { + showUnchecked: true, }, }, }, -}); +}; -export default App; +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ plugins: [DemoPlugin] }); + +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/checkbox/index.en-US.md b/packages/core/client/src/schema-component/antd/checkbox/index.en-US.md new file mode 100644 index 0000000000..8e3a27f5f4 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/checkbox/index.en-US.md @@ -0,0 +1,45 @@ +# Checkbox + +Checkbox, which is a wrapper component based on the ant-design [Checkbox](https://ant.design/components/checkbox/) component. + +## Basic Usage + +```ts +type CheckboxProps = AntdCheckboxProps; +``` + + + +## Read Pretty + +```ts +interface CheckboxReadPrettyProps { + showUnchecked?: boolean; + value?: boolean; +} +``` + +If the value is `false`, by default, the content is not displayed. You can use the `showUnchecked` property to display the unchecked checkbox. + + + +## Checkbox Group + +```ts +type CheckboxGroupProps = CheckboxGroupProps; +``` + +Note that the `type` property of the schema is `array`. + + + +## Checkbox Group Read Pretty + +```ts +export interface CheckboxGroupReadPrettyProps { + value?: any[]; + ellipsis?: boolean; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/collection-select/demos/basic.tsx b/packages/core/client/src/schema-component/antd/collection-select/demos/basic.tsx index ef00dd6882..15af96fe7b 100644 --- a/packages/core/client/src/schema-component/antd/collection-select/demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/collection-select/demos/basic.tsx @@ -1,29 +1,35 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'CollectionSelect', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'CollectionSelect', }, }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/collection-select/demos/multiple.tsx b/packages/core/client/src/schema-component/antd/collection-select/demos/multiple.tsx index 6eeaecae73..2b484b8eb2 100644 --- a/packages/core/client/src/schema-component/antd/collection-select/demos/multiple.tsx +++ b/packages/core/client/src/schema-component/antd/collection-select/demos/multiple.tsx @@ -1,32 +1,38 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'array', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'CollectionSelect', - 'x-component-props': { - mode: 'multiple', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'array', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'CollectionSelect', + 'x-component-props': { + mode: 'multiple', }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/collection-select/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/collection-select/demos/read-pretty.tsx index 3fda2bd5c4..712d69724a 100644 --- a/packages/core/client/src/schema-component/antd/collection-select/demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/collection-select/demos/read-pretty.tsx @@ -1,31 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-component': 'ShowFormData', - 'x-decorator': 'FormV2', - 'x-read-pretty': true, - properties: { - test: { - type: 'string', - default: 'users', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'CollectionSelect', - }, +const schema = { + type: 'void', + name: 'root', + 'x-component': 'ShowFormData', + 'x-decorator': 'FormV2', + 'x-read-pretty': true, + properties: { + test: { + type: 'string', + default: 'users', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'CollectionSelect', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/collection-select/index.en-US.md b/packages/core/client/src/schema-component/antd/collection-select/index.en-US.md new file mode 100644 index 0000000000..605ac491e4 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/collection-select/index.en-US.md @@ -0,0 +1,24 @@ +# CollectionSelect + +Used to select a data table from the current data source. + +```ts +type CollectionSelectProps = SelectProps & { + filter?: (item: any, index: number, array: any[]) => boolean; + isTableOid?: boolean; +}; +``` + +## Basic Usage + + + +## Multiple Selection + +`type` needs to be changed to `array`, and the property needs to be added `mode: 'multiple'`. + + + +## Read Pretty + + diff --git a/packages/core/client/src/schema-component/antd/color-picker/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/color-picker/demos/demo1.tsx index 8ab7b4dcef..68cbf8f2f4 100644 --- a/packages/core/client/src/schema-component/antd/color-picker/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/color-picker/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: ColorPicker diff --git a/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx index 8d1c8b6c76..231c928788 100644 --- a/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx @@ -1,29 +1,35 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'ColorPicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'ColorPicker', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx index b959651146..25dcdd5d7b 100644 --- a/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx @@ -1,31 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - default: '#8BBB11', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'ColorPicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + default: '#8BBB11', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'ColorPicker', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/color-picker/index.en-US.md b/packages/core/client/src/schema-component/antd/color-picker/index.en-US.md new file mode 100644 index 0000000000..fd5ce32bfc --- /dev/null +++ b/packages/core/client/src/schema-component/antd/color-picker/index.en-US.md @@ -0,0 +1,17 @@ +# ColorPicker + +ColorPicker is a color picker component that is wrapped based on the ant-design [ColorPicker](https://ant.design/components/color-picker/) component. + +```ts +interface ColorPickerProps extends Omit { + onChange?: (color: string) => void; +} +``` + +## Basic Usage + + + +## Read Pretty + + diff --git a/packages/core/client/src/schema-component/antd/color-select/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/color-select/demos/demo1.tsx index 780510fd48..c1a294e192 100644 --- a/packages/core/client/src/schema-component/antd/color-select/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/color-select/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: 勾选 diff --git a/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/basic.tsx index d3b97c3c37..83c33cae84 100644 --- a/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/basic.tsx @@ -1,29 +1,35 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'ColorSelect', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'ColorSelect', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/read-pretty.tsx index 9d2f158e76..47193d8015 100644 --- a/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/color-select/demos/new-demos/read-pretty.tsx @@ -1,31 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - default: 'red', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'ColorSelect', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + default: 'red', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'ColorSelect', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/color-select/index.en-US.md b/packages/core/client/src/schema-component/antd/color-select/index.en-US.md new file mode 100644 index 0000000000..44fcbbd222 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/color-select/index.en-US.md @@ -0,0 +1,22 @@ +# ColorSelect + +Color dropdown selector, which is a wrapper for the ant-design [Select](https://ant.design/components/select/) component. + +## Basic Usage + +```ts +type ColorSelectProps = ColorSelectProps; +``` + + + +## Read Pretty + +```ts +interface ColorSelectReadPrettyProps { + value?: string; +} +``` + + + diff --git a/packages/core/client/src/schema-component/antd/cron/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/cron/demos/demo1.tsx index f9fe35c4c3..29e311e017 100644 --- a/packages/core/client/src/schema-component/antd/cron/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/cron/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { Cron, FormProvider, SchemaComponent } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/cron/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/cron/demos/demo2.tsx index 6c311bcacb..ff779ade1c 100644 --- a/packages/core/client/src/schema-component/antd/cron/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/cron/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { CronSet, FormProvider, SchemaComponent } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-basic.tsx b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-basic.tsx index 0c643ea2d0..33b653e049 100644 --- a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-basic.tsx +++ b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-basic.tsx @@ -1,29 +1,35 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Cron', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Cron', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-read-pretty.tsx b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-read-pretty.tsx index 5f09cec2b8..dffdbd6ed5 100644 --- a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cron-read-pretty.tsx @@ -1,31 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - default: '13 6 11 * *', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Cron', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + default: '13 6 11 * *', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Cron', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-basic.tsx b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-basic.tsx index 0ed7285e87..ff22f297f7 100644 --- a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-basic.tsx +++ b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-basic.tsx @@ -1,49 +1,55 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'CronSet', - 'x-component-props': { - options: [ - { - label: '{{t("Daily")}}', - value: '0 0 0 * * ?', - }, - { - label: '{{t("Weekly")}}', - value: 'every_week', - }, - { - label: '{{t("Monthly")}}', - value: 'every_month', - }, - { - label: '{{t("Yearly")}}', - value: 'every_year', - }, - ], - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'CronSet', + 'x-component-props': { + options: [ + { + label: '{{t("Daily")}}', + value: '0 0 0 * * ?', + }, + { + label: '{{t("Weekly")}}', + value: 'every_week', + }, + { + label: '{{t("Monthly")}}', + value: 'every_month', + }, + { + label: '{{t("Yearly")}}', + value: 'every_year', + }, + ], }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-read-pretty.tsx b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-read-pretty.tsx index 82ac2b07b0..120c5203c1 100644 --- a/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/cron/demos/new-demos/cronset-read-pretty.tsx @@ -1,43 +1,50 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - default: '0 0 0 * * ?', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'CronSet', - 'x-component-props': { - options: [ - { - label: '{{t("Daily")}}', - value: '0 0 0 * * ?', - }, - { - label: '{{t("Weekly")}}', - value: '* * * * * ?', - }, - ], - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + default: '0 0 0 * * ?', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'CronSet', + 'x-component-props': { + options: [ + { + label: '{{t("Daily")}}', + value: '0 0 0 * * ?', + }, + { + label: '{{t("Weekly")}}', + value: '* * * * * ?', + }, + ], }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + diff --git a/packages/core/client/src/schema-component/antd/cron/index.en-US.md b/packages/core/client/src/schema-component/antd/cron/index.en-US.md new file mode 100644 index 0000000000..40345abffd --- /dev/null +++ b/packages/core/client/src/schema-component/antd/cron/index.en-US.md @@ -0,0 +1,53 @@ + + +# Cron + +A cron expression component based on [react-js-cron](https://github.com/xrutayisire/react-js-cron). + +## Cron + +## Basic Usage + +```ts +import { CronProps as ReactJsCronProps } from 'react-js-cron'; + +interface CronProps extends Omit { + onChange: (value: string) => void +} +``` + + + +## Read Pretty + +```ts +interface CronReadPrettyProps { + value?: string; +} +``` + + + +## CronSet + +## Basic Usage + +```ts +interface CronSetProps extends SelectProps { + onChange: (v: string) => void; +} +``` + + + +## Read Pretty + +```ts +interface CronReadPrettyProps { + value?: string; + options?: SelectProps['options']; +} +``` + + + diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo1.tsx index 75b41fcbfe..db937d7c6e 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo10.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo10.tsx index 0704bb7632..81309fc9d7 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo10.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo10.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo11.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo11.tsx index 955051081d..4855711657 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo11.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo11.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker.RangePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo2.tsx index 87922d5c3f..2a3d446cde 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker (GMT) diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo3.tsx index 2d982ffa05..63597b8c4a 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo4.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo4.tsx index 23bdafc6e1..af85b61af5 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo4.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo4.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker.RangePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo5.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo5.tsx index 659374d5c0..5b37530519 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo5.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo5.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker.RangePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo6.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo6.tsx index 1fdcf0b00d..db7df240bf 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo6.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo6.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker.RangePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo7.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo7.tsx index 19cedb8001..e3de179d0b 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo7.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo7.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo8.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo8.tsx index 0704bb7632..81309fc9d7 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo8.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo8.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo9.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo9.tsx index 19cedb8001..e3de179d0b 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo9.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/demo9.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: DatePicker diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-basic.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-basic.tsx index ad43773d42..8cf36ff5a3 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-basic.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-basic.tsx @@ -1,29 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-format.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-format.tsx index b4340b5592..a50d0937ac 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-format.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-format.tsx @@ -1,33 +1,41 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - default: '2024-01-01 10:10:10', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - format: 'YYYY/MM/DD', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + default: '2024-01-01 10:10:10', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + format: 'YYYY/MM/DD', }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt-utc.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt-utc.tsx index 7b74d841ef..14e5fd288d 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt-utc.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt-utc.tsx @@ -1,46 +1,54 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test1: { - type: 'string', - title: 'Test', - default: '2024-01-01 10:10:10', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - utc: true, - gmt: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test1: { + type: 'string', + title: 'Test', + default: '2024-01-01 10:10:10', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + utc: true, + gmt: true, }, - test2: { - type: 'string', - title: 'Test', - default: '2024-01-01 10:10:10', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - showTime: true, - utc: true, - gmt: true, - }, + }, + test2: { + type: 'string', + title: 'Test', + default: '2024-01-01 10:10:10', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + showTime: true, + utc: true, + gmt: true, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt.tsx index fb3664673b..8d40f411af 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-gmt.tsx @@ -1,44 +1,52 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test1: { - type: 'string', - default: '2024-01-01 10:10:10', - title: 'Test1', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - gmt: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test1: { + type: 'string', + default: '2024-01-01 10:10:10', + title: 'Test1', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + gmt: true, }, - test2: { - type: 'string', - default: '2024-01-01 10:10:10', - title: 'Test2', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - showTime: true, - gmt: true, - }, + }, + test2: { + type: 'string', + default: '2024-01-01 10:10:10', + title: 'Test2', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + showTime: true, + gmt: true, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-read-pretty.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-read-pretty.tsx index 0b42951aeb..96d34f700b 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-read-pretty.tsx @@ -1,94 +1,101 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test1: { - type: 'string', - default: '2024-01-01 10:10:10', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test1: { + type: 'string', + default: '2024-01-01 10:10:10', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + }, + test2: { + type: 'string', + default: '2024-01-01 10:10:10', + title: 'Test(format)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + format: 'YYYY/MM/DD', }, - test2: { - type: 'string', - default: '2024-01-01 10:10:10', - title: 'Test(format)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - format: 'YYYY/MM/DD', - }, + }, + test21: { + type: 'string', + default: '2024-01-01 10:10:10', + title: 'Test(dateFormat)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + dateFormat: 'YYYY/MM/DD', }, - test21: { - type: 'string', - default: '2024-01-01 10:10:10', - title: 'Test(dateFormat)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - dateFormat: 'YYYY/MM/DD', - }, + }, + // test22: { + // type: 'string', + // default: '2024-01-01 10:10:10', + // title: 'Test(timeFormat)', + // 'x-decorator': 'FormItem', + // 'x-component': 'DatePicker', + // 'x-component-props': { + // timeFormat: 'HH/mm/ss', + // showTime: true, + // }, + // }, + test3: { + type: 'string', + default: '2024-01-01 10:10:10', + title: 'Test(showTime)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + showTime: true, }, - // test22: { - // type: 'string', - // default: '2024-01-01 10:10:10', - // title: 'Test(timeFormat)', - // 'x-decorator': 'FormItem', - // 'x-component': 'DatePicker', - // 'x-component-props': { - // timeFormat: 'HH/mm/ss', - // showTime: true, - // }, - // }, - test3: { - type: 'string', - default: '2024-01-01 10:10:10', - title: 'Test(showTime)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - showTime: true, - }, + }, + test4: { + type: 'string', + default: '2024-01-01 10:10:10', + title: 'Test(GMT)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + showTime: true, + gmt: true, }, - test4: { - type: 'string', - default: '2024-01-01 10:10:10', - title: 'Test(GMT)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - showTime: true, - gmt: true, - }, - }, - test5: { - type: 'string', - default: '2024-01-01 10:10:10', - title: 'Test(UTC)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - showTime: true, - utc: true, - }, + }, + test5: { + type: 'string', + default: '2024-01-01 10:10:10', + title: 'Test(UTC)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + showTime: true, + utc: true, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-show-time.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-show-time.tsx index 63b8385a94..3bfe57ddde 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-show-time.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-show-time.tsx @@ -1,32 +1,38 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - showTime: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + showTime: true, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-utc.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-utc.tsx index 23d9bdf73d..9703ed757d 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-utc.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/date-utc.tsx @@ -1,44 +1,50 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test1: { - type: 'string', - title: 'Test', - default: '2024-01-01 10:10:10', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - utc: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test1: { + type: 'string', + title: 'Test', + default: '2024-01-01 10:10:10', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + utc: true, }, - test2: { - type: 'string', - title: 'Test', - default: '2024-01-01 10:10:10', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker', - 'x-component-props': { - utc: true, - showTime: true, - }, + }, + test2: { + type: 'string', + title: 'Test', + default: '2024-01-01 10:10:10', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker', + 'x-component-props': { + utc: true, + showTime: true, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-basic.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-basic.tsx index 49665e7e41..175802da29 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-basic.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-basic.tsx @@ -1,29 +1,35 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-format.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-format.tsx index 15adc947a4..19d9b7cb99 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-format.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-format.tsx @@ -1,33 +1,39 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - format: 'YYYY/MM/DD HH:mm:ss', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + format: 'YYYY/MM/DD HH:mm:ss', }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt-utc.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt-utc.tsx index 50c27f63f5..d35e691582 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt-utc.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt-utc.tsx @@ -1,46 +1,52 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test1: { - type: 'string', - title: 'Test', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - utc: true, - gmt: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test1: { + type: 'string', + title: 'Test', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + utc: true, + gmt: true, }, - test2: { - type: 'string', - title: 'Test', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - showTime: true, - utc: true, - gmt: true, - }, + }, + test2: { + type: 'string', + title: 'Test', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + showTime: true, + utc: true, + gmt: true, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt.tsx index ddf84dfd2d..7daa12c6d5 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-gmt.tsx @@ -1,44 +1,50 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test1: { - type: 'string', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - title: 'Test1', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - gmt: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test1: { + type: 'string', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + title: 'Test1', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + gmt: true, }, - test2: { - type: 'string', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - title: 'Test2', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - showTime: true, - gmt: true, - }, + }, + test2: { + type: 'string', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + title: 'Test2', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + showTime: true, + gmt: true, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-read-pretty.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-read-pretty.tsx index b6a2cc1d11..0e954f1e13 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-read-pretty.tsx @@ -1,83 +1,89 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test1: { - type: 'string', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - title: 'Test1', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test1: { + type: 'string', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + title: 'Test1', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + }, + test2: { + type: 'string', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + title: 'Test(format)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + format: 'YYYY/MM/DD', }, - test2: { - type: 'string', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - title: 'Test(format)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - format: 'YYYY/MM/DD', - }, + }, + test3: { + type: 'string', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + title: 'Test(dateFormat)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + dateFormat: 'YYYY/MM/DD', }, - test3: { - type: 'string', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - title: 'Test(dateFormat)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - dateFormat: 'YYYY/MM/DD', - }, + }, + test4: { + type: 'string', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + title: 'Test(showTime)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + showTime: true, }, - test4: { - type: 'string', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - title: 'Test(showTime)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - showTime: true, - }, + }, + test5: { + type: 'string', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + title: 'Test(GMT)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + showTime: true, + gmt: true, }, - test5: { - type: 'string', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - title: 'Test(GMT)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - showTime: true, - gmt: true, - }, - }, - test6: { - type: 'string', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - title: 'Test(UTC)', - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - showTime: true, - utc: true, - }, + }, + test6: { + type: 'string', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + title: 'Test(UTC)', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + showTime: true, + utc: true, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-utc.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-utc.tsx index 9cfa69514e..87c76957ac 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-utc.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/demos/new-demos/range-utc.tsx @@ -1,44 +1,50 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test1: { - type: 'string', - title: 'Test', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - utc: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test1: { + type: 'string', + title: 'Test', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + utc: true, }, - test2: { - type: 'string', - title: 'Test', - default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - utc: true, - showTime: true, - }, + }, + test2: { + type: 'string', + title: 'Test', + default: ['2024-01-01 10:10:10', '2024-01-04 10:10:10'], + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-component-props': { + utc: true, + showTime: true, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/date-picker/index.en-US.md b/packages/core/client/src/schema-component/antd/date-picker/index.en-US.md new file mode 100644 index 0000000000..260322813c --- /dev/null +++ b/packages/core/client/src/schema-component/antd/date-picker/index.en-US.md @@ -0,0 +1,99 @@ +# DatePicker + +Cascader selector, which is a wrapper for the ant-design [DatePicker](https://ant.design/components/date-picker/) component. + +## DatePicker + +```ts +type DatePickerProps = AntdDatePickerProps +``` + +### Basic Usage + + + +### Format + + + +### Show Time Picker + + + +### Read Pretty + +```ts +interface GetDefaultFormatProps { + format?: string; + dateFormat?: string; + timeFormat?: string; + picker?: 'year' | 'month' | 'week' | 'quarter'; + showTime?: boolean; +} + +interface Str2momentOptions { + gmt?: boolean; + picker?: 'year' | 'month' | 'week' | 'quarter'; + utcOffset?: number; + utc?: boolean; +} + +interface ReadPrettyDatePickerProps extends Str2momentOptions, GetDefaultFormatProps { + value?: Str2momentValue; + className?: string; + prefixCls?: string; +} +``` + + + + + + + + + +## RangePicker + +```ts +type DatePickerProps = AntdRangePickerProps +``` + +### Basic Usage + + + +### Format + + + +### Read Pretty + +```ts +interface DateRangePickerReadPrettyProps extends Str2momentOptions, GetDefaultFormatProps { + value?: Str2momentValue; + className?: string; + prefixCls?: string; + style?: React.CSSProperties; +} +``` + + + + + + + + diff --git a/packages/core/client/src/schema-component/antd/details/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/details/demos/demo1.tsx index 46e58e2c22..d1cf700871 100644 --- a/packages/core/client/src/schema-component/antd/details/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/details/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { Details, FormProvider, Input, SchemaComponent } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/details/demos/new-demos/list.tsx b/packages/core/client/src/schema-component/antd/details/demos/new-demos/list.tsx index 64a36a92a8..0cabebeee4 100644 --- a/packages/core/client/src/schema-component/antd/details/demos/new-demos/list.tsx +++ b/packages/core/client/src/schema-component/antd/details/demos/new-demos/list.tsx @@ -1,73 +1,79 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { DetailsBlockProvider, + ISchema, useDetailsPaginationProps, useDetailsWithPaginationDecoratorProps, useDetailsWithPaginationProps, } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'DetailsBlockProvider', - 'x-use-decorator-props': 'useDetailsWithPaginationDecoratorProps', - 'x-decorator-props': { - collection: 'roles', - action: 'list', - params: { - pageSize: 1, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'DetailsBlockProvider', + 'x-use-decorator-props': 'useDetailsWithPaginationDecoratorProps', + 'x-decorator-props': { + collection: 'roles', + action: 'list', + params: { + pageSize: 1, }, - 'x-component': 'CardItem', - properties: { - details: { - type: 'void', - 'x-pattern': 'readPretty', - 'x-component': 'Details', - 'x-use-component-props': 'useDetailsWithPaginationProps', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 1, - }, - title: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 2, - }, - pagination: { - 'x-component': 'Pagination', - 'x-read-pretty': false, - 'x-use-component-props': 'useDetailsPaginationProps', - 'x-index': 3, - }, + }, + 'x-component': 'CardItem', + properties: { + details: { + type: 'void', + 'x-pattern': 'readPretty', + 'x-component': 'Details', + 'x-use-component-props': 'useDetailsWithPaginationProps', + properties: { + name: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 1, + }, + title: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 2, + }, + pagination: { + 'x-component': 'Pagination', + 'x-read-pretty': false, + 'x-use-component-props': 'useDetailsPaginationProps', + 'x-index': 3, }, }, }, }, - appOptions: { - components: { - DetailsBlockProvider, - }, - scopes: { +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { DetailsBlockProvider } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/details/demos/new-demos/single.tsx b/packages/core/client/src/schema-component/antd/details/demos/new-demos/single.tsx index a6904c623e..999ca2b949 100644 --- a/packages/core/client/src/schema-component/antd/details/demos/new-demos/single.tsx +++ b/packages/core/client/src/schema-component/antd/details/demos/new-demos/single.tsx @@ -1,65 +1,71 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { DetailsBlockProvider, + ISchema, useDetailsPaginationProps, useDetailsWithPaginationDecoratorProps, useDetailsWithPaginationProps, } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'DetailsBlockProvider', - 'x-use-decorator-props': 'useDetailsWithPaginationDecoratorProps', - 'x-decorator-props': { - collection: 'roles', - action: 'get', - filterByTK: 1, - }, - 'x-component': 'CardItem', - properties: { - details: { - type: 'void', - 'x-pattern': 'readPretty', - 'x-component': 'Details', - 'x-use-component-props': 'useDetailsWithPaginationProps', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 1, - }, - title: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 2, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'DetailsBlockProvider', + 'x-use-decorator-props': 'useDetailsWithPaginationDecoratorProps', + 'x-decorator-props': { + collection: 'roles', + action: 'get', + filterByTK: 1, + }, + 'x-component': 'CardItem', + properties: { + details: { + type: 'void', + 'x-pattern': 'readPretty', + 'x-component': 'Details', + 'x-use-component-props': 'useDetailsWithPaginationProps', + properties: { + name: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 1, + }, + title: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 2, }, }, }, }, - appOptions: { - components: { - DetailsBlockProvider, - }, - scopes: { +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { DetailsBlockProvider } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/details/index.en-US.md b/packages/core/client/src/schema-component/antd/details/index.en-US.md new file mode 100644 index 0000000000..4f69d03930 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/details/index.en-US.md @@ -0,0 +1,27 @@ + + +# Details + +Form details block. + +Used to display detailed information of a form. + +```ts +import { FormProps } from '@nocobase/client'; + +type DetailsProps = FormProps; +``` + +It needs to be used in conjunction with `DetailsBlockProvider`. `DetailsBlockProvider` is a secondary encapsulation of `DataBlockProvider`, and its properties can refer to [DataBlockProvider](/core/data-block/data-block-provider#property-details). + +For more configuration options regarding Form, please refer to [Form](/components/form). + +Please note that the Schema where the `Details` component is located needs to be set with `'x-pattern': 'readPretty'`. + +## Single Form Data + + + +## List Form Data + + diff --git a/packages/core/client/src/schema-component/antd/error-fallback/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/error-fallback/demos/demo1.tsx index d1b1fc2c98..7297022a26 100644 --- a/packages/core/client/src/schema-component/antd/error-fallback/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/error-fallback/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { ErrorBoundary } from 'react-error-boundary'; diff --git a/packages/core/client/src/schema-component/antd/error-fallback/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/error-fallback/demos/new-demos/basic.tsx index be814efd1c..ba731c8e7a 100644 --- a/packages/core/client/src/schema-component/antd/error-fallback/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/error-fallback/demos/new-demos/basic.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { ErrorBoundary } from 'react-error-boundary'; diff --git a/packages/core/client/src/schema-component/antd/error-fallback/index.en-US.md b/packages/core/client/src/schema-component/antd/error-fallback/index.en-US.md new file mode 100644 index 0000000000..3979c05a48 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/error-fallback/index.en-US.md @@ -0,0 +1,7 @@ +# ErrorFallback + +The component displayed when an error occurs during rendering. + +其基于 [react-error-boundary](https://github.com/bvaughn/react-error-boundary) 库。 + + diff --git a/packages/core/client/src/schema-component/antd/filter/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/filter/demos/demo2.tsx index 22c311a6a5..0a02765722 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { AntdSchemaComponentProvider, Filter, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/schema-component/antd/filter/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/filter/demos/demo3.tsx index 5158792afc..42b3e0d12a 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema, useForm } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/filter/demos/demo4.tsx b/packages/core/client/src/schema-component/antd/filter/demos/demo4.tsx index f6f4722d31..1c5928f9f6 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/demo4.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/demo4.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/filter/demos/demo5.tsx b/packages/core/client/src/schema-component/antd/filter/demos/demo5.tsx index b3e8d84592..1befe4c567 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/demo5.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/demo5.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/json-schema'; import { Filter, FilterAction, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx b/packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx index c7aea0d8cc..625108d3ef 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/demo6.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { AntdSchemaComponentProvider, diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/basic.tsx index f1f4a31be2..217c8d999c 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/basic.tsx @@ -1,17 +1,11 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; -import { useField, observer } from '@formily/react'; +import { useField, observer, ISchema } from '@formily/react'; import { FilterActionProps, useRequest } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; import { filterOptions } from './options'; @@ -45,33 +39,41 @@ const useFilterActionProps = (): FilterActionProps => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - name: 'filter', - type: 'object', - enum: filterOptions, - title: 'Filter', - 'x-decorator': 'ShowFilterData', - 'x-component': 'Filter.Action', - 'x-use-component-props': useFilterActionProps, - }, - }, - }, - appOptions: { - components: { - ShowFilterData, - }, - scopes: { - useFilterActionProps, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + name: 'filter', + type: 'object', + enum: filterOptions, + title: 'Filter', + 'x-decorator': 'ShowFilterData', + 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { test: { data: { data: 'ok' } }, }, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/collection-fields.tsx b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/collection-fields.tsx index 30f3ae1947..9e82998a06 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/collection-fields.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/collection-fields.tsx @@ -1,21 +1,16 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FilterActionProps, + ISchema, useCollection, useDataBlockRequest, useFilterFieldOptions, useFilterFieldProps, } from '@nocobase/client'; - -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; const useFilterActionProps = (): FilterActionProps => { const service = useDataBlockRequest(); @@ -28,34 +23,45 @@ const useFilterActionProps = (): FilterActionProps => { }); }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'DataBlockProvider', - 'x-decorator-props': { - collection: 'users', - action: 'list', - }, - properties: { - test: { - name: 'filter', - type: 'object', - title: 'Filter', - 'x-component': 'Filter.Action', - 'x-use-component-props': useFilterActionProps, - }, - }, - }, - appOptions: { - components: {}, - scopes: { - useFilterActionProps, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'DataBlockProvider', + 'x-decorator-props': { + collection: 'users', + action: 'list', + }, + properties: { + test: { + name: 'filter', + type: 'object', + title: 'Filter', + 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { test: { data: { data: 'ok' } }, }, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/default-value.tsx b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/default-value.tsx index 86c3dab41c..1581be7b9e 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/default-value.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/default-value.tsx @@ -1,17 +1,11 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { useField, observer } from '@formily/react'; -import { FilterActionProps, useRequest } from '@nocobase/client'; +import { FilterActionProps, ISchema, useRequest } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; import { filterOptions } from './options'; @@ -60,34 +54,44 @@ const defaultValue = { ], }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - name: 'filter', - type: 'object', - enum: filterOptions, - title: 'Filter', - 'x-decorator': 'ShowFilterData', - 'x-component': 'Filter.Action', - default: defaultValue, - 'x-use-component-props': useFilterActionProps, - }, - }, - }, - appOptions: { - components: { - ShowFilterData, - }, - scopes: { - useFilterActionProps, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + name: 'filter', + type: 'object', + enum: filterOptions, + title: 'Filter', + 'x-decorator': 'ShowFilterData', + 'x-component': 'Filter.Action', + default: defaultValue, + 'x-use-component-props': 'useFilterActionProps', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { test: { data: { data: 'ok' } }, }, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/options.ts b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/options.ts index e0a906ea47..7658383e4d 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/options.ts +++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/options.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + const filterOptions = [ { diff --git a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/with-data-block.tsx b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/with-data-block.tsx index 9393dc9aa4..09c94ede52 100644 --- a/packages/core/client/src/schema-component/antd/filter/demos/new-demos/with-data-block.tsx +++ b/packages/core/client/src/schema-component/antd/filter/demos/new-demos/with-data-block.tsx @@ -1,17 +1,10 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { useField, observer } from '@formily/react'; -import { FilterActionProps, useDataBlockRequest, useRequest } from '@nocobase/client'; - -import { getAppComponent } from '@nocobase/test/web'; +import { FilterActionProps, ISchema, useDataBlockRequest } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; import { filterOptions } from './options'; @@ -45,38 +38,48 @@ const useFilterActionProps = (): FilterActionProps => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'DataBlockProvider', - 'x-decorator-props': { - collection: 'users', - action: 'list', - }, - properties: { - test: { - name: 'filter', - type: 'object', - enum: filterOptions, - title: 'Filter', - 'x-decorator': 'ShowFilterData', - 'x-component': 'Filter.Action', - 'x-use-component-props': useFilterActionProps, - }, - }, - }, - appOptions: { - components: { - ShowFilterData, - }, - scopes: { - useFilterActionProps, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'DataBlockProvider', + 'x-decorator-props': { + collection: 'users', + action: 'list', + }, + properties: { + test: { + name: 'filter', + type: 'object', + enum: filterOptions, + title: 'Filter', + 'x-decorator': 'ShowFilterData', + 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { test: { data: { data: 'ok' } }, }, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/filter/index.en-US.md b/packages/core/client/src/schema-component/antd/filter/index.en-US.md new file mode 100644 index 0000000000..24b948b9f8 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/filter/index.en-US.md @@ -0,0 +1,36 @@ +# Filter + +A component used for filtering data, commonly used to filter data in blocks. + +```ts +type FilterActionProps = ActionProps & { + options?: any[]; + form?: Form; + onSubmit?: (values: T) => void; + onReset?: (values: T) => void; +} +``` + +### Basic Usage + +We can make requests using `useRequest()`. + + + +### Default Value + +Default values can be set using `schema.default`. + + + +### With Data Block + +If used within a [DataBlock](/core/data-block/data-block-provider), we can make requests using [useDataBlockResource()](/core/data-block/data-block-request-provider). + + + +### with Collection fields + +You can use `useFilterFieldOptions(collection.fields)` to get options for collection fields. + + diff --git a/packages/core/client/src/schema-component/antd/form-item/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/form-item/demos/demo1.tsx index dd9b3d2d24..44bb7ddfb2 100644 --- a/packages/core/client/src/schema-component/antd/form-item/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { APIClientProvider, diff --git a/packages/core/client/src/schema-component/antd/form-item/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/form-item/demos/new-demos/basic.tsx index 8488cd898d..2264937e55 100644 --- a/packages/core/client/src/schema-component/antd/form-item/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/demos/new-demos/basic.tsx @@ -1,14 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; -import { SchemaSettings } from '@nocobase/client'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, SchemaSettings, ISchema } from '@nocobase/client'; const simpleSettings = new SchemaSettings({ name: 'simpleSettings', @@ -20,34 +13,46 @@ const simpleSettings = new SchemaSettings({ ], }); -const App = getAppComponent({ - designable: true, - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'DndContext', - 'x-component': 'FormV2', - properties: { - username: { - type: 'string', - title: 'Username', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - 'x-settings': 'simpleSettings', - required: true, - }, - nickname: { - type: 'string', - title: 'Nickname', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - 'x-settings': 'simpleSettings', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'DndContext', + 'x-component': 'FormV2', + properties: { + username: { + type: 'string', + title: 'Username', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + 'x-settings': 'simpleSettings', + required: true, + }, + nickname: { + type: 'string', + title: 'Nickname', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + 'x-settings': 'simpleSettings', }, }, - appOptions: { - schemaSettings: [simpleSettings], - }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + designable: true, + plugins: [DemoPlugin], + schemaSettings: [simpleSettings], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/form-item/index.en-US.md b/packages/core/client/src/schema-component/antd/form-item/index.en-US.md new file mode 100644 index 0000000000..a5affafe9d --- /dev/null +++ b/packages/core/client/src/schema-component/antd/form-item/index.en-US.md @@ -0,0 +1,12 @@ +# FormItem + +Form field decorator. It inherits the drag and drop functionality from [BlockItem](/components/block-item) and the rendering capabilities from [SchemaToolbar](/core/ui-schema/schema-toolbar) and [SchemaSettings](/core/ui-schema/schema-settings). + +```ts +import { IFormItemProps } from '@formily/antd-v5'; +type FormItemProps = IFormItemProps +``` + +## Example + + diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/collections.ts b/packages/core/client/src/schema-component/antd/form-v2/demos/collections.ts index e768cc0163..031def9589 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/collections.ts +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/collections.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + export default [ { diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/demo1.tsx index 296f487d8e..2cec5e4ae2 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema, useForm } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx index b9c14cc08f..38b72851e4 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema, useForm } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx index e4232e5e64..3b5db9d20e 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/basic.tsx index 2002c9cd3f..d724aecc5d 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/basic.tsx @@ -1,16 +1,14 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { getAppComponent } from '@nocobase/test/web'; -import { ActionProps, useAPIClient } from '@nocobase/client'; -import { useForm } from '@formily/react'; +import React from 'react'; import { App as AntdApp } from 'antd'; +import { useForm } from '@formily/react'; +import { + ActionProps, + useAPIClient, + SchemaComponent, + ISchema, + Plugin +} from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; function useSubmitActionProps(): ActionProps { const form = useForm(); @@ -31,48 +29,56 @@ function useSubmitActionProps(): ActionProps { }, }; } - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormV2', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, - password: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Password', - }, - button: { - type: 'void', - 'x-component': 'Action', - title: 'Submit', - 'x-use-component-props': useSubmitActionProps, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormV2', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', + }, + password: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Password', + }, + button: { + type: 'void', + 'x-component': 'Action', + title: 'Submit', + 'x-use-component-props': 'useSubmitActionProps', }, }, }, }, - apis: { - 'users:create': { result: 'ok' }, - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection-data.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection-data.tsx index 6818d02ac2..075ac05cb7 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection-data.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection-data.tsx @@ -1,22 +1,18 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { useForm } from '@formily/react'; +import React from 'react'; +import { App as AntdApp } from 'antd'; import { ActionProps, - CollectionField, - FormBlockProvider, + SchemaComponent, + ISchema, + Plugin, useDataBlockResource, - useFormBlockProps, + FormBlockProvider, + useFormBlockProps } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; -import { App as AntdApp } from 'antd'; +import { mockApp } from '@nocobase/client/demo-utils'; function useSubmitActionProps(): ActionProps { const form = useForm(); @@ -38,61 +34,70 @@ function useSubmitActionProps(): ActionProps { }, }; } - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormBlockProvider', - 'x-component-props': { - collection: 'users', - action: 'get', // 获取数据 - filterByTk: 1, // 获取 id 为 1 的数据 - dataSource: 'main', - }, - properties: { - form: { - type: 'void', - 'x-component': 'FormV2', - 'x-use-component-props': 'useFormBlockProps', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'CollectionField', - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'CollectionField', - }, - submit: { - type: 'void', - 'x-component': 'Action', - title: 'Submit', - 'x-use-component-props': useSubmitActionProps, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormBlockProvider', + 'x-component-props': { + collection: 'users', + action: 'get', // 获取数据 + filterByTk: 1, // 获取 id 为 1 的数据 + dataSource: 'main', + }, + properties: { + form: { + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useFormBlockProps', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'CollectionField', + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'CollectionField', + }, + submit: { + type: 'void', + 'x-component': 'Action', + title: 'Submit', + 'x-use-component-props': 'useSubmitActionProps', }, }, }, }, }, }, - appOptions: { - scopes: { - useFormBlockProps, - }, - components: { - FormBlockProvider, - CollectionField, - }, - }, - apis: { - 'users:update': { result: 'ok' }, +}; + +const Demo = () => { + return ( + + ); +}; + + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { + FormBlockProvider }, + scopes: { useFormBlockProps } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection.tsx index 2fa8a49e06..bf336561a5 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/collection.tsx @@ -1,21 +1,22 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { useForm } from '@formily/react'; -import { ActionProps, CollectionField, FormBlockProvider, useDataBlockResource } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { + ActionProps, + FormBlockProvider, + ISchema, + Plugin, + SchemaComponent, + useDataBlockResource, +} from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; + import { App as AntdApp } from 'antd'; +import React from 'react'; function useSubmitActionProps(): ActionProps { const form = useForm(); - // const api = useAPIClient(); - const resource = useDataBlockResource(); // 使用 useDataBlockResource 代替 useAPIClient + const resource = useDataBlockResource(); const { message } = AntdApp.useApp(); return { @@ -25,68 +26,77 @@ function useSubmitActionProps(): ActionProps { await form.submit(); const values = form.values; - // const { data } = await api.request({ url: 'users:create', method: 'post', data: values }) - const { data } = await resource.create(values); // 使用 resource.create(values) 代替 api.request({ url: 'users:create', method: 'post', data: values }) + const { data } = await resource.update(values); if (data.result === 'ok') { message.success('Submit success'); - form.reset(); // 提交成功后重置表单 + form.reset(); } }, }; } - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormBlockProvider', - 'x-component-props': { - collection: 'users', // users 数据表 - dataSource: 'main', // 多数据源标识，可以不写，默认为 main - }, - properties: { - form: { - 'x-component': 'FormV2', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - // 'x-component': 'Input', - // title: 'Username', - // required: true, - 'x-component': 'CollectionField', // 这里替换为 CollectionField，会自动根据 users 数据表的配置生成对应的组件 - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - // 'x-component': 'Input', - // title: 'Nickname', - 'x-component': 'CollectionField', // 这里替换为 CollectionField，会自动根据 users 数据表的配置生成对应的组件 - }, - submit: { - type: 'void', - 'x-component': 'Action', - title: 'Submit', - 'x-use-component-props': useSubmitActionProps, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormBlockProvider', + 'x-component-props': { + collection: 'users', // users 数据表 + dataSource: 'main', // 多数据源标识，可以不写，默认为 main + }, + properties: { + form: { + 'x-component': 'FormV2', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + // 'x-component': 'Input', + // title: 'Username', + // required: true, + 'x-component': 'CollectionField', // 这里替换为 CollectionField，会自动根据 users 数据表的配置生成对应的组件 + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + // 'x-component': 'Input', + // title: 'Nickname', + 'x-component': 'CollectionField', // 这里替换为 CollectionField，会自动根据 users 数据表的配置生成对应的组件 + }, + submit: { + type: 'void', + 'x-component': 'Action', + title: 'Submit', + 'x-use-component-props': 'useSubmitActionProps', }, }, }, }, }, }, - appOptions: { - components: { - FormBlockProvider, - CollectionField, - }, - }, - apis: { - 'users:create': { result: 'ok' }, - }, +}; + +const Demo = () => { + return ( + + ); +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { + FormBlockProvider + } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/default-value.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/default-value.tsx index 69bb8be0ce..3541cef9ce 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/default-value.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/default-value.tsx @@ -1,14 +1,9 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { createForm } from '@formily/core'; -import { getAppComponent } from '@nocobase/test/web'; +import { Plugin, ISchema, SchemaComponent } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; import { useMemo } from 'react'; const useCustomFormProps = () => { @@ -28,38 +23,45 @@ const useCustomFormProps = () => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormV2', - 'x-use-component-props': 'useCustomFormProps', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useCustomFormProps', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', }, }, }, }, - appOptions: { - scopes: { - useCustomFormProps, - }, - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/extend-collection.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/extend-collection.tsx index 24883274bb..1f656e1766 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/extend-collection.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/extend-collection.tsx @@ -1,14 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { CollectionField, ExtendCollectionsProvider, FormBlockProvider } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { Plugin, SchemaComponent, ExtendCollectionsProvider, FormBlockProvider, ISchema } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; const bookCollection = { key: 'book', @@ -72,47 +65,52 @@ const bookCollection = { filterTargetKey: 'id', }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormBlockProvider', - 'x-component-props': { - collection: 'book', - }, - properties: { - form: { - 'x-component': 'FormV2', - properties: { - name: { - 'x-decorator': 'FormItem', - 'x-component': 'CollectionField', - }, - price: { - 'x-decorator': 'FormItem', - 'x-component': 'CollectionField', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormBlockProvider', + 'x-component-props': { + collection: 'book', + }, + properties: { + form: { + 'x-component': 'FormV2', + properties: { + name: { + 'x-decorator': 'FormItem', + 'x-component': 'CollectionField', + }, + price: { + 'x-decorator': 'FormItem', + 'x-component': 'CollectionField', }, }, }, }, }, }, - appOptions: { - components: { - FormBlockProvider, - CollectionField, - }, - providers: [ - [ExtendCollectionsProvider, { collections: [bookCollection] }], // 添加 book 数据表 - ], - }, - apis: { - 'users:create': { result: 'ok' }, - }, +}; + +const Demo = () => { + return + + ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { + FormBlockProvider + } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/form-layout.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/form-layout.tsx index 5b5b6a7c69..c27463288e 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/form-layout.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/form-layout.tsx @@ -1,51 +1,57 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import { ISchema, Plugin, SchemaComponent } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormV2', - 'x-component-props': { - layout: 'horizontal', // 'vertical' | 'horizontal' | 'inline - labelCol: 6, - wrapperCol: 10, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormV2', + 'x-component-props': { + layout: 'horizontal', // 'vertical' | 'horizontal' | 'inline + labelCol: 6, + wrapperCol: 10, + }, + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, }, - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, - password: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Password', - }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', + }, + password: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Password', }, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/grid.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/grid.tsx index 17f24af506..82dfe2b112 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/grid.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/grid.tsx @@ -1,72 +1,64 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import { ISchema, Plugin, SchemaComponent } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormV2', - properties: { - grid: { - type: 'void', - 'x-component': 'Grid', - properties: { - row1: { - type: 'void', - 'x-component': 'Grid.Row', - properties: { - col1: { - type: 'void', - 'x-component': 'Grid.Col', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormV2', + properties: { + grid: { + type: 'void', + 'x-component': 'Grid', + properties: { + row1: { + type: 'void', + 'x-component': 'Grid.Row', + properties: { + col1: { + type: 'void', + 'x-component': 'Grid.Col', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, }, }, - col2: { - type: 'void', - 'x-component': 'Grid.Col', - properties: { - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, + }, + col2: { + type: 'void', + 'x-component': 'Grid.Col', + properties: { + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', }, }, }, }, - row2: { - type: 'void', - 'x-component': 'Grid.Row', - properties: { - col1: { - type: 'void', - 'x-component': 'Grid.Col', - properties: { - password: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Password', - }, + }, + row2: { + type: 'void', + 'x-component': 'Grid.Row', + properties: { + col1: { + type: 'void', + 'x-component': 'Grid.Col', + properties: { + password: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Password', }, }, }, @@ -77,6 +69,20 @@ const App = getAppComponent({ }, }, }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/linkage.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/linkage.tsx index 6819f9fea3..6cb093fc54 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/linkage.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/linkage.tsx @@ -1,40 +1,46 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import { Plugin, ISchema, SchemaComponent } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormV2', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormV2', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', }, }, }, }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/read-pretty.tsx index c1d088c4a8..0da7f89b19 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/new-demos/read-pretty.tsx @@ -1,61 +1,61 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { CollectionField, FormBlockProvider, useFormBlockProps } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { Plugin, ISchema, SchemaComponent, useFormBlockProps, FormBlockProvider } from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; +import React from 'react'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-component': 'FormBlockProvider', - 'x-component-props': { - collection: 'users', - action: 'get', - filterByTk: 1, - dataSource: 'main', - }, - properties: { - form: { - type: 'void', - 'x-component': 'FormV2', - 'x-use-component-props': 'useFormBlockProps', - 'x-pattern': 'readPretty', // 增加 x-read-pretty 属性 - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'CollectionField', - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'CollectionField', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-component': 'FormBlockProvider', + 'x-component-props': { + collection: 'users', + action: 'get', + filterByTk: 1, + dataSource: 'main', + }, + properties: { + form: { + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useFormBlockProps', + 'x-pattern': 'readPretty', // 增加 x-read-pretty 属性 + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'CollectionField', + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'CollectionField', }, }, }, }, }, }, - appOptions: { - scopes: { - useFormBlockProps, - }, - components: { - FormBlockProvider, - CollectionField, - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { + FormBlockProvider }, + scopes: { useFormBlockProps } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/index.en-US.md b/packages/core/client/src/schema-component/antd/form-v2/index.en-US.md new file mode 100644 index 0000000000..c20358f6e6 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/form-v2/index.en-US.md @@ -0,0 +1,79 @@ +# FormV2 + +```ts +import { Form as FormilyForm } from '@formily/core'; +import { IFormLayoutProps } from '@formily/antd-v5'; + +interface FormProps extends IFormLayoutProps { + form?: FormilyForm; + disabled?: boolean; +} +``` + +## Basic Usage + + + +For the configuration of the Action component, please refer to [Action](/components/action). + +## Default values + +We can use `x-use-component-props` and `form.setInitialValues()` to set default values. For more instance methods of the form, please refer to [Form](https://core.formilyjs.org/api/models/form). + + + +## FormLayout + +FormV2 internally encapsulates the FormLayout component. Please refer to [FormLayout](https://antd.formilyjs.org/zh-CN/components/form-layout) for the props of the FormLayout component. + + + +## Grid Layout + +For the configuration of the Grid component, please refer to [Grid](/components/grid). + + + +## With Collection + +We can use `FormBlockProvider` and `CollectionField` to automatically retrieve the configuration of a data table and render form items based on the table's configuration. + +`FormBlockProvider` is a secondary encapsulation of `DataBlockProvider`, and its properties can be referred to in [DataBlockProvider](/core/data-block/data-block-provider#属性详解). `CollectionField` will automatically search for the corresponding configuration of the data table based on `field.name` and render it as the corresponding form item. For more information about `CollectionField`, please refer to [CollectionField](/core/data-source/collection-field). + +And we can use the `resource` context provided by `DataBlockProvider` to perform CRUD operations on resources. + +For example, let's take the `users` data table as an example. + + + +## Extend Collection + +If the Collection is not created through the Data Source Manager, but is a custom extension, you can refer to [ExtendCollectionsProvider](/core/data-source/extend-collections-provider). + + + +## Get Collection Data + +When we pass `action: 'get'` to `FormBlockProvider` and there is a `filterByTk` property, `FormBlockProvider` will automatically retrieve the data table data based on the value of `filterByTk`. Please refer to [DataBlockProvider](/core/data-block/data-block-provider#属性详解) for parameter details. + +Then use `useFormBlockProps()` to assign the retrieved data to the Form. + +Generally used in data update scenarios. + + + +## Read Pretty + +Just add `x-read-pretty: true` in the Schema. + + + +## Linkage + +Form items can be linked together using the `x-linkage-rules` attribute. + +TODO: + + + +## Hooks diff --git a/packages/core/client/src/schema-component/antd/form/demos/apiClient.ts b/packages/core/client/src/schema-component/antd/form/demos/apiClient.ts index dcee1075c2..7aa59f5df1 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/apiClient.ts +++ b/packages/core/client/src/schema-component/antd/form/demos/apiClient.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { APIClient } from '@nocobase/client'; import MockAdapter from 'axios-mock-adapter'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo1.tsx index e2701f3f49..6cb02329e8 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem, Input } from '@formily/antd-v5'; import { ISchema, observer, useForm } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo2.tsx index 20ce81b838..a5f3835219 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem, Input } from '@formily/antd-v5'; import { ISchema, observer, useForm } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo3.tsx index 51f7ef4dbe..15dd8e6f8e 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem, Input } from '@formily/antd-v5'; import { ISchema, observer, useForm } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo4.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo4.tsx index 2ba3a05394..a006fd9e5b 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo4.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo4.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem, Input } from '@formily/antd-v5'; import { ISchema, observer, useForm } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo5.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo5.tsx index ac63e47fd0..b9de1817f6 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo5.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo5.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem, Input } from '@formily/antd-v5'; import { ISchema, observer, useForm } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo6.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo6.tsx index 47772a6e05..032345e4e2 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo6.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo6.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem, Input } from '@formily/antd-v5'; import { ISchema, observer, useForm } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo7.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo7.tsx index 24c1edf73d..af3e930cd0 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo7.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo7.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem, Input } from '@formily/antd-v5'; import { ISchema, observer, useForm } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo8.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo8.tsx index 7ff5a8fb91..fbf1591a18 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo8.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo8.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { ISchema, observer } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/form/demos/demo9.tsx b/packages/core/client/src/schema-component/antd/form/demos/demo9.tsx index 4d39fd3d32..897e40c7ec 100644 --- a/packages/core/client/src/schema-component/antd/form/demos/demo9.tsx +++ b/packages/core/client/src/schema-component/antd/form/demos/demo9.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { BlockSchemaComponentPlugin, VariablesProvider } from '@nocobase/client'; import { renderApp } from '@nocobase/test/client'; diff --git a/packages/core/client/src/schema-component/antd/form/index.en-US.md b/packages/core/client/src/schema-component/antd/form/index.en-US.md new file mode 100644 index 0000000000..f141a6cc03 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/form/index.en-US.md @@ -0,0 +1,47 @@ +# Form + +## Examples + +### Basic Usage + + + +### Form Decorator + +Form can also be used as a decorator + + + +When combined with Action.Drawer, it becomes DrawerForm + + + +### initialValue Initialization + + + +### initialValue for decorator + + + +### Remote initialization data + + + +### useValues + + + +### DrawerForm + +Control the popup form (Drawer+Form) freely and asynchronously populate the form data + + + +## API + +Property Description + +- `initialValue` Static initialization data +- `request` Remote request parameters +- `useValues` Custom useRequest diff --git a/packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx index 9196657865..82da7c1ce0 100644 --- a/packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { APIClient, @@ -13,10 +6,10 @@ import { CardItem, G2Plot, SchemaComponent, + mockAPIClient, SchemaComponentProvider, } from '@nocobase/client'; import React from 'react'; -import { mockAPIClient } from '../../../../testUtils'; const { apiClient, mockRequest } = mockAPIClient(); diff --git a/packages/core/client/src/schema-component/antd/g2plot/index.en-US.md b/packages/core/client/src/schema-component/antd/g2plot/index.en-US.md new file mode 100644 index 0000000000..5a2cffc72e --- /dev/null +++ b/packages/core/client/src/schema-component/antd/g2plot/index.en-US.md @@ -0,0 +1,5 @@ +# G2Plot + +G2 chart. + + diff --git a/packages/core/client/src/schema-component/antd/grid-card/demos/basic.tsx b/packages/core/client/src/schema-component/antd/grid-card/demos/basic.tsx index a776c26573..4351e91eae 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/grid-card/demos/basic.tsx @@ -1,54 +1,59 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'GridCard.Decorator', - 'x-use-decorator-props': 'useGridCardBlockDecoratorProps', - 'x-decorator-props': { - collection: 'roles', - action: 'list', - params: { - pageSize: 2, - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'GridCard.Decorator', + 'x-use-decorator-props': 'useGridCardBlockDecoratorProps', + 'x-decorator-props': { + collection: 'roles', + action: 'list', + params: { + pageSize: 2, }, - properties: { - list: { - type: 'array', - 'x-component': 'GridCard', - properties: { - item: { - type: 'object', - 'x-component': 'GridCard.Item', - 'x-read-pretty': true, - 'x-use-component-props': 'useGridCardItemProps', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - }, - title: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - }, + }, + properties: { + list: { + type: 'array', + 'x-component': 'GridCard', + properties: { + item: { + type: 'object', + 'x-component': 'GridCard.Item', + 'x-read-pretty': true, + 'x-use-component-props': 'useGridCardItemProps', + properties: { + name: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + }, + title: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', }, }, }, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/grid-card/index.en-US.md b/packages/core/client/src/schema-component/antd/grid-card/index.en-US.md new file mode 100644 index 0000000000..8b08938742 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/grid-card/index.en-US.md @@ -0,0 +1,27 @@ + + +# GridCard + +A grid card component based on the Card style. + +Used to display detailed information of a form. + +It should be used in conjunction with `GridCard.Decorator`, which is a secondary encapsulation of `DataBlockProvider`. Its properties can be referred to in [DataBlockProvider](/core/data-block/data-block-provider#property-details). + +For more block documentation, please refer to [Details](/components/details), [Form](/components/form-v2), and [Table](/components/table-v2). + +```ts +interface GridCardProps { + columnCount?: { + xs?: number; + sm?: number; + md?: number; + lg?: number; + xl?: number; + xxl?: number; + }; + pagination?: PaginationProps; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx index a22e8ab656..95a684690d 100644 --- a/packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/grid/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { observer, useFieldSchema } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/grid/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/grid/demos/demo2.tsx index ceed2db651..1aebb53765 100644 --- a/packages/core/client/src/schema-component/antd/grid/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/grid/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { uid } from '@formily/shared'; diff --git a/packages/core/client/src/schema-component/antd/grid/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/grid/demos/demo3.tsx index 08dc69bf5d..3a7dff808f 100644 --- a/packages/core/client/src/schema-component/antd/grid/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/grid/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { uid } from '@formily/shared'; diff --git a/packages/core/client/src/schema-component/antd/grid/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/grid/demos/new-demos/basic.tsx index 19d37cd40c..297727273a 100644 --- a/packages/core/client/src/schema-component/antd/grid/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/grid/demos/new-demos/basic.tsx @@ -1,17 +1,16 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { useFieldSchema } from '@formily/react'; import { observer } from '@formily/reactive-react'; -import { getAppComponent } from '@nocobase/test/web'; +import { + SchemaComponent, + ISchema, + Plugin, + DragHandler +} from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; + import React from 'react'; -import { DragHandler } from '@nocobase/client'; const MyBlock = observer( () => { @@ -29,86 +28,93 @@ const MyBlock = observer( { displayName: 'MyBlock' }, ); -const App = getAppComponent({ +const schema: ISchema = { + type: 'void', + name: 'grid1', + 'x-component': 'Grid', + properties: { + row1: { + type: 'void', + 'x-component': 'Grid.Row', + properties: { + col1: { + type: 'void', + 'x-component': 'Grid.Col', + properties: { + block1: { + type: 'void', + title: 'row1 - col1 - block1', + 'x-decorator': 'BlockItem', + 'x-component': 'MyBlock', + }, + block2: { + type: 'void', + title: 'row1 - col1 - block2', + 'x-decorator': 'BlockItem', + 'x-component': 'MyBlock', + }, + }, + }, + col2: { + type: 'void', + 'x-component': 'Grid.Col', + properties: { + block1: { + type: 'void', + title: 'row1 - col2 - block1', + 'x-decorator': 'BlockItem', + 'x-component': 'MyBlock', + }, + }, + }, + }, + }, + row2: { + type: 'void', + 'x-component': 'Grid.Row', + properties: { + col1: { + type: 'void', + 'x-component': 'Grid.Col', + properties: { + block4: { + type: 'void', + title: 'row2 - col1 - block1', + 'x-decorator': 'BlockItem', + 'x-component': 'MyBlock', + }, + }, + }, + col2: { + type: 'void', + 'x-component': 'Grid.Col', + properties: { + block1: { + type: 'void', + title: 'row2 - col2 - block1', + 'x-decorator': 'BlockItem', + 'x-component': 'MyBlock', + }, + }, + }, + }, + }, + }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ designable: true, - schema: { - type: 'void', - name: 'grid1', - 'x-component': 'Grid', - properties: { - row1: { - type: 'void', - 'x-component': 'Grid.Row', - properties: { - col1: { - type: 'void', - 'x-component': 'Grid.Col', - properties: { - block1: { - type: 'void', - title: 'row1 - col1 - block1', - 'x-decorator': 'BlockItem', - 'x-component': 'MyBlock', - }, - block2: { - type: 'void', - title: 'row1 - col1 - block2', - 'x-decorator': 'BlockItem', - 'x-component': 'MyBlock', - }, - }, - }, - col2: { - type: 'void', - 'x-component': 'Grid.Col', - properties: { - block1: { - type: 'void', - title: 'row1 - col2 - block1', - 'x-decorator': 'BlockItem', - 'x-component': 'MyBlock', - }, - }, - }, - }, - }, - row2: { - type: 'void', - 'x-component': 'Grid.Row', - properties: { - col1: { - type: 'void', - 'x-component': 'Grid.Col', - properties: { - block4: { - type: 'void', - title: 'row2 - col1 - block1', - 'x-decorator': 'BlockItem', - 'x-component': 'MyBlock', - }, - }, - }, - col2: { - type: 'void', - 'x-component': 'Grid.Col', - properties: { - block1: { - type: 'void', - title: 'row2 - col2 - block1', - 'x-decorator': 'BlockItem', - 'x-component': 'MyBlock', - }, - }, - }, - }, - }, - }, - }, - appOptions: { - components: { - MyBlock, - }, - }, + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/grid/index.en-US.md b/packages/core/client/src/schema-component/antd/grid/index.en-US.md new file mode 100644 index 0000000000..f08c7a13a9 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/grid/index.en-US.md @@ -0,0 +1,20 @@ +# Grid + +Grid layout component. + +```ts +interface GridProps { + showDivider?: boolean; + dndContext?: false | DndContextProps; +} +``` + +The `Grid` component needs to be used with `Grid.Row` and `Grid.Col`. + +## Basic Usage + + + +## With Form + +Demo [GridLayout](/components/form-v2#grid-layout) diff --git a/packages/core/client/src/schema-component/antd/icon-picker/demos/icon-picker.tsx b/packages/core/client/src/schema-component/antd/icon-picker/demos/icon-picker.tsx index 80fc638f7a..58b564f30e 100644 --- a/packages/core/client/src/schema-component/antd/icon-picker/demos/icon-picker.tsx +++ b/packages/core/client/src/schema-component/antd/icon-picker/demos/icon-picker.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { IconPicker, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/basic.tsx index 17ef76de13..af9db70e7a 100644 --- a/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/basic.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'IconPicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'IconPicker', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/read-pretty.tsx index 5bc58cbc42..a0b2ade018 100644 --- a/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/icon-picker/demos/new-demos/read-pretty.tsx @@ -1,31 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - default: 'appstoreoutlined', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'IconPicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + default: 'appstoreoutlined', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'IconPicker', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/icon-picker/index.en-US.md b/packages/core/client/src/schema-component/antd/icon-picker/index.en-US.md new file mode 100644 index 0000000000..9cb187492b --- /dev/null +++ b/packages/core/client/src/schema-component/antd/icon-picker/index.en-US.md @@ -0,0 +1,25 @@ +# IconPicker + +Icon Picker. + +## Basic Usage + +```ts +interface IconPickerProps { + value?: string; + disabled?: boolean; + suffix?: React.ReactNode; +} +``` + + + +## Read Pretty + +```ts +interface IconPickerReadPrettyProps { + value?: string; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/addonBefore&addonAfter.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/addonBefore&addonAfter.tsx index 6b3bd6ab30..ec05c6e590 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/addonBefore&addonAfter.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/addonBefore&addonAfter.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/highPrecisionDecimals.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/highPrecisionDecimals.tsx index 24fa402606..ebf21d2846 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/highPrecisionDecimals.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/highPrecisionDecimals.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/inputNumber.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/inputNumber.tsx index df49de4b64..f32e19ed26 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/inputNumber.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/inputNumber.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { InputNumber, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/addonBefore-addonAfter.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/addonBefore-addonAfter.tsx index 7d01cfe22f..213a3166dc 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/addonBefore-addonAfter.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/addonBefore-addonAfter.tsx @@ -1,33 +1,38 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'number', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': { - addonBefore: '¥', - addonAfter: '万元', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'number', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': { + addonBefore: '¥', + addonAfter: '万元', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/basic.tsx index 6dbba1d985..91075257b7 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/basic.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'number', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'number', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/format-style.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/format-style.tsx index 454217520a..dd5bb25864 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/format-style.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/format-style.tsx @@ -1,34 +1,39 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'number', - title: 'Test', - default: 11111111111, - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': { - formatStyle: 'scientifix', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'number', + title: 'Test', + default: 11111111111, + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': { + formatStyle: 'scientifix', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/read-pretty.tsx index 902c074b7e..7f592b7f79 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/read-pretty.tsx @@ -1,35 +1,40 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'number', - default: '1.11', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': { - addonBefore: '¥', - addonAfter: '万元', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'number', + default: '1.11', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': { + addonBefore: '¥', + addonAfter: '万元', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/separator.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/separator.tsx index 4ce91b5ed6..5bd1dbed22 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/separator.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/separator.tsx @@ -1,62 +1,67 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test1: { - type: 'number', - title: 'Test1', - default: 1234567.89, - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': {}, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test1: { + type: 'number', + title: 'Test1', + default: 1234567.89, + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': {}, + }, + test2: { + type: 'number', + title: 'Test2', + default: 1234567.89, + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': { + separator: '0,0.00', }, - test2: { - type: 'number', - title: 'Test2', - default: 1234567.89, - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': { - separator: '0,0.00', - }, + }, + test3: { + type: 'number', + title: 'Test3', + default: 1234567.89, + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': { + separator: '0.0,00', }, - test3: { - type: 'number', - title: 'Test3', - default: 1234567.89, - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': { - separator: '0.0,00', - }, - }, - test4: { - type: 'number', - title: 'Test4', - default: 1234567.89, - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': { - separator: '0 0,00', - }, + }, + test4: { + type: 'number', + title: 'Test4', + default: 1234567.89, + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': { + separator: '0 0,00', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/unit-conversion.tsx b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/unit-conversion.tsx index a88a698a61..c350d106c4 100644 --- a/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/unit-conversion.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/demos/new-demos/unit-conversion.tsx @@ -1,45 +1,50 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test1: { - type: 'number', - title: 'Test1', - default: 100, - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': { - unitConversion: 10, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test1: { + type: 'number', + title: 'Test1', + default: 100, + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': { + unitConversion: 10, }, - test2: { - type: 'number', - title: 'Test2', - default: 100, - 'x-decorator': 'FormItem', - 'x-component': 'InputNumber', - 'x-component-props': { - unitConversion: 10, - unitConversionType: '/', - }, + }, + test2: { + type: 'number', + title: 'Test2', + default: 100, + 'x-decorator': 'FormItem', + 'x-component': 'InputNumber', + 'x-component-props': { + unitConversion: 10, + unitConversionType: '/', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input-number/index.en-US.md b/packages/core/client/src/schema-component/antd/input-number/index.en-US.md new file mode 100644 index 0000000000..2c42bd810a --- /dev/null +++ b/packages/core/client/src/schema-component/antd/input-number/index.en-US.md @@ -0,0 +1,54 @@ +# InputNumber + +Number input box. It is a wrapper for the ant-design [InputNumber](https://ant.design/components/input-number/) component. + +## Basic Usage + +```ts +type InputNumberProps = AntdInputNumberProps; +``` + + + +## addonBefore and addonAfter + + + +## Read Pretty + +```ts +interface InputNumberReadPrettyProps { + formatStyle?: 'normal' | 'scientifix'; + unitConversion?: number; + /** + * @default '*' + */ + unitConversionType?: '*' | '/'; + /** + * @default '0.00' + */ + separator?: '0,0.00' | '0.0,00' | '0 0,00' | '0.00'; + step?: number; + value?: any; + addonBefore?: React.ReactNode; + addonAfter?: React.ReactNode; +} +``` + + + +## Format Style + +Scientific notation is supported. + + + +## Unit Conversion + +Perform multiplication or division operations based on the original number. + + + +## Separator + + diff --git a/packages/core/client/src/schema-component/antd/input/demos/input.tsx b/packages/core/client/src/schema-component/antd/input/demos/input.tsx index 7c77982b7b..d3c3244bdb 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/input.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/input.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { Application, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/input/demos/json.tsx b/packages/core/client/src/schema-component/antd/input/demos/json.tsx index ba3ca521b4..ce9a52d79f 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/json.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/json.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { Application, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/input-read-pretty.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/input-read-pretty.tsx index 43fbb040f6..011bf60f61 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/new-demos/input-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/input-read-pretty.tsx @@ -1,46 +1,51 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - title: 'Test', - default: - 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - test2: { - type: 'string', - title: 'Test(ellipsis)', - default: - 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - 'x-component-props': { - ellipsis: true, - style: { - width: 100, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + title: 'Test', + default: + 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + test2: { + type: 'string', + title: 'Test(ellipsis)', + default: + 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + 'x-component-props': { + ellipsis: true, + style: { + width: 100, }, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/input.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/input.tsx index 17938d681e..053a736c4c 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/new-demos/input.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/input.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Input', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/json-read-pretty.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/json-read-pretty.tsx index 3d79bdf3f3..8eebd360d6 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/new-demos/json-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/json-read-pretty.tsx @@ -1,31 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-read-pretty': true, - properties: { - test: { - type: 'string', - title: 'Test', - default: { a: 1, b: 2 }, - 'x-decorator': 'FormItem', - 'x-component': 'Input.JSON', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-read-pretty': true, + properties: { + test: { + type: 'string', + title: 'Test', + default: { a: 1, b: 2 }, + 'x-decorator': 'FormItem', + 'x-component': 'Input.JSON', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/json.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/json.tsx index a191310499..156d3f20c6 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/new-demos/json.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/json.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Input.JSON', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Input.JSON', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea-read-pretty.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea-read-pretty.tsx index bd9cdaf56f..e338f2d289 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea-read-pretty.tsx @@ -1,60 +1,65 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-read-pretty': true, - properties: { - read1: { - interface: 'string', - type: 'string', - default: - 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', - title: `Test`, - 'x-decorator': 'FormItem', - 'x-component': 'Input.TextArea', - }, - read2: { - interface: 'string', - type: 'string', - title: `Test(ellipsis)`, - 'x-decorator': 'FormItem', - default: - 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', - 'x-component': 'Input.TextArea', - 'x-component-props': { - ellipsis: true, - style: { - width: '100px', - }, - }, - }, - read3: { - interface: 'string', - type: 'string', - title: `Test(autop)`, - default: - 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', - 'x-decorator': 'FormItem', - 'x-component': 'Input.TextArea', - 'x-component-props': { - autop: true, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-read-pretty': true, + properties: { + read1: { + interface: 'string', + type: 'string', + default: + 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', + title: `Test`, + 'x-decorator': 'FormItem', + 'x-component': 'Input.TextArea', + }, + read2: { + interface: 'string', + type: 'string', + title: `Test(ellipsis)`, + 'x-decorator': 'FormItem', + default: + 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', + 'x-component': 'Input.TextArea', + 'x-component-props': { + ellipsis: true, + style: { + width: '100px', }, }, }, + read3: { + interface: 'string', + type: 'string', + title: `Test(autop)`, + default: + 'NocoBase is a scalability-first, open-source no-code/low-code platform for building business applications and enterprise solutions.', + 'x-decorator': 'FormItem', + 'x-component': 'Input.TextArea', + 'x-component-props': { + autop: true, + }, + }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea.tsx index 0868bed1ad..61bae708e8 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/textarea.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test1: { - type: 'string', - title: 'Test1', - 'x-decorator': 'FormItem', - 'x-component': 'Input.TextArea', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test1: { + type: 'string', + title: 'Test1', + 'x-decorator': 'FormItem', + 'x-component': 'Input.TextArea', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/url-read-pretty.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/url-read-pretty.tsx index 87cc93f3db..522683bee4 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/new-demos/url-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/url-read-pretty.tsx @@ -1,31 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-read-pretty': true, - properties: { - test: { - type: 'string', - title: 'Test', - default: 'https://www.nocobase.com', - 'x-decorator': 'FormItem', - 'x-component': 'Input.URL', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-read-pretty': true, + properties: { + test: { + type: 'string', + title: 'Test', + default: 'https://www.nocobase.com', + 'x-decorator': 'FormItem', + 'x-component': 'Input.URL', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input/demos/new-demos/url.tsx b/packages/core/client/src/schema-component/antd/input/demos/new-demos/url.tsx index 0dd84d8f49..50613c8fc4 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/new-demos/url.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/new-demos/url.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Input.URL', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Input.URL', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/input/demos/textarea.tsx b/packages/core/client/src/schema-component/antd/input/demos/textarea.tsx index bc6f36a782..5ce36fe5dd 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/textarea.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/textarea.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { Application, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/input/demos/url.tsx b/packages/core/client/src/schema-component/antd/input/demos/url.tsx index 265b006016..8b4a48a9ae 100644 --- a/packages/core/client/src/schema-component/antd/input/demos/url.tsx +++ b/packages/core/client/src/schema-component/antd/input/demos/url.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/input/index.en-US.md b/packages/core/client/src/schema-component/antd/input/index.en-US.md new file mode 100644 index 0000000000..b60c0bdf2e --- /dev/null +++ b/packages/core/client/src/schema-component/antd/input/index.en-US.md @@ -0,0 +1,112 @@ +# Input + +Text input box. It is encapsulated based on the ant-design [Input](https://ant.design/components/input/) component. + +## Input + +### Basic Usage + +```ts +type InputProps = AntdInputProps; +``` + + + +### ReadPretty + +```ts +interface InputReadPrettyProps { + value?: any; + className?: string; + style?: React.CSSProperties; + addonBefore?: React.ReactNode; + prefix?: React.ReactNode; + suffix?: React.ReactNode; + addonAfter?: React.ReactNode; + ellipsis?: boolean; + prefixCls?: string; +} +``` + + + +## Input.TextArea + +### Basic Usage + +```ts +type InputTextAreaProps = AntdTextAreaProps; +``` + + + +### ReadPretty + +```ts +interface InputTextAreaReadPrettyProps { + value?: any; + className?: string; + style?: React.CSSProperties; + addonBefore?: React.ReactNode; + prefix?: React.ReactNode; + suffix?: React.ReactNode; + addonAfter?: React.ReactNode; + ellipsis?: boolean; + text?: boolean; + autop?: boolean; + prefixCls?: string; +} +``` + + + +## Input.URL + +### Basic Usage + +```ts +type InputURLProps = InputProps; +``` + + + +### ReadPretty + +```ts +interface URLReadPrettyProps { + value?: any; + className?: string; + style?: React.CSSProperties; + addonBefore?: React.ReactNode; + prefix?: React.ReactNode; + suffix?: React.ReactNode; + addonAfter?: React.ReactNode; + prefixCls?: string; +} +``` + + + +## Input.JSON + +### Basic Usage + +```ts +type JSONTextAreaProps = AntdTextAreaProps & { value?: string; space?: number } +``` + + + +### ReadPretty + +```ts +interface JSONTextAreaReadPrettyProps { + value?: any; + className?: string; + style?: React.CSSProperties; + space?: number; + prefixCls?: string; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/list/demos/basic.tsx b/packages/core/client/src/schema-component/antd/list/demos/basic.tsx index 8b2b072117..e7fcf21e93 100644 --- a/packages/core/client/src/schema-component/antd/list/demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/list/demos/basic.tsx @@ -1,63 +1,64 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { BlockSchemaComponentPlugin } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, BlockSchemaComponentPlugin } from '@nocobase/client'; -const App = getAppComponent({ - designable: true, - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'List.Decorator', - 'x-use-decorator-props': 'useListBlockDecoratorProps', - 'x-decorator-props': { - collection: 'roles', - dataSource: 'main', - action: 'list', - params: { - pageSize: 10, - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'List.Decorator', + 'x-use-decorator-props': 'useListBlockDecoratorProps', + 'x-decorator-props': { + collection: 'roles', + dataSource: 'main', + action: 'list', + params: { + pageSize: 10, }, - 'x-component': 'CardItem', - properties: { - list: { - type: 'array', - 'x-component': 'List', - properties: { - item: { - type: 'object', - 'x-component': 'List.Item', - 'x-read-pretty': true, - 'x-use-component-props': 'useListItemProps', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 1, - }, - title: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 2, - }, + }, + 'x-component': 'CardItem', + properties: { + list: { + type: 'array', + 'x-component': 'List', + properties: { + item: { + type: 'object', + 'x-component': 'List.Item', + 'x-read-pretty': true, + 'x-use-component-props': 'useListItemProps', + properties: { + name: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 1, + }, + title: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 2, }, }, }, }, }, }, - appOptions: { - plugins: [BlockSchemaComponentPlugin], - }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin, BlockSchemaComponentPlugin], + designable: true, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/list/demos/view-or-edit-record.tsx b/packages/core/client/src/schema-component/antd/list/demos/view-or-edit-record.tsx index e05cb32f6f..99a638d498 100644 --- a/packages/core/client/src/schema-component/antd/list/demos/view-or-edit-record.tsx +++ b/packages/core/client/src/schema-component/antd/list/demos/view-or-edit-record.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { useForm } from '@formily/react'; import { @@ -15,8 +8,11 @@ import { useCollectionRecord, useDataBlockRequest, useDataBlockResource, + SchemaComponent, Plugin, } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; + import { App as AntdApp } from 'antd'; const useCloseActionProps = () => { @@ -64,96 +60,93 @@ const useFormBlockProviderProps: UseDataBlockProps<'CollectionGet'> = () => { }; }; -const App = getAppComponent({ - designable: true, - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'List.Decorator', - 'x-use-decorator-props': 'useListBlockDecoratorProps', - 'x-decorator-props': { - collection: 'users', - dataSource: 'main', - action: 'list', - params: { - pageSize: 10, - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'List.Decorator', + 'x-use-decorator-props': 'useListBlockDecoratorProps', + 'x-decorator-props': { + collection: 'users', + dataSource: 'main', + action: 'list', + params: { + pageSize: 10, }, - 'x-component': 'CardItem', - properties: { - list: { - type: 'array', - 'x-component': 'List', - properties: { - item: { - type: 'object', - 'x-component': 'List.Item', - 'x-read-pretty': true, - 'x-use-component-props': 'useListItemProps', - properties: { - username: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 1, + }, + 'x-component': 'CardItem', + properties: { + list: { + type: 'array', + 'x-component': 'List', + properties: { + item: { + type: 'object', + 'x-component': 'List.Item', + 'x-read-pretty': true, + 'x-use-component-props': 'useListItemProps', + properties: { + username: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 1, + }, + nickname: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 2, + }, + actions: { + type: 'void', + 'x-align': 'left', + 'x-component': 'ActionBar', + 'x-use-component-props': 'useListActionBarProps', + 'x-component-props': { + layout: 'one-column', }, - nickname: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 2, - }, - actions: { - type: 'void', - 'x-align': 'left', - 'x-component': 'ActionBar', - 'x-use-component-props': 'useListActionBarProps', - 'x-component-props': { - layout: 'one-column', - }, - properties: { - view: { - type: 'void', - title: 'View', - 'x-action': 'view', - 'x-component': 'Action.Link', - 'x-component-props': { - openMode: 'drawer', - }, - properties: { - drawer: { - type: 'void', - title: 'View record', - 'x-component': 'Action.Drawer', - 'x-component-props': { - className: 'nb-action-popup', - }, - properties: { - formContext: { - type: 'void', - 'x-decorator': 'FormBlockProvider', - 'x-use-decorator-props': 'useFormBlockProviderProps', - 'x-component': 'CardItem', - properties: { - form: { - type: 'void', - 'x-component': 'FormV2', - 'x-pattern': 'readPretty', - 'x-use-component-props': 'useFormBlockProps', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, + properties: { + view: { + type: 'void', + title: 'View', + 'x-action': 'view', + 'x-component': 'Action.Link', + 'x-component-props': { + openMode: 'drawer', + }, + properties: { + drawer: { + type: 'void', + title: 'View record', + 'x-component': 'Action.Drawer', + 'x-component-props': { + className: 'nb-action-popup', + }, + properties: { + formContext: { + type: 'void', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useFormBlockProviderProps', + 'x-component': 'CardItem', + properties: { + form: { + type: 'void', + 'x-component': 'FormV2', + 'x-pattern': 'readPretty', + 'x-use-component-props': 'useFormBlockProps', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', }, }, }, @@ -162,69 +155,69 @@ const App = getAppComponent({ }, }, }, - edit: { - type: 'void', - title: 'Edit', - 'x-action': 'update', - 'x-component': 'Action.Link', - 'x-component-props': { - openMode: 'drawer', - icon: 'EditOutlined', - }, - properties: { - drawer: { - type: 'void', - title: 'Edit record', - 'x-component': 'Action.Drawer', - 'x-component-props': { - className: 'nb-action-popup', - }, - properties: { - formContext: { - type: 'void', - 'x-decorator': 'FormBlockProvider', - 'x-use-decorator-props': 'useFormBlockProviderProps', - 'x-component': 'CardItem', - properties: { - form: { - type: 'void', - 'x-component': 'FormV2', - 'x-use-component-props': 'useFormBlockProps', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, + }, + edit: { + type: 'void', + title: 'Edit', + 'x-action': 'update', + 'x-component': 'Action.Link', + 'x-component-props': { + openMode: 'drawer', + icon: 'EditOutlined', + }, + properties: { + drawer: { + type: 'void', + title: 'Edit record', + 'x-component': 'Action.Drawer', + 'x-component-props': { + className: 'nb-action-popup', + }, + properties: { + formContext: { + type: 'void', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useFormBlockProviderProps', + 'x-component': 'CardItem', + properties: { + form: { + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useFormBlockProps', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', }, }, }, }, - footer: { - type: 'void', - 'x-component': 'Action.Drawer.Footer', - properties: { - close: { - title: 'Close', - 'x-component': 'Action', - 'x-component-props': { - type: 'default', - }, - 'x-use-component-props': 'useCloseActionProps', - }, - submit: { - title: 'Submit', - 'x-component': 'Action', - 'x-use-component-props': 'useSubmitActionProps', + }, + footer: { + type: 'void', + 'x-component': 'Action.Drawer.Footer', + properties: { + close: { + title: 'Close', + 'x-component': 'Action', + 'x-component-props': { + type: 'default', }, + 'x-use-component-props': 'useCloseActionProps', + }, + submit: { + title: 'Submit', + 'x-component': 'Action', + 'x-use-component-props': 'useSubmitActionProps', }, }, }, @@ -239,15 +232,25 @@ const App = getAppComponent({ }, }, }, - appOptions: { - plugins: [BlockSchemaComponentPlugin], - components: {}, - scopes: { - useSubmitActionProps, - useCloseActionProps, - useFormBlockProviderProps, - }, - }, +} + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin, BlockSchemaComponentPlugin], + designable: true, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/list/demos/with-action.tsx b/packages/core/client/src/schema-component/antd/list/demos/with-action.tsx index 57d540c844..f3611ce335 100644 --- a/packages/core/client/src/schema-component/antd/list/demos/with-action.tsx +++ b/packages/core/client/src/schema-component/antd/list/demos/with-action.tsx @@ -1,76 +1,69 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { + BlockSchemaComponentPlugin, + SchemaComponent, Plugin, +} from '@nocobase/client'; -import { BlockSchemaComponentPlugin } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'List.Decorator', - 'x-use-decorator-props': 'useListBlockDecoratorProps', - 'x-decorator-props': { - collection: 'roles', - dataSource: 'main', - action: 'list', - params: { - pageSize: 10, - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'List.Decorator', + 'x-use-decorator-props': 'useListBlockDecoratorProps', + 'x-decorator-props': { + collection: 'roles', + dataSource: 'main', + action: 'list', + params: { + pageSize: 10, }, - 'x-component': 'CardItem', - properties: { - actions: { - type: 'void', - 'x-component': 'ActionBar', - 'x-pattern': 'editable', - 'x-component-props': { - style: { - marginBottom: 20, - }, + }, + 'x-component': 'CardItem', + properties: { + actions: { + type: 'void', + 'x-component': 'ActionBar', + 'x-pattern': 'editable', + 'x-component-props': { + style: { + marginBottom: 20, }, - properties: { - filter: { - 'x-component': 'Filter.Action', - 'x-use-component-props': 'useFilterActionProps', - 'x-component-props': { - icon: 'FilterOutlined', - }, - 'x-align': 'left', + }, + properties: { + filter: { + 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', + 'x-component-props': { + icon: 'FilterOutlined', }, - refresh: { - title: 'Refresh', - 'x-component': 'Action', - 'x-align': 'left', - 'x-use-component-props': 'useRefreshActionProps', + 'x-align': 'left', + }, + refresh: { + title: 'Refresh', + 'x-component': 'Action', + 'x-align': 'left', + 'x-use-component-props': 'useRefreshActionProps', + }, + add: { + type: 'void', + 'x-component': 'Action', + title: 'Add New', + 'x-align': 'right', + 'x-component-props': { + type: 'primary', }, - add: { - type: 'void', - 'x-component': 'Action', - title: 'Add New', - 'x-align': 'right', - 'x-component-props': { - type: 'primary', - }, - properties: { - drawer: { - type: 'void', - 'x-component': 'Action.Drawer', - title: 'Drawer Title', - properties: { - tip: { - type: 'void', - 'x-component': 'Markdown.Void', - 'x-editable': false, - 'x-component-props': { - content: '请查看 [Action.Drawer](/components/action) 组件的文档', - }, + properties: { + drawer: { + type: 'void', + 'x-component': 'Action.Drawer', + title: 'Drawer Title', + properties: { + tip: { + type: 'void', + 'x-component': 'Markdown.Void', + 'x-editable': false, + 'x-component-props': { + content: '请查看 [Action.Drawer](/components/action) 组件的文档', }, }, }, @@ -78,37 +71,49 @@ const App = getAppComponent({ }, }, }, - list: { - type: 'array', - 'x-component': 'List', - properties: { - item: { - type: 'object', - 'x-component': 'List.Item', - 'x-read-pretty': true, - 'x-use-component-props': 'useListItemProps', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 1, - }, - title: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-index': 2, - }, + }, + list: { + type: 'array', + 'x-component': 'List', + properties: { + item: { + type: 'object', + 'x-component': 'List.Item', + 'x-read-pretty': true, + 'x-use-component-props': 'useListItemProps', + properties: { + name: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 1, + }, + title: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-index': 2, }, }, }, }, }, }, - appOptions: { - plugins: [BlockSchemaComponentPlugin], - }, +}; + +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin, BlockSchemaComponentPlugin], + designable: true, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/list/index.en-US.md b/packages/core/client/src/schema-component/antd/list/index.en-US.md new file mode 100644 index 0000000000..25294a65a4 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/list/index.en-US.md @@ -0,0 +1,25 @@ +# List + +List block component. It is a wrapper based on the ant-design [List](https://ant.design/components/list/) component. + +It needs to be used with `List.Decorator` and `List.Item`. `List.Decorator` is a secondary wrapper for `DataBlockProvider`, and its properties can be referred to [DataBlockProvider](/core/data-block/data-block-provider#property-details). + +```ts +type ListProps = AntdListProps; +``` + +## Basic Usage + + + +## With ActionBar + +The principle is the same as Table [ActionBar](/components/table-v2#with-actiontoolbar) + + + +## View Or Edit Record + +For detailed instructions, please refer to Table [View Or Edit Record](/components/table-v2#view-or-edit-record) + + diff --git a/packages/core/client/src/schema-component/antd/markdown/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/markdown/demos/demo1.tsx index c28ca47002..0f367231a0 100644 --- a/packages/core/client/src/schema-component/antd/markdown/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/markdown/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Markdown diff --git a/packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx index f9538c0f71..3aecf7e090 100644 --- a/packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/markdown/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Markdown.Void diff --git a/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/basic.tsx index afd9cc799a..7a291804a0 100644 --- a/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/basic.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Markdown', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Markdown', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/read-pretty.tsx index 749d071009..95141b2f85 100644 --- a/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/markdown/demos/new-demos/read-pretty.tsx @@ -1,31 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'boolean', - title: 'Test', - default: '# Title\ncontent', - 'x-decorator': 'FormItem', - 'x-component': 'Markdown', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'boolean', + title: 'Test', + default: '# Title\ncontent', + 'x-decorator': 'FormItem', + 'x-component': 'Markdown', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/markdown/index.en-US.md b/packages/core/client/src/schema-component/antd/markdown/index.en-US.md new file mode 100644 index 0000000000..812289e961 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/markdown/index.en-US.md @@ -0,0 +1,33 @@ +# Markdown + +Markdown editor. For more properties, please refer to [TextArea](https://ant.design/components/input#inputtextarea). + +## Markdown + +### Basic + +```ts +interface MarkdownProps extends TextAreaProps {} +``` + + + +### Read Pretty + +```ts +interface MarkdownReadPrettyProps extends InputTextAreaReadPrettyProps {} +``` + + + +## Markdown.Void + +```ts +interface MarkdownVoidProps extends Omit { + defaultValue?: string; + onSubmit?: (value: string) => void; + onCancel?: (e: React.MouseEvent) => void; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/menu/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/menu/demos/demo1.tsx index 6a29c1d1b9..485fd1e3fb 100644 --- a/packages/core/client/src/schema-component/antd/menu/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/menu/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Menu diff --git a/packages/core/client/src/schema-component/antd/menu/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/menu/demos/demo2.tsx index a261baaf34..99b2ace94d 100644 --- a/packages/core/client/src/schema-component/antd/menu/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/menu/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Menu diff --git a/packages/core/client/src/schema-component/antd/menu/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/menu/demos/demo3.tsx index 8f2924ccdb..cfaa813a23 100644 --- a/packages/core/client/src/schema-component/antd/menu/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/menu/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Menu diff --git a/packages/core/client/src/schema-component/antd/menu/index.en-US.md b/packages/core/client/src/schema-component/antd/menu/index.en-US.md new file mode 100644 index 0000000000..a12da5898b --- /dev/null +++ b/packages/core/client/src/schema-component/antd/menu/index.en-US.md @@ -0,0 +1,20 @@ +# Menu + +## Nodes + +- Menu +- Menu.ItemGroup +- Menu.Item +- Menu.SubMenu +- Menu.Divider +- Menu.URL +- Menu.Link +- Menu.Action + +## Examples + + + + + + diff --git a/packages/core/client/src/schema-component/antd/nanoid-input/demos/basic.tsx b/packages/core/client/src/schema-component/antd/nanoid-input/demos/basic.tsx index 12faad8ce3..69446578d8 100644 --- a/packages/core/client/src/schema-component/antd/nanoid-input/demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/nanoid-input/demos/basic.tsx @@ -1,30 +1,35 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - default: 'rdQ1G9iPEtjR6BpIAPilZ', - 'x-decorator': 'FormItem', - 'x-component': 'NanoIDInput', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + default: 'rdQ1G9iPEtjR6BpIAPilZ', + 'x-decorator': 'FormItem', + 'x-component': 'NanoIDInput', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/nanoid-input/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/nanoid-input/demos/read-pretty.tsx index a277074d41..015d5ac483 100644 --- a/packages/core/client/src/schema-component/antd/nanoid-input/demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/nanoid-input/demos/read-pretty.tsx @@ -1,31 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - title: 'Test', - default: 'rdQ1G9iPEtjR6BpIAPilZ', - 'x-decorator': 'FormItem', - 'x-component': 'NanoIDInput', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + title: 'Test', + default: 'rdQ1G9iPEtjR6BpIAPilZ', + 'x-decorator': 'FormItem', + 'x-component': 'NanoIDInput', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/nanoid-input/index.en-US.md b/packages/core/client/src/schema-component/antd/nanoid-input/index.en-US.md new file mode 100644 index 0000000000..dab9063cfb --- /dev/null +++ b/packages/core/client/src/schema-component/antd/nanoid-input/index.en-US.md @@ -0,0 +1,19 @@ +# NanoIDInput + +JavaScript string ID generator component, based on [NanoID](https://github.com/ai/nanoid). + +## Basic Usage + +```ts +type NanoIDInputProps = AntdInputProps +``` + + + +## Read Pretty + + + +```ts +type NanoIDInputReadPrettyProps = InputReadPrettyProps +``` diff --git a/packages/core/client/src/schema-component/antd/page/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/page/demos/demo1.tsx index 5f31303f5c..e947ddbc50 100644 --- a/packages/core/client/src/schema-component/antd/page/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/page/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { DocumentTitleProvider, Page, SchemaComponent, SchemaComponentProvider, Application } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/page/index.en-US.md b/packages/core/client/src/schema-component/antd/page/index.en-US.md new file mode 100644 index 0000000000..1720833bd5 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/page/index.en-US.md @@ -0,0 +1,5 @@ +# Page + +Can be used in conjunction with DocumentTitleProvider to display the page title on document.title. + + diff --git a/packages/core/client/src/schema-component/antd/pagination/demos/basic.tsx b/packages/core/client/src/schema-component/antd/pagination/demos/basic.tsx index 133bcbc619..ab1c97e79d 100644 --- a/packages/core/client/src/schema-component/antd/pagination/demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/pagination/demos/basic.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Pagination } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/schema-component/antd/pagination/demos/hide.tsx b/packages/core/client/src/schema-component/antd/pagination/demos/hide.tsx index 6027a357e8..e9be8fc480 100644 --- a/packages/core/client/src/schema-component/antd/pagination/demos/hide.tsx +++ b/packages/core/client/src/schema-component/antd/pagination/demos/hide.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Pagination } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/schema-component/antd/pagination/index.en-US.md b/packages/core/client/src/schema-component/antd/pagination/index.en-US.md new file mode 100644 index 0000000000..6654587697 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/pagination/index.en-US.md @@ -0,0 +1,18 @@ + +# Pagination + +Pagination component. It is a wrapper based on the ant-design [Pagination](https://ant.design/components/pagination/) component. + +```ts +interface PaginationProps extends AntdPaginationProps { + hidden?: boolean; +} +``` + +## Basic Usage + + + +## Hide + + diff --git a/packages/core/client/src/schema-component/antd/password/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/password/demos/demo1.tsx index e7fba7aaad..6747cb98e1 100644 --- a/packages/core/client/src/schema-component/antd/password/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/password/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Password diff --git a/packages/core/client/src/schema-component/antd/password/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/password/demos/demo2.tsx index 9cfdda57de..9dcb02374c 100644 --- a/packages/core/client/src/schema-component/antd/password/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/password/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Check strength diff --git a/packages/core/client/src/schema-component/antd/password/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/password/demos/new-demos/basic.tsx index 02c68084f3..8e233f1fb0 100644 --- a/packages/core/client/src/schema-component/antd/password/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/password/demos/new-demos/basic.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Password', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Password', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/password/demos/new-demos/checkStrength.tsx b/packages/core/client/src/schema-component/antd/password/demos/new-demos/checkStrength.tsx index 1638cb6170..96dcda84e2 100644 --- a/packages/core/client/src/schema-component/antd/password/demos/new-demos/checkStrength.tsx +++ b/packages/core/client/src/schema-component/antd/password/demos/new-demos/checkStrength.tsx @@ -1,32 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Password', - 'x-component-props': { - checkStrength: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Password', + 'x-component-props': { + checkStrength: true, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/password/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/password/demos/new-demos/read-pretty.tsx index 76d5798521..5c21db5f1d 100644 --- a/packages/core/client/src/schema-component/antd/password/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/password/demos/new-demos/read-pretty.tsx @@ -1,31 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - title: 'Test', - default: '123', - 'x-decorator': 'FormItem', - 'x-component': 'Password', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + title: 'Test', + default: '123', + 'x-decorator': 'FormItem', + 'x-component': 'Password', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/password/index.en-US.md b/packages/core/client/src/schema-component/antd/password/index.en-US.md new file mode 100644 index 0000000000..7d4471568e --- /dev/null +++ b/packages/core/client/src/schema-component/antd/password/index.en-US.md @@ -0,0 +1,27 @@ +# Password + +Password input box. For more properties, please refer to the [antd documentation](https://ant.design/components/input#components-input-demo-password-input). + +```ts +interface PasswordProps extends AntdPasswordProps { + checkStrength?: boolean; +} +``` + +## Basic Usage + + + +## Check strength + + + +## Read Pretty + +```ts +interface PasswordReadPrettyProps { + value?: string; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/percent/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/percent/demos/new-demos/basic.tsx index 7e251479db..9fe432e395 100644 --- a/packages/core/client/src/schema-component/antd/percent/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/percent/demos/new-demos/basic.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'number', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Percent', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'number', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Percent', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/percent/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/percent/demos/new-demos/read-pretty.tsx index 1c1eb3e744..d3cfe93cb2 100644 --- a/packages/core/client/src/schema-component/antd/percent/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/percent/demos/new-demos/read-pretty.tsx @@ -1,31 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'number', - title: 'Test', - default: 1.23, - 'x-decorator': 'FormItem', - 'x-component': 'Percent', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'number', + title: 'Test', + default: 1.23, + 'x-decorator': 'FormItem', + 'x-component': 'Percent', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/percent/demos/percent.tsx b/packages/core/client/src/schema-component/antd/percent/demos/percent.tsx index c95dca72bd..e142f1a9ed 100644 --- a/packages/core/client/src/schema-component/antd/percent/demos/percent.tsx +++ b/packages/core/client/src/schema-component/antd/percent/demos/percent.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { Percent, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/percent/index.en-US.md b/packages/core/client/src/schema-component/antd/percent/index.en-US.md new file mode 100644 index 0000000000..73dffc3996 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/percent/index.en-US.md @@ -0,0 +1,21 @@ + + +# Percent + +Percentage input box. For more properties, please refer to [InputNumber](https://ant.design/components/input-number/). + +## Basic Usage + +```ts +type PercentProps = AntdInputNumberProps; +``` + + + +## Read Pretty + +```ts +interface PercentReadPrettyProps extends InputNumberReadPrettyProps {} +``` + + diff --git a/packages/core/client/src/schema-component/antd/preview/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/preview/demos/demo1.tsx index 18ae06f67a..4ba017ef52 100644 --- a/packages/core/client/src/schema-component/antd/preview/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/preview/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Preview diff --git a/packages/core/client/src/schema-component/antd/preview/index.en-US.md b/packages/core/client/src/schema-component/antd/preview/index.en-US.md new file mode 100644 index 0000000000..4ef4bc6424 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/preview/index.en-US.md @@ -0,0 +1,14 @@ +# Preview + +Used for previewing uploaded files. + +```ts +type UploadProps = Omit & { + onChange?: (fileList: UploadFile[]) => void; + serviceErrorMessage?: string; + value?: any; + size?: string; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/quick-edit/demos/basic.tsx b/packages/core/client/src/schema-component/antd/quick-edit/demos/basic.tsx index cc53ab55c6..38b21aabb8 100644 --- a/packages/core/client/src/schema-component/antd/quick-edit/demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/quick-edit/demos/basic.tsx @@ -1,48 +1,48 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { BlockSchemaComponentPlugin } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, BlockSchemaComponentPlugin } from '@nocobase/client'; -const App = getAppComponent({ - designable: true, - enableUserListDataBlock: true, - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormBlockProvider', - 'x-use-decorator-props': 'useCreateFormBlockDecoratorProps', - 'x-decorator-props': { - collection: 'users', - }, - 'x-component': 'FormV2', - 'x-use-component-props': 'useCreateFormBlockProps', - properties: { - nickname: { - default: 'aaa', - 'x-collection-field': 'roles.long-text', - 'x-component': 'CollectionField', - 'x-component-props': { - ellipsis: true, - }, - 'x-decorator': 'QuickEdit', - 'x-decorator-props': { - labelStyle: { - display: 'none', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useCreateFormBlockDecoratorProps', + 'x-decorator-props': { + collection: 'users', + }, + 'x-component': 'FormV2', + 'x-use-component-props': 'useCreateFormBlockProps', + properties: { + nickname: { + default: 'aaa', + 'x-collection-field': 'roles.long-text', + 'x-component': 'CollectionField', + 'x-component-props': { + ellipsis: true, + }, + 'x-decorator': 'QuickEdit', + 'x-decorator-props': { + labelStyle: { + display: 'none', }, }, }, }, - appOptions: { - plugins: [BlockSchemaComponentPlugin], - }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin, BlockSchemaComponentPlugin], + designable: true, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/quick-edit/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/quick-edit/demos/read-pretty.tsx index d0a6b929ab..4f5d132f4e 100644 --- a/packages/core/client/src/schema-component/antd/quick-edit/demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/quick-edit/demos/read-pretty.tsx @@ -1,45 +1,45 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { BlockSchemaComponentPlugin } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, BlockSchemaComponentPlugin } from '@nocobase/client'; -const App = getAppComponent({ - designable: true, - enableUserListDataBlock: true, - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormBlockProvider', - 'x-use-decorator-props': 'useCreateFormBlockDecoratorProps', - 'x-decorator-props': { - collection: 'users', - }, - 'x-component': 'FormV2', - 'x-use-component-props': 'useCreateFormBlockProps', - properties: { - nickname: { - default: 'aaa', - 'x-pattern': 'readPretty', - 'x-component': 'CollectionField', - 'x-decorator': 'QuickEdit', - 'x-decorator-props': { - labelStyle: { - display: 'none', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useCreateFormBlockDecoratorProps', + 'x-decorator-props': { + collection: 'users', + }, + 'x-component': 'FormV2', + 'x-use-component-props': 'useCreateFormBlockProps', + properties: { + nickname: { + default: 'aaa', + 'x-pattern': 'readPretty', + 'x-component': 'CollectionField', + 'x-decorator': 'QuickEdit', + 'x-decorator-props': { + labelStyle: { + display: 'none', }, }, }, }, - appOptions: { - plugins: [BlockSchemaComponentPlugin], - }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin, BlockSchemaComponentPlugin], + designable: true, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/quick-edit/demos/subtable.tsx b/packages/core/client/src/schema-component/antd/quick-edit/demos/subtable.tsx index 585202c45a..adfd1f15b0 100644 --- a/packages/core/client/src/schema-component/antd/quick-edit/demos/subtable.tsx +++ b/packages/core/client/src/schema-component/antd/quick-edit/demos/subtable.tsx @@ -1,72 +1,62 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { BlockSchemaComponentPlugin } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, BlockSchemaComponentPlugin } from '@nocobase/client'; -const App = getAppComponent({ - designable: true, - enableUserListDataBlock: true, - schema: { - type: 'void', - 'x-decorator': 'FormBlockProvider', - 'x-use-decorator-props': 'useCreateFormBlockDecoratorProps', - 'x-decorator-props': { - dataSource: 'main', - collection: 'users', - }, - 'x-component': 'div', - properties: { - '45i9guirvtz': { - type: 'void', - 'x-component': 'FormV2', - 'x-use-component-props': 'useCreateFormBlockProps', - properties: { - roles: { - type: 'string', - 'x-component': 'CollectionField', - 'x-decorator': 'FormItem', - 'x-collection-field': 'users.roles', - 'x-component-props': { - fieldNames: { - label: 'name', - value: 'name', - }, - addMode: 'modalAdd', - mode: 'SubTable', +const schema = { + name: 'test', + type: 'void', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useCreateFormBlockDecoratorProps', + 'x-decorator-props': { + dataSource: 'main', + collection: 'users', + }, + 'x-component': 'div', + properties: { + '45i9guirvtz': { + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useCreateFormBlockProps', + properties: { + roles: { + type: 'string', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-collection-field': 'users.roles', + 'x-component-props': { + fieldNames: { + label: 'name', + value: 'name', }, - default: null, - properties: { - e2l1f5wo2st: { - type: 'void', - 'x-component': 'AssociationField.SubTable', - properties: { - '9x9jysv3hka': { - type: 'void', - 'x-decorator': 'TableV2.Column.Decorator', - 'x-component': 'TableV2.Column', - properties: { - 'long-text': { - default: 'aaa', - 'x-collection-field': 'roles.long-text', - 'x-component': 'CollectionField', - 'x-component-props': { - ellipsis: true, - }, - 'x-decorator': 'QuickEdit', - 'x-decorator-props': { - labelStyle: { - display: 'none', - }, - }, - 'x-disabled': false, + addMode: 'modalAdd', + mode: 'SubTable', + }, + default: null, + properties: { + e2l1f5wo2st: { + type: 'void', + 'x-component': 'AssociationField.SubTable', + properties: { + '9x9jysv3hka': { + type: 'void', + 'x-decorator': 'TableV2.Column.Decorator', + 'x-component': 'TableV2.Column', + properties: { + 'long-text': { + default: 'aaa', + 'x-collection-field': 'roles.long-text', + 'x-component': 'CollectionField', + 'x-component-props': { + ellipsis: true, }, + 'x-decorator': 'QuickEdit', + 'x-decorator-props': { + labelStyle: { + display: 'none', + }, + }, + 'x-disabled': false, }, }, }, @@ -77,9 +67,20 @@ const App = getAppComponent({ }, }, }, - appOptions: { - plugins: [BlockSchemaComponentPlugin], - }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin, BlockSchemaComponentPlugin], + designable: true, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/quick-edit/index.en-US.md b/packages/core/client/src/schema-component/antd/quick-edit/index.en-US.md new file mode 100644 index 0000000000..5a1e45b723 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/quick-edit/index.en-US.md @@ -0,0 +1,27 @@ +# QuickEdit + +QuickEdit component is used for quickly editing data and can be used in Table cells. + +```ts +import { IFormItemProps } from '@formily/antd-v5'; + +interface QuickEditProps extends IFormItemProps { + children?: React.ReactNode; +} +``` + +## Basic + + + +## Read Pretty + +Under the `'x-pattern': 'readPretty'` configuration, only the text is displayed and the editor is not shown when clicked. + + + +## SubTable + +Used in `SubTable`. + + diff --git a/packages/core/client/src/schema-component/antd/radio/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/radio/demos/demo1.tsx index 1c599b6eea..2130d310e7 100644 --- a/packages/core/client/src/schema-component/antd/radio/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/radio/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Basic diff --git a/packages/core/client/src/schema-component/antd/radio/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/radio/demos/demo2.tsx index 0cbfe1cfef..074bfff24b 100644 --- a/packages/core/client/src/schema-component/antd/radio/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/radio/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Radio Group diff --git a/packages/core/client/src/schema-component/antd/radio/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/radio/demos/demo3.tsx index 8bbe22abf4..aaf41048f0 100644 --- a/packages/core/client/src/schema-component/antd/radio/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/radio/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Radio Group with color diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-basic.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-basic.tsx index daba013f1a..5648deb98c 100644 --- a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-basic.tsx +++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-basic.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -20,22 +14,33 @@ const options = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'number', - title: 'Test', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Radio.Group', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'number', + title: 'Test', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Radio.Group', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty-color.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty-color.tsx index bb05763f1f..7b651628b2 100644 --- a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty-color.tsx +++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty-color.tsx @@ -1,44 +1,48 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { label: '男', value: 1, - color: 'blue', }, { label: '女', value: 2, - color: 'red', }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'number', - default: 2, - title: 'Test', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Radio.Group', - }, + +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'number', + default: 2, + title: 'Test', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Radio.Group', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty.tsx index ff2cffce02..07803eba9e 100644 --- a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/group-read-pretty.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -20,24 +14,35 @@ const options = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'number', - title: 'Test', - enum: options, - default: 1, - 'x-decorator': 'FormItem', - 'x-component': 'Radio.Group', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'number', + title: 'Test', + enum: options, + default: 1, + 'x-decorator': 'FormItem', + 'x-component': 'Radio.Group', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-basic.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-basic.tsx index 90dd33bbc2..2ba91abfd1 100644 --- a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-basic.tsx +++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-basic.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Radio', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Radio', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-read-pretty.tsx b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-read-pretty.tsx index 25f7851347..56e6aa73f4 100644 --- a/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/radio/demos/new-demos/radio-read-pretty.tsx @@ -1,38 +1,43 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test1: { - type: 'boolean', - title: 'Test1', - default: true, - 'x-decorator': 'FormItem', - 'x-component': 'Radio', - }, - test2: { - type: 'boolean', - title: 'Test2', - default: false, - 'x-decorator': 'FormItem', - 'x-component': 'Radio', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test1: { + type: 'boolean', + title: 'Test1', + default: true, + 'x-decorator': 'FormItem', + 'x-component': 'Radio', + }, + test2: { + type: 'boolean', + title: 'Test2', + default: false, + 'x-decorator': 'FormItem', + 'x-component': 'Radio', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/radio/index.en-US.md b/packages/core/client/src/schema-component/antd/radio/index.en-US.md new file mode 100644 index 0000000000..0fe18ea83d --- /dev/null +++ b/packages/core/client/src/schema-component/antd/radio/index.en-US.md @@ -0,0 +1,41 @@ +# Radio + +Radio. It is a wrapper based on the `antd` [Radio](https://ant.design/components/radio/) component. + +## Radio + +### Basic Usage + +```ts +type RadioProps = AntdRadioProps; +``` + + + +### Read Pretty + +```ts +interface RadioReadPrettyProps { + value?: boolean; +} +``` + + + +## Radio Group + +```ts +type RadioGroupProps = AntdRadioGroupProps; +``` + +### Basic Usage + + + +### Read Pretty + + + +### Read Pretty with color + + diff --git a/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx index 4a76b6cd02..8897b3a6f0 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: 勾选 diff --git a/packages/core/client/src/schema-component/antd/record-picker/demos/mockData.ts b/packages/core/client/src/schema-component/antd/record-picker/demos/mockData.ts index 4b1d66d1d5..5ccf94ffb0 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/demos/mockData.ts +++ b/packages/core/client/src/schema-component/antd/record-picker/demos/mockData.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + export default { data: [ diff --git a/packages/core/client/src/schema-component/antd/record-picker/index.en-US.md b/packages/core/client/src/schema-component/antd/record-picker/index.en-US.md new file mode 100644 index 0000000000..0790fefafc --- /dev/null +++ b/packages/core/client/src/schema-component/antd/record-picker/index.en-US.md @@ -0,0 +1,75 @@ +# RecordPicker + +Used for selecting associated fields. + +## JSON Schema + +### Examples + + + +Select options through a popup window, where the options are displayed in a table. Configure it within the specific `RecordPicker.RowSelection` node, and it is only effective when `x-read-pretty: false`. + +```ts +{ + type: 'array', + default: [ + { id: 1, name: 'tag1' }, + { id: 2, name: 'tag2' }, + ], + 'x-component': 'RecordPicker', + properties: { + rowSelection: { + 'x-component': 'RecordPicker.RowSelection', + }, + }, +} +``` + +When `x-read-pretty: true`, you can configure the schema of the selected item in `RecordPicker.SelectedItem`. + +```ts +{ + type: 'array', + 'x-pattern': 'readPretty', + 'x-component': 'RecordPicker', + properties: { + item: { + 'x-component': 'RecordPicker.SelectedItem', + 'x-component-props': { + fieldNames: { + value: 'id', + label: 'name' + }, + }, + properties: { + drawer1: { + 'x-component': 'Action.Drawer', + type: 'void', + title: 'Drawer Title', + properties: { + hello1: { + 'x-content': 'Hello', + title: 'T1', + }, + footer1: { + 'x-component': 'Action.Drawer.Footer', + type: 'void', + properties: { + close1: { + type: 'void', + title: 'Close', + 'x-component': 'Action', + 'x-component-props': { + // useAction: '{{ useCloseAction }}', + }, + }, + }, + }, + }, + }, + }, + }, + }, +} +``` diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/demo1.tsx index f0ffcae1a9..8f4392d407 100644 --- a/packages/core/client/src/schema-component/antd/remote-select/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/remote-select/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { APIClientProvider, FormProvider, RemoteSelect, SchemaComponent } from '@nocobase/client'; import React from 'react'; diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/basic.tsx index 5d21f02d7e..45beb75ab3 100644 --- a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/basic.tsx @@ -1,39 +1,44 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'RemoteSelect', - 'x-component-props': { - fieldNames: { - label: 'title', - value: 'id', - }, - service: { - resource: 'posts', - action: 'list', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'RemoteSelect', + 'x-component-props': { + fieldNames: { + label: 'title', + value: 'id', + }, + service: { + resource: 'posts', + action: 'list', }, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { 'posts:list': { data: [ @@ -51,4 +56,4 @@ const App = getAppComponent({ delayResponse: 300, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/manual.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/manual.tsx index 8587f616dc..e3b0693b11 100644 --- a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/manual.tsx +++ b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/manual.tsx @@ -1,40 +1,45 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'RemoteSelect', - 'x-component-props': { - fieldNames: { - label: 'title', - value: 'id', - }, - service: { - resource: 'posts', - action: 'list', - }, - manual: false, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'RemoteSelect', + 'x-component-props': { + fieldNames: { + label: 'title', + value: 'id', }, + service: { + resource: 'posts', + action: 'list', + }, + manual: false, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { 'posts:list': { data: [ @@ -52,4 +57,4 @@ const App = getAppComponent({ delayResponse: 300, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/multiple.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/multiple.tsx index 0f3fdd992f..a41804c127 100644 --- a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/multiple.tsx +++ b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/multiple.tsx @@ -1,40 +1,45 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'RemoteSelect', - 'x-component-props': { - fieldNames: { - label: 'title', - value: 'id', - }, - service: { - resource: 'posts', - action: 'list', - }, - multiple: true, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'RemoteSelect', + 'x-component-props': { + fieldNames: { + label: 'title', + value: 'id', }, + service: { + resource: 'posts', + action: 'list', + }, + multiple: true, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { 'posts:list': { data: [ @@ -52,4 +57,4 @@ const App = getAppComponent({ delayResponse: 300, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/read-pretty.tsx index 13990eca84..04af0768e8 100644 --- a/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/remote-select/demos/new-demos/read-pretty.tsx @@ -1,41 +1,46 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'boolean', - title: 'Test', - default: 1, - 'x-decorator': 'FormItem', - 'x-component': 'RemoteSelect', - 'x-component-props': { - fieldNames: { - label: 'title', - value: 'id', - }, - service: { - resource: 'posts', - action: 'list', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'boolean', + title: 'Test', + default: 1, + 'x-decorator': 'FormItem', + 'x-component': 'RemoteSelect', + 'x-component-props': { + fieldNames: { + label: 'title', + value: 'id', + }, + service: { + resource: 'posts', + action: 'list', }, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { 'posts:list': { data: [ @@ -53,4 +58,4 @@ const App = getAppComponent({ delayResponse: 300, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/remote-select/index.en-US.md b/packages/core/client/src/schema-component/antd/remote-select/index.en-US.md new file mode 100644 index 0000000000..37d3c12ba5 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/remote-select/index.en-US.md @@ -0,0 +1,52 @@ +# RemoteSelect + +请求远程数据的 Select 组件。其基于 [Select](/components/select) 组件和 [useRequest()](/core/request)。 + +```ts + +export type RemoteSelectProps

= SelectProps & { + onChange?: (v: any) => void; + /** + * useRequest() `debounceWait` parameter + */ + wait?: number; + /** + * useRequest() `manual` parameter + * @default true + */ + manual?: boolean; + targetField?: any; + /** + * useRequest() `service` parameter + */ + service: ResourceActionOptions

; + target: string; + mapOptions?: (data: any) => SelectProps['fieldNames']; + dataSource?: string; + CustomDropdownRender?: (v: any) => any; + optionFilter?: (option: any) => boolean; +}; +``` + +## Basic usage + + + +## Manual false + + + +## Multiple + + + +## Read Pretty + +```ts +interface RemoteSelectReadPrettyProps extends SelectReadPrettyProps { + fieldNames?: SelectProps['fieldNames']; + service: ResourceActionOptions; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/rich-text/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/rich-text/demos/demo1.tsx index 08105e190d..c32ad08431 100644 --- a/packages/core/client/src/schema-component/antd/rich-text/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/rich-text/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { RichText, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/basic.tsx index 35748983b7..d1a244c64f 100644 --- a/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/basic.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'number', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'RichText', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'number', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'RichText', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/read-pretty.tsx index 0957be5ce5..1e037f4f28 100644 --- a/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/rich-text/demos/new-demos/read-pretty.tsx @@ -1,32 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'number', - default: - '

Hello NocoBase

', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'RichText', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'number', + default: + '

Hello NocoBase

', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'RichText', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/rich-text/index.en-US.md b/packages/core/client/src/schema-component/antd/rich-text/index.en-US.md new file mode 100644 index 0000000000..9f27b70e2b --- /dev/null +++ b/packages/core/client/src/schema-component/antd/rich-text/index.en-US.md @@ -0,0 +1,23 @@ +# Rich Text + +Rich Text Editor. It is a wrapper based on [react-quill](https://github.com/zenoamaro/react-quill). + +## Basic Usage + +```ts +interface RichTextProps { + value?: string; + defaultValue?: string; + disabled?: boolean; +} +``` + + + +## Read Pretty + +```ts +type RichTextReadPrettyProps = HtmlReadPrettyProps; +``` + + diff --git a/packages/core/client/src/schema-component/antd/select/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/select/demos/demo1.tsx index 82bebd6418..4fb48bbcbd 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Select diff --git a/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx index e15f55ec95..73e96ecbdf 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Select diff --git a/packages/core/client/src/schema-component/antd/select/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/select/demos/demo3.tsx index 1b2d21dddb..bec4f8363f 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Select diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/basic.tsx index 89897cd0d8..ec76a71735 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/basic.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -22,22 +16,33 @@ const options = [ { label: '浙江', value: 'ZX' }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Select', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Select', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/fieldNames.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/fieldNames.tsx index ef6f4058e0..bd2f81043c 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/new-demos/fieldNames.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/fieldNames.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -22,29 +16,40 @@ const options = [ { name: '浙江', id: 'ZX' }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Select', - 'x-component-props': { - fieldNames: { - label: 'name', - value: 'id', - children: 'children', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + fieldNames: { + label: 'name', + value: 'id', + children: 'children', }, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/multiple.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/multiple.tsx index a2154f012f..9a584805ac 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/new-demos/multiple.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/multiple.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -22,25 +16,36 @@ const options = [ { label: '浙江', value: 'ZX' }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Select', - 'x-component-props': { - mode: 'multiple', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + mode: 'multiple', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/object-value.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/object-value.tsx index 78fb71332a..b88fecf3a0 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/new-demos/object-value.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/object-value.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -22,25 +16,36 @@ const options = [ { label: '浙江', value: 'ZX' }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Select', - 'x-component-props': { - objectValue: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-component-props': { + objectValue: true, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/select/demos/new-demos/read-pretty.tsx index 7b6f58e749..bf46fdf814 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/new-demos/read-pretty.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const options = [ { @@ -22,74 +16,85 @@ const options = [ { label: '浙江', value: 'ZX' }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test1: { - type: 'string', - title: 'Test', - enum: options, - default: 'XZ', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - }, - test4: { - type: 'string', - title: 'Test(fieldNames)', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - default: 'XZ', - enum: [ - { - name: '福建', - id: 'FuJian', - children: [ - { name: '{{t("福州")}}', id: 'FZ' }, - { name: '莆田', id: 'PT' }, - ], - }, - { name: '江苏', id: 'XZ' }, - { name: '浙江', id: 'ZX' }, - ], - 'x-component-props': { - fieldNames: { - label: 'name', - value: 'id', - children: 'children', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test1: { + type: 'string', + title: 'Test', + enum: options, + default: 'XZ', + 'x-decorator': 'FormItem', + 'x-component': 'Select', + }, + test4: { + type: 'string', + title: 'Test(fieldNames)', + 'x-decorator': 'FormItem', + 'x-component': 'Select', + default: 'XZ', + enum: [ + { + name: '福建', + id: 'FuJian', + children: [ + { name: '{{t("福州")}}', id: 'FZ' }, + { name: '莆田', id: 'PT' }, + ], }, - }, - test2: { - type: 'string', - title: 'Test(multiple)', - default: ['XZ', 'ZX'], - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Select', - }, - test3: { - type: 'string', - title: 'Test(ellipsis)', - default: ['XZ', 'ZX', 'FuJian', 'FZ'], - enum: options, - 'x-decorator': 'FormItem', - 'x-component': 'Select', - 'x-decorator-props': { - style: { - width: 130, - }, - }, - 'x-component-props': { - ellipsis: true, + { name: '江苏', id: 'XZ' }, + { name: '浙江', id: 'ZX' }, + ], + 'x-component-props': { + fieldNames: { + label: 'name', + value: 'id', + children: 'children', }, }, }, + test2: { + type: 'string', + title: 'Test(multiple)', + default: ['XZ', 'ZX'], + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Select', + }, + test3: { + type: 'string', + title: 'Test(ellipsis)', + default: ['XZ', 'ZX', 'FuJian', 'FZ'], + enum: options, + 'x-decorator': 'FormItem', + 'x-component': 'Select', + 'x-decorator-props': { + style: { + width: 130, + }, + }, + 'x-component-props': { + ellipsis: true, + }, + }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/select/index.en-US.md b/packages/core/client/src/schema-component/antd/select/index.en-US.md new file mode 100644 index 0000000000..08e0ab519c --- /dev/null +++ b/packages/core/client/src/schema-component/antd/select/index.en-US.md @@ -0,0 +1,57 @@ +# Select + +Selector. It is a wrapper based on the [Select](https://ant.design/components/select/) component from Ant Design. + +```ts +interface FieldNames { + label?: string; + value?: string; + color?: string; + options?: string; +} + +type SelectProps = AntdSelectProps & { + /** + * Whether it is an object value + */ + objectValue?: boolean; + /** + * format options + * @default { label: 'label', value: 'value', color: 'color', options: 'children' } + */ + fieldNames: FieldNames; +}; +``` + +## Basic Usage + + + +## Multiple + + + +## ObjectValue + + + +## fieldNames + + + +## Read Pretty + +```ts +interface SelectReadPrettyProps { + value: any; + options?: any[]; + ellipsis?: boolean; + /** + * format options + * @default { label: 'label', value: 'value', color: 'color', options: 'children' } + */ + fieldNames?: FieldNames; +} +``` + + diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/collections.ts b/packages/core/client/src/schema-component/antd/table-v2/demos/collections.ts index f97060d3a0..de094a788a 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/collections.ts +++ b/packages/core/client/src/schema-component/antd/table-v2/demos/collections.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + export default { data: [ diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx index bde9dc3ed8..c3a3f3dc4f 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema, useForm } from '@formily/react'; import { diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/demo2.tsx index 60f3fd47c3..2b4fb83c40 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ArrayField } from '@formily/core'; import { connect, ISchema, observer, RecursionField, useField, useFieldSchema } from '@formily/react'; diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/action-toolbar.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/action-toolbar.tsx index 39af814909..b9d875ab3d 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/action-toolbar.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/action-toolbar.tsx @@ -1,139 +1,131 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ +import React from 'react'; import { - ActionProps, TableBlockProvider, useBulkDestroyActionProps, - useDataBlockRequest, useFilterActionProps, useRefreshActionProps, useTableBlockProps, + SchemaComponent, + Plugin, + ISchema } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import { mockApp } from '@nocobase/client/demo-utils'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-decorator': 'TableBlockProvider', - 'x-decorator-props': { - collection: 'roles', - action: 'list', - params: { - pageSize: 2, - }, - showIndex: true, - dragSort: false, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-decorator': 'TableBlockProvider', + 'x-decorator-props': { + collection: 'roles', + action: 'list', + params: { + pageSize: 2, }, - properties: { - // 添加按钮 - actions: { - type: 'void', - 'x-component': 'ActionBar', - 'x-component-props': { - style: { - marginBottom: 20, - }, + showIndex: true, + dragSort: false, + }, + properties: { + // 添加按钮 + actions: { + type: 'void', + 'x-component': 'ActionBar', + 'x-component-props': { + style: { + marginBottom: 20, }, - properties: { - filter: { - 'x-component': 'Filter.Action', - 'x-use-component-props': 'useFilterActionProps', - 'x-component-props': { - icon: 'FilterOutlined', - }, - 'x-align': 'left', + }, + properties: { + filter: { + 'x-component': 'Filter.Action', + 'x-use-component-props': 'useFilterActionProps', + 'x-component-props': { + icon: 'FilterOutlined', }, - refresh: { - title: 'Refresh', - 'x-component': 'Action', - 'x-align': 'left', - 'x-use-component-props': 'useRefreshActionProps', + 'x-align': 'left', + }, + refresh: { + title: 'Refresh', + 'x-component': 'Action', + 'x-align': 'left', + 'x-use-component-props': 'useRefreshActionProps', + }, + add: { + type: 'void', + 'x-component': 'Action', + title: 'Add New', + 'x-align': 'right', + 'x-component-props': { + type: 'primary', }, - add: { - type: 'void', - 'x-component': 'Action', - title: 'Add New', - 'x-align': 'right', - 'x-component-props': { - type: 'primary', - }, - properties: { - drawer: { - type: 'void', - 'x-component': 'Action.Drawer', - title: 'Drawer Title', - properties: { - tip: { - type: 'void', - 'x-component': 'Markdown.Void', - 'x-editable': false, - 'x-component-props': { - content: '请查看 [Action.Drawer](/components/action) 组件的文档', - }, + properties: { + drawer: { + type: 'void', + 'x-component': 'Action.Drawer', + title: 'Drawer Title', + properties: { + tip: { + type: 'void', + 'x-component': 'Markdown.Void', + 'x-editable': false, + 'x-component-props': { + content: '请查看 [Action.Drawer](/components/action) 组件的文档', }, }, }, }, }, - bucketDelete: { - title: 'Delete', - 'x-action': 'destroy', - 'x-component': 'Action', - 'x-use-component-props': 'useBulkDestroyActionProps', - 'x-component-props': { - icon: 'DeleteOutlined', - confirm: { - title: "{{t('Delete record')}}", - content: "{{t('Are you sure you want to delete it?')}}", - }, + }, + bucketDelete: { + title: 'Delete', + 'x-action': 'destroy', + 'x-component': 'Action', + 'x-use-component-props': 'useBulkDestroyActionProps', + 'x-component-props': { + icon: 'DeleteOutlined', + confirm: { + title: "{{t('Delete record')}}", + content: "{{t('Are you sure you want to delete it?')}}", }, }, }, }, - table: { - type: 'array', - 'x-component': 'TableV2', - 'x-use-component-props': 'useTableBlockProps', - 'x-component-props': { - rowKey: 'id', - rowSelection: { - type: 'checkbox', - }, + }, + table: { + type: 'array', + 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', + 'x-component-props': { + rowKey: 'id', + rowSelection: { + type: 'checkbox', }, - properties: { - column1: { - type: 'void', - title: 'Username', - 'x-component': 'TableV2.Column', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-pattern': 'readPretty', - }, + }, + properties: { + column1: { + type: 'void', + title: 'Username', + 'x-component': 'TableV2.Column', + properties: { + name: { + type: 'string', + 'x-component': 'CollectionField', + 'x-pattern': 'readPretty', }, }, - column2: { - type: 'void', - title: 'Nickname', - 'x-component': 'TableV2.Column', - properties: { - title: { - type: 'string', - 'x-component': 'CollectionField', - 'x-pattern': 'readPretty', - }, + }, + column2: { + type: 'void', + title: 'Nickname', + 'x-component': 'TableV2.Column', + properties: { + title: { + type: 'string', + 'x-component': 'CollectionField', + 'x-pattern': 'readPretty', }, }, }, @@ -142,18 +134,28 @@ const App = getAppComponent({ }, }, }, - appOptions: { - components: { - TableBlockProvider, - }, - scopes: { - useTableBlockProps, - useBulkDestroyActionProps, - useRefreshActionProps, - useFilterActionProps, - }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { + TableBlockProvider, + }, + scopes: { + useTableBlockProps, + useBulkDestroyActionProps, + useRefreshActionProps, + useFilterActionProps, }, - delayResponse: 500, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/basic.tsx deleted file mode 100644 index 2099a79225..0000000000 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/basic.tsx +++ /dev/null @@ -1,62 +0,0 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ - -import { getAppComponent } from '@nocobase/test/web'; -import { ActionProps, useAPIClient } from '@nocobase/client'; -import { useForm } from '@formily/react'; -import { App as AntdApp } from 'antd'; - -function useMyTableProps() { - return {}; -} - -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'array', // 这里需要是 array 类型 - 'x-component': 'TableV2', - 'x-use-component-props': 'useMyTableProps', - properties: { - usernameColumn: { - type: 'void', - 'x-component': 'TableV2.Column', - properties: { - username: { - type: 'string', - 'x-component': 'Input', - title: 'Username', - 'x-pattern': 'readPretty', // 这里需要设置为 true - }, - }, - }, - nicknameColumn: { - type: 'void', - 'x-component': 'TableV2.Column', - nickname: { - type: 'string', - 'x-component': 'Input', - title: 'Nickname', - 'x-pattern': 'readPretty', // 这里需要设置为 true - }, - }, - }, - }, - }, - }, - appOptions: { - scopes: { - useMyTableProps, - }, - }, -}); - -export default App; diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/collection.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/collection.tsx index d6f815f516..dd0c9e6ed7 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/collection.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/collection.tsx @@ -1,66 +1,63 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { TableBlockProvider, useTableBlockProps } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { + TableBlockProvider, + useTableBlockProps, + SchemaComponent, + Plugin, + ISchema +} from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-decorator': 'TableBlockProvider', - 'x-decorator-props': { - collection: 'roles', // roles 表 - action: 'list', // 获取 roles 的列表 - params: { - pageSize: 2, - }, - showIndex: true, - dragSort: false, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-decorator': 'TableBlockProvider', + 'x-decorator-props': { + collection: 'roles', // roles 表 + action: 'list', // 获取 roles 的列表 + params: { + pageSize: 2, }, - properties: { - table: { - type: 'array', - 'x-component': 'TableV2', - 'x-use-component-props': 'useTableBlockProps', // 自动注入 Table 所需的 props - 'x-component-props': { - rowKey: 'id', - rowSelection: { - type: 'checkbox', - }, + showIndex: true, + dragSort: false, + }, + properties: { + table: { + type: 'array', + 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', // 自动注入 Table 所需的 props + 'x-component-props': { + rowKey: 'id', + rowSelection: { + type: 'checkbox', }, - properties: { - column1: { - type: 'void', - title: 'Role UID', - 'x-component': 'TableV2.Column', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-pattern': 'readPretty', // 这里要设置为 true - }, + }, + properties: { + column1: { + type: 'void', + title: 'Role UID', + 'x-component': 'TableV2.Column', + properties: { + name: { + type: 'string', + 'x-component': 'CollectionField', + 'x-pattern': 'readPretty', // 这里要设置为 true }, }, - column2: { - type: 'void', - title: 'Role name', - 'x-component': 'TableV2.Column', - properties: { - title: { - type: 'string', - 'x-component': 'CollectionField', - 'x-pattern': 'readPretty', - }, + }, + column2: { + type: 'void', + title: 'Role name', + 'x-component': 'TableV2.Column', + properties: { + title: { + type: 'string', + 'x-component': 'CollectionField', + 'x-pattern': 'readPretty', }, }, }, @@ -69,14 +66,25 @@ const App = getAppComponent({ }, }, }, - appOptions: { - components: { - TableBlockProvider, - }, - scopes: { - useTableBlockProps, - }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { + TableBlockProvider, + }, + scopes: { + useTableBlockProps, }, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/extend-collection.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/extend-collection.tsx index 9c3ade1944..80d959d3d2 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/extend-collection.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/extend-collection.tsx @@ -1,14 +1,14 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { ExtendCollectionsProvider, TableBlockProvider, useTableBlockProps } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { + TableBlockProvider, + useTableBlockProps, + SchemaComponent, + Plugin, + ExtendCollectionsProvider, + ISchema +} from '@nocobase/client'; +import { mockApp } from '@nocobase/client/demo-utils'; const bookCollection = { key: 'book', @@ -72,57 +72,55 @@ const bookCollection = { filterTargetKey: 'id', }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-decorator': 'TableBlockProvider', - 'x-decorator-props': { - collection: 'book', // book 表 - action: 'list', // 获取 book 的列表 - params: { - pageSize: 2, - }, - showIndex: true, - dragSort: false, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-decorator': 'TableBlockProvider', + 'x-decorator-props': { + collection: 'book', // book 表 + action: 'list', // 获取 book 的列表 + params: { + pageSize: 2, }, - properties: { - table: { - type: 'array', - 'x-component': 'TableV2', - 'x-use-component-props': 'useTableBlockProps', // 自动注入 Table 所需的 props - 'x-component-props': { - rowKey: 'id', - rowSelection: { - type: 'checkbox', - }, + showIndex: true, + dragSort: false, + }, + properties: { + table: { + type: 'array', + 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', // 自动注入 Table 所需的 props + 'x-component-props': { + rowKey: 'id', + rowSelection: { + type: 'checkbox', }, - properties: { - column1: { - type: 'void', - title: 'Name', - 'x-component': 'TableV2.Column', - properties: { - name: { - type: 'string', - 'x-component': 'CollectionField', - 'x-pattern': 'readPretty', // 这里要设置为 true - }, + }, + properties: { + column1: { + type: 'void', + title: 'Name', + 'x-component': 'TableV2.Column', + properties: { + name: { + type: 'string', + 'x-component': 'CollectionField', + 'x-pattern': 'readPretty', // 这里要设置为 true }, }, - column2: { - type: 'void', - title: 'Price', - 'x-component': 'TableV2.Column', - properties: { - price: { - type: 'string', - 'x-component': 'CollectionField', - 'x-pattern': 'readPretty', - }, + }, + column2: { + type: 'void', + title: 'Price', + 'x-component': 'TableV2.Column', + properties: { + price: { + type: 'string', + 'x-component': 'CollectionField', + 'x-pattern': 'readPretty', }, }, }, @@ -131,16 +129,26 @@ const App = getAppComponent({ }, }, }, - appOptions: { - components: { - TableBlockProvider, - }, - scopes: { - useTableBlockProps, - }, - providers: [ - [ExtendCollectionsProvider, { collections: [bookCollection] }], // 添加 book 数据表 - ], +} +const Demo = () => { + return + + ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], + components: { + TableBlockProvider, + }, + scopes: { + useTableBlockProps, }, apis: { 'book:list': { @@ -162,7 +170,7 @@ const App = getAppComponent({ totalPage: 1, }, }, - }, + } }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/record.tsx b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/record.tsx index 38c474be4f..14b511da67 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/record.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/demos/new-demos/record.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormBlockProvider, @@ -17,10 +10,13 @@ import { useDataBlockResource, useFormBlockProps, useTableBlockProps, + SchemaComponent, + Plugin, } from '@nocobase/client'; -import { getAppComponent } from '@nocobase/test/web'; import { App as AntdApp } from 'antd'; -import { useForm } from '@formily/react'; +import { ISchema, useForm } from '@formily/react'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; const useCloseActionProps = () => { const { setVisible } = useActionContext(); @@ -67,114 +63,112 @@ const useFormBlockProviderProps: UseDataBlockProps<'CollectionGet'> = () => { }; }; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - properties: { - test: { - type: 'void', - 'x-decorator': 'TableBlockProvider', - 'x-decorator-props': { - collection: 'users', - action: 'list', - params: { - pageSize: 2, - }, - showIndex: true, - dragSort: false, +const schema: ISchema = { + type: 'void', + name: 'root', + properties: { + test: { + type: 'void', + 'x-decorator': 'TableBlockProvider', + 'x-decorator-props': { + collection: 'users', + action: 'list', + params: { + pageSize: 2, }, - properties: { - table: { - type: 'array', - 'x-component': 'TableV2', - 'x-use-component-props': 'useTableBlockProps', - 'x-component-props': { - rowKey: 'id', - rowSelection: { - type: 'checkbox', + showIndex: true, + dragSort: false, + }, + properties: { + table: { + type: 'array', + 'x-component': 'TableV2', + 'x-use-component-props': 'useTableBlockProps', + 'x-component-props': { + rowKey: 'id', + rowSelection: { + type: 'checkbox', + }, + }, + properties: { + column1: { + type: 'void', + title: 'Username', + 'x-component': 'TableV2.Column', + properties: { + username: { + type: 'string', + 'x-component': 'CollectionField', + 'x-pattern': 'readPretty', + }, }, }, - properties: { - column1: { - type: 'void', - title: 'Username', - 'x-component': 'TableV2.Column', - properties: { - username: { - type: 'string', - 'x-component': 'CollectionField', - 'x-pattern': 'readPretty', - }, + column2: { + type: 'void', + title: 'Nickname', + 'x-component': 'TableV2.Column', + properties: { + nickname: { + type: 'string', + 'x-component': 'CollectionField', + 'x-pattern': 'readPretty', }, }, - column2: { - type: 'void', - title: 'Nickname', - 'x-component': 'TableV2.Column', - properties: { - nickname: { - type: 'string', - 'x-component': 'CollectionField', - 'x-pattern': 'readPretty', + }, + column3: { + type: 'void', + title: 'Actions', + 'x-decorator': 'TableV2.Column.ActionBar', + 'x-component': 'TableV2.Column', + properties: { + actions: { + type: 'void', + 'x-component': 'Space', + 'x-component-props': { + split: '|', }, - }, - }, - column3: { - type: 'void', - title: 'Actions', - 'x-decorator': 'TableV2.Column.ActionBar', - 'x-component': 'TableV2.Column', - properties: { - actions: { - type: 'void', - 'x-component': 'Space', - 'x-component-props': { - split: '|', - }, - properties: { - view: { - type: 'void', - title: 'View', - 'x-action': 'view', - 'x-component': 'Action.Link', - 'x-component-props': { - openMode: 'drawer', - }, - properties: { - drawer: { - type: 'void', - title: 'View record', - 'x-component': 'Action.Drawer', - 'x-component-props': { - className: 'nb-action-popup', - }, - properties: { - formContext: { - type: 'void', - 'x-decorator': 'FormBlockProvider', - 'x-use-decorator-props': 'useFormBlockProviderProps', - 'x-component': 'CardItem', - properties: { - form: { - type: 'void', - 'x-component': 'FormV2', - 'x-pattern': 'readPretty', - 'x-use-component-props': 'useFormBlockProps', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, + properties: { + view: { + type: 'void', + title: 'View', + 'x-action': 'view', + 'x-component': 'Action.Link', + 'x-component-props': { + openMode: 'drawer', + }, + properties: { + drawer: { + type: 'void', + title: 'View record', + 'x-component': 'Action.Drawer', + 'x-component-props': { + className: 'nb-action-popup', + }, + properties: { + formContext: { + type: 'void', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useFormBlockProviderProps', + 'x-component': 'CardItem', + properties: { + form: { + type: 'void', + 'x-component': 'FormV2', + 'x-pattern': 'readPretty', + 'x-use-component-props': 'useFormBlockProps', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', }, }, }, @@ -183,69 +177,69 @@ const App = getAppComponent({ }, }, }, - edit: { - type: 'void', - title: 'Edit', - 'x-action': 'update', - 'x-component': 'Action.Link', - 'x-component-props': { - openMode: 'drawer', - icon: 'EditOutlined', - }, - properties: { - drawer: { - type: 'void', - title: 'Edit record', - 'x-component': 'Action.Drawer', - 'x-component-props': { - className: 'nb-action-popup', - }, - properties: { - formContext: { - type: 'void', - 'x-decorator': 'FormBlockProvider', - 'x-use-decorator-props': 'useFormBlockProviderProps', - 'x-component': 'CardItem', - properties: { - form: { - type: 'void', - 'x-component': 'FormV2', - 'x-use-component-props': 'useFormBlockProps', - properties: { - username: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Username', - required: true, - }, - nickname: { - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - title: 'Nickname', - }, + }, + edit: { + type: 'void', + title: 'Edit', + 'x-action': 'update', + 'x-component': 'Action.Link', + 'x-component-props': { + openMode: 'drawer', + icon: 'EditOutlined', + }, + properties: { + drawer: { + type: 'void', + title: 'Edit record', + 'x-component': 'Action.Drawer', + 'x-component-props': { + className: 'nb-action-popup', + }, + properties: { + formContext: { + type: 'void', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useFormBlockProviderProps', + 'x-component': 'CardItem', + properties: { + form: { + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useFormBlockProps', + properties: { + username: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Username', + required: true, + }, + nickname: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + title: 'Nickname', }, }, }, }, - footer: { - type: 'void', - 'x-component': 'Action.Drawer.Footer', - properties: { - close: { - title: 'Close', - 'x-component': 'Action', - 'x-component-props': { - type: 'default', - }, - 'x-use-component-props': 'useCloseActionProps', - }, - submit: { - title: 'Submit', - 'x-component': 'Action', - 'x-use-component-props': 'useSubmitActionProps', + }, + footer: { + type: 'void', + 'x-component': 'Action.Drawer.Footer', + properties: { + close: { + title: 'Close', + 'x-component': 'Action', + 'x-component-props': { + type: 'default', }, + 'x-use-component-props': 'useCloseActionProps', + }, + submit: { + title: 'Submit', + 'x-component': 'Action', + 'x-use-component-props': 'useSubmitActionProps', }, }, }, @@ -262,20 +256,29 @@ const App = getAppComponent({ }, }, }, - appOptions: { - components: { - TableBlockProvider, - FormBlockProvider, - }, - scopes: { - useSubmitActionProps, - useCloseActionProps, - useTableBlockProps, - useFormBlockProps, - useFormBlockProviderProps, - }, - }, +}; + +const Demo = () => { + return +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ delayResponse: 500, + plugins: [DemoPlugin], + components: { + TableBlockProvider, + FormBlockProvider, + }, + scopes: { + useTableBlockProps, + useFormBlockProps, + }, }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/table-v2/index.en-US.md b/packages/core/client/src/schema-component/antd/table-v2/index.en-US.md new file mode 100644 index 0000000000..e040e6d75e --- /dev/null +++ b/packages/core/client/src/schema-component/antd/table-v2/index.en-US.md @@ -0,0 +1,42 @@ +# TableV2 + +`TableV2` is a wrapper component for the `antd` table component. + +## With Collection + +We need to use `TableBlockProvider` to pass down the configuration and data of the table. `useTableBlockProps` passes the data and props to the `Table` component, and `CollectionField` dynamically reads the configuration of the data table and renders the table columns based on the configuration. + +`TableBlockProvider` is a secondary wrapper for `DataBlockProvider`, and its properties can be referred to in [DataBlockProvider](/core/data-block/data-block-provider#property-details). `CollectionField` automatically looks up the configuration of the corresponding data table based on the `field.name` and renders the corresponding table columns. For more information about `CollectionField`, please refer to [CollectionField](/core/data-source/collection-field). + + + +## Extends Collection + +If the Collection is not created through the DataSource Manager but is custom extended, you can refer to [ExtendCollectionsProvider](/core/data-source/extend-collections-provider). + + + +## With ActionToolbar + +We can combine [ActionToolbar](/components/action#actionbar) to implement the operation bar of the table, such as adding, refreshing, filtering, and batch deletion. + +- Refresh button: can be directly used with the built-in `useRefreshActionProps()` +- Batch delete button: can be used with the built-in `useBulkDestroyActionProps()` +- Filter button: can be directly used with [Filter.Action](/components/filter) and `useFilterActionProps` +- For adding button, you can refer to the usage of [Action.Drawer](/components/action#与-form-结合) + +If you want to customize, you can use [useDataBlockResource()](/core/data-block/data-block-resource-provider) and [useDataBlockRequest()](/core/data-block/data-block-request-provider#usedatablockrequest) to manipulate the data. + + + +## View Or Edit Record + +The `Table` component passes the data of the current row to the underlying components through [CollectionRecordProvider](/core/data-block/collection-record-provider), and we can use [useCollectionRecord()](/core/data-block/collection-record-provider#usecollectionrecord) to get the data of the current row. + +Then, we use `useFormBlockProviderProps()` to pass the configuration and data of the table to the [FormBlockProvider](http://localhost:8000/components/form-v2#%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%E8%A1%A8%E6%95%B0%E6%8D%AE) component, and the `FormBlockProvider` will automatically request the form data and configuration. + +Then, we use `useFormBlockProps()` to pass the data to the `Form` component. + +In the editing scenario, we can update the data and refresh the list using [useDataBlockResource()](/core/data-block/data-block-resource-provider) and [useDataBlockRequest()](/core/data-block/data-block-request-provider#usedatablockrequest). + + diff --git a/packages/core/client/src/schema-component/antd/table/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/table/demos/demo1.tsx index 47ad4a4274..d759d16e0e 100644 --- a/packages/core/client/src/schema-component/antd/table/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/table/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { Application, Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/table/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/table/demos/demo2.tsx index 0bc63ebd0b..afb4d04cb0 100644 --- a/packages/core/client/src/schema-component/antd/table/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/table/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { Application, Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/table/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/table/demos/demo3.tsx index 3ddc6c47d5..6fee5b1384 100644 --- a/packages/core/client/src/schema-component/antd/table/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/table/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { Application, Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/table/demos/demo4.tsx b/packages/core/client/src/schema-component/antd/table/demos/demo4.tsx index 5e4ad5cc2e..2b23ba6aa5 100644 --- a/packages/core/client/src/schema-component/antd/table/demos/demo4.tsx +++ b/packages/core/client/src/schema-component/antd/table/demos/demo4.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema, observer } from '@formily/react'; import { uid } from '@formily/shared'; diff --git a/packages/core/client/src/schema-component/antd/table/index.en-US.md b/packages/core/client/src/schema-component/antd/table/index.en-US.md new file mode 100644 index 0000000000..55b7206c71 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/table/index.en-US.md @@ -0,0 +1,22 @@ +# Table + +- `Table.Void` +- `Table.RowSelection` +- `Table.Array` + + +## Table.Array + + + +## Table.Void + + + +## Table.RowSelection + + + +## With Actions + + diff --git a/packages/core/client/src/schema-component/antd/tabs/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/tabs/demos/demo1.tsx index d53d21e707..f541e0215b 100644 --- a/packages/core/client/src/schema-component/antd/tabs/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/tabs/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Tabs diff --git a/packages/core/client/src/schema-component/antd/tabs/index.en-US.md b/packages/core/client/src/schema-component/antd/tabs/index.en-US.md new file mode 100644 index 0000000000..bf17d43256 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/tabs/index.en-US.md @@ -0,0 +1,5 @@ +# Tabs + +Tabs. It is a wrapper based on the antd [Tabs](https://ant.design/components/tabs/) component, and requires the use of both the `Tabs` and `Tabs.TabPane` components. + + diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/demo1.tsx index daa0fa3931..6287d236dc 100644 --- a/packages/core/client/src/schema-component/antd/time-picker/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/time-picker/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: TimePicker diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/demo2.tsx index 61cdb54321..a5b744fb97 100644 --- a/packages/core/client/src/schema-component/antd/time-picker/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/time-picker/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: TimePicker.RangePicker diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range-read-pretty.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range-read-pretty.tsx index b2867ecd48..ba5a34b9ee 100644 --- a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range-read-pretty.tsx @@ -1,31 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - title: 'Test', - default: ['17:02:18', '18:45:24'], - 'x-decorator': 'FormItem', - 'x-component': 'TimePicker.RangePicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + title: 'Test', + default: ['17:02:18', '18:45:24'], + 'x-decorator': 'FormItem', + 'x-component': 'TimePicker.RangePicker', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range.tsx index 79e0071b88..e9686ea5e7 100644 --- a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range.tsx +++ b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-range.tsx @@ -1,29 +1,34 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'TimePicker.RangePicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'TimePicker.RangePicker', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-read-pretty.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-read-pretty.tsx index 26b2186503..d611a3f89e 100644 --- a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time-read-pretty.tsx @@ -1,31 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'string', - title: 'Test', - default: '10:10:10', - 'x-decorator': 'FormItem', - 'x-component': 'TimePicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'string', + title: 'Test', + default: '10:10:10', + 'x-decorator': 'FormItem', + 'x-component': 'TimePicker', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + diff --git a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time.tsx b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time.tsx index 08110e386a..57ae218b1b 100644 --- a/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time.tsx +++ b/packages/core/client/src/schema-component/antd/time-picker/demos/new-demos/time.tsx @@ -1,29 +1,35 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'string', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'TimePicker', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'string', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'TimePicker', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + diff --git a/packages/core/client/src/schema-component/antd/time-picker/index.en-US.md b/packages/core/client/src/schema-component/antd/time-picker/index.en-US.md new file mode 100644 index 0000000000..14383fe1a4 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/time-picker/index.en-US.md @@ -0,0 +1,45 @@ +# TimePicker + +TimePicker. It is a wrapper component based on the ant-design [TimePicker](https://ant.design/components/time-picker) component. + +## TimePicker + +### Basic Usage + +```ts +type TimePickerProps = AntdTimePickerProps +``` + + + +### Read Pretty + +```ts +interface TimePickerReadPrettyProps { + format?: string; + style?: React.CSSProperties; + value: string | string[]; + className?: string; + prefixCls?: string; +} +``` + + + +## Time Range Picker + +### Basic Usage + +```ts +type TimeRangePickerProps = AntdTimePickerProps +``` + + + +### Read Pretty + +```ts +type TimeRangePickerReadPrettyProps = TimePickerReadPrettyProps; +``` + + diff --git a/packages/core/client/src/schema-component/antd/tree-select/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/tree-select/demos/demo1.tsx index 26b7a699dc..48c706c1fb 100644 --- a/packages/core/client/src/schema-component/antd/tree-select/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/tree-select/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: TreeSelect diff --git a/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/basic.tsx index ca1e5597f1..ebac2aa1d0 100644 --- a/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/basic.tsx @@ -1,13 +1,8 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; + +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const dataSource = [ { @@ -48,24 +43,37 @@ const dataSource = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'TreeSelect', - 'x-component-props': { - treeData: dataSource, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'TreeSelect', + 'x-component-props': { + treeData: dataSource, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/read-pretty.tsx index 364326b03a..426ccca168 100644 --- a/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/tree-select/demos/new-demos/read-pretty.tsx @@ -1,13 +1,7 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; const dataSource = [ { @@ -48,26 +42,39 @@ const dataSource = [ }, ]; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-pattern': 'readPretty', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - default: '0-0-1', - 'x-decorator': 'FormItem', - 'x-component': 'TreeSelect', - 'x-component-props': { - treeData: dataSource, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-pattern': 'readPretty', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + default: '0-0-1', + 'x-decorator': 'FormItem', + 'x-component': 'TreeSelect', + 'x-component-props': { + treeData: dataSource, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/tree-select/index.en-US.md b/packages/core/client/src/schema-component/antd/tree-select/index.en-US.md new file mode 100644 index 0000000000..45319d731c --- /dev/null +++ b/packages/core/client/src/schema-component/antd/tree-select/index.en-US.md @@ -0,0 +1,15 @@ +# TreeSelect + +Tree Select. It is a wrapper component based on the ant-design [TreeSelect](https://ant.design/components/tree-select) component. + +```ts +type TreeSelectProps = AntdTreeSelectProps +``` + +## Basic + + + +## Read Pretty + + diff --git a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/basic.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/basic.tsx index dfe1e4d25b..46a7384903 100644 --- a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/basic.tsx @@ -1,29 +1,36 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'number', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'UnixTimestamp', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'number', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'UnixTimestamp', }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/read-pretty.tsx index 1634f82fa6..c9d7338965 100644 --- a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/read-pretty.tsx @@ -1,41 +1,48 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'number', - title: 'Test', - default: 1712016000000, - 'x-decorator': 'FormItem', - 'x-component': 'UnixTimestamp', - }, - test2: { - type: 'number', - title: 'Test(accuracy: second)', - 'x-decorator': 'FormItem', - default: 1712016000, - 'x-component': 'UnixTimestamp', - 'x-component-props': { - accuracy: 'second', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'number', + title: 'Test', + default: 1712016000000, + 'x-decorator': 'FormItem', + 'x-component': 'UnixTimestamp', + }, + test2: { + type: 'number', + title: 'Test(accuracy: second)', + 'x-decorator': 'FormItem', + default: 1712016000, + 'x-component': 'UnixTimestamp', + 'x-component-props': { + accuracy: 'second', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/second.tsx b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/second.tsx index 975bc1e70f..85e6d568ba 100644 --- a/packages/core/client/src/schema-component/antd/unix-timestamp/demos/second.tsx +++ b/packages/core/client/src/schema-component/antd/unix-timestamp/demos/second.tsx @@ -1,32 +1,39 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'number', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'UnixTimestamp', - 'x-component-props': { - accuracy: 'second', - }, +const schema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'number', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'UnixTimestamp', + 'x-component-props': { + accuracy: 'second', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/unix-timestamp/index.en-US.md b/packages/core/client/src/schema-component/antd/unix-timestamp/index.en-US.md new file mode 100644 index 0000000000..b3d9dc1c5d --- /dev/null +++ b/packages/core/client/src/schema-component/antd/unix-timestamp/index.en-US.md @@ -0,0 +1,20 @@ +# UnixTimestamp + +```ts +interface UnixTimestampProps { + value?: number; + accuracy?: 'millisecond' | 'second'; +} +``` + +## Basic Usage + + + +## accuracy: second + + + +## Read Pretty + + diff --git a/packages/core/client/src/schema-component/antd/upload/demos/apiClient.ts b/packages/core/client/src/schema-component/antd/upload/demos/apiClient.ts index 16964c0396..ee75fa4be4 100644 --- a/packages/core/client/src/schema-component/antd/upload/demos/apiClient.ts +++ b/packages/core/client/src/schema-component/antd/upload/demos/apiClient.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { mockAPIClient } from '../../../../testUtils'; diff --git a/packages/core/client/src/schema-component/antd/upload/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/upload/demos/demo1.tsx index af94251053..cd761739bf 100644 --- a/packages/core/client/src/schema-component/antd/upload/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/upload/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Upload diff --git a/packages/core/client/src/schema-component/antd/upload/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/upload/demos/demo2.tsx index 2e1bdb3233..53ac33b104 100644 --- a/packages/core/client/src/schema-component/antd/upload/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/upload/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Upload diff --git a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/basic.tsx index 2282e6f480..7f12b8b337 100644 --- a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/basic.tsx +++ b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/basic.tsx @@ -1,32 +1,37 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Upload.Attachment', - 'x-component-props': { - action: 'attachments:create', - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Upload.Attachment', + 'x-component-props': { + action: 'attachments:create', }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { 'attachments:create': { data: { @@ -49,4 +54,6 @@ const App = getAppComponent({ }, }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/multiple.tsx b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/multiple.tsx index e19d20cc48..b12a4677ce 100644 --- a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/multiple.tsx +++ b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/multiple.tsx @@ -1,33 +1,38 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - properties: { - test: { - type: 'boolean', - title: 'Test', - 'x-decorator': 'FormItem', - 'x-component': 'Upload.Attachment', - 'x-component-props': { - action: 'attachments:create', - multiple: true, - }, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + properties: { + test: { + type: 'boolean', + title: 'Test', + 'x-decorator': 'FormItem', + 'x-component': 'Upload.Attachment', + 'x-component-props': { + action: 'attachments:create', + multiple: true, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], apis: { 'attachments:create': { data: { @@ -50,4 +55,6 @@ const App = getAppComponent({ }, }); -export default App; +export default app.getRootComponent(); + + diff --git a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/read-pretty.tsx index 2c56373a35..d51a8faef2 100644 --- a/packages/core/client/src/schema-component/antd/upload/demos/new-demos/read-pretty.tsx +++ b/packages/core/client/src/schema-component/antd/upload/demos/new-demos/read-pretty.tsx @@ -1,77 +1,82 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ -import { getAppComponent } from '@nocobase/test/web'; +import React from 'react'; +import { mockApp } from '@nocobase/client/demo-utils'; +import { SchemaComponent, Plugin, ISchema } from '@nocobase/client'; -const App = getAppComponent({ - schema: { - type: 'void', - name: 'root', - 'x-decorator': 'FormV2', - 'x-component': 'ShowFormData', - 'x-pattern': 'readPretty', - properties: { - test: { - type: 'boolean', - title: 'Test', - default: [ - { - id: 45, - title: 'img', - name: 's33766399', - filename: 'cd48dc833ab01aa3959ac39309fc39de.jpg', - extname: '.jpg', - size: null, - mimetype: 'image/jpeg', - path: '', - meta: {}, - status: 'uploading', - percent: 60, - url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', - created_at: '2021-08-13T15:00:17.423Z', - updated_at: '2021-08-13T15:00:17.423Z', - created_by_id: null, - updated_by_id: null, - storage_id: 2, - }, - { - id: 7, - title: 'doc', - filename: 'd9f6ad6669902a9a8a1229d9f362235a.docx', - extname: '.docx', - size: null, - mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', - path: '', - meta: {}, - url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', - created_at: '2021-09-12T01:22:06.229Z', - updated_at: '2021-09-12T01:22:06.229Z', - created_by_id: null, - updated_by_id: 1, - storage_id: 2, - t_jh7a28dsfzi: { - createdAt: '2021-09-12T01:22:07.886Z', - updatedAt: '2021-09-12T01:22:07.886Z', - f_xg3mysbjfra: 1, - f_gc7ppj0b7n1: 7, - }, - }, - ], - 'x-decorator': 'FormItem', - 'x-component': 'Upload.Attachment', - 'x-component-props': { - action: 'attachments:create', - multiple: true, +const schema: ISchema = { + type: 'void', + name: 'root', + 'x-decorator': 'FormV2', + 'x-component': 'ShowFormData', + 'x-pattern': 'readPretty', + properties: { + test: { + type: 'boolean', + title: 'Test', + default: [ + { + id: 45, + title: 'img', + name: 's33766399', + filename: 'cd48dc833ab01aa3959ac39309fc39de.jpg', + extname: '.jpg', + size: null, + mimetype: 'image/jpeg', + path: '', + meta: {}, + status: 'uploading', + percent: 60, + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + created_at: '2021-08-13T15:00:17.423Z', + updated_at: '2021-08-13T15:00:17.423Z', + created_by_id: null, + updated_by_id: null, + storage_id: 2, }, + { + id: 7, + title: 'doc', + filename: 'd9f6ad6669902a9a8a1229d9f362235a.docx', + extname: '.docx', + size: null, + mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', + path: '', + meta: {}, + url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + created_at: '2021-09-12T01:22:06.229Z', + updated_at: '2021-09-12T01:22:06.229Z', + created_by_id: null, + updated_by_id: 1, + storage_id: 2, + t_jh7a28dsfzi: { + createdAt: '2021-09-12T01:22:07.886Z', + updatedAt: '2021-09-12T01:22:07.886Z', + f_xg3mysbjfra: 1, + f_gc7ppj0b7n1: 7, + }, + }, + ], + 'x-decorator': 'FormItem', + 'x-component': 'Upload.Attachment', + 'x-component-props': { + action: 'attachments:create', + multiple: true, }, }, }, +} +const Demo = () => { + return ; +}; + +class DemoPlugin extends Plugin { + async load() { + this.app.router.add('root', { path: '/', Component: Demo }) + } +} + +const app = mockApp({ + plugins: [DemoPlugin], }); -export default App; +export default app.getRootComponent(); diff --git a/packages/core/client/src/schema-component/antd/upload/index.en-US.md b/packages/core/client/src/schema-component/antd/upload/index.en-US.md new file mode 100644 index 0000000000..088f8b8049 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/upload/index.en-US.md @@ -0,0 +1,28 @@ +# Upload + +Upload component. It is a wrapper for the ant-design [Upload](https://ant.design/components/upload) component. + +## Basic Usage + +```ts +type UploadProps = Omit & { + onChange?: (fileList: UploadFile[]) => void; + serviceErrorMessage?: string; + value?: any; + size?: string; +}; +``` + + + +## Multiple + + + +## Read Pretty + +```ts +type UploadReadPrettyProps = AntdUploadProps; +``` + + diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx index 0bb09cb4be..e58c127ad4 100644 --- a/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx index df91d88333..eb1149c709 100644 --- a/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx index 2c28796153..008a495d9e 100644 --- a/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { FormItem } from '@formily/antd-v5'; import { SchemaComponent, SchemaComponentProvider, Variable } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-component/antd/variable/index.en-US.md b/packages/core/client/src/schema-component/antd/variable/index.en-US.md new file mode 100644 index 0000000000..f6987d2cc9 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/variable/index.en-US.md @@ -0,0 +1,32 @@ +# Variable + +Variable selector. + +## `Variable.Input` + +```ts +import type { DefaultOptionType } from 'antd/lib/cascader'; + type VariableInputProps = { + value?: string; + scope?: DefaultOptionType[] | (() => DefaultOptionType[]); + onChange: (value: string, optionPath?: any[]) => void; + children?: any; + button?: React.ReactElement; + useTypedConstant?: true | string[]; + changeOnSelect?: CascaderProps['changeOnSelect']; + fieldNames?: CascaderProps['fieldNames']; + disabled?: boolean; + style?: React.CSSProperties; + className?: string; +} +``` + + + +### `Variable.TextArea` + + + +### `Variable.JSON` + + diff --git a/packages/core/client/src/schema-component/common/index.ts b/packages/core/client/src/schema-component/common/index.ts index 2094c381a4..1a90fbeee7 100644 --- a/packages/core/client/src/schema-component/common/index.ts +++ b/packages/core/client/src/schema-component/common/index.ts @@ -9,3 +9,4 @@ export * from './dnd-context'; export * from './sortable-item'; +export * from './show-form-data'; diff --git a/packages/core/client/src/schema-component/common/show-form-data/index.tsx b/packages/core/client/src/schema-component/common/show-form-data/index.tsx new file mode 100644 index 0000000000..a4dd6c335d --- /dev/null +++ b/packages/core/client/src/schema-component/common/show-form-data/index.tsx @@ -0,0 +1,29 @@ +/** + * This file is part of the NocoBase (R) project. + * Copyright (c) 2020-2024 NocoBase Co., Ltd. + * Authors: NocoBase Team. + * + * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. + * For more information, please refer to: https://www.nocobase.com/agreement. + */ + +import React from 'react'; +import { observer, useForm } from '@formily/react'; + +/** + * show form data for doc demo + * @internal + */ +export const ShowFormData = observer(({ children }) => { + const form = useForm(); + return ( + <> + { + 
+          {JSON.stringify(form.values, null, 2)}
+
+ } + {children} + + ); +}); diff --git a/packages/core/client/src/schema-component/demos/demo1.tsx b/packages/core/client/src/schema-component/demos/demo1.tsx index 4b2640fd68..ba92f85eac 100644 --- a/packages/core/client/src/schema-component/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Insert Adjacent diff --git a/packages/core/client/src/schema-component/demos/demo2.tsx b/packages/core/client/src/schema-component/demos/demo2.tsx index 81f2c8a934..66f6a5648e 100644 --- a/packages/core/client/src/schema-component/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { SchemaComponentProvider, useSchemaComponentContext } from '@nocobase/client'; import { Button } from 'antd'; diff --git a/packages/core/client/src/schema-component/demos/demo3.tsx b/packages/core/client/src/schema-component/demos/demo3.tsx index e7194366e8..19e27f5a09 100644 --- a/packages/core/client/src/schema-component/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { SchemaComponentProvider, useSchemaComponentContext } from '@nocobase/client'; import { Button } from 'antd'; diff --git a/packages/core/client/src/schema-component/demos/demo4.tsx b/packages/core/client/src/schema-component/demos/demo4.tsx index 4cd1c1e013..12be347a60 100644 --- a/packages/core/client/src/schema-component/demos/demo4.tsx +++ b/packages/core/client/src/schema-component/demos/demo4.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { SchemaComponentProvider, useSchemaComponentContext } from '@nocobase/client'; import { Button } from 'antd'; diff --git a/packages/core/client/src/schema-initializer/demos/basic.tsx b/packages/core/client/src/schema-initializer/demos/basic.tsx index 39cbf277c2..00d024f891 100644 --- a/packages/core/client/src/schema-initializer/demos/basic.tsx +++ b/packages/core/client/src/schema-initializer/demos/basic.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Application, diff --git a/packages/core/client/src/schema-initializer/demos/build-type.tsx b/packages/core/client/src/schema-initializer/demos/build-type.tsx index e38535a7ac..9a436ffe8d 100644 --- a/packages/core/client/src/schema-initializer/demos/build-type.tsx +++ b/packages/core/client/src/schema-initializer/demos/build-type.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Application, diff --git a/packages/core/client/src/schema-initializer/demos/custom-button.tsx b/packages/core/client/src/schema-initializer/demos/custom-button.tsx index 7c0cc39625..8736b60a73 100644 --- a/packages/core/client/src/schema-initializer/demos/custom-button.tsx +++ b/packages/core/client/src/schema-initializer/demos/custom-button.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { Application, Plugin, SchemaInitializer, useSchemaInitializerRender } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-initializer/demos/custom-items-component.tsx b/packages/core/client/src/schema-initializer/demos/custom-items-component.tsx index 98ba1566ea..a2b273111d 100644 --- a/packages/core/client/src/schema-initializer/demos/custom-items-component.tsx +++ b/packages/core/client/src/schema-initializer/demos/custom-items-component.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React, { FC } from 'react'; import { diff --git a/packages/core/client/src/schema-initializer/demos/dynamic-visible-children.tsx b/packages/core/client/src/schema-initializer/demos/dynamic-visible-children.tsx index 3b34f22559..186f84914f 100644 --- a/packages/core/client/src/schema-initializer/demos/dynamic-visible-children.tsx +++ b/packages/core/client/src/schema-initializer/demos/dynamic-visible-children.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Application, diff --git a/packages/core/client/src/schema-initializer/demos/insert-schema-action.tsx b/packages/core/client/src/schema-initializer/demos/insert-schema-action.tsx index 80b946478b..4c717d7f9b 100644 --- a/packages/core/client/src/schema-initializer/demos/insert-schema-action.tsx +++ b/packages/core/client/src/schema-initializer/demos/insert-schema-action.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Action, diff --git a/packages/core/client/src/schema-initializer/demos/insert-schema-basic.tsx b/packages/core/client/src/schema-initializer/demos/insert-schema-basic.tsx index 828f7a9bf2..2a88cc371b 100644 --- a/packages/core/client/src/schema-initializer/demos/insert-schema-basic.tsx +++ b/packages/core/client/src/schema-initializer/demos/insert-schema-basic.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { diff --git a/packages/core/client/src/schema-initializer/demos/insert-schema-form-item.tsx b/packages/core/client/src/schema-initializer/demos/insert-schema-form-item.tsx index 304f21d3ac..619b1206ef 100644 --- a/packages/core/client/src/schema-initializer/demos/insert-schema-form-item.tsx +++ b/packages/core/client/src/schema-initializer/demos/insert-schema-form-item.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Application, diff --git a/packages/core/client/src/schema-initializer/demos/nested-items.tsx b/packages/core/client/src/schema-initializer/demos/nested-items.tsx index 043c4ea4ce..58dd8a2a7d 100644 --- a/packages/core/client/src/schema-initializer/demos/nested-items.tsx +++ b/packages/core/client/src/schema-initializer/demos/nested-items.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React, { FC } from 'react'; import { diff --git a/packages/core/client/src/schema-settings/demos/basic.tsx b/packages/core/client/src/schema-settings/demos/basic.tsx index c7c31cb6cf..47c3824d65 100644 --- a/packages/core/client/src/schema-settings/demos/basic.tsx +++ b/packages/core/client/src/schema-settings/demos/basic.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React, { FC } from 'react'; import { Application, Plugin, SchemaSettings, SchemaSettingsItem, useSchemaSettingsRender } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-settings/demos/built-type.tsx b/packages/core/client/src/schema-settings/demos/built-type.tsx index edc1f7b0b1..ff7a0beaf5 100644 --- a/packages/core/client/src/schema-settings/demos/built-type.tsx +++ b/packages/core/client/src/schema-settings/demos/built-type.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { Input } from 'antd'; diff --git a/packages/core/client/src/schema-settings/demos/custom-component.tsx b/packages/core/client/src/schema-settings/demos/custom-component.tsx index e7a3535e04..6bdc60bc05 100644 --- a/packages/core/client/src/schema-settings/demos/custom-component.tsx +++ b/packages/core/client/src/schema-settings/demos/custom-component.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { Application, Plugin, SchemaSettings, useSchemaSettingsRender } from '@nocobase/client'; diff --git a/packages/core/client/src/schema-settings/demos/demo3.tsx b/packages/core/client/src/schema-settings/demos/demo3.tsx index 22703fff1c..fb2b59e680 100644 --- a/packages/core/client/src/schema-settings/demos/demo3.tsx +++ b/packages/core/client/src/schema-settings/demos/demo3.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Application, diff --git a/packages/core/client/src/schema-settings/demos/schema-basic.tsx b/packages/core/client/src/schema-settings/demos/schema-basic.tsx index 9a1120e56b..27d5e364c0 100644 --- a/packages/core/client/src/schema-settings/demos/schema-basic.tsx +++ b/packages/core/client/src/schema-settings/demos/schema-basic.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import React from 'react'; import { diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/collections.ts b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/collections.ts index f97060d3a0..de094a788a 100644 --- a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/collections.ts +++ b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/collections.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + export default { data: [ diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/data.ts b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/data.ts index ed30cdd3a0..93fde9ae3e 100644 --- a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/data.ts +++ b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/data.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + export default { data: [ diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/defaultValues.ts b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/defaultValues.ts index 91094e10b7..d1645b8114 100644 --- a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/defaultValues.ts +++ b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/defaultValues.ts @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + const now = new Date(); diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo1.tsx b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo1.tsx index 2e0d47c874..8256e618d1 100644 --- a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo1.tsx +++ b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Calendar diff --git a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx index 648d8531e2..4c5abf3de4 100644 --- a/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx +++ b/packages/plugins/@nocobase/plugin-calendar/src/client/calendar/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { ISchema } from '@formily/react'; import { diff --git a/packages/plugins/@nocobase/plugin-field-formula/src/client/components/Formula/demos/demo2.tsx b/packages/plugins/@nocobase/plugin-field-formula/src/client/components/Formula/demos/demo2.tsx index c8d8cb3ffe..0119ad807e 100644 --- a/packages/plugins/@nocobase/plugin-field-formula/src/client/components/Formula/demos/demo2.tsx +++ b/packages/plugins/@nocobase/plugin-field-formula/src/client/components/Formula/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + /** * title: Formula diff --git a/packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx b/packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx index f87d7365a1..eaadc7d520 100644 --- a/packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx +++ b/packages/plugins/@nocobase/plugin-gantt/src/client/demos/demo1.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Gantt, SchemaComponent, SchemaComponentProvider, useGanttBlockProps } from '@nocobase/client'; import React from 'react'; diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/board/demos/demo2.tsx b/packages/plugins/@nocobase/plugin-kanban/src/client/board/demos/demo2.tsx index ed1e3730bd..fb754c3ee6 100644 --- a/packages/plugins/@nocobase/plugin-kanban/src/client/board/demos/demo2.tsx +++ b/packages/plugins/@nocobase/plugin-kanban/src/client/board/demos/demo2.tsx @@ -1,11 +1,4 @@ -/** - * This file is part of the NocoBase (R) project. - * Copyright (c) 2020-2024 NocoBase Co., Ltd. - * Authors: NocoBase Team. - * - * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. - * For more information, please refer to: https://www.nocobase.com/agreement. - */ + import { Board } from '@nocobase/client'; import { Button, Card } from 'antd';