Skip to content

Commit 712aba9

Browse files
janryWangjanryWang
committed
refactor(grid): use data-grid-span for base grid span
1 parent 3c857a2 commit 712aba9

File tree

12 files changed

+106
-155
lines changed

12 files changed

+106
-155
lines changed

‎packages/antd/docs/components/FormGrid.md

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -361,17 +361,3 @@ note:
361361
| Property name | Type | Description | Default value |
362362
| ------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | ------------- |
363363
| gridSpan | number | The number of columns spanned by the element, if it is -1, it will automatically fill the cell across columns in reverse | 1 |
364-
365-
### FormGrid.useGridSpan
366-
367-
#### Description
368-
369-
Calculate the correct span based on the width of the container to prevent element overflow
370-
371-
#### Signature
372-
373-
```ts
374-
interface uesGridSpan {
375-
(gridSpan: number): number
376-
}
377-
```

‎packages/antd/docs/components/FormGrid.zh-CN.md

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -361,17 +361,3 @@ export default () => {
361361
| 属性名 | 类型 | 描述 | 默认值 |
362362
| -------- | ------ | ---------------------------------------------------- | ------ |
363363
| gridSpan | number | 元素所跨列数，如果为-1，那么会自动反向跨列填补单元格 | 1 |
364-
365-
### FormGrid.useGridSpan
366-
367-
#### 描述
368-
369-
根据容器宽度计算出正确的 span，防止元素溢出
370-
371-
#### 签名
372-
373-
```ts
374-
interface uesGridSpan {
375-
(gridSpan: number): number
376-
}
377-
```

‎packages/antd/src/form-grid/index.tsx

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useLayoutEffect, useRef, useContext, useMemo } from 'react'
1+
import React, { useLayoutEffect, useRef, useMemo } from 'react'
22
import { observer } from '@formily/react'
33
import { Grid, IGridOptions } from '@formily/grid'
44
import { usePrefixCls, pickDataProps } from '../__builtins__'
@@ -21,7 +21,13 @@ export interface IGridColumnProps {
2121

2222
type ComposedFormGrid = React.FC<IFormGridProps> & {
2323
GridColumn: React.FC<IGridColumnProps>
24+
/**
25+
* @deprecated
26+
*/
2427
useGridSpan: (gridSpan: number) => number
28+
/**
29+
* @deprecated
30+
*/
2531
useGridColumn: (gridSpan: number) => string
2632
}
2733

@@ -35,14 +41,18 @@ const useFormGrid = (props: IFormGridProps) => {
3541
return useMemo(() => new Grid(options), [Grid.id(options)])
3642
}
3743

44+
/**
45+
* @deprecated
46+
*/
3847
export const useGridSpan = (gridSpan = 1) => {
39-
const grid = useContext(FormGridContext)
40-
return grid?.calcGridSpan(gridSpan) ?? gridSpan
48+
return gridSpan
4149
}
4250

51+
/**
52+
* @deprecated
53+
*/
4354
export const useGridColumn = (gridSpan = 1) => {
44-
const span = useGridSpan(gridSpan)
45-
return gridSpan === -1 ? `span ${span} / -1` : `span ${span} / auto`
55+
return gridSpan
4656
}
4757

4858
export const FormGrid: ComposedFormGrid = observer(
@@ -84,13 +94,7 @@ export const FormGrid: ComposedFormGrid = observer(
8494
export const GridColumn: React.FC<IGridColumnProps> = observer(
8595
({ gridSpan, children, ...props }) => {
8696
return (
87-
<div
88-
{...props}
89-
style={{
90-
gridColumn: useGridColumn(gridSpan),
91-
...props.style,
92-
}}
93-
>
97+
<div {...props} style={props.style} data-grid-span={gridSpan}>
9498
{children}
9599
</div>
96100
)

‎packages/antd/src/form-item/index.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { usePrefixCls, pickDataProps } from '../__builtins__'
44
import { isVoidField } from '@formily/core'
55
import { connect, mapProps } from '@formily/react'
66
import { useFormLayout, FormLayoutShallowContext } from '../form-layout'
7-
import { useGridColumn } from '../form-grid'
87
import { Tooltip, Popover } from 'antd'
98
import {
109
QuestionCircleOutlined,
@@ -119,7 +118,6 @@ const ICON_MAP = {
119118
export const BaseItem: React.FC<IFormItemProps> = ({ children, ...props }) => {
120119
const [active, setActive] = useState(false)
121120
const formLayout = useFormItemLayout(props)
122-
const gridColumn = useGridColumn(props.gridSpan)
123121
const { containerRef, contentRef, overflow } = useOverflow<
124122
HTMLDivElement,
125123
HTMLLabelElement
@@ -200,10 +198,6 @@ export const BaseItem: React.FC<IFormItemProps> = ({ children, ...props }) => {
200198

201199
const gridStyles: React.CSSProperties = {}
202200

203-
if (gridColumn) {
204-
gridStyles.gridColumn = gridColumn
205-
}
206-
207201
const getOverflowTooltip = () => {
208202
if (overflow) {
209203
return (
@@ -278,6 +272,7 @@ export const BaseItem: React.FC<IFormItemProps> = ({ children, ...props }) => {
278272
...style,
279273
...gridStyles,
280274
}}
275+
data-grid-span={props.gridSpan}
281276
className={cls({
282277
[`${prefixCls}`]: true,
283278
[`${prefixCls}-layout-${layout}`]: true,

‎packages/element/docs/guide/form-grid.md

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,3 @@
4141
| 属性名 | 类型 | 描述 | 默认值 |
4242
| -------- | ------ | ---------------------------------------------------- | ------ |
4343
| gridSpan | number | 元素所跨列数，如果为-1，那么会自动反向跨列填补单元格 | 1 |
44-
45-
### FormGrid.useGridSpan
46-
47-
#### 描述
48-
49-
根据容器宽度计算出正确的 span，防止元素溢出
50-
51-
#### 签名
52-
53-
```ts
54-
interface uesGridSpan {
55-
(gridSpan: number): number
56-
}
57-
```

‎packages/element/src/form-grid/index.ts

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,12 @@ import {
55
onMounted,
66
InjectionKey,
77
Ref,
8-
inject,
98
computed,
109
watchEffect,
1110
} from '@vue/composition-api'
12-
import { isValid, isNum, isBool, isEqual } from '@formily/shared'
1311
import { h } from '@formily/vue'
1412
import { observer } from '@formily/reactive-vue'
1513
import { Grid, IGridOptions } from '@formily/grid'
16-
import ResizeObserver from 'resize-observer-polyfill'
1714
import { stylePrefix } from '../__builtins__/configs'
1815
import { composeExport } from '../__builtins__/shared'
1916
import { useFormLayout } from '../form-layout'
@@ -54,15 +51,18 @@ const useFormGrid = (props: IFormGridProps) => {
5451
})
5552
}
5653

54+
/**
55+
* @deprecated
56+
*/
5757
const useGridSpan = (gridSpan: number) => {
58-
const grid = inject(FormGridSymbol, ref(null))
59-
60-
return grid.value?.calcGridSpan(gridSpan) ?? gridSpan
58+
return gridSpan
6159
}
6260

61+
/**
62+
* @deprecated
63+
*/
6364
export const useGridColumn = (gridSpan = 1) => {
64-
const span = useGridSpan(gridSpan)
65-
return gridSpan === -1 ? `span ${span} / -1` : `span ${span} / auto`
65+
return gridSpan
6666
}
6767

6868
const FormGridInner = observer(
@@ -153,7 +153,9 @@ const FormGridColumn = observer(
153153
return h(
154154
'div',
155155
{
156-
style: { gridColumn: useGridColumn(props.gridSpan) },
156+
attrs: {
157+
'data-grid-span': props.gridSpan,
158+
},
157159
},
158160
slots
159161
)

‎packages/element/src/form-item/index.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { stylePrefix } from '../__builtins__/configs'
1515
import { Component } from 'vue'
1616
import { Tooltip } from 'element-ui'
1717
import ResizeObserver from 'resize-observer-polyfill'
18-
import { useGridColumn } from '../form-grid'
1918

2019
export type FormItemProps = {
2120
className?: string
@@ -153,12 +152,8 @@ export const FormBaseItem = defineComponent<FormItemProps>({
153152
provide(FormLayoutShallowContext, ref(null))
154153

155154
return () => {
156-
const gridColumn = useGridColumn(props.gridSpan)
157155
const gridStyles: Record<string, any> = {}
158156

159-
if (gridColumn) {
160-
gridStyles.gridColumn = gridColumn
161-
}
162157
const deepLayout = deepLayoutRef.value
163158
const {
164159
label,
@@ -456,6 +451,9 @@ export const FormBaseItem = defineComponent<FormItemProps>({
456451
style: {
457452
...gridStyles,
458453
},
454+
attrs: {
455+
'data-grid-span': props.gridSpan,
456+
},
459457
class: {
460458
[`${prefixCls}`]: true,
461459
[`${prefixCls}-layout-${layout}`]: true,

‎packages/grid/src/index.ts

Lines changed: 58 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -38,32 +38,37 @@ const calcFactor = <T>(value: T | T[], breakpointIndex: number): T => {
3838
}
3939

4040
const parseGridNode = (elements: HTMLCollection): GridNode[] => {
41-
let index = 0
42-
return Array.from(elements).map((element) => {
41+
return Array.from(elements).reduce((buf, element) => {
4342
const style = getComputedStyle(element)
44-
const origin = element.getAttribute('data-origin-span')
43+
const visible = !(style.display === 'none')
44+
const origin = element.getAttribute('data-grid-span')
4545
const span = parseSpan(style.gridColumnStart) ?? 1
4646
const originSpan = Number(origin ?? span)
4747
if (!origin) {
48-
element.setAttribute('data-origin-span', String(span))
48+
element.setAttribute('data-grid-span', String(span))
4949
}
50-
const start = index
51-
const end = (index += span) - 1
52-
return {
53-
start,
54-
end,
50+
return buf.concat({
5551
span,
52+
visible,
5653
originSpan,
5754
element,
58-
}
59-
})
55+
})
56+
}, [])
6057
}
6158

6259
const calcChildTotalColumns = (nodes: GridNode[]) =>
63-
nodes.reduce((buf, node) => buf + node.span, 0)
60+
nodes.reduce((buf, node) => {
61+
if (!node.visible) return buf
62+
if (node.originSpan === -1) return buf + 1
63+
return buf + node.span
64+
}, 0)
6465

6566
const calcChildOriginTotalColumns = (nodes: GridNode[]) =>
66-
nodes.reduce((buf, node) => buf + node.originSpan, 0)
67+
nodes.reduce((buf, node) => {
68+
if (!node.visible) return buf
69+
if (node.originSpan === -1) return buf + 1
70+
return buf + node.originSpan
71+
}, 0)
6772

6873
const calcSatisfyColumns = (
6974
width: number,
@@ -95,12 +100,39 @@ const parseSpan = (gridColumnStart: string) => {
95100
const factor = <T>(value: T | T[], grid: Grid<HTMLElement>): T =>
96101
isValid(value) ? calcFactor(value as any, grid.breakpoint) : value
97102

103+
const resolveChildren = (grid: Grid<HTMLElement>) => {
104+
let walked = 0,
105+
rowIndex = 0
106+
if (!grid.ready) return
107+
grid.children = grid.children.map((node) => {
108+
if (!node.visible) return node
109+
const columnIndex = walked % grid.columns
110+
const remainColumns = grid.columns - columnIndex
111+
const originSpan = node.originSpan
112+
const targetSpan = originSpan > grid.columns ? grid.columns : originSpan
113+
const span = targetSpan > remainColumns ? remainColumns : targetSpan
114+
const gridColumn =
115+
originSpan === -1 ? `span ${remainColumns} / -1` : `span ${span} / auto`
116+
if (node.element.style.gridColumn !== gridColumn) {
117+
node.element.style.gridColumn = gridColumn
118+
}
119+
walked += span
120+
if (columnIndex === 0) {
121+
rowIndex++
122+
}
123+
node.row = rowIndex
124+
node.column = columnIndex + 1
125+
return node
126+
})
127+
}
128+
98129
export type GridNode = {
99-
start?: number
100-
end?: number
130+
visible?: boolean
131+
column?: number
132+
row?: number
101133
span?: number
102134
originSpan?: number
103-
element?: Element
135+
element?: HTMLElement
104136
}
105137
export class Grid<Container extends HTMLElement> {
106138
options: IGridOptions
@@ -258,15 +290,19 @@ export class Grid<Container extends HTMLElement> {
258290
this.width = rect.width
259291
this.height = rect.height
260292
}
261-
this.options?.onDigest?.(this)
293+
resolveChildren(this)
294+
if (this.ready) {
295+
this.options?.onDigest?.(this)
296+
}
262297
})
263298
const mutationObserver = new MutationObserver(digest)
264299
const resizeObserver = new ResizeObserver(digest)
265300
resizeObserver.observe(this.container)
266301
mutationObserver.observe(this.container, {
267-
attributeFilter: ['style'],
302+
attributeFilter: ['style', 'class'],
268303
attributes: true,
269304
childList: true,
305+
subtree: true,
270306
})
271307
initialize()
272308
return () => {
@@ -280,23 +316,11 @@ export class Grid<Container extends HTMLElement> {
280316
return () => {}
281317
}
282318

319+
/**
320+
* @deprecated
321+
*/
283322
calcGridSpan = (span: number) => {
284-
if (!this.ready) {
285-
return span
286-
}
287-
if (span === -1) {
288-
const prevOriginTotalColumns = this.childOriginTotalColumns - 1
289-
const prevTotalColumns = this.childTotalColumns - 1
290-
const remainTotalColumns = this.columns - prevOriginTotalColumns
291-
const remainOriginTotalColumns = this.columns - prevTotalColumns
292-
const minRemainTotalColumns = Math.max(
293-
remainTotalColumns,
294-
remainOriginTotalColumns
295-
)
296-
if (minRemainTotalColumns < 0) return 1
297-
return minRemainTotalColumns > 0 ? minRemainTotalColumns : this.columns
298-
}
299-
return this.columns < span ? this.columns : span
323+
return span
300324
}
301325

302326
static id = (options: IGridOptions = {}) =>

‎packages/next/docs/components/FormGrid.md

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -361,17 +361,3 @@ note:
361361
| Property name | Type | Description | Default value |
362362
| ------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | ------------- |
363363
| gridSpan | number | The number of columns spanned by the element, if it is -1, it will automatically fill the cell across columns in reverse | 1 |
364-
365-
### FormGrid.useGridSpan
366-
367-
#### Description
368-
369-
Calculate the correct span based on the width of the container to prevent element overflow
370-
371-
#### Signature
372-
373-
```ts
374-
interface uesGridSpan {
375-
(gridSpan: number): number
376-
}
377-
```

0 commit comments

Comments
 (0)