feat(setters): support declaration to ReactionsSetter (#1805)

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",

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",

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<IFieldPropertySetterProps> = (
   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<IFieldPropertySetterProps> = (
     )
   }
 
+  const currentProperty = FieldProperties.find(
+    (item) => item.key === selectKeys[0]
+  )
+
   return (
     <div className={prefix}>
       <Menu
         mode="vertical"
         style={{
-          width: 240,
-          height: 200,
+          width: 200,
+          height: 300,
           paddingRight: 4,
           overflowY: 'auto',
           overflowX: 'hidden',
@@ -70,11 +65,13 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
         }}
       >
         {FieldProperties.map((key) => {
-          if (Array.isArray(key)) {
+          if (isPlainObj(key)) {
             return (
-              <Menu.Item key={key[0]}>
+              <Menu.Item key={key.key}>
                 <TextWidget
-                  token={`SettingComponents.ReactionsSetter.${key[1]}`}
+                  token={`SettingComponents.ReactionsSetter.${
+                    key.token || key.key
+                  }`}
                 />
               </Menu.Item>
             )
@@ -87,17 +84,41 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
         })}
       </Menu>
       <div className={prefix + '-coder-wrapper'}>
-        <div
-          className={prefix + '-coder-start'}
-        >{`$self.${selectKeys[0]} = {{`}</div>
+        <div className={prefix + '-coder-start'}>
+          {`$self.${selectKeys[0]} = (`}
+          <span
+            style={{
+              fontSize: 14,
+              marginLeft: 10,
+              color: '#888',
+              fontWeight: 'normal',
+            }}
+          >
+            {'//'}{' '}
+            <TextWidget token="SettingComponents.ReactionsSetter.expressionValueTypeIs" />{' '}
+            {'`'}
+            {currentProperty?.type}
+            {'`'}
+          </span>
+        </div>
         <div className={prefix + '-coder'}>
           <MonacoInput
             key={selectKeys[0]}
             language="javascript.expression"
+            extraLib={props.extraLib}
+            helpCode={template(currentProperty?.helpCode)}
+            value={parseExpression(value[selectKeys[0]])}
             options={{
-              fontSize: 14,
+              lineNumbers: 'off',
+              wordWrap: 'on',
+              glyphMargin: false,
+              folding: false,
+              lineDecorationsWidth: 0,
+              lineNumbersMinChars: 0,
+              minimap: {
+                enabled: false,
+              },
             }}
-            value={parseExpression(value[selectKeys[0]])}
             onChange={(expression) => {
               props.onChange?.(
                 filterEmpty({
@@ -108,7 +129,7 @@ export const FieldPropertySetter: React.FC<IFieldPropertySetterProps> = (
             }}
           />
         </div>
-        <div className={prefix + '-coder-end'}>{`}}`}</div>
+        <div className={prefix + '-coder-end'}>{`)`}</div>
       </div>
     </div>
   )

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`
+  )
+})