From 0b6b7863f68e6da0315680c58418b3b5365e6fce Mon Sep 17 00:00:00 2001
From: Jay Fong <fjc0kb@gmail.com>
Date: Mon, 11 Mar 2019 13:27:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20FormIdCollector=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/app.tsx                                   |  9 ++--
 .../FormIdCollector/Collector.module.scss     |  7 +++
 src/components/FormIdCollector/Collector.tsx  | 38 ++++++++++++++++
 src/components/FormIdCollector/index.tsx      | 45 +++++++++++++++++++
 src/components/index.ts                       |  1 +
 src/pages/Test/Index.tsx                      | 10 +++++
 src/pages/Test/Test.tsx                       | 18 ++++++++
 8 files changed, 125 insertions(+), 5 deletions(-)
 create mode 100644 src/components/FormIdCollector/Collector.module.scss
 create mode 100644 src/components/FormIdCollector/Collector.tsx
 create mode 100644 src/components/FormIdCollector/index.tsx
 create mode 100644 src/pages/Test/Index.tsx
 create mode 100644 src/pages/Test/Test.tsx

diff --git a/package.json b/package.json
index 85d43ee..a8c0a33 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "mounted",
   "version": "0.1.0",
   "description": "基于 Taro 的微信小程序组件库。",
-  "main": "src/index.js",
+  "main": "src/components/index.ts",
   "scripts": {
     "dev": "taro build --type weapp --watch",
     "release": "standard-version -a && git push --follow-tags origin master"
diff --git a/src/app.tsx b/src/app.tsx
index b9d8674..bffabc1 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -4,13 +4,14 @@ import Home from './pages/Home/Home'
 class App extends Taro.Component {
   config: Taro.Config = {
     pages: [
-      // 'pages/Home/Home',
-      // 'pages/Sticky/Sticky',
-      'pages/Transition/X',
+      'pages/Home/Home',
+      'pages/Sticky/Sticky',
+      // 'pages/Transition/X',
       // 'pages/Popup/Popup',
       // 'pages/Picker/PickerView',
       // 'pages/Picker/Picker',
-      'pages/Picker/SinglePicker',
+      // 'pages/Picker/SinglePicker',
+      // 'pages/Test/Index',
     ],
     window: {
       navigationBarTitleText: 'DEMO',
diff --git a/src/components/FormIdCollector/Collector.module.scss b/src/components/FormIdCollector/Collector.module.scss
new file mode 100644
index 0000000..4d352fb
--- /dev/null
+++ b/src/components/FormIdCollector/Collector.module.scss
@@ -0,0 +1,7 @@
+.form {
+  display: none;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
diff --git a/src/components/FormIdCollector/Collector.tsx b/src/components/FormIdCollector/Collector.tsx
new file mode 100644
index 0000000..e0e3ee6
--- /dev/null
+++ b/src/components/FormIdCollector/Collector.tsx
@@ -0,0 +1,38 @@
+import { Form, Button } from '@tarojs/components'
+import { noop } from 'vtils'
+import { component, RequiredProp } from '../component'
+import _ from './Collector.module.scss'
+import Self from './Collector'
+
+export default class Collector extends component({
+  props: {
+    count: 0 as any as RequiredProp<number>,
+    onCollect: noop as any as RequiredProp<
+      (e: { detail: { formId: string } }) => void
+    >,
+  },
+}) {
+  public render() {
+    const { count } = this.props
+    return (
+      <Form
+        className={_.form}
+        reportSubmit={true}
+        onSubmit={this.props.onCollect}>
+        <Button formType='submit'>
+          {
+            count > 1
+              ? (
+                <Self
+                  count={count - 1}
+                  onCollect={this.props.onCollect}>
+                  {this.props.children}
+                </Self>
+              )
+              : this.props.children
+          }
+        </Button>
+      </Form>
+    )
+  }
+}
diff --git a/src/components/FormIdCollector/index.tsx b/src/components/FormIdCollector/index.tsx
new file mode 100644
index 0000000..831ecd2
--- /dev/null
+++ b/src/components/FormIdCollector/index.tsx
@@ -0,0 +1,45 @@
+import { Label, View, Button } from '@tarojs/components'
+import { noop } from 'vtils'
+import { component } from '../component'
+import Collector from './Collector'
+
+/**
+ * Form Id 收集组件。
+ */
+export default class MFormIdCollector extends component({
+  props: {
+    /** 每次点击的收集个数 */
+    count: 1 as number,
+    /** 是否禁用 */
+    disabled: false as boolean,
+    /** 收集完成事件 */
+    onCollect: noop as (formIds: string[]) => void,
+  },
+}) {
+  /** Form Id 列表 */
+  formIds: string[] = []
+
+  handleSubmit: Collector['props']['onCollect'] = e => {
+    this.formIds.push(e.detail.formId)
+    if (this.formIds.length === this.props.count) {
+      this.props.onCollect(this.formIds.slice())
+      this.formIds = []
+    }
+  }
+
+  public render() {
+    const { count, disabled } = this.props
+    return disabled ? this.props.children : (
+      <View>
+        <Label for='button'>
+          {this.props.children}
+        </Label>
+        <Collector
+          count={count}
+          onCollect={this.handleSubmit}>
+          <Button id='button' />
+        </Collector>
+      </View>
+    )
+  }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 36d1aea..f01c0f0 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,5 @@
 // @index(^[A-Z]): export { default as M${variable/Block$//:pascal:} } from ${relpath}
+export { default as MFormIdCollector } from './FormIdCollector'
 export { default as MPicker } from './Picker'
 export { default as MPickerView } from './PickerView'
 export { default as MPopup } from './Popup'
diff --git a/src/pages/Test/Index.tsx b/src/pages/Test/Index.tsx
new file mode 100644
index 0000000..daa06ab
--- /dev/null
+++ b/src/pages/Test/Index.tsx
@@ -0,0 +1,10 @@
+import { component } from '../../components/component'
+import Test from './Test'
+
+export default class extends component() {
+  render() {
+    return (
+      <Test n={1} />
+    )
+  }
+}
diff --git a/src/pages/Test/Test.tsx b/src/pages/Test/Test.tsx
new file mode 100644
index 0000000..9c238e9
--- /dev/null
+++ b/src/pages/Test/Test.tsx
@@ -0,0 +1,18 @@
+import { Component } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import Self from './Test'
+
+export default class Test extends Component<{ n: number }> {
+  render() {
+    const { n } = this.props
+    return (
+      <View>
+        {
+          n === 1
+            ? <Self n={0} />
+            : 'over'
+        }
+      </View>
+    )
+  }
+}