Skip to content

Commit

Permalink
fix(Picker&Progress&SearchBar):调整Picker & Progress & SearchBar主题色配置
Browse files Browse the repository at this point in the history
  • Loading branch information
@panbibi
panbibi committed Apr 4, 2023
1 parent 99379f0 commit a8044da
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 84 deletions.
14 changes: 9 additions & 5 deletions example/examples/src/routes/Progress/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,21 @@ const ProgressDemo = (props: any) => {
<Header title={title} description={description} />
<Body>
<Header description={'基本使用'} />
<Progress progressColor="#5847FF" progress={40} progressShow={false} />
<Progress
// progressColor="#5847FF"
progress={40}
progressShow={false}
/>
<Header description={'展示进度图标'} />
<Progress
progressColor="#5847FF"
// progressColor="#5847FF"
progressShow={false}
iconShow={true}
progress={30}
/>
<Header description={'改变进度图标'} />
<Progress
progressColor="#5847FF"
// progressColor="#5847FF"
iconShow={true}
progressShow={false}
progress={60}
Expand All @@ -51,11 +55,11 @@ const ProgressDemo = (props: any) => {
}}>
<Progress
progress={val}
progressColor="#9185FF"
// progressColor="#9185FF"
iconShow={true}
xml={motorcycle}
/>
<Button color={'#5847FF'} onPress={onPress}>
<Button color={'#3578e5'} onPress={onPress}>
(+-)10
</Button>
</View>
Expand Down
69 changes: 43 additions & 26 deletions packages/core/src/Picker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import {
Platform,
Pressable,
} from 'react-native';
import { Theme } from '../theme';
import { useTheme } from '@shopify/restyle';

export interface PickerData {
label?: string;
Expand Down Expand Up @@ -52,6 +54,13 @@ export interface PickerProps {
}

const Picker = (props: PickerProps) => {
const theme = useTheme<Theme>();

const styles = createStyles({
bgColor: theme.colors.gray100,
textColor: theme.colors.black,
acTextColor: theme.colors.primary_background,
});
const {
lines = 3,
rowKey = 'label',
Expand Down Expand Up @@ -232,31 +241,39 @@ const Picker = (props: PickerProps) => {
);
};

const styles = StyleSheet.create({
container: {
height: 50,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 0,
paddingHorizontal: 0,
},
border: {
backgroundColor: '#E6E6E6',
height: 1,
position: 'relative',
zIndex: 999,
paddingVertical: 0,
paddingHorizontal: 0,
},
textStyle: {
fontSize: 20,
color: '#000',
paddingVertical: 0,
paddingHorizontal: 0,
},
acTextStyle: {
color: '#1677ff',
},
});
type CreStyle = {
bgColor: string;
textColor: string;
acTextColor: string;
};

function createStyles({ bgColor, textColor, acTextColor }: CreStyle) {
return StyleSheet.create({
container: {
height: 50,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 0,
paddingHorizontal: 0,
},
border: {
backgroundColor: bgColor,
height: 1,
position: 'relative',
zIndex: 999,
paddingVertical: 0,
paddingHorizontal: 0,
},
textStyle: {
fontSize: 20,
color: textColor,
paddingVertical: 0,
paddingHorizontal: 0,
},
acTextStyle: {
color: acTextColor,
},
});
}

export default Picker;
5 changes: 4 additions & 1 deletion packages/core/src/Progress/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React, { useRef, useState, useEffect } from 'react';
import { Animated, View, StyleSheet, ViewProps, LayoutChangeEvent, Text } from 'react-native';
import { run } from './svg';
import Icon from '../Icon';
import { Theme } from '../theme';
import { useTheme } from '@shopify/restyle';

type PositionType = 'fixed' | 'relative';

Expand All @@ -26,14 +28,15 @@ export interface ProgressProps extends ViewProps {
}

export default (props: ProgressProps) => {
const theme = useTheme<Theme>();
const {
iconShow = false,
progressShow = true,
size = 25,
xml = run,
style,
progress = 0,
progressColor = '#108ee9',
progressColor = theme.colors.primary_background,
position,
animation = { duration: 500 },
} = props;
Expand Down
124 changes: 72 additions & 52 deletions packages/core/src/SearchBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import MaskLayer from '../MaskLayer';
import SearchInputBar, { SearchInputBarProps } from '../SearchInputBar';
import List from '../List';
import Icon from '../Icon';
import { Theme } from '../theme';
import { useTheme } from '@shopify/restyle';

interface SearchBarProps extends Omit<SearchInputBarProps, 'onChange' | 'value'> {
onChangeText?: (value: string) => void;
Expand Down Expand Up @@ -56,6 +58,15 @@ function SearchBar({
placeholderColor,
...searchInputBarProps
}: SearchBarProps) {
const theme = useTheme<Theme>();

const styles = createStyles({
bgColor: theme.colors.gray50,
contentColor: theme.colors.black,
iconColor: theme.colors.white,
cancelColor: theme.colors.gray400,
});

const [curValue, setCurValue] = useState<any>(value);
const [visible, setVisivble] = useState(false);
let textValue;
Expand Down Expand Up @@ -97,10 +108,10 @@ function SearchBar({
}}
style={{ paddingRight: 3 }}
>
<Icon name="circle-close-o" size={18} color="#ccc" />
<Icon name="circle-close-o" size={18} color={theme.colors.gray200} />
</Pressable>
) : (
<Icon name="right" size={18} color="#A19EA0" />
<Icon name="right" size={18} color={theme.colors.gray300} />
)}
</View>
</Pressable>
Expand All @@ -109,7 +120,7 @@ function SearchBar({
<SafeAreaView style={styles.container}>
<SearchInputBar
loading={loading}
containerStyle={{ backgroundColor: '#fff', marginHorizontal: 10 }}
containerStyle={{ backgroundColor: theme.colors.white, marginHorizontal: 10 }}
autoFocus
showActionButton
placeholder="输入搜索..."
Expand All @@ -130,7 +141,7 @@ function SearchBar({
{...searchInputBarProps}
/>
{loading ? (
<ActivityIndicator color="#0A0258" size="large" style={styles.loading} />
<ActivityIndicator color={theme.colors.gray500} size="large" style={styles.loading} />
) : (
<List style={styles.list}>
{options.map((itm) => (
Expand Down Expand Up @@ -160,51 +171,60 @@ function SearchBar({

export default memo(SearchBar);

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
},
contentTitle: {
fontSize: 16,
color: 'black',
},
icon: {
backgroundColor: '#fff',
paddingLeft: 10,
justifyContent: 'center',
},
cancel: {
color: '#7C7D7E',
paddingRight: 10,
justifyContent: 'center',
},
list: {
marginLeft: 10,
marginTop: 10,
marginRight: 10,
},
loading: {
position: 'absolute',
top: '20%',
left: '45%',
},
content: {
flexDirection: 'row',
height: 35,
alignItems: 'center',
justifyContent: 'space-between',
paddingRight: 5,
backgroundColor: '#fff',
paddingHorizontal: 16,
},
disabled: {
flexDirection: 'row',
height: 35,
alignItems: 'center',
justifyContent: 'space-between',
paddingRight: 5,
backgroundColor: '#f5f5f5',
paddingHorizontal: 16,
},
});
type CreStyle = {
bgColor: string;
contentColor: string;
iconColor: string;
cancelColor: string;
};

function createStyles({ bgColor, contentColor, iconColor, cancelColor }: CreStyle) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: bgColor,
},
contentTitle: {
fontSize: 16,
color: contentColor,
},
icon: {
backgroundColor: iconColor,
paddingLeft: 10,
justifyContent: 'center',
},
cancel: {
color: cancelColor,
paddingRight: 10,
justifyContent: 'center',
},
list: {
marginLeft: 10,
marginTop: 10,
marginRight: 10,
},
loading: {
position: 'absolute',
top: '20%',
left: '45%',
},
content: {
flexDirection: 'row',
height: 35,
alignItems: 'center',
justifyContent: 'space-between',
paddingRight: 5,
backgroundColor: iconColor,
paddingHorizontal: 16,
},
disabled: {
flexDirection: 'row',
height: 35,
alignItems: 'center',
justifyContent: 'space-between',
paddingRight: 5,
backgroundColor: bgColor,
paddingHorizontal: 16,
},
});
}

0 comments on commit a8044da

Please sign in to comment.