diff --git a/CHANGELOG.md b/CHANGELOG.md index 9719b31..771b001 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,5 +3,5 @@ - 各组件 `_typeMark` 标记统一更名为 `typeMark` - `Cell` 增加模式属性 `height`, 支持直接固定高度 - `Page` 上移除 Tab 模式 -- `P` 属性 `verMargin` 更名为 `hasVerSpacing` +- `P` 属性 `verMargin` 更名为 `hasVerSpacing`, `spacing` 支持传入数值 - `Row/Col/Cell` 支持直接设置 `height` 属性 diff --git a/src/p.tsx b/src/p.tsx index 7aafe8f..8ee9462 100644 --- a/src/p.tsx +++ b/src/p.tsx @@ -12,10 +12,10 @@ import React, { ReactNode, useMemo, } from 'react'; -import { isString } from 'lodash-es'; +import { isNumber, isString } from 'lodash-es'; import classNames from 'classnames'; import Context from '@/common/context'; -import { wrapUnit } from '@/utils'; +import { isPresetSize, wrapUnit } from '@/utils'; import Text from '@/text'; import { BaseSize, LayoutContextProps, ParagraphProps, TypeMark } from '@/types'; @@ -66,15 +66,24 @@ const P: ForwardRefRenderFunction = (props } = props; const { prefix } = useContext(Context); const clsPrefix = `${prefix}p`; - const spacing = spacingProp === true ? 'medium' : spacingProp; + const isCustomSize = + isNumber(spacingProp) || + (isString(spacingProp) && spacingProp !== '' && !isPresetSize(spacingProp)); + const spacing = isCustomSize ? 'medium' : spacingProp; const newStyle = useMemo( () => ({ marginTop: wrapUnit(beforeMargin) || 0, marginBottom: wrapUnit(afterMargin) || 0, + // 如果 spacingProp 为数值类型,则默认修改当前段落下的间隙值 + ...(isCustomSize + ? { + '--page-p-medium-spacing': wrapUnit(spacingProp), + } + : null), ...style, }), - [beforeMargin, afterMargin, style], + [beforeMargin, afterMargin, isCustomSize, style], ); return ( diff --git a/src/space.tsx b/src/space.tsx index 20da407..1502a99 100644 --- a/src/space.tsx +++ b/src/space.tsx @@ -1,6 +1,6 @@ import { createElement, useContext, FC, useMemo } from 'react'; import classNames from 'classnames'; -import { isNumber } from 'lodash-es'; +import { isNumber, isString } from 'lodash-es'; import Context from '@/common/context'; import { isPresetSize, wrapUnit } from '@/utils'; import { LayoutContextProps, SpaceProps } from '@/types'; @@ -19,14 +19,15 @@ const Space: FC = (props) => { [`${clsPrefix}--${direction}`]: true, }); - const newStyle = useMemo( - () => ({ + const newStyle = useMemo(() => { + const isCustomSize = isNumber(size) || (isString(size) && size !== '' && !isPresetSize(size)); + + return { ...style, - ...(isNumber(size) && direction === 'hoz' ? { height: wrapUnit(size) } : null), - ...(isNumber(size) && direction === 'ver' ? { width: wrapUnit(size) } : null), - }), - [size, direction], - ); + ...(isCustomSize && direction === 'hoz' ? { height: wrapUnit(size) } : null), + ...(isCustomSize && direction === 'ver' ? { width: wrapUnit(size) } : null), + }; + }, [size, style, direction]); return createElement( isVertical ? 'span' : 'div', diff --git a/src/types.ts b/src/types.ts index 9c46bc4..6b6a1a9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -386,7 +386,7 @@ export interface ParagraphProps extends BaseProps { /** * 子元素间水平间距 */ - spacing?: true | BaseSize; + spacing?: BaseSize | string | number; /** * 子元素间具有垂直间距 */ @@ -412,7 +412,7 @@ export interface SpaceProps extends BaseProps { /** * 尺寸 */ - size?: BaseSize | number; + size?: BaseSize | string | number; /** * 布局方向 */