feat: 新增 FormIdCollector 组件

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"

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',

src/components/FormIdCollector/Collector.module.scss

@@ -0,0 +1,7 @@
+.form {
+  display: none;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}

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>
+    )
+  }
+}

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>
+    )
+  }
+}

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'

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} />
+    )
+  }
+}

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>
+    )
+  }
+}