mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
更新 Schema
This commit is contained in:
2betop
parent
6fd70dfe45
commit
a7d7bdf189
@ -20,7 +20,7 @@ import {DividerSchema} from './renderers/Divider';
|
||||
import {DropdownButtonSchema} from './renderers/DropDownButton';
|
||||
import {EachSchema} from './renderers/Each';
|
||||
import {GridSchema} from './renderers/Grid';
|
||||
import {HboxSchema} from './renderers/HBox';
|
||||
import {HBoxSchema} from './renderers/HBox';
|
||||
import {IconSchema} from './renderers/Icon';
|
||||
import {IFrameSchema} from './renderers/IFrame';
|
||||
import {ImageSchema} from './renderers/Image';
|
||||
@ -127,7 +127,7 @@ export type SchemaObject =
|
||||
| DropdownButtonSchema
|
||||
| EachSchema
|
||||
| GridSchema
|
||||
| HboxSchema
|
||||
| HBoxSchema
|
||||
| IconSchema
|
||||
| IFrameSchema
|
||||
| ImageSchema
|
||||
|
||||
@ -25,7 +25,7 @@ export interface ColorProps extends LocaleProps, ThemeProps {
|
||||
disabled?: boolean;
|
||||
popOverContainer?: any;
|
||||
placement?: string;
|
||||
value: any;
|
||||
value?: any;
|
||||
onChange: (value: any) => void;
|
||||
presetColors?: string[];
|
||||
resetValue?: string;
|
||||
|
||||
@ -242,7 +242,7 @@ export interface DateProps extends LocaleProps, ThemeProps {
|
||||
defaultValue?: any;
|
||||
utc?: boolean;
|
||||
onChange: (value: any) => void;
|
||||
value: any;
|
||||
value?: any;
|
||||
shortcuts: string | Array<ShortCuts>;
|
||||
overlayPlacement: string;
|
||||
minTime?: moment.Moment;
|
||||
|
||||
@ -31,7 +31,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
|
||||
maxDate?: moment.Moment;
|
||||
joinValues: boolean;
|
||||
delimiter: string;
|
||||
value: any;
|
||||
value?: any;
|
||||
onChange: (value: any) => void;
|
||||
data?: any;
|
||||
disabled?: boolean;
|
||||
|
||||
@ -19,11 +19,31 @@ export interface ButtonGroupSchema extends BaseSchema {
|
||||
*/
|
||||
btnClassName?: SchemaClassName;
|
||||
|
||||
/**
|
||||
* 给选中态 Button 配置 className。
|
||||
*/
|
||||
btnActiveClassName: string;
|
||||
|
||||
/**
|
||||
* 按钮集合
|
||||
*/
|
||||
buttons?: Array<ActionSchema>;
|
||||
|
||||
/**
|
||||
* 按钮样式级别
|
||||
*/
|
||||
btnLevel: string;
|
||||
|
||||
/**
|
||||
* 按钮选中的样式级别
|
||||
*/
|
||||
btnActiveLevel: string;
|
||||
|
||||
/**
|
||||
* 垂直展示？
|
||||
*/
|
||||
vertical?: boolean;
|
||||
|
||||
/**
|
||||
* 是否为禁用状态。
|
||||
*/
|
||||
|
||||
@ -54,7 +54,9 @@ export interface CollapseSchema extends BaseSchema {
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'base';
|
||||
}
|
||||
|
||||
export interface CollapseProps extends RendererProps, CollapseSchema {
|
||||
export interface CollapseProps
|
||||
extends RendererProps,
|
||||
Omit<CollapseSchema, 'type'> {
|
||||
wrapperComponent?: any;
|
||||
headingComponent?: any;
|
||||
|
||||
|
||||
@ -1,19 +1,36 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {
|
||||
FormItem,
|
||||
FormControlProps,
|
||||
FormBaseControl,
|
||||
FormControlSchema
|
||||
} from './Item';
|
||||
import {Schema} from '../../types';
|
||||
import {ComboStore, IComboStore} from '../../store/combo';
|
||||
import {observer} from 'mobx-react';
|
||||
import Combo from './Combo';
|
||||
import Combo, {ComboControlSchema} from './Combo';
|
||||
import {SchemaApi} from '../../Schema';
|
||||
|
||||
export interface ArrayProps extends FormControlProps {
|
||||
placeholder?: string;
|
||||
controls: Array<Schema>;
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
addButtonClassName?: string;
|
||||
items: Schema & {
|
||||
/**
|
||||
* Array 数组输入框。 combo 的别名。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/array
|
||||
*/
|
||||
export interface ArrayControlSchema
|
||||
extends Omit<ComboControlSchema, 'type' | 'controls' | 'conditions'> {
|
||||
/**
|
||||
* 指定为数组输入框类型
|
||||
*/
|
||||
type: 'array';
|
||||
|
||||
/**
|
||||
* 成员渲染器配置
|
||||
*/
|
||||
items: FormControlSchema & {
|
||||
unique?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ArrayProps extends FormControlProps, ArrayControlSchema {
|
||||
store: IComboStore;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import cx from 'classnames';
|
||||
import {Button} from '../../types';
|
||||
import {ActionSchema} from '../Action';
|
||||
|
||||
/**
|
||||
* 按钮控件。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/button
|
||||
*/
|
||||
export type ButtonControlSchema = ActionSchema;
|
||||
|
||||
export interface ButtonProps extends FormControlProps, Omit<Button, 'size'> {}
|
||||
|
||||
|
||||
@ -1,17 +1,31 @@
|
||||
import React from 'react';
|
||||
import cx from 'classnames';
|
||||
import {OptionsControl, OptionsControlProps, Option} from './Options';
|
||||
import {
|
||||
OptionsControl,
|
||||
OptionsControlProps,
|
||||
Option,
|
||||
FormOptionsControl
|
||||
} from './Options';
|
||||
import {Button} from '../../types';
|
||||
import {getLevelFromClassName, autobind, isEmpty} from '../../utils/helper';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
import {ButtonGroupSchema} from '../ButtonGroup';
|
||||
import {FormBaseControl} from './Item';
|
||||
|
||||
export interface ButtonGroupProps extends OptionsControlProps {
|
||||
buttons?: Array<Button>;
|
||||
btnLevel: string;
|
||||
btnActiveLevel: string;
|
||||
btnClassName: string;
|
||||
btnActiveClassName: string;
|
||||
vertical?: boolean;
|
||||
/**
|
||||
* 按钮组控件。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/button-group
|
||||
*/
|
||||
export interface ButtonGroupControlSchema
|
||||
extends ButtonGroupSchema,
|
||||
Omit<FormOptionsControl, 'size'> {
|
||||
type: 'button-group';
|
||||
}
|
||||
|
||||
export interface ButtonGroupProps
|
||||
extends OptionsControlProps,
|
||||
Omit<ButtonGroupControlSchema, 'size' | 'source'> {
|
||||
options: Array<Option>;
|
||||
}
|
||||
|
||||
export default class ButtonGroupControl extends React.Component<
|
||||
|
||||
@ -1,12 +1,23 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import cx from 'classnames';
|
||||
import {Button} from '../../types';
|
||||
import {ButtonToolbarSchema} from '../ButtonToolbar';
|
||||
|
||||
export interface ButtonToolbarProps extends FormControlProps {
|
||||
buttons?: Array<Button>;
|
||||
/**
|
||||
* 按钮工具栏控件。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/button-toolbar
|
||||
*/
|
||||
export interface ButtonToolbarControlSchema
|
||||
extends ButtonToolbarSchema,
|
||||
FormBaseControl {
|
||||
type: 'button-toolbar';
|
||||
}
|
||||
|
||||
export interface ButtonToolbarProps
|
||||
extends FormControlProps,
|
||||
ButtonToolbarControlSchema {}
|
||||
|
||||
export class ButtonToolbarControl extends React.Component<ButtonToolbarProps> {
|
||||
static defaultProps = {};
|
||||
|
||||
|
||||
@ -1,15 +1,28 @@
|
||||
import React from 'react';
|
||||
import cx from 'classnames';
|
||||
import {OptionsControl, OptionsControlProps, Option} from './Options';
|
||||
import {
|
||||
OptionsControl,
|
||||
OptionsControlProps,
|
||||
Option,
|
||||
FormOptionsControl
|
||||
} from './Options';
|
||||
import Select from '../../components/Select';
|
||||
import {Api} from '../../types';
|
||||
import {isEffectiveApi} from '../../utils/api';
|
||||
import {SchemaApi} from '../../Schema';
|
||||
|
||||
export interface ChainedSelectProps extends OptionsControlProps {
|
||||
autoComplete?: Api;
|
||||
searchable?: boolean;
|
||||
/**
|
||||
* 级联选择框
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/chained-select
|
||||
*/
|
||||
export interface ChainedSelectControlSchema extends FormOptionsControl {
|
||||
type: 'chained-select';
|
||||
}
|
||||
|
||||
export interface ChainedSelectProps
|
||||
extends OptionsControlProps,
|
||||
Omit<ChainedSelectControlSchema, 'options' | 'source'> {}
|
||||
|
||||
export interface SelectState {
|
||||
stack: Array<{
|
||||
options: Array<Option>;
|
||||
|
||||
@ -1,14 +1,38 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import cx from 'classnames';
|
||||
import Checkbox from '../../components/Checkbox';
|
||||
|
||||
export interface CheckboxProps extends FormControlProps {
|
||||
option?: string;
|
||||
/**
|
||||
* Checkbox 勾选框。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/checkbox
|
||||
*/
|
||||
export interface CheckboxControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为多行文本输入框
|
||||
*/
|
||||
type: 'checkbox';
|
||||
|
||||
/**
|
||||
* 勾选值
|
||||
*/
|
||||
trueValue?: any;
|
||||
|
||||
/**
|
||||
* 未勾选值
|
||||
*/
|
||||
falseValue?: any;
|
||||
|
||||
/**
|
||||
* 选项说明
|
||||
*/
|
||||
option?: string;
|
||||
}
|
||||
|
||||
export interface CheckboxProps
|
||||
extends FormControlProps,
|
||||
CheckboxControlSchema {}
|
||||
|
||||
export default class CheckboxControl extends React.Component<
|
||||
CheckboxProps,
|
||||
any
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
import React from 'react';
|
||||
import {OptionsControl, OptionsControlProps, Option} from './Options';
|
||||
import {
|
||||
OptionsControl,
|
||||
OptionsControlProps,
|
||||
Option,
|
||||
FormOptionsControl
|
||||
} from './Options';
|
||||
import cx from 'classnames';
|
||||
import Checkbox from '../../components/Checkbox';
|
||||
import chunk from 'lodash/chunk';
|
||||
@ -7,7 +12,32 @@ import {Icon} from '../../components/icons';
|
||||
import {Api} from '../../types';
|
||||
import {autobind} from '../../utils/helper';
|
||||
|
||||
export interface CheckboxesProps extends OptionsControlProps {
|
||||
/**
|
||||
* 复选框
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/checkboxes
|
||||
*/
|
||||
export interface CheckboxesControlSchema extends FormOptionsControl {
|
||||
type: 'checkboxes';
|
||||
|
||||
/**
|
||||
* 是否开启全选功能
|
||||
*/
|
||||
checkAll?: boolean;
|
||||
|
||||
/**
|
||||
* 是否默认全选
|
||||
*/
|
||||
defaultCheckAll?: boolean;
|
||||
|
||||
/**
|
||||
* 每行显示多少个
|
||||
*/
|
||||
columnsCount?: number;
|
||||
}
|
||||
|
||||
export interface CheckboxesProps
|
||||
extends OptionsControlProps,
|
||||
Omit<CheckboxesControlSchema, 'options'> {
|
||||
placeholder?: any;
|
||||
itemClassName?: string;
|
||||
columnsCount?: number;
|
||||
|
||||
@ -1,22 +1,62 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import db, {province, city, district} from './CityDB';
|
||||
import {ClassNamesFn, themeable} from '../../theme';
|
||||
import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
|
||||
import {Select} from '../../components';
|
||||
import {autobind} from '../../utils/helper';
|
||||
import {Option} from './Options';
|
||||
import {localeable, LocaleProps} from '../../locale';
|
||||
|
||||
export interface CityPickerProps extends LocaleProps {
|
||||
/**
|
||||
* City 城市选择框。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/city
|
||||
*/
|
||||
export interface CityControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为城市选择框。
|
||||
*/
|
||||
type: 'city';
|
||||
|
||||
/**
|
||||
* 开启后只会存城市的 code 信息
|
||||
*/
|
||||
extractValue?: boolean;
|
||||
|
||||
/**
|
||||
* 是否将各个信息拼接成字符串。
|
||||
*/
|
||||
joinValues?: boolean;
|
||||
|
||||
/**
|
||||
* 拼接的符号是啥？
|
||||
*/
|
||||
delimiter?: string;
|
||||
|
||||
/**
|
||||
* 允许选择城市？
|
||||
*/
|
||||
allowCity?: boolean;
|
||||
|
||||
/**
|
||||
* 允许选择地区？
|
||||
*/
|
||||
allowDistrict?: boolean;
|
||||
|
||||
/**
|
||||
* 允许选择街道？
|
||||
*/
|
||||
allowStreet?: boolean;
|
||||
}
|
||||
|
||||
export interface CityPickerProps
|
||||
extends Omit<CityControlSchema, 'type'>,
|
||||
LocaleProps,
|
||||
ThemeProps {
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
|
||||
extractValue: boolean;
|
||||
joinValues?: boolean;
|
||||
delimiter: string;
|
||||
classnames: ClassNamesFn;
|
||||
classPrefix: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
allowCity: boolean;
|
||||
allowDistrict: boolean;
|
||||
allowStreet: boolean;
|
||||
|
||||
@ -1,17 +1,48 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import cx from 'classnames';
|
||||
import ColorPicker from '../../components/ColorPicker';
|
||||
|
||||
export interface ColorProps extends FormControlProps {
|
||||
placeholder?: string;
|
||||
format?: string;
|
||||
/**
|
||||
* Color 颜色选择框
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/color
|
||||
*/
|
||||
export interface ColorControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为颜色选择框
|
||||
*/
|
||||
type: 'color';
|
||||
|
||||
/**
|
||||
* 是否显示清除按钮
|
||||
*/
|
||||
clearable?: boolean;
|
||||
|
||||
/**
|
||||
* 颜色格式
|
||||
*/
|
||||
format?: 'hex' | 'rgb' | 'rgba' | 'hls';
|
||||
|
||||
/**
|
||||
* 选中颜色后是否关闭弹出层。
|
||||
*/
|
||||
closeOnSelect?: boolean;
|
||||
presetColors?: string[];
|
||||
resetValue?: string;
|
||||
|
||||
/**
|
||||
* 预设颜色，用户可以直接从预设中选。
|
||||
*/
|
||||
presetColors?: Array<any>;
|
||||
|
||||
/**
|
||||
* 是否允许用户输入颜色。
|
||||
*/
|
||||
allowCustomColor?: boolean;
|
||||
}
|
||||
|
||||
export interface ColorProps
|
||||
extends FormControlProps,
|
||||
Omit<ColorControlSchema, 'type'> {}
|
||||
|
||||
export interface ColorControlState {
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import React from 'react';
|
||||
import {findDOMNode} from 'react-dom';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {
|
||||
FormItem,
|
||||
FormControlProps,
|
||||
FormBaseControl,
|
||||
FormControlSchema
|
||||
} from './Item';
|
||||
import {Schema, Action, Api} from '../../types';
|
||||
import {ComboStore, IComboStore} from '../../store/combo';
|
||||
import {default as CTabs, Tab} from '../../components/Tabs';
|
||||
@ -24,14 +29,214 @@ import {Alert2} from '../../components';
|
||||
import memoize from 'lodash/memoize';
|
||||
import {Icon} from '../../components/icons';
|
||||
import {isAlive} from 'mobx-state-tree';
|
||||
export interface Condition {
|
||||
import {SchemaApi, SchemaClassName, SchemaIcon, SchemaTpl} from '../../Schema';
|
||||
|
||||
export interface ComboCondition {
|
||||
test: string;
|
||||
controls: Array<Schema>;
|
||||
controls: Array<FormControlSchema>;
|
||||
label: string;
|
||||
scaffold?: any;
|
||||
mode?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Combo 组合输入框类型
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/combo
|
||||
*/
|
||||
export interface ComboControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为组合输入框类型
|
||||
*/
|
||||
type: 'combo';
|
||||
|
||||
/**
|
||||
* 单组表单项初始值。默认为 `{}`
|
||||
*
|
||||
* @default {}
|
||||
*/
|
||||
scaffold?: any;
|
||||
|
||||
/**
|
||||
* 是否含有边框
|
||||
*/
|
||||
noBorder?: boolean;
|
||||
|
||||
/**
|
||||
* 确认删除时的提示
|
||||
*/
|
||||
deleteConfirmText?: string;
|
||||
|
||||
/**
|
||||
* 删除时调用的api
|
||||
*/
|
||||
deleteApi?: SchemaApi;
|
||||
|
||||
/**
|
||||
* 是否可切换条件，配合`conditions`使用
|
||||
*/
|
||||
typeSwitchable?: boolean;
|
||||
|
||||
/**
|
||||
* 符合某类条件后才渲染的schema
|
||||
*/
|
||||
conditions?: Array<ComboCondition>;
|
||||
|
||||
/**
|
||||
* 内部单组表单项的类名
|
||||
*/
|
||||
formClassName?: SchemaClassName;
|
||||
|
||||
/**
|
||||
* 新增按钮CSS类名
|
||||
*/
|
||||
addButtonClassName?: SchemaClassName;
|
||||
|
||||
/**
|
||||
* 新增按钮文字
|
||||
* @default 新增
|
||||
*/
|
||||
addButtonText?: string;
|
||||
|
||||
/**
|
||||
* 是否可新增
|
||||
*/
|
||||
addable?: boolean;
|
||||
|
||||
/**
|
||||
* 数组输入框的子项
|
||||
*/
|
||||
controls?: Array<
|
||||
FormControlSchema & {
|
||||
/**
|
||||
* 是否唯一
|
||||
*/
|
||||
unique?: boolean;
|
||||
}
|
||||
>;
|
||||
|
||||
/**
|
||||
* 是否可拖拽排序
|
||||
*/
|
||||
draggable?: boolean;
|
||||
|
||||
/**
|
||||
* 可拖拽排序的提示信息。
|
||||
*
|
||||
* @default 可拖拽排序
|
||||
*/
|
||||
draggableTip?: string;
|
||||
|
||||
/**
|
||||
* 是否将结果扁平化(去掉name),只有当controls的length为1且multiple为true的时候才有效
|
||||
*/
|
||||
flat?: boolean;
|
||||
|
||||
/**
|
||||
* 当扁平化开启并且joinValues为true时，用什么分隔符
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
delimiter?: string;
|
||||
|
||||
/**
|
||||
* 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用array的方式
|
||||
* @deprecated
|
||||
*/
|
||||
joinValues?: boolean;
|
||||
|
||||
/**
|
||||
* 限制最大个数
|
||||
*/
|
||||
maxLength?: number;
|
||||
|
||||
/**
|
||||
* 限制最小个数
|
||||
*/
|
||||
minLength?: number;
|
||||
|
||||
/**
|
||||
* 是否多行模式，默认一行展示完
|
||||
*/
|
||||
multiLine?: boolean;
|
||||
|
||||
/**
|
||||
* 是否可多选
|
||||
*/
|
||||
multiple?: boolean;
|
||||
|
||||
/**
|
||||
* 是否可删除
|
||||
*/
|
||||
removeAble?: boolean;
|
||||
|
||||
/**
|
||||
* 子表单的模式。
|
||||
*/
|
||||
subFormMode?: 'normal' | 'horizontal' | 'inline';
|
||||
|
||||
/**
|
||||
* 没有成员时显示。
|
||||
* @default <空>
|
||||
*/
|
||||
placeholder?: string;
|
||||
|
||||
/**
|
||||
* 是否可以访问父级数据，正常 combo 已经关联到数组成员，是不能访问父级数据的。
|
||||
*/
|
||||
canAccessSuperData?: boolean;
|
||||
|
||||
/**
|
||||
* 采用 Tabs 展示方式？
|
||||
*/
|
||||
tabsMode?: boolean;
|
||||
|
||||
/**
|
||||
* Tabs 的展示模式。
|
||||
*/
|
||||
tabsStyle?: '' | 'line' | 'card' | 'radio';
|
||||
|
||||
/**
|
||||
* 选项卡标题的生成模板。
|
||||
*/
|
||||
tabsLabelTpl?: SchemaTpl;
|
||||
|
||||
/**
|
||||
* 数据比较多，比较卡时，可以试试开启。
|
||||
*/
|
||||
lazyLoad?: boolean;
|
||||
|
||||
/**
|
||||
* 严格模式，为了性能默认不开的。
|
||||
*/
|
||||
strictMode?: boolean;
|
||||
|
||||
/**
|
||||
* 允许为空，如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。
|
||||
*/
|
||||
nullable?: boolean;
|
||||
|
||||
/**
|
||||
* 提示信息
|
||||
*/
|
||||
messages?: {
|
||||
/**
|
||||
* 验证错误提示
|
||||
*/
|
||||
validateFailed?: string;
|
||||
|
||||
/**
|
||||
* 最小值验证错误提示
|
||||
*/
|
||||
minLengthValidateFailed?: string;
|
||||
|
||||
/**
|
||||
* 最大值验证错误提示
|
||||
*/
|
||||
|
||||
maxLengthValidateFailed?: string;
|
||||
};
|
||||
}
|
||||
|
||||
function pickVars(vars: any, fields: Array<string>) {
|
||||
return fields.reduce((data: any, key: string) => {
|
||||
data[key] = resolveVariable(key, vars);
|
||||
@ -39,45 +244,9 @@ function pickVars(vars: any, fields: Array<string>) {
|
||||
}, {});
|
||||
}
|
||||
|
||||
export interface ComboProps extends FormControlProps {
|
||||
placeholder?: string;
|
||||
flat?: boolean; // 是否把值打平，即原来是对象现在只有对象中的值。
|
||||
draggable?: boolean; // 是否可拖拽
|
||||
controls?: Array<Schema>;
|
||||
conditions?: Array<Condition>;
|
||||
multiple?: boolean;
|
||||
multiLine?: boolean;
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
scaffold?: any;
|
||||
addButtonClassName?: string;
|
||||
formClassName?: string;
|
||||
addButtonText?: string;
|
||||
addable?: boolean;
|
||||
typeSwitchable?: boolean;
|
||||
removable?: boolean;
|
||||
deleteApi?: Api;
|
||||
deleteConfirmText?: string;
|
||||
canAccessSuperData?: boolean;
|
||||
subFormMode?: 'normal' | 'inline' | 'horizontal';
|
||||
noBorder?: boolean;
|
||||
joinValues?: boolean;
|
||||
delimiter?: string;
|
||||
dragIcon: string;
|
||||
deleteIcon: string;
|
||||
export interface ComboProps extends FormControlProps, ComboControlSchema {
|
||||
store: IComboStore;
|
||||
tabsMode: boolean;
|
||||
tabsStyle: '' | 'line' | 'card' | 'radio';
|
||||
tabsLabelTpl?: string;
|
||||
lazyLoad?: boolean;
|
||||
changeImmediately?: boolean;
|
||||
strictMode?: boolean;
|
||||
nullable?: boolean;
|
||||
messages?: {
|
||||
validateFailed?: string;
|
||||
minLengthValidateFailed?: string;
|
||||
maxLengthValidateFailed?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default class ComboControl extends React.Component<ComboProps> {
|
||||
@ -249,7 +418,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
return value;
|
||||
}
|
||||
|
||||
addItemWith(condition: Condition) {
|
||||
addItemWith(condition: ComboCondition) {
|
||||
const {
|
||||
flat,
|
||||
joinValues,
|
||||
@ -652,19 +821,19 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
);
|
||||
}
|
||||
|
||||
pickCondition(value: any): Condition | null {
|
||||
const conditions: Array<Condition> = this.props.conditions!;
|
||||
pickCondition(value: any): ComboCondition | null {
|
||||
const conditions: Array<ComboCondition> = this.props.conditions!;
|
||||
return find(
|
||||
conditions,
|
||||
item => item.test && evalExpression(item.test, value)
|
||||
) as Condition | null;
|
||||
) as ComboCondition | null;
|
||||
}
|
||||
|
||||
handleComboTypeChange(index: number, selection: any) {
|
||||
const {multiple, onChange, value, flat, submitOnChange} = this.props;
|
||||
|
||||
const conditions: Array<Condition> = this.props.conditions as Array<
|
||||
Condition
|
||||
const conditions: Array<ComboCondition> = this.props.conditions as Array<
|
||||
ComboCondition
|
||||
>;
|
||||
const condition = find(conditions, item => item.label === selection.label);
|
||||
|
||||
@ -811,7 +980,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
>
|
||||
{value.map((value, index) => {
|
||||
const data = this.formatValue(value, index);
|
||||
let condition: Condition | null | undefined = null;
|
||||
let condition: ComboCondition | null | undefined = null;
|
||||
let toolbar = undefined;
|
||||
if (
|
||||
finnalRemovable && // 表达式判断单条是否可删除
|
||||
@ -871,10 +1040,12 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
<label>{__('类型')}</label>
|
||||
<Select
|
||||
onChange={this.handleComboTypeChange.bind(this, index)}
|
||||
options={(conditions as Array<Condition>).map(item => ({
|
||||
label: item.label,
|
||||
value: item.label
|
||||
}))}
|
||||
options={(conditions as Array<ComboCondition>).map(
|
||||
item => ({
|
||||
label: item.label,
|
||||
value: item.label
|
||||
})
|
||||
)}
|
||||
value={condition.label}
|
||||
clearable={false}
|
||||
/>
|
||||
@ -1025,7 +1196,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
}
|
||||
|
||||
const data = this.formatValue(value, index);
|
||||
let condition: Condition | null = null;
|
||||
let condition: ComboCondition | null = null;
|
||||
|
||||
if (Array.isArray(conditions) && conditions.length) {
|
||||
condition = this.pickCondition(data);
|
||||
@ -1067,10 +1238,12 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
<label>{__('类型')}</label>
|
||||
<Select
|
||||
onChange={this.handleComboTypeChange.bind(this, index)}
|
||||
options={(conditions as Array<Condition>).map(item => ({
|
||||
label: item.label,
|
||||
value: item.label
|
||||
}))}
|
||||
options={(conditions as Array<ComboCondition>).map(
|
||||
item => ({
|
||||
label: item.label,
|
||||
value: item.label
|
||||
})
|
||||
)}
|
||||
value={condition.label}
|
||||
clearable={false}
|
||||
/>
|
||||
@ -1186,7 +1359,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
|
||||
let controls = this.props.controls;
|
||||
const data = isObject(value) ? this.formatValue(value) : this.defaultValue;
|
||||
let condition: Condition | null = null;
|
||||
let condition: ComboCondition | null = null;
|
||||
|
||||
if (Array.isArray(conditions) && conditions.length) {
|
||||
condition = this.pickCondition(data);
|
||||
@ -1208,7 +1381,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
<label>{__('类型')}</label>
|
||||
<Select
|
||||
onChange={this.handleComboTypeChange.bind(this, 0)}
|
||||
options={(conditions as Array<Condition>).map(item => ({
|
||||
options={(conditions as Array<ComboCondition>).map(item => ({
|
||||
label: item.label,
|
||||
value: item.label
|
||||
}))}
|
||||
|
||||
@ -1,16 +1,40 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import ColorPicker from '../../components/ColorPicker';
|
||||
import {Funcs, Fields} from '../../components/condition-builder/types';
|
||||
import {Config} from '../../components/condition-builder/config';
|
||||
import ConditionBuilder from '../../components/condition-builder/index';
|
||||
|
||||
export interface ConditionBuilderProps extends FormControlProps {
|
||||
/**
|
||||
* 条件组合控件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/condition-builder
|
||||
*/
|
||||
export interface ConditionBuilderControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为
|
||||
*/
|
||||
type: 'condition-builder';
|
||||
|
||||
/**
|
||||
* 函数集合
|
||||
*/
|
||||
funcs?: Funcs;
|
||||
|
||||
/**
|
||||
* 字段集合
|
||||
*/
|
||||
fields: Fields;
|
||||
|
||||
/**
|
||||
* 其他配置
|
||||
*/
|
||||
config?: Config;
|
||||
}
|
||||
|
||||
export interface ConditionBuilderProps
|
||||
extends FormControlProps,
|
||||
ConditionBuilderControlSchema {}
|
||||
|
||||
export default class ConditionBuilderControl extends React.PureComponent<
|
||||
ConditionBuilderProps
|
||||
> {
|
||||
|
||||
@ -1,10 +1,39 @@
|
||||
import React from 'react';
|
||||
import {Renderer} from '../../factory';
|
||||
import cx from 'classnames';
|
||||
import Container from '../Container';
|
||||
import FormItem, {FormControlProps} from './Item';
|
||||
import Container, {ContainerSchema} from '../Container';
|
||||
import FormItem, {
|
||||
FormBaseControl,
|
||||
FormControlProps,
|
||||
FormControlSchema
|
||||
} from './Item';
|
||||
import {IIRendererStore} from '../../store/iRenderer';
|
||||
|
||||
/**
|
||||
* 容器空间
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/contaier
|
||||
*/
|
||||
export interface ContainerControlSchema
|
||||
extends FormBaseControl,
|
||||
ContainerSchema {
|
||||
type: 'container';
|
||||
|
||||
/**
|
||||
* 表单项集合
|
||||
*/
|
||||
controls?: Array<FormControlSchema>;
|
||||
|
||||
/**
|
||||
* @deprecated 请用类型 tabs
|
||||
*/
|
||||
tabs?: any;
|
||||
|
||||
/**
|
||||
* @deprecated 请用类型 fieldSet
|
||||
*/
|
||||
fieldSet?: any;
|
||||
}
|
||||
|
||||
export interface ContainerProps extends FormControlProps {
|
||||
store: IIRendererStore;
|
||||
}
|
||||
|
||||
@ -1,13 +1,157 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import cx from 'classnames';
|
||||
import {filterDate} from '../../utils/tpl-builtin';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
import DatePicker from '../../components/DatePicker';
|
||||
|
||||
export interface DateBaseControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为日期选择控件
|
||||
*/
|
||||
type: 'date' | 'datetime' | 'time';
|
||||
|
||||
/**
|
||||
* 是否显示清除按钮
|
||||
*/
|
||||
clearable?: boolean;
|
||||
|
||||
/**
|
||||
* 日期存储格式
|
||||
*/
|
||||
format?: string;
|
||||
|
||||
/**
|
||||
* 日期展示格式
|
||||
*/
|
||||
inputFormat?: string;
|
||||
|
||||
/**
|
||||
* 设定是否存储 utc 时间。
|
||||
*/
|
||||
utc?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Date日期选择控件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/date
|
||||
*/
|
||||
export interface DateControlSchema extends DateBaseControlSchema {
|
||||
/**
|
||||
* 指定为日期选择控件
|
||||
*/
|
||||
type: 'date';
|
||||
|
||||
/**
|
||||
* 日期存储格式
|
||||
* @default X
|
||||
*/
|
||||
format?: string;
|
||||
|
||||
/**
|
||||
* 日期展示格式
|
||||
* @default YYYY-MM-DD
|
||||
*/
|
||||
inputFormat?: string;
|
||||
|
||||
/**
|
||||
* 点选日期后是否关闭弹窗
|
||||
*/
|
||||
closeOnSelect?: boolean;
|
||||
|
||||
/**
|
||||
* 限制最小日期
|
||||
*/
|
||||
minDate?: string;
|
||||
|
||||
/**
|
||||
* 限制最大日期
|
||||
*/
|
||||
maxDate?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Datetime日期时间选择控件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/datetime
|
||||
*/
|
||||
export interface DateTimeControlSchema extends DateBaseControlSchema {
|
||||
/**
|
||||
* 指定为日期时间选择控件
|
||||
*/
|
||||
type: 'datetime';
|
||||
|
||||
/**
|
||||
* 日期存储格式
|
||||
* @default X
|
||||
*/
|
||||
format?: string;
|
||||
|
||||
/**
|
||||
* 日期展示格式
|
||||
* @default YYYY-MM-DD HH:mm
|
||||
*/
|
||||
inputFormat?: string;
|
||||
|
||||
/**
|
||||
* 时间的格式。
|
||||
*
|
||||
* @default HH:mm
|
||||
*/
|
||||
timeFormat?: string;
|
||||
|
||||
/**
|
||||
* 限制最小日期
|
||||
*/
|
||||
minDate?: string;
|
||||
|
||||
/**
|
||||
* 限制最大日期
|
||||
*/
|
||||
maxDate?: string;
|
||||
|
||||
/**
|
||||
* 不记得了
|
||||
*/
|
||||
timeConstraints?: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Time 时间选择控件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/time
|
||||
*/
|
||||
export interface TimeControlSchema extends DateBaseControlSchema {
|
||||
/**
|
||||
* 指定为日期时间选择控件
|
||||
*/
|
||||
type: 'time';
|
||||
|
||||
/**
|
||||
* 日期存储格式
|
||||
* @default X
|
||||
*/
|
||||
format?: string;
|
||||
|
||||
/**
|
||||
* 日期展示格式
|
||||
* @default YYYY-MM-DD HH:mm
|
||||
*/
|
||||
inputFormat?: string;
|
||||
|
||||
/**
|
||||
* 时间的格式。
|
||||
*
|
||||
* @default HH:mm
|
||||
*/
|
||||
timeFormat?: string;
|
||||
|
||||
/**
|
||||
* 不记得了
|
||||
*/
|
||||
timeConstraints?: any;
|
||||
}
|
||||
|
||||
export interface DateProps extends FormControlProps {
|
||||
placeholder?: string;
|
||||
inputFormat?: string;
|
||||
timeFormat?: string;
|
||||
format?: string;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import cx from 'classnames';
|
||||
import {filterDate} from '../../utils/tpl-builtin';
|
||||
import moment from 'moment';
|
||||
@ -8,14 +8,59 @@ import DateRangePicker, {
|
||||
DateRangePicker as BaseDateRangePicker
|
||||
} from '../../components/DateRangePicker';
|
||||
|
||||
export interface DateRangeProps extends FormControlProps {
|
||||
placeholder?: string;
|
||||
disabled: boolean;
|
||||
/**
|
||||
* DateRange 日期范围控件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/date-range
|
||||
*/
|
||||
export interface DateRangeControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为日期范围控件
|
||||
*/
|
||||
type: 'date-range';
|
||||
|
||||
/**
|
||||
* 分割符, 因为有两个值，开始时间和结束时间，所以要有连接符。默认为英文逗号。
|
||||
*
|
||||
*/
|
||||
delimiter?: string;
|
||||
|
||||
/**
|
||||
* 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.
|
||||
*/
|
||||
format?: string;
|
||||
|
||||
/**
|
||||
* 默认 `YYYY-MM-DD` 用来配置显示的时间格式。
|
||||
*/
|
||||
inputFormat?: string;
|
||||
|
||||
/**
|
||||
* 开启后将选中的选项 value 的值用连接符拼接起来，作为当前表单项的值。如： `value1,value2` 否则为 `[value1, value2]`
|
||||
*/
|
||||
joinValues?: boolean;
|
||||
|
||||
/**
|
||||
* 最大日期限制，支持变量 $xxx 来取值，或者用相对值如：* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
|
||||
*/
|
||||
maxDate?: string;
|
||||
|
||||
/**
|
||||
* 最小日期限制，支持变量 $xxx 来取值，或者用相对值如：* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
|
||||
*/
|
||||
minDate?: string;
|
||||
|
||||
/**
|
||||
* 这里面 value 需要特殊说明一下，因为支持相对值。* `-2mins` 2分钟前\n * `+2days` 2天后\n* `-10week` 十周前\n可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
|
||||
*/
|
||||
value?: any;
|
||||
}
|
||||
|
||||
export interface DateRangeProps
|
||||
extends FormControlProps,
|
||||
Omit<DateRangeControlSchema, 'type'> {
|
||||
delimiter: string;
|
||||
format: string;
|
||||
joinValues: boolean;
|
||||
delimiter: string;
|
||||
minDate?: any;
|
||||
maxDate?: any;
|
||||
}
|
||||
|
||||
interface DateControlState {
|
||||
@ -132,6 +177,8 @@ export default class DateRangeControl extends React.Component<
|
||||
classPrefix: ns,
|
||||
defaultValue,
|
||||
defaultData,
|
||||
minDate,
|
||||
maxDate,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
|
||||
@ -1,11 +1,38 @@
|
||||
import React from 'react';
|
||||
import {Renderer} from '../../factory';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import {filter} from '../../utils/tpl';
|
||||
import cx from 'classnames';
|
||||
import LazyComponent from '../../components/LazyComponent';
|
||||
import debouce from 'lodash/debounce';
|
||||
import {isPureVariable} from '../../utils/tpl-builtin';
|
||||
import {SchemaTokenizeableString} from '../../Schema';
|
||||
|
||||
/**
|
||||
* Diff 编辑器
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/diff
|
||||
*/
|
||||
export interface DiffControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为 Diff 编辑器
|
||||
*/
|
||||
type: 'diff';
|
||||
|
||||
/**
|
||||
* 左侧面板的值， 支持取变量。
|
||||
*/
|
||||
diffValue?: SchemaTokenizeableString;
|
||||
|
||||
/**
|
||||
* 语言，参考 monaco-editor
|
||||
*/
|
||||
language?: string;
|
||||
|
||||
/**
|
||||
* 编辑器配置
|
||||
*/
|
||||
options?: any;
|
||||
}
|
||||
|
||||
function loadComponent(): Promise<React.ReactType> {
|
||||
return new Promise(resolve =>
|
||||
@ -15,11 +42,9 @@ function loadComponent(): Promise<React.ReactType> {
|
||||
);
|
||||
}
|
||||
|
||||
export interface DiffEditorProps extends FormControlProps {
|
||||
options?: object;
|
||||
language?: string;
|
||||
diffValue?: string;
|
||||
}
|
||||
export interface DiffEditorProps
|
||||
extends FormControlProps,
|
||||
Omit<DiffControlSchema, 'type'> {}
|
||||
|
||||
function normalizeValue(value: any, language?: string) {
|
||||
if (value && typeof value !== 'string') {
|
||||
|
||||
@ -1,9 +1,65 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import LazyComponent from '../../components/LazyComponent';
|
||||
import debouce from 'lodash/debounce';
|
||||
import Editor from '../../components/Editor';
|
||||
|
||||
/**
|
||||
* Editor 代码编辑器
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/editor
|
||||
*/
|
||||
export interface EditorControlSchema extends Omit<FormBaseControl, 'size'> {
|
||||
type: 'editor';
|
||||
|
||||
/**
|
||||
* 语言类型
|
||||
*/
|
||||
language?:
|
||||
| 'bat'
|
||||
| 'c'
|
||||
| 'coffeescript'
|
||||
| 'cpp'
|
||||
| 'csharp'
|
||||
| 'css'
|
||||
| 'dockerfile'
|
||||
| 'fsharp'
|
||||
| 'go'
|
||||
| 'handlebars'
|
||||
| 'html'
|
||||
| 'ini'
|
||||
| 'java'
|
||||
| 'javascript'
|
||||
| 'json'
|
||||
| 'less'
|
||||
| 'lua'
|
||||
| 'markdown'
|
||||
| 'msdax'
|
||||
| 'objective-c'
|
||||
| 'php'
|
||||
| 'plaintext'
|
||||
| 'postiats'
|
||||
| 'powershell'
|
||||
| 'pug'
|
||||
| 'python'
|
||||
| 'r'
|
||||
| 'razor'
|
||||
| 'ruby'
|
||||
| 'sb'
|
||||
| 'scss'
|
||||
| 'sol'
|
||||
| 'sql'
|
||||
| 'swift'
|
||||
| 'typescript'
|
||||
| 'vb'
|
||||
| 'xml'
|
||||
| 'yaml';
|
||||
|
||||
/**
|
||||
* 编辑器大小
|
||||
*/
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
||||
}
|
||||
|
||||
export interface EditorProps extends FormControlProps {
|
||||
options?: object;
|
||||
}
|
||||
@ -178,26 +234,26 @@ export const availableLanguages = [
|
||||
'yaml'
|
||||
];
|
||||
|
||||
export const EditorControls: Array<
|
||||
typeof EditorControl
|
||||
> = availableLanguages.map((lang: string) => {
|
||||
@FormItem({
|
||||
type: `${lang}-editor`,
|
||||
sizeMutable: false
|
||||
})
|
||||
class EditorControlRenderer extends EditorControl {
|
||||
static lang = lang;
|
||||
static displayName = `${lang[0].toUpperCase()}${lang.substring(
|
||||
1
|
||||
)}EditorControlRenderer`;
|
||||
static defaultProps = {
|
||||
...EditorControl.defaultProps,
|
||||
language: lang
|
||||
};
|
||||
}
|
||||
export const EditorControls: Array<typeof EditorControl> = availableLanguages.map(
|
||||
(lang: string) => {
|
||||
@FormItem({
|
||||
type: `${lang}-editor`,
|
||||
sizeMutable: false
|
||||
})
|
||||
class EditorControlRenderer extends EditorControl {
|
||||
static lang = lang;
|
||||
static displayName = `${lang[0].toUpperCase()}${lang.substring(
|
||||
1
|
||||
)}EditorControlRenderer`;
|
||||
static defaultProps = {
|
||||
...EditorControl.defaultProps,
|
||||
language: lang
|
||||
};
|
||||
}
|
||||
|
||||
return EditorControlRenderer;
|
||||
});
|
||||
return EditorControlRenderer;
|
||||
}
|
||||
);
|
||||
|
||||
@FormItem({
|
||||
type: 'js-editor',
|
||||
|
||||
@ -1,22 +1,37 @@
|
||||
import React from 'react';
|
||||
import {FormSchemaHorizontal} from '.';
|
||||
import {Renderer, RendererProps} from '../../factory';
|
||||
import Collapse from '../Collapse';
|
||||
import cx from 'classnames';
|
||||
import {SchemaCollection, SchemaTpl} from '../../Schema';
|
||||
import Collapse, {CollapseSchema} from '../Collapse';
|
||||
import {FormBaseControl, FormControlSchema} from './Item';
|
||||
|
||||
export interface FieldSetProps extends RendererProps {
|
||||
title?: string;
|
||||
collapsed?: boolean;
|
||||
mode?: 'normal' | 'inline' | 'horizontal' | 'row';
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'base';
|
||||
formClassName?: string;
|
||||
collapsable?: boolean;
|
||||
horizontal: {
|
||||
left: string;
|
||||
right: string;
|
||||
offset: string;
|
||||
};
|
||||
/**
|
||||
* FieldSet 表单项集合
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/fieldset
|
||||
*/
|
||||
export interface FieldSetControlSchema
|
||||
extends Omit<FormBaseControl, 'size'>,
|
||||
Omit<CollapseSchema, 'type'> {
|
||||
/**
|
||||
* 指定为表单项集合
|
||||
*/
|
||||
type: 'fieldset';
|
||||
|
||||
/**
|
||||
* 表单项集合
|
||||
*/
|
||||
controls?: Array<FormControlSchema>;
|
||||
|
||||
/**
|
||||
* 标题
|
||||
*/
|
||||
title?: SchemaTpl;
|
||||
}
|
||||
|
||||
export interface FieldSetProps
|
||||
extends RendererProps,
|
||||
Omit<FieldSetControlSchema, 'type'> {}
|
||||
|
||||
export default class FieldSetControl extends React.Component<
|
||||
FieldSetProps,
|
||||
any
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import cx from 'classnames';
|
||||
import qs from 'qs';
|
||||
import find from 'lodash/find';
|
||||
@ -16,39 +16,188 @@ import Button from '../../components/Button';
|
||||
import {Icon} from '../../components/icons';
|
||||
import DropZone from 'react-dropzone';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
import {
|
||||
SchemaApi,
|
||||
SchemaClassName,
|
||||
SchemaTokenizeableString
|
||||
} from '../../Schema';
|
||||
|
||||
export interface FileProps extends FormControlProps {
|
||||
maxSize: number;
|
||||
maxLength: number;
|
||||
placeholder?: string;
|
||||
/**
|
||||
* File 文件上传控件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/file
|
||||
*/
|
||||
export interface FileControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为文件上传
|
||||
*/
|
||||
type: 'file';
|
||||
|
||||
/**
|
||||
* 上传文件按钮说明
|
||||
* @default 请选择文件
|
||||
*/
|
||||
btnLabel?: string;
|
||||
reciever?: string;
|
||||
fileField?: string;
|
||||
joinValues?: boolean;
|
||||
extractValue?: boolean;
|
||||
delimiter?: string;
|
||||
downloadUrl?: string;
|
||||
useChunk?: 'auto' | boolean;
|
||||
chunkSize?: number;
|
||||
startChunkApi?: string;
|
||||
chunkApi?: string;
|
||||
finishChunkApi?: string;
|
||||
|
||||
/**
|
||||
* 默认只支持纯文本，要支持其他类型，请配置此属性。建议直接填写文件后缀
|
||||
* 如：.txt,.csv
|
||||
*
|
||||
* 多个类型用逗号隔开。
|
||||
*
|
||||
* @default text/plain
|
||||
*/
|
||||
accept?: string;
|
||||
multiple?: boolean;
|
||||
|
||||
/**
|
||||
* 如果上传的文件比较小可以设置此选项来简单的把文件 base64 的值给 form 一起提交，目前不支持多选。
|
||||
*/
|
||||
asBase64?: boolean;
|
||||
|
||||
/**
|
||||
* 如果不希望 File 组件上传，可以配置 `asBlob` 或者 `asBase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。
|
||||
*/
|
||||
asBlob?: boolean;
|
||||
|
||||
/**
|
||||
* 是否自动开始上传
|
||||
*/
|
||||
autoUpload?: boolean;
|
||||
|
||||
/**
|
||||
* 默认 `/api/upload/chunk` 想自己存储时才需要关注。
|
||||
*/
|
||||
chunkApi?: SchemaApi;
|
||||
|
||||
/**
|
||||
* 分块大小，默认为 5M.
|
||||
*
|
||||
* @default 5242880
|
||||
*/
|
||||
chunkSize?: number;
|
||||
|
||||
/**
|
||||
* 分割符
|
||||
*/
|
||||
delimiter?: string;
|
||||
|
||||
/**
|
||||
* 默认显示文件路径的时候会支持直接下载，
|
||||
* 可以支持加前缀如：`http://xx.dom/filename=` ，
|
||||
* 如果不希望这样，可以把当前配置项设置为 `false`。
|
||||
*/
|
||||
downloadUrl?: string;
|
||||
|
||||
/**
|
||||
* 默认 `file`, 如果你不想自己存储，则可以忽略此属性。
|
||||
* @default file
|
||||
*/
|
||||
fileField?: string;
|
||||
|
||||
/**
|
||||
* 默认 `/api/upload/finishChunkApi` 想自己存储时才需要关注。
|
||||
*
|
||||
* @default /api/upload/finishChunkApi
|
||||
*/
|
||||
finishChunkApi?: SchemaApi;
|
||||
|
||||
/**
|
||||
* 是否隐藏上传按钮
|
||||
*/
|
||||
hideUploadButton?: boolean;
|
||||
|
||||
/**
|
||||
* 最多的个数
|
||||
*/
|
||||
maxLength?: number;
|
||||
|
||||
/**
|
||||
* 默认没有限制，当设置后，文件大小大于此值将不允许上传。
|
||||
*/
|
||||
maxSize?: number;
|
||||
|
||||
/**
|
||||
* 默认 `/api/upload/file` 如果想自己存储，请设置此选项。
|
||||
*
|
||||
* @default /api/upload/file
|
||||
*/
|
||||
reciever?: SchemaApi;
|
||||
|
||||
/**
|
||||
* 默认 `/api/upload/startChunk` 想自己存储时才需要关注。
|
||||
*
|
||||
* @default /api/upload/startChunk
|
||||
*/
|
||||
startChunkApi?: string;
|
||||
|
||||
/**
|
||||
* 默认为 'auto' amis 所在服务器，限制了文件上传大小不得超出10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。
|
||||
*/
|
||||
useChunk?: 'auto' | boolean;
|
||||
|
||||
/**
|
||||
* 按钮 CSS 类名
|
||||
*/
|
||||
btnClassName?: SchemaClassName;
|
||||
|
||||
/**
|
||||
* 上传按钮 CSS 类名
|
||||
*/
|
||||
btnUploadClassName?: SchemaClassName;
|
||||
|
||||
/**
|
||||
* 是否为多选
|
||||
*/
|
||||
multiple?: boolean;
|
||||
|
||||
/**
|
||||
* 1. 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，
|
||||
* 否则，整个选项对象都会作为该表单项的值提交。
|
||||
* 2. 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，
|
||||
* 否则直接将以数组的形式提交值。
|
||||
*/
|
||||
joinValues?: boolean;
|
||||
|
||||
/**
|
||||
* 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
*/
|
||||
extractValue?: boolean;
|
||||
|
||||
/**
|
||||
* 清除时设置的值
|
||||
*/
|
||||
resetValue?: any;
|
||||
|
||||
/**
|
||||
* 上传后把其他字段同步到表单内部。
|
||||
*/
|
||||
autoFill?: {
|
||||
[propName: string]: SchemaTokenizeableString;
|
||||
};
|
||||
|
||||
/**
|
||||
* 按钮状态文案配置。
|
||||
*/
|
||||
stateTextMap?: {
|
||||
init: string;
|
||||
pending: string;
|
||||
uploading: string;
|
||||
error: string;
|
||||
uploaded: string;
|
||||
[propName: string]: string;
|
||||
ready: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface FileProps
|
||||
extends FormControlProps,
|
||||
Omit<FileControlSchema, 'type'> {
|
||||
stateTextMap: {
|
||||
init: string;
|
||||
pending: string;
|
||||
uploading: string;
|
||||
error: string;
|
||||
uploaded: string;
|
||||
ready: string;
|
||||
};
|
||||
asBase64?: boolean;
|
||||
asBlob?: boolean;
|
||||
resetValue?: string;
|
||||
autoFill?: Object;
|
||||
}
|
||||
|
||||
export interface FileX extends File {
|
||||
|
||||
@ -1,15 +1,53 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import {evalJS, filter} from '../../utils/tpl';
|
||||
import {isObjectShallowModified} from '../../utils/helper';
|
||||
|
||||
export interface FormulaProps extends FormControlProps {
|
||||
/**
|
||||
* 公式功能控件。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/formula
|
||||
*/
|
||||
export interface FormulaControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为公式功能控件。
|
||||
*/
|
||||
type: 'formula';
|
||||
|
||||
/**
|
||||
* 当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 autoSet 为 false 时用来手动触发
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* 触发公式的作用条件，如 data.xxx == \"a\" 或者 ${xx}
|
||||
*/
|
||||
condition?: string;
|
||||
|
||||
/**
|
||||
* 是否自动应用
|
||||
*/
|
||||
autoSet?: boolean;
|
||||
|
||||
/**
|
||||
* 公式
|
||||
*/
|
||||
formula?: string;
|
||||
initSet?: boolean; // 是否初始就计算
|
||||
autoSet?: boolean; // 是否自动计算
|
||||
condition?: string; // 计算条件
|
||||
|
||||
/**
|
||||
* 是否初始应用
|
||||
*/
|
||||
initSet?: boolean;
|
||||
|
||||
/**
|
||||
* 字段名，公式结果将作用到此处指定的变量中去
|
||||
*/
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export interface FormulaProps
|
||||
extends FormControlProps,
|
||||
Omit<FormulaControlSchema, 'type'> {}
|
||||
|
||||
export default class FormulaControl extends React.Component<
|
||||
FormControlProps,
|
||||
any
|
||||
|
||||
@ -1,14 +1,57 @@
|
||||
import {Renderer, RendererProps} from '../../factory';
|
||||
import Grid, {ColumnNode, GridColumn, ColProps, ColumnArray} from '../Grid';
|
||||
import Grid, {
|
||||
ColumnNode,
|
||||
GridColumn,
|
||||
ColProps,
|
||||
ColumnArray,
|
||||
GridSchema,
|
||||
GridColumnObject
|
||||
} from '../Grid';
|
||||
import {Schema} from '../../types';
|
||||
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {
|
||||
FormItem,
|
||||
FormControlProps,
|
||||
FormBaseControl,
|
||||
FormControlSchema
|
||||
} from './Item';
|
||||
import pick from 'lodash/pick';
|
||||
import React from 'react';
|
||||
import cx from 'classnames';
|
||||
import {IIRendererStore} from '../../store/iRenderer';
|
||||
|
||||
export interface GridProps extends FormControlProps {
|
||||
/**
|
||||
* Grid 格子布局
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/grid
|
||||
*/
|
||||
export interface GridControlSchema
|
||||
extends FormBaseControl,
|
||||
Omit<GridSchema, 'columns'> {
|
||||
type: 'grid';
|
||||
|
||||
columns: Array<
|
||||
GridColumnObject & {
|
||||
/**
|
||||
* 表单项集合
|
||||
*/
|
||||
controls?: Array<FormControlSchema>;
|
||||
|
||||
/**
|
||||
* @deprecated 请用类型 tabs
|
||||
*/
|
||||
tabs?: any;
|
||||
|
||||
/**
|
||||
* @deprecated 请用类型 fieldSet
|
||||
*/
|
||||
fieldSet?: any;
|
||||
}
|
||||
>;
|
||||
}
|
||||
|
||||
export interface GridProps
|
||||
extends FormControlProps,
|
||||
Omit<GridControlSchema, 'type'> {
|
||||
store: IIRendererStore;
|
||||
}
|
||||
const defaultHorizontal = {
|
||||
|
||||
@ -7,16 +7,59 @@ import {
|
||||
makeHorizontalDeeper
|
||||
} from '../../utils/helper';
|
||||
import cx from 'classnames';
|
||||
import {FormItemWrap} from './Item';
|
||||
import {FormBaseControl, FormControlSchema, FormItemWrap} from './Item';
|
||||
import getExprProperties from '../../utils/filter-schema';
|
||||
import {SchemaClassName} from '../../Schema';
|
||||
|
||||
export interface InputGroupProps extends RendererProps {
|
||||
formMode?: string;
|
||||
controls: Array<any>;
|
||||
/**
|
||||
* Group 表单集合渲染器，能让多个表单在一行显示
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/group
|
||||
*/
|
||||
export interface GroupControlSchema extends FormBaseControl {
|
||||
type: 'group';
|
||||
|
||||
/**
|
||||
* FormItem 集合
|
||||
*/
|
||||
controls: Array<
|
||||
FormControlSchema & {
|
||||
/**
|
||||
* 展示模式
|
||||
*/
|
||||
mode?: 'normal' | 'inline' | 'horizontal';
|
||||
|
||||
/**
|
||||
* 列类名
|
||||
*/
|
||||
columnClassName?: SchemaClassName;
|
||||
|
||||
/**
|
||||
* 宽度占用比率。
|
||||
*/
|
||||
columnRatio?: number;
|
||||
}
|
||||
>;
|
||||
|
||||
/**
|
||||
* 子表单项默认的展示模式
|
||||
*/
|
||||
formMode?: 'normal' | 'horizontal' | 'inline';
|
||||
|
||||
/**
|
||||
* 间隔
|
||||
*/
|
||||
gap?: 'xs' | 'sm' | 'normal';
|
||||
direction: 'horizontal' | 'vertical';
|
||||
|
||||
/**
|
||||
* 配置时垂直摆放还是左右摆放。
|
||||
*/
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
}
|
||||
|
||||
export interface InputGroupProps
|
||||
extends RendererProps,
|
||||
Omit<GroupControlSchema, 'type'> {}
|
||||
|
||||
@Renderer({
|
||||
test: /(^|\/)form(?:\/.+)?\/control\/(?:\d+\/)?group$/,
|
||||
name: 'group-control'
|
||||
@ -173,7 +216,7 @@ export class ControlGroupRenderer extends React.Component<InputGroupProps> {
|
||||
if (label) {
|
||||
return (
|
||||
<FormItemWrap
|
||||
{...rest as any}
|
||||
{...(rest as any)}
|
||||
sizeMutable={false}
|
||||
label={label}
|
||||
renderControl={this.renderInput}
|
||||
|
||||
@ -1,13 +1,47 @@
|
||||
import React from 'react';
|
||||
import {Renderer, RendererProps} from '../../factory';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import HBox from '../HBox';
|
||||
import {
|
||||
FormItem,
|
||||
FormControlProps,
|
||||
FormControlSchema,
|
||||
FormBaseControl
|
||||
} from './Item';
|
||||
import HBox, {HBoxColumnObject, HBoxSchema} from '../HBox';
|
||||
import {Schema} from '../../types';
|
||||
import cx from 'classnames';
|
||||
import {isVisible} from '../../utils/helper';
|
||||
import {IIRendererStore} from '../../store/iRenderer';
|
||||
|
||||
interface HBoxProps extends FormControlProps {
|
||||
/**
|
||||
* HBox 水平布局控件。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/hbox
|
||||
*/
|
||||
export interface HBoxControlSchema
|
||||
extends FormBaseControl,
|
||||
Omit<HBoxSchema, 'columns'> {
|
||||
type: 'hbox';
|
||||
|
||||
columns: Array<
|
||||
HBoxColumnObject & {
|
||||
/**
|
||||
* 表单项集合
|
||||
*/
|
||||
controls?: Array<FormControlSchema>;
|
||||
|
||||
/**
|
||||
* @deprecated 请用类型 tabs
|
||||
*/
|
||||
tabs?: any;
|
||||
|
||||
/**
|
||||
* @deprecated 请用类型 fieldSet
|
||||
*/
|
||||
fieldSet?: any;
|
||||
}
|
||||
>;
|
||||
}
|
||||
|
||||
interface HBoxProps extends FormControlProps, HBoxControlSchema {
|
||||
store: IIRendererStore;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
|
||||
/**
|
||||
* Hidden 隐藏域。功能性组件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/hidden
|
||||
*/
|
||||
export interface HiddenControlSchema extends FormBaseControl {
|
||||
type: 'hidden';
|
||||
}
|
||||
|
||||
export default class HiddenControl extends React.Component<
|
||||
FormControlProps,
|
||||
|
||||
@ -6,9 +6,19 @@ import keycode from 'keycode';
|
||||
import Downshift, {StateChangeOptions} from 'downshift';
|
||||
import {autobind} from '../../utils/helper';
|
||||
import {ICONS} from './IconPickerIcons';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import {Option} from '../../components/Select';
|
||||
|
||||
/**
|
||||
* 图标选择器
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/icon-picker
|
||||
*/
|
||||
export interface IconPickerControlSchema extends FormBaseControl {
|
||||
type: 'icon-picker';
|
||||
|
||||
// 这就不应该成为一个 amis 控件。。。
|
||||
}
|
||||
|
||||
export interface IconPickerProps extends FormControlProps {
|
||||
placeholder?: string;
|
||||
resetValue?: any;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
import Cropper from 'react-cropper';
|
||||
import DropZone from 'react-dropzone';
|
||||
@ -17,39 +17,218 @@ import {getNameFromUrl} from './File';
|
||||
import ImageComponent, {ImageThumbProps} from '../Image';
|
||||
import {TranslateFn} from '../../locale';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
import {
|
||||
SchemaApi,
|
||||
SchemaClassName,
|
||||
SchemaTokenizeableString,
|
||||
SchemaUrlPath
|
||||
} from '../../Schema';
|
||||
|
||||
let preventEvent = (e: any) => e.stopPropagation();
|
||||
/**
|
||||
* Image 图片上传控件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/image
|
||||
*/
|
||||
export interface ImageControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* 指定为图片上传控件
|
||||
*/
|
||||
type: 'image';
|
||||
|
||||
export interface ImageProps extends FormControlProps {
|
||||
placeholder?: string;
|
||||
reciever?: string;
|
||||
limit?: {
|
||||
width?: number;
|
||||
height?: number;
|
||||
maxWidth?: number;
|
||||
minWidth?: number;
|
||||
/**
|
||||
* 默认展示图片的链接
|
||||
*/
|
||||
src?: SchemaUrlPath;
|
||||
|
||||
/**
|
||||
* 默认展示图片的类名
|
||||
*/
|
||||
imageClassName?: string;
|
||||
|
||||
/**
|
||||
* 配置接收的图片类型
|
||||
*
|
||||
* 建议直接填写文件后缀
|
||||
* 如：.txt,.csv
|
||||
*
|
||||
* 多个类型用逗号隔开。
|
||||
*/
|
||||
accept?: string;
|
||||
|
||||
/**
|
||||
* 默认都是通过用户选择图片后上传返回图片地址，如果开启此选项，则可以允许用户图片地址。
|
||||
*/
|
||||
allowInput?: boolean;
|
||||
|
||||
/**
|
||||
* 是否自动开始上传
|
||||
*/
|
||||
autoUpload?: boolean;
|
||||
|
||||
/**
|
||||
* 选择图片按钮的 CSS 类名
|
||||
*/
|
||||
btnClassName?: SchemaClassName;
|
||||
|
||||
/**
|
||||
* 上传按钮的 CSS 类名
|
||||
*/
|
||||
btnUploadClassName?: SchemaClassName;
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
compress?: boolean;
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
compressOptions?: {
|
||||
maxHeight?: number;
|
||||
minHeight?: number;
|
||||
aspectRatio?: number;
|
||||
aspectRatioLabel?: string;
|
||||
maxWidth?: number;
|
||||
};
|
||||
reCropable: boolean;
|
||||
|
||||
crop?:
|
||||
| boolean
|
||||
| {
|
||||
/**
|
||||
* 默认 `1` 即 `1:1`
|
||||
*
|
||||
* 留空将不限制
|
||||
*/
|
||||
aspectRatio?: number;
|
||||
[propName: string]: any;
|
||||
};
|
||||
accept?: string;
|
||||
|
||||
guides?: boolean;
|
||||
dragMode?: string;
|
||||
viewMode?: number;
|
||||
rotatable?: boolean;
|
||||
scalable?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* 是否允许二次裁剪。
|
||||
*/
|
||||
reCropable?: boolean;
|
||||
|
||||
/**
|
||||
* 是否隐藏上传按钮
|
||||
*/
|
||||
hideUploadButton?: boolean;
|
||||
joinValues?: boolean;
|
||||
extractValue?: boolean;
|
||||
delimiter?: string;
|
||||
autoUpload?: boolean;
|
||||
|
||||
/**
|
||||
* 限制图片大小，超出不让上传。
|
||||
*/
|
||||
limit?: {
|
||||
/**
|
||||
* 比率不对时的提示文字
|
||||
*/
|
||||
aspectRatioLabel?: string;
|
||||
/**
|
||||
* 限制比率
|
||||
*/
|
||||
aspectRatio?: number;
|
||||
|
||||
/**
|
||||
* 限制图片高度
|
||||
*/
|
||||
height?: number;
|
||||
|
||||
/**
|
||||
* 限制图片宽度
|
||||
*/
|
||||
width?: number;
|
||||
|
||||
/**
|
||||
* 限制图片最大高度
|
||||
*/
|
||||
maxHeight?: number;
|
||||
|
||||
/**
|
||||
* 限制图片最大宽度
|
||||
*/
|
||||
maxWidth?: number;
|
||||
|
||||
/**
|
||||
* 限制图片最小高度
|
||||
*/
|
||||
minHeight?: number;
|
||||
|
||||
/**
|
||||
* 限制图片最小宽度
|
||||
*/
|
||||
minWidth?: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* 最多的个数
|
||||
*/
|
||||
maxLength?: number;
|
||||
|
||||
/**
|
||||
* 默认没有限制，当设置后，文件大小大于此值将不允许上传。
|
||||
*/
|
||||
maxSize?: number;
|
||||
|
||||
/**
|
||||
* 默认 `/api/upload` 如果想自己存储，请设置此选项。
|
||||
*/
|
||||
reciever?: SchemaApi;
|
||||
|
||||
/**
|
||||
* 默认为 false, 开启后，允许用户输入压缩选项。
|
||||
*
|
||||
* @deprecated
|
||||
*/
|
||||
showCompressOptions?: boolean;
|
||||
|
||||
/**
|
||||
* 是否为多选
|
||||
*/
|
||||
multiple?: boolean;
|
||||
|
||||
/**
|
||||
* 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
* 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
*/
|
||||
joinValues?: boolean;
|
||||
|
||||
/**
|
||||
* 分割符
|
||||
*/
|
||||
delimiter?: string;
|
||||
|
||||
/**
|
||||
* 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
*/
|
||||
extractValue?: boolean;
|
||||
|
||||
/**
|
||||
* 清除时设置的值
|
||||
*/
|
||||
resetValue?: any;
|
||||
|
||||
/**
|
||||
* 缩路图展示模式
|
||||
*/
|
||||
thumbMode?: 'w-full' | 'h-full' | 'contain' | 'cover';
|
||||
|
||||
/**
|
||||
* 缩路图展示比率。
|
||||
*/
|
||||
thumbRatio?: '1:1' | '4:3' | '16:9';
|
||||
|
||||
/**
|
||||
* 上传后把其他字段同步到表单内部。
|
||||
*/
|
||||
autoFill?: {
|
||||
[propName: string]: SchemaTokenizeableString;
|
||||
};
|
||||
}
|
||||
|
||||
let preventEvent = (e: any) => e.stopPropagation();
|
||||
|
||||
export interface ImageProps
|
||||
extends FormControlProps,
|
||||
Omit<ImageControlSchema, 'type'> {
|
||||
onImageEnlarge?: (
|
||||
info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
|
||||
index?: number;
|
||||
@ -58,7 +237,6 @@ export interface ImageProps extends FormControlProps {
|
||||
>;
|
||||
}
|
||||
) => void;
|
||||
autoFill?: Object;
|
||||
}
|
||||
|
||||
export interface ImageState {
|
||||
|
||||
@ -10,8 +10,34 @@ import {
|
||||
} from '../../utils/helper';
|
||||
import cx from 'classnames';
|
||||
import getExprProperties from '../../utils/filter-schema';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import {
|
||||
FormItem,
|
||||
FormControlProps,
|
||||
FormBaseControl,
|
||||
FormControlSchema
|
||||
} from './Item';
|
||||
import {IFormStore} from '../../store/form';
|
||||
import {SchemaClassName} from '../../Schema';
|
||||
|
||||
/**
|
||||
* InputGroup
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/input-group
|
||||
*/
|
||||
export interface InputGroupControlSchema extends FormBaseControl {
|
||||
type: 'input-group';
|
||||
|
||||
/**
|
||||
* FormItem 集合
|
||||
*/
|
||||
controls: Array<
|
||||
FormControlSchema & {
|
||||
/**
|
||||
* 列类名
|
||||
*/
|
||||
columnClassName?: SchemaClassName;
|
||||
}
|
||||
>;
|
||||
}
|
||||
|
||||
export interface InputGroupProps extends FormControlProps {
|
||||
controls: Array<any>;
|
||||
|
||||
@ -20,8 +20,74 @@ import {BaseSchema, SchemaClassName} from '../../Schema';
|
||||
import {TextControlSchema} from './Text';
|
||||
import {SelectControlSchema} from './Select';
|
||||
import {TextareaControlSchema} from './Textarea';
|
||||
import {ArrayControlSchema} from './Array';
|
||||
import {ComboControlSchema} from './Combo';
|
||||
import {ButtonControlSchema} from './Button';
|
||||
import {ButtonGroupControlSchema} from './ButtonGroup';
|
||||
import {ButtonToolbarControlSchema} from './ButtonToolbar';
|
||||
import {ChainedSelectControlSchema} from './ChainedSelect';
|
||||
import {CheckboxControlSchema} from './Checkbox';
|
||||
import {CheckboxesControlSchema} from './Checkboxes';
|
||||
import {CityControlSchema} from './City';
|
||||
import {ColorControlSchema} from './Color';
|
||||
import {ConditionBuilderControlSchema} from './ConditionBuilder';
|
||||
import {ContainerControlSchema} from './Container';
|
||||
import {
|
||||
DateControlSchema,
|
||||
DateTimeControlSchema,
|
||||
TimeControlSchema
|
||||
} from './Date';
|
||||
import {DateRangeControlSchema} from './DateRange';
|
||||
import {DiffControlSchema} from './DiffEditor';
|
||||
import {EditorControlSchema} from './Editor';
|
||||
import {FieldSetControlSchema} from './FieldSet';
|
||||
import {FileControlSchema} from './File';
|
||||
import {FormulaControlSchema} from './Formula';
|
||||
import {GridControlSchema} from './Grid';
|
||||
import {GroupControlSchema} from './Group';
|
||||
import {HBoxControlSchema} from './HBox';
|
||||
import {HiddenControlSchema} from './Hidden';
|
||||
import {IconPickerControlSchema} from './IconPicker';
|
||||
import {ImageControlSchema} from './Image';
|
||||
import {InputGroupControlSchema} from './InputGroup';
|
||||
import {ListControlSchema} from './List';
|
||||
import {LocationControlSchema} from './Location';
|
||||
import {MatrixControlSchema} from './Matrix';
|
||||
|
||||
export type FormControlType =
|
||||
| 'array'
|
||||
| 'button'
|
||||
| 'submit'
|
||||
| 'reset'
|
||||
| 'button-group'
|
||||
| 'button-toolbar'
|
||||
| 'chained-select'
|
||||
| 'checkbox'
|
||||
| 'checkboxes'
|
||||
| 'city'
|
||||
| 'color'
|
||||
| 'combo'
|
||||
| 'condition-builder'
|
||||
| 'container'
|
||||
| 'date'
|
||||
| 'datetime'
|
||||
| 'time'
|
||||
| 'date-range'
|
||||
| 'diff'
|
||||
| 'editor'
|
||||
| 'fieldset'
|
||||
| 'file'
|
||||
| 'formula'
|
||||
| 'grid'
|
||||
| 'group'
|
||||
| 'hbox'
|
||||
| 'hidden'
|
||||
| 'icon-picker'
|
||||
| 'image'
|
||||
| 'input-group'
|
||||
| 'list'
|
||||
| 'location'
|
||||
| 'matrix'
|
||||
| 'text'
|
||||
| 'password'
|
||||
| 'email'
|
||||
@ -31,6 +97,37 @@ export type FormControlType =
|
||||
| 'textarea';
|
||||
|
||||
export type FormControlSchema =
|
||||
| ArrayControlSchema
|
||||
| ButtonControlSchema
|
||||
| ButtonGroupControlSchema
|
||||
| ButtonToolbarControlSchema
|
||||
| ChainedSelectControlSchema
|
||||
| CheckboxControlSchema
|
||||
| CheckboxesControlSchema
|
||||
| CityControlSchema
|
||||
| ColorControlSchema
|
||||
| ComboControlSchema
|
||||
| ConditionBuilderControlSchema
|
||||
| ContainerControlSchema
|
||||
| DateControlSchema
|
||||
| DateTimeControlSchema
|
||||
| TimeControlSchema
|
||||
| DateRangeControlSchema
|
||||
| DiffControlSchema
|
||||
| EditorControlSchema
|
||||
| FieldSetControlSchema
|
||||
| FileControlSchema
|
||||
| FormulaControlSchema
|
||||
| GridControlSchema
|
||||
| GroupControlSchema
|
||||
| HBoxControlSchema
|
||||
| HiddenControlSchema
|
||||
| IconPickerControlSchema
|
||||
| ImageControlSchema
|
||||
| InputGroupControlSchema
|
||||
| ListControlSchema
|
||||
| LocationControlSchema
|
||||
| MatrixControlSchema
|
||||
| TextControlSchema
|
||||
| SelectControlSchema
|
||||
| TextareaControlSchema;
|
||||
@ -44,7 +141,7 @@ export interface FormBaseControl extends Omit<BaseSchema, 'type'> {
|
||||
/**
|
||||
* 表单项大小
|
||||
*/
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg';
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
|
||||
|
||||
/**
|
||||
* 描述标题
|
||||
@ -299,7 +396,7 @@ export interface FormItemProps extends RendererProps {
|
||||
disabled?: boolean;
|
||||
btnDisabled: boolean;
|
||||
defaultValue: any;
|
||||
value: any;
|
||||
value?: any;
|
||||
prinstine: any;
|
||||
setPrinstineValue: (value: any) => void;
|
||||
onChange: (
|
||||
|
||||
@ -1,15 +1,42 @@
|
||||
import React from 'react';
|
||||
import {OptionsControl, OptionsControlProps, Option} from './Options';
|
||||
import {
|
||||
OptionsControl,
|
||||
OptionsControlProps,
|
||||
Option,
|
||||
FormOptionsControl
|
||||
} from './Options';
|
||||
import {Schema} from '../../types';
|
||||
import {createObject, isEmpty} from '../../utils/helper';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
import {SchemaCollection} from '../../Schema';
|
||||
|
||||
export interface ListProps extends OptionsControlProps {
|
||||
imageClassName: string;
|
||||
/**
|
||||
* List 复选框
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/list
|
||||
*/
|
||||
export interface ListControlSchema extends FormOptionsControl {
|
||||
type: 'list';
|
||||
|
||||
/**
|
||||
* 开启双击点选并提交。
|
||||
*/
|
||||
submitOnDBClick?: boolean;
|
||||
itemSchema?: Schema;
|
||||
|
||||
/**
|
||||
* 图片div类名
|
||||
*/
|
||||
imageClassName: string;
|
||||
|
||||
/**
|
||||
* 可以自定义展示模板。
|
||||
*/
|
||||
itemSchema?: SchemaCollection;
|
||||
}
|
||||
|
||||
export interface ListProps
|
||||
extends OptionsControlProps,
|
||||
Omit<ListControlSchema, 'type' | 'options'> {}
|
||||
|
||||
export default class ListControl extends React.Component<ListProps, any> {
|
||||
static propsList = ['itemSchema', 'value', 'renderFormItems'];
|
||||
static defaultProps = {
|
||||
|
||||
@ -1,15 +1,34 @@
|
||||
import React from 'react';
|
||||
import {themeable, ClassNamesFn} from '../../theme';
|
||||
import FormItem, {FormControlProps} from './Item';
|
||||
import {themeable, ClassNamesFn, ThemeProps} from '../../theme';
|
||||
import FormItem, {FormBaseControl, FormControlProps} from './Item';
|
||||
import LocationPicker from '../../components/LocationPicker';
|
||||
|
||||
export interface LocationControlProps extends FormControlProps {
|
||||
vendor: 'baidu' | 'gaode' | 'tenxun';
|
||||
/**
|
||||
* Location 选点组件
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/location
|
||||
*/
|
||||
export interface LocationControlSchema extends FormBaseControl {
|
||||
type: 'location';
|
||||
|
||||
/**
|
||||
* 选择地图类型
|
||||
*/
|
||||
vendor?: 'baidu' | 'gaode' | 'tenxun';
|
||||
|
||||
/**
|
||||
* 有的地图需要设置 ak 信息
|
||||
*/
|
||||
ak?: string;
|
||||
}
|
||||
|
||||
export interface LocationControlProps
|
||||
extends FormControlProps,
|
||||
ThemeProps,
|
||||
Omit<LocationControlSchema, 'type'> {
|
||||
value: any;
|
||||
ak: string;
|
||||
onChange: (value: any) => void;
|
||||
classnames: ClassNamesFn;
|
||||
classPrefix: string;
|
||||
vendor: 'baidu' | 'gaode' | 'tenxun';
|
||||
ak: string;
|
||||
}
|
||||
|
||||
export class LocationControl extends React.Component<LocationControlProps> {
|
||||
|
||||
@ -5,11 +5,50 @@
|
||||
|
||||
import React from 'react';
|
||||
import cx from 'classnames';
|
||||
import {FormControlProps, FormItem} from './Item';
|
||||
import {FormBaseControl, FormControlProps, FormItem} from './Item';
|
||||
import {buildApi, isValidApi, isEffectiveApi} from '../../utils/api';
|
||||
import {Checkbox, Spinner} from '../../components';
|
||||
import {autobind, setVariable} from '../../utils/helper';
|
||||
import {ApiObject} from '../../types';
|
||||
import {SchemaApi} from '../../Schema';
|
||||
|
||||
/**
|
||||
* Matrix 选择控件。适合做权限勾选。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/form/matrix
|
||||
*/
|
||||
export interface MatrixControlSchema extends FormBaseControl {
|
||||
type: 'matrix';
|
||||
|
||||
/**
|
||||
* 配置singleSelectMode时设置为false
|
||||
*/
|
||||
multiple?: boolean;
|
||||
|
||||
/**
|
||||
* 设置单选模式，multiple为false时有效
|
||||
*/
|
||||
singleSelectMode?: boolean;
|
||||
|
||||
/**
|
||||
* 可用来通过 API 拉取 options。
|
||||
*/
|
||||
source?: SchemaApi;
|
||||
|
||||
columns?: Array<{
|
||||
label: string;
|
||||
[propName: string]: any;
|
||||
}>;
|
||||
|
||||
rows?: Array<{
|
||||
label: string;
|
||||
[propName: string]: any;
|
||||
}>;
|
||||
|
||||
/**
|
||||
* 行标题说明
|
||||
*/
|
||||
rowLabel?: string;
|
||||
}
|
||||
|
||||
export interface Column {
|
||||
label: string;
|
||||
|
||||
@ -20,7 +20,8 @@ import {
|
||||
registerFormItem,
|
||||
FormItemBasicConfig,
|
||||
detectProps as itemDetectProps,
|
||||
FormBaseControl
|
||||
FormBaseControl,
|
||||
FormControlSchema
|
||||
} from './Item';
|
||||
import {IFormItemStore} from '../../store/formItem';
|
||||
export type OptionsControlComponent = React.ComponentType<FormControlProps>;
|
||||
@ -38,7 +39,7 @@ import {
|
||||
} from '../../components/Select';
|
||||
import {filter} from '../../utils/tpl';
|
||||
import findIndex from 'lodash/findIndex';
|
||||
import {SchemaApi} from '../../Schema';
|
||||
import {SchemaApi, SchemaTokenizeableString} from '../../Schema';
|
||||
|
||||
export {Option};
|
||||
|
||||
@ -51,7 +52,7 @@ export interface FormOptionsControl extends FormBaseControl {
|
||||
/**
|
||||
* 可用来通过 API 拉取 options。
|
||||
*/
|
||||
source?: SchemaApi;
|
||||
source?: SchemaApi | SchemaTokenizeableString;
|
||||
|
||||
/**
|
||||
* 是否为多选模式
|
||||
@ -85,6 +86,68 @@ export interface FormOptionsControl extends FormBaseControl {
|
||||
* @default ''
|
||||
*/
|
||||
resetValue?: string;
|
||||
|
||||
/**
|
||||
* 延时加载的 API，当选项中有 defer: true 的选项时，点开会通过此接口扩充。
|
||||
*/
|
||||
deferApi?: SchemaApi;
|
||||
|
||||
/**
|
||||
* 添加时调用的接口
|
||||
*/
|
||||
addApi?: Api;
|
||||
|
||||
/**
|
||||
* 新增时的表单项。
|
||||
*/
|
||||
addControls?: Array<FormControlSchema>;
|
||||
|
||||
/**
|
||||
* 是否可以新增
|
||||
*/
|
||||
creatable?: boolean;
|
||||
|
||||
/**
|
||||
* 新增文字
|
||||
*/
|
||||
createBtnLabel?: string;
|
||||
|
||||
/**
|
||||
* 是否可以编辑
|
||||
*/
|
||||
editable?: boolean;
|
||||
|
||||
/**
|
||||
* 编辑时调用的 API
|
||||
*/
|
||||
editApi?: SchemaApi;
|
||||
|
||||
/**
|
||||
* 选项修改的表单项
|
||||
*/
|
||||
editControls?: Array<FormControlSchema>;
|
||||
|
||||
/**
|
||||
* 是否可删除
|
||||
*/
|
||||
removable?: boolean;
|
||||
|
||||
/**
|
||||
* 选项删除 API
|
||||
*/
|
||||
deleteApi?: SchemaApi;
|
||||
|
||||
/**
|
||||
* 选项删除提示文字。
|
||||
*/
|
||||
deleteConfirmText?: string;
|
||||
|
||||
/**
|
||||
* 自动填充，当选项被选择的时候，将选项中的其他值同步设置到表单内。
|
||||
*/
|
||||
autoFill?: {
|
||||
[propName: string]: SchemaTokenizeableString;
|
||||
};
|
||||
}
|
||||
|
||||
export interface OptionsBasicConfig extends FormItemBasicConfig {
|
||||
@ -96,9 +159,10 @@ export interface OptionsConfig extends OptionsBasicConfig {
|
||||
}
|
||||
|
||||
// 下发给注册进来的组件的属性。
|
||||
export interface OptionsControlProps extends FormControlProps, OptionProps {
|
||||
source?: Api;
|
||||
name?: string;
|
||||
export interface OptionsControlProps
|
||||
extends FormControlProps,
|
||||
Omit<FormOptionsControl, 'type'> {
|
||||
options: Array<Option>;
|
||||
onToggle: (
|
||||
option: Option,
|
||||
submitOnChange?: boolean,
|
||||
@ -110,19 +174,13 @@ export interface OptionsControlProps extends FormControlProps, OptionProps {
|
||||
setLoading: (value: boolean) => void;
|
||||
reloadOptions: (setError?: boolean) => void;
|
||||
deferLoad: (option: Option) => void;
|
||||
creatable?: boolean;
|
||||
onAdd?: (
|
||||
idx?: number | Array<number>,
|
||||
value?: any,
|
||||
skipForm?: boolean
|
||||
) => void;
|
||||
addControls?: Array<any>;
|
||||
editable?: boolean;
|
||||
editControls?: Array<any>;
|
||||
onEdit?: (value: Option, origin?: Option, skipForm?: boolean) => void;
|
||||
removable?: boolean;
|
||||
onDelete?: (value: Option) => void;
|
||||
autoFill?: Object;
|
||||
}
|
||||
|
||||
// 自己接收的属性。
|
||||
|
||||
@ -6,7 +6,7 @@ import {BaseSchema, SchemaClassName, SchemaObject} from '../Schema';
|
||||
|
||||
export const ColProps = ['lg', 'md', 'sm', 'xs'];
|
||||
|
||||
export type GridColumn = BaseSchema & {
|
||||
export type GridColumnObject = {
|
||||
/**
|
||||
* 极小屏（<768px）时宽度占比
|
||||
*/
|
||||
@ -111,6 +111,8 @@ export type GridColumn = BaseSchema & {
|
||||
*/
|
||||
columnClassName?: SchemaClassName;
|
||||
};
|
||||
|
||||
export type GridColumn = BaseSchema & GridColumnObject;
|
||||
export type ColumnNode = GridColumn | ColumnArray;
|
||||
export interface ColumnArray extends Array<ColumnNode> {}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import cx from 'classnames';
|
||||
import {isVisible} from '../utils/helper';
|
||||
import {BaseSchema, SchemaObject} from '../Schema';
|
||||
|
||||
export type HBoxColumn = {
|
||||
export type HBoxColumnObject = {
|
||||
columnClassName?: string;
|
||||
|
||||
width?: number | string;
|
||||
@ -14,13 +14,15 @@ export type HBoxColumn = {
|
||||
style?: {
|
||||
[propName: string]: any;
|
||||
};
|
||||
} & BaseSchema; // 不能用 SchemaObject 呢，会报错
|
||||
};
|
||||
|
||||
export type HBoxColumn = HBoxColumnObject & BaseSchema; // 不能用 SchemaObject 呢，会报错
|
||||
|
||||
/**
|
||||
* Hbox 水平布局渲染器。
|
||||
* 文档：https://baidu.gitee.io/amis/docs/components/hbox
|
||||
*/
|
||||
export interface HboxSchema extends BaseSchema {
|
||||
export interface HBoxSchema extends BaseSchema {
|
||||
/**
|
||||
* 指定为each展示类型
|
||||
*/
|
||||
@ -28,7 +30,7 @@ export interface HboxSchema extends BaseSchema {
|
||||
columns: Array<HBoxColumn>;
|
||||
}
|
||||
|
||||
export interface HBoxProps extends RendererProps, HboxSchema {
|
||||
export interface HBoxProps extends RendererProps, HBoxSchema {
|
||||
className: string;
|
||||
itemRender?: (
|
||||
item: any,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user