@antscorp/antsomi-ui 1.3.5-beta.314 → 1.3.5-beta.316

package/es/components/molecules/EditorTab/EditorTab.d.ts

@@ -3,14 +3,9 @@ interface EditorTabItem {
     showIcon?: boolean;
     showDropdown?: boolean;
     closeable?: boolean;
-    formatSelectedText: string;
-    formattedQuery: string;
     id: string;
     name: string;
-    query: string;
-    type: string;
-    selectedTextOut: string;
-    queryResult: any;
+    type: 'query' | 'table-detail';
     cursorSql?: string;
     cursorSqlOut?: string;
     refreshAndFocusId?: string;

package/es/components/molecules/EditorTab/EditorTab.js

@@ -9,12 +9,6 @@ import { EditorTabStyled } from './styled';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/components/EditorTab/index.jsx';
-const constants = {
-    TAB_TYPE: {
-        QUERY: 'query',
-        TABLE_DETAIL: 'table-detail',
-    },
-};
 export const EditorTab = props => {
     var _a;
     const { listTab = [], activeId = '', showArrow, showDropdown, disabledScroll, onCloseTab, onActiveTab, handleAddTab, onConfigure, onSaveName, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, } = props;
@@ -23,15 +17,13 @@ export const EditorTab = props => {
     const [isEditable, setIsEditable] = useState();
     // Ref
     const leftBlockRef = useRef(null);
-    const activeTabIdx = useMemo(() => {
-        return arrTabs.findIndex(tab => tab.id === activeId);
-    }, [activeId]);
+    const activeTabIdx = useMemo(() => arrTabs.findIndex(tab => tab.id === activeId), [activeId, arrTabs]);
     useEffect(() => {
         if (listTab.length - arrTabs.length === 1) {
             setActiveTabId(listTab[listTab.length - 1].id);
         }
         setArrTabs(listTab);
-    }, [listTab]);
+    }, [listTab, arrTabs.length]);
     useEffect(() => {
         onActiveTab(activeTabId);
         setTimeout(() => {
@@ -42,12 +34,12 @@ export const EditorTab = props => {
                 }
             }
         }, 500);
-    }, [activeTabId]);
+    }, [activeTabId, disabledScroll, onActiveTab]);
     useEffect(() => {
         if (activeId && activeTabId !== activeId) {
             setActiveTabId(activeId);
         }
-    }, [activeId]);
+    }, [activeId, activeTabId]);
     const handleAddNew = () => {
         handleAddTab();
     };
@@ -105,6 +97,8 @@ export const EditorTab = props => {
                     }
                     setActiveTabId(arrTabs[idx + 1].id);
                     break;
+                default:
+                    break;
             }
         }
     };
@@ -121,7 +115,7 @@ export const EditorTab = props => {
                         active: tab.id === activeTabId,
                     }) },
                     showIcon &&
-                        (tab.type === constants.TAB_TYPE.QUERY ? (React.createElement(Icon, { type: "icon-ants-material-outline-manage-search", overlayStyle: { fontSize: 21 } })) : (React.createElement(Icon, { type: "icon-ants-table-vertical", overlayStyle: { fontSize: 21 } }))),
+                        (tab.type === 'query' ? (React.createElement(Icon, { type: "icon-ants-material-outline-manage-search", overlayStyle: { fontSize: 21 } })) : (React.createElement(Icon, { type: "icon-ants-table-vertical", overlayStyle: { fontSize: 21 } }))),
                     isEditable === tab.id ? (React.createElement(ContentEditable, { value: tab.name, onSave: newValue => {
                             setIsEditable(undefined);
                             onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(tab.id, newValue);
@@ -134,7 +128,6 @@ export const EditorTab = props => {
                             onClick: ({ key, domEvent }) => {
                                 switch (key) {
                                     case 'configure':
-                                        console.log('click configure', domEvent);
                                         setIsEditable(tab.id);
                                         onConfigure === null || onConfigure === void 0 ? void 0 : onConfigure(tab.id);
                                         break;
@@ -145,7 +138,7 @@ export const EditorTab = props => {
                                         break;
                                 }
                             },
-                        }, placement: "bottomRight", trigger: ['click'] },
+                        }, placement: "bottomRight", trigger: ['click'], destroyPopupOnHide: true },
                         React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-angle-left", overlayStyle: { fontSize: 12 } }), style: { transform: 'rotate(-90deg)' }, size: "small" }))) : closeable ? (React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-remove-slim", onClick: e => handleCloseTab(e, tab, idx), overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
             })
             : null),

package/es/components/molecules/EditorTab/styled.js

@@ -54,8 +54,15 @@ export const EditorTabStyled = styled.div `
       max-width: 200px;
       background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
 
+      & button {
+        display: none !important;
+      }
+
       &:hover {
         background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue};
+        & button {
+          display: flex !important;
+        }
       }
 
       white-space: nowrap;
@@ -87,6 +94,9 @@ export const EditorTabStyled = styled.div `
           transform: scaleX(1);
         }
         background-color: #fff;
+        & button {
+          display: flex !important;
+        }
       }
     }
 

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -19,7 +19,7 @@ export const BannerWrapper = styled.div `
   #banner-mobile {
     ${props => {
     const height = props.$height || 700;
-    const scale = (height - 10) / 722.41;
+    const scale = (height - 10) / 764.2;
     return css `
         transform: scale(${scale});
       `;

package/es/constants/theme.js

@@ -177,9 +177,9 @@ THEME.components = {
         titleFontSizeSM: 14,
         horizontalMargin: '0px',
         colorBorderSecondary: '#E5E5E5',
-        lineHeight: 1.17,
-        lineHeightLG: 1.17,
-        lineHeightSM: 1.17,
+        lineHeight: 1.143,
+        lineHeightLG: 1.143,
+        lineHeightSM: 1.143,
         itemHoverColor: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
     },
     Collapse: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.314",
+  "version": "1.3.5-beta.316",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",