Skip to content

Commit

Permalink
fix FormTextBox margin value (#237)
Browse files Browse the repository at this point in the history 
* fix: FormTextBox style

* fix: set margin to zero when editable is false

* docs(Layout): add FormTextBox demo

* fix(antd&next): remove margin-left on first text-box-words element
  • Loading branch information
@anyuxuan @janryWang
anyuxuan authored and janryWang committed Aug 6, 2019
1 parent eb54c50 commit 6148e33
Show file tree
Hide file tree
Showing 4 changed files with 234 additions and 189 deletions.
94 changes: 55 additions & 39 deletions docs/Examples/antd/Layout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ ReactDOM.render(<App />, document.getElementById('root'))
#### Demo 示例

```jsx
import React from 'react'
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import {
SchemaForm,
Expand All @@ -163,45 +163,61 @@ import { Button } from 'antd'
import Printer from '@uform/printer'
import 'antd/dist/antd.css'

const App = () => (
<Printer>
<SchemaForm labelCol={8} wrapperCol={6} onSubmit={v => console.log(v)}>
<FormCard title="基本信息">
​ <Field name="aaa" type="string" title="字段1" />
​ <Field name="bbb" type="number" title="字段2" />
​ <Field name="ccc" type="date" title="字段3" />​
</FormCard>
​ <FormCard title="详细信息">
<FormLayout labelCol={8} wrapperCol={12}>
<FormItemGrid title="字段3" gutter={10} cols={[6, 11]}>
​ <Field name="ddd" type="number" />
​ <Field name="eee" type="date" />​
</FormItemGrid>
<Field type="object" name="mmm" title="对象字段">
<FormItemGrid gutter={10} cols={[6, 11]}>
​ <Field name="ddd1" default={123} type="number" />
​ <Field name="[startDate,endDate]" type="daterange" />​
const App = () => {
const [state, setState] = useState({ editable: true })
return (
<Printer>
<SchemaForm
editable={state.editable}
labelCol={8}
wrapperCol={6}
onSubmit={v => console.log(v)}
>
<FormCard title="基本信息">
​<Field name="aaa" type="string" title="字段1" />
​<Field name="bbb" type="number" title="字段2" />
​<Field name="ccc" type="date" title="字段3" />​
</FormCard>
​<FormCard title="详细信息">
<FormLayout labelCol={8} wrapperCol={12}>
<FormItemGrid title="字段3" gutter={10} cols={[6, 11]}>
​<Field name="ddd" type="number" />
​<Field name="eee" type="date" />​
</FormItemGrid>
</Field>
</FormLayout>
<FormLayout labelCol={8} wrapperCol={16}>
<FormTextBox title="文本串联" text="订%s元/票 退%s元/票 改%s元/票">
<Field type="number" required name="aa1" />
<Field type="number" required name="aa2" />
<Field type="number" required name="aa3" />
</FormTextBox>
</FormLayout>
<Field name="aas" type="string" title="字段4" />​
<FormBlock title="区块">
​ <Field name="ddd2" type="string" title="字段5" />​
<Field name="eee2" type="string" title="字段6" />​
</FormBlock>
</FormCard>​<FormButtonGroup offset={8} sticky>
​ <Submit>提交</Submit>​ <Reset>重置</Reset>​
</FormButtonGroup>
</SchemaForm>
</Printer>
)
<Field type="object" name="mmm" title="对象字段">
<FormItemGrid gutter={10} cols={[6, 11]}>
​<Field name="ddd1" default={123} type="number" />
​<Field name="[startDate,endDate]" type="daterange" />​
</FormItemGrid>
</Field>
</FormLayout>
<FormLayout labelCol={8} wrapperCol={16}>
<FormTextBox title="文本串联" text="订%s元/票 退%s元/票 改%s元/票">
<Field type="number" default={10} required name="aa1" />
<Field type="number" default={20} required name="aa2" />
<Field type="number" default={30} required name="aa3" />
</FormTextBox>
</FormLayout>
<Field name="aas" type="string" title="字段4" />​
<FormBlock title="区块">
​<Field name="ddd2" type="string" title="字段5" />​
<Field name="eee2" type="string" title="字段6" />​
</FormBlock>
</FormCard>
​<FormButtonGroup offset={8} sticky>
​ <Submit>提交</Submit>​
<Button
type="primary"
onClick={() => setState({ editable: !state.editable })}
>
{state.editable ? '详情' : '编辑'}
</Button>
<Reset>重置</Reset>​
</FormButtonGroup>
</SchemaForm>
</Printer>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
```

Expand Down
90 changes: 53 additions & 37 deletions docs/Examples/next/Layout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ ReactDOM.render(<App />, document.getElementById('root'))
#### Demo 示例

```jsx
import React from 'react'
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import {
SchemaForm,
Expand All @@ -155,42 +155,58 @@ import { Button } from '@alifd/next'
import Printer from '@uform/printer'
import '@alifd/next/dist/next.css'

const App = () => (
<Printer>
<SchemaForm labelCol={8} wrapperCol={6} onSubmit={v => console.log(v)}>
<FormCard title="基本信息">
​ <Field name="aaa" type="string" title="字段1" />
​ <Field name="bbb" type="number" title="字段2" />
​ <Field name="ccc" type="date" title="字段3" />​
</FormCard>
​ <FormCard title="详细信息">
<FormItemGrid title="字段3" gutter={10} cols={[11, 15]}>
​ <Field name="ddd" type="number" />
​ <Field name="eee" type="date" />​
</FormItemGrid>
<Field type="object" name="mmm" title="对象字段">
<FormItemGrid gutter={10} cols={[11, 15]}>
​ <Field name="ddd1" default={123} type="number" />
​ <Field name="[startDate,endDate]" type="daterange" />​
</FormItemGrid>
</Field>
<FormLayout labelCol={8} wrapperCol={16}>
<FormTextBox title="文本串联" text="订%s元/票 退%s元/票 改%s元/票" gutter={8}>
<Field type="string" required name="aa1" x-props={{style:{width:80}}} description="简单描述" />
<Field type="number" required name="aa2" description="简单描述" />
<Field type="number" required name="aa3" description="简单描述" />
</FormTextBox>
</FormLayout>
<Field name="aas" type="string" title="字段4" />​<FormBlock title="区块">
​ <Field name="ddd2" type="string" title="字段5" />​
<Field name="eee2" type="string" title="字段6" />​
</FormBlock>
</FormCard>​<FormButtonGroup offset={8} sticky>
​ <Submit>提交</Submit>​ <Reset>重置</Reset>​
</FormButtonGroup>
</SchemaForm>
</Printer>
)
const App = () => {
const [state, setState] = useState({ editable: true })
return (
<Printer>
<SchemaForm
editable={state.editable}
labelCol={8}
wrapperCol={6}
onSubmit={v => console.log(v)}
>
<FormCard title="基本信息">
<Field name="aaa" type="string" title="字段1" />
<Field name="bbb" type="number" title="字段2" />
<Field name="ccc" type="date" title="字段3" />​
</FormCard>
<FormCard title="详细信息">
<FormItemGrid title="字段3" gutter={10} cols={[11, 15]}>
​<Field name="ddd" type="number" />
​<Field name="eee" type="date" />​
</FormItemGrid>
<Field type="object" name="mmm" title="对象字段">
<FormItemGrid gutter={10} cols={[11, 15]}>
​<Field name="ddd1" default={123} type="number" />
​<Field name="[startDate,endDate]" type="daterange" />​
</FormItemGrid>
</Field>
<FormLayout labelCol={8} wrapperCol={16}>
<FormTextBox title="文本串联" text="订%s元/票 退%s元/票 改%s元/票" gutter={8}>
<Field type="string" default={10} required name="aa1" x-props={{style:{width:80}}} description="简单描述" />
<Field type="number" default={20} required name="aa2" description="简单描述" />
<Field type="number" default={30} required name="aa3" description="简单描述" />
</FormTextBox>
</FormLayout>
<Field name="aas" type="string" title="字段4" />​<FormBlock title="区块">
<Field name="ddd2" type="string" title="字段5" />​
<Field name="eee2" type="string" title="字段6" />​
</FormBlock>
</FormCard>​
<FormButtonGroup offset={8} sticky>
​<Submit>提交</Submit>​
<Button
type="primary"
onClick={() => setState({ editable: !state.editable })}
>
{state.editable ? '详情' : '编辑'}
</Button>
<Reset>重置</Reset>​
</FormButtonGroup>
</SchemaForm>
</Printer>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
```

Expand Down
120 changes: 63 additions & 57 deletions packages/antd/src/components/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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<HTMLDivElement> = 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<HTMLDivElement> = 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 ? (
<span key={index++} className="text-box-words">
{item}
</span>,
</span>
) : null,
arrChildren[key] ? (
<div key={index++} className="text-box-field">
{arrChildren[key]}
</div>
)
}, [])

if (!title) {
return (
<div className={className} ref={ref}>
{newChildren}
</div>
)
}
) : null
)
}, [])

return React.createElement(
FormLayoutItem,
{
label: title,
noMinHeight: true,
id: name,
extra,
help,
...props
},
if (!title) {
return (
<div className={className} ref={ref}>
{newChildren}
</div>
)
}
)`

return React.createElement(
FormLayoutItem,
{
label: title,
noMinHeight: true,
id: name,
extra,
help,
...props
},
<div className={className} ref={ref}>
{newChildren}
</div>
)
})`
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;
}
`
)
Loading

0 comments on commit 6148e33

Please sign in to comment.