@gingkoo/pandora-metabase 1.0.81 → 1.0.83

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

@@ -24,6 +24,7 @@ import ItemName from './components/item-name';
 import Wrapper from './components/Wrapper';
 import NextDom from './components/meta-icon';
 import Header from './components/header';
+import ItemWrapper from './components/item-wrapper';
 import SelectList from '../dialog/select-list';
 import { LeftJoinIcon, InnerJoinIcon } from '../icons';
 import { SelectTable, SelectJoin, SelectColumnMultiple, SelectColumn, Expression, SelectPermissionTable, FormulaList, getTemplateItem } from '../dialog';
@@ -1454,451 +1455,456 @@ var JoinData = function JoinData(props) {
       className: cx("Sqb-hover-parent"),
       children: [_jsx(Header, {
         meta: meta,
+        groupIndex: groupIndex,
         title: __('SqlQueryBuilder.joinData'),
         onClose: function onClose() {
           return store.delMeta(meta, groupIndex);
         }
-      }), _jsx("div", {
-        className: cx("Sqb-item--content"),
-        children: _jsxs("div", {
-          className: cx("Sqb-NotebookCell"),
-          children: [_jsx(ItemName, {
-            isError: leftTableIsError(),
-            children: _jsx("div", {
+      }), _jsx(ItemWrapper, {
+        meta: meta,
+        groupIndex: groupIndex,
+        children: _jsx("div", {
+          className: cx("Sqb-item--content"),
+          children: _jsxs("div", {
+            className: cx("Sqb-NotebookCell"),
+            children: [_jsx(ItemName, {
+              isError: leftTableIsError(),
+              children: _jsx("div", {
+                className: cx("Sqb-TableName", {
+                  notSelected: !table1Selected
+                }),
+                onClick: selectLeftTable,
+                children: getTable1Name() || __('SqlQueryBuilder.pickTable')
+              })
+            }), _jsx("div", {
+              onClick: selectJoin,
+              children: meta.joinType === JoinEnum.left ? _jsx(LeftJoinIcon, {
+                style: {
+                  marginRight: '0.5rem',
+                  cursor: 'pointer'
+                }
+              }) : meta.joinType === JoinEnum.right ? _jsx(LeftJoinIcon, {
+                style: {
+                  transform: 'rotate(-180deg)',
+                  marginRight: '0.5rem',
+                  cursor: 'pointer'
+                }
+              }) : _jsx(InnerJoinIcon, {
+                style: {
+                  marginRight: '0.5rem',
+                  cursor: 'pointer'
+                }
+              })
+            }), meta.isSubquery ? _jsxs("div", {
               className: cx("Sqb-TableName", {
-                notSelected: !table1Selected
+                notSelected: !subQuerySelected
               }),
-              onClick: selectLeftTable,
-              children: getTable1Name() || __('SqlQueryBuilder.pickTable')
-            })
-          }), _jsx("div", {
-            onClick: selectJoin,
-            children: meta.joinType === JoinEnum.left ? _jsx(LeftJoinIcon, {
-              style: {
-                marginRight: '0.5rem',
-                cursor: 'pointer'
-              }
-            }) : meta.joinType === JoinEnum.right ? _jsx(LeftJoinIcon, {
-              style: {
-                transform: 'rotate(-180deg)',
-                marginRight: '0.5rem',
-                cursor: 'pointer'
-              }
-            }) : _jsx(InnerJoinIcon, {
-              style: {
-                marginRight: '0.5rem',
-                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$table4;
-                        e.stopPropagation();
-                        onChangeTableAlias(((_meta$table4 = meta.table2) === null || _meta$table4 === void 0 ? void 0 : _meta$table4.alias) || '');
+              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$table4;
+                          e.stopPropagation();
+                          onChangeTableAlias(((_meta$table4 = meta.table2) === null || _meta$table4 === void 0 ? void 0 : _meta$table4.alias) || '');
+                        }
                       }
-                    }
-                  })
-                }) : null;
-              }()
-            })
-            // <Tooltip
-            //   title={__(
-            //     tableIsError()
-            //       ? isDel
-            //         ? 'metabase.verify'
-            //         : 'SqlQueryBuilder.repeatAlias'
-            //       : 'SqlQueryBuilder.alias',
-            //   )}
-            // >
-            //   <Button
-            //     danger={tableIsError()}
-            //     className={cx(':Sqb-TableName-as', {
-            //       isError: tableIsError(),
-            //     })}
-            //     shape='circle'
-            //     style={
-            //       isDel
-            //         ? {
-            //             fontSize: 18,
-            //             backgroundColor: '#fff',
-            //             width: 'auto',
-            //             height: 'auto',
-            //           }
-            //         : {}
-            //     }
-            //     iconOnly
-            //     primary={!isDel}
-            //     icon={isDel ? <ExclamationCircleFill /> : 'As'}
-            //     size='small'
-            //     onClick={(e) => {
-            //       e.stopPropagation();
-            //       onChangeTableAlias(meta.table2?.alias || '');
-            //     }}
-            //   ></Button>
-            // </Tooltip>
-            , 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$table5 = meta.table2) !== null && _meta$table5 !== void 0 && _meta$table5.alias && store.tableEnableAlias ? "as ".concat((_meta$table6 = meta.table2) === null || _meta$table6 === void 0 ? void 0 : _meta$table6.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$table7;
-                        e.stopPropagation();
-                        onChangeTableAlias(((_meta$table7 = meta.table2) === null || _meta$table7 === void 0 ? void 0 : _meta$table7.alias) || '');
+                    })
+                  }) : null;
+                }()
+              })
+              // <Tooltip
+              //   title={__(
+              //     tableIsError()
+              //       ? isDel
+              //         ? 'metabase.verify'
+              //         : 'SqlQueryBuilder.repeatAlias'
+              //       : 'SqlQueryBuilder.alias',
+              //   )}
+              // >
+              //   <Button
+              //     danger={tableIsError()}
+              //     className={cx(':Sqb-TableName-as', {
+              //       isError: tableIsError(),
+              //     })}
+              //     shape='circle'
+              //     style={
+              //       isDel
+              //         ? {
+              //             fontSize: 18,
+              //             backgroundColor: '#fff',
+              //             width: 'auto',
+              //             height: 'auto',
+              //           }
+              //         : {}
+              //     }
+              //     iconOnly
+              //     primary={!isDel}
+              //     icon={isDel ? <ExclamationCircleFill /> : 'As'}
+              //     size='small'
+              //     onClick={(e) => {
+              //       e.stopPropagation();
+              //       onChangeTableAlias(meta.table2?.alias || '');
+              //     }}
+              //   ></Button>
+              // </Tooltip>
+              , 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$table5 = meta.table2) !== null && _meta$table5 !== void 0 && _meta$table5.alias && store.tableEnableAlias ? "as ".concat((_meta$table6 = meta.table2) === null || _meta$table6 === void 0 ? void 0 : _meta$table6.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$table7;
+                          e.stopPropagation();
+                          onChangeTableAlias(((_meta$table7 = meta.table2) === null || _meta$table7 === void 0 ? void 0 : _meta$table7.alias) || '');
+                        }
                       }
-                    }
-                  })
-                }) : null;
-              }()
-            })
-            // <Tooltip
-            //   title={__(
-            //     tableIsError()
-            //       ? isDel
-            //         ? 'metabase.verify'
-            //         : 'SqlQueryBuilder.repeatAlias'
-            //       : 'SqlQueryBuilder.alias',
-            //   )}
-            // >
-            //   <Button
-            //     danger={tableIsError()}
-            //     className={cx(':Sqb-TableName-as', {
-            //       isError: tableIsError(),
-            //     })}
-            //     shape='circle'
-            //     style={
-            //       isDel
-            //         ? {
-            //             fontSize: 18,
-            //             backgroundColor: '#fff',
-            //             width: 'auto',
-            //             height: 'auto',
-            //           }
-            //         : {}
-            //     }
-            //     iconOnly
-            //     primary={!isDel}
-            //     icon={isDel ? <ExclamationCircleFill /> : 'As'}
-            //     size='small'
-            //     onClick={(e) => {
-            //       e.stopPropagation();
-            //       onChangeTableAlias(meta.table2?.alias || '');
-            //     }}
-            //   ></Button>
-            // </Tooltip>
-            , table2Selected ? "".concat(meta.table2.datasourceName, ".").concat(meta.table2.name, " ").concat((_meta$table8 = meta.table2) !== null && _meta$table8 !== void 0 && _meta$table8.alias && store.tableEnableAlias ? "as ".concat((_meta$table9 = meta.table2) === null || _meta$table9 === void 0 ? void 0 : _meta$table9.alias) : '') : __('SqlQueryBuilder.pickTable')]
-          }), store.showSubquery && _jsx(Tooltip, {
-            title: __('SqlQueryBuilder.switchSubQuery'),
-            children: _jsx(Button, {
-              disabled: meta.readonly,
-              primary: meta.isSubquery,
-              ghost: true,
-              className: cx('mr-2 operator-icon', _defineProperty({}, 'subquery-icon', !meta.isSubquery)),
-              icon: _jsx(RelatedWork, {}),
-              onClick: switchSubQuery
-            })
-          }), ((_meta$table0 = meta.table2) === null || _meta$table0 === void 0 ? void 0 : _meta$table0.name) && ((_meta$table1 = meta.table1) === null || _meta$table1 === void 0 ? void 0 : _meta$table1.name) && ((_meta$expressions = meta.expressions) === null || _meta$expressions === void 0 ? void 0 : _meta$expressions.map(function (v, i) {
-            if (v.type === AtomsTypeEnum.JOIN_DEFAULT) {
-              return _jsxs("div", {
-                className: cx("Sqb-where block"),
-                children: [i == 0 && _jsx("span", {
-                  className: 'ml-2 mr-4 text-gray-500',
-                  children: "on"
-                }), renderItem(v.lhs, ExpressionsEnum.LEFT, i), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.switch'),
-                  children: _jsx(Button, {
-                    disabled: meta.readonly,
-                    primary: true,
-                    ghost: true,
-                    className: 'mr-2 operator-icon',
-                    icon: _jsx(Repeat, {}),
-                    onClick: function onClick(e) {
-                      onChangeType(e, {
-                        position: ExpressionsEnum.LEFT,
-                        index: i
-                      });
-                    }
-                  })
-                }), _jsx("span", {
-                  className: 'mr-2 text-gray-500',
-                  children: "="
-                }), renderItem(v.rhs, ExpressionsEnum.RIGHT, i), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.switch'),
-                  children: _jsx(Button, {
-                    disabled: meta.readonly,
-                    primary: true,
-                    ghost: true,
-                    className: 'mr-2 operator-icon',
-                    icon: _jsx(Repeat, {}),
-                    onClick: function onClick(e) {
-                      onChangeType(e, {
-                        position: ExpressionsEnum.RIGHT,
-                        index: i
-                      });
-                    }
-                  })
-                }), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.add'),
-                  children: _jsx(Dropdown, {
-                    trigger: ['click'],
-                    onChange: function onChange(key) {
-                      addExpression(key, i);
-                    },
-                    droplist: menuTypes,
+                    })
+                  }) : null;
+                }()
+              })
+              // <Tooltip
+              //   title={__(
+              //     tableIsError()
+              //       ? isDel
+              //         ? 'metabase.verify'
+              //         : 'SqlQueryBuilder.repeatAlias'
+              //       : 'SqlQueryBuilder.alias',
+              //   )}
+              // >
+              //   <Button
+              //     danger={tableIsError()}
+              //     className={cx(':Sqb-TableName-as', {
+              //       isError: tableIsError(),
+              //     })}
+              //     shape='circle'
+              //     style={
+              //       isDel
+              //         ? {
+              //             fontSize: 18,
+              //             backgroundColor: '#fff',
+              //             width: 'auto',
+              //             height: 'auto',
+              //           }
+              //         : {}
+              //     }
+              //     iconOnly
+              //     primary={!isDel}
+              //     icon={isDel ? <ExclamationCircleFill /> : 'As'}
+              //     size='small'
+              //     onClick={(e) => {
+              //       e.stopPropagation();
+              //       onChangeTableAlias(meta.table2?.alias || '');
+              //     }}
+              //   ></Button>
+              // </Tooltip>
+              , table2Selected ? "".concat(meta.table2.datasourceName, ".").concat(meta.table2.name, " ").concat((_meta$table8 = meta.table2) !== null && _meta$table8 !== void 0 && _meta$table8.alias && store.tableEnableAlias ? "as ".concat((_meta$table9 = meta.table2) === null || _meta$table9 === void 0 ? void 0 : _meta$table9.alias) : '') : __('SqlQueryBuilder.pickTable')]
+            }), store.showSubquery && _jsx(Tooltip, {
+              title: __('SqlQueryBuilder.switchSubQuery'),
+              children: _jsx(Button, {
+                disabled: meta.readonly,
+                primary: meta.isSubquery,
+                ghost: true,
+                className: cx('mr-2 operator-icon', _defineProperty({}, 'subquery-icon', !meta.isSubquery)),
+                icon: _jsx(RelatedWork, {}),
+                onClick: switchSubQuery
+              })
+            }), ((_meta$table0 = meta.table2) === null || _meta$table0 === void 0 ? void 0 : _meta$table0.name) && ((_meta$table1 = meta.table1) === null || _meta$table1 === void 0 ? void 0 : _meta$table1.name) && ((_meta$expressions = meta.expressions) === null || _meta$expressions === void 0 ? void 0 : _meta$expressions.map(function (v, i) {
+              if (v.type === AtomsTypeEnum.JOIN_DEFAULT) {
+                return _jsxs("div", {
+                  className: cx("Sqb-where block"),
+                  children: [i == 0 && _jsx("span", {
+                    className: 'ml-2 mr-4 text-gray-500',
+                    children: "on"
+                  }), renderItem(v.lhs, ExpressionsEnum.LEFT, i), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.switch'),
                     children: _jsx(Button, {
                       disabled: meta.readonly,
                       primary: true,
                       ghost: true,
                       className: 'mr-2 operator-icon',
-                      icon: _jsx(FfPlus, {})
+                      icon: _jsx(Repeat, {}),
+                      onClick: function onClick(e) {
+                        onChangeType(e, {
+                          position: ExpressionsEnum.LEFT,
+                          index: i
+                        });
+                      }
                     })
-                  })
-                }), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.del'),
-                  children: _jsx(Button, {
-                    disabled: meta.readonly,
-                    danger: true,
-                    className: 'mr-2 operator-icon',
-                    icon: _jsx(FfLine, {}),
-                    onClick: function onClick() {
-                      var index = findIndex(store.metaList[groupIndex].list, meta);
-                      var newMeta = store.metaList[groupIndex].list.slice();
-                      newMeta[index].expressions.splice(i, 1);
-                      store.setMeta(newMeta, groupIndex);
-                    }
-                  })
-                })]
-              }, i);
-            }
-            if (v.type === AtomsTypeEnum.OPERATOR) {
-              return _jsxs("div", {
-                className: cx("Sqb-where block"),
-                children: [i == 0 && _jsx("span", {
-                  className: 'ml-2 mr-4 text-gray-500',
-                  children: "on"
-                }), _jsx(Dropdown, {
-                  trigger: ['click'],
-                  onChange: function onChange(key) {
-                    changeOperator(key, i);
-                  },
-                  droplist: menuOperator,
-                  children: _jsx(Button, {
-                    className: 'ml-2 mr-4 text-gray-500',
-                    type: 'link',
-                    children: v.val
-                  })
-                }), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.add'),
-                  children: _jsx(Dropdown, {
-                    trigger: ['click'],
-                    onChange: function onChange(key) {
-                      addExpression(key, i);
-                    },
-                    droplist: menuTypes,
+                  }), _jsx("span", {
+                    className: 'mr-2 text-gray-500',
+                    children: "="
+                  }), renderItem(v.rhs, ExpressionsEnum.RIGHT, i), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.switch'),
                     children: _jsx(Button, {
                       disabled: meta.readonly,
                       primary: true,
                       ghost: true,
                       className: 'mr-2 operator-icon',
-                      icon: _jsx(FfPlus, {})
+                      icon: _jsx(Repeat, {}),
+                      onClick: function onClick(e) {
+                        onChangeType(e, {
+                          position: ExpressionsEnum.RIGHT,
+                          index: i
+                        });
+                      }
                     })
-                  })
-                }), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.del'),
-                  children: _jsx(Button, {
-                    disabled: meta.readonly,
-                    danger: true,
-                    className: 'mr-2 operator-icon',
-                    icon: _jsx(FfLine, {}),
-                    onClick: function onClick() {
-                      var index = findIndex(store.metaList[groupIndex].list, meta);
-                      var newMeta = store.metaList[groupIndex].list.slice();
-                      newMeta[index].expressions.splice(i, 1);
-                      store.setMeta(newMeta, groupIndex);
-                    }
-                  })
-                })]
-              }, i);
-            }
-            if (v.type === AtomsTypeEnum.EXPRESSION) {
-              return _jsxs("div", {
-                className: cx("Sqb-where block"),
-                children: [i == 0 && _jsx("span", {
-                  className: 'ml-2 mr-4 text-gray-500',
-                  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)
-                }), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.add'),
-                  children: _jsx(Dropdown, {
-                    trigger: ['click'],
-                    onChange: function onChange(key) {
-                      addExpression(key, i);
-                    },
-                    droplist: menuTypes,
+                  }), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.add'),
+                    children: _jsx(Dropdown, {
+                      trigger: ['click'],
+                      onChange: function onChange(key) {
+                        addExpression(key, i);
+                      },
+                      droplist: menuTypes,
+                      children: _jsx(Button, {
+                        disabled: meta.readonly,
+                        primary: true,
+                        ghost: true,
+                        className: 'mr-2 operator-icon',
+                        icon: _jsx(FfPlus, {})
+                      })
+                    })
+                  }), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.del'),
                     children: _jsx(Button, {
                       disabled: meta.readonly,
-                      primary: true,
-                      ghost: true,
+                      danger: true,
                       className: 'mr-2 operator-icon',
-                      icon: _jsx(FfPlus, {})
+                      icon: _jsx(FfLine, {}),
+                      onClick: function onClick() {
+                        var index = findIndex(store.metaList[groupIndex].list, meta);
+                        var newMeta = store.metaList[groupIndex].list.slice();
+                        newMeta[index].expressions.splice(i, 1);
+                        store.setMeta(newMeta, groupIndex);
+                      }
                     })
-                  })
-                }), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.del'),
-                  children: _jsx(Button, {
-                    disabled: meta.readonly,
-                    danger: true,
-                    className: 'mr-2 operator-icon',
-                    icon: _jsx(FfLine, {}),
-                    onClick: function onClick() {
-                      var index = findIndex(store.metaList[groupIndex].list, meta);
-                      var newMeta = store.metaList[groupIndex].list.slice();
-                      newMeta[index].expressions.splice(i, 1);
-                      store.setMeta(newMeta, groupIndex);
-                    }
-                  })
-                })]
-              }, i);
-            }
-            if (v.type === AtomsTypeEnum.COLLECTION) {
-              return _jsxs("div", {
-                className: cx(" Sqb-collection-box"),
-                children: [i == 0 && _jsx("span", {
-                  className: 'ml-2 mr-4 text-gray-500',
-                  children: "on"
-                }), _jsx(FormulaList, {
-                  _type: FormulaTypeEnum.JOIN_DATA,
-                  // showPreview={false}
-                  // check={formulaList?.[fun.name]?.args?.[i]?.check || ''}
-                  value: v.list,
-                  data: getCollectionTableColumns(),
-                  // ref={ref}
-                  onChange: function onChange(data, _quotes) {
-                    var newMeta = store.metaList[groupIndex].list.slice();
-                    newMeta[index].expressions[i].list = data;
-                    newMeta[index].expressions[i].quotes = _quotes;
-                    store.setMeta(newMeta, groupIndex, {
-                      obj: newMeta[index].expressions,
-                      type: ChangeType.expressions
-                    });
-                  }
-                }), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.add'),
-                  children: _jsx(Dropdown, {
+                  })]
+                }, i);
+              }
+              if (v.type === AtomsTypeEnum.OPERATOR) {
+                return _jsxs("div", {
+                  className: cx("Sqb-where block"),
+                  children: [i == 0 && _jsx("span", {
+                    className: 'ml-2 mr-4 text-gray-500',
+                    children: "on"
+                  }), _jsx(Dropdown, {
                     trigger: ['click'],
                     onChange: function onChange(key) {
-                      addExpression(key, i);
+                      changeOperator(key, i);
                     },
-                    droplist: menuTypes,
+                    droplist: menuOperator,
+                    children: _jsx(Button, {
+                      className: 'ml-2 mr-4 text-gray-500',
+                      type: 'link',
+                      children: v.val
+                    })
+                  }), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.add'),
+                    children: _jsx(Dropdown, {
+                      trigger: ['click'],
+                      onChange: function onChange(key) {
+                        addExpression(key, i);
+                      },
+                      droplist: menuTypes,
+                      children: _jsx(Button, {
+                        disabled: meta.readonly,
+                        primary: true,
+                        ghost: true,
+                        className: 'mr-2 operator-icon',
+                        icon: _jsx(FfPlus, {})
+                      })
+                    })
+                  }), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.del'),
                     children: _jsx(Button, {
                       disabled: meta.readonly,
-                      primary: true,
-                      ghost: true,
+                      danger: true,
                       className: 'mr-2 operator-icon',
-                      icon: _jsx(FfPlus, {})
+                      icon: _jsx(FfLine, {}),
+                      onClick: function onClick() {
+                        var index = findIndex(store.metaList[groupIndex].list, meta);
+                        var newMeta = store.metaList[groupIndex].list.slice();
+                        newMeta[index].expressions.splice(i, 1);
+                        store.setMeta(newMeta, groupIndex);
+                      }
                     })
-                  })
-                }), _jsx(Tooltip, {
-                  title: __('SqlQueryBuilder.del'),
-                  children: _jsx(Button, {
-                    disabled: meta.readonly,
-                    danger: true,
-                    className: 'mr-2 operator-icon',
-                    icon: _jsx(FfLine, {}),
-                    onClick: function onClick() {
-                      var index = findIndex(store.metaList[groupIndex].list, meta);
+                  })]
+                }, i);
+              }
+              if (v.type === AtomsTypeEnum.EXPRESSION) {
+                return _jsxs("div", {
+                  className: cx("Sqb-where block"),
+                  children: [i == 0 && _jsx("span", {
+                    className: 'ml-2 mr-4 text-gray-500',
+                    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)
+                  }), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.add'),
+                    children: _jsx(Dropdown, {
+                      trigger: ['click'],
+                      onChange: function onChange(key) {
+                        addExpression(key, i);
+                      },
+                      droplist: menuTypes,
+                      children: _jsx(Button, {
+                        disabled: meta.readonly,
+                        primary: true,
+                        ghost: true,
+                        className: 'mr-2 operator-icon',
+                        icon: _jsx(FfPlus, {})
+                      })
+                    })
+                  }), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.del'),
+                    children: _jsx(Button, {
+                      disabled: meta.readonly,
+                      danger: true,
+                      className: 'mr-2 operator-icon',
+                      icon: _jsx(FfLine, {}),
+                      onClick: function onClick() {
+                        var index = findIndex(store.metaList[groupIndex].list, meta);
+                        var newMeta = store.metaList[groupIndex].list.slice();
+                        newMeta[index].expressions.splice(i, 1);
+                        store.setMeta(newMeta, groupIndex);
+                      }
+                    })
+                  })]
+                }, i);
+              }
+              if (v.type === AtomsTypeEnum.COLLECTION) {
+                return _jsxs("div", {
+                  className: cx(" Sqb-collection-box"),
+                  children: [i == 0 && _jsx("span", {
+                    className: 'ml-2 mr-4 text-gray-500',
+                    children: "on"
+                  }), _jsx(FormulaList, {
+                    _type: FormulaTypeEnum.JOIN_DATA,
+                    // showPreview={false}
+                    // check={formulaList?.[fun.name]?.args?.[i]?.check || ''}
+                    value: v.list,
+                    data: getCollectionTableColumns(),
+                    // ref={ref}
+                    onChange: function onChange(data, _quotes) {
                       var newMeta = store.metaList[groupIndex].list.slice();
-                      newMeta[index].expressions.splice(i, 1);
-                      store.setMeta(newMeta, groupIndex);
+                      newMeta[index].expressions[i].list = data;
+                      newMeta[index].expressions[i].quotes = _quotes;
+                      store.setMeta(newMeta, groupIndex, {
+                        obj: newMeta[index].expressions,
+                        type: ChangeType.expressions
+                      });
                     }
-                  })
-                })]
-              }, i);
-            }
-          })), ((_meta$table10 = meta.table2) === null || _meta$table10 === void 0 ? void 0 : _meta$table10.name) && ((_meta$table11 = meta.table1) === null || _meta$table11 === void 0 ? void 0 : _meta$table11.name) && (((_meta$expressions2 = meta.expressions) === null || _meta$expressions2 === void 0 ? void 0 : _meta$expressions2.length) || 0) < 1 && _jsx(Tooltip, {
-            title: __('SqlQueryBuilder.add'),
-            children: _jsx(Dropdown, {
-              trigger: ['click'],
-              onChange: function onChange(key) {
-                addExpression(key);
-              },
-              droplist: menuTypes,
-              children: _jsx(Button, {
-                disabled: meta.readonly,
-                primary: true,
-                ghost: true,
-                className: 'mr-2 operator-icon',
-                icon: _jsx(FfPlus, {})
+                  }), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.add'),
+                    children: _jsx(Dropdown, {
+                      trigger: ['click'],
+                      onChange: function onChange(key) {
+                        addExpression(key, i);
+                      },
+                      droplist: menuTypes,
+                      children: _jsx(Button, {
+                        disabled: meta.readonly,
+                        primary: true,
+                        ghost: true,
+                        className: 'mr-2 operator-icon',
+                        icon: _jsx(FfPlus, {})
+                      })
+                    })
+                  }), _jsx(Tooltip, {
+                    title: __('SqlQueryBuilder.del'),
+                    children: _jsx(Button, {
+                      disabled: meta.readonly,
+                      danger: true,
+                      className: 'mr-2 operator-icon',
+                      icon: _jsx(FfLine, {}),
+                      onClick: function onClick() {
+                        var index = findIndex(store.metaList[groupIndex].list, meta);
+                        var newMeta = store.metaList[groupIndex].list.slice();
+                        newMeta[index].expressions.splice(i, 1);
+                        store.setMeta(newMeta, groupIndex);
+                      }
+                    })
+                  })]
+                }, i);
+              }
+            })), ((_meta$table10 = meta.table2) === null || _meta$table10 === void 0 ? void 0 : _meta$table10.name) && ((_meta$table11 = meta.table1) === null || _meta$table11 === void 0 ? void 0 : _meta$table11.name) && (((_meta$expressions2 = meta.expressions) === null || _meta$expressions2 === void 0 ? void 0 : _meta$expressions2.length) || 0) < 1 && _jsx(Tooltip, {
+              title: __('SqlQueryBuilder.add'),
+              children: _jsx(Dropdown, {
+                trigger: ['click'],
+                onChange: function onChange(key) {
+                  addExpression(key);
+                },
+                droplist: menuTypes,
+                children: _jsx(Button, {
+                  disabled: meta.readonly,
+                  primary: true,
+                  ghost: true,
+                  className: 'mr-2 operator-icon',
+                  icon: _jsx(FfPlus, {})
+                })
               })
-            })
-          }), columnsSelected && (((_store$showMainColumn = store.showMainColumn[groupIndex]) === null || _store$showMainColumn === void 0 ? void 0 : _store$showMainColumn.showColumn) || ((_store$showMainColumn2 = store.showMainColumn[groupIndex]) === null || _store$showMainColumn2 === void 0 ? void 0 : _store$showMainColumn2.index) < index) && !store.isExit && store.showFields && _jsx("div", {
-            className: "Sqb-TableColumns",
-            onClick: selectColumns,
-            children: __('SqlQueryBuilder.columns')
-          })]
+            }), columnsSelected && (((_store$showMainColumn = store.showMainColumn[groupIndex]) === null || _store$showMainColumn === void 0 ? void 0 : _store$showMainColumn.showColumn) || ((_store$showMainColumn2 = store.showMainColumn[groupIndex]) === null || _store$showMainColumn2 === void 0 ? void 0 : _store$showMainColumn2.index) < index) && (!store.isExit || store.isSubquery) && store.showFields && _jsx("div", {
+              className: "Sqb-TableColumns",
+              onClick: selectColumns,
+              children: __('SqlQueryBuilder.columns')
+            })]
+          })
         })
       }), _jsx(NextDom, {
         meta: meta,