@gingkoo/pandora-metabase 1.0.126 → 1.0.128

package/lib/es/components/dialog/expression/index.less

@@ -66,27 +66,33 @@
       flex: 1;
     }
     .operator-icon {
-      font-size: 18px !important;
+      min-width: 28px !important;
+      height: 28px !important;
+      padding: 0 7px !important;
+      font-size: 14px !important;
     }
     .Sqb-TableName {
-      border: 2px solid transparent;
-      border-radius: 6px;
+      border: 1px solid transparent;
+      border-radius: 5px;
       color: white;
       background-color: rgb(80, 158, 227);
       transition: background 300ms linear 0s;
       box-sizing: border-box;
       // margin-bottom: 8px;
       // margin-right: 8px;
-      padding: 8px;
+      padding: 4px 7px;
       display: flex;
       -webkit-box-align: center;
       align-items: center;
       cursor: pointer;
+      min-height: 28px;
+      font-size: 13px;
+      line-height: 18px;
       &-input {
         //输入框样式，稍微小了一点
-        margin-bottom: 9px;
-        margin-right: 8px;
-        padding: 9px;
+        margin-bottom: 6px;
+        margin-right: 6px;
+        padding: 5px 7px;
       }
       &::selection {
         color: #ffffff;
@@ -103,7 +109,7 @@
         }
       }
       &.notSelected {
-        border: 2px solid rgba(80, 158, 227, 0.25);
+        border: 1px solid rgba(80, 158, 227, 0.25);
         color: rgb(80, 158, 227);
         background-color: transparent;
         &:hover {
@@ -118,10 +124,12 @@
         }
         svg.closeIcon {
           opacity: 0.6;
-          margin-left: 8px;
+          margin-left: 5px;
+          width: 12px;
+          height: 12px;
         }
         &.notSelected {
-          border: 2px solid rgba(113, 114, 173, 0.25);
+          border: 1px solid rgba(113, 114, 173, 0.25);
           color: rgb(113, 114, 173);
           background-color: transparent;
           &:hover {
@@ -136,11 +144,15 @@
           background-color: rgba(147, 161, 171, 0.8);
         }
         svg.sort-arrow {
-          margin-right: 0.5rem;
+          margin-right: 0.35rem;
+          width: 12px;
+          height: 12px;
         }
         svg.closeIcon {
           opacity: 0.6;
-          margin-left: 8px;
+          margin-left: 5px;
+          width: 12px;
+          height: 12px;
         }
       }
       &.green-name {
@@ -151,10 +163,12 @@
         }
         svg.closeIcon {
           opacity: 0.6;
-          margin-left: 8px;
+          margin-left: 5px;
+          width: 12px;
+          height: 12px;
         }
         &.notSelected {
-          border: 2px solid rgba(136, 191, 77, 0.25);
+          border: 1px solid rgba(136, 191, 77, 0.25);
           color: rgb(136, 191, 77);
           background-color: transparent;
           &:hover {
@@ -221,11 +235,12 @@
 }
 
 .operator-btn {
-  height: 38px !important;
-  padding: 8px !important;
+  height: 32px !important;
+  padding: 4px 8px !important;
   text-align: left !important;
   display: flex !important;
   align-items: center !important;
+  font-size: 13px !important;
   & > .pd-Icon {
     margin-left: auto !important;
   }

package/lib/es/components/dialog/formula-list/CaseWhenGroup.d.ts

@@ -1,19 +1,28 @@
 import React from 'react';
-export type CaseWhenBranchView = {
+export type CaseWhenClauseView = {
     key: string;
     whenContent: React.ReactNode;
     thenContent: React.ReactNode;
+    canDelete?: boolean;
     onAddAfter: (e: any) => void;
     onDelete: (e: any) => void;
 };
 type Props = {
-    caseValueContent: React.ReactNode;
-    branches: CaseWhenBranchView[];
+    caseAtomsContent: React.ReactNode;
+    whenClauses: CaseWhenClauseView[];
     elseContent?: React.ReactNode;
     onAddBranch: (e: any) => void;
     onAddElse: (e: any) => void;
     onRemoveElse: (e: any) => void;
-    onDeleteCase: (e: any) => void;
+    onZoomCase?: (e: any) => void;
+    onDeleteCase?: (e: any) => void;
+    showTools?: boolean;
+    isNested?: boolean;
+    useBranchScrollInner?: boolean;
+    caseRegionKey?: string;
+    elseRegionKey?: string;
+    activeRegionKey?: string | null;
+    onActivateRegion?: (key: string) => void;
 };
-declare const CaseWhenGroup: ({ caseValueContent, branches, elseContent, onAddBranch, onAddElse, onRemoveElse, onDeleteCase, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CaseWhenGroup: ({ caseAtomsContent, whenClauses, elseContent, onAddBranch, onAddElse, onRemoveElse, onZoomCase, onDeleteCase, showTools, isNested, useBranchScrollInner, caseRegionKey, elseRegionKey, activeRegionKey, onActivateRegion, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default CaseWhenGroup;

package/lib/es/components/dialog/formula-list/CaseWhenGroup.js

@@ -1,95 +1,269 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cx from 'classnames';
-import { FfPlus } from '@gingkoo/pandora-icons';
+import { Tooltip } from '@gingkoo/pandora';
+import { FfPlus, FullscreenOExpand } from '@gingkoo/pandora-icons';
 import { CloseIcon } from '../../icons';
+var CASE_ICON_SIZE = 10;
+var caseButtonBaseStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0 0 auto',
+  width: 20,
+  minWidth: 20,
+  height: 20,
+  margin: 0,
+  padding: 0,
+  border: '1px solid transparent',
+  borderRadius: 6,
+  cursor: 'pointer',
+  lineHeight: 0,
+  boxShadow: '0 1px 2px rgba(83, 92, 112, 0.08)'
+};
+var addButtonStyle = _objectSpread(_objectSpread({}, caseButtonBaseStyle), {}, {
+  borderColor: 'rgba(80, 158, 227, 0.28)',
+  background: 'rgba(80, 158, 227, 0.12)',
+  color: 'rgb(80, 158, 227)'
+});
+var removeButtonStyle = _objectSpread(_objectSpread({}, caseButtonBaseStyle), {}, {
+  borderColor: 'rgba(245, 63, 63, 0.2)',
+  background: 'rgba(245, 63, 63, 0.06)',
+  color: 'rgba(220, 38, 38, 0.72)'
+});
+var removeDisabledButtonStyle = _objectSpread(_objectSpread({}, removeButtonStyle), {}, {
+  cursor: 'not-allowed',
+  opacity: 0.4,
+  boxShadow: 'none'
+});
+var zoomButtonStyle = _objectSpread(_objectSpread({}, caseButtonBaseStyle), {}, {
+  border: 'none',
+  borderRadius: 999,
+  background: 'transparent',
+  color: 'rgba(83, 92, 112, 0.58)',
+  boxShadow: 'none'
+});
+var recoverButtonStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 4,
+  minHeight: 22,
+  margin: 0,
+  padding: '0 7px',
+  border: '1px dashed rgba(80, 158, 227, 0.35)',
+  borderRadius: 7,
+  background: 'rgba(80, 158, 227, 0.06)',
+  color: 'rgb(80, 158, 227)',
+  cursor: 'pointer',
+  fontSize: 11,
+  lineHeight: 1
+};
 var CaseWhenGroup = function CaseWhenGroup(_ref) {
-  var caseValueContent = _ref.caseValueContent,
-    branches = _ref.branches,
+  var caseAtomsContent = _ref.caseAtomsContent,
+    whenClauses = _ref.whenClauses,
     elseContent = _ref.elseContent,
     onAddBranch = _ref.onAddBranch,
     onAddElse = _ref.onAddElse,
     onRemoveElse = _ref.onRemoveElse,
-    onDeleteCase = _ref.onDeleteCase;
+    onZoomCase = _ref.onZoomCase,
+    onDeleteCase = _ref.onDeleteCase,
+    _ref$showTools = _ref.showTools,
+    showTools = _ref$showTools === void 0 ? true : _ref$showTools,
+    _ref$isNested = _ref.isNested,
+    isNested = _ref$isNested === void 0 ? false : _ref$isNested,
+    _ref$useBranchScrollI = _ref.useBranchScrollInner,
+    useBranchScrollInner = _ref$useBranchScrollI === void 0 ? false : _ref$useBranchScrollI,
+    _ref$caseRegionKey = _ref.caseRegionKey,
+    caseRegionKey = _ref$caseRegionKey === void 0 ? 'case' : _ref$caseRegionKey,
+    _ref$elseRegionKey = _ref.elseRegionKey,
+    elseRegionKey = _ref$elseRegionKey === void 0 ? 'else' : _ref$elseRegionKey,
+    activeRegionKey = _ref.activeRegionKey,
+    onActivateRegion = _ref.onActivateRegion;
+  var renderBranchContent = function renderBranchContent(children) {
+    if (isNested || !useBranchScrollInner) return children;
+    return _jsx("div", {
+      className: 'Sqb-CaseBranch-scrollInner',
+      children: children
+    });
+  };
+  var getRegionClassName = function getRegionClassName(regionKey) {
+    for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      classNames[_key - 1] = arguments[_key];
+    }
+    return cx.apply(void 0, ['Sqb-FormulaGroup-row'].concat(classNames, [{
+      'Sqb-CaseRegion--active': activeRegionKey === regionKey
+    }]));
+  };
+  var handleActivateRegion = function handleActivateRegion(e, regionKey) {
+    var _target$closest;
+    var target = e.target;
+    var currentRegion = target === null || target === void 0 || (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, '.Sqb-FormulaGroup-row');
+    if (currentRegion !== e.currentTarget) return;
+    onActivateRegion === null || onActivateRegion === void 0 || onActivateRegion(regionKey);
+  };
   return _jsxs("div", {
-    className: cx('Sqb-FormulaGroup', 'flow-group', 'formula-node-group'),
-    children: [_jsx("button", {
-      type: 'button',
-      className: 'Sqb-CaseRow-remove formula-node-remove',
-      onClick: onDeleteCase,
-      children: _jsx(CloseIcon, {})
+    className: cx('Sqb-FormulaGroup', 'flow-group', 'formula-node-group', 'Sqb-CaseWhenGroup', {
+      'Sqb-CaseWhenGroup--nested': isNested
+    }),
+    children: [showTools && _jsxs("div", {
+      className: 'Sqb-CaseWhenTools',
+      children: [onZoomCase && _jsx(Tooltip, {
+        title: "\u7F16\u8F91 caseWhen",
+        children: _jsx("button", {
+          type: 'button',
+          className: 'Sqb-CaseRow-zoom formula-node-tool',
+          style: zoomButtonStyle,
+          onClick: onZoomCase,
+          children: _jsx(FullscreenOExpand, {})
+        })
+      }), onDeleteCase && _jsx(Tooltip, {
+        title: "\u5220\u9664 caseWhen",
+        children: _jsx("button", {
+          type: 'button',
+          className: 'Sqb-CaseRow-remove formula-node-remove',
+          style: removeButtonStyle,
+          onClick: onDeleteCase,
+          children: _jsx(CloseIcon, {
+            width: CASE_ICON_SIZE,
+            height: CASE_ICON_SIZE
+          })
+        })
+      })]
     }), _jsxs("div", {
-      className: cx('Sqb-FormulaGroup-row', 'row-case'),
+      className: getRegionClassName(caseRegionKey, 'row-case'),
+      onMouseDown: function onMouseDown(e) {
+        return handleActivateRegion(e, caseRegionKey);
+      },
       children: [_jsx("span", {
         className: 'Sqb-CaseKeyword keyword-case',
         children: "case"
       }), _jsx("div", {
         className: 'Sqb-CaseSection Sqb-CaseSection-case',
-        children: caseValueContent
+        children: _jsx("div", {
+          className: 'Sqb-CaseSection-content',
+          children: caseAtomsContent
+        })
       })]
-    }), branches.map(function (branch) {
-      return _jsx(React.Fragment, {
-        children: _jsxs("div", {
-          className: cx('Sqb-FormulaGroup-row', 'row-when'),
-          children: [_jsxs("div", {
-            className: 'Sqb-CaseSection Sqb-CaseSection-condition',
-            children: [_jsx("span", {
-              className: 'Sqb-CaseKeyword keyword-branch',
-              children: "when"
-            }), branch.whenContent]
-          }), _jsxs("div", {
-            className: 'Sqb-CaseSection Sqb-CaseSection-result',
-            children: [_jsx("span", {
-              className: 'Sqb-CaseKeyword keyword-branch',
-              children: "then"
-            }), branch.thenContent]
-          }), _jsxs("div", {
-            className: 'Sqb-CaseRow-actions when-row-actions',
-            children: [_jsx("button", {
+    }), whenClauses.map(function (branch, branchIndex) {
+      var canDeleteBranch = branch.canDelete !== false;
+      return _jsxs("div", {
+        className: getRegionClassName(branch.key, 'row-when'),
+        onMouseDown: function onMouseDown(e) {
+          return handleActivateRegion(e, branch.key);
+        },
+        children: [_jsx("span", {
+          className: 'Sqb-CaseBranchIndex',
+          children: branchIndex + 1
+        }), _jsx("div", {
+          className: 'Sqb-CaseBranch-body',
+          children: renderBranchContent(_jsxs(_Fragment, {
+            children: [_jsxs("div", {
+              className: 'Sqb-CaseSection Sqb-CaseSection-condition',
+              children: [_jsx("span", {
+                className: 'Sqb-CaseKeyword keyword-branch keyword-when',
+                children: "when"
+              }), _jsx("div", {
+                className: 'Sqb-CaseSection-content Sqb-CaseSection-content--wrap',
+                children: branch.whenContent
+              })]
+            }), _jsxs("div", {
+              className: 'Sqb-CaseSection Sqb-CaseSection-result',
+              children: [_jsx("span", {
+                className: 'Sqb-CaseKeyword keyword-branch keyword-then',
+                children: "then"
+              }), _jsx("div", {
+                className: 'Sqb-CaseSection-content Sqb-CaseSection-content--wrap',
+                children: branch.thenContent
+              })]
+            })]
+          }))
+        }), _jsxs("div", {
+          className: 'Sqb-CaseRow-actions when-row-actions',
+          children: [_jsx(Tooltip, {
+            title: "\u65B0\u589E when",
+            children: _jsx("button", {
               type: 'button',
               className: 'Sqb-CaseRow-add',
+              style: addButtonStyle,
               onClick: branch.onAddAfter,
               children: _jsx(FfPlus, {})
-            }), _jsx("button", {
+            })
+          }), _jsx(Tooltip, {
+            title: canDeleteBranch ? '删除 when' : '至少保留一个 when / then',
+            children: _jsx("button", {
               type: 'button',
-              className: 'Sqb-CaseRow-remove',
+              className: cx('Sqb-CaseRow-remove', {
+                disabled: !canDeleteBranch
+              }),
+              disabled: !canDeleteBranch,
+              style: canDeleteBranch ? removeButtonStyle : removeDisabledButtonStyle,
               onClick: branch.onDelete,
-              children: _jsx(CloseIcon, {})
-            })]
+              children: _jsx(CloseIcon, {
+                width: CASE_ICON_SIZE,
+                height: CASE_ICON_SIZE
+              })
+            })
           })]
-        })
+        })]
       }, branch.key);
-    }), branches.length < 1 && _jsxs("button", {
-      type: 'button',
-      className: cx('Sqb-CaseRecover', 'recover-row', 'inline-after-case'),
-      onClick: onAddBranch,
-      children: [_jsx(FfPlus, {}), _jsx("span", {
-        children: "\u65B0\u589E when"
-      })]
+    }), whenClauses.length < 1 && _jsx(Tooltip, {
+      title: "\u65B0\u589E when",
+      children: _jsxs("button", {
+        type: 'button',
+        className: cx('Sqb-CaseRecover', 'recover-row', 'inline-after-case'),
+        style: recoverButtonStyle,
+        onClick: onAddBranch,
+        children: [_jsx(FfPlus, {}), _jsx("span", {
+          children: "\u65B0\u589E when"
+        })]
+      })
     }), elseContent && _jsxs("div", {
-      className: cx('Sqb-FormulaGroup-row', 'row-else'),
-      children: [_jsxs("div", {
-        className: 'Sqb-CaseSection Sqb-CaseSection-result',
-        children: [_jsx("span", {
-          className: 'Sqb-CaseKeyword keyword-branch',
-          children: "else"
-        }), elseContent]
+      className: getRegionClassName(elseRegionKey, 'row-else'),
+      onMouseDown: function onMouseDown(e) {
+        return handleActivateRegion(e, elseRegionKey);
+      },
+      children: [_jsx("span", {
+        className: 'Sqb-CaseBranchIndex Sqb-CaseBranchIndex--else',
+        "aria-hidden": 'true'
+      }), _jsx("div", {
+        className: 'Sqb-CaseBranch-body',
+        children: renderBranchContent(_jsxs("div", {
+          className: 'Sqb-CaseSection Sqb-CaseSection-result Sqb-CaseSection-else',
+          children: [_jsx("span", {
+            className: 'Sqb-CaseKeyword keyword-branch keyword-else',
+            children: "else"
+          }), _jsx("div", {
+            className: 'Sqb-CaseSection-content Sqb-CaseSection-content--wrap',
+            children: elseContent
+          })]
+        }))
       }), _jsx("div", {
         className: 'Sqb-CaseRow-actions when-row-actions',
-        children: _jsx("button", {
-          type: 'button',
-          className: 'Sqb-CaseRow-remove',
-          onClick: onRemoveElse,
-          children: _jsx(CloseIcon, {})
+        children: _jsx(Tooltip, {
+          title: "\u5220\u9664 else",
+          children: _jsx("button", {
+            type: 'button',
+            className: 'Sqb-CaseRow-remove',
+            style: removeButtonStyle,
+            onClick: onRemoveElse,
+            children: _jsx(CloseIcon, {
+              width: CASE_ICON_SIZE,
+              height: CASE_ICON_SIZE
+            })
+          })
         })
       })]
-    }), !elseContent && _jsxs("button", {
-      type: 'button',
-      className: cx('Sqb-CaseRecover', 'recover-else-row'),
-      onClick: onAddElse,
-      children: [_jsx(FfPlus, {}), _jsx("span", {
-        children: "\u65B0\u589E else"
-      })]
+    }), !elseContent && _jsx(Tooltip, {
+      title: "\u65B0\u589E else",
+      children: _jsxs("button", {
+        type: 'button',
+        className: cx('Sqb-CaseRecover', 'recover-else-row'),
+        style: recoverButtonStyle,
+        onClick: onAddElse,
+        children: [_jsx(FfPlus, {}), _jsx("span", {
+          children: "\u65B0\u589E else"
+        })]
+      })
     }), _jsx("div", {
       className: cx('Sqb-FormulaGroup-row', 'row-end'),
       children: _jsx("span", {

package/lib/es/components/dialog/formula-list/LogicGroup.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 type Props = {
     operator: 'and' | 'or';
     onToggleOperator: () => void;
-    content: React.ReactNode;
+    leftContent: React.ReactNode;
+    rightContent: React.ReactNode;
     onDelete: (e: any) => void;
 };
-declare const LogicGroup: ({ operator, onToggleOperator, content, onDelete }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const LogicGroup: ({ operator, onToggleOperator, leftContent, rightContent, onDelete, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default LogicGroup;

package/lib/es/components/dialog/formula-list/LogicGroup.js

@@ -1,14 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cx from 'classnames';
+import { Tooltip } from '@gingkoo/pandora';
 import { CloseIcon } from '../../icons';
 var LogicGroup = function LogicGroup(_ref) {
   var operator = _ref.operator,
     onToggleOperator = _ref.onToggleOperator,
-    content = _ref.content,
+    leftContent = _ref.leftContent,
+    rightContent = _ref.rightContent,
     onDelete = _ref.onDelete;
   return _jsxs("div", {
     className: cx('Sqb-FormulaGroup', 'logic-group', 'formula-node-group'),
-    children: [_jsx("button", {
+    children: [_jsx("span", {
+      className: 'Sqb-CaseKeyword',
+      children: "("
+    }), _jsx("div", {
+      className: 'Sqb-LogicGroup-content',
+      children: leftContent
+    }), _jsx("button", {
       type: 'button',
       className: cx('Sqb-TableName', 'operator-trigger', 'logic-operator', {
         'logic-and': operator === 'and',
@@ -16,20 +24,20 @@ var LogicGroup = function LogicGroup(_ref) {
       }),
       onClick: onToggleOperator,
       children: operator
-    }), _jsx("span", {
-      className: 'Sqb-CaseKeyword',
-      children: "("
     }), _jsx("div", {
       className: 'Sqb-LogicGroup-content',
-      children: content
+      children: rightContent
     }), _jsx("span", {
       className: 'Sqb-CaseKeyword',
       children: ")"
-    }), _jsx("button", {
-      type: 'button',
-      className: 'Sqb-CaseRow-remove formula-node-remove',
-      onClick: onDelete,
-      children: _jsx(CloseIcon, {})
+    }), _jsx(Tooltip, {
+      title: "\u5220\u9664 and/or",
+      children: _jsx("button", {
+        type: 'button',
+        className: 'Sqb-CaseRow-remove formula-node-remove',
+        onClick: onDelete,
+        children: _jsx(CloseIcon, {})
+      })
     })]
   });
 };

package/lib/es/components/dialog/formula-list/index.d.ts

@@ -15,6 +15,7 @@ interface PropsType {
     _type?: string;
     embedded?: boolean;
     enableCopy?: boolean;
+    enableZoom?: boolean;
     parentPopupChannel?: 'primary' | 'secondary';
 }
 declare const FormulaList: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<unknown>>;