fix: 修复 table 的 column 的 id 属性可能重复导致样式错误的问题

baidu · Dec 20, 2023 · 45379eb · 45379eb
1 parent e9a0d24
commit 45379eb
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts
@@ -1159,14 +1159,24 @@ export const TableStore = iRendererStore
         });
 
         const originColumns = self.columns.concat();
+        const ids: Array<any> = [];
         columns = columns.map((item, index) => {
           const origin = item.id
             ? originColumns.find(column => column.pristine.id === item.id)
             : originColumns[index];
 
+          let id = origin?.id || guid();
+
+          // 还不知道为何会出现这个，先用这种方式避免 id 重复
+          if (ids.includes(id)) {
+            id = guid();
+          }
+
+          ids.push(id);
+
           return {
             ...item,
-            id: origin?.id || guid(),
+            id: id,
             index,
             width: origin?.width || 0,
             minWidth: origin?.minWidth || 0,

diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss
@@ -3800,7 +3800,6 @@
   --inputTag-option-hover-bg-color: var(--colors-brand-10);
   --inputTag-popover-maxHeight: 300px;
 
-
   --fieldSet-legend-height: var(--sizes-size-9);
   --fieldSet-legend-color: var(--colors-neutral-text-2);
   --fieldSet-legend-fontSize: var(--fonts-size-7);
@@ -3919,9 +3918,9 @@
   --conditionBuilder-line-width: var(--sizes-size-2);
   --conditionBuilder-line-bg-color: var(--colors-brand-9);
   --conditionBuilder-body-bg-color: var(--colors-neutral-line-10);
-  --conditionBuilder-body-paddingTop: var(--sizes-size-7);
+  --conditionBuilder-body-paddingTop: var(--sizes-size-3);
   --conditionBuilder-body-paddingRight: var(--sizes-size-7);
-  --conditionBuilder-body-paddingBottom: var(--sizes-size-7);
+  --conditionBuilder-body-paddingBottom: var(--sizes-size-3);
   --conditionBuilder-body-paddingLeft: var(--sizes-base-14);
 
   --table-border-width: var(--borders-width-2);

diff --git a/packages/amis-ui/src/components/PopOverContainer.tsx b/packages/amis-ui/src/components/PopOverContainer.tsx
@@ -13,10 +13,12 @@ export interface PopOverOverlay {
 
 export interface PopOverContainerProps {
   children: (props: {
+    disabled?: boolean;
     onClick: (e: React.MouseEvent) => void;
     isOpened: boolean;
     ref: any;
   }) => JSX.Element;
+  disabled?: boolean;
   popOverRender: (props: {onClose: () => void}) => JSX.Element;
   popOverContainer?: any;
   popOverClassName?: string;
@@ -61,9 +63,10 @@ export class PopOverContainer extends React.Component<
 
   @autobind
   handleClick() {
-    this.setState({
-      isOpened: true
-    });
+    this.props.disabled ||
+      this.setState({
+        isOpened: true
+      });
   }
 
   @autobind
@@ -152,15 +155,17 @@ export class PopOverContainer extends React.Component<
       placement,
       align,
       showConfirm,
-      onConfirm
+      onConfirm,
+      disabled
     } = this.props;
 
     return (
       <>
         {children({
           isOpened: this.state.isOpened,
           onClick: this.handleClick,
-          ref: this.targetRef
+          ref: this.targetRef,
+          disabled
         })}
         {mobileUI ? (
           <PopUp

diff --git a/packages/amis-ui/src/components/condition-builder/Item.tsx b/packages/amis-ui/src/components/condition-builder/Item.tsx
@@ -218,6 +218,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
       return (
         <PopOverContainer
           mobileUI={mobileUI}
+          disabled={operators.length < 2}
           popOverContainer={popOverContainer || (() => findDOMNode(this))}
           popOverRender={({onClose}) => (
             <GroupedSelection
@@ -230,7 +231,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
             />
           )}
         >
-          {({onClick, isOpened, ref}) => (
+          {({onClick, isOpened, ref, disabled: popOverDisabled}) => (
             <div className={cx('CBGroup-operator')}>
               <ResultBox
                 className={cx(

diff --git a/packages/amis-ui/src/components/formula/VariableList.tsx b/packages/amis-ui/src/components/formula/VariableList.tsx
@@ -112,7 +112,7 @@ function VariableList(props: VariableListProps) {
       ? props.itemRender
       : (option: Option, states: ItemRenderStates): JSX.Element => {
           return (
-            <div>
+            <div key={states.index}>
               <div className={cx(`${classPrefix}-item`, itemClassName)}>
                 {option.label &&
                   selfVariableName &&
@@ -152,6 +152,7 @@ function VariableList(props: VariableListProps) {
                           {memberOpers.map((item, i) => {
                             return (
                               <TooltipWrapper
+                                key={i}
                                 tooltip={item.description}
                                 tooltipTheme="dark"
                               >