feat(resetfidlds): 重置属性为初始状态

alibaba · Dec 25, 2023 · 786cc22 · 786cc22
1 parent 7332299
commit 786cc22
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 3 deletions.
diff --git a/docs/docs/api/configOptions.md b/docs/docs/api/configOptions.md
@@ -115,7 +115,9 @@ config.set('enableCondition', false)
 ```typescript
   focusNodeSelector?: (rootNode: IPublicModelNode) => Node;
 ```
-
+#### supportResetFieldsGlobally - 设置所有属性支持重置
+`@type {boolean}` `@default {false}`
+设置所有属性支持重置, 开启后组件属性setter后会有一个重置按钮，将属性重置为初始状态。
 #### supportVariableGlobally - 全局变量配置
 
 `@type {boolean}` `@default {false}`

diff --git a/docs/docs/demoUsage/panels/datasource.md b/docs/docs/demoUsage/panels/datasource.md
@@ -122,6 +122,7 @@ const preference = new Map();
     enableCanvasLock: true,
     // 默认绑定变量
     supportVariableGlobally: true,
+    supportResetFieldsGlobally: true,
     // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！
     // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径
     simulatorUrl: [

diff --git a/docs/docs/specs/material-spec.md b/docs/docs/specs/material-spec.md
@@ -833,6 +833,7 @@ props 数组下对象字段描述：
 | name       | 属性名                                                                                 | String            | type = 'field' 生效 |
 | defaultValue | 默认值 | Any(视字段类型而定) | type = 'field' 生效 |
 | supportVariable | 是否支持配置变量 | Boolean | type = 'field' 生效 |
+| supportResetFields | 是否支持配置重置属性 | Boolean | type = 'field' 生效 |
 | condition | 配置当前 prop 是否展示 | (target: IPublicModelSettingField) => boolean; | - |
 | ignoreDefaultValue | 配置当前 prop 是否忽略默认值处理逻辑，如果返回值是 true 引擎不会处理默认值 | (target: IPublicModelSettingField) => boolean; | - |
 | setter     | 单个控件 (setter) 描述，搭建基础协议组件的描述对象，支持 JSExpression / JSFunction / JSSlot | `String\|Object\|Function` | type = 'field' 生效 |

diff --git a/packages/editor-core/src/config.ts b/packages/editor-core/src/config.ts
@@ -116,6 +116,11 @@ const VALID_ENGINE_OPTIONS = {
     default: false,
     description: '设置所有属性支持变量配置',
   },
+  supportResetFieldsGlobally: {
+    type: 'boolean',
+    default: false,
+    description: '设置所有属性支持重置',
+  },
   visionSettings: {
     type: 'object',
     description: 'Vision-polyfill settings',

diff --git a/packages/editor-skeleton/src/components/field/fields.tsx b/packages/editor-skeleton/src/components/field/fields.tsx
@@ -10,6 +10,7 @@ import './index.less';
 import InlineTip from './inlinetip';
 import { intl } from '../../locale';
 import { Logger } from '@alilc/lowcode-utils';
+import { ResetIcon } from './resetIcon';
 
 const logger = new Logger({ level: 'warn', bizName: 'skeleton:field' });
 
@@ -25,6 +26,7 @@ export interface FieldProps {
   tip?: any;
   onExpandChange?: (expandState: boolean) => void;
   onClear?: () => void;
+  resetValue?: boolean;
 }
 
 export class Field extends Component<FieldProps> {
@@ -142,14 +144,22 @@ export class Field extends Component<FieldProps> {
     const { editor, name, title, meta } = this.props;
     editor?.eventBus.emit('setting.setter.field.click', { name, title, meta, event });
   }
+  resetIconClickHandler() {
+    const { children } = this.props;
+    if (children && (children as any).props) {
+      const { onChange, initialValue } = (children as any).props;
+      onChange(initialValue);
+    }
+  }
 
   render() {
     const { hasError } = this.state;
     if (hasError) {
       return null;
     }
 
-    const { className, children, meta, title, valueState, name: propName, tip } = this.props;
+    const { className, children, meta, title, valueState,
+      name: propName, tip, resetValue } = this.props;
     const { display, collapsed } = this.state;
     const isAccordion = display === 'accordion';
     let hostName = '';
@@ -185,6 +195,7 @@ export class Field extends Component<FieldProps> {
         <div key="body" ref={(shell) => { this.body = shell; }} className="lc-field-body">
           {children}
         </div>
+        {display !== 'block' && resetValue && <Title className="lc-reseticon" title={{ tip: '重置属性', icon: <ResetIcon fill="#8f9bb3" /> }} onClick={() => this.resetIconClickHandler()} />}
       </div>
     );
   }

diff --git a/packages/editor-skeleton/src/components/field/index.less b/packages/editor-skeleton/src/components/field/index.less
@@ -121,4 +121,7 @@
       }
     }
   }
+  .lc-reseticon {
+    cursor: pointer;
+  }
 }
diff --git a/packages/editor-skeleton/src/components/field/resetIcon.tsx b/packages/editor-skeleton/src/components/field/resetIcon.tsx
@@ -0,0 +1,9 @@
+import { IconProps, SVGIcon } from '@alilc/lowcode-utils';
+
+export function ResetIcon(props: IconProps) {
+  return (
+    <SVGIcon viewBox="0 0 1024 1024" {...props}>
+      <path d="M170.666667 512a42.666667 42.666667 0 0 1-85.333334 0C85.333333 276.352 276.352 85.333333 512 85.333333a426.026667 426.026667 0 0 1 341.333333 170.624V213.333333a42.666667 42.666667 0 0 1 85.333334 0v170.666667a42.666667 42.666667 0 0 1-42.666667 42.666667h-170.666667a42.666667 42.666667 0 0 1 0-85.333334h82.346667A341.333333 341.333333 0 0 0 170.666667 512z m682.666666 0a42.666667 42.666667 0 0 1 85.333334 0c0 235.648-191.018667 426.666667-426.666667 426.666667a426.026667 426.026667 0 0 1-341.333333-170.624V810.666667a42.666667 42.666667 0 0 1-85.333334 0v-170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666667a42.666667 42.666667 0 0 1 0 85.333334H216.32A341.333333 341.333333 0 0 0 853.333333 512z" />
+    </SVGIcon>
+  );
+}
diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx
@@ -227,7 +227,10 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
 
     let _onChange = extraProps?.onChange;
     let stageName = this.stageName;
-
+    const supportResetFields = extraProps?.supportResetFields;
+    const supportResetFieldsGlobally = engineConfig.get('supportResetFieldsGlobally', false);
+    const resetValue = supportResetFields === false ? false :
+      supportResetFields || supportResetFieldsGlobally;
     return createField(
       {
         meta: field?.componentMeta?.npm || field?.componentMeta?.componentName || '',
@@ -241,6 +244,7 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
         // stages,
         stageName,
         ...extraProps,
+        resetValue,
       },
       !stageName &&
       this.setters?.createSetterContent(setterType, {

diff --git a/packages/types/src/shell/type/engine-options.ts b/packages/types/src/shell/type/engine-options.ts
@@ -117,6 +117,12 @@ export interface IPublicTypeEngineOptions {
    */
   supportVariableGlobally?: boolean;
 
+  /**
+   * 设置所有属性支持重置，默认值：false
+   *
+   */
+  supportResetFieldsGlobally?: boolean;
+
   /**
    * 设置 simulator 相关的 url，默认值：undefined
    */

diff --git a/packages/types/src/shell/type/field-extra-props.ts b/packages/types/src/shell/type/field-extra-props.ts
@@ -63,6 +63,11 @@ export interface IPublicTypeFieldExtraProps {
    */
   supportVariable?: boolean;
 
+  /**
+   * 是否支持重置变量
+   */
+  supportResetFields?: boolean;
+
   /**
    * compatiable vision display
    */
-Original file line number
+Diff line change
@@ Expand Up / @@ -121,4 +121,7 @@ @@
           }
         }
       }
+      .lc-reseticon {
+        cursor: pointer;
+      }
     }