feat: add layout component Tencent#399

jiasy1616 · Aug 2, 2024 · 1123bcf · 1123bcf
1 parent 002c70b
commit 1123bcf
Show file tree

Hide file tree

Showing 27 changed files with 973 additions and 1 deletion.
diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
@@ -5,6 +5,11 @@ export default {
       name: 'button',
       component: () => import('tdesign-mobile-react/button/_example/index.jsx'),
     },
+    {
+      title: 'Layout 布局',
+      name: 'col',
+      component: () => import('tdesign-mobile-react/col/_example/index.tsx'),
+    },
     {
       title: 'Divider 分割符',
       name: 'divider',

diff --git a/site/web/site.config.js b/site/web/site.config.js
@@ -34,6 +34,12 @@ export default {
           path: '/mobile-react/components/button',
           component: () => import('tdesign-mobile-react/button/button.md'),
         },
+        {
+          title: 'Layout 布局',
+          name: 'col',
+          path: '/mobile-react/components/col',
+          component: () => import('tdesign-mobile-react/col/col.md'),
+        },
         {
           title: 'Fab 悬浮按钮',
           name: 'fab',

diff --git a/src/col/Col.tsx b/src/col/Col.tsx
@@ -0,0 +1,53 @@
+import React, { forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+
+import { TdColProps } from './type';
+import { colDefaultProps } from './defaultProps';
+
+import useConfig from '../_util/useConfig';
+import { NativeProps } from '../_util/withNativeProps';
+import { convertUnit, RowContext, RowProps } from '../row/Row';
+
+export interface ColProps extends TdColProps, NativeProps {
+  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 } = props;
+  const { classPrefix } = useConfig();
+
+  const { gutter } = useContext<{ gutter: RowProps['gutter'] }>(RowContext);
+
+  const colClassNames = classNames(`${classPrefix}-col`, className, {
+    [`${classPrefix}-col--${span}`]: span !== undefined,
+    [`${classPrefix}-col--offset-${offset}`]: parseInt(offset as string, 10) >= 0,
+  });
+
+  const colStyle = {
+    ...calcColPadding(gutter),
+    ...propStyle,
+  };
+
+  return (
+    <div className={colClassNames} ref={ref} style={colStyle}>
+      {children}
+    </div>
+  );
+});
+
+Col.displayName = 'Col';
+Col.defaultProps = colDefaultProps;
+
+export default Col;
diff --git a/src/col/__tests__/__snapshots__/demo.test.jsx.snap b/src/col/__tests__/__snapshots__/demo.test.jsx.snap
@@ -0,0 +1,320 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Col > Col baseVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="t-row"
+    data-v-560c89d0=""
+  >
+    
+    <div
+      class="t-col t-col--8 dark"
+      data-v-560c89d0=""
+    >
+      
+      col-8
+      
+    </div>
+    <div
+      class="t-col t-col--8 light"
+      data-v-560c89d0=""
+    >
+      
+      col-8
+      
+    </div>
+    <div
+      class="t-col t-col--8 dark"
+      data-v-560c89d0=""
+    >
+      
+      col-8
+      
+    </div>
+    
+  </div>
+  <div
+    class="t-row"
+    data-v-560c89d0=""
+  >
+    
+    <div
+      class="t-col t-col--4 dark"
+      data-v-560c89d0=""
+    >
+      
+      col-4
+      
+    </div>
+    <div
+      class="t-col t-col--offset-4 t-col--16 light"
+      data-v-560c89d0=""
+    >
+      
+      col-16 col-offset-4
+      
+    </div>
+    
+  </div>
+  <div
+    class="t-row"
+    data-v-560c89d0=""
+  >
+    
+    <div
+      class="t-col t-col--offset-12 t-col--12 dark"
+      data-v-560c89d0=""
+    >
+      
+      col-12 col-offset-12
+      
+    </div>
+    
+  </div>
+  
+</div>
+`;
+
+exports[`Col > Col mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+  data-v-6ebf24a9=""
+>
+  <h1
+    class="title"
+    data-v-6ebf24a9=""
+  >
+    Layout 布局
+  </h1>
+  <p
+    class="summary"
+    data-v-6ebf24a9=""
+  >
+    以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-6ebf24a9=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 组件类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        基础用法
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="t-row"
+        data-v-560c89d0=""
+      >
+        
+        <div
+          class="t-col t-col--8 dark"
+          data-v-560c89d0=""
+        >
+          
+          col-8
+          
+        </div>
+        <div
+          class="t-col t-col--8 light"
+          data-v-560c89d0=""
+        >
+          
+          col-8
+          
+        </div>
+        <div
+          class="t-col t-col--8 dark"
+          data-v-560c89d0=""
+        >
+          
+          col-8
+          
+        </div>
+        
+      </div>
+      <div
+        class="t-row"
+        data-v-560c89d0=""
+      >
+        
+        <div
+          class="t-col t-col--4 dark"
+          data-v-560c89d0=""
+        >
+          
+          col-4
+          
+        </div>
+        <div
+          class="t-col t-col--offset-4 t-col--16 light"
+          data-v-560c89d0=""
+        >
+          
+          col-16 col-offset-4
+          
+        </div>
+        
+      </div>
+      <div
+        class="t-row"
+        data-v-560c89d0=""
+      >
+        
+        <div
+          class="t-col t-col--offset-12 t-col--12 dark"
+          data-v-560c89d0=""
+        >
+          
+          col-12 col-offset-12
+          
+        </div>
+        
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-6ebf24a9=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        在列元素之间增加间距
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="t-row"
+        data-v-6ebf24a9=""
+        data-v-7362cfcc=""
+        style="margin-right: -8px; margin-left: -8px;"
+      >
+        
+        <div
+          class="t-col t-col--8"
+          data-v-7362cfcc=""
+          style="padding-right: 8px; padding-left: 8px;"
+        >
+          
+          <div
+            class="dark"
+            data-v-7362cfcc=""
+          >
+            col-8
+          </div>
+          
+        </div>
+        <div
+          class="t-col t-col--8"
+          data-v-7362cfcc=""
+          style="padding-right: 8px; padding-left: 8px;"
+        >
+          
+          <div
+            class="dark"
+            data-v-7362cfcc=""
+          >
+            col-8
+          </div>
+          
+        </div>
+        <div
+          class="t-col t-col--8"
+          data-v-7362cfcc=""
+          style="padding-right: 8px; padding-left: 8px;"
+        >
+          
+          <div
+            class="dark"
+            data-v-7362cfcc=""
+          >
+            col-8
+          </div>
+          
+        </div>
+        
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Col > Col offsetVue demo works fine 1`] = `
+<div
+  class="t-row"
+  data-v-7362cfcc=""
+  style="margin-right: -8px; margin-left: -8px;"
+>
+  
+  <div
+    class="t-col t-col--8"
+    data-v-7362cfcc=""
+    style="padding-right: 8px; padding-left: 8px;"
+  >
+    
+    <div
+      class="dark"
+      data-v-7362cfcc=""
+    >
+      col-8
+    </div>
+    
+  </div>
+  <div
+    class="t-col t-col--8"
+    data-v-7362cfcc=""
+    style="padding-right: 8px; padding-left: 8px;"
+  >
+    
+    <div
+      class="dark"
+      data-v-7362cfcc=""
+    >
+      col-8
+    </div>
+    
+  </div>
+  <div
+    class="t-col t-col--8"
+    data-v-7362cfcc=""
+    style="padding-right: 8px; padding-left: 8px;"
+  >
+    
+    <div
+      class="dark"
+      data-v-7362cfcc=""
+    >
+      col-8
+    </div>
+    
+  </div>
+  
+</div>
+`;