feat(Notify): add type prop (#4237)

src/notify/Notify.tsx

@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { RED, WHITE } from '../utils/constant';
+import { WHITE } from '../utils/constant';
 import { inherit } from '../utils/functional';
 import { PopupMixin } from '../mixins/popup';
 import Popup from '../popup';
@@ -10,6 +10,7 @@ import { DefaultSlots } from '../utils/types';
 import { PopupMixinProps } from '../mixins/popup/type';
 
 export type NotifyProps = PopupMixinProps & {
+  type: 'primary' | 'success' | 'danger' | 'warning';
   color: string;
   message: string | number;
   duration: number;
@@ -37,7 +38,7 @@ function Notify(
       position="top"
       overlay={false}
       lockScroll={false}
-      class={[bem(), props.className]}
+      class={[bem([props.type]), props.className]}
       {...inherit(ctx, true)}
     >
       {props.message}
@@ -47,17 +48,18 @@ function Notify(
 
 Notify.props = {
   ...PopupMixin.props,
+  background: String,
   className: null as any,
   message: [Number, String],
   getContainer: [String, Function],
+  type: {
+    type: String,
+    default: 'danger'
+  },
   color: {
     type: String,
     default: WHITE
   },
-  background: {
-    type: String,
-    default: RED
-  },
   duration: {
     type: Number,
     default: 3000

src/notify/README.md

@@ -17,13 +17,27 @@ Vue.use(Notify);
 Notify('Notify Message');
 ```
 
-### Custom Config
+### Notify Type
+
+```js
+Notify({ type: 'primary', message: 'Notify Message' });
+Notify({ type: 'success', message: 'Notify Message' });
+Notify({ type: 'danger', message: 'Notify Message' });
+Notify({ type: 'warning', message: 'Notify Message' });
+```
+
+### Custom Notify
 
 ```js
 Notify({
-  message: 'Notify Message',
+  message: 'Custom Color',
-  duration: 1000,
+  color: '#ad0000',
-  background: '#1989fa'
+  background: '#ffe1e1'
+});
+
+Notify({
+  message: 'Custom Duration',
+  duration: 1000
 });
 ```
 
@@ -54,6 +68,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
+| type | Can be set to `primary` `info` `warning` | `string` | `danger` |
 | message | Message | `string` | - |
 | duration | Duration(ms), won't disappear if value is 0 | `number` | `3000` |
 | color | Message color | `string` | `#fff` | |

src/notify/README.zh-CN.md

@@ -17,13 +17,38 @@ Vue.use(Notify);
 Notify('通知内容');
 ```
 
-### 自定义配置
+### 通知类型
+
+支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`
+
+```js
+// 主要通知
+Notify({ type: 'primary', message: '通知内容' });
+
+// 成功通知
+Notify({ type: 'success', message: '通知内容' });
+
+// 危险通知
+Notify({ type: 'danger', message: '通知内容' });
+
+// 警告通知
+Notify({ type: 'warning', message: '通知内容' });
+```
+
+### 自定义通知
+
+自定义消息通知的颜色和展示时长
 
 ```js
 Notify({
-  message: '通知内容',
+  message: '自定义颜色',
-  duration: 1000,
+  color: '#ad0000',
-  background: '#1989fa'
+  background: '#ffe1e1'
+});
+
+Notify({
+  message: '自定义时长',
+  duration: 1000
 });
 ```
 
@@ -54,6 +79,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
+| type | 类型，可选值为 `primary` `info` `warning` | `string` | `danger` | 2.1.6 |
 | message | 展示文案，支持通过`\n`换行 | `string` | - | - |
 | duration | 展示时长(ms)，值为 0 时，notify 不会消失 | `number` | `3000` | - |
 | color | 字体颜色 | `string` | `#fff` | - |

src/notify/demo/index.vue

@@ -1,19 +1,22 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button
+      <van-button type="danger" :text="$t('basicUsage')" @click="showNotify" />
-        type="primary"
-        :text="$t('showNotify')"
-        @click="showNotify"
-      />
     </demo-block>
 
-    <demo-block :title="$t('customConfig')">
+    <demo-block :title="$t('notifyType')">
-      <van-button
+      <div style="margin-bottom: 15px;">
-        type="primary"
+        <van-button type="info" :text="$t('primary')" @click="showType('primary')" />
-        :text="$t('showCustomNotify')"
+        <van-button type="primary" :text="$t('success')" @click="showType('success')" />
-        @click="showCustomNotify"
+      </div>
-      />
+
+      <van-button type="danger" :text="$t('danger')" @click="showType('danger')" />
+      <van-button type="warning" :text="$t('warning')" @click="showType('warning')" />
+    </demo-block>
+
+    <demo-block :title="$t('customNotify')">
+      <van-button type="primary" :text="$t('customColor')" @click="showCustomColor" />
+      <van-button type="primary" :text="$t('customDuration')" @click="showCustomDuration" />
     </demo-block>
   </demo-section>
 </template>
@@ -22,16 +25,26 @@
 export default {
   i18n: {
     'zh-CN': {
+      primary: '主要通知',
+      success: '成功通知',
+      danger: '危险通知',
+      warning: '警告通知',
       content: '通知内容',
-      customConfig: '自定义配置',
+      notifyType: '通知类型',
-      showNotify: '显示消息通知',
+      customColor: '自定义颜色',
-      showCustomNotify: '显示自定义消息通知'
+      customNotify: '自定义配置',
+      customDuration: '自定义时长'
     },
     'en-US': {
+      primary: 'Primary',
+      success: 'Success',
+      danger: 'Danger',
+      warning: 'Warning',
       content: 'Notify Message',
-      customConfig: 'Custom Config',
+      notifyType: 'Notify Type',
-      showNotify: 'Show Notify',
+      customColor: 'Custom Color',
-      showCustomNotify: 'Show Custom Notify'
+      customNotify: 'Custom Notify',
+      customDuration: 'Custom Duration'
     }
   },
 
@@ -40,11 +53,25 @@ export default {
       this.$notify(this.$t('content'));
     },
 
-    showCustomNotify() {
+    showCustomColor() {
+      this.$notify({
+        message: this.$t('customColor'),
+        color: '#ad0000',
+        background: '#ffe1e1'
+      });
+    },
+
+    showCustomDuration() {
+      this.$notify({
+        message: this.$t('customDuration'),
+        duration: 1000
+      });
+    },
+
+    showType(type) {
       this.$notify({
         message: this.$t('content'),
-        duration: 1000,
+        type
-        background: '#1989fa'
       });
     }
   }
@@ -52,7 +79,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-notify {
   background-color: @white;

src/notify/index.less

@@ -9,4 +9,20 @@
   // allow newline charactor
   white-space: pre-wrap;
   text-align: center;
+
+  &--primary {
+    background-color: @notify-primary-background-color;
+  }
+
+  &--success {
+    background-color: @notify-success-background-color;
+  }
+
+  &--danger {
+    background-color: @notify-danger-background-color;
+  }
+
+  &--warning {
+    background-color: @notify-warning-background-color;
+  }
 }

src/notify/index.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VanNotify from './Notify';
-import { RED, WHITE } from '../utils/constant';
+import { WHITE } from '../utils/constant';
 import { isObj, isServer } from '../utils';
 import { mount } from '../utils/functional';
 import { NotifyOptions } from 'types/notify';
@@ -57,10 +57,11 @@ function Notify(options: NotifyOptions) {
 
 function defaultOptions(): NotifyOptions {
   return {
+    type: 'danger',
     value: true,
     message: '',
     color: WHITE,
-    background: RED,
+    background: undefined,
     duration: 3000,
     className: '',
     onClose: null,

src/notify/test/__snapshots__/demo.spec.js.snap

@@ -2,7 +2,10 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">显示消息通知</span></button></div>
+  <div><button class="van-button van-button--danger van-button--normal"><span class="van-button__text">基础用法</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">显示自定义消息通知</span></button></div>
+  <div>
+    <div style="margin-bottom: 15px;"><button class="van-button van-button--info van-button--normal"><span class="van-button__text">主要通知</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">成功通知</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险通知</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告通知</span></button>
+  </div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">自定义时长</span></button></div>
 </div>
 `;

src/notify/test/__snapshots__/index.spec.js.snap

@@ -1,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`create a notify 1`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2001;" name="van-popup-slide-top">test</div>`;
+exports[`create a notify 1`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: rgb(255, 255, 255); z-index: 2001;" name="van-popup-slide-top">test</div>`;
 
-exports[`notify disappear 1`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2001; background: blue;" name="van-popup-slide-top">test</div>`;
+exports[`notify disappear 1`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: red; z-index: 2001; background: blue;" name="van-popup-slide-top">test</div>`;
 
-exports[`notify disappear 2`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2001; background: blue; display: none;" name="van-popup-slide-top">test</div>`;
+exports[`notify disappear 2`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: red; z-index: 2001; background: blue; display: none;" name="van-popup-slide-top">test</div>`;
 
-exports[`notify disappear 3`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2002; background: rgb(255, 68, 68);" name="van-popup-slide-top">text2</div>`;
+exports[`notify disappear 3`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: rgb(255, 255, 255); z-index: 2002;" name="van-popup-slide-top">text2</div>`;
 
-exports[`notify disappear 4`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2002; background: rgb(255, 68, 68); display: none;" name="van-popup-slide-top">text2</div>`;
+exports[`notify disappear 4`] = `<div class="van-popup van-popup--top van-notify van-notify--danger" style="color: rgb(255, 255, 255); z-index: 2002; display: none;" name="van-popup-slide-top">text2</div>`;
+
+exports[`type prop 1`] = `<div class="van-popup van-popup--top van-notify van-notify--primary" style="color: rgb(255, 255, 255); z-index: 2001;" name="van-popup-slide-top">test</div>`;

src/notify/test/index.spec.js

@@ -11,6 +11,16 @@ test('create a notify', async () => {
   expect(notify.$el.outerHTML).toMatchSnapshot();
 });
 
+test('type prop', async () => {
+  const notify = Notify({
+    message: 'test',
+    type: 'primary'
+  });
+
+  await later();
+  expect(notify.$el.outerHTML).toMatchSnapshot();
+});
+
 test('notify disappear', async () => {
   const onClose = jest.fn();
   const notify = Notify({

src/style/var.less

@@ -360,6 +360,10 @@
 @notify-padding: @padding-xs @padding-md;
 @notify-font-size: @font-size-md;
 @notify-line-height: 20px;
+@notify-primary-background-color: @blue;
+@notify-success-background-color: @green;
+@notify-danger-background-color: @red;
+@notify-warning-background-color: @orange;
 
 // NumberKeyboard
 @number-keyboard-background-color: @white;

types/notify.d.ts

@@ -3,6 +3,7 @@ import Vue from 'vue';
 export type NotifyMessage = string | number;
 
 export type NotifyOptions = {
+  type?: 'primary' | 'success' | 'danger' | 'warning';
   value?: boolean;
   color?: string;
   message?: NotifyMessage;