✨ feat: add swim lane

ant-design · Jan 3, 2025 · cf366cd · cf366cd
1 parent 518f2e4
commit cf366cd
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 16 deletions.
diff --git a/src/Background/components/SwimBg.tsx b/src/Background/components/SwimBg.tsx
@@ -0,0 +1,71 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    /* flex-direction: column; */
+  `,
+  label: css`
+    text-align: center;
+    line-height: 40px;
+    height: 40px;
+    border-bottom: 1px solid #cbcdce;
+    color: '#A8AAAE';
+  `,
+}));
+
+export interface SwimlaneBackgroundProps {
+  lanes: SwimLaneProps[];
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface SwimLaneProps {
+  id: string;
+  label: string;
+  labelColor?: string;
+  backgroundColor?: string;
+  width?: string;
+  style?: React.CSSProperties;
+}
+
+const SwimlaneBackground = (props: SwimlaneBackgroundProps) => {
+  const { lanes, className: clm, style } = props;
+  const { styles } = useStyles();
+
+  return (
+    <div
+      className={`${styles.container} ${clm}`}
+      style={{
+        ...style,
+      }}
+    >
+      {lanes.map((lane) => (
+        <div
+          key={lane.id}
+          style={{
+            top: 0,
+            height: '100%',
+            width: lane.width || '100%',
+            backgroundColor: lane.backgroundColor || '#FAFAFA',
+            border: '1px solid #cbcdce',
+            ...lane.style,
+          }}
+        >
+          <div
+            className={styles.label}
+            style={{
+              backgroundColor: lane.labelColor || '#f6f8fc',
+            }}
+          >
+            {lane.label}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SwimlaneBackground;
diff --git a/src/Background/demos/swim.tsx b/src/Background/demos/swim.tsx
@@ -0,0 +1,67 @@
+/**
+ * compact: true
+ */
+import { FlowView } from '@ant-design/pro-flow';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import SwimlaneBackground from '../components/SwimBg';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+  `,
+}));
+
+const BackgroundDemo = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <FlowView nodes={[]} edges={[]} miniMap={false} background={false}>
+        <SwimlaneBackground
+          lanes={[
+            {
+              id: '1',
+              label: 'Swimlane 1',
+              labelColor: '#FECCCB',
+            },
+            {
+              id: '2',
+              label: 'Swimlane 2',
+              labelColor: '#FDCDE6',
+            },
+            {
+              id: '3',
+              label: 'Swimlane 3',
+              labelColor: '#CEFFE7',
+            },
+            {
+              id: '4',
+
+              label: 'Swimlane 4',
+              labelColor: '#CDFECE',
+            },
+            {
+              id: '5',
+              label: 'Swimlane 5',
+              labelColor: '#E7FFCC',
+            },
+            {
+              id: '6',
+              label: 'Swimlane 6',
+              labelColor: '#CEFFE7',
+            },
+            {
+              id: '7',
+              label: 'Swimlane 7',
+              labelColor: '#CBE5FF',
+            },
+          ]}
+        ></SwimlaneBackground>
+      </FlowView>
+    </div>
+  );
+});
+
+export default BackgroundDemo;
diff --git a/src/Background/index.zh-CN.md b/src/Background/index.zh-CN.md
@@ -14,28 +14,32 @@ description:
 
 <code src="./demos/index.tsx" center></code>
 
+## Swim Background
+
+<code src="./demos/swim.tsx" center></code>
+
 ## Double Background
 
 <code src="./demos/double.tsx" center></code>
 
 ## APIs
 
-| 属性名       | 类型                          | 描述                                      | 默认值 | 必选 |
-| --------- | --------------------------- | --------------------------------------- | --- | -- |
-| id        | `string`                    | 如果要显示多个背景，则需要                           | -   | -  |
-| className | `string`                    | 自定义类名                                   | -   | -  |
-| variant   | `BackgroundVariant`         | 背景图案类型                                  | -   | -  |
-| gap       | `number \|[number, number]` | 模式之间的差距。您可以传递一个包含两个数字的数组来指定 x 间隙和 y 间隙。 | -   | -  |
-| size      | `number`                    | ” 点 “的半径或” 十字 “的尺寸                      | -   | -  |
-| lineWidth | `number`                    | ” 线 “或” 十字 “的宽度                         | -   | -  |
-| offset    | `number`                    | 图案偏移                                    | -   | -  |
-| color     | `string`                    | 图案颜色                                    | -   | -  |
-| style     | `CSSProperties`             | 样式属性                                    | -   | -  |
+| 属性名    | 类型                        | 描述                                                                     | 默认值 | 必选 |
+| --------- | --------------------------- | ------------------------------------------------------------------------ | ------ | ---- |
+| id        | `string`                    | 如果要显示多个背景，则需要                                               | -      | -    |
+| className | `string`                    | 自定义类名                                                               | -      | -    |
+| variant   | `BackgroundVariant`         | 背景图案类型                                                             | -      | -    |
+| gap       | `number \|[number, number]` | 模式之间的差距。您可以传递一个包含两个数字的数组来指定 x 间隙和 y 间隙。 | -      | -    |
+| size      | `number`                    | ” 点 “的半径或” 十字 “的尺寸                                             | -      | -    |
+| lineWidth | `number`                    | ” 线 “或” 十字 “的宽度                                                   | -      | -    |
+| offset    | `number`                    | 图案偏移                                                                 | -      | -    |
+| color     | `string`                    | 图案颜色                                                                 | -      | -    |
+| style     | `CSSProperties`             | 样式属性                                                                 | -      | -    |
 
 ### BackgroundVariant
 
-| 属性名   | 类型       | 描述 | 默认值 | 必选 |
-| ----- | -------- | -- | --- | -- |
-| lines | `string` | 线  | -   | -  |
-| dots  | `string` | 点  | -   | -  |
-| cross | `string` | 十字 | -   | -  |
+| 属性名 | 类型     | 描述 | 默认值 | 必选 |
+| ------ | -------- | ---- | ------ | ---- |
+| lines  | `string` | 线   | -      | -    |
+| dots   | `string` | 点   | -      | -    |
+| cross  | `string` | 十字 | -      | -    |