更新 Schema

src/Schema.ts

@@ -15,6 +15,8 @@ import {CollapseSchema} from './renderers/Collapse';
 import {ColorSchema} from './renderers/Color';
 import {ContainerSchema} from './renderers/Container';
 import {CRUDSchema} from './renderers/CRUD';
+import {DateSchema} from './renderers/Date';
+import {DividerSchema} from './renderers/Divider';
 
 // 每加个类型，这补充一下。
 export type SchemaType =
@@ -37,7 +39,11 @@ export type SchemaType =
   | 'collapse'
   | 'color'
   | 'container'
-  | 'crud';
+  | 'crud'
+  | 'date'
+  | 'datetime'
+  | 'time'
+  | 'divider';
 
 export type SchemaObject =
   | PageSchema
@@ -56,7 +62,9 @@ export type SchemaObject =
   | CollapseSchema
   | ColorSchema
   | ContainerSchema
-  | CRUDSchema;
+  | CRUDSchema
+  | DateSchema
+  | DividerSchema;
 
 export type SchemaCollection =
   | SchemaObject

src/renderers/Action.tsx

@@ -104,7 +104,7 @@ export interface ButtonSchema extends BaseSchema {
   /**
    * 激活状态时的类名
    */
-  activeClassName: string;
+  activeClassName?: string;
 
   /**
    * 如果按钮在弹框中，可以配置这个动作完成后是否关闭弹窗，或者指定关闭目标弹框。
@@ -128,8 +128,7 @@ export interface AjaxActionSchema extends ButtonSchema {
    */
   api: SchemaApi;
 
-  // todo
+  feedback?: DialogSchema;
-  feedback?: any;
 
   reload?: SchemaReload;
   redirect?: string;
@@ -158,8 +157,7 @@ export interface DialogActionSchema extends ButtonSchema {
    */
   actionType: 'dialog';
 
-  // todo
+  dialog: DialogSchema;
-  dialog: any;
 
   /**
    * 是否有下一个的表达式，正常可以不用配置，如果想要刷掉某些数据可以配置这个。
@@ -174,8 +172,10 @@ export interface DrawerActionSchema extends ButtonSchema {
    * 指定为打开弹窗，抽出式弹窗
    */
   actionType: 'drawer';
-  // todo
+  /**
-  drawer: any;
+   * 弹窗内容
+   */
+  drawer: DrawerSchema;
 
   /**
    * 是否有下一个的表达式，正常可以不用配置，如果想要刷掉某些数据可以配置这个。
@@ -284,6 +284,8 @@ import {
   SchemaTooltip,
   SchemaTpl
 } from '../Schema';
+import {DialogSchema} from './Dialog';
+import {DrawerSchema} from './Drawer';
 
 export interface ActionProps
   extends ButtonSchema,

src/renderers/Date.tsx

@@ -1,16 +1,46 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import moment from 'moment';
+import {BaseSchema} from '../Schema';
 
-export interface DateProps extends RendererProps {
+/**
-  className?: string;
+ * Date 展示渲染器。
-  placeholder?: string;
+ * 文档：https://baidu.gitee.io/amis/docs/components/date
+ */
+export interface DateSchema extends BaseSchema {
+  /**
+   * 指定为日期展示类型
+   */
+  type: 'date' | 'datetime' | 'time';
+
+  /**
+   * 展示的时间格式，参考 moment 中的格式说明。
+   */
   format?: string;
+
+  /**
+   * 占位符
+   */
+  placeholder?: string;
+
+  /**
+   * 值的时间格式，参考 moment 中的格式说明。
+   */
   valueFormat?: string;
+
+  /**
+   * 显示成相对时间，比如1分钟前
+   */
   fromNow?: boolean;
+
+  /**
+   * 更新频率， 默认为1分钟
+   */
   updateFrequency?: number;
 }
 
+export interface DateProps extends RendererProps, DateSchema {}
+
 export interface DateState {
   random?: number;
 }
@@ -18,7 +48,10 @@ export interface DateState {
 export class DateField extends React.Component<DateProps, DateState> {
   refreshInterval: NodeJS.Timeout;
 
-  static defaultProps: Partial<DateProps> = {
+  static defaultProps: Pick<
+    DateProps,
+    'placeholder' | 'format' | 'valueFormat' | 'fromNow' | 'updateFrequency'
+  > = {
     placeholder: '-',
     format: 'YYYY-MM-DD',
     valueFormat: 'X',

src/renderers/Dialog.tsx

@@ -12,11 +12,75 @@ import {ModalStore, IModalStore} from '../store/modal';
 import {findDOMNode} from 'react-dom';
 import {Spinner} from '../components';
 import {IServiceStore} from '../store/service';
+import {
+  BaseSchema,
+  SchemaClassName,
+  SchemaCollection,
+  SchemaName,
+  SchemaObject,
+  SchemaTpl
+} from '../Schema';
+import {ActionSchema} from './Action';
 
-export interface DialogProps extends RendererProps {
+/**
-  title?: string; // 标题
+ * Dialog 弹框渲染器。
-  size?: 'md' | 'lg' | 'sm' | 'xl' | 'full';
+ * 文档：https://baidu.gitee.io/amis/docs/components/dialog
+ */
+export interface DialogSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * 默认不用填写，自动会创建确认和取消按钮。
+   */
+  actions?: Array<ActionSchema>;
+
+  /**
+   * 内容区域
+   */
+  body?: SchemaCollection;
+
+  /**
+   * 配置 Body 容器 className
+   */
+  bodyClassName?: SchemaClassName;
+
+  /**
+   * 是否支持按 ESC 关闭 Dialog
+   */
   closeOnEsc?: boolean;
+
+  name?: SchemaName;
+
+  /**
+   * Dialog 大小
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+
+  /**
+   * 请通过配置 title 设置标题
+   */
+  title?: SchemaTpl | SchemaObject;
+
+  header?: SchemaTpl | SchemaObject;
+  headerClassName?: SchemaClassName;
+
+  footer?: SchemaTpl | SchemaObject;
+
+  /**
+   * 影响自动生成的按钮，如果自己配置了按钮这个配置无效。
+   */
+  confirm?: boolean;
+
+  /**
+   * 是否显示关闭按钮
+   */
+  showCloseButton?: boolean;
+
+  /**
+   * 是否显示错误信息
+   */
+  showErrorMsg?: boolean;
+}
+
+export interface DialogProps extends RendererProps, DialogSchema {
   onClose: () => void;
   onConfirm: (
     values: Array<object>,
@@ -26,18 +90,9 @@ export interface DialogProps extends RendererProps {
   ) => void;
   children?: React.ReactNode | ((props?: any) => React.ReactNode);
   store: IModalStore;
-  className?: string;
-  header?: SchemaNode;
-  body?: SchemaNode;
-  headerClassName?: string;
-  bodyClassName?: string;
-  footer?: SchemaNode;
-  confirm?: boolean;
   show?: boolean;
   lazyRender?: boolean;
-  wrapperComponent: React.ReactType;
+  wrapperComponent: React.ElementType;
-  showCloseButton?: boolean;
-  showErrorMsg?: boolean;
 }
 
 export interface DialogState {
@@ -122,14 +177,14 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
     this.isDead = true;
   }
 
-  buildActions(): Array<Action> {
+  buildActions(): Array<ActionSchema> {
     const {actions, confirm, translate: __} = this.props;
 
     if (typeof actions !== 'undefined') {
       return actions;
     }
 
-    let ret: Array<Action> = [];
+    let ret: Array<ActionSchema> = [];
     ret.push({
       type: 'button',
       actionType: 'cancel',

src/renderers/Divider.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {ServiceStore, IServiceStore} from '../store/service';
+import {BaseSchema} from '../Schema';
-import {filter} from '../utils/tpl';
-import cx from 'classnames';
 
-export interface DividerProps extends RendererProps {
+/**
-  lineStyle: 'dashed' | 'solid';
+ * Divider 分割线渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/divider
+ */
+export interface DividerSchema extends BaseSchema {
+  type: 'divider';
+  lineStyle?: 'dashed' | 'solid';
 }
 
+export interface DividerProps extends RendererProps, DividerSchema {}
+
 export default class Divider extends React.Component<DividerProps, object> {
   static defaultProps: Pick<DividerProps, 'className' | 'lineStyle'> = {
     className: '',

src/renderers/Drawer.tsx

@@ -11,12 +11,90 @@ import {IModalStore, ModalStore} from '../store/modal';
 import {filter} from '../utils/tpl';
 import {Spinner} from '../components';
 import {IServiceStore} from '../store/service';
+import {
+  BaseSchema,
+  SchemaClassName,
+  SchemaCollection,
+  SchemaName,
+  SchemaObject,
+  SchemaTpl
+} from '../Schema';
+import {ActionSchema} from './Action';
 
-export interface DrawerProps extends RendererProps {
+/**
-  title?: string; // 标题
+ * Drawer 抽出式弹框。
-  size?: 'md' | 'lg' | 'xs' | 'sm';
+ * 文档：https://baidu.gitee.io/amis/docs/components/drawer
-  position?: 'left' | 'right' | 'top' | 'bottom';
+ */
+export interface DrawerSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * 默认不用填写，自动会创建确认和取消按钮。
+   */
+  actions?: Array<ActionSchema>;
+
+  /**
+   * 内容区域
+   */
+  body?: SchemaCollection;
+
+  /**
+   * 配置 Body 容器 className
+   */
+  bodyClassName?: SchemaClassName;
+
+  /**
+   * 是否支持按 ESC 关闭 Dialog
+   */
   closeOnEsc?: boolean;
+
+  name?: SchemaName;
+
+  /**
+   * Dialog 大小
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+
+  /**
+   * 请通过配置 title 设置标题
+   */
+  title?: SchemaTpl | SchemaObject;
+
+  /**
+   * 从什么位置弹出
+   */
+  position?: 'left' | 'right' | 'top' | 'bottom';
+
+  /**
+   * 头部
+   */
+  header?: SchemaCollection;
+
+  /**
+   * 底部
+   */
+  footer?: SchemaCollection;
+
+  /**
+   * 影响自动生成的按钮，如果自己配置了按钮这个配置无效。
+   */
+  confirm?: boolean;
+
+  /**
+   * 是否可以拖动弹窗大小
+   */
+  resizable?: boolean;
+
+  /**
+   * 是否显示蒙层
+   */
+  overlay?: boolean;
+
+  /**
+   * 点击外部的时候是否关闭弹框。
+   */
+  closeOnOutside?: boolean;
+}
+
+export interface DrawerProps extends RendererProps, DrawerSchema {
   onClose: () => void;
   onConfirm: (
     values: Array<object>,
@@ -26,16 +104,8 @@ export interface DrawerProps extends RendererProps {
   ) => void;
   children?: React.ReactNode | ((props?: any) => React.ReactNode);
   store: IModalStore;
-  className?: string;
+
-  header?: SchemaNode;
-  body?: SchemaNode;
-  bodyClassName?: string;
-  footer?: SchemaNode;
-  confirm?: boolean;
   show?: boolean;
-  resizable?: boolean;
-  overlay?: boolean;
-  closeOnOutside?: boolean;
   drawerContainer?: () => HTMLElement;
 }
 
@@ -113,14 +183,14 @@ export default class Drawer extends React.Component<DrawerProps, object> {
     this.reaction && this.reaction();
   }
 
-  buildActions(): Array<Action> {
+  buildActions(): Array<ActionSchema> {
     const {actions, confirm, translate: __} = this.props;
 
     if (typeof actions !== 'undefined') {
       return actions;
     }
 
-    let ret: Array<Action> = [];
+    let ret: Array<ActionSchema> = [];
     ret.push({
       type: 'button',
       actionType: 'close',