From 5c56228870344f5e60ed2a6387b48353ac3efe6e Mon Sep 17 00:00:00 2001
From: Jandiasnow <88074479@qq.com>
Date: Tue, 9 Apr 2024 18:10:29 +0800
Subject: [PATCH] feat: add Divider Component

---
 src/Divider/demos/Playground.tsx | 39 ++++++++++++++++
 src/Divider/demos/index.tsx      | 49 ++++++++++++++++++++
 src/Divider/index.md             | 48 ++++++++++++++++++++
 src/Divider/index.tsx            | 76 ++++++++++++++++++++++++++++++++
 src/Divider/style.ts             | 16 +++++++
 src/index.ts                     |  1 +
 6 files changed, 229 insertions(+)
 create mode 100644 src/Divider/demos/Playground.tsx
 create mode 100644 src/Divider/demos/index.tsx
 create mode 100644 src/Divider/index.md
 create mode 100644 src/Divider/index.tsx
 create mode 100644 src/Divider/style.ts

diff --git a/src/Divider/demos/Playground.tsx b/src/Divider/demos/Playground.tsx
new file mode 100644
index 00000000..1bc94d08
--- /dev/null
+++ b/src/Divider/demos/Playground.tsx
@@ -0,0 +1,39 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import type { DividerProps } from '@yuntijs/ui';
+import { Divider } from '@yuntijs/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const control: DividerProps | any = useControls(
+    {
+      mode: {
+        options: ['expanded', 'line', 'default'],
+        value: 'line',
+      },
+      defaultOpen: false,
+      content: 'content',
+      iconPlacement: {
+        options: ['left', 'right'],
+        value: 'left',
+      },
+      type: {
+        options: ['horizontal', 'vertical'],
+        value: 'horizontal',
+      },
+      orientation: {
+        options: ['left', 'right', 'center'],
+        value: 'left',
+      },
+      orientationMargin: 10,
+      children: '',
+      dashed: false,
+      plain: false,
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Divider {...control} />
+    </StoryBook>
+  );
+};
diff --git a/src/Divider/demos/index.tsx b/src/Divider/demos/index.tsx
new file mode 100644
index 00000000..c7299f48
--- /dev/null
+++ b/src/Divider/demos/index.tsx
@@ -0,0 +1,49 @@
+import { Divider } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <div style={{ width: '100%' }}>
+      <div>
+        <Divider mode="line" type="horizontal" />
+      </div>
+      <div>
+        分割线左侧
+        <Divider mode="line" type="vertical" />
+        分割线右侧
+      </div>
+
+      <div>
+        <Divider
+          content={
+            <div>
+              The YuntiUI components are inspired by LobeUI and developed based on Antd components,
+              fully compatible with Antd components, and it is recommended to use antd-style as the
+              default css-in-js styling solution.
+            </div>
+          }
+          dashed={true}
+          defaultOpen={true}
+          iconPlacement="left"
+          mode="expanded"
+          orientation="left"
+          orientationMargin={0}
+        >
+          YuntiUI
+        </Divider>
+      </div>
+
+      <div>
+        <Divider
+          dashed={true}
+          defaultOpen={true}
+          iconPlacement="left"
+          mode="default"
+          orientation="left"
+          orientationMargin={0}
+        >
+          YuntiUI
+        </Divider>
+      </div>
+    </div>
+  );
+};
diff --git a/src/Divider/index.md b/src/Divider/index.md
new file mode 100644
index 00000000..70ac3ddd
--- /dev/null
+++ b/src/Divider/index.md
@@ -0,0 +1,48 @@
+---
+nav: Components
+group: Layout
+title: Divider
+description: A divider line separates different content.
+---
+
+## Usage
+
+based on antd [Divider](https://ant.design/components/divider-cn/) component.
+
+### Simple usage
+
+```jsx | pure
+import { Divider } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Divider
+      mode="expanded"
+      defaultOpen={true}
+      content={
+        <div>
+          The YuntiUI components are inspired by LobeUI and developed based on Antd components,
+          fully compatible with Antd components, and it is recommended to use antd-style as the
+          default css-in-js styling solution.
+        </div>
+      }
+      iconPlacement="left"
+      orientation="left"
+      orientationMargin={0}
+      dashed={true}
+    >
+      YuntiUI
+    </Divider>
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>
diff --git a/src/Divider/index.tsx b/src/Divider/index.tsx
new file mode 100644
index 00000000..1f434b19
--- /dev/null
+++ b/src/Divider/index.tsx
@@ -0,0 +1,76 @@
+import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons';
+import { Divider as AntdDivider, type DividerProps as AntdDividerProps, Space } from 'antd';
+import React, { useState } from 'react';
+
+import { useStyles } from './style';
+
+export interface CustomDividerProps {
+  /**
+   * @description type of the divider
+   * @default 'default'
+   */
+  mode?: 'expanded' | 'line' | 'default';
+  /**
+   * @description Default whether to expand. This parameter is available only when mode is expanded
+   * @default 'false'
+   */
+  defaultOpen?: boolean;
+  /**
+   * @description Expand content. This parameter is available only when mode is expanded
+   * @default '-'
+   */
+  content?: React.ReactNode;
+  /**
+   * @description The position of icon. This parameter is available only when mode is expanded and default
+   * @default 'left'
+   */
+  iconPlacement?: 'left' | 'right';
+  /**
+   * @description custom open icon. This parameter is available only when mode is expanded
+   * @default '-'
+   */
+  openIcon?: React.ReactNode;
+  /**
+   * @description custom close icon. This parameter is available only when mode is expanded
+   * @default '-'
+   */
+  closeIcon?: React.ReactNode;
+}
+export interface DividerProps extends AntdDividerProps, CustomDividerProps {}
+
+export const Divider: React.FC<DividerProps> = props => {
+  const { mode, content, defaultOpen, iconPlacement, openIcon, closeIcon, ...otherProps } = props;
+
+  const { styles } = useStyles({});
+
+  const canExpanded = mode === 'expanded';
+  const [open, setOpen] = useState<boolean | undefined>(defaultOpen);
+
+  const closeIconDom = closeIcon ? closeIcon : <MinusSquareOutlined />;
+  const openIconDom = openIcon ? openIcon : <PlusSquareOutlined />;
+  const iconDom = canExpanded && <span>{open ? closeIconDom : openIconDom}</span>;
+  if (mode === 'line') {
+    return <AntdDivider {...otherProps} />;
+  }
+  return (
+    <>
+      <AntdDivider {...otherProps}>
+        <span
+          className={canExpanded ? styles.custom : ''}
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          <Space size={6}>
+            {iconPlacement !== 'right' && iconDom}
+            <span>{props.children}</span>
+            {iconPlacement === 'right' && iconDom}
+          </Space>
+        </span>
+      </AntdDivider>
+      {canExpanded && <div style={{ display: open ? 'block' : 'none' }}>{content}</div>}
+    </>
+  );
+};
+
+export default Divider;
diff --git a/src/Divider/style.ts b/src/Divider/style.ts
new file mode 100644
index 00000000..97de90b6
--- /dev/null
+++ b/src/Divider/style.ts
@@ -0,0 +1,16 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(
+  ({ css, token }) => {
+    return {
+      custom: css`
+        cursor: pointer;
+        color: ${token.colorPrimary};
+        &:hover {
+          color: ${token.colorPrimaryHover};
+        }
+      `,
+    };
+  },
+  { hashPriority: 'low' }
+);
diff --git a/src/index.ts b/src/index.ts
index d299ae91..a9f5ecbd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,6 +9,7 @@ export * from './Tree';
 export * from './Alert';
 export * from './Card';
 export * from './Descriptions';
+export * from './Divider';
 
 // ~ antd
 export {