@hzab/form-render-mobile 0.0.1 → 0.0.2

package/README.md

@@ -9,19 +9,47 @@
 ## 示例
 
 ```jsx
+import { useRef } from "react";
 import FormRender from "@hzab/form-render-mobile";
-import Schema from './test.schema.json'
 
-<FormRender schema={schema} />;
+import Schema from "./test.schema.json";
+
+export default () => {
+  const formRef = useRef({
+    formRender: Object,
+  });
+
+  function onClick() {
+    console.log(JSON.stringify(formRef?.current?.formRender.values));
+  }
+
+  return (
+    <div>
+      <FormRender ref={formRef} schema={Schema} initialValues={ipt:'xxxxssss'} />
+      <button onClick={onClick}>提交</button>
+    </div>
+  );
+};
 ```
 
 ## API
 
 ### InfoPanel Attributes
 
-| 参数   | 类型   | 必填 | 默认值 | 说明              |
-| ------ | ------ | ---- | ------ | ----------------- | --- |
-| schema | Object | 是   | -      | 数据信息的 schema |     |
+| 参数          | 类型                  | 必填 | 默认值 | 说明                          |
+| ------------- | --------------------- | ---- | ------ | ----------------------------- | --- |
+| schema        | Object                | 是   | -      | 数据信息的 schema             |     |
+| className     | string                | 否   | -      | 元素类名                      |     |
+| initialValues | Object                | 否   | -      | 表单初始值                    |     |
+| schemaScope   | Object                | 否   | -      | formily scope 自定义数据      |     |
+| components    | SchemaReactComponents | 否   | -      | formily 自定义组件            |     |
+| readOnly      | boolean               | 否   | -      | 是否只读                      |     |
+| disabled      | boolean               | 否   | -      | 是否禁用                      |     |
+| formOptions   | Object                | 否   | -      | createForm 配置项             |     |
+| hasSubmit     | boolean               | 否   | -      | 是否有提交按钮                |     |
+| onSubmit      | Function              | 否   | -      | 提交事件 (values): void       |     |
+| init          | Function              | 否   | -      | 组件初始化 (form): void       |     |
+| footerRender  | Function              | 否   | -      | 底部渲染插槽 (): ReactElement |     |
 
 # 组件开发流程
 
@@ -39,7 +67,8 @@ import Schema from './test.schema.json'
 ## 命令
 
 - Mac 执行该命令，设置 pre-commit 为可执行文件
-  - npm run mac-chmod 
+
+  - npm run mac-chmod
   - chmod +x .husky && chmod +x .husky/pre-commit
 
 - 生成文档：npm run docs

package/lib/index.js

@@ -44638,7 +44638,9 @@
             var t = e.precision,
               n = e.className,
               r = Yg(e, Gg);
-            return o().createElement(_d, Wv({ className: "number-picker ".concat(n) }, r, { digits: t }));
+            return r.readOnly
+              ? r.value || ""
+              : o().createElement(_d, Wv({ className: "number-picker ".concat(n) }, r, { digits: t }));
           },
           (0, sh.mapProps)(function (e, t) {
             return qg(qg({}, e), {}, { form: t.form, field: t });
@@ -46464,6 +46466,21 @@
               sh.FormProvider,
               { form: a },
               o().createElement(r, { schema: s }),
+              !1 !== t.hasSubmit
+                ? o().createElement(
+                    Sp,
+                    null,
+                    o().createElement(
+                      Cv,
+                      {
+                        onSubmit: function (e) {
+                          t.onSubmit && t.onSubmit(e);
+                        },
+                      },
+                      "提交",
+                    ),
+                  )
+                : null,
               o().createElement("div", { className: "form-render-footer" }, t.footerRender && t.footerRender()),
             ),
           );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "formily-form-render-mobile",
   "main": "lib",
   "scripts": {
@@ -21,10 +21,12 @@
   "author": "CaiYansong",
   "license": "ISC",
   "devDependencies": {
+    "@ant-design/icons": "^4.8.1",
     "@hzab/permissions": "0.0.4",
     "@hzab/webpack-config": "0.0.12",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
+    "antd": "^4.24.13",
     "axios": "^1.4.0",
     "babel-plugin-import": "^1.13.8",
     "eslint": "^8.30.0",
@@ -38,11 +40,9 @@
     "typescript": "^4.9.4"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.8.1",
     "@formily/antd-mobile": "^1.0.0-beta.3",
     "@formily/core": "^2.2.29",
     "@formily/react": "^2.2.29",
-    "antd": "^4.24.13",
     "antd-mobile": "^5.32.0",
     "antd-mobile-icons": "^0.2.2",
     "leaflet": "^1.9.4",

package/src/components/NumberPicker/index.jsx

@@ -5,6 +5,9 @@ import { Stepper } from "antd-mobile";
 import "./index.less";
 
 function NumberPicker({ precision, className, ...props }) {
+  if (props.readOnly) {
+    return props.value || "";
+  }
   return <Stepper className={`number-picker ${className}`} {...props} digits={precision} />;
 }
 

package/src/index.tsx

@@ -17,7 +17,7 @@ import {
   Submit,
   Reset,
 } from "@formily/antd-mobile";
-import { Dialog, Slider } from "antd-mobile";
+import { Slider } from "antd-mobile";
 import { createForm } from "@formily/core";
 import { FormProvider, createSchemaField, Schema } from "@formily/react";
 
@@ -83,15 +83,17 @@ const FormRender = forwardRef((props: formPropsI, parentRef) => {
       <FormProvider form={formRender}>
         {/*  @ts-ignore */}
         <SchemaField schema={schema} />
-        {/* <FormButtonGroup>
-          <Submit
-            onSubmit={(e) => {
-              console.log(e);
-            }}
-          >
-            提交
-          </Submit>
-        </FormButtonGroup> */}
+        {props.hasSubmit !== false ? (
+          <FormButtonGroup>
+            <Submit
+              onSubmit={(values) => {
+                props.onSubmit && props.onSubmit(values);
+              }}
+            >
+              提交
+            </Submit>
+          </FormButtonGroup>
+        ) : null}
         <div className="form-render-footer">{props.footerRender && props.footerRender()}</div>
       </FormProvider>
     </div>

package/src/type.d.ts

@@ -1,15 +1,34 @@
-import { SchemaReactComponents, Schema } from "@formily/react";
 import { ReactElement } from "react";
+import { SchemaReactComponents, Schema } from "@formily/react";
+import { Form } from "@formily/core";
 
 export interface formPropsI {
+  /** 元素类名 */
   className?: string;
+  /** 表单初始值 */
   initialValues?: Object;
+  /** 表单 schema */
   schema: { schema: Object } | Object;
+  /** formily scope 自定义数据 */
   schemaScope?: Object;
+  /** formily 自定义组件 */
   components?: SchemaReactComponents;
+  /** 是否只读 */
   readOnly?: boolean;
+  /** 是否禁用 */
   disabled?: boolean;
+  /** createForm 配置项 */
   formOptions?: Object;
+  /** 是否有提交按钮 */
+  hasSubmit?: boolean;
+  /** 提交事件 */
+  onSubmit?(values): void;
+  /** 组件初始化 */
   init?(form): void;
+  /** 底部渲染插槽 */
   footerRender?(): ReactElement;
 }
+
+export interface formRefI {
+  formRender: Form;
+}