[improvement] Toast: jsx (#2664)

2019-02-01 17:26:10 +08:00
parent b8ec2ffc5d
commit c010ee22ac
3 changed files with 98 additions and 116 deletions
@@ -0,0 +1,98 @@
+import { use, isDef } from '../utils';
+import Icon from '../icon';
+import Loading from '../loading';
+import Popup from '../mixins/popup';
+
+const [sfc, bem] = use('toast');
+const STYLE = ['success', 'fail', 'loading'];
+
+export default sfc({
+  mixins: [Popup],
+
+  props: {
+    forbidClick: Boolean,
+    message: [String, Number],
+    type: {
+      type: String,
+      default: 'text'
+    },
+    loadingType: {
+      type: String,
+      default: 'circular'
+    },
+    position: {
+      type: String,
+      default: 'middle'
+    },
+    lockScroll: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      clickable: false
+    };
+  },
+
+  mounted() {
+    this.toggleClickale();
+  },
+
+  destroyed() {
+    this.toggleClickale();
+  },
+
+  watch: {
+    value() {
+      this.toggleClickale();
+    },
+
+    forbidClick() {
+      this.toggleClickale();
+    }
+  },
+
+  methods: {
+    toggleClickale() {
+      const clickable = this.value && this.forbidClick;
+      if (this.clickable !== clickable) {
+        this.clickable = clickable;
+        const action = clickable ? 'add' : 'remove';
+        document.body.classList[action]('van-toast--unclickable');
+      }
+    }
+  },
+
+  render(h) {
+    const { type, message } = this;
+    const style = STYLE.indexOf(type) !== -1 ? 'default' : type;
+
+    const Content = () => {
+      switch (style) {
+        case 'text':
+          return <div>{message}</div>;
+        case 'html':
+          return <div domPropsInnerHTML={message} />;
+        default:
+          return [
+            type === 'loading' ? (
+              <Loading color="white" type={this.loadingType} />
+            ) : (
+              <Icon class={bem('icon')} name={type} />
+            ),
+            isDef(message) && <div class={bem('text')}>{message}</div>
+          ];
+      }
+    };
+
+    return (
+      <transition name="van-fade">
+        <div v-show={this.value} class={bem([style, this.position])}>
+          {Content()}
+        </div>
+      </transition>
+    );
+  }
+});