Schema 优化

scripts/build-schemas.ts

@@ -6,7 +6,7 @@ import fs = require('fs');
 import path = require('path');
 import tsj = require('ts-json-schema-generator');
 import mkdirp = require('mkdirp');
-import {DiagnosticError} from 'ts-json-schema-generator';
+import {DiagnosticError, UnknownNodeError} from 'ts-json-schema-generator';
 
 /**
  * 程序主入口
@@ -47,6 +47,18 @@ main().catch(e => {
       console.log(diagnostic.messageText);
       console.log('\n');
     });
+    return;
+  } else if (e instanceof UnknownNodeError) {
+    let node = e.getNode();
+
+    const sourceFile = node.getSourceFile();
+    const position = sourceFile.getLineAndCharacterOfPosition(node.pos);
+    console.log(
+      `\x1b[36m${sourceFile.fileName}:${position.line + 1}:${
+        position.character + 1
+      }\x1b[0m - \x1b[31m类型不支持转 JSON Schema\x1b[0m\n`
+    );
+
     return;
   }
 

src/Schema.ts

@@ -11,6 +11,10 @@ import {CardsSchema} from './renderers/Cards';
 import {FormSchema} from './renderers/Form';
 import {CarouselSchema} from './renderers/Carousel';
 import {ChartSchema} from './renderers/Chart';
+import {CollapseSchema} from './renderers/Collapse';
+import {ColorSchema} from './renderers/Color';
+import {ContainerSchema} from './renderers/Container';
+import {CRUDSchema} from './renderers/CRUD';
 
 // 每加个类型，这补充一下。
 export type SchemaType =
@@ -29,7 +33,11 @@ export type SchemaType =
   | 'card'
   | 'cards'
   | 'carousel'
-  | 'chart';
+  | 'chart'
+  | 'collapse'
+  | 'color'
+  | 'container'
+  | 'crud';
 
 export type SchemaObject =
   | PageSchema
@@ -44,9 +52,16 @@ export type SchemaObject =
   | CardSchema
   | CardsSchema
   | CarouselSchema
-  | ChartSchema;
+  | ChartSchema
+  | CollapseSchema
+  | ColorSchema
+  | ContainerSchema
+  | CRUDSchema;
 
-export type SchemaCollection = SchemaObject | Array<SchemaObject> | SchemaTpl;
+export type SchemaCollection =
+  | SchemaObject
+  | SchemaTpl
+  | Array<SchemaObject | SchemaTpl>;
 
 /**
  * 表达式，语法 `data.xxx > 5`。

src/components/Alert.tsx

@@ -12,6 +12,7 @@ import {LocaleProps, localeable} from '../locale';
 import Html from './Html';
 import {PlainObject} from '../types';
 import {render as renderSchema} from '../factory';
+import {SchemaObject} from '../Schema';
 
 export interface AlertProps extends ThemeProps, LocaleProps {
   container?: any;

src/factory.tsx

@@ -51,6 +51,7 @@ import {
   LocaleContext,
   LocaleProps
 } from './locale';
+import {SchemaCollection, SchemaObject, SchemaTpl} from './Schema';
 
 export interface TestFunc {
   (
@@ -139,7 +140,7 @@ export interface RendererConfig extends RendererBasicConfig {
 }
 
 export interface RenderSchemaFilter {
-  (schema: Schema, renderer: RendererConfig, props?: object): SchemaNode;
+  (schema: Schema, renderer: RendererConfig, props?: object): SchemaObject;
 }
 
 export interface RootRenderProps {
@@ -593,7 +594,7 @@ class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     const theme = this.props.env.theme;
 
     if (Array.isArray(schema)) {
-      return renderChildren($path, schema, rest) as JSX.Element;
+      return renderChildren($path, schema as any, rest) as JSX.Element;
     } else if (schema.children) {
       return React.isValidElement(schema.children)
         ? schema.children
@@ -971,7 +972,7 @@ let stores: {
   [propName: string]: IRendererStore;
 } = {};
 export function render(
-  schema: SchemaNode,
+  schema: Schema,
   props: RootRenderProps = {},
   options: RenderOptions = {},
   pathPrefix: string = ''

src/renderers/CRUD.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Renderer, RendererProps} from '../factory';
-import {SchemaNode, Schema, Action, Api, ApiObject} from '../types';
+import {
+  SchemaNode,
+  Schema,
+  Action,
+  Api,
+  ApiObject,
+  PlainObject
+} from '../types';
 import {CRUDStore, ICRUDStore} from '../store/crud';
 import {
   createObject,
@@ -30,53 +37,211 @@ import findIndex from 'lodash/findIndex';
 import Html from '../components/Html';
 import {Spinner} from '../components';
 import {Icon} from '../components/icons';
+import {
+  BaseSchema,
+  SchemaApi,
+  SchemaClassName,
+  SchemaExpression,
+  SchemaName,
+  SchemaObject,
+  SchemaTokenizeableString
+} from '../Schema';
+import {ActionSchema} from './Action';
+import {CardsSchema} from './Cards';
 
-export interface CRUDProps extends RendererProps {
-  api?: Api;
-  filter?: Schema;
-  store: ICRUDStore;
-  defaultParams: object;
-  syncLocation?: boolean;
-  primaryField?: string;
+export interface CRUDCommonSchema extends BaseSchema {
+  /**
+   *  指定为 CRUD 渲染器。
+   */
+  type: 'crud';
+
+  /**
+   * 指定内容区的展示模式。
+   */
   mode?: 'table' | 'grid' | 'cards' | /* grid 的别名*/ 'list';
-  toolbarInline?: boolean;
-  toolbar?: SchemaNode; // 不推荐，但是还是要兼容老用法。
-  headerToolbar?: SchemaNode;
-  footerToolbar?: SchemaNode;
-  bulkActions?: Array<Action>;
-  itemActions?: Array<Action>;
-  orderField?: string;
-  saveOrderApi?: Api;
-  quickSaveApi?: Api;
-  quickSaveItemApi?: Api;
+
+  /**
+   * 初始化数据 API
+   */
+  api?: SchemaApi;
+
+  /**
+   * 批量操作
+   */
+  bulkActions?: Array<ActionSchema>;
+
+  /**
+   * 单条操作
+   */
+  itemActions?: Array<ActionSchema>;
+
+  /**
+   * 可以默认给定初始参数如： {\"perPage\": 24}
+   */
+  defaultParams?: PlainObject;
+
+  /**
+   * 是否可通过拖拽排序
+   */
+  draggable?: boolean;
+
+  /**
+   * 是否可通过拖拽排序，通过表达式来配置
+   */
+  draggableOn?: SchemaExpression;
+
+  name?: SchemaName;
+
+  /**
+   * 过滤器表单
+   */
+  filter?: any; // todo
+
+  /**
+   * 初始是否拉取
+   * @deprecated 建议用 api 的 sendOn 代替。
+   */
   initFetch?: boolean;
-  perPageAvailable?: Array<number | string>;
-  messages: {
+
+  /**
+   * 初始是否拉取，用表达式来配置。
+   * @deprecated 建议用 api 的 sendOn 代替。
+   */
+  initFetchOn?: SchemaExpression;
+
+  /**
+   * 配置内部 DOM 的 className
+   */
+  innerClassName?: SchemaClassName;
+
+  /**
+   * 设置自动刷新时间
+   */
+  interval?: number;
+
+  /**
+   * 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。
+   */
+  orderField?: string;
+
+  /**
+   * 设置分页页码字段名。
+   * @default page
+   */
+  pageField?: string;
+
+  /**
+   * 设置分页一页显示的多少条数据的字段名。
+   * @default perPage
+   */
+  perPageField?: string;
+
+  /**
+   * 快速编辑后用来批量保存的 API
+   */
+  quickSaveApi?: SchemaApi;
+
+  /**
+   * 快速编辑配置成及时保存时使用的 API
+   */
+  quickSaveItemApi?: SchemaApi;
+
+  /**
+   * 保存排序的 api
+   */
+  saveOrderApi?: SchemaApi;
+
+  /**
+   * 是否将过滤条件的参数同步到地址栏,默认为true
+   * @default true
+   */
+  syncLocation?: boolean;
+
+  /**
+   * 顶部工具栏
+   */
+  headerToolbar?: Array<SchemaObject>; // todo
+
+  /**
+   * 底部工具栏
+   */
+  footerToolbar?: Array<SchemaObject>; // todo
+
+  /**
+   * 每页显示多少个空间成员的配置如： [10, 20, 50, 100]。
+   */
+  perPageAvailable?: Array<number>;
+
+  messages?: {
     fetchFailed?: string;
     fetchSuccess?: string;
     saveFailed?: string;
     saveSuccess?: string;
   };
-  pickerMode?: boolean; // 选择模式，用做表单中的选择操作
-  pageField?: string;
-  perPageField?: string;
+
+  /**
+   * 是否隐藏快速编辑的按钮。
+   */
   hideQuickSaveBtn?: boolean;
-  autoJumpToTopOnPagerChange?: boolean; // 是否自动跳顶部，当切分页的时候。
-  interval?: number;
+
+  /**
+   * 是否自动跳顶部，当切分页的时候。
+   */
+  autoJumpToTopOnPagerChange?: boolean;
+
+  /**
+   * 静默拉取
+   */
   silentPolling?: boolean;
-  stopAutoRefreshWhen?: string;
+  stopAutoRefreshWhen?: SchemaExpression;
+
   stopAutoRefreshWhenModalIsOpen?: boolean;
   filterTogglable?: boolean;
   filterDefaultVisible?: boolean;
+
+  /**
+   * 是否将接口返回的内容自动同步到地址栏，前提是开启了同步地址栏。
+   */
   syncResponse2Query?: boolean;
+
+  /**
+   * 分页的时候是否保留用户选择。
+   */
   keepItemSelectionOnPageChange?: boolean;
+
+  /**
+   * 是否为前端单次加载模式，可以用来实现前端分页。
+   */
   loadDataOnce?: boolean;
-  loadDataOnceFetchOnFilter?: boolean; // 在开启loadDataOnce时，filter时是否去重新请求api
-  source?: string;
+
+  /**
+   * 在开启loadDataOnce时，filter时是否去重新请求api
+   */
+  loadDataOnceFetchOnFilter?: boolean;
+
+  /**
+   * 也可以直接从环境变量中读取，但是不太推荐。
+   */
+  source?: SchemaTokenizeableString;
+}
+
+export type CRUDCardsSchema = CRUDCommonSchema & {
+  mode: 'cards';
+} & Omit<CardsSchema, 'type'>;
+
+/**
+ * CRUD 增删改查渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/crud
+ */
+export type CRUDSchema = CRUDCardsSchema; // todo
+
+export interface CRUDProps extends RendererProps, CRUDCommonSchema {
+  store: ICRUDStore;
+  pickerMode?: boolean; // 选择模式，用做表单中的选择操作
 }
 
 export default class CRUD extends React.Component<CRUDProps, any> {
-  static propsList: Array<string> = [
+  static propsList: Array<keyof CRUDProps> = [
     'bulkActions',
     'itemActions',
     'mode',
@@ -1569,7 +1734,12 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       }
     }
 
-    return this.renderToolbar(headerToolbar, 0, childProps, toolbarRenderer);
+    return this.renderToolbar(
+      headerToolbar || [],
+      0,
+      childProps,
+      toolbarRenderer
+    );
   }
 
   renderFooterToolbar(

src/renderers/Card.tsx

@@ -18,6 +18,7 @@ import {
   SchemaClassName,
   SchemaCollection,
   SchemaExpression,
+  SchemaObject,
   SchemaTpl,
   SchemaUrlPath
 } from '../Schema';

src/renderers/Cards.tsx

@@ -21,7 +21,7 @@ import {
   SchemaCollection,
   SchemaExpression,
   SchemaTpl,
-  TokenizeableString
+  SchemaTokenizeableString
 } from '../Schema';
 import {CardSchema} from './Card';
 
@@ -75,7 +75,7 @@ export interface CardsSchema extends BaseSchema {
    *
    * @default ${items}
    */
-  source?: TokenizeableString;
+  source?: SchemaTokenizeableString;
 
   /**
    * 标题

src/renderers/Carousel.tsx

@@ -98,7 +98,7 @@ export interface CarouselState {
   nextAnimation: string;
 }
 
-const defaultSchema = {
+const defaultSchema: SchemaObject = {
   type: 'tpl',
   tpl: `
     <% if (data.hasOwnProperty('image')) { %>

src/renderers/Collapse.tsx

@@ -1,15 +1,63 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {Collapse as BasicCollapse} from '../components/Collapse';
+import {
+  BaseSchema,
+  SchemaClassName,
+  SchemaCollection,
+  SchemaTpl
+} from '../Schema';
 
-export interface CollapseProps extends RendererProps {
-  title?: string; // 标题
+/**
+ * Collapse 折叠渲染器，格式说明。
+ * 文档：https://baidu.gitee.io/amis/docs/components/collapse
+ */
+export interface CollapseSchema extends BaseSchema {
+  /**
+   * 指定为折叠器类型
+   */
+  type: 'collapse';
+
+  /**
+   * 内容区域
+   */
+  body: SchemaCollection;
+
+  /**
+   * 配置 Body 容器 className
+   */
+  bodyClassName?: SchemaClassName;
+
+  /**
+   * 是否可折叠
+   */
+  collapsable?: boolean;
+
+  /**
+   * 默认是否折叠
+   */
+  collapsed?: boolean;
+
+  /**
+   * 标题 CSS 类名
+   */
+  headingClassName?: string;
+
+  /**
+   * 标题
+   */
+  title?: SchemaTpl;
+
+  /**
+   * 控件大小
+   */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'base';
+}
+
+export interface CollapseProps extends RendererProps, CollapseSchema {
   wrapperComponent?: any;
   headingComponent?: any;
-  collapsed?: boolean;
-  bodyClassName?: string;
-  headingClassName?: string;
+
   // 内容口子
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }

src/renderers/Color.tsx

@@ -3,14 +3,32 @@
  */
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
+import {BaseSchema} from '../Schema';
 import {resolveVariableAndFilter} from '../utils/tpl-builtin';
 
-export interface ColorProps extends RendererProps {
-  className: string;
-  defaultColor: string;
-  showValue: boolean;
+/**
+ * Color 显示渲染器，格式说明。
+ * 文档：https://baidu.gitee.io/amis/docs/components/color
+ */
+export interface ColorSchema extends BaseSchema {
+  /**
+   *  指定为颜色显示控件
+   */
+  type: 'color';
+
+  /**
+   * 默认颜色
+   */
+  defaultColor?: string;
+
+  /**
+   * 是否用文字显示值。
+   */
+  showValue?: boolean;
 }
 
+export interface ColorProps extends RendererProps, ColorSchema {}
+
 export class ColorField extends React.Component<ColorProps, object> {
   static defaultProps = {
     className: '',

src/renderers/Container.tsx

@@ -1,11 +1,31 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
+import {BaseSchema, SchemaClassName, SchemaCollection} from '../Schema';
 import {SchemaNode} from '../types';
 
-export interface ContainerProps extends RendererProps {
-  body?: SchemaNode;
+/**
+ * Container 容器渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/container
+ */
+export interface ContainerSchema extends BaseSchema {
+  /**
+   * 指定为 container 类型
+   */
+  type: 'container';
+
+  /**
+   * 内容
+   */
+  body: SchemaCollection;
+
+  /**
+   * body 类名
+   */
+  bodyClassName?: SchemaClassName;
+}
+
+export interface ContainerProps extends RendererProps, ContainerSchema {
   children?: (props: any) => React.ReactNode;
-  className?: string;
 }
 
 export default class Container<T> extends React.Component<

src/renderers/Form/index.tsx

@@ -923,18 +923,14 @@ export default class Form extends React.Component<FormProps, object> {
     region: string = '',
     otherProps: Partial<FormProps> = {}
   ): React.ReactNode {
-    return this.renderControls(
-      schema.controls as SchemaNode,
-      region,
-      otherProps
-    );
+    return this.renderControls(schema.controls!, region, otherProps);
 
     // return schema.tabs ? this.renderTabs(schema.tabs, schema, region)
     // : schema.fieldSet ? this.renderFiledSet(schema.fieldSet, schema, region) : this.renderControls(schema.controls as SchemaNode, schema, region);
   }
 
   renderControls(
-    controls: SchemaNode,
+    controls: Array<any>,
     region: string,
     otherProps: Partial<FormProps> = {}
   ): React.ReactNode {

src/types.ts

@@ -66,7 +66,7 @@ export interface Button {
   className?: string;
 }
 
-export type SchemaNode = number | string | Schema | SchemaArray;
+export type SchemaNode = Schema | string | Array<Schema | string>;
 export interface SchemaArray extends Array<SchemaNode> {}
 export interface Definitions {
   [propName: string]: SchemaNode;