diff --git a/src/components/Divider/_style.scss b/src/components/Divider/_style.scss new file mode 100644 index 0000000..a6d8d40 --- /dev/null +++ b/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%); +} diff --git a/src/components/Divider/divider.stories.tsx b/src/components/Divider/divider.stories.tsx index f6ba2e6..0c24446 100644 --- a/src/components/Divider/divider.stories.tsx +++ b/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 = () => ; +const defaultDivider = () => ( + <> + Text + 我是一段文本 + + 我是一段文本 + +); -storiesOf("Divider 分割线", module).add("Divider", defaultDivider); +const plainTextDivider = () => Text; + +const textOrientation = () => ( + <> + + Text + + 我是一段文本 + + Text + + +); + +const verticalDivider = () => ( + <> + Text + + Link + + Link + +); + +storiesOf("Divider 分割线", module) + .add("默认分割线", defaultDivider) + .add("普通文本", plainTextDivider) + .add("文字对齐", textOrientation) + .add("垂直方向", verticalDivider); diff --git a/src/components/Divider/index.tsx b/src/components/Divider/index.tsx index 9c1d598..041dc12 100644 --- a/src/components/Divider/index.tsx +++ b/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 = (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
{children}
; + if (type === "vertical" && children) { + console.warn("children not working in vertical mode"); + } + + return ( +
+ {type === "vertical" ? null : children ? ( + {children} + ) : null} +
+ ); +}; + +Divider.defaultProps = { + plain: false, + orientation: "center", + type: "horizontal", + dashed: false, }; export default Divider; diff --git a/src/styles/index.scss b/src/styles/index.scss index d08e236..3374646 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -25,3 +25,6 @@ //upload @import "../components/Upload/style"; + +//Divider +@import "../components/Divider/style";