plain-design 1.0.0-beta.126 → 1.0.0-beta.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.126",
+  "version": "1.0.0-beta.127",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -40,7 +40,7 @@
     "react-transition-group": "4.4.5"
   },
   "devDependencies": {
-    "@peryl/react-compose": "0.0.221",
+    "@peryl/react-compose": "0.0.223",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-transform-class-properties": "7.23.3",
     "@babel/preset-env": "7.23.7",

package/src/packages/components/AutoTable/use/useTableOptionKeyboard.tsx

@@ -55,6 +55,7 @@ export const useTableOptionKeyboard = AutoModule.createRegistration(({ hooks })
       staticState.clearTableEnterEvent = () => {
         el.removeEventListener('mouseenter', onEnter);
         el.removeEventListener('mouseleave', onLeave);
+        staticState.clearTableEnterEvent = null;
       };
 
       return staticState.clearTableEnterEvent;
@@ -70,7 +71,10 @@ export const useTableOptionKeyboard = AutoModule.createRegistration(({ hooks })
         }
       };
       document.body.addEventListener('keydown', onKeydown);
-      staticState.clearTableKeydownEvent = () => {document.body.removeEventListener('keydown', onKeydown);};
+      staticState.clearTableKeydownEvent = () => {
+        document.body.removeEventListener('keydown', onKeydown);
+        staticState.clearTableKeydownEvent = null;
+      };
       return staticState.clearTableKeydownEvent;
     },
   };
@@ -83,6 +87,7 @@ export const useTableOptionKeyboard = AutoModule.createRegistration(({ hooks })
   onBeforeUnmount(() => {
     staticState.clearTableEnterEvent?.();
     staticState.clearTableKeydownEvent?.();
+    staticState.listeners.splice(0, staticState.listeners.length);
   });
 
   const on = (name: string, handler: (e: KeyboardEvent) => void) => {

package/src/packages/components/FilterFormMultiple/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "@peryl/react-compose";
+import {computed, designComponent, Fragment, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "@peryl/react-compose";
 import {PlainObject} from "@peryl/utils/event";
 import {Form} from "../Form";
 import {FormItem} from "../FormItem";
@@ -95,9 +95,12 @@ export const FilterFormMultiple = designComponent({
      * @author  韦胜健
      * @date    2023.1.6 16:00
      */
-    const usingFilterOptions = computed(() => (props.filterOptions || []).map(i => (
-      { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
-    )));
+    const usingFilterOptions = computed(() => {
+      // console.warn('run usingFilterOptions');
+      return (props.filterOptions || []).map(i => (
+        { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
+      ));
+    });
 
     /**
      * props.filterOptions变化时更新内部状态
@@ -240,7 +243,9 @@ export const FilterFormMultiple = designComponent({
                           <SelectOption label={handler!.label()} val={handler!.name} key={handler!.name}/>
                         ))}
                       </Select>
-                      {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
+                      <Fragment key={filterOption.filterHandler}>
+                        {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
+                      </Fragment>
                     </InputGroup>
                   </FormItem>
                 );

package/src/packages/components/FilterFormSingle/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, PropType, reactive, watch} from "@peryl/react-compose";
+import {computed, designComponent, Fragment, PropType, reactive, watch} from "@peryl/react-compose";
 import {PlainObject} from "@peryl/utils/event";
 import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
 import {InputGroup} from "../InputGroup";
@@ -48,7 +48,10 @@ export const FilterFormSingle = designComponent({
       }
     };
 
-    const state = reactive(deepcopy(props.initialState) || utils.createState({ filterOptions: props.filterOptions || [] }));
+    const state: iFilterFormSingleState = reactive(
+      deepcopy(props.initialState) ||
+      utils.createState({ filterOptions: props.filterOptions || [] })
+    );
 
     /**
      * 正在使用的目标filterOptions
@@ -146,20 +149,22 @@ export const FilterFormSingle = designComponent({
         <InputGroup style={{ width: props.width }}>
           {slots.prepend()}
           {!props.hideFieldSelector && (
-            <Select width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
+            <Select key="field_selector" width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
               {(props.filterOptions || []).map((option) => (
                 <SelectOption label={option.label} val={option.field} key={option.label + option.field}/>
               ))}
             </Select>
           )}
           {!props.hideHandlerSelector && (
-            <Select width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
+            <Select key={state.field} width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
               {(FilterService.touch(usingFilterOption.value.filterType)).state.list.map((handler) => (
                 <SelectOption label={handler.label()} val={handler.name} key={handler.name}/>
               ))}
             </Select>
           )}
-          {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
+          <Fragment key={state.filterHandler}>
+            {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
+          </Fragment>
           {!props.hideSearchButton && (
             <Button label={i18n.$it('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
           )}

package/src/packages/components/InputGroup/input-group.scss

@@ -34,10 +34,13 @@
       }
     }
 
-    &.#{componentName(input)}, &.#{componentName(button)} {
-      & + .#{componentName(input)}, & + .#{componentName(button)} {
-        margin-left: -1px;
-      }
+    &.#{componentName(input)} + .#{componentName(button)} {
+      margin-left: -1px;
+    }
+
+    &.#{componentName(button)} + .#{componentName(input)},
+    &.#{componentName(button)} + .#{componentName(button)} {
+      margin-left: -1px;
     }
   }
 }

package/src/packages/components/Table/standard/PlcOperation/OuterOperation.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, RenderNode, useClasses} from "@peryl/react-compose";
+import {computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClasses} from "@peryl/react-compose";
 import {eTableOperationPosition, iTableOperation, iTableOperationPermitConfig, iTableOuterOperation, iTableOuterOperationConfig, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
 import {Button} from "../../../Button";
 import {ButtonGroup} from "../../../ButtonGroup";
@@ -38,6 +38,7 @@ export const OuterOperation = designComponent({
         },
       },
     });
+    onBeforeUnmount(() => {state.dropdown = {} as any;});
 
     const permission = (() => {
       const { permit } = props;