From b421ae6f173e075d49594cf975dd2f52b7ef3d5d Mon Sep 17 00:00:00 2001 From: Janry Date: Fri, 16 Jul 2021 16:37:44 +0800 Subject: [PATCH] feat(setters): support declaration to ReactionsSetter (#1805) --- designable/antd/package.json | 8 +- designable/setters/package.json | 9 +- .../ReactionsSetter/FieldPropertySetter.tsx | 77 ++-- .../ReactionsSetter/declarations.ts | 40 ++ .../src/components/ReactionsSetter/helpers.ts | 375 ++++++++++++++++++ .../src/components/ReactionsSetter/index.tsx | 232 +++++++++-- .../components/ReactionsSetter/properties.ts | 51 +++ .../components/ReactionsSetter/styles.less | 19 +- designable/setters/src/locales/en-US.ts | 6 +- designable/setters/src/locales/zh-CN.ts | 6 +- packages/json-schema/src/transformer.ts | 17 +- packages/json-schema/src/types.ts | 2 +- yarn.lock | 56 +-- 13 files changed, 788 insertions(+), 110 deletions(-) create mode 100644 designable/setters/src/components/ReactionsSetter/declarations.ts create mode 100644 designable/setters/src/components/ReactionsSetter/helpers.ts create mode 100644 designable/setters/src/components/ReactionsSetter/properties.ts diff --git a/designable/antd/package.json b/designable/antd/package.json index 53683bf773b..4015b52f23f 100644 --- a/designable/antd/package.json +++ b/designable/antd/package.json @@ -30,7 +30,7 @@ "start": "webpack-dev-server --config playground/webpack.dev.ts" }, "devDependencies": { - "@designable/react-settings-form": "^0.4.7", + "@designable/react-settings-form": "^0.4.11", "autoprefixer": "^9.0", "file-loader": "^5.0.2", "fs-extra": "^8.1.0", @@ -56,9 +56,9 @@ "react-is": ">=16.8.0 || >=17.0.0" }, "dependencies": { - "@designable/core": "^0.4.7", - "@designable/formily": "^0.4.7", - "@designable/react": "^0.4.7", + "@designable/core": "^0.4.11", + "@designable/formily": "^0.4.11", + "@designable/react": "^0.4.11", "@formily/antd": "2.0.0-beta.79", "@formily/core": "2.0.0-beta.79", "@formily/designable-setters": "2.0.0-beta.79", diff --git a/designable/setters/package.json b/designable/setters/package.json index d9b775e962c..fa29538aa6f 100644 --- a/designable/setters/package.json +++ b/designable/setters/package.json @@ -40,11 +40,10 @@ "react-is": ">=16.8.0 || >=17.0.0" }, "dependencies": { - "@designable/core": "^0.4.7", - "@designable/formily": "^0.4.7", - "@designable/react": "^0.4.7", - "@designable/react-settings-form": "^0.4.7", - "@designable/shared": "^0.4.7", + "@designable/core": "^0.4.11", + "@designable/formily": "^0.4.11", + "@designable/react": "^0.4.11", + "@designable/react-settings-form": "^0.4.11", "@formily/antd": "2.0.0-beta.79", "@formily/core": "2.0.0-beta.79", "@formily/react": "2.0.0-beta.79", diff --git a/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx b/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx index 3532c14a408..eb09e255880 100644 --- a/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx +++ b/designable/setters/src/components/ReactionsSetter/FieldPropertySetter.tsx @@ -2,36 +2,27 @@ import React, { useState } from 'react' import { TextWidget, usePrefix } from '@designable/react' import { Menu } from 'antd' import { MonacoInput } from '@designable/react-settings-form' -import { reduce } from '@formily/shared' - +import { isPlainObj, reduce } from '@formily/shared' +import { FieldProperties } from './properties' export interface IFieldProperty { [key: string]: string } export interface IFieldPropertySetterProps { + extraLib?: string value?: IFieldProperty onChange?: (value: IFieldProperty) => void } -const FieldProperties = [ - 'display', - 'pattern', - 'title', - 'description', - 'value', - 'initialValue', - 'required', - 'dataSource', - ['component[0]', 'component'], - ['component[1]', 'componentProps'], - ['decorator[0]', 'decorator'], - ['decorator[1]', 'decoratorProps'], -] +const template = (code: string) => { + if (!code) return + return code.trim() +} export const FieldPropertySetter: React.FC = ( props ) => { - const [selectKeys, setSelectKeys] = useState(['display']) + const [selectKeys, setSelectKeys] = useState(['visible']) const prefix = usePrefix('field-property-setter') const value = { ...props.value } @@ -52,13 +43,17 @@ export const FieldPropertySetter: React.FC = ( ) } + const currentProperty = FieldProperties.find( + (item) => item.key === selectKeys[0] + ) + return (
= ( }} > {FieldProperties.map((key) => { - if (Array.isArray(key)) { + if (isPlainObj(key)) { return ( - + ) @@ -87,17 +84,41 @@ export const FieldPropertySetter: React.FC = ( })}
-
{`$self.${selectKeys[0]} = {{`}
+
+ {`$self.${selectKeys[0]} = (`} + + {'//'}{' '} + {' '} + {'`'} + {currentProperty?.type} + {'`'} + +
{ props.onChange?.( filterEmpty({ @@ -108,7 +129,7 @@ export const FieldPropertySetter: React.FC = ( }} />
-
{`}}`}
+
{`)`}
) diff --git a/designable/setters/src/components/ReactionsSetter/declarations.ts b/designable/setters/src/components/ReactionsSetter/declarations.ts new file mode 100644 index 00000000000..7b9b58a2a52 --- /dev/null +++ b/designable/setters/src/components/ReactionsSetter/declarations.ts @@ -0,0 +1,40 @@ +import { MonacoInput } from '@designable/react-settings-form' + +export interface IDependency { + name: string + path: string +} + +const loadDependencies = async (deps: IDependency[]) => { + return Promise.all( + deps.map(async ({ name, path }) => ({ + name, + path, + library: await fetch(`//cdn.jsdelivr.net/npm/${name}/${path}`).then( + (res) => res.text() + ), + })) + ) +} + +MonacoInput.loader.init().then(async (monaco) => { + const deps = await loadDependencies([ + { name: '@formily/core', path: 'dist/formily.core.all.d.ts' }, + ]) + deps?.forEach(({ name, library }) => { + monaco.languages.typescript.typescriptDefaults.addExtraLib( + `declare module '${name}'{ ${library} }`, + `file:///node_modules/${name}/index.d.ts` + ) + }) + monaco.languages.typescript.typescriptDefaults.addExtraLib( + ` + import { Form, Field } from '@formily/core' + declare global { + declare var $form : Form + declare var $self : Field + } + `, + `file:///node_modules/formily_global.d.ts` + ) +}) diff --git a/designable/setters/src/components/ReactionsSetter/helpers.ts b/designable/setters/src/components/ReactionsSetter/helpers.ts new file mode 100644 index 00000000000..c7f141b8808 --- /dev/null +++ b/designable/setters/src/components/ReactionsSetter/helpers.ts @@ -0,0 +1,375 @@ +export const GlobalHelper = ` +/** + * You can use the built-in context variables + * + * 1. \`$self\` is the current Field Model + * https://core.formilyjs.org/api/models/field + * + * 2. \`$form\` is the current Form Model + * https://core.formilyjs.org/api/models/form + * + * 3. \`$deps\` is the dependencies value + **/ +` + +export const BooleanHelper = ` +${GlobalHelper} +/** + * Example 1 + * Static Boolean + **/ + +false + +/** + * Example 2 + * Equal Calculation + **/ + +$deps.VariableName === 'TARGET_VALUE' + +/** + * Example 3 + * Not Equal Calculation + **/ + +$deps.VariableName !== 'TARGET_VALUE' + +/** + * Example 4 + * And Logic Calculation + **/ + +$deps.VariableName1 && $deps.VariableName2 + +/** + * Example 5 + * Grater Logic Calculation + **/ + +$deps.VariableName > 100 + +/** + * Example 6 + * Not Logic Calculation + **/ + +!$deps.VariableName + +` + +export const DisplayHelper = ` +${GlobalHelper} +/** + * Example 1 + * Static Mode + **/ + +'none' + +/** + * Example 2 + * Equal Condition Associated + **/ + +$deps.VariableName === 'TARGET_VALUE' ? 'visible' : 'none' + +/** + * Example 3 + * Not Equal Condition Associated + **/ + +$deps.VariableName !== 'TARGET_VALUE' ? 'visible' : 'hidden' + +/** + * Example 4 + * And Logic Condition Associated + **/ + +$deps.VariableName1 && $deps.VariableName2 ? 'visible' : 'none' + +/** + * Example 5 + * Grater Logic Condition Associated + **/ + +$deps.VariableName > 100 ? 'visible' : 'hidden' + +/** + * Example 6 + * Not Logic Condition Associated + **/ + +!$deps.VariableName ? 'visible' : 'none' +` + +export const PatternHelper = ` +${GlobalHelper} +/** + * Example 1 + * Static Mode + **/ + +'readPretty' + +/** + * Example 2 + * Equal Condition Associated + **/ + +$deps.VariableName === 'TARGET_VALUE' ? 'editable' : 'disabled' + +/** + * Example 3 + * Not Equal Condition Associated + **/ + +$deps.VariableName !== 'TARGET_VALUE' ? 'editable' : 'readOnly' + +/** + * Example 4 + * And Logic Condition Associated + **/ + +$deps.VariableName1 && $deps.VariableName2 ? 'editable' : 'readPretty' + +/** + * Example 5 + * Grater Logic Condition Associated + **/ + +$deps.VariableName > 100 ? 'editable' : 'readOnly' + +/** + * Example 6 + * Not Logic Condition Associated + **/ + +!$deps.VariableName ? 'editable' : 'disabled' +` + +export const StringHelper = ` +${GlobalHelper} +/** + * Example 1 + * Static String + **/ + +'Normal String Text' + +/** + * Example 2 + * Associated String + **/ + +$deps.VariableName === 'TARGET_VALUE' ? 'Associated String Text' : '' +` + +export const AnyHelper = ` +${GlobalHelper} +/** + * Example 1 + * String Type + **/ + +'String' + +/** + * Example 2 + * String Array + **/ + +['StringArray'] + +/** + * Example 3 + * Object Array + **/ + +[{ key: 'ObjectArray' }] + +/** + * Example 4 + * Boolean + **/ + +true + +/** + * Example 5 + * RegExp + **/ + +/\d+/ + +/** + * Example 1 + * Associated String Value + **/ + +$deps.VariableName + 'Compose String' + +/** + * Example 2 + * Associated Array Value + **/ + +[ $deps.VariableName ] + +/** + * Example 3 + * Associated Object Value + **/ + +{ + key : $deps.VariableName +} + +/** + * Example 4 + * Associated Boolean Value + **/ + +!$deps.VariableName +` + +export const DataSourceHelper = ` +${GlobalHelper} +/** + * Example 1 + * Static DataSource + **/ + +[ + { label : "item1", value: "1" }, + { label : "item2", value: "2" } +] + +/** + * Example 2 + * Associated DataSource + **/ + +[ + { label : "item1", value: "1" }, + { label : "item2", value: "2" }, + ...$deps.VariableName +] +` + +export const ComponentPropsHelper = ` +${GlobalHelper} +/** + * Example 1 + * Static Props + **/ + +{ + placeholder: "This is placeholder" +} + +/** + * Example 2 + * Associated Props + **/ + +{ + placeholder: $deps.VariableName +} +` + +export const DecoratorPropsHelper = ` +${GlobalHelper} +/** + * Example 1 + * Static Props + **/ + +{ + labelCol:6 +} + +/** + * Example 2 + * Associated Props + **/ + +{ + labelCol: $deps.VariableName +} +` + +export const FulfillRunHelper = ` +${GlobalHelper} +/** + * Example 1 + * Async Select + **/ + +$effect(()=>{ + $self.loading = true + fetch('//some.domain/getSomething') + .then(response=>response.json()) + .then(({ data })=>{ + $self.loading = false + $self.dataSource = data + },()=>{ + $self.loading = false + }) +}) + + +/** + * Example 2 + * Async Search Select + **/ + +const state = $observable({ + keyword:'' +}) + +$props({ + onSearch(keyword){ + state.keyword = keyword + } +}) + +$effect(()=>{ + $self.loading = true + fetch(\`//some.domain/getSomething?q=\${state.keyword}\`) + .then(response=>response.json()) + .then(({ data })=>{ + $self.loading = false + $self.dataSource = data + },()=>{ + $self.loading = false + }) +},[ state.keyword ]) + +/** + * Example 3 + * Async Associated Select + **/ + +const state = $observable({ + keyword:'' +}) + +$props({ + onSearch(keyword){ + state.keyword = keyword + } +}) + +$effect(()=>{ + $self.loading = true + fetch(\`//some.domain/getSomething?q=\${state.keyword}&other=\${$deps.VariableName}\`) + .then(response=>response.json()) + .then(({ data })=>{ + $self.loading = false + $self.dataSource = data + },()=>{ + $self.loading = false + }) +},[ state.keyword, $deps.VariableName ]) +` diff --git a/designable/setters/src/components/ReactionsSetter/index.tsx b/designable/setters/src/components/ReactionsSetter/index.tsx index 844dc3fce64..2a32bcd1f9d 100644 --- a/designable/setters/src/components/ReactionsSetter/index.tsx +++ b/designable/setters/src/components/ReactionsSetter/index.tsx @@ -1,16 +1,25 @@ import React, { useEffect, useMemo, useState } from 'react' -import { clone } from '@formily/shared' +import { clone, uid } from '@formily/shared' import { createForm, isVoidField } from '@formily/core' import { createSchemaField } from '@formily/react' import { GlobalRegistry } from '@designable/core' import { requestIdle } from '@designable/shared' import { usePrefix, TextWidget } from '@designable/react' import { MonacoInput } from '@designable/react-settings-form' -import { Form, ArrayTable, Input, FormItem, FormCollapse } from '@formily/antd' -import { Modal, Card, Button } from 'antd' +import { + Form, + ArrayTable, + Input, + Select, + FormItem, + FormCollapse, +} from '@formily/antd' +import { Modal, Card, Button, Tag, Tooltip } from 'antd' import { PathSelector } from './PathSelector' import { FieldPropertySetter } from './FieldPropertySetter' +import { FulfillRunHelper } from './helpers' import { IReaction } from './types' +import './declarations' import './styles.less' export interface IReactionsSetterProps { @@ -18,11 +27,35 @@ export interface IReactionsSetterProps { onChange?: (value: IReaction) => void } +const TypeView = ({ value }) => { + const text = String(value) + if (text.length <= 26) return {text} + return ( + + + + 
+                {text}
+
+ + + } + > + {text.substring(0, 24)}... + + + ) +} + const SchemaField = createSchemaField({ components: { Card, FormCollapse, Input, + TypeView, + Select, FormItem, PathSelector, FieldPropertySetter, @@ -31,6 +64,78 @@ const SchemaField = createSchemaField({ }, }) +const FieldStateProperties = [ + 'value', + 'initialValue', + 'inputValue', + 'inputValues', + 'modified', + 'initialized', + 'title', + 'description', + 'mounted', + 'unmounted', + 'active', + 'visited', + 'loading', + 'errors', + 'warnings', + 'successes', + 'feedbacks', + 'valid', + 'invalid', + 'pattern', + 'display', + 'disabled', + 'readOnly', + 'readPretty', + 'visible', + 'hidden', + 'editable', + 'validateStatus', + 'validating', +] + +const FieldStateValueTypes = { + modified: 'boolean', + initialized: 'boolean', + title: 'string', + description: 'string', + mounted: 'boolean', + unmounted: 'boolean', + active: 'boolean', + visited: 'boolean', + loading: 'boolean', + errors: 'string[]', + warnings: 'string[]', + successes: 'string[]', + feedbacks: `Array< + triggerType?: 'onInput' | 'onFocus' | 'onBlur' + type?: 'error' | 'success' | 'warning' + code?: + | 'ValidateError' + | 'ValidateSuccess' + | 'ValidateWarning' + | 'EffectError' + | 'EffectSuccess' + | 'EffectWarning' + messages?: string[] +> +`, + valid: 'boolean', + invalid: 'boolean', + pattern: "'editable' | 'disabled' | 'readOnly' | 'readPretty'", + display: "'visible' | 'hidden' | 'none'", + disabled: 'boolean', + readOnly: 'boolean', + readPretty: 'boolean', + visible: 'boolean', + hidden: 'boolean', + editable: 'boolean', + validateStatus: "'error' | 'warning' | 'success' | 'validating'", + validating: 'boolean', +} + export const ReactionsSetter: React.FC = (props) => { const [modalVisible, setModalVisible] = useState(false) const [innerVisible, setInnerVisible] = useState(false) @@ -65,7 +170,7 @@ export const ReactionsSetter: React.FC = (props) => { title={GlobalRegistry.getDesignerMessage( 'SettingComponents.ReactionsSetter.configureReactions' )} - width="65%" + width="70%" centered bodyStyle={{ padding: 10 }} transitionName="" @@ -106,25 +211,18 @@ export const ReactionsSetter: React.FC = (props) => { x-component="ArrayTable.Column" x-component-props={{ title: GlobalRegistry.getDesignerMessage( - 'SettingComponents.ReactionsSetter.variableName' + 'SettingComponents.ReactionsSetter.sourceField' ), width: 240, }} > @@ -133,29 +231,73 @@ export const ReactionsSetter: React.FC = (props) => { x-component="ArrayTable.Column" x-component-props={{ title: GlobalRegistry.getDesignerMessage( - 'SettingComponents.ReactionsSetter.sourceField' + 'SettingComponents.ReactionsSetter.sourceProperty' ), - width: 240, + width: 200, }} > + + + { + if (isVoidField(field)) return + field.query('.source').take((source) => { + if (isVoidField(source)) return + if ( + source.value && + !field.value && + !field.modified + ) { + field.value = + source.inputValues[1]?.props?.name || + `v_${uid()}` + } + }) + }} /> + @@ -163,15 +305,30 @@ export const ReactionsSetter: React.FC = (props) => { name="type" default="any" x-decorator="FormItem" - x-component="Input" - x-pattern="readPretty" + x-component="TypeView" x-reactions={(field) => { if (isVoidField(field)) return + const property = field + .query('.property') + .get('inputValues') field.query('.source').take((source) => { if (isVoidField(source)) return if (source.value) { - field.value = - source.inputValues[1]?.props?.type || 'any' + if ( + property[0] === 'value' || + property[0] === 'initialValue' || + property[0] === 'inputValue' + ) { + field.value = + source.inputValues[1]?.props?.type || 'any' + } else if (property[0] === 'inputValues') { + field.value = `any[]` + } else if (property[0]) { + field.value = + FieldStateValueTypes[property[0]] + } else { + field.value = 'any' + } } }) }} @@ -184,7 +341,7 @@ export const ReactionsSetter: React.FC = (props) => { 'SettingComponents.ReactionsSetter.operations' ), align: 'center', - width: 120, + width: 80, }} > = (props) => { x-component="MonacoInput" x-component-props={{ width: '100%', - height: 200, + height: 400, language: 'typescript', + helpCode: FulfillRunHelper, + options: { + minimap: { + enabled: false, + }, + }, + }} + x-reactions={(field) => { + const deps = field.query('dependencies').value() + if (Array.isArray(deps)) { + field.componentProps.extraLib = ` + declare var $deps : { + ${deps.map(({ name, type }) => { + if (!name) return '' + return `${name}?:${type || 'any'},` + })} + } + ` + } }} /> diff --git a/designable/setters/src/components/ReactionsSetter/properties.ts b/designable/setters/src/components/ReactionsSetter/properties.ts new file mode 100644 index 00000000000..25c2dffce91 --- /dev/null +++ b/designable/setters/src/components/ReactionsSetter/properties.ts @@ -0,0 +1,51 @@ +import { + BooleanHelper, + PatternHelper, + StringHelper, + AnyHelper, + DataSourceHelper, + DecoratorPropsHelper, + DisplayHelper, + ComponentPropsHelper, +} from './helpers' + +export const FieldProperties = [ + { + key: 'visible', + type: 'boolean', + helpCode: BooleanHelper, + }, + { key: 'hidden', type: 'boolean', helpCode: BooleanHelper }, + { + key: 'display', + type: '"visible" | "hidden" | "none"', + helpCode: DisplayHelper, + }, + { + key: 'pattern', + type: '"editable" | "disabled" | "readOnly" | "readPretty"', + helpCode: PatternHelper, + }, + { key: 'title', type: 'string', helpCode: StringHelper }, + { key: 'description', type: 'string', helpCode: StringHelper }, + { key: 'value', type: 'any', helpCode: AnyHelper }, + { key: 'initialValue', type: 'any', helpCode: AnyHelper }, + { key: 'required', type: 'boolean', helpCode: BooleanHelper }, + { + key: 'dataSource', + type: 'Array<{label?:string,value?:any}>', + helpCode: DataSourceHelper, + }, + { + key: 'component[1]', + token: 'componentProps', + type: 'object', + helpCode: ComponentPropsHelper, + }, + { + key: 'decorator[1]', + token: 'decoratorProps', + type: 'object', + helpCode: DecoratorPropsHelper, + }, +] diff --git a/designable/setters/src/components/ReactionsSetter/styles.less b/designable/setters/src/components/ReactionsSetter/styles.less index 96c51451b36..995d1cb8ad8 100644 --- a/designable/setters/src/components/ReactionsSetter/styles.less +++ b/designable/setters/src/components/ReactionsSetter/styles.less @@ -2,7 +2,7 @@ .dn-reactions-setter { width: 100%; - min-height: 523px; + min-height: 623px; ::-webkit-scrollbar { width: 5px; @@ -24,8 +24,8 @@ &-header { padding: 8px 10px !important; - background-color: @background-color-light !important; - border-bottom: 1px solid @border-color-split !important; + background-color: @background-color-light !important; + border-bottom: 1px solid @border-color-split !important; font-weight: 500 !important; .@{ant-prefix}-collapse-arrow { @@ -49,15 +49,15 @@ .dn-field-property-setter { display: flex; - height: 200px; + height: 300px; &-coder-wrapper { display: flex; - flex-direction: column; flex-grow: 2; height: 100%; - padding-left: 4px; + padding-left: 10px; position: relative; + flex-direction: column; } &-coder-start { @@ -65,18 +65,18 @@ line-height: 30px; margin-bottom: 4px; color: @text-color; - padding-left: 20px; font-weight: 300; flex-grow: 0; opacity: 0.96; + height: 31px; } &-coder-end { font-size: 18px; + height: 31px; color: @text-color; margin-top: 4px; margin-bottom: 4px; - padding-left: 20px; line-height: 30px; font-weight: 300; flex-grow: 0; @@ -86,5 +86,6 @@ &-coder { min-width: 0; flex-grow: 2; + padding-left: 10px; } -} \ No newline at end of file +} diff --git a/designable/setters/src/locales/en-US.ts b/designable/setters/src/locales/en-US.ts index cd20f808e9a..b509f1d3a08 100644 --- a/designable/setters/src/locales/en-US.ts +++ b/designable/setters/src/locales/en-US.ts @@ -21,13 +21,16 @@ export default { variableNameValidateMessage: 'This is not a standard variable name', pleaseInput: 'Please Input', sourceField: 'Source Field', - fieldValueType: 'Field Value Type', + sourceProperty: 'Field Property', + variableType: 'Variable Type', operations: 'Operations', addRelationField: 'Add Associated Field', propertyReactions: 'Property Reactions(Only Support Javascript Expression)', actionReactions: 'Action Reactions(Optional, Support Javascript Statement)', + visible: 'Show/None', + hidden: 'Show/UI Hidden', display: 'Display', pattern: 'Pattern', title: 'Title', @@ -41,6 +44,7 @@ export default { decorator: 'Decorator', decoratorProps: 'Decorator Props', pleaseSelect: 'Please Select', + expressionValueTypeIs: 'Expression value type is', }, }, }, diff --git a/designable/setters/src/locales/zh-CN.ts b/designable/setters/src/locales/zh-CN.ts index 9a54015e0fc..9b51ebf90e3 100644 --- a/designable/setters/src/locales/zh-CN.ts +++ b/designable/setters/src/locales/zh-CN.ts @@ -21,11 +21,14 @@ export default { variableNameValidateMessage: '不符合变量命名规则', pleaseInput: '请输入', sourceField: '来源字段', - fieldValueType: '字段值类型', + sourceProperty: '字段属性', + variableType: '变量类型', operations: '操作', addRelationField: '添加依赖字段', propertyReactions: '属性响应(仅支持JS表达式)', actionReactions: '动作响应(高级，可选，支持JS语句)', + visible: '显示/隐藏', + hidden: 'UI隐藏', display: '展示状态', pattern: 'UI形态', title: '标题', @@ -39,6 +42,7 @@ export default { decorator: '容器', decoratorProps: '容器属性', pleaseSelect: '请选择', + expressionValueTypeIs: '表达式值类型为', }, }, }, diff --git a/packages/json-schema/src/transformer.ts b/packages/json-schema/src/transformer.ts index 5f5e197ccb8..917aeadcd78 100644 --- a/packages/json-schema/src/transformer.ts +++ b/packages/json-schema/src/transformer.ts @@ -394,15 +394,18 @@ const getReactions = (schema: ISchema, options: ISchemaFieldFactoryOptions) => { const queryDependency = ( field: Formily.Core.Models.Field, - pattern: string + pattern: string, + property?: string ) => { const [target, path] = String(pattern).split(/\s*#\s*/) - return field.query(target).getIn(path || 'value') + return field.query(target).getIn(path || property || 'value') } const parseDependencies = ( field: Formily.Core.Models.Field, - dependencies: Array | object + dependencies: + | Array + | object ) => { if (isArr(dependencies)) { const results = [] @@ -411,7 +414,11 @@ const getReactions = (schema: ISchema, options: ISchemaFieldFactoryOptions) => { results.push(queryDependency(field, pattern)) } else if (isPlainObj(pattern)) { if (pattern.name && pattern.source) { - results[pattern.name] = queryDependency(field, pattern.source) + results[pattern.name] = queryDependency( + field, + pattern.source, + pattern.property + ) } } }) @@ -469,7 +476,7 @@ const getReactions = (schema: ISchema, options: ISchemaFieldFactoryOptions) => { setSchemaFieldState(field, reaction.fulfill, compile) } if (isStr(reaction.fulfill?.run)) { - compile(`{{async function(){${reaction.fulfill?.run}}}}`)() + compile(`{{function(){${reaction.fulfill?.run}}}}`)() } } else { if (reaction.target) { diff --git a/packages/json-schema/src/types.ts b/packages/json-schema/src/types.ts index 40713180118..799ac5815c3 100644 --- a/packages/json-schema/src/types.ts +++ b/packages/json-schema/src/types.ts @@ -59,7 +59,7 @@ export type SchemaEffectTypes = export type SchemaReaction = | { dependencies?: - | Array + | Array | Record when?: string | boolean target?: string diff --git a/yarn.lock b/yarn.lock index 570c461a65e..f8be7740884 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1156,12 +1156,12 @@ resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz#c3c5ae543c897caa9c2a68630bed355be5f9990f" integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ== -"@designable/core@0.4.7", "@designable/core@^0.4.7": - version "0.4.7" - resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.7.tgz#ecc9c7564618849898097cfc7b376e9de2a4c715" - integrity sha512-bPlSfF7bmYe8nxmJXd6L5G7kGtrlamfbEe/qr1Yo/qkOKS2mkJrkcQkO69lJ86seOK2mo+5a/IZGDjNvuFRTag== +"@designable/core@0.4.11", "@designable/core@^0.4.11": + version "0.4.11" + resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.11.tgz#9993358eba533333854a253ed49f693aeef6be6c" + integrity sha512-7v02adN3BPlJHL5Q9L20Wb8rNQJNMqROiZPnL3sXi0q4+/AJymMe3D7s5hhr2Py//yhi3wMNhlM48aanpB+j2Q== dependencies: - "@designable/shared" "0.4.7" + "@designable/shared" "0.4.11" "@formily/json-schema" "^2.0.0-beta.76" "@formily/path" "^2.0.0-beta.76" "@formily/reactive" "^2.0.0-beta.76" @@ -1178,25 +1178,25 @@ "@formily/reactive" "^2.0.0-beta.50" "@juggle/resize-observer" "^3.3.1" -"@designable/formily@^0.4.7": - version "0.4.7" - resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.7.tgz#6e7520ed79305ce39cc2b66a6b254427675201ea" - integrity sha512-ddf/N4ldArGGVVGgCE96ZNi/ok0RLpLPhW6dEsgafjO2Y4YDXT4CJUG41ZAd2CycGYayqLBUdQlDo7UIuAdZCw== +"@designable/formily@^0.4.11": + version "0.4.11" + resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.11.tgz#e0ef7b0086ace2e09321a0f78b9000800159d52f" + integrity sha512-8FuunjLVvVZFefIl3hU1eAMmZUNTPIQeNp3TlDaHyupih/4YkjjM5gFyK+Q2vJApcm1/r+ZsZCb1G2/NJ3BEzg== dependencies: - "@designable/core" "0.4.7" - "@designable/shared" "0.4.7" + "@designable/core" "0.4.11" + "@designable/shared" "0.4.11" "@formily/core" "^2.0.0-beta.76" "@formily/json-schema" "^2.0.0-beta.76" -"@designable/react-settings-form@^0.4.7": - version "0.4.7" - resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.7.tgz#fdc7278e27ce770ce4fd9efb24f22a7fe77bcfbe" - integrity sha512-axlPIchR6KxlVuOVzaZnMaG43eNv+/bcq+LfilIiJsGzq8J942dD7IBStAn682Tv9WUAw8dLcAw3I3OSD3QOQw== +"@designable/react-settings-form@^0.4.11": + version "0.4.11" + resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.11.tgz#d85181edc097c078746ec4365171b7891fb357fd" + integrity sha512-FgMwh892vUZ+JO3FjTqnfRyHQqDOPt69g7KLSgd6VfVq/ImXnDWbqmAF4BGoKM7g+QS3xBgcmQAsDFVxTmNlfw== dependencies: "@babel/parser" "^7.14.7" - "@designable/core" "0.4.7" - "@designable/react" "0.4.7" - "@designable/shared" "0.4.7" + "@designable/core" "0.4.11" + "@designable/react" "0.4.11" + "@designable/shared" "0.4.11" "@formily/antd" "^2.0.0-beta.76" "@formily/core" "^2.0.0-beta.76" "@formily/react" "^2.0.0-beta.76" @@ -1209,13 +1209,13 @@ react-color "^2.19.3" react-tiny-popover "^6.0.5" -"@designable/react@0.4.7", "@designable/react@^0.4.7": - version "0.4.7" - resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.7.tgz#7bf427cd40843815793f656d966c73f57580032e" - integrity sha512-mnfinCKi8Eh1+W+LlVorKhMhwBY/0KrATjB8YANSqCbiIaOOBbIoMcLmyjSzmonRmRTqGxOZJIaImFws8q8Y9g== +"@designable/react@0.4.11", "@designable/react@^0.4.11": + version "0.4.11" + resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.11.tgz#2d0791c0493b07822ee1ab73bd3569be0e81ad00" + integrity sha512-+pSMoe+eeGWhNpTH1vkKU9g4knUzOjZncSHmxUSvBvXJz+ALlXUwGLjDeHIXTPbYhQjntM3czlKpQhnJ7addVg== dependencies: - "@designable/core" "0.4.7" - "@designable/shared" "0.4.7" + "@designable/core" "0.4.11" + "@designable/shared" "0.4.11" "@formily/reactive" "^2.0.0-beta.76" "@formily/reactive-react" "^2.0.0-beta.76" "@juggle/resize-observer" "^3.3.1" @@ -1227,10 +1227,10 @@ dependencies: requestidlecallback "^0.3.0" -"@designable/shared@0.4.7", "@designable/shared@^0.4.7": - version "0.4.7" - resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.7.tgz#33ca3913e38d7319c2d29243372baf91bc709476" - integrity sha512-L4YEyP1YgXegpVbxIwwI1zmL56Wkr/5ZxQnPtT5Y8ypwH9PgOTzi4Iwml2YlR3LCWuiOfC09oVfAhcDrEG1nOg== +"@designable/shared@0.4.11": + version "0.4.11" + resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.11.tgz#fa1f5b789385133f736b20b5ec2cf9a14b138975" + integrity sha512-diWZ8sTFLr/g2FXUWXFiCv+GQvxwkD5TFiSaKUAiZPwxOTEL4drTZHtTybvCQ7q8C9Asnnf7LgQc2Hxa0s91xw== dependencies: requestidlecallback "^0.3.0"