fix(comp:table): virtual + fixed column abnormal display with chrome83 (

#1473) * fix(comp:table): virtual + fixed column abnormal display with chrome83 * fix(comp:table): the radio of selectable support reverse selected
IDuxFE · Feb 27, 2023 · 4523705 · 4523705
1 parent c71ee04
commit 4523705
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 32 deletions.
diff --git a/packages/components/collapse/__tests__/__snapshots__/collapse.spec.ts.snap b/packages/components/collapse/__tests__/__snapshots__/collapse.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Collapse > panel work > header work 1`] = `
 "<div class=\\"ix-collapse ix-collapse-md\\">
   <div class=\\"ix-collapse-panel\\">
-    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
+    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right ix-collapse-panel-expand-icon\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
       <!---->
       <div class=\\"ix-header-content\\">
         <div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">header 0</span>
@@ -27,7 +27,7 @@ exports[`Collapse > panel work > header work 1`] = `
 exports[`Collapse > panel work > header work 2`] = `
 "<div class=\\"ix-collapse ix-collapse-md\\">
   <div class=\\"ix-collapse-panel\\">
-    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"right\\"><path d=\\"m411.776 294.784 208.192 208.192a12.8 12.8 0 0 1 0 18.048L411.776 729.216a12.8 12.8 0 0 0 0 18.112l27.2 27.136a12.8 12.8 0 0 0 18.048 0l253.44-253.44a12.8 12.8 0 0 0 0-18.048l-253.44-253.44a12.8 12.8 0 0 0-18.048 0l-27.2 27.136a12.8 12.8 0 0 0 0 18.112z\\"></path></svg></i></span>
+    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right ix-collapse-panel-expand-icon\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"right\\"><path d=\\"m411.776 294.784 208.192 208.192a12.8 12.8 0 0 1 0 18.048L411.776 729.216a12.8 12.8 0 0 0 0 18.112l27.2 27.136a12.8 12.8 0 0 0 18.048 0l253.44-253.44a12.8 12.8 0 0 0 0-18.048l-253.44-253.44a12.8 12.8 0 0 0-18.048 0l-27.2 27.136a12.8 12.8 0 0 0 0 18.112z\\"></path></svg></i></span>
       <!---->
       <div class=\\"ix-header-content\\">
         <div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">hello header</span>
@@ -50,7 +50,7 @@ exports[`Collapse > panel work > header work 2`] = `
 exports[`Collapse > render work 1`] = `
 "<div class=\\"ix-collapse ix-collapse-md\\">
   <div class=\\"ix-collapse-panel\\">
-    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
+    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right ix-collapse-panel-expand-icon\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
       <!---->
       <div class=\\"ix-header-content\\">
         <div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">header 0</span>
@@ -69,7 +69,7 @@ exports[`Collapse > render work 1`] = `
     </transition-stub>
   </div>
   <div class=\\"ix-collapse-panel ix-collapse-panel-expanded\\">
-    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
+    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right ix-collapse-panel-expand-icon\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
       <!---->
       <div class=\\"ix-header-content\\">
         <div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">header 1</span>
@@ -88,7 +88,7 @@ exports[`Collapse > render work 1`] = `
     </transition-stub>
   </div>
   <div class=\\"ix-collapse-panel\\">
-    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
+    <div class=\\"ix-header ix-header-md\\"><span class=\\"ix-header-prefix\\"><i class=\\"ix-icon ix-icon-right ix-collapse-panel-expand-icon\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span>
       <!---->
       <div class=\\"ix-header-content\\">
         <div class=\\"ix-header-title-wrapper\\"><span class=\\"ix-header-title\\">header 2</span>

diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
@@ -98,11 +98,6 @@ export default defineComponent({
       }
     })
 
-    const handleClick = (evt: Event) => {
-      // see https://github.com/IDuxFE/idux/issues/547
-      evt.stopPropagation()
-    }
-
     return () => {
       const { column } = props
 
@@ -111,7 +106,7 @@ export default defineComponent({
       let title: string | undefined
 
       if (type === 'selectable') {
-        children = renderSelectableChildren(props, slots, selectable, handleClick, config, mergedPagination)
+        children = renderSelectableChildren(props, slots, selectable, config, mergedPagination)
       } else if (type === 'indexable') {
         children = renderIndexableChildren(props, slots, column as TableColumnIndexable, mergedPagination)
       } else {
@@ -209,35 +204,31 @@ function renderSelectableChildren(
   props: TableBodyCellProps,
   slots: Slots,
   selectable: ComputedRef<TableColumnMergedSelectable | undefined>,
-  onClick: (evt: Event) => void,
   config: TableConfig,
   mergedPagination: ComputedRef<TablePagination | null>,
 ) {
   const { selected: checked, indeterminate, disabled, isHover, handleSelect: onChange } = props
-  const { showIndex, multiple, customCell, trigger } = selectable.value!
+  const { showIndex, multiple, customCell } = selectable.value!
+  const onClick = (evt: Event) => {
+    // see https://github.com/IDuxFE/idux/issues/547
+    evt.stopPropagation()
+    // radio 支持反选
+    if (!multiple && checked && !disabled && onChange) {
+      onChange()
+    }
+  }
 
   if (!checked && !isHover && showIndex) {
     return renderIndexableChildren(props, slots, config.columnIndexable as TableColumnIndexable, mergedPagination)
   }
 
   const customRender = isString(customCell) ? slots[customCell] : customCell
   if (multiple) {
-    // 存在trigger时将事件代理到bodyCell进行处理
-    const exitTriggerCheckboxProps = { checked, disabled, indeterminate }
-    const checkboxProps = { ...exitTriggerCheckboxProps, onChange, onClick }
-    return customRender ? (
-      customRender(trigger ? exitTriggerCheckboxProps : checkboxProps)
-    ) : (
-      <IxCheckbox {...(trigger ? exitTriggerCheckboxProps : checkboxProps)}></IxCheckbox>
-    )
+    const checkboxProps = { checked, disabled, indeterminate, onChange, onClick }
+    return customRender ? customRender(checkboxProps) : <IxCheckbox {...checkboxProps}></IxCheckbox>
   } else {
-    const exitTriggerRadioProps = { checked, disabled }
-    const radioProps = { ...exitTriggerRadioProps, onChange, onClick }
-    return customRender ? (
-      customRender(radioProps)
-    ) : (
-      <IxRadio {...(trigger ? exitTriggerRadioProps : radioProps)}></IxRadio>
-    )
+    const radioProps = { checked, disabled, onChange, onClick }
+    return customRender ? customRender(radioProps) : <IxRadio {...radioProps}></IxRadio>
   }
 }
 

diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -194,7 +194,7 @@
 
   & tr&-row-selected {
     &:hover > td {
-      background-color: @table-body-row-background-color-hover; 
+      background-color: @table-body-row-background-color-hover;
     }
     & > td {
       background: @table-body-row-background-color-selected;
@@ -356,4 +356,9 @@
       }
     }
   }
+
+  // chrome 83: virtual + fixed column
+  .cdk-virtual-scroll-content {
+    display: block;
+  }
 }
diff --git a/packages/components/tree-select/__tests__/__snapshots__/treeSelect.spec.ts.snap b/packages/components/tree-select/__tests__/__snapshots__/treeSelect.spec.ts.snap
@@ -77,7 +77,7 @@ exports[`TreeSelect > single work > searchFn work 2`] = `
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"down\\">
-          <path d=\\"m294.784 411.776 208.192 208.192a12.8 12.8 0 0 0 18.048 0l208.192-208.192a12.8 12.8 0 0 1 18.112 0l27.136 27.2a12.8 12.8 0 0 1 0 18.048l-253.44 253.44a12.8 12.8 0 0 1-18.048 0l-253.44-253.44a12.8 12.8 0 0 1 0-18.048l27.136-27.2a12.8 12.8 0 0 1 18.112 0z\\"></path>
+          <path d=\\"m294.777 395.325 208.172 208.172c4.999 5 13.103 5 18.102 0l208.172-208.172c4.999-4.999 13.103-4.999 18.102 0l27.153 27.153c4.999 4.999 4.999 13.103 0 18.102L521.051 694.007c-4.999 4.999-13.103 4.999-18.102 0L249.522 440.58c-4.999-4.999-4.999-13.103 0-18.102l27.153-27.153c4.999-4.999 13.103-4.999 18.102 0Z\\"></path>
         </svg></i></div>
   </div>
 </div>"
@@ -94,7 +94,7 @@ exports[`TreeSelect > single work > searchFn work 3`] = `
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"down\\">
-          <path d=\\"m294.784 411.776 208.192 208.192a12.8 12.8 0 0 0 18.048 0l208.192-208.192a12.8 12.8 0 0 1 18.112 0l27.136 27.2a12.8 12.8 0 0 1 0 18.048l-253.44 253.44a12.8 12.8 0 0 1-18.048 0l-253.44-253.44a12.8 12.8 0 0 1 0-18.048l27.136-27.2a12.8 12.8 0 0 1 18.112 0z\\"></path>
+          <path d=\\"m294.777 395.325 208.172 208.172c4.999 5 13.103 5 18.102 0l208.172-208.172c4.999-4.999 13.103-4.999 18.102 0l27.153 27.153c4.999 4.999 4.999 13.103 0 18.102L521.051 694.007c-4.999 4.999-13.103 4.999-18.102 0L249.522 440.58c-4.999-4.999-4.999-13.103 0-18.102l27.153-27.153c4.999-4.999 13.103-4.999 18.102 0Z\\"></path>
         </svg></i></div>
   </div>
 </div>"
@@ -125,7 +125,7 @@ exports[`TreeSelect > single work > searchable work 2`] = `
       <!---->
     </div>
     <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(180deg);\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"0 0 1024 1024\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"down\\">
-          <path d=\\"m294.784 411.776 208.192 208.192a12.8 12.8 0 0 0 18.048 0l208.192-208.192a12.8 12.8 0 0 1 18.112 0l27.136 27.2a12.8 12.8 0 0 1 0 18.048l-253.44 253.44a12.8 12.8 0 0 1-18.048 0l-253.44-253.44a12.8 12.8 0 0 1 0-18.048l27.136-27.2a12.8 12.8 0 0 1 18.112 0z\\"></path>
+          <path d=\\"m294.777 395.325 208.172 208.172c4.999 5 13.103 5 18.102 0l208.172-208.172c4.999-4.999 13.103-4.999 18.102 0l27.153 27.153c4.999 4.999 4.999 13.103 0 18.102L521.051 694.007c-4.999 4.999-13.103 4.999-18.102 0L249.522 440.58c-4.999-4.999-4.999-13.103 0-18.102l27.153-27.153c4.999-4.999 13.103-4.999 18.102 0Z\\"></path>
         </svg></i></div>
   </div>
 </div>