Skip to content

Commit

Permalink
feat: add ie compat mode of grid(ie) (#912)
Browse files Browse the repository at this point in the history
add compat mode of gird(ie)
  • Loading branch information
JohnIsOnTheRoad authored Jun 27, 2020
1 parent e794b95 commit b731397
Show file tree
Hide file tree
Showing 8 changed files with 171 additions and 62 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,7 @@ exports[`layoutMarginStyle default layout 1`] = `
`;

exports[`layoutMarginStyle grid layout 1`] = `
.c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .ant-form-item,
.c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .mega-layout-item,
.c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item {
margin-bottom: 0;
Expand All @@ -515,6 +516,7 @@ exports[`layoutMarginStyle grid layout 1`] = `
`;

exports[`layoutMarginStyle inline layout 1`] = `
.c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .ant-form-item,
.c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .mega-layout-item,
.c0 > .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item {
margin-bottom: 0;
Expand Down
35 changes: 35 additions & 0 deletions packages/antd/src/components/FormMegaLayout/ie.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const isIECompat = window.ActiveXObject || "ActiveXObject" in window
const getIEGridContainerStyle = (opts) => {
if (isIECompat) {
const { gutter, autoRow } = opts
const halfGutter = Math.floor(gutter / 2)
return `
display: flex;
${autoRow ? 'flex-flow: row wrap;' : ''}
margin: -${halfGutter}px -${halfGutter}px ${halfGutter}px;
`
}

return ''
}

const getIEGridItemStyle = (opts) => {
if (isIECompat) {
const { gutter, span, columns } = opts
const halfGutter = Math.floor(gutter / 2)
const flexBase = `${Number((Number(span) / Number(columns)).toFixed(6)) * 100}%`

return `
padding: ${halfGutter}px;
max-width: ${flexBase};
flex: 0 0 ${flexBase};
`
}

return ''
}

export {
getIEGridContainerStyle,
getIEGridItemStyle,
}
13 changes: 6 additions & 7 deletions packages/antd/src/components/FormMegaLayout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react'
import classnames from 'classnames'
import { Form } from 'antd'
import { Layout, LayoutItem, ILayoutProps } from '@formily/react'
import { createVirtualBox } from '@formily/react-schema-renderer'
import { createVirtualBox, Layout, LayoutItem, ILayoutProps } from '@formily/react-schema-renderer'
import styled from 'styled-components'
import { useDeepFormItem } from '../../context'
import { normalizeCol, pickFormItemProps, pickNotFormItemProps } from '../../shared'
Expand Down Expand Up @@ -31,13 +30,13 @@ const StyledLayoutItem = styled((props) => {
</div>
}

const finalFormItem = <Form.Item className={cls} {...formItemProps}>
const finalFormItem = (cls) => (<Form.Item className={cls} {...formItemProps}>
<div className="mega-layout-item-content">
{ addonBefore ? <p className="formily-mega-item-before">{addonBefore}</p> : null }
{children}
{ addonAfter ? <p className="formily-mega-item-after">{addonAfter}</p> : null }
</div>
</Form.Item>
</Form.Item>)

if (grid) {
return <div className={classnames({
Expand All @@ -46,12 +45,12 @@ const StyledLayoutItem = styled((props) => {
'mega-layout-item-inset-has-error': formItemProps.validateStatus === 'error',
'mega-layout-item-inset-has-warning': formItemProps.validateStatus === 'warning',
})}>
{finalFormItem}
{finalFormItem(className)}
{finalHelpInfo}
</div>
}

return finalFormItem
return finalFormItem(cls)
})`${props => computeStyle(props)}`


Expand Down Expand Up @@ -139,7 +138,7 @@ const MegaLayout = (props: ILayoutProps) => {

// 嵌套布局
if (!props.grid && grid) {
return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, context, responsive}}>
return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, context, responsive}}>
{ele}
</StyledLayoutNestWrapper>
}
Expand Down
66 changes: 42 additions & 24 deletions packages/antd/src/components/FormMegaLayout/style.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { css } from 'styled-components'
import insetStyle from './inset'
import { getIEGridContainerStyle, getIEGridItemStyle } from './ie'

const formatPx = num => (typeof num === 'string' ? num.replace('px', '') : num)
export const computeAntdStyleBase = (props, debug?: boolean) => {
Expand Down Expand Up @@ -167,7 +168,7 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {

const gridContainerStyle = (nested?: boolean) => {
const frStyle = nested ? '1fr' : 'minmax(100px, 1fr)';
return !disabledResponsive && responsive ? `
const containerStyle = !disabledResponsive && responsive ? `
@media (max-width: 720px) {
grid-template-columns: repeat(${autoRow ? s : 'auto-fit'}, ${frStyle});
}
Expand All @@ -181,22 +182,46 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
` : `
grid-template-columns: repeat(${autoRow ? columns : 'auto-fit'}, ${frStyle});
`
return `
display: grid;
grid-column-gap: ${parseInt(gutter)}px;
grid-row-gap: ${parseInt(gutter)}px;
${containerStyle}
${getIEGridContainerStyle({ gutter, autoRow })}
`
}

const minColumns = nested ? Math.min(columns, contextColumns) : columns
const gridItemSpanStyle = !disabledResponsive && responsive ? `
@media (max-width: 720px) {
grid-column-start: span ${s > span ? span : s};
}
@media (min-width: 720px) and (max-width: 1200px) {
grid-column-start: span ${m > span ? span : m};
}
@media (min-width: 1200px) {
grid-column-start: span ${lg > span ? span : lg};
}
`: `
grid-column-start: span ${minColumns > span ? span : minColumns};
`
const gridItemSpanStyle = () => {
const itemStyle = !disabledResponsive && responsive ? `
@media (max-width: 720px) {
grid-column-start: span ${s > span ? span : s};
}
@media (min-width: 720px) and (max-width: 1200px) {
grid-column-start: span ${m > span ? span : m};
}
@media (min-width: 1200px) {
grid-column-start: span ${lg > span ? span : lg};
}
`: `
grid-column-start: span ${minColumns > span ? span : minColumns};
`

return `
${itemStyle}
${getIEGridItemStyle({
gutter,
disabledResponsive,
responsive,
span: minColumns > span ? span : minColumns,
lgSpan: lg > span ? span : lg,
mSpan: m > span ? span : m,
sSpan: s > span ? span : s,
autoRow,
columns: contextColumns || columns,
})}
`
}

// grid栅格模式
if (!context.grid && grid) {
Expand All @@ -209,10 +234,6 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
display: flex;
> .mega-layout-container-content {
&.grid {
display: grid;
grid-column-gap: ${parseInt(gutter)}px;
grid-row-gap: ${parseInt(gutter)}px;
${gridContainerStyle()}
}
}
Expand All @@ -227,7 +248,7 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
width: 100%;
margin-bottom: 0;
}
${gridItemSpanStyle}
${gridItemSpanStyle()}
}
`
}
Expand All @@ -236,7 +257,7 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
// 减少leave的动画耗时,避免卡顿
if (!context.grid && grid && span) {
result.gridItemStyle = `
&.mega-layout-item-col { ${gridItemSpanStyle} }
&.mega-layout-item-col { ${gridItemSpanStyle()} }
.ant-form-item-explain.show-help-leave {
animation-duration: 0s;
Expand All @@ -255,10 +276,6 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
display: flex;
> .mega-layout-container-content {
&.grid {
display: grid;
grid-column-gap: ${parseInt(gutter)}px;
grid-row-gap: ${parseInt(gutter)}px;
${gridContainerStyle(true)}
}
}
Expand All @@ -271,6 +288,7 @@ export const computeAntdStyleBase = (props, debug?: boolean) => {
// 内容都在同一行
if (inline || grid) {
result.layoutMarginStyle = `
> .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .ant-form-item,
> .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .mega-layout-item,
> .ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item {
margin-bottom: 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,7 @@ exports[`layoutMarginStyle default layout 1`] = `
`;

exports[`layoutMarginStyle grid layout 1`] = `
.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .next-form-item,
.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .mega-layout-item,
.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item {
margin-bottom: 0;
Expand All @@ -335,6 +336,7 @@ exports[`layoutMarginStyle grid layout 1`] = `
`;

exports[`layoutMarginStyle inline layout 1`] = `
.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .next-form-item,
.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .mega-layout-item,
.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item {
margin-bottom: 0;
Expand Down
35 changes: 35 additions & 0 deletions packages/next/src/components/FormMegaLayout/ie.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const isIECompat = window.ActiveXObject || "ActiveXObject" in window
const getIEGridContainerStyle = (opts) => {
if (isIECompat) {
const { gutter, autoRow } = opts
const halfGutter = Math.floor(gutter / 2)
return `
display: flex;
${autoRow ? 'flex-flow: row wrap;' : ''}
margin: -${halfGutter}px -${halfGutter}px ${halfGutter}px;
`
}

return ''
}

const getIEGridItemStyle = (opts) => {
if (isIECompat) {
const { gutter, span, columns } = opts
const halfGutter = Math.floor(gutter / 2)
const flexBase = `${Number((Number(span) / Number(columns)).toFixed(6)) * 100}%`

return `
padding: ${halfGutter}px;
max-width: ${flexBase};
flex: 0 0 ${flexBase};
`
}

return ''
}

export {
getIEGridContainerStyle,
getIEGridItemStyle,
}
13 changes: 6 additions & 7 deletions packages/next/src/components/FormMegaLayout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react'
import classnames from 'classnames'
import { Form } from '@alifd/next'
import { Layout, LayoutItem, ILayoutProps } from '@formily/react'
import { createVirtualBox } from '@formily/react-schema-renderer'
import { createVirtualBox, Layout, LayoutItem, ILayoutProps } from '@formily/react-schema-renderer'
import styled from 'styled-components'
import { useDeepFormItem } from '../../context'
import { normalizeCol, pickFormItemProps, pickNotFormItemProps } from '../../shared'
Expand Down Expand Up @@ -31,13 +30,13 @@ const StyledLayoutItem = styled((props) => {
</div>
}

const finalFormItem = <Form.Item className={cls} {...formItemProps}>
const finalFormItem = (cls) => (<Form.Item className={cls} {...formItemProps}>
<div className="mega-layout-item-content">
{ addonBefore ? <p className="formily-mega-item-before">{addonBefore}</p> : null }
{children}
{ addonAfter ? <p className="formily-mega-item-after">{addonAfter}</p> : null }
</div>
</Form.Item>
</Form.Item>)

if (grid) {
return <div className={classnames({
Expand All @@ -46,12 +45,12 @@ const StyledLayoutItem = styled((props) => {
'mega-layout-item-inset-has-error': formItemProps.validateState === 'error',
'mega-layout-item-inset-has-warning': formItemProps.validateState === 'warning',
})}>
{finalFormItem}
{finalFormItem(className)}
{finalHelpInfo}
</div>
}

return finalFormItem
return finalFormItem(cls)
})`${props => computeStyle(props)}`


Expand Down Expand Up @@ -139,7 +138,7 @@ const MegaLayout = (props: ILayoutProps) => {

// 嵌套布局
if (!props.grid && grid) {
return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, context, responsive}}>
return <StyledLayoutNestWrapper nested {...{span, columns, contextColumns, gutter, context, responsive}}>
{ele}
</StyledLayoutNestWrapper>
}
Expand Down
Loading

0 comments on commit b731397

Please sign in to comment.