refactor(Dvider): 重构分割线组件 (#832,#826)

packages/react-divider/package.json

@@ -41,7 +41,8 @@
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "styled-components": "~5.3.5"
   },
   "dependencies": {
     "@uiw/utils": "^4.21.2"

packages/react-divider/src/index.tsx

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

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

@@ -0,0 +1,89 @@
+import styled from 'styled-components';
+import { getThemeVariantValue } from '@uiw/utils';
+
+interface DividerProps {
+  defaultTheme?: Record<string, string | number>;
+}
+
+const Divider = styled.div<DividerProps>`
+  font-size: 16px;
+  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%);
+    }
+  }
+
+  &.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;
+    }
+  }
+
+  .w-divider-inner-text {
+    display: inline-block;
+    padding: 0 10px;
+  }
+
+  &.w-divider-dashed:not(.w-divider-with-text) {
+    background: none;
+    border-top: 1px dashed ${(props) => getThemeVariantValue(props, 'borderTopColorDividerWithText')};
+  }
+`;
+
+Divider.defaultProps = {
+  defaultTheme: {
+    backgroundColorDividerBase: '#e8e8e8',
+    borderTopColorDividerWithText: '#e8e8e8',
+  },
+};
+
+export default Divider;

theme/themeVariant.json5

@@ -49,6 +49,12 @@
   // Panel
   colorCollapsePanelBase: 'rgba(0, 0, 0, 0.65)',
 
+  // -------------------------- divider 分割线 ----------------------------------
+  // 组件内部公共
+  borderTopColorDividerWithText: '#e8e8e8',
+  // 组件
+  backgroundColorDividerBase: '#e8e8e8',
+
   // ---------------------------button 按钮部分 ------------------------------------
   colorButtonBase: '#fff',
   // 最小高度