@gingkoo/pandora-metabase 1.0.145 → 1.0.147

package/lib/es/components/modules/custom-column.js

@@ -21,6 +21,7 @@ import NextDom from './components/meta-icon';
 import Header from './components/header';
 import ItemWrapper from './components/item-wrapper';
 import ItemName from './components/item-name';
+import RightClickValue from '../right-click-value';
 import { getTopLayerZIndex } from '../../utils/helper-dom';
 import { useStore } from '../../hooks/use-provider';
 var CustomColumn = function CustomColumn(props) {
@@ -310,20 +311,23 @@ var CustomColumn = function CustomColumn(props) {
             children: [meta.customColumn.map(function (v, i) {
               return _jsx(ItemName, {
                 isError: isError(v.formulaList, getColumns()) || isExistsError(v.formulaList, store.existsError),
-                children: _jsxs("div", {
-                  className: cx("Sqb-TableName gray-name"),
-                  onClick: function onClick(e) {
-                    return showSubQuery(e, i);
-                  },
-                  children: [v.name, _jsx("span", {
-                    style: {
-                      fontSize: 0
-                    },
+                children: _jsx(RightClickValue, {
+                  value: v,
+                  children: _jsxs("div", {
+                    className: cx("Sqb-TableName gray-name"),
                     onClick: function onClick(e) {
-                      return handleDel(e, i);
+                      return showSubQuery(e, i);
                     },
-                    children: _jsx(CloseIcon, {})
-                  })]
+                    children: [v.name, _jsx("span", {
+                      style: {
+                        fontSize: 0
+                      },
+                      onClick: function onClick(e) {
+                        return handleDel(e, i);
+                      },
+                      children: _jsx(CloseIcon, {})
+                    })]
+                  })
                 })
               }, i);
             }), _jsx("div", {

package/lib/es/components/modules/filter.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { MetaFilter } from '../../store/types';
 interface PropsType {
     meta: MetaFilter;
     groupIndex: number;
 }
-declare const Filter: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const Filter: (props: PropsType) => React.JSX.Element;
 export default Filter;

package/lib/es/components/modules/join-data.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { MetaJoin } from '../../store/types';
 interface PropsType {
     meta: MetaJoin;
     groupIndex: number;
 }
-declare const JoinData: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const JoinData: (props: PropsType) => React.JSX.Element;
 export default JoinData;

package/lib/es/components/modules/join-data.js

@@ -22,6 +22,7 @@ import { AtomsTypeEnum, ChangeType, FormulaTypeEnum } from '../../store/types';
 import { SummarizeAlias } from '../../store/helper';
 import { getHelper, changeTableAlias, isValidSQLAlias, isError } from '../../utils';
 import ItemName from './components/item-name';
+import RightClickValue from '../right-click-value';
 import Wrapper from './components/Wrapper';
 import NextDom from './components/meta-icon';
 import Header from './components/header';
@@ -1211,17 +1212,20 @@ var JoinData = function JoinData(props) {
       var _items$2, _items$3;
       return _jsx(ItemName, {
         isError: isError(items, getColumns(type)),
-        children: _jsx("div", {
-          className: cx("Sqb-TableName", {
-            notSelected: !((_items$2 = items[0]) !== null && _items$2 !== void 0 && _items$2.fieldName)
-          }),
-          "v-position": type,
-          "v-index": i,
-          "v-index2": index,
-          onClick: selectMoreJoinColumn,
-          children: (_items$3 = items[0]) !== null && _items$3 !== void 0 && _items$3.fieldName ? items.map(function (field) {
-            return field.fieldName;
-          }).join(' || ') : __('SqlQueryBuilder.pickTable')
+        children: _jsx(RightClickValue, {
+          value: items,
+          children: _jsx("div", {
+            className: cx("Sqb-TableName", {
+              notSelected: !((_items$2 = items[0]) !== null && _items$2 !== void 0 && _items$2.fieldName)
+            }),
+            "v-position": type,
+            "v-index": i,
+            "v-index2": index,
+            onClick: selectMoreJoinColumn,
+            children: (_items$3 = items[0]) !== null && _items$3 !== void 0 && _items$3.fieldName ? items.map(function (field) {
+              return field.fieldName;
+            }).join(' || ') : __('SqlQueryBuilder.pickTable')
+          })
         })
       }, type + i);
     } else {
@@ -1268,17 +1272,20 @@ var JoinData = function JoinData(props) {
           return _jsx(ItemName, {
             isError: !!(item.id || item.val) && !getConstantLabel(store.constantList, item.id || item.val),
             message: "\u5E38\u91CF\u4E22\u5931",
-            children: _jsx("div", {
-              className: cx("Sqb-TableName", {
-                notSelected: !item.val
-              }),
-              "v-position": type,
-              "v-index": i,
-              "v-index2": index,
-              "v-val": item.id || item.val,
-              onClick: selectConstant,
-              children: getConstantLabel(store.constantList, item.id || item.val, item.val) || __('SqlQueryBuilder.pickConstant')
-            }, index)
+            children: _jsx(RightClickValue, {
+              value: item,
+              children: _jsx("div", {
+                className: cx("Sqb-TableName", {
+                  notSelected: !item.val
+                }),
+                "v-position": type,
+                "v-index": i,
+                "v-index2": index,
+                "v-val": item.id || item.val,
+                onClick: selectConstant,
+                children: getConstantLabel(store.constantList, item.id || item.val, item.val) || __('SqlQueryBuilder.pickConstant')
+              }, index)
+            })
           }, index);
         }
       });
@@ -1315,12 +1322,15 @@ var JoinData = function JoinData(props) {
             className: cx("Sqb-NotebookCell"),
             children: [_jsx(ItemName, {
               isError: leftTableIsError(),
-              children: _jsx("div", {
-                className: cx("Sqb-TableName", {
-                  notSelected: !table1Selected
-                }),
-                onClick: selectLeftTable,
-                children: getTable1Name() || __('SqlQueryBuilder.pickTable')
+              children: _jsx(RightClickValue, {
+                value: meta.table1,
+                children: _jsx("div", {
+                  className: cx("Sqb-TableName", {
+                    notSelected: !table1Selected
+                  }),
+                  onClick: selectLeftTable,
+                  children: getTable1Name() || __('SqlQueryBuilder.pickTable')
+                })
               })
             }), _jsx("div", {
               onClick: selectJoin,
@@ -1341,84 +1351,90 @@ var JoinData = function JoinData(props) {
                   cursor: 'pointer'
                 }
               })
-            }), meta.isSubquery ? _jsxs("div", {
-              className: cx("Sqb-TableName", {
-                notSelected: !subQuerySelected
-              }),
-              onClick: function onClick() {
-                showSubQuery(meta.subquery);
-              },
-              children: [subQuerySelected && _jsx(_Fragment, {
-                children: function () {
-                  var showButton = store.tableEnableAlias || tableIsError() && isDel;
-                  var icon = isDel ? _jsx(ExclamationCircleFill, {}) : store.tableEnableAlias ? 'As' : '';
-                  return showButton ? _jsx(Tooltip, {
-                    title: __(tableIsError() ? isDel ? 'metabase.verify' : 'SqlQueryBuilder.repeatAlias' : 'SqlQueryBuilder.alias'),
-                    children: _jsx(Button, {
-                      danger: tableIsError(),
-                      className: cx(':Sqb-TableName-as', {
-                        isError: tableIsError()
-                      }),
-                      shape: 'circle',
-                      style: isDel ? {
-                        fontSize: 18,
-                        backgroundColor: '#fff',
-                        width: 'auto',
-                        height: 'auto'
-                      } : {},
-                      iconOnly: true,
-                      primary: !isDel,
-                      icon: icon,
-                      size: 'small',
-                      onClick: function onClick(e) {
-                        if (store.tableEnableAlias) {
-                          var _meta$table3;
-                          e.stopPropagation();
-                          onChangeTableAlias(((_meta$table3 = meta.table2) === null || _meta$table3 === void 0 ? void 0 : _meta$table3.alias) || '');
+            }), meta.isSubquery ? _jsx(RightClickValue, {
+              value: meta,
+              children: _jsxs("div", {
+                className: cx("Sqb-TableName", {
+                  notSelected: !subQuerySelected
+                }),
+                onClick: function onClick() {
+                  showSubQuery(meta.subquery);
+                },
+                children: [subQuerySelected && _jsx(_Fragment, {
+                  children: function () {
+                    var showButton = store.tableEnableAlias || tableIsError() && isDel;
+                    var icon = isDel ? _jsx(ExclamationCircleFill, {}) : store.tableEnableAlias ? 'As' : '';
+                    return showButton ? _jsx(Tooltip, {
+                      title: __(tableIsError() ? isDel ? 'metabase.verify' : 'SqlQueryBuilder.repeatAlias' : 'SqlQueryBuilder.alias'),
+                      children: _jsx(Button, {
+                        danger: tableIsError(),
+                        className: cx(':Sqb-TableName-as', {
+                          isError: tableIsError()
+                        }),
+                        shape: 'circle',
+                        style: isDel ? {
+                          fontSize: 18,
+                          backgroundColor: '#fff',
+                          width: 'auto',
+                          height: 'auto'
+                        } : {},
+                        iconOnly: true,
+                        primary: !isDel,
+                        icon: icon,
+                        size: 'small',
+                        onClick: function onClick(e) {
+                          if (store.tableEnableAlias) {
+                            var _meta$table3;
+                            e.stopPropagation();
+                            onChangeTableAlias(((_meta$table3 = meta.table2) === null || _meta$table3 === void 0 ? void 0 : _meta$table3.alias) || '');
+                          }
                         }
-                      }
-                    })
-                  }) : null;
-                }()
-              }), subQuerySelected ? "".concat(((_meta$subquery2 = meta.subquery) === null || _meta$subquery2 === void 0 ? void 0 : _meta$subquery2[0]).table.datasourceName, ".").concat(((_meta$subquery3 = meta.subquery) === null || _meta$subquery3 === void 0 ? void 0 : _meta$subquery3[0]).table.name, " ").concat((_meta$table4 = meta.table2) !== null && _meta$table4 !== void 0 && _meta$table4.alias && store.tableEnableAlias ? "as ".concat((_meta$table5 = meta.table2) === null || _meta$table5 === void 0 ? void 0 : _meta$table5.alias) : '', " ") : __('SqlQueryBuilder.setSubQuery')]
-            }) : _jsxs("div", {
-              className: cx("Sqb-TableName", {
-                notSelected: !table2Selected
-              }),
-              onClick: selectTable,
-              children: [table2Selected && _jsx(_Fragment, {
-                children: function () {
-                  var showButton = store.tableEnableAlias || tableIsError() && isDel;
-                  var icon = isDel ? _jsx(ExclamationCircleFill, {}) : store.tableEnableAlias ? 'As' : '';
-                  return showButton ? _jsx(Tooltip, {
-                    title: __(tableIsError() ? isDel ? 'metabase.verify' : 'SqlQueryBuilder.repeatAlias' : 'SqlQueryBuilder.alias'),
-                    children: _jsx(Button, {
-                      danger: tableIsError(),
-                      className: cx(':Sqb-TableName-as', {
-                        isError: tableIsError()
-                      }),
-                      shape: 'circle',
-                      style: isDel ? {
-                        fontSize: 18,
-                        backgroundColor: '#fff',
-                        width: 'auto',
-                        height: 'auto'
-                      } : {},
-                      iconOnly: true,
-                      primary: !isDel,
-                      icon: icon,
-                      size: 'small',
-                      onClick: function onClick(e) {
-                        if (store.tableEnableAlias) {
-                          var _meta$table6;
-                          e.stopPropagation();
-                          onChangeTableAlias(((_meta$table6 = meta.table2) === null || _meta$table6 === void 0 ? void 0 : _meta$table6.alias) || '');
+                      })
+                    }) : null;
+                  }()
+                }), subQuerySelected ? "".concat(((_meta$subquery2 = meta.subquery) === null || _meta$subquery2 === void 0 ? void 0 : _meta$subquery2[0]).table.datasourceName, ".").concat(((_meta$subquery3 = meta.subquery) === null || _meta$subquery3 === void 0 ? void 0 : _meta$subquery3[0]).table.name, " ").concat((_meta$table4 = meta.table2) !== null && _meta$table4 !== void 0 && _meta$table4.alias && store.tableEnableAlias ? "as ".concat((_meta$table5 = meta.table2) === null || _meta$table5 === void 0 ? void 0 : _meta$table5.alias) : '', " ") : __('SqlQueryBuilder.setSubQuery')]
+              })
+            }) : _jsx(RightClickValue, {
+              value: meta.table2,
+              children: _jsxs("div", {
+                className: cx("Sqb-TableName", {
+                  notSelected: !table2Selected
+                }),
+                onClick: selectTable,
+                children: [table2Selected && _jsx(_Fragment, {
+                  children: function () {
+                    var showButton = store.tableEnableAlias || tableIsError() && isDel;
+                    var icon = isDel ? _jsx(ExclamationCircleFill, {}) : store.tableEnableAlias ? 'As' : '';
+                    return showButton ? _jsx(Tooltip, {
+                      title: __(tableIsError() ? isDel ? 'metabase.verify' : 'SqlQueryBuilder.repeatAlias' : 'SqlQueryBuilder.alias'),
+                      children: _jsx(Button, {
+                        danger: tableIsError(),
+                        className: cx(':Sqb-TableName-as', {
+                          isError: tableIsError()
+                        }),
+                        shape: 'circle',
+                        style: isDel ? {
+                          fontSize: 18,
+                          backgroundColor: '#fff',
+                          width: 'auto',
+                          height: 'auto'
+                        } : {},
+                        iconOnly: true,
+                        primary: !isDel,
+                        icon: icon,
+                        size: 'small',
+                        onClick: function onClick(e) {
+                          if (store.tableEnableAlias) {
+                            var _meta$table6;
+                            e.stopPropagation();
+                            onChangeTableAlias(((_meta$table6 = meta.table2) === null || _meta$table6 === void 0 ? void 0 : _meta$table6.alias) || '');
+                          }
                         }
-                      }
-                    })
-                  }) : null;
-                }()
-              }), table2Selected ? "".concat(meta.table2.datasourceName, ".").concat(meta.table2.name, " ").concat((_meta$table7 = meta.table2) !== null && _meta$table7 !== void 0 && _meta$table7.alias && store.tableEnableAlias ? "as ".concat((_meta$table8 = meta.table2) === null || _meta$table8 === void 0 ? void 0 : _meta$table8.alias) : '') : __('SqlQueryBuilder.pickTable')]
+                      })
+                    }) : null;
+                  }()
+                }), table2Selected ? "".concat(meta.table2.datasourceName, ".").concat(meta.table2.name, " ").concat((_meta$table7 = meta.table2) !== null && _meta$table7 !== void 0 && _meta$table7.alias && store.tableEnableAlias ? "as ".concat((_meta$table8 = meta.table2) === null || _meta$table8 === void 0 ? void 0 : _meta$table8.alias) : '') : __('SqlQueryBuilder.pickTable')]
+              })
             }), store.showSubquery && _jsx(Tooltip, {
               title: __('SqlQueryBuilder.switchSubQuery'),
               children: _jsx(Button, {
@@ -1529,15 +1545,18 @@ var JoinData = function JoinData(props) {
                     children: "on"
                   }), _jsx(ItemName, {
                     isError: isError(v, getTableColumns()),
-                    children: _jsx("div", {
-                      className: cx("Sqb-TableName purple-name", {
-                        notSelected: !v.quotes
-                      }),
-                      onClick: function onClick(e) {
-                        return changeExpression(e, i);
-                      },
-                      children: v.quotes || __('joinData.selectExpression')
-                    }, i)
+                    children: _jsx(RightClickValue, {
+                      value: v,
+                      children: _jsx("div", {
+                        className: cx("Sqb-TableName purple-name", {
+                          notSelected: !v.quotes
+                        }),
+                        onClick: function onClick(e) {
+                          return changeExpression(e, i);
+                        },
+                        children: v.quotes || __('joinData.selectExpression')
+                      }, i)
+                    })
                   }), _jsx(Tooltip, {
                     title: __('SqlQueryBuilder.add'),
                     children: _jsx(Dropdown, {

package/lib/es/components/modules/permission-table.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { MetaData } from '../../store/types';
 interface PropsType {
     meta: MetaData;
     groupIndex: number;
 }
-declare const PermissionTable: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const PermissionTable: (props: PropsType) => React.JSX.Element;
 export default PermissionTable;

package/lib/es/components/modules/row-limit.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 interface PropsType {
     store?: any;
     meta: any;
     groupIndex: number;
 }
-declare const RowLimit: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const RowLimit: (props: PropsType) => React.JSX.Element;
 export default RowLimit;

package/lib/es/components/modules/sort.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { MetaSort } from '../../store/types';
 interface PropsType {
     meta: MetaSort;
     groupIndex: number;
 }
-declare const Sort: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const Sort: (props: PropsType) => React.JSX.Element;
 export default Sort;

package/lib/es/components/modules/sort.js

@@ -15,6 +15,7 @@ import Header from './components/header';
 import ItemWrapper from './components/item-wrapper';
 import { useStore } from '../../hooks/use-provider';
 import ItemName from './components/item-name';
+import RightClickValue from '../right-click-value';
 var Sort = function Sort(props) {
   var meta = props.meta,
     groupIndex = props.groupIndex;
@@ -192,21 +193,24 @@ var Sort = function Sort(props) {
             children: [sort.map(function (v, i) {
               return _jsx(ItemName, {
                 isError: isError(v.expression, getColumns()),
-                children: _jsxs("div", {
-                  className: "Sqb-TableName gray-name",
-                  onClick: function onClick() {
-                    return handleSort(i);
-                  },
-                  children: [v.sort === SortEnum.asc ? _jsx(UpArrowIcon, {}) : _jsx(DownArrowIcon, {}), getName(v.expression), _jsx("span", {
-                    style: {
-                      fontSize: 0
+                children: _jsx(RightClickValue, {
+                  value: v,
+                  children: _jsxs("div", {
+                    className: "Sqb-TableName gray-name",
+                    onClick: function onClick() {
+                      return handleSort(i);
                     },
-                    onClick: function onClick(e) {
-                      return delSortColumn(e, i);
-                    },
-                    children: _jsx(CloseIcon, {})
-                  })]
-                }, i)
+                    children: [v.sort === SortEnum.asc ? _jsx(UpArrowIcon, {}) : _jsx(DownArrowIcon, {}), getName(v.expression), _jsx("span", {
+                      style: {
+                        fontSize: 0
+                      },
+                      onClick: function onClick(e) {
+                        return delSortColumn(e, i);
+                      },
+                      children: _jsx(CloseIcon, {})
+                    })]
+                  }, i)
+                })
               }, i);
             }), _jsx("div", {
               className: "Sqb-TableName gray-name",

package/lib/es/components/modules/summarize/group-by.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { MetaSummarize } from '../../../store/types';
 interface PropsType {
     meta: MetaSummarize;
     groupIndex: number;
 }
-declare const GroupBy: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const GroupBy: (props: PropsType) => React.JSX.Element;
 export default GroupBy;

package/lib/es/components/modules/summarize/group-by.js

@@ -16,6 +16,7 @@ import { Tooltip, Button, Modal, Input, Toast } from '@gingkoo/pandora';
 import { uuidv4, getAlias } from '../../../utils/helper';
 import { changeFieldAlias, isExistsError, isValidSQLAlias } from '../../../utils';
 import ItemName from '../components/item-name';
+import RightClickValue from '../../right-click-value';
 import { AddIcon, CloseIcon } from '../../icons';
 import FormulaList from '../../dialog/formula-list';
 import { useStore } from '../../../hooks/use-provider';
@@ -510,36 +511,39 @@ var GroupBy = function GroupBy(props) {
     children: [meta.by.map(function (v, i) {
       return _jsx(ItemName, {
         isError: isExistsError([getErrorCheckField(v)], store.existsError),
-        children: _jsxs("div", {
-          className: "Sqb-TableName green-name",
-          onClick: function onClick(e) {
-            return handleUpdate(e, i);
-          },
-          children: [v.quotes && _jsx(_Fragment, {
-            children: store.groupByEnableAlias && _jsx(Tooltip, {
-              title: !isValidSQLAlias(v === null || v === void 0 ? void 0 : v.fieldAlias) ? __('SqlQueryBuilder.aliasForRules') : __('SqlQueryBuilder.alias'),
-              children: _jsx(Button, {
-                className: cx(':Sqb-TableName-as :Sqb-TableName green-name', _defineProperty({}, 'isError', !isValidSQLAlias(v === null || v === void 0 ? void 0 : v.fieldAlias))),
-                shape: 'circle',
-                iconOnly: true,
-                primary: true,
-                icon: 'As',
-                size: 'small',
-                onClick: function onClick(e) {
-                  e.stopPropagation();
-                  onChangeFieldAlias((v === null || v === void 0 ? void 0 : v.fieldAlias) || '', i);
-                }
-              })
-            })
-          }), "".concat(v.quotes, " ").concat(v.fieldAlias ? "as ".concat(v.fieldAlias) : ''), _jsx("span", {
-            style: {
-              fontSize: 0
-            },
+        children: _jsx(RightClickValue, {
+          value: v,
+          children: _jsxs("div", {
+            className: "Sqb-TableName green-name",
             onClick: function onClick(e) {
-              return handleDel(e, i);
+              return handleUpdate(e, i);
             },
-            children: _jsx(CloseIcon, {})
-          })]
+            children: [v.quotes && _jsx(_Fragment, {
+              children: store.groupByEnableAlias && _jsx(Tooltip, {
+                title: !isValidSQLAlias(v === null || v === void 0 ? void 0 : v.fieldAlias) ? __('SqlQueryBuilder.aliasForRules') : __('SqlQueryBuilder.alias'),
+                children: _jsx(Button, {
+                  className: cx(':Sqb-TableName-as :Sqb-TableName green-name', _defineProperty({}, 'isError', !isValidSQLAlias(v === null || v === void 0 ? void 0 : v.fieldAlias))),
+                  shape: 'circle',
+                  iconOnly: true,
+                  primary: true,
+                  icon: 'As',
+                  size: 'small',
+                  onClick: function onClick(e) {
+                    e.stopPropagation();
+                    onChangeFieldAlias((v === null || v === void 0 ? void 0 : v.fieldAlias) || '', i);
+                  }
+                })
+              })
+            }), "".concat(v.quotes, " ").concat(v.fieldAlias ? "as ".concat(v.fieldAlias) : ''), _jsx("span", {
+              style: {
+                fontSize: 0
+              },
+              onClick: function onClick(e) {
+                return handleDel(e, i);
+              },
+              children: _jsx(CloseIcon, {})
+            })]
+          })
         })
       }, i);
     }), _jsx("div", {

package/lib/es/components/modules/summarize/index.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { MetaSummarize } from '../../../store/types';
 interface PropsType {
     store?: any;
     meta: MetaSummarize;
     groupIndex: number;
 }
-declare const Summarize: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const Summarize: (props: PropsType) => React.JSX.Element;
 export default Summarize;

package/lib/es/components/modules/summarize/select-index.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { MetaSummarize } from '../../../store/types';
 interface PropsType {
     store?: any;
     meta: MetaSummarize;
     groupIndex: number;
 }
-declare const SelectIndex: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+declare const SelectIndex: (props: PropsType) => React.JSX.Element;
 export default SelectIndex;

package/lib/es/components/modules/summarize/select-index.js

@@ -15,6 +15,7 @@ import { uuidv4 } from '../../../utils/helper';
 import { MetaSummarize_Enum, AtomsTypeEnum, ChangeType } from '../../../store/types';
 import { changeFieldAlias, isExistsError, isValidSQLAlias } from '../../../utils';
 import ItemName from '../components/item-name';
+import RightClickValue from '../../right-click-value';
 import { AddIcon, CloseIcon } from '../../icons';
 import { SelectSummarize } from '../../dialog';
 import { useStore } from '../../../hooks/use-provider';
@@ -412,36 +413,39 @@ var SelectIndex = function SelectIndex(props) {
     children: [meta.group.map(function (v, i) {
       return _jsx(ItemName, {
         isError: isExistsError([getErrorCheckField(v)], store.existsError),
-        children: _jsxs("div", {
-          className: "Sqb-TableName green-name",
-          onClick: function onClick(e) {
-            return handleUpdate(e, i);
-          },
-          children: [v.quotes && _jsx(_Fragment, {
-            children: store.groupByEnableAlias && _jsx(Tooltip, {
-              title: !isValidSQLAlias(v === null || v === void 0 ? void 0 : v.fieldAlias) ? __('SqlQueryBuilder.aliasForRules') : __('SqlQueryBuilder.alias'),
-              children: _jsx(Button, {
-                className: cx(':Sqb-TableName-as :Sqb-TableName green-name', _defineProperty({}, 'isError', !isValidSQLAlias(v === null || v === void 0 ? void 0 : v.fieldAlias))),
-                shape: 'circle',
-                iconOnly: true,
-                primary: true,
-                icon: 'As',
-                size: 'small',
-                onClick: function onClick(e) {
-                  e.stopPropagation();
-                  onChangeFieldAlias((v === null || v === void 0 ? void 0 : v.fieldAlias) || '', i);
-                }
-              })
-            })
-          }), "".concat(v.quotes, " ").concat(v.fieldAlias ? "as ".concat(v.fieldAlias) : ''), _jsx("span", {
-            style: {
-              fontSize: 0
-            },
+        children: _jsx(RightClickValue, {
+          value: v,
+          children: _jsxs("div", {
+            className: "Sqb-TableName green-name",
             onClick: function onClick(e) {
-              return handleDel(e, i);
+              return handleUpdate(e, i);
             },
-            children: _jsx(CloseIcon, {})
-          })]
+            children: [v.quotes && _jsx(_Fragment, {
+              children: store.groupByEnableAlias && _jsx(Tooltip, {
+                title: !isValidSQLAlias(v === null || v === void 0 ? void 0 : v.fieldAlias) ? __('SqlQueryBuilder.aliasForRules') : __('SqlQueryBuilder.alias'),
+                children: _jsx(Button, {
+                  className: cx(':Sqb-TableName-as :Sqb-TableName green-name', _defineProperty({}, 'isError', !isValidSQLAlias(v === null || v === void 0 ? void 0 : v.fieldAlias))),
+                  shape: 'circle',
+                  iconOnly: true,
+                  primary: true,
+                  icon: 'As',
+                  size: 'small',
+                  onClick: function onClick(e) {
+                    e.stopPropagation();
+                    onChangeFieldAlias((v === null || v === void 0 ? void 0 : v.fieldAlias) || '', i);
+                  }
+                })
+              })
+            }), "".concat(v.quotes, " ").concat(v.fieldAlias ? "as ".concat(v.fieldAlias) : ''), _jsx("span", {
+              style: {
+                fontSize: 0
+              },
+              onClick: function onClick(e) {
+                return handleDel(e, i);
+              },
+              children: _jsx(CloseIcon, {})
+            })]
+          })
         })
       }, i);
     }), _jsx("div", {