From 7dd979981f3fb8c70b18a92673ef573a335729f4 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Wed, 9 Sep 2020 15:58:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20Schema?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Schema.ts | 12 ++++- src/renderers/Action.tsx | 16 +++--- src/renderers/Date.tsx | 41 ++++++++++++++-- src/renderers/Dialog.tsx | 85 ++++++++++++++++++++++++++------ src/renderers/Divider.tsx | 15 ++++-- src/renderers/Drawer.tsx | 100 ++++++++++++++++++++++++++++++++------ 6 files changed, 221 insertions(+), 48 deletions(-) diff --git a/src/Schema.ts b/src/Schema.ts index cf3f46ddd..8fb54bb3e 100644 --- a/src/Schema.ts +++ b/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 diff --git a/src/renderers/Action.tsx b/src/renderers/Action.tsx index 0bd4ee989..84c24b6ed 100644 --- a/src/renderers/Action.tsx +++ b/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?: any; + feedback?: DialogSchema; reload?: SchemaReload; redirect?: string; @@ -158,8 +157,7 @@ export interface DialogActionSchema extends ButtonSchema { */ actionType: 'dialog'; - // todo - dialog: any; + dialog: DialogSchema; /** * 是否有下一个的表达式，正常可以不用配置，如果想要刷掉某些数据可以配置这个。 @@ -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, diff --git a/src/renderers/Date.tsx b/src/renderers/Date.tsx index 7dafe209e..66eb4dada 100644 --- a/src/renderers/Date.tsx +++ b/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; - placeholder?: string; +/** + * Date 展示渲染器。 + * 文档：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 { refreshInterval: NodeJS.Timeout; - static defaultProps: Partial = { + static defaultProps: Pick< + DateProps, + 'placeholder' | 'format' | 'valueFormat' | 'fromNow' | 'updateFrequency' + > = { placeholder: '-', format: 'YYYY-MM-DD', valueFormat: 'X', diff --git a/src/renderers/Dialog.tsx b/src/renderers/Dialog.tsx index e1594cc83..de66ca4e4 100644 --- a/src/renderers/Dialog.tsx +++ b/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; // 标题 - size?: 'md' | 'lg' | 'sm' | 'xl' | 'full'; +/** + * Dialog 弹框渲染器。 + * 文档：https://baidu.gitee.io/amis/docs/components/dialog + */ +export interface DialogSchema extends Omit { + /** + * 默认不用填写，自动会创建确认和取消按钮。 + */ + actions?: Array; + + /** + * 内容区域 + */ + 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, @@ -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; - showCloseButton?: boolean; - showErrorMsg?: boolean; + wrapperComponent: React.ElementType; } export interface DialogState { @@ -122,14 +177,14 @@ export default class Dialog extends React.Component { this.isDead = true; } - buildActions(): Array { + buildActions(): Array { const {actions, confirm, translate: __} = this.props; if (typeof actions !== 'undefined') { return actions; } - let ret: Array = []; + let ret: Array = []; ret.push({ type: 'button', actionType: 'cancel', diff --git a/src/renderers/Divider.tsx b/src/renderers/Divider.tsx index e6f393e2d..bd6d4c1ab 100644 --- a/src/renderers/Divider.tsx +++ b/src/renderers/Divider.tsx @@ -1,13 +1,18 @@ import React from 'react'; import {Renderer, RendererProps} from '../factory'; -import {ServiceStore, IServiceStore} from '../store/service'; -import {filter} from '../utils/tpl'; -import cx from 'classnames'; +import {BaseSchema} from '../Schema'; -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 { static defaultProps: Pick = { className: '', diff --git a/src/renderers/Drawer.tsx b/src/renderers/Drawer.tsx index 39a5b5e23..80bf843c4 100644 --- a/src/renderers/Drawer.tsx +++ b/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; // 标题 - size?: 'md' | 'lg' | 'xs' | 'sm'; - position?: 'left' | 'right' | 'top' | 'bottom'; +/** + * Drawer 抽出式弹框。 + * 文档：https://baidu.gitee.io/amis/docs/components/drawer + */ +export interface DrawerSchema extends Omit { + /** + * 默认不用填写，自动会创建确认和取消按钮。 + */ + actions?: Array; + + /** + * 内容区域 + */ + 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, @@ -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 { this.reaction && this.reaction(); } - buildActions(): Array { + buildActions(): Array { const {actions, confirm, translate: __} = this.props; if (typeof actions !== 'undefined') { return actions; } - let ret: Array = []; + let ret: Array = []; ret.push({ type: 'button', actionType: 'close',