🐛 fix: column list action lost

ant-design · Aug 27, 2023 · 3dd48b2 · 3dd48b2
1 parent ffeba27
commit 3dd48b2
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 35 deletions.
diff --git a/src/ColumnList/ColumnItem.tsx b/src/ColumnList/ColumnItem.tsx
@@ -12,51 +12,48 @@ import ControlInput from './renderItem/Input';
 import ControlSelect from './renderItem/Select';
 
 const useStyle = createStyles(({ css, cx }, prefixCls) => {
+  const prefix = `${prefixCls}-item`;
+
   return {
     item: cx(
-      `${prefixCls}-item`,
+      prefix,
       css`
         position: relative;
         width: 100%;
+
+        &:hover .${prefix}-actions {
+          opacity: 1;
+        }
       `,
     ),
     content: cx(
-      `${prefixCls}-item-content`,
+      `${prefix}-content`,
       css`
         flex: 1;
-        height: 24px;
         font-size: 12px;
         border-radius: 2px;
         min-width: 48px;
       `,
     ),
     actions: cx(
-      `${prefixCls}-item-actions`,
+      `${prefix}-actions`,
       css`
         z-index: 10;
         color: hsla(0, 0, 0, 0.45);
         opacity: 0;
       `,
     ),
     actionsLeft: cx(
-      `${prefixCls}-item-actions-left`,
+      `${prefix}-actions-left`,
       css`
         position: absolute;
         top: 0;
         left: 0;
-
-        .studio-btn.studio-btn-sm.studio-btn-icon-only {
-          width: 14px;
-          height: 24px;
-          > svg {
-            width: 14px;
-          }
-        }
       `,
     ),
 
     actionsRight: cx(
-      `${prefixCls}-item-actions-right`,
+      `${prefix}-actions-right`,
       css`
         position: absolute;
         top: 1px;
@@ -98,6 +95,7 @@ const ColumnItem = memo<ItemRenderProps>(
           <HandleAction
             tabIndex={-1}
             cursor="grab"
+            style={{ width: 14, height: 24 }}
             data-cypress="draggable-handle"
             {...listeners}
           />

diff --git a/src/ColumnList/ColumnList.tsx b/src/ColumnList/ColumnList.tsx
@@ -139,7 +139,6 @@ const ColumnList: <T = any>(props: ColumnListProps<T>) => ReactNode = forwardRef
         <EmptyGuide />
         <SortableList
           ref={ref}
-          compact
           renderItem={renderItem}
           value={parsedValue}
           initialValues={parsedInitialValues}

diff --git a/src/SortableList/components/Item/index.tsx b/src/SortableList/components/Item/index.tsx
@@ -105,31 +105,20 @@ const Item = memo(
               })
             ) : (
               <Flexbox className={styles.content} direction={'horizontal'} align={'center'}>
-                <Flexbox
-                  className={classNames(styles.actionsLeft, styles.actions)}
-                  direction={'horizontal'}
-                >
+                <Flexbox flex={1} style={{ paddingLeft: 4 }}>
+                  {id}
+                </Flexbox>
+                <Flexbox className={classNames(styles.actions)} direction={'horizontal'}>
+                  {hideRemove ? null : <DeleteAction tabIndex={-1} onClick={onRemove} />}
                   {handle ? (
                     <HandleAction
                       tabIndex={-1}
                       cursor="grab"
                       data-cypress="draggable-handle"
-                      style={{
-                        position: 'absolute',
-                        left: '-13px',
-                      }}
                       {...listeners}
                     />
                   ) : null}
                 </Flexbox>
-                <Flexbox flex={1} style={{ paddingLeft: 4 }}>
-                  {id}
-                </Flexbox>
-                <Flexbox className={classNames(styles.actions)} direction={'horizontal'}>
-                  {hideRemove ? null : (
-                    <DeleteAction tabIndex={-1} onClick={onRemove} style={{ height: 22 }} />
-                  )}
-                </Flexbox>
               </Flexbox>
             )}
           </div>

diff --git a/src/SortableList/components/Item/style.ts b/src/SortableList/components/Item/style.ts
@@ -169,17 +169,16 @@ export const useStyle = createStyles(({ css, cx, token }, prefixCls: string) =>
         // 采用背景模糊来解决多种背景色下覆盖内容的问题 TODO：FireFox 兼容
         backdrop-filter: blur(5px);
         //background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, @bg-2 10%, @bg-2 100%);
-
-        .tech-studio-actionicon-icon {
-          height: 22px;
-        }
       `,
     ),
     content: cx(
       `${prefixCls}-item-content`,
       css`
         position: relative;
         width: 100%;
+        height: 24px;
+        border-radius: 2px;
+        min-width: 48px;
       `,
     ),
   };