fix(TreeSelect):优化样式

ChenlingasMx · ChenlingasMx · commit 2e39e902bc2e · 2021-12-22T11:20:18.000+08:00
diff --git a/example/examples/src/routes/TreeSelect/index.tsx b/example/examples/src/routes/TreeSelect/index.tsx
@@ -101,7 +101,7 @@ export default class TreeSelectDemo extends React.Component<TreeSelectViewProps>
           <Body>
             <TreeSelect
               defaultValue={['01', '01-1']}
-              // activeColor="#fd8a00"
+              activeColor="#fd8a00"
               options={option}
               onChange={(value: any, nodes: any) => {
                 console.log(value, nodes);
diff --git a/packages/core/src/TreeSelect/styles.tsx b/packages/core/src/TreeSelect/styles.tsx
@@ -3,9 +3,6 @@ import { StyleSheet } from 'react-native';
 export const style = StyleSheet.create({
   item: {
     minHeight: 50,
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-    position: 'relative',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/packages/core/src/TreeSelect/tree-select.tsx b/packages/core/src/TreeSelect/tree-select.tsx
@@ -50,7 +50,6 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
       });
     }
     traverse(undefined, props.options);
-
     return [deep, optionsMap, optionsParentMap];
   }, [props.options]);
 
@@ -82,7 +81,7 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
               onItemSelect(item);
             }
           }}
-          style={style.item}
+          style={[style.item, isActive ? { backgroundColor: '#fff' } : {}]}
         >
           <Text style={isActive ? { color: props.activeColor, fontWeight: 'bold' } : {}}>{item[labelName]}</Text>
         </TouchableOpacity>
@@ -103,7 +102,7 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {
         width = `66.67%`;
       }
       const column = (
-        <ScrollView key={i} style={{ width, flex: 1 }}>
+        <ScrollView key={i} style={{ width, flex: 1, backgroundColor: '#fff' }}>
           {renderItems(i === 0 ? props.options : optionsMap.get(value[i - 1])?.[childrenName], i)}
         </ScrollView>
       );

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,6 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {`
`50`	`50`	`});`
`51`	`51`	`}`
`52`	`52`	`traverse(undefined, props.options);`
`53`		`-`
`54`	`53`	`return [deep, optionsMap, optionsParentMap];`
`55`	`54`	`}, [props.options]);`
`56`	`55`
`@@ -82,7 +81,7 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {`
`82`	`81`	`onItemSelect(item);`
`83`	`82`	`}`
`84`	`83`	`}}`
`85`		`- style={style.item}`
	`84`	`+ style={[style.item, isActive ? { backgroundColor: '#fff' } : {}]}`
`86`	`85`	`>`
`87`	`86`	`<Text style={isActive ? { color: props.activeColor, fontWeight: 'bold' } : {}}>{item[labelName]}</Text>`
`88`	`87`	`</TouchableOpacity>`
`@@ -103,7 +102,7 @@ export const TreeSelect: FC<TreeSelectProps> = (p) => {`
`103`	`102`	width = `66.67%`;
`104`	`103`	`}`
`105`	`104`	`const column = (`
`106`		`- <ScrollView key={i} style={{ width, flex: 1 }}>`
	`105`	`+ <ScrollView key={i} style={{ width, flex: 1, backgroundColor: '#fff' }}>`
`107`	`106`	`{renderItems(i === 0 ? props.options : optionsMap.get(value[i - 1])?.[childrenName], i)}`
`108`	`107`	`</ScrollView>`
`109`	`108`	`);`