fix(属性面板): 优化 MultipleWrapper 组件

1.解决控制台中的错误调整删除逻辑

src/properties/DynaActionForm.tsx

@@ -177,8 +177,6 @@ const DynaActionForm = ({ library = 'cn.asany.ui.editor.properties', ...props }:
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
-  console.log('groups', groups);
-
   return (
     <Form form={form} component={false} name="control-hooks" onValuesChange={handleValuesChange}>
       {groups.filter(visibleFilter(value)).map(({ id, name, layout, fields }) => (

src/properties/combine/MultipleWrapper.tsx

@@ -1,7 +1,7 @@
 // import Sortable, { ISortableItem, SortableItemContentProps } from '../../sortable';
 import React, { memo, useRef, useState } from 'react';
 
-import Sortable from '@asany/sortable';
+import Sortable, { SortableItemProps } from '@asany/sortable';
 import { Icon } from '@asany/icons';
 
 import { generateUUID } from '../../utils';
@@ -52,49 +52,44 @@ export interface MultipleWrapperProps {
   immediatelyShowPopoverWhenCreated: boolean;
 
   value: any[];
-  initializer?: (data: IMultipleWrapperData<any>) => IMultipleWrapperData<any>;
+  initializer?: (data: IMultipleWrapperData<any>) => any;
   onChange: (value: IMultipleWrapperData<any>[]) => void;
   pipeline?: (value: IMultipleWrapperData<any>[], current: IMultipleWrapperData<any>) => IMultipleWrapperData<any>[];
 }
 
-interface ItemRenderProps {
-  drag: any;
-  data: any;
-  onDelete: any;
-  onChange: any;
-  showPopoverImmediatelyAtCreated: boolean;
-}
-
-type ItemRender = (props: ItemRenderProps) => React.ReactElement;
+type ItemRender = (props: any) => React.ReactElement;
 
 type BuildItemRenderOptions = {
-  buildDelete: (data: IMultipleWrapperData<any>) => () => void;
   buildChange: (data: IMultipleWrapperData<any>) => (newData: any) => void;
   className?: string;
   showPopoverImmediatelyAtCreated: boolean;
   children: any;
 };
 
 const buildItemRender = (XItemRender: ItemRender | undefined, options: BuildItemRenderOptions) => {
-  const { children, className, buildChange, buildDelete, showPopoverImmediatelyAtCreated } = options;
+  const { children, className, buildChange, showPopoverImmediatelyAtCreated } = options;
   const InnerItemRender = React.forwardRef((props: any, ref: any) => {
     if (!children && !XItemRender) {
       return <WrapperItem {...props} ref={ref} />;
     }
     return XItemRender ? <XItemRender {...props} ref={ref} /> : React.cloneElement(children, { ...props, ref });
   });
-  return ({ data, drag, ...props }: any /*SortableItemContentProps*/, ref: any) => {
-    console.log('popoverContentVisible', showPopoverImmediatelyAtCreated);
-    const itemRenderProps: ItemRenderProps = {
+  return (
+    { data, drag, remove, update, dragging, indicator, animated, level, index, ...props }: SortableItemProps<any>,
+    ref: any
+  ) => {
+    const itemRenderProps = {
+      level,
+      index,
       drag,
       data,
-      onDelete: buildDelete(data as any),
+      onDelete: remove,
       onChange: buildChange(data as any),
       showPopoverImmediatelyAtCreated,
     };
 
     return (
-      <li {...props} className={className} ref={ref}>
+      <li {...animated} {...props} className={className} ref={ref}>
         <InnerItemRender {...itemRenderProps} />
       </li>
     );
@@ -190,26 +185,21 @@ export function MultipleWrapper<T>(props: MultipleWrapperProps) {
       return;
     }
     const item = getAddItem(sortableType.current, itemName, canSortItem, getAddData);
-    setValue([...value, { ...(initializer ? initializer(item) : item), state: 'isNew' }]);
+    setValue([...value, { ...item, data: initializer ? initializer(item) : item.data, state: 'isNew' }]);
   };
 
   const handleSortChange = (items: any[]) => {
     // console.log('handleSortChange', items);
     setValue(items);
   };
 
-  // TODO buildItemRender
-
   const itemRender = buildItemRender(defaultItemRender, {
-    buildDelete: handleDelete,
     buildChange: handleItemChange,
     className: itemClassName,
     showPopoverImmediatelyAtCreated: immediatelyShow,
     children,
   });
 
-  console.log('xxxx', value);
-
   return (
     <div className="multiple-wrapper">
       <div className="multiple-wrapper-header">

src/style/sketch.less

@@ -638,6 +638,7 @@
               }
             }
             > .sortable-flipper > li {
+              background-color: #fff;
               display: flex;
             }
             > li {