From c930e27d9d027fb63c3cf13742a7c18266037439 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=94=A6=E6=AD=A4?= Date: Tue, 9 Jun 2020 11:39:05 +0800 Subject: [PATCH] fix(next/components): incorrect size #884 (#885) --- .gitignore | 1 + .../__snapshots__/layout.spec.tsx.snap | 184 ++++++++++++++++++ packages/next/src/__tests__/layout.spec.tsx | 157 ++++++++++----- .../src/components/FormMegaLayout/style.tsx | 52 +++-- .../src/components/FormMegaLayout/types.ts | 23 +++ 5 files changed, 358 insertions(+), 59 deletions(-) create mode 100644 packages/next/src/components/FormMegaLayout/types.ts diff --git a/.gitignore b/.gitignore index 179ac086657..0ff0019f81c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ *~ *.swp .DS_Store +.tea npm-debug.log lerna-debug.log npm-debug.log* diff --git a/packages/next/src/__tests__/__snapshots__/layout.spec.tsx.snap b/packages/next/src/__tests__/__snapshots__/layout.spec.tsx.snap index ff4787da7c7..0e36612574a 100644 --- a/packages/next/src/__tests__/__snapshots__/layout.spec.tsx.snap +++ b/packages/next/src/__tests__/__snapshots__/layout.spec.tsx.snap @@ -182,6 +182,190 @@ exports[`layoutMarginStyle inline layout 1`] = ` /> `; +exports[`layoutMarginStyle large size 1`] = ` +.c0 > .next-form-item-control > .mega-layout-container-wrapper, +.c0 > .next-form-item-control > .mega-layout-item-content { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-content { + margin-bottom: 0; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-before, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-before, +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .formily-mega-item-before, +.c0 > .next-form-item-control > .mega-layout-item-content > .formily-mega-item-before { + -webkit-flex: initial; + -ms-flex: initial; + flex: initial; + margin-right: NaNpx; + line-height: 40px; + font-size: 16px; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-after, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-after, +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .formily-mega-item-after, +.c0 > .next-form-item-control > .mega-layout-item-content > .formily-mega-item-after { + -webkit-flex: initial; + -ms-flex: initial; + flex: initial; + margin-left: NaNpx; + line-height: 40px; + font-size: 16px; +} + +
+`; + +exports[`layoutMarginStyle medium size 1`] = ` +.c0 > .next-form-item-control > .mega-layout-container-wrapper, +.c0 > .next-form-item-control > .mega-layout-item-content { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-content { + margin-bottom: 0; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-before, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-before, +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .formily-mega-item-before, +.c0 > .next-form-item-control > .mega-layout-item-content > .formily-mega-item-before { + -webkit-flex: initial; + -ms-flex: initial; + flex: initial; + margin-right: NaNpx; + line-height: 28px; + font-size: 14px; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-after, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-after, +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .formily-mega-item-after, +.c0 > .next-form-item-control > .mega-layout-item-content > .formily-mega-item-after { + -webkit-flex: initial; + -ms-flex: initial; + flex: initial; + margin-left: NaNpx; + line-height: 28px; + font-size: 14px; +} + +
+`; + +exports[`layoutMarginStyle middle size 1`] = ` +.c0 > .next-form-item-control > .mega-layout-container-wrapper, +.c0 > .next-form-item-control > .mega-layout-item-content { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-content { + margin-bottom: 0; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-before, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-before, +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .formily-mega-item-before, +.c0 > .next-form-item-control > .mega-layout-item-content > .formily-mega-item-before { + -webkit-flex: initial; + -ms-flex: initial; + flex: initial; + margin-right: NaNpx; + line-height: 28px; + font-size: 14px; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-after, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-after, +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .formily-mega-item-after, +.c0 > .next-form-item-control > .mega-layout-item-content > .formily-mega-item-after { + -webkit-flex: initial; + -ms-flex: initial; + flex: initial; + margin-left: NaNpx; + line-height: 28px; + font-size: 14px; +} + +
+`; + +exports[`layoutMarginStyle small size 1`] = ` +.c0 > .next-form-item-control > .mega-layout-container-wrapper, +.c0 > .next-form-item-control > .mega-layout-item-content { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-content { + margin-bottom: 0; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-before, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-before, +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .formily-mega-item-before, +.c0 > .next-form-item-control > .mega-layout-item-content > .formily-mega-item-before { + -webkit-flex: initial; + -ms-flex: initial; + flex: initial; + margin-right: NaNpx; + line-height: 20px; + font-size: 12px; +} + +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-after, +.c0 > .next-form-item-control > .mega-layout-item-content > .mega-layout-container-after, +.c0 > .next-form-item-control > .mega-layout-container-wrapper > .formily-mega-item-after, +.c0 > .next-form-item-control > .mega-layout-item-content > .formily-mega-item-after { + -webkit-flex: initial; + -ms-flex: initial; + flex: initial; + margin-left: NaNpx; + line-height: 20px; + font-size: 12px; +} + +
+`; + exports[`nest grid layout container nest mega layout container 1`] = ` .c0 > .next-form-item { width: 100%; diff --git a/packages/next/src/__tests__/layout.spec.tsx b/packages/next/src/__tests__/layout.spec.tsx index 73a5fb4202d..6761b0b6bae 100644 --- a/packages/next/src/__tests__/layout.spec.tsx +++ b/packages/next/src/__tests__/layout.spec.tsx @@ -4,7 +4,10 @@ import renderer from 'react-test-renderer' import 'jest-styled-components' import { computeNextStyleBase } from '../../src/components/FormMegaLayout/style' -describe('test label-align style',() => { +const itemCls = '& > .next-form-item-control > .mega-layout-item-content' +const containerCls = '& > .next-form-item-control > .mega-layout-container-wrapper' + +describe('test label-align style', () => { test('top', () => { const styleResult = computeNextStyleBase({ labelAlign: 'top' }); const Mega = styled.div` @@ -62,15 +65,12 @@ describe('test label-align style',() => { }) }) -describe('test addon style',() => { +describe('test addon style', () => { test('normal', () => { const styleResult = computeNextStyleBase({}); const Mega = styled.div`${styleResult.addonStyle}` const tree = renderer.create().toJSON() - const containerCls = '& > .next-form-item-control > .mega-layout-container-wrapper' - const itemCls = '& > .next-form-item-control > .mega-layout-item-content' - expect(tree).toMatchSnapshot() // container expect(tree).toHaveStyleRule('display', 'flex', { modifier: containerCls }) @@ -121,7 +121,7 @@ describe('test addon style',() => { }) -describe('test grid layout style',() => { +describe('test grid layout style', () => { test('normal', () => { let layoutProps = { gutter: 20, @@ -157,9 +157,10 @@ describe('test grid layout style',() => { const Mega = styled.div`${styleResult.gridStyle}` const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() - expect(tree).toHaveStyleRule('grid-template-columns', `repeat(3,minmax(100px,1fr))`, - { modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, - }) + expect(tree).toHaveStyleRule('grid-template-columns', `repeat(3,minmax(100px,1fr))`, + { + modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, + }) }) test('gridStyle autoRow true(responsive)', () => { @@ -174,18 +175,21 @@ describe('test grid layout style',() => { const Mega = styled.div`${styleResult.gridStyle}` const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() - expect(tree).toHaveStyleRule('grid-template-columns', `repeat(${layoutProps.responsive.s},minmax(100px,1fr))`, - { modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, - media: '(max-width:720px)' - }) - expect(tree).toHaveStyleRule('grid-template-columns', `repeat(${layoutProps.responsive.m},minmax(100px,1fr))`, - { modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, - media: '(min-width:720px) and (max-width:1200px)' - }) - expect(tree).toHaveStyleRule('grid-template-columns', `repeat(${layoutProps.responsive.lg},minmax(100px,1fr))`, - { modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, - media: '(min-width:1200px)' - }) + expect(tree).toHaveStyleRule('grid-template-columns', `repeat(${layoutProps.responsive.s},minmax(100px,1fr))`, + { + modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, + media: '(max-width:720px)' + }) + expect(tree).toHaveStyleRule('grid-template-columns', `repeat(${layoutProps.responsive.m},minmax(100px,1fr))`, + { + modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, + media: '(min-width:720px) and (max-width:1200px)' + }) + expect(tree).toHaveStyleRule('grid-template-columns', `repeat(${layoutProps.responsive.lg},minmax(100px,1fr))`, + { + modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, + media: '(min-width:1200px)' + }) }) test('gridStyle autoRow false', () => { @@ -200,18 +204,21 @@ describe('test grid layout style',() => { const Mega = styled.div`${styleResult.gridStyle}` const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() - expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, - { modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, - media: '(max-width:720px)' - }) - expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, - { modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, - media: '(min-width:720px) and (max-width:1200px)' - }) - expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, - { modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, - media: '(min-width:1200px)' - }) + expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, + { + modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, + media: '(max-width:720px)' + }) + expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, + { + modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, + media: '(min-width:720px) and (max-width:1200px)' + }) + expect(tree).toHaveStyleRule('grid-template-columns', `repeat(auto-fit,minmax(100px,1fr))`, + { + modifier: `& > .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content.grid`, + media: '(min-width:1200px)' + }) }) }) @@ -381,7 +388,7 @@ describe('nest grid layout container', () => { }) }) -describe('default style',() => { +describe('default style', () => { test('default style', () => { const styleResult = computeNextStyleBase({}) const Mega = styled.div`${styleResult.defaultStyle}` @@ -394,7 +401,7 @@ describe('default style',() => { }) }) -describe('inline style',() => { +describe('inline style', () => { test('item', () => { const styleResult = computeNextStyleBase({ inline: true }) const Mega = styled.div`${styleResult.inlineStyle}` @@ -451,7 +458,7 @@ describe('inline style',() => { }) }) -describe('width style',() => { +describe('width style', () => { test('only labelWidth', () => { const styleResult = computeNextStyleBase({ labelWidth: '200px' }) const Mega = styled.div`${styleResult.widthStyle}` @@ -460,7 +467,7 @@ describe('width style',() => { expect(tree).toHaveStyleRule('display', 'flex') expect(tree).toHaveStyleRule('box-sizing', 'border-box') expect(tree).toHaveStyleRule('flex-direction', 'row') - + expect(tree).toHaveStyleRule('width', '200px', { modifier: '& > .next-form-item-label' }) expect(tree).toHaveStyleRule('max-width', '200px', { modifier: '& > .next-form-item-label' }) expect(tree).toHaveStyleRule('flex', '0 0 200px', { modifier: '& > .next-form-item-label' }) @@ -476,7 +483,7 @@ describe('width style',() => { expect(tree).toHaveStyleRule('display', 'flex') expect(tree).toHaveStyleRule('box-sizing', 'border-box') expect(tree).toHaveStyleRule('flex-direction', 'row') - + expect(tree).toHaveStyleRule('width', '200px', { modifier: '& > .next-form-item-control' }) expect(tree).toHaveStyleRule('max-width', '200px', { modifier: '& > .next-form-item-control' }) expect(tree).toHaveStyleRule('flex', '0 0 200px', { modifier: '& > .next-form-item-control' }) @@ -497,10 +504,10 @@ describe('width style',() => { expect(tree).toHaveStyleRule('width', '100px', { modifier: '& > .next-form-item-label' }) expect(tree).toHaveStyleRule('max-width', '100px', { modifier: '& > .next-form-item-label' }) expect(tree).toHaveStyleRule('flex', '0 0 100px', { modifier: '& > .next-form-item-label' }) - + expect(tree).toHaveStyleRule('width', '200px', { modifier: '& > .next-form-item-control' }) expect(tree).toHaveStyleRule('max-width', '200px', { modifier: '& > .next-form-item-control' }) - expect(tree).toHaveStyleRule('flex', '0 0 200px', { modifier: '& > .next-form-item-control' }) + expect(tree).toHaveStyleRule('flex', '0 0 200px', { modifier: '& > .next-form-item-control' }) }) test('labelAlign:top labelWidth and wrapperWidth', () => { @@ -515,14 +522,14 @@ describe('width style',() => { expect(tree).toHaveStyleRule('width', '100px', { modifier: '& > .next-form-item-label' }) expect(tree).toHaveStyleRule('max-width', '100px', { modifier: '& > .next-form-item-label' }) expect(tree).toHaveStyleRule('flex', 'initial', { modifier: '& > .next-form-item-label' }) - + expect(tree).toHaveStyleRule('width', '200px', { modifier: '& > .next-form-item-control' }) expect(tree).toHaveStyleRule('max-width', '200px', { modifier: '& > .next-form-item-control' }) - expect(tree).toHaveStyleRule('flex', 'initial', { modifier: '& > .next-form-item-control' }) + expect(tree).toHaveStyleRule('flex', 'initial', { modifier: '& > .next-form-item-control' }) }) }) -describe('layoutMarginStyle',() => { +describe('layoutMarginStyle', () => { test('default layout', () => { const styleResult = computeNextStyleBase({ isLayout: true, }) const Mega = styled.div`${styleResult.layoutMarginStyle}` @@ -537,7 +544,7 @@ describe('layoutMarginStyle',() => { const Mega = styled.div`${styleResult.layoutMarginStyle}` const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() - + expect(tree).toHaveStyleRule('margin-bottom', '0', { modifier: '> .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .mega-layout-item' }) expect(tree).toHaveStyleRule('margin-bottom', '0', { modifier: '> .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item' }) expect(tree).toHaveStyleRule('margin-bottom', '0', { modifier: '> .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-container:last-child' }) @@ -548,9 +555,69 @@ describe('layoutMarginStyle',() => { const Mega = styled.div`${styleResult.layoutMarginStyle}` const tree = renderer.create().toJSON() expect(tree).toMatchSnapshot() - + expect(tree).toHaveStyleRule('margin-bottom', '0', { modifier: '> .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item-col > .mega-layout-item' }) expect(tree).toHaveStyleRule('margin-bottom', '0', { modifier: '> .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-item' }) expect(tree).toHaveStyleRule('margin-bottom', '0', { modifier: '> .next-form-item-control > .mega-layout-container-wrapper > .mega-layout-container-content > .mega-layout-container:last-child' }) }) + + test('medium size', () => { + const styleResult = computeNextStyleBase({ + size: "medium" + }); + const Mega = styled.div`${styleResult.addonStyle}` + const tree = renderer.create().toJSON() + + expect(tree).toMatchSnapshot() + expect(tree).toHaveStyleRule('line-height', '28px', { modifier: `${itemCls} > .formily-mega-item-before` }) + expect(tree).toHaveStyleRule('font-size', '14px', { modifier: `${itemCls} > .formily-mega-item-before` }) + expect(tree).toHaveStyleRule('line-height', '28px', { modifier: `${containerCls} > .mega-layout-container-after` }) + expect(tree).toHaveStyleRule('font-size', '14px', { modifier: `${containerCls} > .mega-layout-container-after` }) + + }) + + test('middle size', () => { + const styleResult = computeNextStyleBase({ + size: "middle" + }); + const Mega = styled.div`${styleResult.addonStyle}` + const tree = renderer.create().toJSON() + + expect(tree).toMatchSnapshot() + expect(tree).toHaveStyleRule('line-height', '28px', { modifier: `${itemCls} > .formily-mega-item-before` }) + expect(tree).toHaveStyleRule('font-size', '14px', { modifier: `${itemCls} > .formily-mega-item-before` }) + expect(tree).toHaveStyleRule('line-height', '28px', { modifier: `${containerCls} > .mega-layout-container-after` }) + expect(tree).toHaveStyleRule('font-size', '14px', { modifier: `${containerCls} > .mega-layout-container-after` }) + + }) + + test('small size', () => { + const styleResult = computeNextStyleBase({ + size: "small" + }); + const Mega = styled.div`${styleResult.addonStyle}` + const tree = renderer.create().toJSON() + + expect(tree).toMatchSnapshot() + expect(tree).toHaveStyleRule('line-height', '20px', { modifier: `${itemCls} > .formily-mega-item-before` }) + expect(tree).toHaveStyleRule('font-size', '12px', { modifier: `${itemCls} > .formily-mega-item-before` }) + expect(tree).toHaveStyleRule('line-height', '20px', { modifier: `${containerCls} > .mega-layout-container-after` }) + expect(tree).toHaveStyleRule('font-size', '12px', { modifier: `${containerCls} > .mega-layout-container-after` }) + + }) + + test('large size', () => { + const styleResult = computeNextStyleBase({ + size: "large" + }); + const Mega = styled.div`${styleResult.addonStyle}` + const tree = renderer.create().toJSON() + + expect(tree).toMatchSnapshot() + expect(tree).toHaveStyleRule('line-height', '40px', { modifier: `${itemCls} > .formily-mega-item-before` }) + expect(tree).toHaveStyleRule('font-size', '16px', { modifier: `${itemCls} > .formily-mega-item-before` }) + expect(tree).toHaveStyleRule('line-height', '40px', { modifier: `${containerCls} > .mega-layout-container-after` }) + expect(tree).toHaveStyleRule('font-size', '16px', { modifier: `${containerCls} > .mega-layout-container-after` }) + }) + }) diff --git a/packages/next/src/components/FormMegaLayout/style.tsx b/packages/next/src/components/FormMegaLayout/style.tsx index 5c95faaa52c..1d22e49a935 100644 --- a/packages/next/src/components/FormMegaLayout/style.tsx +++ b/packages/next/src/components/FormMegaLayout/style.tsx @@ -1,6 +1,29 @@ import { css } from 'styled-components' +import { EComponentSize, EPxType, PxValue, ELineHeightPx, EFontSizePx } from './types' const formatPx = num => (typeof num === 'string' ? num.replace('px', '') : num) + +const getPxFromSize = function (size: EComponentSize = EComponentSize.MEDIUM, type: EPxType): PxValue { + let lineSize = { + [EComponentSize.SMALL]: ELineHeightPx.small, + [EComponentSize.MEDIUM]: ELineHeightPx.medium, + [EComponentSize.MIDDLE]: ELineHeightPx.middle, + [EComponentSize.LARGE]: ELineHeightPx.large, + } + let fontSize = { + [EComponentSize.SMALL]: EFontSizePx.small, + [EComponentSize.MEDIUM]: EFontSizePx.medium, + [EComponentSize.MIDDLE]: EFontSizePx.middle, + [EComponentSize.LARGE]: EFontSizePx.large, + } + let defaultSize: EComponentSize = EComponentSize.MEDIUM + let thisSize: { + [key in EComponentSize]: PxValue + } = type === EPxType.Font ? fontSize : lineSize + + return thisSize[size] || thisSize[defaultSize] +} + export const computeNextStyleBase = (props) => { const result: any = {} const { @@ -8,10 +31,11 @@ export const computeNextStyleBase = (props) => { isLayout, inline, labelCol, grid, full, context = {}, contextColumns, columns, isRoot, autoRow, - span, nested, size, + span, nested, // lg, m, s, responsive } = props + const size: EComponentSize = props.size const labelWidth = formatPx(props.labelWidth) const wrapperWidth = formatPx(props.wrapperWidth) const gutter = formatPx(props.gutter) @@ -45,17 +69,17 @@ export const computeNextStyleBase = (props) => { > .mega-layout-container-before, > .formily-mega-item-before { flex: initial; - margin-right: ${`${parseInt(gutter) / 2}px`}; - line-height: ${size === 'small' ? '20px' : ((size === 'middle' || !size) ? '28px' : '40px') }; - font-size: ${size === 'small' ? '12px' : ((size === 'middle' || !size) ? '14px' : '16px') }; + margin-right: ${parseInt(gutter) / 2}px; + line-height: ${getPxFromSize(size, EPxType.Line)}px; + font-size: ${getPxFromSize(size, EPxType.Font)}px; } > .mega-layout-container-after, > .formily-mega-item-after { flex: initial; - margin-left: ${`${parseInt(gutter) / 2}px`}; - line-height: ${size === 'small' ? '20px' : ((size === 'middle' || !size) ? '28px' : '40px') }; - font-size: ${size === 'small' ? '12px' : ((size === 'middle' || !size) ? '14px' : '16px') }; + margin-left: ${parseInt(gutter) / 2}px; + line-height: ${getPxFromSize(size, EPxType.Line)}px; + font-size: ${getPxFromSize(size, EPxType.Font)}px; } } ` @@ -87,9 +111,9 @@ export const computeNextStyleBase = (props) => { width: ${labelWidth}px; max-width: ${labelWidth}px; flex: ${labelAlign !== 'top' ? `0 0 ${labelWidth}px` : 'initial'}; - ` : - '' - } + ` : + '' + } } & > .next-form-item-control { @@ -97,9 +121,9 @@ export const computeNextStyleBase = (props) => { width: ${wrapperWidth}px; max-width: ${wrapperWidth}px; flex: ${labelAlign !== 'top' ? `0 0 ${wrapperWidth}px` : 'initial'}; - ` : - `flex: 1;` - } + ` : + `flex: 1;` + } } ` } @@ -256,7 +280,7 @@ export const computeNextStyleBase = (props) => { export const computeStyle = (props) => { const styleResult = computeNextStyleBase(props) - + // labelAlign, addon 是任何布局模式都可以用到 // inline 和 grid 是互斥关系, 优先级: inline > grid // 最终调用一次css计算方法，会自动筛去同位置不生效的代码 diff --git a/packages/next/src/components/FormMegaLayout/types.ts b/packages/next/src/components/FormMegaLayout/types.ts new file mode 100644 index 00000000000..f12072cd495 --- /dev/null +++ b/packages/next/src/components/FormMegaLayout/types.ts @@ -0,0 +1,23 @@ +export enum EComponentSize { + SMALL = "small", + MEDIUM = "medium", + MIDDLE = "middle", + LARGE = "large" +} +export enum ELineHeightPx { + "small" = 20, + "medium" = 28, + "middle" = 28, + "large" = 40 +} +export enum EFontSizePx { + "small" = 12, + "medium" = 14, + "middle" = 14, + "large" = 16 +} +export enum EPxType { + Font = "font", + Line = "lineHeight" +} +export type PxValue = ELineHeightPx | EFontSizePx \ No newline at end of file