From 425ffb87eb0d84bb1ad00726066f114cb1559a42 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sat, 4 Jul 2020 22:38:53 +0800
Subject: [PATCH] refactor: info component

---
 src-next/info/index.js                        | 23 +++++++++++++
 src-next/info/index.less                      | 29 +++++++++++++++++
 .../test/__snapshots__/index.spec.js.snap     |  7 ++++
 src-next/info/test/index.spec.js              | 32 +++++++++++++++++++
 4 files changed, 91 insertions(+)
 create mode 100644 src-next/info/index.js
 create mode 100644 src-next/info/index.less
 create mode 100644 src-next/info/test/__snapshots__/index.spec.js.snap
 create mode 100644 src-next/info/test/index.spec.js

diff --git a/src-next/info/index.js b/src-next/info/index.js
new file mode 100644
index 000000000..d0759669e
--- /dev/null
+++ b/src-next/info/index.js
@@ -0,0 +1,23 @@
+// Utils
+import { isDef } from '../../src/utils';
+import { createNamespace } from '../utils/create';
+
+const [createComponent, bem] = createNamespace('info');
+
+export default createComponent({
+  props: {
+    dot: Boolean,
+    info: [Number, String],
+  },
+
+  render() {
+    const { dot, info } = this;
+    const showInfo = isDef(info) && info !== '';
+
+    if (!dot && !showInfo) {
+      return;
+    }
+
+    return <div class={bem({ dot })}>{dot ? '' : info}</div>;
+  },
+});
diff --git a/src-next/info/index.less b/src-next/info/index.less
new file mode 100644
index 000000000..a35a927f5
--- /dev/null
+++ b/src-next/info/index.less
@@ -0,0 +1,29 @@
+@import '../style/var';
+
+.van-info {
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  min-width: @info-size;
+  padding: @info-padding;
+  color: @info-color;
+  font-weight: @info-font-weight;
+  font-size: @info-font-size;
+  font-family: @info-font-family;
+  line-height: @info-size - @info-border-width * 2;
+  text-align: center;
+  background-color: @info-background-color;
+  border: @info-border-width solid @white;
+  border-radius: @info-size;
+  transform: translate(50%, -50%);
+  transform-origin: 100%;
+
+  &--dot {
+    width: @info-dot-size;
+    min-width: 0;
+    height: @info-dot-size;
+    background-color: @info-dot-color;
+    border-radius: 100%;
+  }
+}
diff --git a/src-next/info/test/__snapshots__/index.spec.js.snap b/src-next/info/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..84b187992
--- /dev/null
+++ b/src-next/info/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render when info is empty string 1`] = ``;
+
+exports[`should not render when info is empty undefined 1`] = ``;
+
+exports[`should render when info is zero 1`] = `<div class="van-info">0</div>`;
diff --git a/src-next/info/test/index.spec.js b/src-next/info/test/index.spec.js
new file mode 100644
index 000000000..d0a2e1678
--- /dev/null
+++ b/src-next/info/test/index.spec.js
@@ -0,0 +1,32 @@
+import Info from '..';
+import { mount } from '../../../test';
+
+test('should not render when info is empty string', () => {
+  const wrapper = mount(Info, {
+    propsData: {
+      info: '',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should not render when info is empty undefined', () => {
+  const wrapper = mount(Info, {
+    propsData: {
+      info: undefined,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should render when info is zero', () => {
+  const wrapper = mount(Info, {
+    propsData: {
+      info: 0,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});