From 6d3ce895023873e694bb6dcbb3fa5e602b6143dc Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sat, 15 Aug 2020 08:24:37 +0800
Subject: [PATCH] feat: migrate PasswordInput component

---
 components.js                |  1 +
 src/password-input/index.js  | 83 ++++++++++++++++++++++++++++++++
 src/password-input/index.tsx | 93 ------------------------------------
 vant.config.js               | 16 +++----
 4 files changed, 92 insertions(+), 101 deletions(-)
 create mode 100644 src/password-input/index.js
 delete mode 100644 src/password-input/index.tsx

diff --git a/components.js b/components.js
index de451cd78..367d3a8bb 100644
--- a/components.js
+++ b/components.js
@@ -53,4 +53,5 @@ module.exports = [
   'radio-group',
   'datetime-picker',
   'number-keyboard',
+  'password-input',
 ];
diff --git a/src/password-input/index.js b/src/password-input/index.js
new file mode 100644
index 000000000..d8084d5a4
--- /dev/null
+++ b/src/password-input/index.js
@@ -0,0 +1,83 @@
+// Utils
+import { createNamespace, addUnit } from '../utils';
+import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant';
+
+const [createComponent, bem] = createNamespace('password-input');
+
+export default createComponent({
+  props: {
+    info: String,
+    gutter: [Number, String],
+    focused: Boolean,
+    errorInfo: String,
+    mask: {
+      type: Boolean,
+      default: true,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    length: {
+      type: [Number, String],
+      default: 6,
+    },
+  },
+
+  emits: ['focus'],
+
+  setup(props, { emit }) {
+    function onTouchStart(event) {
+      event.stopPropagation();
+      emit('focus', event);
+    }
+
+    return () => {
+      const { mask, value, length, gutter, focused, errorInfo } = props;
+      const info = errorInfo || props.info;
+
+      const Points = [];
+      for (let i = 0; i < length; i++) {
+        const char = value[i];
+        const showBorder = i !== 0 && !gutter;
+        const showCursor = focused && i === value.length;
+
+        let style;
+        if (i !== 0 && gutter) {
+          style = { marginLeft: addUnit(gutter) };
+        }
+
+        Points.push(
+          <li
+            class={[
+              { [BORDER_LEFT]: showBorder },
+              bem('item', { focus: showCursor }),
+            ]}
+            style={style}
+          >
+            {mask ? (
+              <i style={{ visibility: char ? 'visible' : 'hidden' }} />
+            ) : (
+              char
+            )}
+            {showCursor && <div class={bem('cursor')} />}
+          </li>
+        );
+      }
+
+      return (
+        <div class={bem()}>
+          <ul
+            class={[bem('security'), { [BORDER_SURROUND]: !gutter }]}
+            onTouchstart={onTouchStart}
+          >
+            {Points}
+          </ul>
+          {info && (
+            <div class={bem(errorInfo ? 'error-info' : 'info')}>{info}</div>
+          )}
+        </div>
+      );
+    };
+  },
+});
diff --git a/src/password-input/index.tsx b/src/password-input/index.tsx
deleted file mode 100644
index 4b1258f06..000000000
--- a/src/password-input/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-// Utils
-import { createNamespace, addUnit } from '../utils';
-import { emit, inherit } from '../utils/functional';
-import { BORDER_LEFT, BORDER_SURROUND } from '../utils/constant';
-
-// Types
-import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
-
-export type PasswordInputProps = {
-  mask: boolean;
-  info?: string;
-  value: string;
-  length: number | string;
-  gutter: number;
-  focused?: boolean;
-  errorInfo?: string;
-};
-
-const [createComponent, bem] = createNamespace('password-input');
-
-function PasswordInput(
-  h: CreateElement,
-  props: PasswordInputProps,
-  slots: DefaultSlots,
-  ctx: RenderContext<PasswordInputProps>
-) {
-  const { mask, value, length, gutter, focused, errorInfo } = props;
-  const info = errorInfo || props.info;
-
-  const Points = [];
-  for (let i = 0; i < length; i++) {
-    const char = value[i];
-    const showBorder = i !== 0 && !gutter;
-    const showCursor = focused && i === value.length;
-
-    let style;
-    if (i !== 0 && gutter) {
-      style = { marginLeft: addUnit(gutter) };
-    }
-
-    Points.push(
-      <li
-        class={[{ [BORDER_LEFT]: showBorder }, bem('item', { focus: showCursor })]}
-        style={style}
-      >
-        {mask ? (
-          <i style={{ visibility: char ? 'visible' : 'hidden' }} />
-        ) : (
-          char
-        )}
-        {showCursor && <div class={bem('cursor')} />}
-      </li>
-    );
-  }
-
-  return (
-    <div class={bem()}>
-      <ul
-        class={[bem('security'), { [BORDER_SURROUND]: !gutter }]}
-        onTouchstart={(event: TouchEvent) => {
-          event.stopPropagation();
-          emit(ctx, 'focus', event);
-        }}
-        {...inherit(ctx, true)}
-      >
-        {Points}
-      </ul>
-      {info && <div class={bem(errorInfo ? 'error-info' : 'info')}>{info}</div>}
-    </div>
-  );
-}
-
-PasswordInput.props = {
-  info: String,
-  gutter: [Number, String],
-  focused: Boolean,
-  errorInfo: String,
-  mask: {
-    type: Boolean,
-    default: true,
-  },
-  value: {
-    type: String,
-    default: '',
-  },
-  length: {
-    type: [Number, String],
-    default: 6,
-  },
-};
-
-export default createComponent<PasswordInputProps>(PasswordInput);
diff --git a/vant.config.js b/vant.config.js
index 85ffc0cca..3dfb2f8ef 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -139,10 +139,10 @@ module.exports = {
                 path: 'number-keyboard',
                 title: 'NumberKeyboard 数字键盘',
               },
-              // {
-              //   path: 'password-input',
-              //   title: 'PasswordInput 密码输入框',
-              // },
+              {
+                path: 'password-input',
+                title: 'PasswordInput 密码输入框',
+              },
               {
                 path: 'picker',
                 title: 'Picker 选择器',
@@ -473,10 +473,10 @@ module.exports = {
                 path: 'number-keyboard',
                 title: 'NumberKeyboard',
               },
-              // {
-              //   path: 'password-input',
-              //   title: 'PasswordInput',
-              // },
+              {
+                path: 'password-input',
+                title: 'PasswordInput',
+              },
               {
                 path: 'picker',
                 title: 'Picker',