diff --git a/src/Schema.ts b/src/Schema.ts index 94fe9af40..a4a546623 100644 --- a/src/Schema.ts +++ b/src/Schema.ts @@ -44,6 +44,7 @@ import {VBoxSchema} from './renderers/VBox'; import {VideoSchema} from './renderers/Video'; import {WizardSchema} from './renderers/Wizard'; import {WrapperSchema} from './renderers/Wrapper'; +import {TableSchema} from './renderers/Table'; // 每加个类型,这补充一下。 export type SchemaType = @@ -95,6 +96,7 @@ export type SchemaType = | 'service' | 'status' | 'switch' + | 'table' | 'tabs' | 'tasks' | 'vbox' @@ -143,6 +145,7 @@ export type SchemaObject = | ServiceSchema | StatusSchema | SwitchSchema + | TableSchema | TabsSchema | TasksSchema | VBoxSchema diff --git a/src/renderers/Alert.tsx b/src/renderers/Alert.tsx index cf78ea515..6c1a061f0 100644 --- a/src/renderers/Alert.tsx +++ b/src/renderers/Alert.tsx @@ -4,7 +4,8 @@ import Alert, {AlertProps} from '../components/Alert2'; import {BaseSchema, SchemaCollection} from '../Schema'; /** - * Alert 提示渲染器,文档:https://baidu.gitee.io/amis/docs/components/alert + * Alert 提示渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/alert */ export interface AlertSchema extends BaseSchema { /** diff --git a/src/renderers/Audio.tsx b/src/renderers/Audio.tsx index 85550f5a4..6a2f6cc9f 100644 --- a/src/renderers/Audio.tsx +++ b/src/renderers/Audio.tsx @@ -8,7 +8,8 @@ import {filter} from '../utils/tpl'; import {BaseSchema, SchemaUrlPath} from '../Schema'; /** - * Audio 音频渲染器,文档:https://baidu.gitee.io/amis/docs/components/audio + * Audio 音频渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/audio */ export interface AudioSchema extends BaseSchema { /** diff --git a/src/renderers/ButtonGroup.tsx b/src/renderers/ButtonGroup.tsx index ebcf94811..c5d33dde1 100644 --- a/src/renderers/ButtonGroup.tsx +++ b/src/renderers/ButtonGroup.tsx @@ -5,7 +5,8 @@ import {BaseSchema, SchemaClassName, SchemaExpression} from '../Schema'; import {ActionSchema} from './Action'; /** - * Button Group 渲染器,文档:https://baidu.gitee.io/amis/docs/components/button-group + * Button Group 渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/button-group */ export interface ButtonGroupSchema extends BaseSchema { /** diff --git a/src/renderers/ButtonToolbar.tsx b/src/renderers/ButtonToolbar.tsx index 23f352415..9aef4eefa 100644 --- a/src/renderers/ButtonToolbar.tsx +++ b/src/renderers/ButtonToolbar.tsx @@ -4,7 +4,8 @@ import {BaseSchema} from '../Schema'; import {ActionSchema} from './Action'; /** - * Button Toolar 渲染器,文档:https://baidu.gitee.io/amis/docs/components/button-toolbar + * Button Toolar 渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/button-toolbar */ export interface ButtonToolbarSchema extends BaseSchema { /** diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index 181eb4c7b..7d6b34878 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -49,6 +49,7 @@ import { import {ActionSchema} from './Action'; import {CardsSchema} from './Cards'; import {ListSchema} from './List'; +import {TableSchema} from './Table'; export interface CRUDCommonSchema extends BaseSchema { /** @@ -234,11 +235,15 @@ export type CRUDListSchema = CRUDCommonSchema & { mode: 'list'; } & Omit; +export type CRUDTableSchem = CRUDCommonSchema & { + mode?: 'table'; +} & Omit; + /** * CRUD 增删改查渲染器。 * 文档:https://baidu.gitee.io/amis/docs/components/crud */ -export type CRUDSchema = CRUDCardsSchema | CRUDListSchema; // todo +export type CRUDSchema = CRUDCardsSchema | CRUDListSchema | CRUDTableSchem; export interface CRUDProps extends RendererProps, CRUDCommonSchema { store: ICRUDStore; diff --git a/src/renderers/Card.tsx b/src/renderers/Card.tsx index b06a23e1f..52b9fdbe6 100644 --- a/src/renderers/Card.tsx +++ b/src/renderers/Card.tsx @@ -8,10 +8,10 @@ import Checkbox from '../components/Checkbox'; import {IItem} from '../store/list'; import {padArr, isVisible, isDisabled, noop} from '../utils/helper'; import {resolveVariable} from '../utils/tpl-builtin'; -import QuickEdit from './QuickEdit'; -import PopOver from './PopOver'; +import QuickEdit, {SchemaQuickEdit} from './QuickEdit'; +import PopOver, {SchemaPopOver} from './PopOver'; import {TableCell} from './Table'; -import Copyable from './Copyable'; +import Copyable, {SchemaCopyable} from './Copyable'; import {Icon} from '../components/icons'; import { BaseSchema, @@ -24,8 +24,36 @@ import { } from '../Schema'; import {ActionSchema} from './Action'; +export type CardBodyField = BaseSchema & { + /** + * 列标题 + */ + label: string; + + /** + * 绑定字段名 + */ + name?: string; + + /** + * 配置查看详情功能 + */ + popOver?: SchemaPopOver; + + /** + * 配置快速编辑功能 + */ + quickEdit?: SchemaQuickEdit; + + /** + * 配置点击复制功能 + */ + copyable?: SchemaCopyable; +}; + /** - * Card 卡片渲染器,格式说明,文档:https://baidu.gitee.io/amis/docs/components/card + * Card 卡片渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/card */ export interface CardSchema extends BaseSchema { /** @@ -110,7 +138,7 @@ export interface CardSchema extends BaseSchema { /** * 内容区域 */ - body?: SchemaCollection; // todo 实际上应该只有固定的一些 field + body?: Array; /** * 底部按钮集合。 diff --git a/src/renderers/Cards.tsx b/src/renderers/Cards.tsx index 97ee00941..758452d4a 100644 --- a/src/renderers/Cards.tsx +++ b/src/renderers/Cards.tsx @@ -26,7 +26,8 @@ import { import {CardSchema} from './Card'; /** - * Cards 卡片集合渲染器,格式说明,文档:https://baidu.gitee.io/amis/docs/components/card + * Cards 卡片集合渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/card */ export interface CardsSchema extends BaseSchema { /** diff --git a/src/renderers/Carousel.tsx b/src/renderers/Carousel.tsx index 9dfd52ab8..84948f69f 100644 --- a/src/renderers/Carousel.tsx +++ b/src/renderers/Carousel.tsx @@ -16,7 +16,8 @@ import {Icon} from '../components/icons'; import {BaseSchema, SchemaName, SchemaObject, SchemaTpl} from '../Schema'; /** - * Carousel 轮播图渲染器,格式说明,文档:https://baidu.gitee.io/amis/docs/components/carousel + * Carousel 轮播图渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/carousel */ export interface CarouselSchema extends BaseSchema { /** diff --git a/src/renderers/Chart.tsx b/src/renderers/Chart.tsx index 0cf791ae5..753711ebe 100644 --- a/src/renderers/Chart.tsx +++ b/src/renderers/Chart.tsx @@ -23,7 +23,8 @@ import { import {ActionSchema} from './Action'; /** - * Chart 图表渲染器,格式说明,文档:https://baidu.gitee.io/amis/docs/components/carousel + * Chart 图表渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/carousel */ export interface ChartSchema extends BaseSchema { /** diff --git a/src/renderers/Copyable.tsx b/src/renderers/Copyable.tsx index 51e429e1f..83ba45fef 100644 --- a/src/renderers/Copyable.tsx +++ b/src/renderers/Copyable.tsx @@ -10,19 +10,26 @@ import hoistNonReactStatic from 'hoist-non-react-statics'; import Button from '../components/Button'; import {filter} from '../utils/tpl'; import {Icon} from '../components/icons'; +import {SchemaIcon, SchemaTpl} from '../Schema'; -export interface CopyableConfig {} +export interface SchemaCopyableObject { + /** + * 可以配置图标 + */ + icon?: SchemaIcon; -export interface CopyableConfig { - icon?: string; - content?: string; - [propName: string]: any; + /** + * 配置复制时的内容模板。 + */ + content?: SchemaTpl; } +export type SchemaCopyable = boolean | SchemaCopyableObject; + export interface CopyableProps extends RendererProps { name?: string; label?: string; - copyable: boolean | CopyableConfig; + copyable: SchemaCopyable; } export const HocCopyable = () => (Component: React.ComponentType): any => { @@ -45,7 +52,8 @@ export const HocCopyable = () => (Component: React.ComponentType): any => { if (copyable && !noHoc) { const content = filter( - (copyable as CopyableConfig).content || '${' + name + ' | raw }', + (copyable as SchemaCopyableObject).content || + '${' + name + ' | raw }', data ); if (content) { diff --git a/src/renderers/Form/index.tsx b/src/renderers/Form/index.tsx index cf691e187..bddd04882 100644 --- a/src/renderers/Form/index.tsx +++ b/src/renderers/Form/index.tsx @@ -89,14 +89,9 @@ export type FormGroup = FormSchema & { export type FormGroupNode = FormGroup | FormGroupArray; export interface FormGroupArray extends Array {} -export interface FormHorizontal { - leftFixed?: boolean | string; - left: string | number; - right: string | number; - offset: string | number; -} +export type FormHorizontal = FormSchemaHorizontal; -export interface FormProps extends RendererProps, FormSchema { +export interface FormProps extends RendererProps, Omit { data: any; store: IFormStore; wrapperComponent: React.ReactType; diff --git a/src/renderers/List.tsx b/src/renderers/List.tsx index 74b910037..1b76403e9 100644 --- a/src/renderers/List.tsx +++ b/src/renderers/List.tsx @@ -17,11 +17,11 @@ import { noop } from '../utils/helper'; import {resolveVariable} from '../utils/tpl-builtin'; -import QuickEdit from './QuickEdit'; -import PopOver from './PopOver'; +import QuickEdit, {SchemaQuickEdit} from './QuickEdit'; +import PopOver, {SchemaPopOver} from './PopOver'; import Sortable from 'sortablejs'; import {TableCell} from './Table'; -import Copyable from './Copyable'; +import Copyable, {SchemaCopyable} from './Copyable'; import {Icon} from '../components/icons'; import { BaseSchema, @@ -36,6 +36,33 @@ import { import {ActionSchema} from './Action'; import {SchemaRemark} from './Remark'; +export type ListBodyField = BaseSchema & { + /** + * 列标题 + */ + label: string; + + /** + * 绑定字段名 + */ + name?: string; + + /** + * 配置查看详情功能 + */ + popOver?: SchemaPopOver; + + /** + * 配置快速编辑功能 + */ + quickEdit?: SchemaQuickEdit; + + /** + * 配置点击复制功能 + */ + copyable?: SchemaCopyable; +}; + export interface ListItemSchema extends Omit { actions?: Array; @@ -47,7 +74,7 @@ export interface ListItemSchema extends Omit { /** * 内容区域 */ - body?: SchemaCollection; // todo 实际上应该只有固定的一些 field + body?: Array; /** * 描述 diff --git a/src/renderers/PopOver.tsx b/src/renderers/PopOver.tsx index 43afa95fa..3b90d8e8d 100644 --- a/src/renderers/PopOver.tsx +++ b/src/renderers/PopOver.tsx @@ -12,13 +12,28 @@ import {RootCloseWrapper} from 'react-overlays'; import PopOver, {Offset} from '../components/PopOver'; import Overlay from '../components/Overlay'; import {Icon} from '../components/icons'; +import {SchemaCollection} from '../Schema'; -export interface PopOverConfig { - saveImmediately?: boolean; +export interface SchemaPopOverObject { + /** + * 类名 + */ + className?: string; + + /** + * 弹出模式 + */ mode?: 'dialog' | 'drawer' | 'popOver'; - title?: string; + + /** + * 是弹窗形式的时候有用。 + */ size?: 'sm' | 'md' | 'lg' | 'xl'; - position: + + /** + * 弹出位置 + */ + position?: | 'center' | 'left-top' | 'right-top' @@ -29,14 +44,29 @@ export interface PopOverConfig { | 'fixed-right-top' | 'fixed-left-bottom' | 'fixed-right-bottom'; - offset?: Offset; - [propName: string]: any; + + /** + * 偏移量 + */ + offset?: { + top?: number; + left?: number; + }; + + /** + * 标题 + */ + title?: string; + + body?: SchemaCollection; } +export type SchemaPopOver = boolean | SchemaPopOverObject; + export interface PopOverProps extends RendererProps { name?: string; label?: string; - popOver: boolean | PopOverConfig; + popOver: boolean | SchemaPopOverObject; onPopOverOpened: (popover: any) => void; onPopOverClosed: (popover: any) => void; } @@ -45,7 +75,7 @@ export interface PopOverState { isOpened: boolean; } -export const HocPopOver = (config: Partial = {}) => ( +export const HocPopOver = (config: Partial = {}) => ( Component: React.ComponentType ): any => { class PopOverComponent extends React.Component { @@ -136,8 +166,8 @@ export const HocPopOver = (config: Partial = {}) => ( } = this.props; if ( popOver && - ((popOver as PopOverConfig).mode === 'dialog' || - (popOver as PopOverConfig).mode === 'drawer') + ((popOver as SchemaPopOverObject).mode === 'dialog' || + (popOver as SchemaPopOverObject).mode === 'drawer') ) { return render('popover-detail', this.buildSchema(), { show: true, @@ -147,14 +177,15 @@ export const HocPopOver = (config: Partial = {}) => ( } const content = render('popover-detail', this.buildSchema(), { - className: cx((popOver as PopOverConfig).className) + className: cx((popOver as SchemaPopOverObject).className) }) as JSX.Element; if (!popOverContainer) { popOverContainer = () => findDOMNode(this); } - const position = (popOver && (popOver as PopOverConfig).position) || ''; + const position = + (popOver && (popOver as SchemaPopOverObject).position) || ''; const isFixed = /^fixed\-/.test(position); return isFixed ? ( @@ -179,7 +210,7 @@ export const HocPopOver = (config: Partial = {}) => ( {content} diff --git a/src/renderers/QuickEdit.tsx b/src/renderers/QuickEdit.tsx index 6c26aa746..9c9d655cb 100644 --- a/src/renderers/QuickEdit.tsx +++ b/src/renderers/QuickEdit.tsx @@ -18,8 +18,42 @@ import matches from 'dom-helpers/query/matches'; import Overlay from '../components/Overlay'; import PopOver from '../components/PopOver'; import {Icon} from '../components/icons'; +import {FormControlSchema} from './Form/Item'; -export interface QuickEditConfig {} +export type SchemaQuickEditObject = + /** + * 直接就是个表单项 + */ + | ({ + /** + * 是否立即保存 + */ + saveImmediately?: boolean; + + /** + * 是否直接内嵌 + */ + mode?: 'inline'; + } & FormControlSchema) + + /** + * 表单项集合 + */ + | { + /** + * 是否立即保存 + */ + saveImmediately?: boolean; + + /** + * 是否直接内嵌 + */ + mode?: 'inline'; + + controls: Array; + }; + +export type SchemaQuickEdit = boolean | SchemaQuickEditObject; export interface QuickEditConfig { saveImmediately?: boolean; diff --git a/src/renderers/Service.tsx b/src/renderers/Service.tsx index 8477c1a9b..1638be836 100644 --- a/src/renderers/Service.tsx +++ b/src/renderers/Service.tsx @@ -52,7 +52,7 @@ export interface ServiceSchema extends BaseSchema { * * @deprecated 改成 api 的 sendOn。 */ - initFetchOn?: boolean; + initFetchOn?: SchemaExpression; /** * 用来获取远程 Schema 的 api @@ -93,6 +93,10 @@ export interface ServiceSchema extends BaseSchema { export interface ServiceProps extends RendererProps, ServiceSchema { store: IServiceStore; + messages: { + fetchSuccess?: string; + fetchFailed?: string; + }; } export default class Service extends React.Component { timer: NodeJS.Timeout; @@ -127,9 +131,7 @@ export default class Service extends React.Component { const props = this.props; const store = props.store; - const { - messages: {fetchSuccess, fetchFailed} - } = props; + const {fetchSuccess, fetchFailed} = props.messages!; isApiOutdated(prevProps.api, props.api, prevProps.data, props.data) && store diff --git a/src/renderers/Table/index.tsx b/src/renderers/Table/index.tsx index 58794bf27..1aeb0cc75 100644 --- a/src/renderers/Table/index.tsx +++ b/src/renderers/Table/index.tsx @@ -27,10 +27,148 @@ import {TableRow} from './TableRow'; import {HeadCellFilterDropDown} from './HeadCellFilterDropdown'; import {HeadCellSearchDropDown} from './HeadCellSearchDropdown'; import {TableContent} from './TableContent'; +import { + BaseSchema, + SchemaClassName, + SchemaObject, + SchemaTokenizeableString +} from '../../Schema'; +import {FormControlSchema, FormControlType} from '../Form/Item'; +import {SchemaPopOver} from '../PopOver'; +import {SchemaQuickEdit} from '../QuickEdit'; +import {SchemaCopyable} from '../Copyable'; -export interface Column { - type: string; - [propName: string]: any; +export type TableColumn = BaseSchema & { + /** + * 列标题 + */ + label: string; + + /** + * 配置是否固定当前列 + */ + fixed?: 'left' | 'right' | 'none'; + + /** + * 绑定字段名 + */ + name?: string; + + /** + * 配置查看详情功能 + */ + popOver?: SchemaPopOver; + + /** + * 配置快速编辑功能 + */ + quickEdit?: SchemaQuickEdit; + + /** + * 配置点击复制功能 + */ + copyable?: SchemaCopyable; + + /** + * 配置是否可以排序 + */ + sortable?: boolean; + + /** + * 配置是否默认展示 + */ + toggled?: boolean; + + /** + * 列宽度 + */ + width?: number | string; + + /** + * 结合表格的 footable 一起使用。 + * 填写 *、xs、sm、md、lg指定 footable 的触发条件,可以填写多个用空格隔开 + */ + breakpoint?: '*' | 'xs' | 'sm' | 'md' | 'lg'; +}; + +/** + * Table 表格渲染器。 + * 文档:https://baidu.gitee.io/amis/docs/components/table + */ +export interface TableSchema extends BaseSchema { + /** + * 指定为表格渲染器。 + */ + type: 'table'; + + /** + * 是否固定表头 + */ + affixHeader?: boolean; + + /** + * 表格的列信息 + */ + columns: Array; + + /** + * 展示列显示开关,自动即:列数量大于或等于5个时自动开启 + */ + columnsTogglable?: boolean | 'auto'; + + /** + * 是否开启底部展示功能,适合移动端展示 + */ + footable?: + | boolean + | { + expand?: 'first' | 'all' | 'none'; + }; + + /** + * 底部外层 CSS 类名 + */ + footerClassName?: SchemaClassName; + + /** + * 顶部外层 CSS 类名 + */ + headerClassName?: SchemaClassName; + + /** + * 占位符 + */ + placeholder?: string; + + /** + * 是否显示底部 + */ + showFooter?: boolean; + + /** + * 是否显示头部 + */ + showHeader?: boolean; + + /** + * 数据源:绑定当前环境变量 + */ + source?: SchemaTokenizeableString; + + /** + * 表格 CSS 类名 + */ + tableClassName?: SchemaClassName; + + /** + * 标题 + */ + title?: string; + + /** + * 工具栏 CSS 类名 + */ + toolbarClassName?: SchemaClassName; } export interface TableProps extends RendererProps { @@ -42,7 +180,7 @@ export interface TableProps extends RendererProps { headerClassName?: string; footerClassName?: string; store: ITableStore; - columns?: Array; + columns?: Array; headingClassName?: string; toolbarClassName?: string; headerToolbarClassName?: string; diff --git a/src/renderers/Tabs.tsx b/src/renderers/Tabs.tsx index 9983f11b2..7f37296f9 100644 --- a/src/renderers/Tabs.tsx +++ b/src/renderers/Tabs.tsx @@ -6,7 +6,12 @@ import {isVisible, autobind, isDisabled} from '../utils/helper'; import findIndex from 'lodash/findIndex'; import {Tabs as CTabs, Tab} from '../components/Tabs'; import {ClassNamesFn} from '../theme'; -import {BaseSchema, SchemaClassName, SchemaIcon} from '../Schema'; +import { + BaseSchema, + SchemaClassName, + SchemaCollection, + SchemaIcon +} from '../Schema'; import {ActionSchema} from './Action'; export interface TabSchema extends Omit { @@ -19,12 +24,12 @@ export interface TabSchema extends Omit { * 内容 * @deprecated 用 body 属性 */ - tab?: SchemaNode; + tab?: SchemaCollection; /** * 内容 */ - body?: SchemaNode; + body?: SchemaCollection; /** * 徽标