Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/docs/api/configOptions.md
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,9 @@ config.set('enableCondition', false)
```typescript
focusNodeSelector?: (rootNode: IPublicModelNode) => Node;
```

#### supportResetFieldsGlobally - 设置所有属性支持重置
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

supportResetFieldsGlobally 改成 supportResetGlobally

`@type {boolean}` `@default {false}`
设置所有属性支持重置, 开启后组件属性setter后会有一个重置按钮,将属性重置为初始状态。
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里重置的概念可以再描述的清晰一点,我会奇怪,它充值成默认值,还是什么值?比如,没有打开设置器面板的时候,可能是一个值,打开设置器面板之后又是另外的值。

#### supportVariableGlobally - 全局变量配置

`@type {boolean}` `@default {false}`
Expand Down
1 change: 1 addition & 0 deletions docs/docs/demoUsage/panels/datasource.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
1 change: 1 addition & 0 deletions docs/docs/specs/material-spec.md
Original file line number Diff line number Diff line change
Expand Up @@ -833,6 +833,7 @@ props 数组下对象字段描述:
| name | 属性名 | String | type = 'field' 生效 |
| defaultValue | 默认值 | Any(视字段类型而定) | type = 'field' 生效 |
| supportVariable | 是否支持配置变量 | Boolean | type = 'field' 生效 |
| supportResetFields | 是否支持配置重置属性 | Boolean | type = 'field' 生效 |
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

supportResetFields => supportReset

| condition | 配置当前 prop 是否展示 | (target: IPublicModelSettingField) => boolean; | - |
| ignoreDefaultValue | 配置当前 prop 是否忽略默认值处理逻辑,如果返回值是 true 引擎不会处理默认值 | (target: IPublicModelSettingField) => boolean; | - |
| setter | 单个控件 (setter) 描述,搭建基础协议组件的描述对象,支持 JSExpression / JSFunction / JSSlot | `String\|Object\|Function` | type = 'field' 生效 |
Expand Down
5 changes: 5 additions & 0 deletions packages/editor-core/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,11 @@ const VALID_ENGINE_OPTIONS = {
default: false,
description: '设置所有属性支持变量配置',
},
supportResetFieldsGlobally: {
type: 'boolean',
default: false,
description: '设置所有属性支持重置',
},
visionSettings: {
type: 'object',
description: 'Vision-polyfill settings',
Expand Down
13 changes: 12 additions & 1 deletion packages/editor-skeleton/src/components/field/fields.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' });

Expand All @@ -25,6 +26,7 @@ export interface FieldProps {
tip?: any;
onExpandChange?: (expandState: boolean) => void;
onClear?: () => void;
resetValue?: boolean;
}

export class Field extends Component<FieldProps> {
Expand Down Expand Up @@ -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) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里去掉 as any,换成合适的 TS 表达式

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里看看能不能从其它地方获取默认值。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

改父组件让initialValue和children一样传下来,而不是从children中拿这样?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个能力应该参考 supportVariableGlobally 的逻辑,首先新增一个 ResetSetter、再在 settings-pane 里面支持。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

新增一个ResetSetter确实比较好,没增加到ext中是考虑到之前ext项目pr处理的比较慢更新的不频繁

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我新增一个ResetSetter吧

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 = '';
Expand Down Expand Up @@ -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()} />}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的 tip: '重置属性' 需要支持国际化,参考同文件的 intl('Attribute: ')。

这里的样式需要使用 css 变量。参考:https://lowcode-engine.cn/site/docs/guide/expand/editor/theme

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里还有个问题,display !== 'block' && resetValue 这两个条件没有写到描述里面

其中 resetValue 不存在的情况下,reset 的行为,是不是应该将值删除。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resetValue在上层处理了,物料中的supportReset的优先级设置比supportResetGlobally优先级高
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css只加了一个cursor: pointer就不用使用变量了吧 😊

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的样式变量,主要是颜色。

</div>
);
}
Expand Down
3 changes: 3 additions & 0 deletions packages/editor-skeleton/src/components/field/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,7 @@
}
}
}
.lc-reseticon {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的类名在哪使用的?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个忘记删除了,,, 😰

cursor: pointer;
}
}
9 changes: 9 additions & 0 deletions packages/editor-skeleton/src/components/field/resetIcon.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 || '',
Expand All @@ -241,6 +244,7 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
// stages,
stageName,
...extraProps,
resetValue,
},
!stageName &&
this.setters?.createSetterContent(setterType, {
Expand Down
6 changes: 6 additions & 0 deletions packages/types/src/shell/type/engine-options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,12 @@ export interface IPublicTypeEngineOptions {
*/
supportVariableGlobally?: boolean;

/**
* 设置所有属性支持重置,默认值:false
*
*/
supportResetFieldsGlobally?: boolean;

/**
* 设置 simulator 相关的 url,默认值:undefined
*/
Expand Down
5 changes: 5 additions & 0 deletions packages/types/src/shell/type/field-extra-props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@ export interface IPublicTypeFieldExtraProps {
*/
supportVariable?: boolean;

/**
* 是否支持重置变量
*/
supportResetFields?: boolean;

/**
* compatiable vision display
*/
Expand Down