Add toast position option

pydantic · Dec 20, 2023 · ac40c31 · ac40c31
1 parent feb74b1
commit ac40c31
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 deletions.
diff --git a/demo/components_list.py b/demo/components_list.py
@@ -220,8 +220,9 @@ class Delivery(BaseModel):
                 c.Button(text='Show Toast', on_click=PageEvent(name='show-toast')),
                 c.Toast(
                     title='Toast',
-                    body=[c.Paragraph(text='This is some static content that was set when the modal was defined.')],
+                    body=[c.Paragraph(text='This is a toast.')],
                     open_trigger=PageEvent(name='show-toast'),
+                    position='bottom-end',
                 ),
             ],
             class_name='border-top mt-3 pt-1',

diff --git a/src/npm-fastui-bootstrap/src/toast.tsx b/src/npm-fastui-bootstrap/src/toast.tsx
@@ -4,13 +4,13 @@ import BootstrapToast from 'react-bootstrap/Toast'
 import BootstrapToastContainer from 'react-bootstrap/ToastContainer'
 
 export const Toast: FC<components.ToastProps> = (props) => {
-  const { className, title, body, openTrigger, openContext } = props
+  const { className, title, body, position, openTrigger, openContext } = props
 
   const { eventContext, fireId, clear } = events.usePageEventListen(openTrigger, openContext)
 
   return (
     <EventContextProvider context={eventContext}>
-      <BootstrapToastContainer>
+      <BootstrapToastContainer position={position} className="position-fixed bottom-0 end-0 p-3">
         <BootstrapToast className={renderClassName(className)} show={!!fireId} onClose={clear}>
           <BootstrapToast.Header>
             <strong className="me-auto">{title}</strong>

diff --git a/src/npm-fastui/src/components/toast.tsx b/src/npm-fastui/src/components/toast.tsx
@@ -10,6 +10,16 @@ export interface ToastProps {
   type: 'Toast'
   title: string
   body: FastProps[]
+  position?:
+    | 'top-start'
+    | 'top-center'
+    | 'top-end'
+    | 'middle-start'
+    | 'middle-center'
+    | 'middle-end'
+    | 'bottom-start'
+    | 'bottom-center'
+    | 'bottom-end'
   openTrigger?: PageEvent
   openContext?: ContextType
   className?: ClassName

diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
@@ -254,6 +254,20 @@ class Custom(_p.BaseModel, extra='forbid'):
 class Toast(_p.BaseModel, extra='forbid'):
     title: str
     body: '_t.List[AnyComponent]'
+    position: _t.Union[
+        _t.Literal[
+            'top-start',
+            'top-center',
+            'top-end',
+            'middle-start',
+            'middle-center',
+            'middle-end',
+            'bottom-start',
+            'bottom-center',
+            'bottom-end',
+        ],
+        None,
+    ] = None
     open_trigger: _t.Union[events.PageEvent, None] = _p.Field(default=None, serialization_alias='openTrigger')
     open_context: _t.Union[events.ContextType, None] = _p.Field(default=None, serialization_alias='openContext')
     class_name: _class_name.ClassNameField = None

diff --git a/src/python-fastui/tests/react-fastui-json-schema.json b/src/python-fastui/tests/react-fastui-json-schema.json
@@ -1405,6 +1405,20 @@
         "openTrigger": {
           "$ref": "#/definitions/PageEvent"
         },
+        "position": {
+          "enum": [
+            "bottom-center",
+            "bottom-end",
+            "bottom-start",
+            "middle-center",
+            "middle-end",
+            "middle-start",
+            "top-center",
+            "top-end",
+            "top-start"
+          ],
+          "type": "string"
+        },
         "title": {
           "type": "string"
         },