[improvement] NoticeBar: jsx (#2554)

packages/notice-bar/index.js

@@ -0,0 +1,116 @@
+import { use } from '../utils';
+import Icon from '../icon';
+
+const [sfc, bem] = use('notice-bar');
+
+export default sfc({
+  props: {
+    text: String,
+    mode: String,
+    color: String,
+    leftIcon: String,
+    background: String,
+    delay: {
+      type: [String, Number],
+      default: 1
+    },
+    scrollable: {
+      type: Boolean,
+      default: true
+    },
+    speed: {
+      type: Number,
+      default: 50
+    }
+  },
+
+  data() {
+    return {
+      wrapWidth: 0,
+      firstRound: true,
+      duration: 0,
+      offsetWidth: 0,
+      showNoticeBar: true,
+      animationClass: ''
+    };
+  },
+
+  watch: {
+    text: {
+      handler() {
+        this.$nextTick(() => {
+          const { wrap, content } = this.$refs;
+          if (!wrap || !content) {
+            return;
+          }
+
+          const wrapWidth = wrap.getBoundingClientRect().width;
+          const offsetWidth = content.getBoundingClientRect().width;
+          if (this.scrollable && offsetWidth > wrapWidth) {
+            this.wrapWidth = wrapWidth;
+            this.offsetWidth = offsetWidth;
+            this.duration = offsetWidth / this.speed;
+            this.animationClass = bem('play');
+          }
+        });
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    onClickIcon() {
+      this.showNoticeBar = this.mode !== 'closeable';
+    },
+
+    onAnimationEnd() {
+      this.firstRound = false;
+      this.$nextTick(() => {
+        this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
+        this.animationClass = bem('play--infinite');
+      });
+    }
+  },
+
+  render(h) {
+    const { mode } = this;
+
+    const iconName = mode === 'closeable' ? 'cross' : mode === 'link' ? 'arrow' : '';
+
+    const barStyle = {
+      color: this.color,
+      background: this.background
+    };
+
+    const contentStyle = {
+      paddingLeft: this.firstRound ? 0 : this.wrapWidth + 'px',
+      animationDelay: (this.firstRound ? this.delay : 0) + 's',
+      animationDuration: this.duration + 's'
+    };
+
+    return (
+      <div
+        v-show={this.showNoticeBar}
+        class={bem({ withicon: mode })}
+        style={barStyle}
+        onClick={() => {
+          this.$emit('click');
+        }}
+      >
+        {this.leftIcon && <Icon class={bem('left-icon')} name={this.leftIcon} />}
+        <div ref="wrap" class={bem('wrap')}>
+          <div
+            ref="content"
+            class={[bem('content'), this.animationClass, { 'van-ellipsis': !this.scrollable }]}
+            style={contentStyle}
+            onAnimationend={this.onAnimationEnd}
+            onWebkitAnimationEnd={this.onAnimationEnd}
+          >
+            {this.$slots.default || this.text}
+          </div>
+        </div>
+        {iconName && <Icon class={bem('right-icon')} name={iconName} onClick={this.onClickIcon} />}
+      </div>
+    );
+  }
+});

packages/notice-bar/index.vue

@@ -1,131 +0,0 @@
-<template>
-  <div
-    v-show="showNoticeBar"
-    :class="b({ withicon: mode })"
-    :style="barStyle"
-    @click="$emit('click')"
-  >
-    <icon
-      v-if="leftIcon"
-      :class="b('left-icon')"
-      :name="leftIcon"
-    />
-    <div
-      ref="wrap"
-      :class="b('wrap')"
-    >
-      <div
-        ref="content"
-        :class="[b('content'), animationClass, { 'van-ellipsis': !scrollable }]"
-        :style="contentStyle"
-        @animationend="onAnimationEnd"
-        @webkitAnimationEnd="onAnimationEnd"
-      >
-        <slot>{{ text }}</slot>
-      </div>
-    </div>
-    <icon
-      v-if="iconName"
-      :class="b('right-icon')"
-      :name="iconName"
-      @click="onClickIcon"
-    />
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'notice-bar',
-
-  props: {
-    text: String,
-    mode: String,
-    color: String,
-    leftIcon: String,
-    background: String,
-    delay: {
-      type: [String, Number],
-      default: 1
-    },
-    scrollable: {
-      type: Boolean,
-      default: true
-    },
-    speed: {
-      type: Number,
-      default: 50
-    }
-  },
-
-  data() {
-    return {
-      wrapWidth: 0,
-      firstRound: true,
-      duration: 0,
-      offsetWidth: 0,
-      showNoticeBar: true,
-      animationClass: ''
-    };
-  },
-
-  computed: {
-    iconName() {
-      return this.mode === 'closeable' ? 'cross' : this.mode === 'link' ? 'arrow' : '';
-    },
-
-    barStyle() {
-      return {
-        color: this.color,
-        background: this.background
-      };
-    },
-
-    contentStyle() {
-      return {
-        paddingLeft: this.firstRound ? 0 : this.wrapWidth + 'px',
-        animationDelay: (this.firstRound ? this.delay : 0) + 's',
-        animationDuration: this.duration + 's'
-      };
-    }
-  },
-
-  watch: {
-    text: {
-      handler() {
-        this.$nextTick(() => {
-          const { wrap, content } = this.$refs;
-          if (!wrap || !content) {
-            return;
-          }
-
-          const wrapWidth = wrap.getBoundingClientRect().width;
-          const offsetWidth = content.getBoundingClientRect().width;
-          if (this.scrollable && offsetWidth > wrapWidth) {
-            this.wrapWidth = wrapWidth;
-            this.offsetWidth = offsetWidth;
-            this.duration = offsetWidth / this.speed;
-            this.animationClass = this.b('play');
-          }
-        });
-      },
-      immediate: true
-    }
-  },
-
-  methods: {
-    onClickIcon() {
-      this.showNoticeBar = this.mode !== 'closeable';
-    },
-
-    onAnimationEnd() {
-      this.firstRound = false;
-      this.$nextTick(() => {
-        this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
-        this.animationClass = this.b('play--infinite');
-      });
-    }
-  }
-});
-</script>

packages/notice-bar/test/__snapshots__/demo.spec.js.snap

@@ -8,31 +8,26 @@ exports[`renders demo correctly 1`] = `
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
-      <!---->
     </div>
   </div>
   <div>
     <div class="van-notice-bar" style="color:undefined;background:undefined;">
-      <!---->
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content van-ellipsis" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
-      <!---->
     </div>
   </div>
   <div>
     <div class="van-notice-bar van-notice-bar--withicon" style="color:undefined;background:undefined;">
-      <!---->
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
-      </div> <i class="van-icon van-icon-cross van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
+      </div><i class="van-icon van-icon-cross van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
         <!----></i>
     </div>
     <div class="van-notice-bar van-notice-bar--withicon" style="color:undefined;background:undefined;">
-      <!---->
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
-      </div> <i class="van-icon van-icon-arrow van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
+      </div><i class="van-icon van-icon-arrow van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
         <!----></i>
     </div>
   </div>

packages/swipe-cell/test/__snapshots__/demo.spec.js.snap

@@ -4,11 +4,9 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-notice-bar" style="color:undefined;background:undefined;">
-      <!---->
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">建议在手机模式下浏览本示例</div>
       </div>
-      <!---->
     </div>
     <div>
       <div class="van-swipe-cell">