feat(layout): 新增 layout 组件

site/mobile/mobile.config.js

@@ -15,6 +15,11 @@ export default {
       name: 'icon',
       component: () => import('tdesign-mobile-react/icon/_example/index.tsx'),
     },
+    {
+      title: 'Layout 布局',
+      name: 'layout',
+      component: () => import('tdesign-mobile-react/layout/_example/index.tsx'),
+    },
     {
       title: 'Tabs 选项卡',
       name: 'tabs',

site/web/site.config.js

@@ -46,6 +46,12 @@ export default {
           path: '/mobile-react/components/icon',
           component: () => import('tdesign-mobile-react/icon/icon.md'),
         },
+        {
+          title: 'Layout 布局',
+          name: 'layout',
+          path: '/mobile-react/components/layout',
+          component: () => import('tdesign-mobile-react/layout/layout.md'),
+        },
         {
           title: 'Link 链接',
           name: 'link',

src/_util/convertUnit.ts

@@ -0,0 +1,6 @@
+import isNumber from 'lodash/isNumber';
+
+export const convertUnit = (val: string | number | undefined) => {
+  if (val == null) return 0;
+  return isNumber(val) ? `${val}px` : val;
+};

src/index.ts

@@ -5,6 +5,7 @@ export * from './button';
 export * from './divider';
 export * from './fab';
 export * from './progress';
+export * from './layout';
 export * from './link';
 
 /**

src/layout/Col.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+
+import { TdColProps } from './type';
+import { colDefaultProps } from './defaultProps';
+
+import { StyledProps } from '../common';
+
+import { convertUnit } from '../_util/convertUnit';
+import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePrefixClass } from '../hooks/useClass';
+
+import { RowContext, RowProps } from './Row';
+
+export interface ColProps extends TdColProps, StyledProps {
+  children?: React.ReactNode;
+}
+
+const calcColPadding = (gutter: RowProps['gutter']) => {
+  const styles: React.CSSProperties = {};
+
+  if (!gutter) {
+    return styles;
+  }
+  const gutterVal = convertUnit(Number(gutter) / 2);
+  styles.paddingRight = gutterVal;
+  styles.paddingLeft = gutterVal;
+  return styles;
+};
+
+const Col = forwardRef<HTMLDivElement, ColProps>((props, ref) => {
+  const { offset, span, className, children, style: propStyle } = useDefaultProps<ColProps>(props, colDefaultProps);
+
+  const colClass = usePrefixClass('col');
+
+  const { gutter } = useContext(RowContext);
+
+  const colClassNames = classNames(colClass, className, {
+    [`${colClass}--${span}`]: span !== undefined,
+    [`${colClass}--offset-${offset}`]: parseInt(offset as string, 10) >= 0,
+  });
+
+  const colStyle = {
+    ...calcColPadding(gutter),
+    ...propStyle,
+  };
+
+  return (
+    <div className={colClassNames} ref={ref} style={colStyle}>
+      {parseTNode(children)}
+    </div>
+  );
+});
+
+Col.displayName = 'Col';
+
+export default Col;

src/layout/Row.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, forwardRef, useMemo } from 'react';
+import classNames from 'classnames';
+
+import type { TdRowProps } from './type';
+
+import { convertUnit } from '../_util/convertUnit';
+import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePrefixClass } from '../hooks/useClass';
+import { StyledProps } from '../common';
+
+import { rowDefaultProps } from './defaultProps';
+
+export interface RowProps extends TdRowProps, StyledProps {
+  children?: React.ReactNode;
+}
+
+export const RowContext = createContext<{ gutter: RowProps['gutter'] }>({ gutter: undefined });
+
+const Row = forwardRef<HTMLDivElement, RowProps>((props, ref) => {
+  const { children, className = '', gutter, style } = useDefaultProps<RowProps>(props, rowDefaultProps);
+
+  const colClass = usePrefixClass('row');
+
+  const computedStyle = useMemo(() => {
+    const mergedStyle = { ...style };
+    if (!gutter) {
+      return mergedStyle;
+    }
+
+    const gutterVal = convertUnit(-gutter / 2);
+
+    mergedStyle.marginRight = gutterVal;
+    mergedStyle.marginLeft = gutterVal;
+
+    return mergedStyle;
+  }, [gutter, style]);
+
+  return (
+    <div className={classNames([colClass], className)} ref={ref} style={computedStyle}>
+      <RowContext.Provider value={{ gutter }}>{parseTNode(children)}</RowContext.Provider>
+    </div>
+  );
+});
+
+export default Row;