feat: p, space 支持数值类型的 spacing 和 size 传入

CHANGELOG.md

@@ -3,5 +3,5 @@
 - 各组件 `_typeMark` 标记统一更名为 `typeMark`
 - `Cell` 增加模式属性 `height`, 支持直接固定高度
 - `Page` 上移除 Tab 模式
-- `P` 属性 `verMargin` 更名为 `hasVerSpacing`
+- `P` 属性 `verMargin` 更名为 `hasVerSpacing`, `spacing` 支持传入数值
 - `Row/Col/Cell` 支持直接设置 `height` 属性

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<HTMLParagraphElement, ParagraphProps> = (props
   } = props;
   const { prefix } = useContext<LayoutContextProps>(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 (

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<SpaceProps> = (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',

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;
   /**
    * 布局方向
    */