Merge pull request #790 from thundersdata-frontend/picker-issue

fix: 修复Picker 组件的 placeholder 跟 Input 组件的 placeholder 颜色不一致的问题
thundersdata-frontend · Dec 14, 2023 · e664af4 · e664af4
2 parents 544b4bf + d0e2d71
commit e664af4
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 6 deletions.
diff --git a/.changeset/angry-hornets-end.md b/.changeset/angry-hornets-end.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': patch
+---
+
+fix: 修复Picker 组件的 placeholder 跟 Input 组件的 placeholder 颜色不一致的问题
diff --git a/packages/react-native-picker/src/date-period-input/index.tsx b/packages/react-native-picker/src/date-period-input/index.tsx
@@ -72,7 +72,7 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
     <>
       <Flex>
         <SvgIcon name="date" color={theme.colors.icon} />
-        <Text variant="p1" color={disabled ? 'disabled' : 'text'} marginLeft="x2">
+        <Text variant="p1" color={disabled ? 'disabled' : dates[0] ? 'text' : 'gray300'} marginLeft="x2">
           {dates[0] ? dayjs(dates[0]).format(format) : placeholders[0]}
         </Text>
       </Flex>
@@ -88,7 +88,7 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
     <>
       <Flex>
         <SvgIcon name="date" color={theme.colors.icon} />
-        <Text variant="p1" color={disabled ? 'disabled' : 'text'} marginLeft="x2">
+        <Text variant="p1" color={disabled ? 'disabled' : dates[1] ? 'text' : 'gray300'} marginLeft="x2">
           {dates[1] ? dayjs(dates[1]).format(format) : placeholders[1]}
         </Text>
       </Flex>

diff --git a/packages/react-native-picker/src/date-picker-input/index.tsx b/packages/react-native-picker/src/date-picker-input/index.tsx
@@ -84,7 +84,7 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
       >
         <Flex flex={1}>
           <SvgIcon name="date" color={theme.colors.icon} />
-          <Text variant="p1" color={'text'} marginLeft="x2">
+          <Text variant="p1" color={currentText === placeholder ? 'gray300' : 'text'} marginLeft="x2">
             {currentText}
           </Text>
         </Flex>

diff --git a/packages/react-native-picker/src/date-picker-item/index.tsx b/packages/react-native-picker/src/date-picker-item/index.tsx
@@ -53,7 +53,7 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
 
     const Content = (
       <>
-        <Text variant="p1" color={disabled ? 'disabled' : 'text'}>
+        <Text variant="p1" color={disabled ? 'disabled' : currentText === placeholder ? 'gray300' : 'text'}>
           {currentText}
         </Text>
         {!disabled && allowClear && !!currentText && currentText !== placeholder && (

diff --git a/packages/react-native-picker/src/picker-input/index.tsx b/packages/react-native-picker/src/picker-input/index.tsx
@@ -79,7 +79,11 @@ const PickerInput = forwardRef<PickerRef, PickerInputProps>(
     const BaseContent = (
       <>
         <Box flex={1}>
-          <Text variant="p1" color={disabled ? 'disabled' : 'text'} marginLeft="x2">
+          <Text
+            variant="p1"
+            color={disabled ? 'disabled' : currentText === placeholder ? 'gray300' : 'text'}
+            marginLeft="x2"
+          >
             {currentText}
           </Text>
         </Box>

diff --git a/packages/react-native-picker/src/picker-item/index.tsx b/packages/react-native-picker/src/picker-item/index.tsx
@@ -59,7 +59,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
       <>
         <Text
           variant="p1"
-          color={disabled ? 'disabled' : 'text'}
+          color={disabled ? 'disabled' : currentText === placeholder ? 'gray300' : 'text'}
           numberOfLines={1}
           textAlign={'right'}
           style={{ flex: 1 }}