fix: route matching without query string & toggle button wrapping (#195)

* fix: fix route is not matched when url contains query string * fix: fix mode switch button group wrapping * fix: fix toggle button text wrapping
NetEase · Aug 7, 2024 · 9394666 · 9394666
1 parent 8fe5733
commit 9394666
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/designer/src/toolbar/mode-switch.tsx b/packages/designer/src/toolbar/mode-switch.tsx
@@ -9,7 +9,7 @@ export const ModeSwitchTool = observer(() => {
   const designer = useDesigner();
 
   return (
-    <Group attached>
+    <Group attached whiteSpace="nowrap">
       <ToggleButton
         shape="ghost"
         selected={designer.activeView === 'design'}

diff --git a/packages/designer/src/toolbar/route-switch.tsx b/packages/designer/src/toolbar/route-switch.tsx
@@ -47,11 +47,14 @@ function PageSelect({ value, onSelect, onRemove, onUpdate, onCopy, options }: Pa
     setVisible(false);
   };
 
-  const current = optionMap[value];
+  const pathname = value?.split?.('?')[0];
+  const current = optionMap[pathname];
   return (
     <ToggleButton
       shape="ghost"
       minWidth={100}
+      maxWidth={200}
+      textAlign="left"
       dropdownProps={{
         open: visible,
         onOpenChange: setVisible,

diff --git a/packages/ui/src/toggle-button.tsx b/packages/ui/src/toggle-button.tsx
@@ -12,6 +12,7 @@ const buttonStyle = css`
   cursor: pointer;
   color: var(--tango-colors-gray-50);
   padding: 0 8px;
+  white-space: nowrap;
 
   .anticon-down {
     width: 10px;
@@ -201,7 +202,8 @@ export function ToggleButton(props: ToggleButtonProps) {
 
   let btn = (
     <Button css={buttonStyle} className={clazz} type="button" {...rest}>
-      <Box as="span">
+      {/* @ts-ignore textOverflow is available */}
+      <Box as="span" flex="1" overflow="hidden" textOverflow="ellipsis">
         {icon && (
           <Box as="span" className="buttonIcon" mr="s">
             {icon}