fix(TreeSelect):组件样式调整

ChenlingasMx · ChenlingasMx · commit 73a41687ddd9 · 2021-12-24T14:13:47.000+08:00
diff --git a/example/examples/src/routes/TreeSelect/index.tsx b/example/examples/src/routes/TreeSelect/index.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import {TreeSelect} from '@uiw/react-native';
-import {View} from 'react-native';
+import {TreeSelect, DragDrawer, Icon} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
-const {Header, Body, Footer} = Layout;
+const {Header} = Layout;
 
 export interface TreeSelectViewProps extends ComProps {}
 
@@ -95,22 +94,23 @@ export default class TreeSelectDemo extends React.Component<TreeSelectViewProps>
       },
     ];
     return (
-      <Container>
-        <Layout>
-          <Header title={title} description={description} />
-          <Body>
-            <TreeSelect
-              defaultValue={['01', '01-1']}
-              activeColor="#fd8a00"
-              options={option}
-              onChange={(value: any, nodes: any) => {
-                console.log(value, nodes);
-              }}
-            />
-          </Body>
-          <Footer />
-        </Layout>
-      </Container>
+      <React.Fragment>
+        <DragDrawer drawerHeight={500}>
+          <TreeSelect
+            defaultValue={['01', '01-1']}
+            activeColor="#fd8a00"
+            options={option}
+            onChange={(value: any, nodes: any) => {
+              console.log(value, nodes);
+            }}
+          />
+        </DragDrawer>
+        <Container>
+          <Layout>
+            <Header title={title} description={description} />
+          </Layout>
+        </Container>
+      </React.Fragment>
     );
   }
 }
diff --git a/packages/core/src/TreeSelect/styles.tsx b/packages/core/src/TreeSelect/styles.tsx
@@ -7,4 +7,25 @@ export const style = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  active_first_item: {
+    backgroundColor: '#fff',
+  },
+  not_active_first_item: {
+    backgroundColor: '#f6f7f9',
+  },
+  active_nth_item: {
+    backgroundColor: '#fef4f3',
+    borderWidth: 1,
+    borderRadius: 5,
+    marginLeft: 10,
+    marginBottom: 10,
+  },
+  not_active_nth_item: {
+    backgroundColor: '#f6f7f9',
+    borderColor: '#fff',
+    borderWidth: 1,
+    borderRadius: 5,
+    marginLeft: 10,
+    marginBottom: 10,
+  },
 });
diff --git a/packages/core/src/TreeSelect/tree-select.tsx b/packages/core/src/TreeSelect/tree-select.tsx
@@ -70,9 +70,41 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
     });
   };
 
+  // item样式
+  const activeStyles = (index: number, isActive: boolean) => {
+    let styles;
+    // 选中第一排
+    if (isActive && index === 0) {
+      styles = {
+        ...style.active_first_item,
+      };
+    }
+    // 未选中第一排
+    if (!isActive && index === 0) {
+      styles = {
+        ...style.not_active_first_item,
+      };
+    }
+    // 选中后排
+    if (isActive && index !== 0) {
+      styles = {
+        ...style.active_nth_item,
+        borderColor: props.activeColor,
+      };
+    }
+    // 未选中后排
+    if (!isActive && index !== 0) {
+      styles = {
+        ...style.not_active_nth_item,
+      };
+    }
+    return styles;
+  };
+
   const renderItems = (columnOptions: TreeSelectOption[] = [], index: number) => {
     return columnOptions.map((item) => {
       const isActive = item[valueName] === value[index];
+      const active_font_color = index === 0 ? '#333' : props.activeColor;
       return (
         <TouchableOpacity
           key={item[valueName]}
@@ -81,9 +113,11 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
               onItemSelect(item);
             }
           }}
-          style={[style.item, isActive ? { backgroundColor: '#fff' } : {}]}
+          style={[style.item, { ...activeStyles(index, isActive) }]}
         >
-          <Text style={isActive ? { color: props.activeColor, fontWeight: 'bold' } : {}}>{item[labelName]}</Text>
+          <Text style={isActive ? { color: active_font_color, fontWeight: 'bold' } : { color: '#666' }}>
+            {item[labelName]}
+          </Text>
         </TouchableOpacity>
       );
     });
@@ -102,7 +136,7 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
         width = `66.67%`;
       }
       const column = (
-        <ScrollView key={i} style={{ width, flex: 1, backgroundColor: '#fff' }}>
+        <ScrollView key={i} style={{ width, flex: 1, backgroundColor: i === 0 ? '#f6f7f9' : '#fff' }}>
           {renderItems(i === 0 ? props.options : optionsMap.get(value[i - 1])?.[childrenName], i)}
         </ScrollView>
       );
