diff --git a/docs/Examples/antd/Layout.md b/docs/Examples/antd/Layout.md
index c0c1b27336d..a19533af5f6 100644
--- a/docs/Examples/antd/Layout.md
+++ b/docs/Examples/antd/Layout.md
@@ -143,7 +143,7 @@ ReactDOM.render(, document.getElementById('root'))
#### Demo 示例
```jsx
-import React from 'react'
+import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import {
SchemaForm,
@@ -163,45 +163,61 @@ import { Button } from 'antd'
import Printer from '@uform/printer'
import 'antd/dist/antd.css'
-const App = () => (
-
- console.log(v)}>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+const App = () => {
+ const [state, setState] = useState({ editable: true })
+ return (
+
+ console.log(v)}
+ >
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 提交 重置
-
-
-
-)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+ 重置
+
+
+
+ )
+}
ReactDOM.render(, document.getElementById('root'))
```
diff --git a/docs/Examples/next/Layout.md b/docs/Examples/next/Layout.md
index c4ad2800400..630e0e6666c 100644
--- a/docs/Examples/next/Layout.md
+++ b/docs/Examples/next/Layout.md
@@ -137,7 +137,7 @@ ReactDOM.render(, document.getElementById('root'))
#### Demo 示例
```jsx
-import React from 'react'
+import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import {
SchemaForm,
@@ -155,42 +155,58 @@ import { Button } from '@alifd/next'
import Printer from '@uform/printer'
import '@alifd/next/dist/next.css'
-const App = () => (
-
- console.log(v)}>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 提交 重置
-
-
-
-)
+const App = () => {
+ const [state, setState] = useState({ editable: true })
+ return (
+
+ console.log(v)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+
+ 重置
+
+
+
+ )
+}
ReactDOM.render(, document.getElementById('root'))
```
diff --git a/packages/antd/src/components/layout.tsx b/packages/antd/src/components/layout.tsx
index 40e922ff245..e7a8b8ec8e0 100644
--- a/packages/antd/src/components/layout.tsx
+++ b/packages/antd/src/components/layout.tsx
@@ -1,5 +1,5 @@
import React, { Component, useEffect, useRef } from 'react'
-import { createVirtualBox } from '@uform/react'
+import { createVirtualBox, createControllerBox } from '@uform/react'
import { toArr } from '@uform/utils'
import { IFormItemGridProps } from '@uform/types'
import { Card, Row, Col } from 'antd'
@@ -228,83 +228,89 @@ export const FormBlock = createVirtualBox(
`
)
-export const FormTextBox = createVirtualBox(
+export const FormTextBox = createControllerBox(
'text-box',
- styled(
- ({
- title,
- help,
- gutter,
- className,
- text,
- name,
- extra,
- children,
- ...props
- }) => {
- const ref: React.RefObject = useRef()
- const arrChildren = toArr(children)
- const split = text.split('%s')
-
- useEffect(() => {
- if (ref.current) {
- const eles = ref.current.querySelectorAll('.text-box-field')
- eles.forEach((el: HTMLElement) => {
- const ctrl = el.querySelector(
- '.ant-form-item-control>*:not(.ant-form-item-space)'
- )
- if (ctrl) {
- el.style.width = getComputedStyle(ctrl).width
- }
- })
- }
- }, [])
+ styled(({ children, schema, className }) => {
+ const { title, help, text, name, extra, ...props } = schema['x-props']
+ const ref: React.RefObject = useRef()
+ const arrChildren = toArr(children)
+ const split = text.split('%s')
+ useEffect(() => {
+ if (ref.current) {
+ const eles = ref.current.querySelectorAll('.text-box-field')
+ eles.forEach((el: HTMLElement) => {
+ const ctrl = el.querySelector(
+ '.ant-form-item-control>*:not(.ant-form-item-space)'
+ )
+ if (ctrl) {
+ el.style.width = getComputedStyle(ctrl).width
+ }
+ })
+ }
+ }, [])
- let index = 0
- const newChildren = split.reduce((buf, item, key) => {
- return buf.concat(
+ let index = 0
+ const newChildren = split.reduce((buf, item, key) => {
+ return buf.concat(
+ item ? (
{item}
- ,
+
+ ) : null,
+ arrChildren[key] ? (
{arrChildren[key]}
- )
- }, [])
-
- if (!title) {
- return (
-
- {newChildren}
-
- )
- }
+ ) : null
+ )
+ }, [])
- return React.createElement(
- FormLayoutItem,
- {
- label: title,
- noMinHeight: true,
- id: name,
- extra,
- help,
- ...props
- },
+ if (!title) {
+ return (
{newChildren}
)
}
- )`
+
+ return React.createElement(
+ FormLayoutItem,
+ {
+ label: title,
+ noMinHeight: true,
+ id: name,
+ extra,
+ help,
+ ...props
+ },
+
+ {newChildren}
+
+ )
+ })`
display: flex;
.text-box-words {
font-size: 14px;
line-height: 34px;
color: #333;
+ ${props => {
+ const { editable, schema } = props
+ const { gutter } = schema['x-props']
+ if (!editable) {
+ return {
+ margin: 0
+ }
+ }
+ return {
+ margin: `0 ${gutter === 0 || gutter ? gutter : 10}px`
+ }
+ }}
+ }
+ .text-box-words:nth-child(1) {
+ margin-left: 0;
}
.text-box-field {
display: inline-block;
- margin: 0 ${props => props.gutter || 10}px;
}
`
)
diff --git a/packages/next/src/components/layout.tsx b/packages/next/src/components/layout.tsx
index 0978c4458f7..bb90c4e5690 100644
--- a/packages/next/src/components/layout.tsx
+++ b/packages/next/src/components/layout.tsx
@@ -1,5 +1,5 @@
import React, { Component, useEffect, useRef } from 'react'
-import { createVirtualBox } from '@uform/react'
+import { createVirtualBox, createControllerBox } from '@uform/react'
import { toArr } from '@uform/utils'
import { Grid } from '@alifd/next'
import Card from '@alifd/next/lib/card'
@@ -211,80 +211,87 @@ export const FormBlock = createVirtualBox(
`
)
-export const FormTextBox = createVirtualBox(
+export const FormTextBox = createControllerBox(
'text-box',
- styled(
- ({
- title,
- help,
- gutter,
- className,
- text,
- name,
- extra,
- children,
- ...props
- }) => {
- const ref: React.RefObject = useRef()
- const arrChildren = toArr(children)
- const split = text.split('%s')
- let index = 0
- useEffect(() => {
- if (ref.current) {
- const eles = ref.current.querySelectorAll('.text-box-field')
- eles.forEach((el: HTMLElement) => {
- const ctrl = el.querySelector(
- '.next-form-item-control>*:not(.next-form-item-space)'
- )
- if (ctrl) {
- el.style.width = getComputedStyle(ctrl).width
- }
- })
- }
- }, [])
- const newChildren = split.reduce((buf, item, key) => {
- return buf.concat(
+ styled(({ children, schema, className }) => {
+ const { title, help, text, name, extra, ...props } = schema['x-props']
+ const ref: React.RefObject = useRef()
+ const arrChildren = toArr(children)
+ const split = text.split('%s')
+ let index = 0
+ useEffect(() => {
+ if (ref.current) {
+ const eles = ref.current.querySelectorAll('.text-box-field')
+ eles.forEach((el: HTMLElement) => {
+ const ctrl = el.querySelector(
+ '.next-form-item-control>*:not(.next-form-item-space)'
+ )
+ if (ctrl) {
+ el.style.width = getComputedStyle(ctrl).width
+ }
+ })
+ }
+ }, [])
+ const newChildren = split.reduce((buf, item, key) => {
+ return buf.concat(
+ item ? (
{item}
- ,
+
+ ) : null,
+ arrChildren[key] ? (
{arrChildren[key]}
- )
- }, [])
-
- if (!title)
- return (
-
- {newChildren}
-
- )
+ ) : null
+ )
+ }, [])
- return React.createElement(
- FormLayoutItem,
- {
- label: title,
- noMinHeight: true,
- id: name,
- extra,
- help,
- ...props
- },
+ if (!title)
+ return (
{newChildren}
)
- }
- )`
+
+ return React.createElement(
+ FormLayoutItem,
+ {
+ label: title,
+ noMinHeight: true,
+ id: name,
+ extra,
+ help,
+ ...props
+ },
+
+ {newChildren}
+
+ )
+ })`
display: flex;
.text-box-words {
font-size: 12px;
line-height: 28px;
color: #333;
+ ${props => {
+ const { editable, schema } = props
+ const { gutter } = schema['x-props']
+ if (!editable) {
+ return {
+ margin: 0
+ }
+ }
+ return {
+ margin: `0 ${gutter === 0 || gutter ? gutter : 10}px`
+ }
+ }}
+ }
+ .text-box-words:nth-child(1) {
+ margin-left: 0;
}
.text-box-field {
display: inline-block;
- margin: 0 ${props => props.gutter || 10}px;
}
`
)