add end_links to Navbar

pydantic · Feb 10, 2024 · 53ac8b2 · 53ac8b2
1 parent 4431809
commit 53ac8b2
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/demo/shared.py b/demo/shared.py
@@ -11,7 +11,7 @@ def demo_page(*components: AnyComponent, title: str | None = None) -> list[AnyCo
         c.Navbar(
             title='FastUI Demo',
             title_event=GoToEvent(url='/'),
-            links=[
+            start_links=[
                 c.Link(
                     components=[c.Text(text='Components')],
                     on_click=GoToEvent(url='/components'),

diff --git a/src/npm-fastui-bootstrap/src/navbar.tsx b/src/npm-fastui-bootstrap/src/navbar.tsx
@@ -3,7 +3,11 @@ import { components, useClassName, models } from 'fastui'
 import BootstrapNavbar from 'react-bootstrap/Navbar'
 
 export const Navbar: FC<models.Navbar> = (props) => {
-  const links = props.links.map((link) => {
+  const startLinks = props.startLinks.map((link) => {
+    link.mode = link.mode || 'navbar'
+    return link
+  })
+  const endLinks = props.endLinks.map((link) => {
     link.mode = link.mode || 'navbar'
     return link
   })
@@ -14,7 +18,14 @@ export const Navbar: FC<models.Navbar> = (props) => {
         <BootstrapNavbar.Toggle aria-controls="navbar-collapse" />
         <BootstrapNavbar.Collapse id="navbar-collapse">
           <ul className="navbar-nav me-auto">
-            {links.map((link, i) => (
+            {startLinks.map((link, i) => (
+              <li key={i} className="nav-item">
+                <components.LinkComp {...link} />
+              </li>
+            ))}
+          </ul>
+          <ul className="navbar-nav ms-auto">
+            {endLinks.map((link, i) => (
               <li key={i} className="nav-item">
                 <components.LinkComp {...link} />
               </li>

diff --git a/src/npm-fastui/src/components/navbar.tsx b/src/npm-fastui/src/components/navbar.tsx
@@ -5,15 +5,22 @@ import { useClassName } from '../hooks/className'
 import { LinkComp, LinkRender } from './link'
 
 export const NavbarComp = (props: Navbar) => {
-  const links = props.links.map((link) => {
+  const startLinks = props.startLinks.map((link) => {
+    link.mode = link.mode || 'navbar'
+    return link
+  })
+  const endLinks = props.endLinks.map((link) => {
     link.mode = link.mode || 'navbar'
     return link
   })
   return (
     <nav className={useClassName(props)}>
       <div className={useClassName(props, { el: 'contents' })}>
         <NavbarTitle {...props} />
-        {links.map((link, i) => (
+        {startLinks.map((link, i) => (
+          <LinkComp key={i} {...link} />
+        ))}
+        {endLinks.map((link, i) => (
           <LinkComp key={i} {...link} />
         ))}
       </div>

diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
@@ -174,7 +174,8 @@ export interface LinkList {
 export interface Navbar {
   title?: string
   titleEvent?: PageEvent | GoToEvent | BackEvent | AuthEvent
-  links: Link[]
+  startLinks: Link[]
+  endLinks: Link[]
   className?: ClassName
   type: 'Navbar'
 }

diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
@@ -178,7 +178,8 @@ class LinkList(_p.BaseModel, extra='forbid'):
 class Navbar(_p.BaseModel, extra='forbid'):
     title: _t.Union[str, None] = None
     title_event: _t.Union[events.AnyEvent, None] = _p.Field(default=None, serialization_alias='titleEvent')
-    links: _t.List[Link] = _p.Field(default=[])
+    start_links: _t.List[Link] = _p.Field(default=[], serialization_alias='startLinks')
+    end_links: _t.List[Link] = _p.Field(default=[], serialization_alias='endLinks')
     class_name: _class_name.ClassNameField = None
     type: _t.Literal['Navbar'] = 'Navbar'
 
@@ -188,7 +189,7 @@ def __get_pydantic_json_schema__(
     ) -> _t.Any:
         # until https://github.com/pydantic/pydantic/issues/8413 is fixed
         json_schema = handler(core_schema)
-        json_schema.setdefault('required', []).append('links')
+        json_schema.setdefault('required', []).extend(['startLinks', 'endLinks'])
         return json_schema