@tuya-miniapp/smart-ui 2.3.8-beta-3 → 2.3.8-beta-5

package/packages/notice-bar/index.ts

@@ -0,0 +1,188 @@
+import { SmartComponent } from '../common/component';
+import { getRect, requestAnimationFrame } from '../common/utils';
+import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark';
+import Right from '@tuya-miniapp/icons/dist/svg/Right';
+
+SmartComponent({
+  props: {
+    text: {
+      type: String,
+      value: '',
+      observer: 'init',
+    },
+    btnText: {
+      type: String,
+      value: '',
+      observer: 'init',
+    },
+    btnTextColor: {
+      type: String,
+      value: '',
+      observer: 'init',
+    },
+    mode: {
+      type: String,
+      value: '',
+    },
+    type: {
+      type: String,
+      value: 'info',
+    },
+    url: {
+      type: String,
+      value: '',
+    },
+    openType: {
+      type: String,
+      value: 'navigateTo',
+    },
+    rightIconColor: {
+      type: String,
+      value: '',
+    },
+    leftIconColor: {
+      type: String,
+      value: '',
+    },
+    delay: {
+      type: Number,
+      value: 1,
+    },
+    customStyle: {
+      type: String,
+      value: '',
+    },
+    customHoverClass: {
+      type: String,
+      value: '',
+    },
+    rightIconStyle: {
+      type: String,
+      value: '',
+    },
+    leftIconStyle: {
+      type: String,
+      value: '',
+    },
+    speed: {
+      type: Number,
+      value: 60,
+      observer: 'init',
+    },
+    scrollable: null,
+    leftIcon: {
+      type: String,
+      value: '',
+    },
+    color: String,
+    background: String,
+    wrapable: Boolean,
+  },
+
+  data: {
+    Xmark,
+    Right,
+    show: true,
+  },
+
+  created() {
+    this.resetAnimation = wx.createAnimation({
+      duration: 0,
+      timingFunction: 'linear',
+    });
+  },
+
+  destroyed() {
+    this.timer && clearTimeout(this.timer);
+  },
+
+  mounted() {
+    this.init();
+  },
+
+  methods: {
+    init() {
+      requestAnimationFrame(() => {
+        Promise.all([
+          getRect(this, '.smart-notice-bar__content'),
+          getRect(this, '.smart-notice-bar__wrap'),
+        ]).then(rects => {
+          const [contentRect, wrapRect] = rects;
+          const { speed, scrollable, delay } = this.data;
+          if (
+            contentRect == null ||
+            wrapRect == null ||
+            !contentRect.width ||
+            !wrapRect.width ||
+            scrollable === false
+          ) {
+            return;
+          }
+
+          if (scrollable || wrapRect.width < contentRect.width) {
+            const duration = ((wrapRect.width + contentRect.width) / speed) * 1000;
+
+            this.wrapWidth = wrapRect.width;
+            this.contentWidth = contentRect.width;
+            this.duration = duration;
+            this.animation = wx.createAnimation({
+              duration,
+              timingFunction: 'linear',
+              delay,
+            });
+
+            this.scroll(true);
+          }
+        });
+      });
+    },
+
+    scroll(isInit = false) {
+      this.timer && clearTimeout(this.timer);
+      this.timer = null;
+
+      this.setData({
+        animationData: this.resetAnimation
+          .translateX(isInit ? 0 : this.wrapWidth)
+          .step()
+          .export(),
+      });
+
+      requestAnimationFrame(() => {
+        this.setData({
+          animationData: this.animation.translateX(-this.contentWidth).step().export(),
+        });
+      });
+
+      this.timer = setTimeout(() => {
+        this.scroll();
+      }, this.duration + this.data.delay);
+    },
+
+    onClickIcon(event) {
+      if (this.data.mode === 'closeable') {
+        this.timer && clearTimeout(this.timer);
+        this.timer = null;
+
+        this.setData({ show: false });
+        this.$emit('close', event.detail);
+      }
+    },
+
+    onClickBtnText(event) {
+      this.$emit('btnClick', event);
+    },
+
+    onClick(event: WechatMiniprogram.TouchEvent) {
+      const { url, mode, openType } = this.data;
+      if (mode === 'link' && url) {
+        if (openType === 'redirectTo') {
+          wx.redirectTo({ url });
+        } else if (openType === 'navigateTo') {
+          wx.navigateTo({ url });
+        }
+      }
+      this.$emit('click', event);
+    },
+  },
+});

package/packages/notice-bar/index.wxml

@@ -0,0 +1,52 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  wx:if="{{ show }}"
+  class="custom-class {{ utils.bem('notice-bar', { wrapable, warning: type === 'warning', error: type === 'error', info: type === 'info' }) }}"
+  hover-class="{{ mode === 'link' ? 'smart-notice-bar--hover' : ''}} {{ customHoverClass }}"
+  style="{{ computed.rootStyle([{ color, background }, customStyle]) }}"
+  bind:tap="onClick"
+>
+  <smart-icon
+    wx:if="{{ leftIcon }}"
+    name="{{ leftIcon }}"
+    class="smart-notice-bar__left-icon"
+    style="{{ computed.rootStyle(leftIconStyle) }}"
+    color="{{ leftIconColor }}"
+  />
+  <slot wx:else name="left-icon" />
+
+  <view class="smart-notice-bar__wrap">
+    <view class="smart-notice-bar__content {{ scrollable === false && !wrapable ? 'smart-ellipsis' : '' }}" animation="{{ animationData }}">
+      {{ text }}
+      <view 
+        wx:if="{{ btnText }}" 
+        class="smart-notice-bar__content__btn" 
+        hover-class="smart-notice-bar--hover"
+        catch:tap="onClickBtnText"
+        style="{{ btnTextColor ? 'color: ' + btnTextColor : ''}}"
+      >
+        {{ btnText }}
+      </view>
+      <slot wx:if="{{ !text }}"></slot>
+    </view>
+  </view>
+
+  <smart-icon
+    wx:if="{{ mode === 'closeable' }}"
+    class="smart-notice-bar__right-icon"
+    name="{{ Xmark }}"
+    style="{{ computed.rootStyle(rightIconStyle) }}"
+    color=" {{ rightIconColor }} "
+    catch:tap="onClickIcon"
+  />
+  <smart-icon 
+    wx:elif="{{ mode === 'link' }}" 
+    color=" {{ rightIconColor }} " 
+    class="smart-notice-bar__right-icon" 
+    name="{{ Right }}" 
+    style="{{ computed.rootStyle(rightIconStyle) }}"
+  />
+  <slot wx:else name="right-icon" />
+</view>

package/packages/notice-bar/index.wxs

@@ -0,0 +1,11 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style(data);
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};