Skip to content

Commit c821f52

Browse files
mortalYoungmortalYoung
authored
feat(flex): support new Flex component (#553)
1 parent f774df3 commit c821f52

File tree

8 files changed

+232
-0
lines changed

8 files changed

+232
-0
lines changed

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Test Flex Button Match the snapshot 1`] = `
4+
<DocumentFragment>
5+
<section
6+
class="dtc-flex"
7+
style="flex-wrap: nowrap; justify-content: normal; align-items: normal; gap: 0;"
8+
>
9+
<div>
10+
123
11+
</div>
12+
<div>
13+
123
14+
</div>
15+
<div>
16+
123
17+
</div>
18+
<div>
19+
123
20+
</div>
21+
</section>
22+
</DocumentFragment>
23+
`;
24+
25+
exports[`Test Flex Button Match the snapshot: primary button 1`] = `
26+
<DocumentFragment>
27+
<section
28+
class="dtc-flex dtc-flex__vertical"
29+
style="flex-wrap: nowrap; justify-content: normal; align-items: normal; gap: 0;"
30+
>
31+
<div>
32+
123
33+
</div>
34+
<div>
35+
123
36+
</div>
37+
<div>
38+
123
39+
</div>
40+
<div>
41+
123
42+
</div>
43+
</section>
44+
</DocumentFragment>
45+
`;

‎src/flex/__tests__/flex.test.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { cleanup, render } from '@testing-library/react';
3+
4+
import Flex from '..';
5+
6+
const children = (
7+
<>
8+
<div>123</div>
9+
<div>123</div>
10+
<div>123</div>
11+
<div>123</div>
12+
</>
13+
);
14+
15+
describe('Test Flex Button', () => {
16+
beforeEach(() => cleanup());
17+
18+
it('Match the snapshot', () => {
19+
expect(render(<Flex>{children}</Flex>).asFragment()).toMatchSnapshot();
20+
21+
expect(render(<Flex vertical>{children}</Flex>).asFragment()).toMatchSnapshot(
22+
'primary button'
23+
);
24+
});
25+
});

‎src/flex/demos/align.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { useState } from 'react';
2+
import { Button, Segmented, Slider } from 'antd';
3+
import { Flex } from 'dt-react-component';
4+
import type { IFlexProps } from 'dt-react-component/flex';
5+
6+
const alignOptions = ['flex-start', 'center', 'flex-end'];
7+
const justifyOptions = [
8+
'flex-start',
9+
'center',
10+
'flex-end',
11+
'space-between',
12+
'space-around',
13+
'space-evenly',
14+
];
15+
16+
export default () => {
17+
const [align, setAlign] = useState<IFlexProps['align']>('center');
18+
const [justify, setJustify] = useState<IFlexProps['justify']>('center');
19+
const [vertical, setVertical] = useState<string>('false');
20+
const [gap, setGap] = useState<number>(4);
21+
return (
22+
<>
23+
<p>Select align :</p>
24+
<Segmented
25+
value={align}
26+
options={alignOptions}
27+
onChange={(val) => setAlign(val as IFlexProps['align'])}
28+
/>
29+
<p>Select justify :</p>
30+
<Segmented
31+
value={justify}
32+
options={justifyOptions}
33+
onChange={(val) => setJustify(val as IFlexProps['justify'])}
34+
/>
35+
<p>Select vertical :</p>
36+
<Segmented
37+
value={vertical}
38+
options={['true', 'false']}
39+
onChange={(val) => setVertical(val as string)}
40+
/>
41+
<p>Select gap :</p>
42+
<Slider value={gap} max={20} min={0} onChange={setGap} />
43+
<br />
44+
<br />
45+
<Flex
46+
gap={gap}
47+
vertical={vertical === 'true'}
48+
align={align}
49+
justify={justify}
50+
style={{ border: '1px solid #5D9EFA', height: 200 }}
51+
>
52+
<Button>button</Button>
53+
<Button>button</Button>
54+
<Button>button</Button>
55+
<Button>button</Button>
56+
</Flex>
57+
</>
58+
);
59+
};

‎src/flex/demos/basic.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { Button } from 'antd';
3+
import { Flex } from 'dt-react-component';
4+
5+
export default () => {
6+
return (
7+
<Flex gap={4}>
8+
<Button>button</Button>
9+
<Button>button</Button>
10+
<Button>button</Button>
11+
<Button>button</Button>
12+
</Flex>
13+
);
14+
};

‎src/flex/index.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Flex 布局
3+
group: 组件
4+
toc: content
5+
---
6+
7+
# Flex 布局
8+
9+
## 何时使用
10+
11+
- 需要 Flex 布局
12+
13+
## 示例
14+
15+
<code src='./demos/basic.tsx' title="基础使用"></code>
16+
<code src='./demos/align.tsx' title="对齐方式"></code>
17+
18+
## API
19+
20+
| 参数 | 说明 | 类型 | 默认值 |
21+
| -------- | ----------------------- | ----------------------------------------------------------------------------------- | -------- |
22+
| vertical | flex 主轴的方向是否垂直 | `boolean` | `false` |
23+
| wrap | 主轴换行 | [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) | `nowrap` |
24+
| justify | `justify-content` | [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | `normal` |
25+
| align | `align-items` | [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | `normal` |
26+
| flex | `flex` | [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | `normal` |
27+
| gap | `gap` | [gap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap) | `0` |
28+
| children | 展示内容 | `React.ReactNode` | - |

‎src/flex/index.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.dtc-flex {
2+
display: flex;
3+
flex-direction: row;
4+
&__vertical {
5+
flex-direction: column;
6+
}
7+
}

‎src/flex/index.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { CSSProperties, forwardRef } from 'react';
2+
import classNames from 'classnames';
3+
4+
import './index.scss';
5+
6+
export interface IFlexProps extends React.DOMAttributes<HTMLElement> {
7+
vertical?: boolean;
8+
wrap?: React.CSSProperties['flexWrap'];
9+
justify?: React.CSSProperties['justifyContent'];
10+
align?: React.CSSProperties['alignItems'];
11+
flex?: React.CSSProperties['flex'];
12+
gap?: React.CSSProperties['gap'];
13+
children: React.ReactNode;
14+
className?: string;
15+
style?: CSSProperties;
16+
}
17+
18+
/**
19+
* 简单版本的 Ant Design 的 Flex 组件
20+
*/
21+
export default forwardRef<HTMLElement, IFlexProps>(function Flex(
22+
{
23+
className,
24+
vertical = false,
25+
wrap = 'nowrap',
26+
justify = 'normal',
27+
align = 'normal',
28+
flex = 'normal',
29+
gap = 0,
30+
style,
31+
children,
32+
...rest
33+
},
34+
ref
35+
) {
36+
return (
37+
<section
38+
className={classNames('dtc-flex', className, vertical && 'dtc-flex__vertical')}
39+
style={{
40+
flexWrap: wrap,
41+
justifyContent: justify,
42+
alignItems: align,
43+
flex,
44+
gap,
45+
...style,
46+
}}
47+
ref={ref}
48+
{...rest}
49+
>
50+
{children}
51+
</section>
52+
);
53+
});

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export { default as Empty } from './empty';
1313
export { default as ErrorBoundary } from './errorBoundary';
1414
export { default as LoadError } from './errorBoundary/loadError';
1515
export { default as FilterRules } from './filterRules';
16+
export { default as Flex } from './flex';
1617
export { default as Form } from './form';
1718
export { default as Fullscreen } from './fullscreen';
1819
export { default as GlobalLoading } from './globalLoading';

0 commit comments

Comments
 (0)