test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 11:58:10 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: JsonSchemaEditor支持设置placeholder (#6222)

Browse Source
This commit is contained in:
RUNZE LU 2023-02-21 19:15:55 +08:00 committed by GitHub
parent f2a38b0c5f
commit dfeb0ee6e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 150 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
docs/zh-CN/components/form/json-schema-editor.md
View File

@ -95,6 +95,7 @@ order: 61
```schema: scope="body"
{
"type": "form",
"debug": true,
"body": [
{
"type": "json-schema-editor",
@ -122,11 +123,58 @@ order: 61
}
```
## 占位提示
> 2.7.3 及以上版本
设置`placeholder`属性，可以修改属性控件的默认占位提示文本，当前属性值会和默认值做合并
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"debug": true,
"body": [
{
"type": "json-schema-editor",
"name": "schema",
"label": "字段类型",
"enableAdvancedSetting": true,
"placeholder": {
"key": "请输入字段名称",
"title": "请输入名称",
"description": "请输入描述信息",
"default": "",
"empty": "暂无字段"
}
}
]
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | --------------- | ------ | ------------------------------------------------------------------------------------------------ |
| rootTypeMutable | `boolean` | false | 顶级类型是否可配置 |
| showRootInfo | `boolean` | false | 是否显示顶级类型信息 |
| disabledTypes | `Array<string>` | | 用来禁用默认数据类型，默认类型有：string、number、interger、object、number、array、boolean、null |
| definitions | `object` | | 用来配置预设类型 |
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
| --------------- | ----------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------- |
| rootTypeMutable | `boolean` | false | 顶级类型是否可配置 |
| showRootInfo | `boolean` | false | 是否显示顶级类型信息 |
| disabledTypes | `Array<string>` | | 用来禁用默认数据类型，默认类型有：string、number、interger、object、number、array、boolean、null |
| definitions | `object` | | 用来配置预设类型 |
| placeholder | `SchemaEditorItemPlaceholder` | `{key: "字段名", title: "名称", description: "描述", default: "默认值", empty: "<空>",}` | 属性输入控件的占位提示文本 | `2.7.3` |
### SchemaEditorItemPlaceholder
```typescript
interface SchemaEditorItemPlaceholder {
/* 字段名称输入框占位文本 */
key?: string;
/* 名称输入框占位文本 */
title?: string;
/* 描述信息输入框占位文本 */
description?: string;
/* 默认值输入框占位文本 */
default?: string;
/* 默认值输入框占位文本 */
empty?: string;
}
```

4
packages/amis-ui/src/components/schema-editor/Array.tsx
View File

@ -39,7 +39,8 @@ export class SchemaEditorItemArray extends SchemaEditorItemCommon {
showInfo,
types,
onTypeChange,
enableAdvancedSetting
enableAdvancedSetting,
placeholder
} = this.props;
const items = value?.items || {
type: 'string'
@ -69,6 +70,7 @@ export class SchemaEditorItemArray extends SchemaEditorItemCommon {
classPrefix={classPrefix}
disabled={disabled || !!(items as any)?.$ref}
enableAdvancedSetting={enableAdvancedSetting}
placeholder={placeholder}
/>
</div>
);

35
packages/amis-ui/src/components/schema-editor/Common.tsx
View File

@ -10,6 +10,18 @@ import PickerContainer from '../PickerContainer';
import Select from '../Select';
import Textarea from '../Textarea';
export const schemaEditorItemPlaceholder = {
key: 'JSONSchema.key',
title: 'JSONSchema.title',
description: 'JSONSchema.description',
default: 'JSONSchema.default',
empty: 'placeholder.empty'
};
export type SchemaEditorItemPlaceholder = Partial<
typeof schemaEditorItemPlaceholder
>;
export interface SchemaEditorItemCommonProps extends LocaleProps, ThemeProps {
value?: JSONSchema;
onChange: (value: JSONSchema) => void;
@ -39,6 +51,8 @@ export interface SchemaEditorItemCommonProps extends LocaleProps, ThemeProps {
prefix?: JSX.Element;
affix?: JSX.Element;
enableAdvancedSetting?: boolean;
/** 各属性输入控件的placeholder */
placeholder?: SchemaEditorItemPlaceholder;
}
export class SchemaEditorItemCommon<
@ -85,7 +99,8 @@ export class SchemaEditorItemCommon<
enableAdvancedSetting,
prefix,
affix,
types
types,
placeholder
} = this.props;
return (
@ -131,7 +146,11 @@ export class SchemaEditorItemCommon<
rules={{maxLength: 20}}
isRequired
render={({field}) => (
<InputBox {...field} disabled={disabled} />
<InputBox
{...field}
disabled={disabled}
placeholder={__(placeholder?.title ?? '')}
/>
)}
/>
@ -140,7 +159,11 @@ export class SchemaEditorItemCommon<
name="description"
control={control}
render={({field}) => (
<Textarea {...field} disabled={disabled} />
<Textarea
{...field}
disabled={disabled}
placeholder={__(placeholder?.description ?? '')}
/>
)}
/>
@ -149,7 +172,11 @@ export class SchemaEditorItemCommon<
name="default"
control={control}
render={({field}) => (
<InputBox {...field} disabled={disabled} />
<InputBox
{...field}
disabled={disabled}
placeholder={__(placeholder?.default ?? '')}
/>
)}
/>

14
packages/amis-ui/src/components/schema-editor/Object.tsx
View File

@ -3,9 +3,11 @@ import {autobind, guid, JSONSchema} from 'amis-core';
import Button from '../Button';
import {Icon} from '../icons';
import InputBox from '../InputBox';
import {SchemaEditorItemCommon, SchemaEditorItemCommonProps} from './Common';
import {SchemaEditorItemCommon} from './Common';
import {SchemaEditorItem} from './Item';
import type {SchemaEditorItemCommonProps} from './Common';
export interface SchemaEditorItemObjectState {
members: Array<{
id: string;
@ -195,7 +197,8 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
showInfo,
types,
onTypeChange,
enableAdvancedSetting
enableAdvancedSetting,
placeholder
} = this.props;
const members = this.state.members;
@ -219,7 +222,7 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
hasError={member.hasError}
value={member.key || ''}
onChange={this.handlePropKeyChange.bind(this, index)}
placeholder={__('JSONSchema.key')}
placeholder={__(placeholder?.key ?? '')}
disabled={disabled || !!value?.$ref}
/>
@ -227,7 +230,7 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
className={cx('SchemaEditor-title')}
value={member.schema.title || ''}
onChange={this.handlePropTitleChange.bind(this, index)}
placeholder={__('JSONSchema.title')}
placeholder={__(placeholder?.title ?? '')}
disabled={disabled || !!value?.$ref}
/>
</>
@ -253,11 +256,12 @@ export class SchemaEditorItemObject extends SchemaEditorItemCommon<
disabled={disabled || !!value?.$ref}
required={member.required}
onRequiredChange={this.handlePropRequiredChange.bind(this, index)}
placeholder={placeholder}
/>
))
) : (
<div className={cx('SchemaEditorProps-placeholder')}>
{__('placeholder.empty')}
{__(placeholder?.empty ?? '')}
</div>
)}

14
packages/amis-ui/src/components/schema-editor/index.tsx
View File

@ -13,7 +13,9 @@ import {
} from 'amis-core';
import {uncontrollable} from 'amis-core';
import {SchemaEditorItem} from './Item';
import {schemaEditorItemPlaceholder} from './Common';
import type {JSONSchema7TypeName} from 'json-schema';
import type {SchemaEditorItemPlaceholder} from './Common';
export interface SchemaEditorProps extends LocaleProps, ThemeProps {
value?: JSONSchema;
@ -63,6 +65,11 @@ export interface SchemaEditorProps extends LocaleProps, ThemeProps {
* 是否开启高级配置
*/
enableAdvancedSetting?: boolean;
/**
* 各属性输入控件的占位提示文本
*/
placeholder?: SchemaEditorItemPlaceholder;
}
export class SchemaEditor extends React.Component<SchemaEditorProps> {
@ -73,7 +80,8 @@ export class SchemaEditor extends React.Component<SchemaEditorProps> {
defaultType: 'object',
rootTypeMutable: false,
showRootInfo: false,
disabledTypes: ['null']
disabledTypes: ['null'],
placeholder: schemaEditorItemPlaceholder
};
defaultTypes: Array<any>;
@ -155,7 +163,8 @@ export class SchemaEditor extends React.Component<SchemaEditorProps> {
showRootInfo,
disabled,
definitions,
enableAdvancedSetting
enableAdvancedSetting,
placeholder
} = this.props;
const value: JSONSchema = this.props.value || {
type: defaultType || 'object'
@ -213,6 +222,7 @@ export class SchemaEditor extends React.Component<SchemaEditorProps> {
disabled={disabled}
onTypeChange={this.handleTypeChange}
enableAdvancedSetting={enableAdvancedSetting}
placeholder={placeholder}
/>
</div>
);

44
packages/amis/src/renderers/Form/JSONSchemaEditor.tsx
View File

@ -1,9 +1,13 @@
import React from 'react';
import {FormItem, FormControlProps, FormBaseControl} from 'amis-core';
import pick from 'lodash/pick';
import {FormItem, FormControlProps} from 'amis-core';
import {JSONSchemaEditor} from 'amis-ui';
import {autobind} from 'amis-core';
import {autobind, isObject} from 'amis-core';
import {FormBaseControlSchema} from '../../Schema';
import {schemaEditorItemPlaceholder} from 'amis-ui/lib/components/schema-editor/Common';
import type {SchemaEditorItemPlaceholder} from 'amis-ui/lib/components/schema-editor/Common';
/**
* JSON Schema Editor
* 文档：https://baidu.gitee.io/amis/docs/components/form/json-schema-editor
@ -66,6 +70,19 @@ export interface JSONSchemaEditorControlSchema extends FormBaseControlSchema {
advancedSettings?: {
[propName: string]: any;
};
/**
* 各属性输入控件的占位提示文本
*
* {
* key: "key placeholder",
* title: "title placeholder",
* description: "description placeholder",
* default: "default placeholder"
* }
*
*/
placeholder?: SchemaEditorItemPlaceholder;
}
export interface JSONSchemaEditorProps
@ -77,9 +94,29 @@ export interface JSONSchemaEditorProps
export default class JSONSchemaEditorControl extends React.PureComponent<JSONSchemaEditorProps> {
static defaultProps = {
enableAdvancedSetting: false
enableAdvancedSetting: false,
placeholder: schemaEditorItemPlaceholder
};
normalizePlaceholder(): SchemaEditorItemPlaceholder {
const {placeholder} = this.props;
if (isObject(placeholder)) {
return {
...schemaEditorItemPlaceholder,
...pick(placeholder, [
'key',
'title',
'description',
'default',
'empty'
])
};
}
return schemaEditorItemPlaceholder;
}
@autobind
renderModalProps(value: any, onChange: (value: any) => void) {
const {render, advancedSettings} = this.props;
@ -105,6 +142,7 @@ export default class JSONSchemaEditorControl extends React.PureComponent<JSONSch
return (
<JSONSchemaEditor
{...rest}
placeholder={this.normalizePlaceholder()}
enableAdvancedSetting={enableAdvancedSetting}
renderModalProps={this.renderModalProps}
/>