From 7801af52bdedae8445c0fe6b6ea4a8d841c826ba Mon Sep 17 00:00:00 2001 From: observedobserver <270001151@qq.com> Date: Thu, 23 Nov 2023 14:31:45 -0800 Subject: [PATCH] fix: button reset value --- Home.py | 17 ++++++++++-- README.md | 14 ++++++++-- pyproject.toml | 2 +- .../src/components/streamlit/button.tsx | 27 ++++++++++++++++--- .../datePicker/datePickerTrigger.tsx | 2 +- .../py_components/alert_dialog.py | 13 ++++++--- streamlit_shadcn_ui/py_components/button.py | 10 ++++--- .../py_components/hover_card.py | 2 +- 8 files changed, 69 insertions(+), 18 deletions(-) diff --git a/Home.py b/Home.py index 88b669a..5debb3f 100644 --- a/Home.py +++ b/Home.py @@ -7,6 +7,18 @@ from streamlit_shadcn_ui import slider, input, textarea, radio_group, switch +ui_result = ui.button("Button", key="btn") +st.write("UI Button Clicked:", ui_result) + +st.write("before", st.session_state) + +st_result = st.button("Button", key="btn2") +st.write("ST Button Clicked:", st_result) + + +st.write("after", st.session_state) + + # Slider Component slider_value = slider(default_value=[20], min_value=0, max_value=100, step=2, label="Select a Range", key="slider1") st.write("Slider Value:", slider_value) @@ -32,5 +44,6 @@ switch_value = switch(default_checked=True, label="Toggle Switch", key="switch1") st.write("Switch is On:", switch_value) -# st.header("Button Component") -ui.alert_dialog(title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog1") \ No newline at end of file +st.header("Button Component") +trigger_btn = ui.button(text="Trigger Button", key="trigger_btn") +ui.alert_dialog(show=trigger_btn, title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog1") \ No newline at end of file diff --git a/README.md b/README.md index 287071a..8bf25d0 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,15 @@ Using shadcn-ui components in streamlit pip install streamlit-shadcn-ui ``` +example: +```py +import streamlit_shadcn_ui as ui +trigger_btn = ui.button(text="Trigger Button", key="trigger_btn") + +ui.alert_dialog(show=trigger_btn, title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog1") + +``` + ## Components Check docs and compoenent examples in [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://shadcn.streamlit.app/) @@ -21,7 +30,6 @@ Check docs and compoenent examples in [![Streamlit App](https://static.streamlit + [x] select + [x] tabs + [x] card -+ [x] containers + [x] avatar + [x] date_picker + [ ] date_range_picker @@ -30,4 +38,6 @@ Check docs and compoenent examples in [![Streamlit App](https://static.streamlit + [x] slider + [x] textarea + [x] switch -+ [x] radio_group \ No newline at end of file ++ [x] radio_group ++ [x] alert_dialog ++ [x] hover_card diff --git a/pyproject.toml b/pyproject.toml index dbbf8ed..3ec439e 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "streamlit-shadcn-ui" -version = "0.1.5" +version = "0.1.6" readme = "README.md" keywords = ["streamlit", "shadcn", "ui", "components"] description = "Using shadcn components in Streamlit" diff --git a/streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/button.tsx b/streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/button.tsx index 36fd3ed..6637633 100644 --- a/streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/button.tsx +++ b/streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/button.tsx @@ -1,16 +1,35 @@ import { Button, ButtonProps } from "@/components/ui/button"; -import { forwardRef } from "react"; +import { forwardRef, useCallback, useEffect, useRef } from "react"; +import { Streamlit } from "streamlit-component-lib"; interface StButtonProps { text?: string; variant?: ButtonProps['variant']; disabled?: boolean; - onClick?: () => void; } export const StButton = forwardRef((props: StButtonProps, ref) => { - const { text, disabled, onClick, variant } = props; + const { text, disabled, variant } = props; + + const queue = useRef<(() => void)[]>([]); + + const clickHandler = useCallback(() => { + queue.current = []; + Streamlit.setComponentValue(true); + queue.current.push(() => {}) + queue.current.push(() => { + Streamlit.setComponentValue(false); + }) + }, []) + + useEffect(() => { + if (queue.current.length > 0) { + const fn = queue.current.shift(); + fn?.(); + } + }) + return ( - ); diff --git a/streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/datePicker/datePickerTrigger.tsx b/streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/datePicker/datePickerTrigger.tsx index 56cd2c7..b1ec5d0 100644 --- a/streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/datePicker/datePickerTrigger.tsx +++ b/streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/datePicker/datePickerTrigger.tsx @@ -49,7 +49,7 @@ export const StDatePickerTrigger = forwardRef< } }, [open]); useBodyStyle("body { padding-right: 0.5em !important; }"); - console.log(label); + return ( diff --git a/streamlit_shadcn_ui/py_components/alert_dialog.py b/streamlit_shadcn_ui/py_components/alert_dialog.py index c2ec9a4..dcc4b88 100644 --- a/streamlit_shadcn_ui/py_components/alert_dialog.py +++ b/streamlit_shadcn_ui/py_components/alert_dialog.py @@ -1,8 +1,11 @@ from streamlit_shadcn_ui.py_components.utils.session import init_session from .utils import declare_component from streamlit_extras.stylable_container import stylable_container +from .button import button import streamlit as st -_component_func = declare_component("alert_dialog", release=False) + +_RELEASE = True +_component_func = declare_component("alert_dialog", release=_RELEASE) def dialog_layer(props, open_status=False, key=None): container = stylable_container(key=f"dialog_layer_{key}", css_styles=f""" @@ -25,8 +28,12 @@ def dialog_layer(props, open_status=False, key=None): return component_value -def alert_dialog(title: str, description: str, confirm_label: str=None, cancel_label: str=None, key = None): +def alert_dialog(show: bool, title: str, description: str, confirm_label: str=None, cancel_label: str=None, key = None): props = {"title": title, "description": description, "confirmLabel": confirm_label, "cancelLabel": cancel_label} - init_session(key=key, default_value={"open": True, "confirm": False }) + init_session(key=key, default_value={"open": False, "confirm": False }) + # trigger_button = button(text="Trigger", key=f"trigger_{key}") + if show: + st.session_state[key]['open'] = True component_state = dialog_layer(props=props, key=key, open_status=st.session_state[key]['open']) + return component_state['confirm'] diff --git a/streamlit_shadcn_ui/py_components/button.py b/streamlit_shadcn_ui/py_components/button.py index 6c683e2..eff2479 100644 --- a/streamlit_shadcn_ui/py_components/button.py +++ b/streamlit_shadcn_ui/py_components/button.py @@ -1,8 +1,10 @@ from .utils import declare_component +_RELEASE = True + +_component_func = declare_component("button", release=_RELEASE) -_component_func = declare_component("button") # variant "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" -def button(text: str, variant: str = None, key = None): +def button(text: str, variant: str = "default", key = None): props = {"text": text, "variant": variant} - component_value = _component_func(comp="button", props=props, key=key, default=None) - return component_value + clicked = _component_func(comp="button", props=props, key=key, default=False) + return clicked diff --git a/streamlit_shadcn_ui/py_components/hover_card.py b/streamlit_shadcn_ui/py_components/hover_card.py index 94e9d9a..58ce952 100644 --- a/streamlit_shadcn_ui/py_components/hover_card.py +++ b/streamlit_shadcn_ui/py_components/hover_card.py @@ -4,7 +4,7 @@ import streamlit as st from .utils import init_session -_RELEASE = False +_RELEASE = True def hover_card_trigger(label=None, open_status=False, key=None): name = "hover_card_trigger"