Merge pull request #1307 from alibaba/fix-setschema

修复 setSchemaByPath 判断，isMatch 方法使用错误

docs/form-render/schema/simple.ts

@@ -3,11 +3,13 @@ export default {
   properties: {
     input: {
       title: '输入框',
-      type: 'string'
+      type: 'string',
+      widget: 'input'
     },
     select: {
       title: '下拉框',
       type: 'string',
+      widget: 'select',
       props: {
         options: [
           { label: '早', value: 'a' },

packages/form-render/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+### 2.2.8
+- [+] SearchForm 增加 onReset 自定义重置方法
+- [-] 修复 setSchemaByPath 判断，在某些情况不生效
+- [-] 修复 SearchForm layoutAuto 自适应布局异常
 ### 2.2.6
 - [+] SearchForm 增加 closeReturnSearch 关闭回车查询属性
 

packages/form-render/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-render",
-  "version": "2.2.8-beta.1",
+  "version": "2.2.8",
   "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "keywords": [
     "Form",

packages/form-render/src/derivative/SearchForm/ActionView.tsx

@@ -1,36 +1,35 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext } from 'react';
 import { Button, Space, ConfigProvider } from 'antd';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { translation } from '../../utils'
 
 const ActionView = (props: any) => {
   const {
+    onReset,
     searchBtnRender,
     style,
     className,
     form,
     searchText,
     resetText,
     collapsed,
-    defaultCollapsed = true,
     setLimitHeight,
+    setExpand,
+    expand,
     loading,
     retainBtn,
     mode,
   } = props;
 
-  const [expand, setExpand] = useState(!defaultCollapsed);
   const configCtx = useContext(ConfigProvider.ConfigContext);
   const t = translation(configCtx);
 
-  useEffect(() => {
-    if (!collapsed) {
+  const handleReset = () => {
+    if (onReset) {
+      onReset(form);
       return;
     }
-    setLimitHeight(defaultCollapsed);
-  }, []);
-
-  const handleReset = () => {
+
     form.resetFields();
     form.submit();
   };

packages/form-render/src/derivative/SearchForm/index.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState, useRef, useContext } from 'react';
 import { Col, ConfigProvider } from 'antd';
 import classnames from 'classnames';
+import { debounce } from 'lodash-es';
+import { useUpdateEffect } from 'ahooks';
 
 import FormRender from '../../form-core';
 import { translation } from '../../utils';
@@ -71,19 +73,24 @@ const SearchForm: <RecordType extends object = any>(
     loading,
     onMount,
     onSearch,
-    column: _column=4,
+    onReset,
+    column: _column = 4,
     collapsed: _collapsed,
-    defaultCollapsed,
+    defaultCollapsed = true,
     schema,
     retainBtn,
     closeReturnSearch,
+    resetAfter,
     ...otherProps
   } = props;
 
-  const [limitHeight, setLimitHeight] = useState<boolean>();
   const searchRef = useRef<any>();
+  const preWidthRef = useRef<any>();
+  const heightRef = useRef<any>();
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [expand, setExpand] = useState(!defaultCollapsed);
+  const [limitHeight, setLimitHeight] = useState<boolean>();
   const [column, setColumn] = useState(schema.column || _column);
-  const [collapsed, setCollapsed] = useState(_collapsed);
   const isColumn = (otherProps.displayType || schema.displayType) === 'column';
 
   const actionProps = {
@@ -95,54 +102,83 @@ const SearchForm: <RecordType extends object = any>(
     loading,
     form,
     collapsed,
-    defaultCollapsed
+    onReset,
+    expand
   };
 
   useEffect(() => {
     initMount();
   }, []);
 
   useEffect(() => {
+    setTimeout(() => {
+      const { clientHeight } = searchRef?.current || {};
+      heightRef.current = clientHeight;
+      // 高度超过限度值，满足触发折叠逻辑
+      if (_collapsed && clientHeight > (isColumn ? 110 : 136)) {
+        setCollapsed(true);
+
+        if (defaultCollapsed) {
+          setLimitHeight(true);
+          setExpand(false);
+        }
+      }
+
+      // 监听容器大小发生变化
+      handleSearchResize();
+    }, 0);
+  }, []);
+
+  useUpdateEffect(() => {
+    if (!_collapsed) {
+      return;
+    }
+    setTimeout(() => {
+      const { clientHeight } = searchRef?.current;
+
+      if (!collapsed && clientHeight > (isColumn ? 110 : 136)) {
+        setCollapsed(true);
+      }
+
+      if (collapsed && _column === column && heightRef.current <= (isColumn ? 110 : 136)) {
+        setCollapsed(false);
+      }
+
+      setLimitHeight(!expand);
+    }, 0);
+  }, [column]);
+
+  const handleSearchResize = () => {
     if (!layoutAuto) {
       return;
     }
 
-    const resizeObserver = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(debounce(() => {
       const { clientWidth, clientHeight } = searchRef?.current || {};
-      if(clientWidth === 0 || clientHeight === 0){
+      if(clientWidth === 0 || clientHeight === 0 || !preWidthRef.current || preWidthRef.current === clientWidth){
+        preWidthRef.current = clientWidth;
         return;
       }
-      if (clientHeight < (isColumn ? 110 : 136)) {
-        setCollapsed(false);
-        setLimitHeight(false)
-      }
+
+      preWidthRef.current = clientWidth;
+
       for (let i = _column; i > 0; i--) {
         const item = clientWidth/i;
         if (item >= (layoutAuto?.fieldMinWidth || 340)) {
           setColumn(i);
           break;
         }
         if (i === 1) {
-          setColumn(1)
+          setColumn(1);
         }
       }
-    });
+    }, 300));
 
     resizeObserver.observe(searchRef.current);
     () => {
       resizeObserver.disconnect();
     }
-  }, []);
-
-  useEffect(() => {
-    setTimeout(() => {
-      const { clientHeight } = searchRef?.current || {};
-      if (clientHeight < (isColumn ? 110 : 136)) {
-        setCollapsed(false);
-        setLimitHeight(false)
-      }
-    }, 0);
-  }, []);
+  };
 
   const initMount = async () => {
     if (!searchOnMount) {
@@ -174,7 +210,7 @@ const SearchForm: <RecordType extends object = any>(
   };
 
   const operateShow = mode !== 'simple' || (mode === 'simple' && retainBtn);
-  
+
   return (
     <div
       className={classnames('fr-search', { [className || '']: !!className,  'fr-column-search': isColumn })}
@@ -198,13 +234,19 @@ const SearchForm: <RecordType extends object = any>(
         operateExtra={operateShow && (
           <Col 
             className={classnames('search-action-col', { 
-                'search-action-fixed': limitHeight,
-                'search-action-column': isColumn,
-                'search-action-column-fixed': limitHeight && isColumn,
+              'search-action-fixed': limitHeight,
+              'search-action-column': isColumn,
+              'search-action-column-fixed': limitHeight && isColumn,
             })} 
             style={{ minWidth: (1/column)*100 + '%' }}
           >
-            <ActionView {...actionProps} setLimitHeight={setLimitHeight} retainBtn={retainBtn} mode={mode} />
+            <ActionView 
+              {...actionProps} 
+              setLimitHeight={setLimitHeight} 
+              retainBtn={retainBtn} 
+              mode={mode} 
+              setExpand={setExpand} 
+            />
           </Col>
         )}
       />

packages/form-render/src/models/useForm.ts

@@ -133,7 +133,7 @@ const useForm = () => {
   // 设置某个字段的协议
   xform.setSchemaByPath = (_path: string, _newSchema: any) => {
     // diff 判断是否需要更新，存在函数跳过
-    if (!hasFuncProperty(_newSchema) && _isMatch(xform.getSchemaByPath(_path), _newSchema)) {
+    if (!hasFuncProperty(_newSchema) && _isMatch(_newSchema, xform.getSchemaByPath(_path))) {
       return;
     }
 

packages/form-render/src/type.ts

@@ -425,6 +425,7 @@ export interface SearchProps<RecordType> extends Omit<FRProps, 'form'> {
   resetText?: string;
   onSearch?: (search: any) => any;
   afterSearch?: (params: any) => any;
+  onReset?: (form: any) => void;
   widgets?: any;
   form?: any;
   [key:string]: any