[improvement] Actionsheet: use popup instead of mixin (#2806)

packages/actionsheet/index.js

@@ -2,15 +2,14 @@ import { use } from '../utils';
 import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
 import Loading from '../loading';
+import Popup from '../popup';
 
 const [sfc, bem] = use('actionsheet');
 
 export default sfc({
-  mixins: [PopupMixin],
-
   props: {
+    ...PopupMixin.props,
     title: String,
-    value: Boolean,
     actions: Array,
     cancelText: String,
     overlay: {
@@ -43,16 +42,12 @@ export default sfc({
   },
 
   render(h) {
-    if (!this.shouldRender) {
-      return;
-    }
-
     const { title, cancelText, onCancel } = this;
 
     const Header = () => (
       <div class={[bem('header'), 'van-hairline--top-bottom']}>
         {title}
-        <Icon name="close" onClick={onCancel} />
+        <Icon name="close" class={bem('close')} onClick={onCancel} />
       </div>
     );
 
@@ -87,12 +82,17 @@ export default sfc({
     );
 
     return (
-      <transition name="van-slide-up">
+      <Popup
-        <div vShow={this.value} class={bem({ withtitle: title })}>
+        class={bem()}
-          {title ? Header() : this.actions.map(Option)}
+        value={this.value}
-          {Footer}
+        position="bottom"
-        </div>
+        onInput={value => {
-      </transition>
+          this.$emit('input', value);
+        }}
+      >
+        {title ? Header() : this.actions.map(Option)}
+        {Footer}
+      </Popup>
     );
   }
 });

packages/actionsheet/index.less

@@ -1,23 +1,11 @@
 @import '../style/var';
 
 .van-actionsheet {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  color: @text-color;
   max-height: 90%;
-  overflow-y: auto;
+  color: @text-color;
-  -webkit-overflow-scrolling: touch;
-  background-color: @background-color;
-
-  &--withtitle {
-    background-color: @white;
-  }
 
   &__item,
   &__cancel {
-    height: 50px;
     line-height: 50px;
     font-size: 16px;
     text-align: center;
@@ -28,6 +16,10 @@
     }
   }
 
+  &__item {
+    height: 50px;
+  }
+
   &__item--disabled {
     color: @gray;
 
@@ -46,23 +38,26 @@
     display: inline-block;
   }
 
-  &__cancel {
+  &__cancel::before {
-    margin-top: 10px;
+    content: ' ';
+    display: block;
+    height: 10px;
+    background-color: @background-color;
   }
 
   &__header {
     font-size: 16px;
     line-height: 44px;
     text-align: center;
+  }
 
-    .van-icon-close {
+  &__close {
-      top: 0;
+    top: 0;
-      right: 0;
+    right: 0;
-      padding: 0 15px;
+    padding: 0 15px;
-      font-size: 18px;
+    font-size: 18px;
-      color: @gray-dark;
+    color: @gray-dark;
-      position: absolute;
+    position: absolute;
-      line-height: inherit;
+    line-height: inherit;
-    }
   }
 }

packages/actionsheet/test/__snapshots__/index.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-actionsheet" name="van-slide-up">
+<div class="van-popup van-popup--bottom van-actionsheet" name="van-popup-slide-bottom">
   <div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
   <div class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
   <div class="van-actionsheet__cancel">Cancel</div>