refactor(Divider): 重构分割线组件

packages/react-collapse/src/style/index.ts

@@ -53,8 +53,8 @@ export const CollapseItem = styled.div<CollapseItemWarpProps>`
     border-radius: 0 0 5px 5px;
     border-bottom: 0 solid ${(props) => getThemeVariantValue(props, 'borderColorCollapseBase')};
     ${(props) =>
-      !props.isActive &&
-      css`
+    !props.isActive &&
+    css`
         border-top: 0 solid ${(props) => getThemeVariantValue(props, 'borderColorCollapseBase')};
       `}
   }

packages/react-divider/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IProps, HTMLDivProps } from '@uiw/utils';
-import DividerWarp from './style';
+import DividerWarp, { DividerInnerText } from './style';
 
 export interface DividerProps extends IProps, HTMLDivProps {
   dashed?: boolean;
@@ -30,8 +30,16 @@ export default React.forwardRef<HTMLDivElement, DividerProps>((props, ref) => {
     .join(' ')
     .trim();
   return (
-    <DividerWarp className={cls} {...restProps} ref={ref}>
-      {children && <span className={`${prefixCls}-inner-text`}>{children}</span>}
+    <DividerWarp
+      className={cls}
+      {...restProps}
+      ref={ref}
+      prefixCls={prefixCls}
+      type={type}
+      align={align}
+      dashed={dashed}
+    >
+      {children && <DividerInnerText className={`${prefixCls}-inner-text`}>{children}</DividerInnerText>}
     </DividerWarp>
   );
 });

packages/react-divider/src/style/index.ts

@@ -1,86 +1,113 @@
-import styled from 'styled-components';
-import { getThemeVariantValue } from '@uiw/utils';
+import styled, { css } from 'styled-components';
+import { getThemeVariantValue, ThemeVariantValueOptions } from '@uiw/utils';
+import { DividerProps } from 'src';
 
-interface DividerProps {
-  defaultTheme?: Record<string, string | number>;
-}
+interface DividerWarpProps
+  extends ThemeVariantValueOptions,
+    Pick<DividerProps, 'dashed' | 'type' | 'align' | 'prefixCls'> {}
 
-const Divider = styled.div<DividerProps>`
-  font-size: 16px;
+const Divider = styled.div<DividerWarpProps>`
+  font-size: ${(props) => getThemeVariantValue(props, 'fontSizeLarge')};
   line-height: 16px;
   box-sizing: border-box;
   padding: 0;
   list-style: none;
   background: ${(props) => getThemeVariantValue(props, 'backgroundColorDividerBase')};
 
-  &.w-divider-vertical {
-    margin: 0 8px;
-    display: inline-block;
-    height: 0.9em;
-    width: 1px;
-    vertical-align: middle;
-    position: relative;
-    top: -0.06em;
-  }
-
-  &.w-divider-horizontal {
-    height: 1px;
-    width: 100%;
-    margin: 16px 0;
-  }
-
-  &.w-divider-horizontal.w-divider-with-text {
-    display: flex;
-    white-space: nowrap;
-    text-align: center;
-    background: transparent;
-    font-weight: 500;
-    color: #353535;
-    height: inherit;
-    margin: 16px 0;
-
-    &:before,
-    &:after {
-      content: '';
-      display: table-cell;
-      position: relative;
-      top: 50%;
-      width: 50%;
-      border-top: 1px solid ${(props) => getThemeVariantValue(props, 'borderTopColorDividerWithText')};
-      transform: translateY(50%);
+  ${(props) => {
+    if (props.prefixCls) {
+      if (props.type === 'vertical') {
+        return css`
+          margin: 0 8px;
+          display: inline-block;
+          height: 0.9em;
+          width: 1px;
+          vertical-align: middle;
+          position: relative;
+          top: -0.06em;
+        `;
+      } else if (props.type === 'horizontal') {
+        return css`
+          height: 1px;
+          width: 100%;
+          margin: 16px 0;
+          ${props.children &&
+          css`
+            display: flex;
+            white-space: nowrap;
+            text-align: center;
+            background: transparent;
+            font-weight: 500;
+            color: #353535;
+            height: inherit;
+            margin: 16px 0;
+            &:before,
+            &:after {
+              content: '';
+              display: table-cell;
+              position: relative;
+              top: 50%;
+              width: 50%;
+              border-top: 1px solid ${(props) => getThemeVariantValue(props, 'borderTopColorDividerWithText')};
+              transform: translateY(50%);
+            }
+          `}
+        `;
+      }
     }
-  }
-
-  &.w-divider-left.w-divider-with-text::before,
-  &.w-divider-right.w-divider-with-text::after {
-    width: 5%;
-  }
+  }}
 
-  &.w-divider-left.w-divider-with-text::after,
-  &.w-divider-right.w-divider-with-text::before {
-    width: 95%;
-  }
-
-  &.w-divider-dashed.w-divider-with-text {
-    &::before,
-    &::after {
-      border-top-style: dashed;
+  ${(props) => {
+    if (props.prefixCls && props.children) {
+      if (props.align === 'left') {
+        return css`
+          ::before {
+            width: 5%;
+          }
+          ::after {
+            width: 95%;
+          }
+        `;
+      } else if (props.align === 'right') {
+        return css`
+          ::after {
+            width: 5%;
+          }
+          ::before {
+            width: 95%;
+          }
+        `;
+      }
     }
-  }
+  }}
 
-  .w-divider-inner-text {
-    display: inline-block;
-    padding: 0 10px;
-  }
+  ${(props) => {
+    if (props.dashed) {
+      if (props.children) {
+        return css`
+          &::before,
+          &::after {
+            border-top-style: dashed;
+          }
+        `;
+      } else {
+        return css`
+          background: none;
+          border-top: 1px dashed ${(props) => getThemeVariantValue(props, 'borderTopColorDividerWithText')};
+        `;
+      }
+    }
+  }}
+`;
 
-  &.w-divider-dashed:not(.w-divider-with-text) {
-    background: none;
-    border-top: 1px dashed ${(props) => getThemeVariantValue(props, 'borderTopColorDividerWithText')};
-  }
+export const DividerInnerText = styled.div`
+  display: inline-block;
+  padding: 0 10px;
 `;
 
 Divider.defaultProps = {
   defaultTheme: {
+    fontSizeLarge: '16px',
     backgroundColorDividerBase: '#e8e8e8',
     borderTopColorDividerWithText: '#e8e8e8',
   },