Skip to content

Commit

Permalink
refactor(project): support more features for page description (#2099)
Browse files Browse the repository at this point in the history
  • Loading branch information
@janryWang
janryWang committed Sep 13, 2021
1 parent 6463371 commit 6162ad5
Show file tree
Hide file tree
Showing 76 changed files with 3,053 additions and 1,507 deletions.
1 change: 1 addition & 0 deletions .vscode/cspell.json
View file
Expand Up @@ -3,6 +3,7 @@
"language": "en",
"ignoreWords": [
"autorun",
"mutators",
"Formily",
"formily",
"untrack",
Expand Down
142 changes: 115 additions & 27 deletions designable/antd/src/components/DesignableField/index.tsx
View file
Expand Up @@ -16,8 +16,8 @@ import {
ReactionsSetter,
ValidatorSetter,
} from '@formily/designable-setters'
import { FormTab } from '@formily/antd'
import { clone } from '@formily/shared'
import { FormTab, FormItem } from '@formily/antd'
import { isArr, isStr, each, reduce } from '@formily/shared'
import { FormItemSwitcher } from '../FormItemSwitcher'
import { DesignableObject } from '../DesignableObject'
import { createOptions } from './options'
Expand All @@ -27,6 +27,113 @@ import * as defaultSchemas from '../../schemas'

Schema.silent()

const SchemaStateMap = {
title: 'title',
description: 'description',
default: 'value',
enum: 'dataSource',
readOnly: 'readOnly',
writeOnly: 'editable',
required: 'required',
'x-content': 'content',
'x-value': 'value',
'x-editable': 'editable',
'x-disabled': 'disabled',
'x-read-pretty': 'readPretty',
'x-read-only': 'readOnly',
'x-visible': 'visible',
'x-hidden': 'hidden',
'x-display': 'display',
'x-pattern': 'pattern',
}

const NeedShownExpression = {
title: true,
description: true,
default: true,
'x-content': true,
'x-value': true,
}

const isExpression = (val: any) => isStr(val) && /^\{\{.*\}\}$/.test(val)

const filterExpression = (val: any) => {
if (typeof val === 'object') {
const isArray = isArr(val)
const results = reduce(
val,
(buf: any, value, key) => {
if (isExpression(value)) {
return buf
} else {
const results = filterExpression(value)
if (results === undefined || results === null) return buf
if (isArray) {
return buf.concat([results])
}
buf[key] = results
return buf
}
},
isArray ? [] : {}
)
return results
}
if (isExpression(val)) {
return
}
return val
}

const toDesignableFieldProps = (
schema: ISchema,
components: any,
nodeIdAttrName: string,
id: string
) => {
const results: any = {}
each(SchemaStateMap, (fieldKey, schemaKey) => {
const value = schema[schemaKey]
if (isExpression(value)) {
if (!NeedShownExpression[schemaKey]) return
if (value) {
results[fieldKey] = value
return
}
} else if (value) {
results[fieldKey] = filterExpression(value)
}
})
if (!components['FormItem']) {
components['FormItem'] = FormItem
}
const decorator =
schema['x-decorator'] && FormPath.getIn(components, schema['x-decorator'])
const component =
schema['x-component'] && FormPath.getIn(components, schema['x-component'])
const decoratorProps = schema['x-decorator-props'] || {}
const componentProps = schema['x-component-props'] || {}

if (decorator) {
results.decorator = [decorator, { ...decoratorProps }]
}
if (component) {
results.component = [component, { ...componentProps }]
}
if (decorator) {
FormPath.setIn(results['decorator'][1], nodeIdAttrName, id)
} else if (component) {
FormPath.setIn(results['component'][1], nodeIdAttrName, id)
}
results.title = results.title && (
<span data-content-editable="title">{results.title}</span>
)
results.description = results.description && (
<span data-content-editable="description">{results.description}</span>
)
return results
}

export const createDesignableField = (
options: IDesignableFieldFactoryProps
) => {
Expand Down Expand Up @@ -301,31 +408,12 @@ export const createDesignableField = (
const node = useTreeNode()
if (!node) return null

const getFieldProps = () => {
const base = new Schema(clone(props)).compile()
const fieldProps = base.toFieldProps({
components: realOptions.components,
})
if (fieldProps.decorator?.[0]) {
fieldProps.decorator[1] = fieldProps.decorator[1] || {}
FormPath.setIn(
fieldProps.decorator[1],
designer.props.nodeIdAttrName,
node.id
)
} else if (fieldProps.component?.[0]) {
fieldProps.component[1] = fieldProps.component[1] || {}
FormPath.setIn(
fieldProps.component[1],
designer.props.nodeIdAttrName,
node.id
)
}
fieldProps.value = fieldProps.initialValue
return fieldProps as any
}

const fieldProps = getFieldProps()
const fieldProps = toDesignableFieldProps(
props,
realOptions.components,
designer.props.nodeIdAttrName,
node.id
)
if (props.type === 'object') {
return (
<DesignableObject>
Expand Down
142 changes: 115 additions & 27 deletions designable/next/src/components/DesignableField/index.tsx
View file
Expand Up @@ -16,8 +16,8 @@ import {
ReactionsSetter,
ValidatorSetter,
} from '@formily/designable-setters'
import { FormTab } from '@formily/next'
import { clone } from '@formily/shared'
import { FormTab, FormItem } from '@formily/antd'
import { isArr, isStr, each, reduce } from '@formily/shared'
import { FormItemSwitcher } from '../FormItemSwitcher'
import { DesignableObject } from '../DesignableObject'
import { createOptions } from './options'
Expand All @@ -27,6 +27,113 @@ import * as defaultSchemas from '../../schemas'

Schema.silent()

const SchemaStateMap = {
title: 'title',
description: 'description',
default: 'value',
enum: 'dataSource',
readOnly: 'readOnly',
writeOnly: 'editable',
required: 'required',
'x-content': 'content',
'x-value': 'value',
'x-editable': 'editable',
'x-disabled': 'disabled',
'x-read-pretty': 'readPretty',
'x-read-only': 'readOnly',
'x-visible': 'visible',
'x-hidden': 'hidden',
'x-display': 'display',
'x-pattern': 'pattern',
}

const NeedShownExpression = {
title: true,
description: true,
default: true,
'x-content': true,
'x-value': true,
}

const isExpression = (val: any) => isStr(val) && /^\{\{.*\}\}$/.test(val)

const filterExpression = (val: any) => {
if (typeof val === 'object') {
const isArray = isArr(val)
const results = reduce(
val,
(buf: any, value, key) => {
if (isExpression(value)) {
return buf
} else {
const results = filterExpression(value)
if (results === undefined || results === null) return buf
if (isArray) {
return buf.concat([results])
}
buf[key] = results
return buf
}
},
isArray ? [] : {}
)
return results
}
if (isExpression(val)) {
return
}
return val
}

const toDesignableFieldProps = (
schema: ISchema,
components: any,
nodeIdAttrName: string,
id: string
) => {
const results: any = {}
each(SchemaStateMap, (fieldKey, schemaKey) => {
const value = schema[schemaKey]
if (isExpression(value)) {
if (!NeedShownExpression[schemaKey]) return
if (value) {
results[fieldKey] = value
return
}
} else if (value) {
results[fieldKey] = filterExpression(value)
}
})
if (!components['FormItem']) {
components['FormItem'] = FormItem
}
const decorator =
schema['x-decorator'] && FormPath.getIn(components, schema['x-decorator'])
const component =
schema['x-component'] && FormPath.getIn(components, schema['x-component'])
const decoratorProps = schema['x-decorator-props'] || {}
const componentProps = schema['x-component-props'] || {}

if (decorator) {
results.decorator = [decorator, { ...decoratorProps }]
}
if (component) {
results.component = [component, { ...componentProps }]
}
if (decorator) {
FormPath.setIn(results['decorator'][1], nodeIdAttrName, id)
} else if (component) {
FormPath.setIn(results['component'][1], nodeIdAttrName, id)
}
results.title = results.title && (
<span data-content-editable="title">{results.title}</span>
)
results.description = results.description && (
<span data-content-editable="description">{results.description}</span>
)
return results
}

export const createDesignableField = (
options: IDesignableFieldFactoryProps
) => {
Expand Down Expand Up @@ -300,31 +407,12 @@ export const createDesignableField = (
const node = useTreeNode()
if (!node) return null

const getFieldProps = () => {
const base = new Schema(clone(props)).compile()
const fieldProps = base.toFieldProps({
components: realOptions.components,
})
if (fieldProps.decorator?.[0]) {
fieldProps.decorator[1] = fieldProps.decorator[1] || {}
FormPath.setIn(
fieldProps.decorator[1],
designer.props.nodeIdAttrName,
node.id
)
} else if (fieldProps.component?.[0]) {
fieldProps.component[1] = fieldProps.component[1] || {}
FormPath.setIn(
fieldProps.component[1],
designer.props.nodeIdAttrName,
node.id
)
}
fieldProps.value = fieldProps.initialValue
return fieldProps as any
}

const fieldProps = getFieldProps()
const fieldProps = toDesignableFieldProps(
props,
realOptions.components,
designer.props.nodeIdAttrName,
node.id
)
if (props.type === 'object') {
return (
<DesignableObject>
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Expand Up @@ -6,7 +6,8 @@
},
"workspaces": [
"packages/*",
"devtools/*"
"devtools/*",
"designable/*"
],
"scripts": {
"bootstrap": "lerna bootstrap",
Expand Down Expand Up @@ -72,7 +73,7 @@
"@typescript-eslint/eslint-plugin": "^4.9.1",
"@typescript-eslint/parser": "^4.8.2",
"@umijs/plugin-sass": "^1.1.1",
"@vue/test-utils": "^1.2.0",
"@vue/test-utils": "1.0.0-beta.22",
"antd": "^4.0.0",
"chalk": "^2.4.2",
"chokidar": "^2.1.2",
Expand Down Expand Up @@ -190,4 +191,4 @@
"dependencies": {
"@ant-design/icons": "^4.0.2"
}
}
}
2 changes: 1 addition & 1 deletion packages/antd/src/array-collapse/index.tsx
View file
Expand Up @@ -135,7 +135,7 @@ export const ArrayCollapse: ComposedArrayCollapse = observer(
const path = field.address.concat(index)
const errors = field.form.queryFeedbacks({
type: 'error',
address: `*(${path},${path}.*)`,
address: `${path}.**`,
})
return (
<ArrayBase.Item index={index}>
Expand Down
2 changes: 1 addition & 1 deletion packages/antd/src/array-tabs/index.tsx
View file
Expand Up @@ -37,7 +37,7 @@ export const ArrayTabs: React.FC<TabsProps> = observer((props) => {
const path = field.address.concat(index)
const errors = field.form.queryFeedbacks({
type: 'error',
address: `*(${path},${path}.*)`,
address: `${path}.**`,
})
if (errors.length) {
return (
Expand Down

0 comments on commit 6162ad5

Please sign in to comment.