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

2024-11-30 02:58:05 +08:00 · 2023-02-21 19:15:55 +08:00 · 2023-02-21 19:15:55 +08:00 · dfeb0ee6e4
commit dfeb0ee6e4
parent f2a38b0c5f
6 changed files with 150 additions and 21 deletions
--- a/docs/zh-CN/components/form/json-schema-editor.md
+++ b/docs/zh-CN/components/form/json-schema-editor.md
@ -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;
+}
+```
--- a/packages/amis-ui/src/components/schema-editor/Array.tsx
+++ b/packages/amis-ui/src/components/schema-editor/Array.tsx
@ -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>
    );
--- a/packages/amis-ui/src/components/schema-editor/Common.tsx
+++ b/packages/amis-ui/src/components/schema-editor/Common.tsx
@ -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 ?? '')}
+                          />
                        )}
                      />

--- a/packages/amis-ui/src/components/schema-editor/Object.tsx
+++ b/packages/amis-ui/src/components/schema-editor/Object.tsx
@ -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>
        )}

--- a/packages/amis-ui/src/components/schema-editor/index.tsx
+++ b/packages/amis-ui/src/components/schema-editor/index.tsx
@ -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>
    );
--- a/packages/amis/src/renderers/Form/JSONSchemaEditor.tsx
+++ b/packages/amis/src/renderers/Form/JSONSchemaEditor.tsx
@ -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}
      />