feat(PickerHeader): 优化样式及点击反馈效果

fjc0k · Oct 4, 2019 · 182acc2 · 182acc2
1 parent 84c39c7
commit 182acc2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/components/PickerHeader/index.scss b/src/components/PickerHeader/index.scss
@@ -3,10 +3,10 @@
 .m-picker-header {
   display: flex;
   align-items: center;
-  padding: transformPx(10) transformPx(15);
-  border-bottom: transformPx(0.5) solid $hairlineColor;
+  @include hairlineBottom($hairlineColor);
 
   &__cancel {
+    padding: transformPx(10) transformPx(15);
     flex-shrink: 0;
     font-size: transformPx(17);
     color: $grayColor;
@@ -16,6 +16,10 @@
       opacity: 0;
       pointer-events: none;
     }
+
+    &_active {
+      opacity: 0.6;
+    }
   }
 
   &__title {
@@ -28,9 +32,14 @@
   }
 
   &__confirm {
+    padding: transformPx(10) transformPx(15);
     flex-shrink: 0;
     font-size: transformPx(17);
     color: $primaryColor;
+
+    &_active {
+      opacity: 0.6;
+    }
   }
 }
 
diff --git a/src/components/PickerHeader/index.tsx b/src/components/PickerHeader/index.tsx
@@ -1,13 +1,17 @@
 import Taro from '@tarojs/taro'
 import {functionalComponent} from '../component'
 import {MPickerHeaderDefaultProps, MPickerHeaderProps} from './props'
+import {usePlatform} from '../../hooks'
 import {View} from '@tarojs/components'
 
 function MPickerHeader(props: MPickerHeaderProps) {
+  const platform = usePlatform()
+
   return (
-    <View className='m-picker-header'>
+    <View className={`m-picker-header is-${platform}`}>
       <View
         className={`m-picker-header__cancel ${props.noCancel && 'm-picker-header__cancel_hidden'}`}
+        hoverClass='m-picker-header__cancel_active'
         onClick={props.onCancel}>
         {props.cancelText}
       </View>
@@ -17,6 +21,7 @@ function MPickerHeader(props: MPickerHeaderProps) {
       </View>
       <View
         className='m-picker-header__confirm'
+        hoverClass='m-picker-header__confirm_active'
         onClick={props.onConfirm}>
         {props.confirmText}
       </View>

diff --git a/src/demo/components/NavigationBar/index.tsx b/src/demo/components/NavigationBar/index.tsx
@@ -11,6 +11,7 @@ function XNavigationBar(props: XNavigationBarProps) {
   return (
     <MNavigationBar
       homePath={pageUrls.HomeIndex}
+      noReset={true}
       textStyle='white'
       backgroundColor='#1AAD19'>
       {props.children}