fix(SpeedDial&Stepper&Steps):调整SpeedDial & Stepper & Steps主题色配置 (#567)

* fix(ActionSheet): 调整优化ActionSheet组件布局样式 * fix: 修复导航栏遮挡文档内容问题 * fix: 修复文档/RN组件导航栏遮挡文档内容问题 * fix(Avatar):调整Avatar主题色配置 * feat:添加文档包引入 * fix(Loader&Grid&DragDrawer):调整 Loader & Grid & DragDrawer主题色配置 * fix(MaskLayer&NoticeBar&Pagination):调整 MaskLayer & NoticeBar & Pagination主题色配置 * fix(Picker&Progress&SearchBar):调整Picker & Progress & SearchBar主题色配置 * fix(SpeedDial&Stepper&Steps):调整SpeedDial & Stepper & Steps主题色配置
uiwjs · Apr 4, 2023 · 6a74b76 · 6a74b76
1 parent 77a79b3
commit 6a74b76
Show file tree

Hide file tree

Showing 5 changed files with 220 additions and 159 deletions.
diff --git a/example/examples/src/routes/Stepper/index.tsx b/example/examples/src/routes/Stepper/index.tsx
@@ -36,78 +36,92 @@ export default class StepperExample extends React.Component<IndexProps, IndexSta
           <Header title={title} description={description} />
           <Body>
             <Card title="基础实例">
-              <Stepper
-                value={this.state.value}
-                onChange={value => {
-                  this.setState({value});
-                }}
-              />
+              <View style={{marginLeft: 15}}>
+                <Stepper
+                  value={this.state.value}
+                  onChange={value => {
+                    this.setState({value});
+                  }}
+                />
+              </View>
             </Card>
 
             <Card title="尺寸控制(size: small | default | large)：">
-              <Stepper
-                size="small"
-                value={this.state.value}
-                onChange={value => {
-                  this.setState({value});
-                }}
-              />
+              <View style={{marginLeft: 15}}>
+                <Stepper
+                  size="small"
+                  value={this.state.value}
+                  onChange={value => {
+                    this.setState({value});
+                  }}
+                />
+              </View>
             </Card>
 
             <Card title="按钮开启长按(disabledLongPress: boolean)：">
-              <Stepper
-                disabledLongPress={true}
-                value={this.state.value2}
-                onChange={value2 => {
-                  this.setState({value2});
-                }}
-              />
+              <View style={{marginLeft: 15}}>
+                <Stepper
+                  disabledLongPress={true}
+                  value={this.state.value2}
+                  onChange={value2 => {
+                    this.setState({value2});
+                  }}
+                />
+              </View>
             </Card>
 
             <Card title="自定义宽度(width: number)：">
-              <Stepper
-                width={120}
-                value={this.state.value2}
-                onChange={value2 => {
-                  this.setState({value2});
-                }}
-              />
+              <View style={{marginLeft: 15}}>
+                <Stepper
+                  width={120}
+                  value={this.state.value2}
+                  onChange={value2 => {
+                    this.setState({value2});
+                  }}
+                />
+              </View>
             </Card>
 
             <Card title="自定义颜色(color: Color)：">
-              <Stepper
-                value={this.state.value}
-                color={{
-                  color: '#ccc',
-                  borderColor: '#999',
-                  controlColor: 'red',
-                  valueColor: '#000',
-                }}
-                onChange={value => {
-                  this.setState({value});
-                }}
-              />
+              <View style={{marginLeft: 15}}>
+                <Stepper
+                  value={this.state.value}
+                  color={{
+                    color: '#ccc',
+                    borderColor: '#999',
+                    controlColor: 'red',
+                    valueColor: '#000',
+                  }}
+                  onChange={value => {
+                    this.setState({value});
+                  }}
+                />
+              </View>
             </Card>
 
             <Card title="不禁止输入(disabledInput: boolean)：">
-              <Stepper
-                disabledInput={false}
-                value={this.state.value1}
-                onChange={value1 => {
-                  this.setState({value1});
-                }}
-              />
+              <View style={{marginLeft: 15}}>
+                <Stepper
+                  disabledInput={false}
+                  value={this.state.value1}
+                  onChange={value1 => {
+                    this.setState({value1});
+                  }}
+                />
+              </View>
             </Card>
 
             <Card title="禁止点击(disabled: boolean)：">
-              <Stepper
-                disabled={true}
-                disabledInput={false}
-                value={this.state.value1}
-                onChange={value1 => {
-                  this.setState({value1});
-                }}
-              />
+              <View style={{marginLeft: 15}}>
+                <Stepper
+                  disabled={true}
+                  disabledInput={false}
+                  value={this.state.value1}
+                  onChange={value1 => {
+                    this.setState({value1});
+                  }}
+                />
+              </View>
             </Card>
           </Body>
           <Footer />

diff --git a/packages/core/src/SpeedDial/SpeedDialItem.tsx b/packages/core/src/SpeedDial/SpeedDialItem.tsx
@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
 import { View, StyleSheet, Text, TouchableOpacity, ViewStyle, GestureResponderHandlers } from 'react-native';
 import Icon, { IconsName } from '../Icon';
 import { TabsItemIconTypes } from '../Tabs/TabsItem';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export interface SpeedDialItemProps {
   /** 右边 显示的图标 */
@@ -20,6 +22,11 @@ export interface SpeedDialItemProps {
 }
 
 function SpeedDialItem(props: SpeedDialItemProps) {
+  const theme = useTheme<Theme>();
+
+  const styles = createStyles({
+    bgColor: theme.colors.primary_background,
+  });
   const { title, icon, titleStyle, iconStyle, onPress } = props;
 
   const ChildTitle = useMemo(() => {
@@ -52,28 +59,35 @@ function SpeedDialItem(props: SpeedDialItemProps) {
   );
 }
 
-const styles = StyleSheet.create({
-  speedDialItemContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 20,
-    marginRight: 10,
-  },
-  speedDialItemTitle: {
-    backgroundColor: '#fff',
-    paddingHorizontal: 10,
-    height: 30,
-    borderRadius: 5,
-    justifyContent: 'center',
-    marginRight: 20,
-  },
-  speedDialItemIcon: {
-    width: 40,
-    height: 40,
-    backgroundColor: '#b779e2',
-    borderRadius: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
+type CreStyle = {
+  bgColor: string;
+};
+
+function createStyles({ bgColor }: CreStyle) {
+  return StyleSheet.create({
+    speedDialItemContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 20,
+      marginRight: 10,
+    },
+    speedDialItemTitle: {
+      backgroundColor: '#fff',
+      paddingHorizontal: 10,
+      height: 30,
+      borderRadius: 5,
+      justifyContent: 'center',
+      marginRight: 20,
+    },
+    speedDialItemIcon: {
+      width: 40,
+      height: 40,
+      backgroundColor: bgColor,
+      borderRadius: 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });
+}
+
 export default SpeedDialItem;
diff --git a/packages/core/src/SpeedDial/index.tsx b/packages/core/src/SpeedDial/index.tsx
@@ -14,6 +14,8 @@ import {
 import Icon, { IconsName } from '../Icon';
 import { icoType } from '../Rating';
 import Item, { SpeedDialItemProps } from './SpeedDialItem';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -51,6 +53,11 @@ export interface SpeedDialProps {
 }
 
 function SpeedDial(props: SpeedDialProps) {
+  const theme = useTheme<Theme>();
+
+  const styles = createStyles({
+    bgColor: theme.colors.primary_background,
+  });
   const {
     icon = ['plus', 'close'],
     style,
@@ -113,14 +120,14 @@ function SpeedDial(props: SpeedDialProps) {
     if (icon[0] instanceof Object) {
       return <React.Fragment>{icon[0]}</React.Fragment>;
     } else {
-      return <Icon name={icon[0] as IconsName} color="#fff" size={18} />;
+      return <Icon name={icon[0] as IconsName} color={theme.colors.white} size={18} />;
     }
   }, []);
   const CloseDom = useMemo(() => {
     if (icon[1] instanceof Object) {
       return <React.Fragment>{icon[1]}</React.Fragment>;
     } else {
-      return <Icon name={icon[1] as IconsName} color="#fff" size={18} />;
+      return <Icon name={icon[1] as IconsName} color={theme.colors.white} size={18} />;
     }
   }, []);
   const onOpenHome = () => {
@@ -174,24 +181,30 @@ function SpeedDial(props: SpeedDialProps) {
   );
 }
 
-const styles = StyleSheet.create({
-  fadingContainer: {
-    alignItems: 'flex-end',
-    opacity: 0,
-  },
-  viewPosition: {
-    position: 'absolute',
-  },
+type CreStyle = {
+  bgColor: string;
+};
+
+function createStyles({ bgColor }: CreStyle) {
+  return StyleSheet.create({
+    fadingContainer: {
+      alignItems: 'flex-end',
+      opacity: 0,
+    },
+    viewPosition: {
+      position: 'absolute',
+    },
 
-  homeContainer: {
-    width: 60,
-    height: 60,
-    backgroundColor: '#b779e2',
-    borderRadius: 30,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
+    homeContainer: {
+      width: 60,
+      height: 60,
+      backgroundColor: bgColor,
+      borderRadius: 30,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });
+}
 
 export default SpeedDial;
diff --git a/packages/core/src/Stepper/index.tsx b/packages/core/src/Stepper/index.tsx
@@ -3,6 +3,8 @@ import { View, TextInput } from 'react-native';
 import ControlValue from './ControlValue';
 import ShowValue from './ShowValue';
 import { styles as ControlStyle } from './ControlValue';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export interface Color {
   /** 组件主色调 #108ee9 */
@@ -45,13 +47,14 @@ export interface StepProps {
 }
 
 function Stepper(props: StepProps) {
+  const theme = useTheme<Theme>();
   const {
     size = 'default',
     color = {
-      color: '#108ee9',
-      borderColor: '#108ee9',
-      controlColor: '#108ee9',
-      valueColor: '#108ee9',
+      color: theme.colors.primary_background,
+      borderColor: theme.colors.primary_background,
+      controlColor: theme.colors.primary_background,
+      valueColor: theme.colors.primary_background,
     },
     value = 0,
     step = 1,