test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-01 03:18:16 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

更新 Schema

Browse Source
This commit is contained in:
2betop 2020-09-09 15:58:05 +08:00
parent 4341bebf91
commit 7dd979981f
6 changed files with 221 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Schema.ts
View File

@ -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

16
src/renderers/Action.tsx
View File

@ -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,

41
src/renderers/Date.tsx
View File

@ -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<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',

85
src/renderers/Dialog.tsx
View File

@ -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<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;
showCloseButton?: boolean;
showErrorMsg?: boolean;
wrapperComponent: React.ElementType;
}
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',

15
src/renderers/Divider.tsx
View File

@ -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<DividerProps, object> {
static defaultProps: Pick<DividerProps, 'className' | 'lineStyle'> = {
className: '',

100
src/renderers/Drawer.tsx
View File

@ -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<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',