feat(Divider): 增加分割线标题的位置调整功能 & 更新文档 (#325)

* fix(Divider):优化 gutter属性不生效问题

* feat(Divider): 增加分割线标题的位置调整功能 & 更新文档

Co-authored-by: 杨楠 <[email protected]>

Author: Amber-Nan

example/examples/src/routes/Divider/index.tsx

@@ -27,6 +27,24 @@ export default class DividerView extends React.Component<DividerViewProps> {
               <Divider label="调整间隔" gutter={30} />
               <Text>分割线</Text>
             </Card>
+
+            <Card title="分割线标题位置">
+              <Text>分割线</Text>
+              <Divider
+                label="left"
+                orientation="left"
+                labelStyle={{fontWeight: 'bold'}}
+              />
+              <Text>分割线</Text>
+              <Divider label="center" labelStyle={{fontWeight: 'bold'}} />
+              <Text>分割线</Text>
+              <Divider
+                label="right"
+                orientation="right"
+                labelStyle={{fontWeight: 'bold'}}
+              />
+            </Card>
+
             <Card title="纵向分割线">
               <View style={{height: 200}}>
                 <Divider type="vertical" label="OR" />

packages/core/src/Divider/README.md

@@ -1,7 +1,7 @@
 Divider 分割线
 ---
 
-<img src='https://user-images.githubusercontent.com/66067296/137705210-c1bd655f-8b0c-4ee1-b376-0bc59c573a61.png' alt='Divider' style='zoom:33%;' />
+<img src='https://user-images.githubusercontent.com/66067296/140264880-2e3ad121-d86f-4625-8149-7bf452b348db.png' alt='Divider' style='zoom:33%;' />
 
 区隔内容的分割线。
 
@@ -25,6 +25,27 @@ function Demo() {
 }
 ```
 
+### 分割线标题位置
+
+```jsx
+import { Fragment } from 'react';
+import { View, Text } from 'react-native';
+import { Divider } from '@uiw/react-native';
+
+function Demo() {
+  return (
+    <Fragment>
+      <Text>分割线</Text>
+      <Divider label="left" orientation="left" labelStyle={{ fontWeight: 'bold' }} />
+      <Text>分割线</Text>
+      <Divider label="center" labelStyle={{ fontWeight: 'bold' }} />
+      <Text>分割线</Text>
+      <Divider label="right" orientation="right" labelStyle={{ fontWeight: 'bold' }} />
+    </Fragment>
+  );
+}
+```
+
 ### 纵向分割线
 
 ```jsx
@@ -48,4 +69,5 @@ function Demo() {
 |------|------|-----|------|
 | `label` | 分割线标题，文本内容 | String | - |
 | `type` | 水平还是垂直类型 | `horizontal`, `vertical` | `horizontal` |
-| `gutter` | 间距，更具 `type` 来设置上下或者左右间距 | Number | `8` |
+| `gutter` | 间距，更具 `type` 来设置上下或者左右间距 | Number | `8` |
+| `orientation` | 分割线标题的位置 |  `left`, `right`,`center`| `center` |

packages/core/src/Divider/index.tsx

@@ -8,21 +8,26 @@ export interface DividerProps extends ViewProps {
   lineStyle?: ViewProps['style'];
   labelStyle?: TextProps['style'];
   type?: 'horizontal' | 'vertical';
+  /** 分割线标题的位置 */
+  orientation?: 'left' | 'right' | 'center';
 }
 
 export default class Divider extends Component<DividerProps> {
   static defaultProps: DividerProps = {
     type: 'horizontal',
     gutter: 8,
+    orientation: 'center',
   };
   render() {
-    let { children, style, gutter, label, lineStyle, labelStyle, type, ...restProps } = this.props;
+    let { children, style, gutter, label, lineStyle, labelStyle, type, orientation, ...restProps } = this.props;
     if (typeof children === 'string') {
       label = children;
       children = null;
     }
     const lineStyleArr = [];
     const warpperStyles = [];
+    const startStyles = [];
+    const endStyles = [];
     if (type === 'horizontal') {
       warpperStyles.unshift(styles.horizontal);
       lineStyleArr.unshift(styles.lineHorizontal);
@@ -42,12 +47,19 @@ export default class Divider extends Component<DividerProps> {
     if (lineStyle && typeof lineStyle === 'number') {
       lineStyle = StyleSheet.flatten(lineStyle);
     }
-    const line = <View style={[styles.line, ...lineStyleArr, lineStyle]} />;
+    if (orientation === 'left') {
+      endStyles.unshift({ flexGrow: 100 });
+    }
+    if (orientation === 'right') {
+      startStyles.unshift({ flexGrow: 100 });
+    }
+    const lineStart = <View style={[styles.lineStart, ...lineStyleArr, ...startStyles, lineStyle]} />;
+    const lineEnd = <View style={[styles.lineEnd, ...lineStyleArr, ...endStyles, lineStyle]} />;
     return (
       <View style={[styles.warpper, ...warpperStyles, style]} {...restProps}>
-        {line}
+        {lineStart}
         {children}
-        {children && line}
+        {children && lineEnd}
       </View>
     );
   }
@@ -69,10 +81,16 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
   },
-  line: {
+  lineStart: {
     backgroundColor: 'rgb(229, 229, 229)',
     flexDirection: 'column',
-    flexShrink: 1,
+    flexShrink: 100,
+    flexGrow: 1,
+  },
+  lineEnd: {
+    backgroundColor: 'rgb(229, 229, 229)',
+    flexDirection: 'column',
+    flexShrink: 100,
     flexGrow: 1,
   },
   lineHorizontal: {