{
+ return (
+ obj &&
+ obj.prototype &&
+ (obj.prototype.isReactComponent || obj.prototype instanceof Component)
+ );
+}
+
+interface IExtraProps {
+ stageName?: string;
+ isGroup?: boolean;
+ isExpand?: boolean;
+ propName?: string;
+ toggleExpand?: () => any;
+ onExpandChange?: () => any;
+}
+
+const FIELD_TYPE_MAP: any = {
+ accordion: AccordionField,
+ block: BlockField,
+ entry: EntryField,
+ inline: InlineField,
+ plain: PlainField,
+ popup: PopupField,
+ tab: AccordionField,
+};
+
+export class SettingField extends Component {
+ public readonly props: {
+ prop: any;
+ selected?: boolean;
+ forceDisplay?: string;
+ className?: string;
+ children?: JSX.Element | string;
+ compact?: boolean;
+ key?: string;
+ addonProps?: object;
+ };
+
+ /**
+ * VariableSetter placeholder
+ */
+ public variableSetter: any;
+
+ constructor(props: any) {
+ super(props);
+
+ this.variableSetter = getSetter('VariableSetter')?.component || VariableSetter;
+ }
+
+ public render() {
+ const { prop, selected, addonProps } = this.props;
+ const display = this.props.forceDisplay || prop.getDisplay();
+
+ if (display === 'none') {
+ return null;
+ }
+
+ // 标准的属性，即每一个 Field 在 VE 下都拥有的属性
+ const standardProps = {
+ className: this.props.className,
+ compact: this.props.compact,
+
+ isSupportMultiSetter: this.supportMultiSetter(),
+ isSupportVariable: prop.isSupportVariable(),
+ isUseVariable: prop.isUseVariable(),
+ prop,
+ setUseVariable: () => prop.setUseVariable(!prop.isUseVariable()),
+ tip: prop.getTip(),
+ title: prop.getTitle(),
+ };
+
+ // 部分 Field 所需要的额外 fieldProps
+ const extraProps = {};
+ const ctx = context;
+ const plugin = ctx.getPlugin(VE_HOOKS.VE_SETTING_FIELD_PROVIDER);
+ let Field;
+ if (typeof plugin === 'function') {
+ Field = plugin(display, FIELD_TYPE_MAP, prop);
+ }
+ if (!Field) {
+ Field = FIELD_TYPE_MAP[display] || PlainField;
+ }
+ this._prepareProps(display, extraProps);
+
+ if (display === 'entry') {
+ return ;
+ }
+
+ let setter;
+ const props: any = {
+ prop,
+ selected,
+ };
+ const fieldProps = { ...standardProps, ...extraProps };
+
+ if (prop.isUseVariable() && !this.variableSetter.isPopup) {
+ props.placeholder = '请输入表达式: ${var}';
+ props.key = `${prop.getId()}-variable`;
+ setter = createElement(this.variableSetter, props);
+ return {setter};
+ }
+
+ // for composited prop
+ if (prop.getVisibleItems) {
+ setter = prop
+ .getVisibleItems()
+ .map((item: any) => (
+
+ ));
+ return {setter};
+ }
+
+ setter = prop.getSetter();
+ if (
+ typeof setter === 'object' &&
+ 'componentName' in setter &&
+ !(isValidElement(setter) || isReactClass(setter))
+ ) {
+ const { componentName: setterType, props: setterProps } = setter as any;
+ setter = createSetterContent(setterType, {
+ ...addonProps,
+ ...setterProps,
+ ...props,
+ });
+ } else {
+ setter = createSetterContent(setter, {
+ ...addonProps,
+ ...props,
+ });
+ }
+
+ return {setter};
+ }
+
+ private supportMultiSetter() {
+ const { prop } = this.props;
+ const setter = prop && prop.getConfig && prop.getConfig('setter');
+ return prop.isSupportVariable() || Array.isArray(setter);
+ }
+
+ private _prepareProps(displayType: string, extraProps: IExtraProps): void {
+ const { prop } = this.props;
+ extraProps.propName = prop.isGroup()
+ ? '组合属性，无属性名称'
+ : prop.getName();
+ switch (displayType) {
+ case 'title':
+ break;
+ case 'block':
+ Object.assign(extraProps, { isGroup: prop.isGroup() });
+ break;
+ case 'accordion':
+ Object.assign(extraProps, {
+ headDIY: true,
+ isExpand: prop.isExpand(),
+ isGroup: prop.isGroup(),
+ onExpandChange: () => prop.onExpandChange(() => this.forceUpdate()),
+ toggleExpand: () => {
+ prop.toggleExpand();
+ },
+ });
+ break;
+ case 'entry':
+ Object.assign(extraProps, { stageName: prop.getName() });
+ break;
+ default:
+ break;
+ }
+ }
+}
diff --git a/packages/vision-polyfill/src/fields/variable-setter.less b/packages/vision-polyfill/src/fields/variable-setter.less
new file mode 100644
index 000000000..6ea5653d3
--- /dev/null
+++ b/packages/vision-polyfill/src/fields/variable-setter.less
@@ -0,0 +1,43 @@
+@import '~@ali/ve-less-variables/index.less';
+
+.engine-input-control {
+ box-sizing: border-box;
+ font-size: 12px;
+ font-family: Consolas, "Courier New", Courier, FreeMono, monospace;
+ color: var(--color-text, @dark-alpha-3);
+ background: var(--color-field-background, @white-alpha-1);
+ border: 1px solid var(--color-field-border, @normal-alpha-5);
+ flex: 1;
+ border-radius: @global-border-radius;
+ max-height: 200px;
+
+ &:hover {
+ border-color: var(--color-field-border-hover, @normal-alpha-4);
+ }
+
+ &.engine-focused {
+ border-color: var(--color-field-border-active, @normal-alpha-3);
+ }
+
+ textarea {
+ resize: none;
+ }
+
+ >.engine-input {
+ box-sizing: border-box;
+ padding: 6px;
+ display: block;
+ font-size: 12px;
+ line-height: 16px;
+ color: var(--color-text, @dark-alpha-3);
+ width: 100%;
+ border: 0;
+ margin: 0;
+ background: transparent;
+ outline: none;
+
+ &::-webkit-input-placeholder {
+ color: var(--color-field-placeholder, @normal-alpha-5);
+ }
+ }
+}
diff --git a/packages/vision-polyfill/src/fields/variable-setter.tsx b/packages/vision-polyfill/src/fields/variable-setter.tsx
new file mode 100644
index 000000000..f520c128f
--- /dev/null
+++ b/packages/vision-polyfill/src/fields/variable-setter.tsx
@@ -0,0 +1,86 @@
+import './variable-setter.less';
+import { Component } from 'react';
+
+class Input extends Component {
+ public props: {
+ value: string;
+ placeholder: string;
+ onChange: (val: any) => any;
+ };
+
+ public state: { focused: boolean };
+
+ constructor(props: object) {
+ super(props);
+ this.state = {
+ focused: false,
+ };
+ }
+
+ public componentDidMount() {
+ this.adjustTextAreaHeight();
+ }
+
+ private domRef: HTMLTextAreaElement | null = null;
+
+ public adjustTextAreaHeight() {
+ if (!this.domRef) {
+ return;
+ }
+ this.domRef.style.height = '1px';
+ const calculatedHeight = this.domRef.scrollHeight;
+ this.domRef.style.height = calculatedHeight >= 200 ? '200px' : `${calculatedHeight }px`;
+ }
+
+ public render() {
+ const { value, placeholder, onChange } = this.props;
+ return (
+
+