@hzab/form-render 1.6.13 → 1.6.15

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @hzab/form-render@1.6.15
+
+feat: 新增 formily js 的 change 事件
+
+# @hzab/form-render@1.6.14
+
+fix: 修复 TreeCheckbox 隐藏不能点击问题。
+
 # @hzab/form-render@1.6.13
 
 feat:locationListPicker在已有元素范围内可新增地址标记

package/README.md

@@ -116,17 +116,18 @@ import FormRender from "@hzab/form-render";
 
 ### InfoPanel Attributes
 
-| 参数          | 类型     | 必填 | 默认值     | 说明                                               |
-| ------------- | -------- | ---- | ---------- | -------------------------------------------------- |
-| schema        | Object   | 是   | -          | 数据信息的 schema                                  |
-| schemaScope   | Object   | 否   | -          | 全局作用域，用于实现协议表达式变量注入             |
-| layout        | Object   | 否   | horizontal | 表单布局，horizontal vertical \ inline             |
-| initialValues | Object   | 否   | -          | form 初始值                                        |
-| components    | Object   | 否   | -          | 自定义组件                                         |
-| formOptions   | Object   | 否   | -          | createForm 的参数                                  |
-| disabled      | boolean  | 否   | -          | 禁用状态                                           |
-| readOnly      | boolean  | 否   | -          | 只读状态                                           |
-| onChange      | Function | 否   | -          | 表单 onChange 事件（目前仅做触发，值计算后续优化） |
+| 参数               | 类型     | 必填 | 默认值     | 说明                                   |
+| ------------------ | -------- | ---- | ---------- | -------------------------------------- |
+| schema             | Object   | 是   | -          | 数据信息的 schema                      |
+| schemaScope        | Object   | 否   | -          | 全局作用域，用于实现协议表达式变量注入 |
+| layout             | Object   | 否   | horizontal | 表单布局，horizontal vertical \ inline |
+| initialValues      | Object   | 否   | -          | form 初始值                            |
+| components         | Object   | 否   | -          | 自定义组件                             |
+| formOptions        | Object   | 否   | -          | createForm 的参数                      |
+| disabled           | boolean  | 否   | -          | 禁用状态                               |
+| readOnly           | boolean  | 否   | -          | 只读状态                               |
+| onFormValuesChange | Function | 否   | -          | 表单事件 (form)=>{}  https://core.formilyjs.org/zh-CN/api/entry/form-effect-hooks                             |
+| onFieldValueChange | Function | 否   | -          | 表单项事件 (field, form)=>{} https://core.formilyjs.org/zh-CN/api/entry/field-effect-hooks                             |
 
 ### 方法 Methods
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.13",
+  "version": "1.6.15",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/TreeCheckbox/components/CheckboxTable/index.tsx

@@ -1,7 +1,7 @@
 import { Checkbox } from "antd";
 
 export const CheckboxTable = (props) => {
-  const { data } = props;
+  const { data, onChange } = props;
   return (
     <table className="tree-checkbox-table">
       <tbody>
@@ -27,7 +27,7 @@ export const CheckboxTable = (props) => {
                           const itKey = it?.value;
                           return (
                             it && (
-                              <Checkbox value={itKey} key={itKey}>
+                              <Checkbox onChange={onChange} value={itKey} key={itKey}>
                                 {it.label}
                               </Checkbox>
                             )
@@ -36,7 +36,7 @@ export const CheckboxTable = (props) => {
                       </>
                     ) : (
                       col && (
-                        <Checkbox value={colKey} key={colKey}>
+                        <Checkbox onChange={onChange} value={colKey} key={colKey}>
                           {col.label}
                         </Checkbox>
                       )

package/src/components/TreeCheckbox/components/TabsRender/index.tsx

@@ -36,7 +36,12 @@ export const TabRender = (props) => {
             forceRender
             tab={
               <>
-                <Checkbox value={it[valueKey]} key={it[valueKey]} onClick={onStopPropagation}></Checkbox>
+                <Checkbox
+                  value={it[valueKey]}
+                  onChange={props?.onChange}
+                  key={it[valueKey]}
+                  onClick={onStopPropagation}
+                ></Checkbox>
                 &nbsp;&nbsp;{it[labelKey]}
               </>
             }

package/src/components/TreeCheckbox/index.less

@@ -1,4 +1,5 @@
 .tree-checkbox {
+  width: 100%;
   .tree-checkbox-table {
     table-layout: fixed;
     .tree-checkbox-row {

package/src/components/TreeCheckbox/index.tsx

@@ -1,12 +1,10 @@
 import { useMemo } from "react";
-import { Checkbox, Tabs } from "antd";
+import { Checkbox } from "antd";
 import { useField } from "@formily/react";
 
 import Render from "./components/Render";
 import { getTabTableData } from "./common/utils";
 
-const { TabPane } = Tabs;
-
 import "./index.less";
 
 export const TreeCheckbox = (props) => {
@@ -30,7 +28,6 @@ export const TreeCheckbox = (props) => {
     // tab 配置列表
     tabConfList,
   } = props;
-
   const tabLevel = tabBox === true ? 1 : tabConfList?.length ?? props.tabLevel;
 
   const showDataSource = useMemo(() => {
@@ -45,8 +42,20 @@ export const TreeCheckbox = (props) => {
     // 内部数据
   };
   return (
-    <Checkbox.Group className="tree-checkbox" disabled={disabled || readOnly} value={value} onChange={onChange}>
-      <Render {..._props} list={showDataSource} />
+    <Checkbox.Group className="tree-checkbox" disabled={disabled || readOnly} value={value}>
+      <Render
+        {..._props}
+        onChange={(e) => {
+          let selectedValues = value && Array.isArray(value) ? value : [];
+          if (e.target.checked) {
+            selectedValues = [...selectedValues.filter((v) => v != e.target.value), e.target.value];
+          } else {
+            selectedValues = [...selectedValues.filter((v) => v != e.target.value)];
+          }
+          onChange(selectedValues);
+        }}
+        list={showDataSource}
+      />
     </Checkbox.Group>
   );
 };

package/src/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useImperativeHandle, forwardRef, useCallback, useRef } from "react";
-import { createForm } from "@formily/core";
+import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
 import { createSchemaField } from "@formily/react";
 import {
   Form,
@@ -67,6 +67,8 @@ const antdComponents = {
   ArrayCards,
 };
 
+const noop = () => {};
+
 const FormRender = forwardRef((props: any, parentRef) => {
   /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
   const schemaScopeRef = useRef<{ _$tempData: Object }>();
@@ -125,6 +127,11 @@ const FormRender = forwardRef((props: any, parentRef) => {
         readOnly: props.readOnly,
         disabled: props.disabled,
         ...(props.formOptions || {}),
+        effects(...args) {
+          props.onFormValuesChange && onFormValuesChange(props.onFormValuesChange);
+          props.onFieldValueChange && onFieldValueChange("*", props.onFieldValueChange);
+          props.formOptions?.effects && props.formOptions?.effects(...args);
+        },
       }),
     [],
   );