perf: 完善Divider

src/components/Divider/_style.scss

@@ -0,0 +1,68 @@
+.dui-divider {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: 24px 0;
+
+  &::after {
+    position: relative;
+    border-bottom: 1px solid $gray-400;
+    width: 50%;
+    content: "";
+  }
+
+  &::before {
+    position: relative;
+    border-bottom: 1px solid $gray-400;
+    width: 50%;
+    content: "";
+  }
+
+  .ant-divider-inner-text {
+    padding: 0 1em;
+    color: $black;
+    white-space: nowrap;
+    display: inline-block;
+    font-weight: 500;
+  }
+}
+
+.dui-divider-plain {
+  .ant-divider-inner-text {
+    padding: 0 1em;
+    color: unset;
+    font-weight: unset;
+  }
+}
+
+.ant-divider-with-text-left {
+  &::before {
+    width: 5%;
+  }
+
+  &::after {
+    width: 95%;
+  }
+}
+
+.ant-divider-with-text-right {
+  &::before {
+    width: 95%;
+  }
+
+  &::after {
+    width: 5%;
+  }
+}
+
+.dui-divider-vertical {
+  position: relative;
+  top: -0.06em;
+  display: inline;
+  height: 0.9em;
+  margin: 0 8px;
+  vertical-align: middle;
+  border-top: 0;
+  border-left: 1px solid rgb(0 0 0 / 6%);
+}

src/components/Divider/divider.stories.tsx

@@ -1,9 +1,43 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-// import { action } from "@storybook/addon-actions";
 
 import Divider from "./index";
 
-const defaultDivider = () => <Divider></Divider>;
+const defaultDivider = () => (
+  <>
+    <Divider>Text</Divider>
+    <span>我是一段文本</span>
+    <Divider />
+    <span>我是一段文本</span>
+  </>
+);
 
-storiesOf("Divider 分割线", module).add("Divider", defaultDivider);
+const plainTextDivider = () => <Divider plain>Text</Divider>;
+
+const textOrientation = () => (
+  <>
+    <Divider plain orientation="left">
+      Text
+    </Divider>
+    <span>我是一段文本</span>
+    <Divider plain orientation="right">
+      Text
+    </Divider>
+  </>
+);
+
+const verticalDivider = () => (
+  <>
+    Text
+    <Divider type="vertical" />
+    <a href="#">Link</a>
+    <Divider type="vertical" />
+    <a href="#">Link</a>
+  </>
+);
+
+storiesOf("Divider 分割线", module)
+  .add("默认分割线", defaultDivider)
+  .add("普通文本", plainTextDivider)
+  .add("文字对齐", textOrientation)
+  .add("垂直方向", verticalDivider);

src/components/Divider/index.tsx

@@ -1,5 +1,4 @@
-import React from // , { ReactNode }
-"react";
+import React from "react"; // , { ReactNode }
 import className from "classnames";
 
 export type OrientationType = "left" | "right" | "center";
@@ -29,10 +28,33 @@ export interface DividerProps {
  * ~~~
  */
 const Divider: React.FC<DividerProps> = (props) => {
-  const { type = "horizontal", children } = props;
-  const classNames = className("dui-divider", `dui-divider-${type}`);
+  const { type = "horizontal", children, dashed, plain, orientation } = props;
+  const classNames = className(
+    "dui-divider",
+    `dui-divider-${type}`,
+    { [`ant-divider-with-text-${orientation}`]: type == "horizontal" },
+    { "dui-divider-dashed": dashed && type == "horizontal" },
+    { "dui-divider-plain": plain && type == "horizontal" }
+  );
 
-  return <div className={classNames}>{children}</div>;
+  if (type === "vertical" && children) {
+    console.warn("children not working in vertical mode");
+  }
+
+  return (
+    <div className={classNames}>
+      {type === "vertical" ? null : children ? (
+        <span className="ant-divider-inner-text">{children}</span>
+      ) : null}
+    </div>
+  );
+};
+
+Divider.defaultProps = {
+  plain: false,
+  orientation: "center",
+  type: "horizontal",
+  dashed: false,
 };
 
 export default Divider;

src/styles/index.scss

@@ -25,3 +25,6 @@
 
 //upload
 @import "../components/Upload/style";
+
+//Divider
+@import "../components/Divider/style";