feat(flex): support new Flex component

src/flex/__tests__/__snapshots__/flex.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Flex Button Match the snapshot 1`] = `
+<DocumentFragment>
+  <section
+    class="dtc-flex"
+    style="flex-wrap: nowrap; justify-content: normal; align-items: normal; gap: 0;"
+  >
+    <div>
+      123
+    </div>
+    <div>
+      123
+    </div>
+    <div>
+      123
+    </div>
+    <div>
+      123
+    </div>
+  </section>
+</DocumentFragment>
+`;
+
+exports[`Test Flex Button Match the snapshot: primary button 1`] = `
+<DocumentFragment>
+  <section
+    class="dtc-flex dtc-flex__vertical"
+    style="flex-wrap: nowrap; justify-content: normal; align-items: normal; gap: 0;"
+  >
+    <div>
+      123
+    </div>
+    <div>
+      123
+    </div>
+    <div>
+      123
+    </div>
+    <div>
+      123
+    </div>
+  </section>
+</DocumentFragment>
+`;

src/flex/__tests__/flex.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+
+import Flex from '..';
+
+const children = (
+    <>
+        <div>123</div>
+        <div>123</div>
+        <div>123</div>
+        <div>123</div>
+    </>
+);
+
+describe('Test Flex Button', () => {
+    beforeEach(() => cleanup());
+
+    it('Match the snapshot', () => {
+        expect(render(<Flex>{children}</Flex>).asFragment()).toMatchSnapshot();
+
+        expect(render(<Flex vertical>{children}</Flex>).asFragment()).toMatchSnapshot(
+            'primary button'
+        );
+    });
+});

src/flex/demos/align.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { Button, Segmented, Slider } from 'antd';
+import { Flex } from 'dt-react-component';
+import type { IFlexProps } from 'dt-react-component/flex';
+
+const alignOptions = ['flex-start', 'center', 'flex-end'];
+const justifyOptions = [
+    'flex-start',
+    'center',
+    'flex-end',
+    'space-between',
+    'space-around',
+    'space-evenly',
+];
+
+export default () => {
+    const [align, setAlign] = useState<IFlexProps['align']>('center');
+    const [justify, setJustify] = useState<IFlexProps['justify']>('center');
+    const [vertical, setVertical] = useState<string>('false');
+    const [gap, setGap] = useState<number>(4);
+    return (
+        <>
+            <p>Select align :</p>
+            <Segmented
+                value={align}
+                options={alignOptions}
+                onChange={(val) => setAlign(val as IFlexProps['align'])}
+            />
+            <p>Select justify :</p>
+            <Segmented
+                value={justify}
+                options={justifyOptions}
+                onChange={(val) => setJustify(val as IFlexProps['justify'])}
+            />
+            <p>Select vertical :</p>
+            <Segmented
+                value={vertical}
+                options={['true', 'false']}
+                onChange={(val) => setVertical(val as string)}
+            />
+            <p>Select gap :</p>
+            <Slider value={gap} max={20} min={0} onChange={setGap} />
+            <br />
+            <br />
+            <Flex
+                gap={gap}
+                vertical={vertical === 'true'}
+                align={align}
+                justify={justify}
+                style={{ border: '1px solid #5D9EFA', height: 200 }}
+            >
+                <Button>button</Button>
+                <Button>button</Button>
+                <Button>button</Button>
+                <Button>button</Button>
+            </Flex>
+        </>
+    );
+};

src/flex/demos/basic.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Flex } from 'dt-react-component';
+
+export default () => {
+    return (
+        <Flex gap={4}>
+            <Button>button</Button>
+            <Button>button</Button>
+            <Button>button</Button>
+            <Button>button</Button>
+        </Flex>
+    );
+};

src/flex/index.md

@@ -0,0 +1,28 @@
+---
+title: Flex 布局
+group: 组件
+toc: content
+---
+
+# Flex 布局
+
+## 何时使用
+
+-   需要 Flex 布局
+
+## 示例
+
+<code src='./demos/basic.tsx' title="基础使用"></code>
+<code src='./demos/align.tsx' title="对齐方式"></code>
+
+## API
+
+| 参数     | 说明                    | 类型                                                                                | 默认值   |
+| -------- | ----------------------- | ----------------------------------------------------------------------------------- | -------- |
+| vertical | flex 主轴的方向是否垂直 | `boolean`                                                                           | `false`  |
+| wrap     | 主轴换行                | [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap)             | `nowrap` |
+| justify  | `justify-content`       | [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | `normal` |
+| align    | `align-items`           | [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items)         | `normal` |
+| flex     | `flex`                  | [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex)                       | `normal` |
+| gap      | `gap`                   | [gap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap)                         | `0`      |
+| children | 展示内容                | `React.ReactNode`                                                                   | -        |

src/flex/index.scss

@@ -0,0 +1,7 @@
+.dtc-flex {
+    display: flex;
+    flex-direction: row;
+    &__vertical {
+        flex-direction: column;
+    }
+}

src/flex/index.tsx

@@ -0,0 +1,53 @@
+import React, { CSSProperties, forwardRef } from 'react';
+import classNames from 'classnames';
+
+import './index.scss';
+
+export interface IFlexProps extends React.DOMAttributes<HTMLElement> {
+    vertical?: boolean;
+    wrap?: React.CSSProperties['flexWrap'];
+    justify?: React.CSSProperties['justifyContent'];
+    align?: React.CSSProperties['alignItems'];
+    flex?: React.CSSProperties['flex'];
+    gap?: React.CSSProperties['gap'];
+    children: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+
+/**
+ * 简单版本的 Ant Design 的 Flex 组件
+ */
+export default forwardRef<HTMLElement, IFlexProps>(function Flex(
+    {
+        className,
+        vertical = false,
+        wrap = 'nowrap',
+        justify = 'normal',
+        align = 'normal',
+        flex = 'normal',
+        gap = 0,
+        style,
+        children,
+        ...rest
+    },
+    ref
+) {
+    return (
+        <section
+            className={classNames('dtc-flex', className, vertical && 'dtc-flex__vertical')}
+            style={{
+                flexWrap: wrap,
+                justifyContent: justify,
+                alignItems: align,
+                flex,
+                gap,
+                ...style,
+            }}
+            ref={ref}
+            {...rest}
+        >
+            {children}
+        </section>
+    );
+});

src/index.ts

@@ -13,6 +13,7 @@ export { default as Empty } from './empty';
 export { default as ErrorBoundary } from './errorBoundary';
 export { default as LoadError } from './errorBoundary/loadError';
 export { default as FilterRules } from './filterRules';
+export { default as Flex } from './flex';
 export { default as Form } from './form';
 export { default as Fullscreen } from './fullscreen';
 export { default as GlobalLoading } from './globalLoading';